@progress/kendo-cli 1.1.0 → 1.1.2

package/dist/index.js

@@ -389,11 +389,23 @@ class CreatejQueryAdminApp extends scaffolding_1.ProjectTemplate {
         }
         else {}
     }
+    async getCdnVersion() {
+        if (this.options.cdn == undefined) {
+            let jsonSchema = await CreatejQueryAdminApp.schema();
+            let cdnVersion = jsonSchema.properties.cdn.default;
+            return cdnVersion;
+        }
+        else {
+            let cdnVersion = this.options.cdn;
+            return cdnVersion;
+        }
+    }
     async applyKendoTheme(file, content) {
         const filePaths = [`pages/index.html`, `pages/Signin.html`, `pages/Signup.html`];
+        const cdnVersion = await this.getCdnVersion();
         const theme = this.options.theme;
         const regex = "https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css";
-        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;
+        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;
         for (const filePath of filePaths) {
             if (file.includes(filePath)) {
                 let updatedContent = content.replace(regex, replacementRegex);
@@ -17576,7 +17588,7 @@ module.exports = "[\n\t{\n\t\t\"Year\": \"2020\",\n\t\t\"Month\": \"January\",\n
   \*********************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryAdminApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryAdminApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`, `pages/Signin.html`, `pages/Signup.html`];\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-admin`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryAdminApp = CreatejQueryAdminApp;\n";
+module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryAdminApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryAdminApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async getCdnVersion() {\n        if (this.options.cdn == undefined) {\n            let jsonSchema = await CreatejQueryAdminApp.schema();\n            let cdnVersion = jsonSchema.properties.cdn.default;\n            return cdnVersion;\n        }\n        else {\n            let cdnVersion = this.options.cdn;\n            return cdnVersion;\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`, `pages/Signin.html`, `pages/Signup.html`];\n        const cdnVersion = await this.getCdnVersion();\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-admin`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryAdminApp = CreatejQueryAdminApp;\n";
 
 /***/ }),
 
@@ -17656,7 +17668,7 @@ module.exports = "<div id=\"settings-tilelayout\"></div>\n<ul id=\"plan-cards-me
   \******************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Admin Dashboard</title>\n    <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" />\n\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n    <script src=\"https://code.jquery.com/jquery-3.4.1.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/jszip.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js\"></script>\n</head>\n\n<body>\n    <div id=\"sign-in-page\">\n        <div id=\"sign-in-wrapper\">\n            <div id=\"logo-wrapper\">\n                <div id=\"logo\">\n                    <img src=\"../assets/images/images/signin-logo.svg\"></img>\n                </div>\n                <div id='banner'>\n                    Sign In\n                </div>\n                <div id=\"account\">\n                    Don't have an account? <a href=\"Signup.html\">Sign up</a>\n                </div>\n            </div>\n            <div id=\"inputs-wrapper\">\n                <form id=\"login\"></form>\n            </div>\n            <div id=\"continue-with-wrapper\">\n                <hr> <span>Or continue with</span>\n                <hr>\n            </div>\n            <div id=\"social-wrapper\">\n                <a href=\"#\" class='facebook'>\n                    <img src=\"../assets/images/images/facebook.svg\"></img>\n                </a>\n                <a href=\"#\" class='twitter'>\n                    <img src=\"../assets/images/images/twitter.svg\"></img>\n                </a>\n                <a href=\"#\" class='reddit'>\n                    <img src=\"../assets/images/images/reddit.svg\"></img>\n                </a>\n            </div>\n        </div>\n        <div id=\"frame-wrapper\">\n            <div id=\"text-wrapper\">\n                <h2>How Does Kendo UI Cut Development Time?</h2>\n                <h4>Kendo UI delivers everything you need to build modern, beautiful, responsive apps.</h4>\n                <div id=\"image-wrapper\">\n                    <img src=\"/assets/images/images/kendoka-waves.svg\"></img>\n                </div>\n            </div>\n        </div>\n    </div>\n    <script>\n       \n    </script>\n\n    <style>\n        body {\n            margin: 0;\n            font-family: Roboto;\n            font-style: normal;\n            font-weight: normal;\n        }\n\n        span.k-textbox {\n            width: 100%;\n        }\n\n        #preview {\n            z-index: 10;\n            position: absolute;\n            bottom: 2px;\n            right: 5px;\n            width: 24px;\n            height: 24px;\n            color: gray;\n        }\n\n        #logo-wrapper {\n            height: 370px;\n            width: 270px;\n\n        }\n\n        #logo {\n            height: 186px;\n            width: 270px;\n        }\n\n        #banner {\n            height: 68px;\n            color: #2727BE;\n            font-weight: 300;\n            font-size: 56px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-top: 32px;\n        }\n\n        #account {\n            position: relative;\n            height: 20px;\n            left: 31.5px;\n            margin: 32px 0px 32px 0px;\n            font-size: 14px;\n\n        }\n\n        #account>a {\n            margin-left: 16px;\n            color: #0058E9;\n        }\n\n        #continue-with-wrapper {\n            display: inline-flex;\n            height: 20px;\n            width: 270px;\n            margin-bottom: 16px;\n            margin-top: 16px;\n\n        }\n\n        #continue-with-wrapper>span {\n            position: static;\n            color: #8F8F8F;\n            font-size: 14px;\n            line-height: 20px;\n\n        }\n\n        hr {\n            width: 75px;\n            height: 0px;\n            border: 1px solid #8F8F8F;\n        }\n\n        #sign-in-page {\n            position: relative;\n            height: 100vh;\n            display: flex;\n            background: linear-gradient(16.66deg, #070B46 45.27%, #2D2DD3 100%);\n        }\n\n        #sign-in-wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            min-width: 560px;\n            width: 39%;\n            z-index: 1;\n            background: #FFFFFF;\n        }\n\n        #login {\n            height: 202px;\n            width: 270px;\n            justify-content: space-between;\n            display: flex;\n            flex-flow: column;\n\n        }\n\n        div.k-form-field:nth-child(3) {\n            display: flex;\n        }\n\n        #RememberMe-form-label {\n            order: 1;\n            padding-left: 0.5em;\n        }\n\n        .k-form-field-wrap {\n            position: relative;\n        }\n\n        .k-button,\n        .k-button:hover {\n            height: 30px;\n            width: 270px;\n            background: #FF6358;\n            color: #FFFFFF;\n\n        }\n\n        #social-wrapper {\n            display: flex;\n            width: 194px;\n            height: 30px;\n            top: 755px;\n            left: 183px;\n\n        }\n\n        .facebook {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 15px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .twitter {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .reddit {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        #image-wrapper {\n            position: absolute;\n            right: 0;\n            bottom: 0;\n            overflow: hidden;\n            width: 61%;\n        }\n\n        #image-wrapper img {\n            width: 100%;\n        }\n\n        #frame-wrapper {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            height: 100vh;\n            width: 61%;\n            max-width: 542px;\n            margin: 0 auto;\n\n        }\n\n        #frame-wrapper h2 {\n            font-size: 48px;\n            color: #FFFFFF;\n            font-weight: bold;\n            text-align: center;\n            line-height: 1.4;\n        }\n\n        #frame-wrapper h4 {\n            font-size: 19px;\n            text-align: center;\n            color: #FFFFFF;\n            font-weight: normal;\n            line-height: 1.3;\n        }\n\n        #wave {\n            width: 100vw;\n        }\n\n        #text-wrapper {\n            margin-top: 5vh;\n        }\n    </style>\n</body>\n\n</html>";
+module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Admin Dashboard</title>\n    <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" />\n    <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" />\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n    <script src=\"https://code.jquery.com/jquery-3.4.1.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/jszip.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js\"></script>\n</head>\n\n<body>\n    <div id=\"sign-in-page\">\n        <div id=\"sign-in-wrapper\">\n            <div id=\"logo-wrapper\">\n                <div id=\"logo\">\n                    <img src=\"../assets/images/images/signin-logo.svg\"></img>\n                </div>\n                <div id='banner'>\n                    Sign In\n                </div>\n                <div id=\"account\">\n                    Don't have an account? <a href=\"Signup.html\">Sign up</a>\n                </div>\n            </div>\n            <div id=\"inputs-wrapper\">\n                <form id=\"login\"></form>\n            </div>\n            <div id=\"continue-with-wrapper\">\n                <hr> <span>Or continue with</span>\n                <hr>\n            </div>\n            <div id=\"social-wrapper\">\n                <a href=\"#\" class='facebook'>\n                    <img src=\"../assets/images/images/facebook.svg\"></img>\n                </a>\n                <a href=\"#\" class='twitter'>\n                    <img src=\"../assets/images/images/twitter.svg\"></img>\n                </a>\n                <a href=\"#\" class='reddit'>\n                    <img src=\"../assets/images/images/reddit.svg\"></img>\n                </a>\n            </div>\n        </div>\n        <div id=\"frame-wrapper\">\n            <div id=\"text-wrapper\">\n                <h2>How Does Kendo UI Cut Development Time?</h2>\n                <h4>Kendo UI delivers everything you need to build modern, beautiful, responsive apps.</h4>\n                <div id=\"image-wrapper\">\n                    <img src=\"/assets/images/images/kendoka-waves.svg\"></img>\n                </div>\n            </div>\n        </div>\n    </div>\n    <script>\n       \n    </script>\n\n    <style>\n        body {\n            margin: 0;\n            font-family: Roboto;\n            font-style: normal;\n            font-weight: normal;\n        }\n\n        span.k-textbox {\n            width: 100%;\n        }\n\n        #preview {\n            z-index: 10;\n            position: absolute;\n            bottom: 2px;\n            right: 5px;\n            width: 24px;\n            height: 24px;\n            color: gray;\n        }\n\n        #logo-wrapper {\n            height: 370px;\n            width: 270px;\n\n        }\n\n        #logo {\n            height: 186px;\n            width: 270px;\n        }\n\n        #banner {\n            height: 68px;\n            color: #2727BE;\n            font-weight: 300;\n            font-size: 56px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-top: 32px;\n        }\n\n        #account {\n            position: relative;\n            height: 20px;\n            left: 31.5px;\n            margin: 32px 0px 32px 0px;\n            font-size: 14px;\n\n        }\n\n        #account>a {\n            margin-left: 16px;\n            color: #0058E9;\n        }\n\n        #continue-with-wrapper {\n            display: inline-flex;\n            height: 20px;\n            width: 270px;\n            margin-bottom: 16px;\n            margin-top: 16px;\n\n        }\n\n        #continue-with-wrapper>span {\n            position: static;\n            color: #8F8F8F;\n            font-size: 14px;\n            line-height: 20px;\n\n        }\n\n        hr {\n            width: 75px;\n            height: 0px;\n            border: 1px solid #8F8F8F;\n        }\n\n        #sign-in-page {\n            position: relative;\n            height: 100vh;\n            display: flex;\n            background: linear-gradient(16.66deg, #070B46 45.27%, #2D2DD3 100%);\n        }\n\n        #sign-in-wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            min-width: 560px;\n            width: 39%;\n            z-index: 1;\n            background: #FFFFFF;\n        }\n\n        #login {\n            height: 202px;\n            width: 270px;\n            justify-content: space-between;\n            display: flex;\n            flex-flow: column;\n\n        }\n\n        div.k-form-field:nth-child(3) {\n            display: flex;\n        }\n\n        #RememberMe-form-label {\n            order: 1;\n            padding-left: 0.5em;\n        }\n\n        .k-form-field-wrap {\n            position: relative;\n        }\n\n        .k-button,\n        .k-button:hover {\n            height: 30px;\n            width: 270px;\n            background: #FF6358;\n            color: #FFFFFF;\n\n        }\n\n        #social-wrapper {\n            display: flex;\n            width: 194px;\n            height: 30px;\n            top: 755px;\n            left: 183px;\n\n        }\n\n        .facebook {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 15px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .twitter {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .reddit {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        #image-wrapper {\n            position: absolute;\n            right: 0;\n            bottom: 0;\n            overflow: hidden;\n            width: 61%;\n        }\n\n        #image-wrapper img {\n            width: 100%;\n        }\n\n        #frame-wrapper {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            height: 100vh;\n            width: 61%;\n            max-width: 542px;\n            margin: 0 auto;\n\n        }\n\n        #frame-wrapper h2 {\n            font-size: 48px;\n            color: #FFFFFF;\n            font-weight: bold;\n            text-align: center;\n            line-height: 1.4;\n        }\n\n        #frame-wrapper h4 {\n            font-size: 19px;\n            text-align: center;\n            color: #FFFFFF;\n            font-weight: normal;\n            line-height: 1.3;\n        }\n\n        #wave {\n            width: 100vw;\n        }\n\n        #text-wrapper {\n            margin-top: 5vh;\n        }\n    </style>\n</body>\n\n</html>";
 
 /***/ }),
 
@@ -17666,7 +17678,7 @@ module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\"
   \******************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Admin Dashboard</title>\n    <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" />\n\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n    <script src=\"https://code.jquery.com/jquery-3.4.1.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/jszip.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js\"></script>\n</head>\n\n<body>\n    <div id=\"sign-in-page\">\n        <div id=\"sign-in-wrapper\">\n            <div id=\"logo-wrapper\">\n                <div id=\"logo\">\n                    <img src=\"../assets/images/images/signin-logo.svg\"></img>\n                </div>\n                <div id='banner'>\n                    Sign Up\n                </div>\n                <div id=\"account\">\n                    Already have an account? <a href=\"Signin.html\">Sign In</a>\n                </div>\n            </div>\n            <div id=\"inputs-wrapper\">\n                <form id=\"signup\"></form>\n            </div>\n        </div>\n        <div id=\"frame-wrapper\">\n            <div id=\"text-wrapper\">\n                <h2>How Does Kendo UI Cut Development Time?</h2>\n                <h4>Kendo UI delivers everything you need to build modern, beautiful, responsive apps.</h4>\n                <div id=\"image-wrapper\">\n                    <img src=\"../assets/images/images/kendoka-waves.svg\"></img>\n                </div>\n            </div>\n        </div>\n    </div>\n    <script>\n       \n    </script>\n\n    <style>\n        body {\n            margin: 0;\n            font-family: Roboto;\n            font-style: normal;\n            font-weight: normal;\n        }\n\n        span.k-textbox {\n            width: 100%;\n        }\n\n        #logo-wrapper {\n            height: 370px;\n            width: 270px;\n\n        }\n\n        #logo {\n            height: 186px;\n            width: 270px;\n        }\n\n        #signup.k-form .k-form-field-wrap {\n            display: flex;\n        }\n\n        #banner {\n            height: 68px;\n            color: #2727BE;\n            font-weight: 300;\n            font-size: 56px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-top: 32px;\n        }\n\n        #account {\n            position: relative;\n            height: 20px;\n            left: 31.5px;\n            margin: 32px 0px 32px 0px;\n            font-size: 14px;\n\n        }\n\n        #account>a {\n            margin-left: 16px;\n            color: #0058E9;\n        }\n\n        #continue-with-wrapper {\n            display: inline-flex;\n            height: 20px;\n            width: 270px;\n            margin-bottom: 16px;\n\n        }\n\n        #continue-with-wrapper>span {\n            position: static;\n            color: #8F8F8F;\n            font-size: 14px;\n            line-height: 20px;\n\n        }\n\n        div.k-form-field:nth-child(5) {\n            display: flex;\n        }\n\n        #agree-form-label {\n            display: block;\n            order: 1;\n            padding-left: 0.5em;\n        }\n\n        div.k-form-field:nth-child(3) {\n            position: relative;\n        }\n\n        #preview {\n            z-index: 10;\n            position: absolute;\n            bottom: 2px;\n            right: 5px;\n            width: 24px;\n            height: 24px;\n            color: gray;\n        }\n\n        hr {\n            width: 75px;\n            height: 0px;\n            border: 1px solid #8F8F8F;\n        }\n\n        #sign-in-page {\n            position: relative;\n            height: 100vh;\n            display: flex;\n            background: linear-gradient(16.66deg, #070B46 45.27%, #2D2DD3 100%);\n        }\n\n        #sign-in-wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            min-width: 560px;\n            width: 39%;\n            z-index: 1;\n            background: #FFFFFF;\n        }\n\n        #signup {\n            height: 346px;\n            width: 270px;\n            padding: 16px 0px 16px 0px;\n            justify-content: space-between;\n            display: flex;\n            flex-flow: column;\n\n        }\n\n        #email {\n            height: 30px;\n            width: 270px;\n            top: calc(50% - 30px/2);\n        }\n\n        #password {\n            height: 30px;\n            width: 270px;\n\n        }\n\n        .k-button,\n        .k-button:hover {\n            height: 30px;\n            width: 270px;\n            background: #FF6358 !important;\n            color: #FFFFFF;\n\n        }\n\n        #social-wrapper {\n            display: flex;\n            width: 194px;\n            height: 30px;\n            top: 755px;\n            left: 183px;\n\n        }\n\n        .facebook {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 15px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .twitter {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .reddit {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        #image-wrapper {\n            position: absolute;\n            right: 0;\n            bottom: 0;\n            overflow: hidden;\n            width: 61%;\n        }\n\n        #image-wrapper img {\n            width: 100%;\n        }\n\n        #frame-wrapper {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            height: 100vh;\n            width: 61%;\n            max-width: 542px;\n            margin: 0 auto;\n\n        }\n\n        #frame-wrapper h2 {\n            font-size: 48px;\n            color: #FFFFFF;\n            font-weight: bold;\n            text-align: center;\n            line-height: 1.4;\n        }\n\n        #frame-wrapper h4 {\n            font-size: 19px;\n            text-align: center;\n            color: #FFFFFF;\n            font-weight: normal;\n            line-height: 1.3;\n        }\n\n        #wave {\n            width: 100vw;\n        }\n\n        #text-wrapper {\n            margin-top: 5vh;\n        }\n    </style>\n</body>\n\n</html>";
+module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Admin Dashboard</title>\n    <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" />\n    <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" />\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n    <script src=\"https://code.jquery.com/jquery-3.4.1.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/jszip.min.js\"></script>\n    <script src=\"https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js\"></script>\n</head>\n\n<body>\n    <div id=\"sign-in-page\">\n        <div id=\"sign-in-wrapper\">\n            <div id=\"logo-wrapper\">\n                <div id=\"logo\">\n                    <img src=\"../assets/images/images/signin-logo.svg\"></img>\n                </div>\n                <div id='banner'>\n                    Sign Up\n                </div>\n                <div id=\"account\">\n                    Already have an account? <a href=\"Signin.html\">Sign In</a>\n                </div>\n            </div>\n            <div id=\"inputs-wrapper\">\n                <form id=\"signup\"></form>\n            </div>\n        </div>\n        <div id=\"frame-wrapper\">\n            <div id=\"text-wrapper\">\n                <h2>How Does Kendo UI Cut Development Time?</h2>\n                <h4>Kendo UI delivers everything you need to build modern, beautiful, responsive apps.</h4>\n                <div id=\"image-wrapper\">\n                    <img src=\"../assets/images/images/kendoka-waves.svg\"></img>\n                </div>\n            </div>\n        </div>\n    </div>\n    <script>\n       \n    </script>\n\n    <style>\n        body {\n            margin: 0;\n            font-family: Roboto;\n            font-style: normal;\n            font-weight: normal;\n        }\n\n        span.k-textbox {\n            width: 100%;\n        }\n\n        #logo-wrapper {\n            height: 370px;\n            width: 270px;\n\n        }\n\n        #logo {\n            height: 186px;\n            width: 270px;\n        }\n\n        #signup.k-form .k-form-field-wrap {\n            display: flex;\n        }\n\n        #banner {\n            height: 68px;\n            color: #2727BE;\n            font-weight: 300;\n            font-size: 56px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-top: 32px;\n        }\n\n        #account {\n            position: relative;\n            height: 20px;\n            left: 31.5px;\n            margin: 32px 0px 32px 0px;\n            font-size: 14px;\n\n        }\n\n        #account>a {\n            margin-left: 16px;\n            color: #0058E9;\n        }\n\n        #continue-with-wrapper {\n            display: inline-flex;\n            height: 20px;\n            width: 270px;\n            margin-bottom: 16px;\n\n        }\n\n        #continue-with-wrapper>span {\n            position: static;\n            color: #8F8F8F;\n            font-size: 14px;\n            line-height: 20px;\n\n        }\n\n        div.k-form-field:nth-child(5) {\n            display: flex;\n        }\n\n        #agree-form-label {\n            display: block;\n            order: 1;\n            padding-left: 0.5em;\n        }\n\n        div.k-form-field:nth-child(3) {\n            position: relative;\n        }\n\n        #preview {\n            z-index: 10;\n            position: absolute;\n            bottom: 2px;\n            right: 5px;\n            width: 24px;\n            height: 24px;\n            color: gray;\n        }\n\n        hr {\n            width: 75px;\n            height: 0px;\n            border: 1px solid #8F8F8F;\n        }\n\n        #sign-in-page {\n            position: relative;\n            height: 100vh;\n            display: flex;\n            background: linear-gradient(16.66deg, #070B46 45.27%, #2D2DD3 100%);\n        }\n\n        #sign-in-wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            min-width: 560px;\n            width: 39%;\n            z-index: 1;\n            background: #FFFFFF;\n        }\n\n        #signup {\n            height: 346px;\n            width: 270px;\n            padding: 16px 0px 16px 0px;\n            justify-content: space-between;\n            display: flex;\n            flex-flow: column;\n\n        }\n\n        #email {\n            height: 30px;\n            width: 270px;\n            top: calc(50% - 30px/2);\n        }\n\n        #password {\n            height: 30px;\n            width: 270px;\n\n        }\n\n        .k-button,\n        .k-button:hover {\n            height: 30px;\n            width: 270px;\n            background: #FF6358 !important;\n            color: #FFFFFF;\n\n        }\n\n        #social-wrapper {\n            display: flex;\n            width: 194px;\n            height: 30px;\n            top: 755px;\n            left: 183px;\n\n        }\n\n        .facebook {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 15px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .twitter {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        .reddit {\n            height: 30px;\n            width: 30px;\n            left: 20px;\n            top: 0px;\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            margin-left: 35px;\n            background: rgba(66, 66, 66, 0.04);\n            border-radius: 2px;\n\n        }\n\n        #image-wrapper {\n            position: absolute;\n            right: 0;\n            bottom: 0;\n            overflow: hidden;\n            width: 61%;\n        }\n\n        #image-wrapper img {\n            width: 100%;\n        }\n\n        #frame-wrapper {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            height: 100vh;\n            width: 61%;\n            max-width: 542px;\n            margin: 0 auto;\n\n        }\n\n        #frame-wrapper h2 {\n            font-size: 48px;\n            color: #FFFFFF;\n            font-weight: bold;\n            text-align: center;\n            line-height: 1.4;\n        }\n\n        #frame-wrapper h4 {\n            font-size: 19px;\n            text-align: center;\n            color: #FFFFFF;\n            font-weight: normal;\n            line-height: 1.3;\n        }\n\n        #wave {\n            width: 100vw;\n        }\n\n        #text-wrapper {\n            margin-top: 5vh;\n        }\n    </style>\n</body>\n\n</html>";
 
 /***/ }),
 
@@ -17676,7 +17688,7 @@ module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\"
   \*****************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Admin Dashboard</title>\n    <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" />\n\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">    \n</head>\n<body>\n\n\n    <script id=\"notification-body\" type=\"text/x-kendo-template\">\n        <div class=\"notification-item\" style=\"padding: 18px 16px 13px 16px; border-bottom: 1px solid rgba(0,0,0,.08);\">\n            <span class=\"badge-missed\"></span>\n            <div class=\"user-photo\" style=\"background-image: url(/assets/images/Employees/9.jpg); margin:0px 16px 0px 8px;\"></div>\n            <div class=\"customer-name\">\n                <div style=\"font-size: 18px\">Rudolf joined the Team</div>\n                <div style=\"font-size: 14px; color: \\#8F8F8F\">Congratulate her</div>\n            </div>\n        </div>\n        <div class=\"notification-item\" style=\"padding: 13px 16px 13px 16px; border-bottom: 1px solid rgba(0,0,0,.08);\">\n            <span class=\"badge-missed\"></span>\n            <div class=\"user-photo\" style=\"background-image: url(/assets/images/Employees/4.jpg); margin:0px 16px 0px 8px;\"></div>\n            <div class=\"customer-name\">\n                <div style=\"font-size: 18px\">Joy invited you to the class</div>\n                <div style=\"font-size: 14px; color: \\#8F8F8F\">You have 3 more messages from Joy</div>\n            </div>\n        </div>\n        <div class=\"notification-item\" style=\"padding: 13px 16px 13px 16px; background-color: rgba(66, 66, 66, 0.04); border-bottom: 1px solid rgba(0,0,0,.08);\">\n            <div class=\"user-photo\" style=\"background-image: url(/assets/images/images/initials.jpg); margin:0px 16px 0px 8px;\"></div>\n            <div class=\"customer-name\">\n                <div style=\"font-size: 18px\">Your order has been shipped</div>\n                <div style=\"font-size: 14px; color: \\#8F8F8F\">MD Inc. order update</div>\n            </div>\n        </div>\n        <button id=\"mark-as-read\" style=\"margin: 15px 15px 0px 0px; background-color: \\#FFFFFF; border-color: \\#FF6358; color:\\#FF6358; width: 165px; float: right;\">Mark all as read</button>\n    </script>\n \n    <script id=\"notification-header\" type=\"text/x-kendo-template\">\n        <div class=\"k-hstack\">\n            <div style=\"font-size: 19px\">Notifications</div>\n            <div class=\"k-spacer\"></div>\n            <div id=\"new-count\">2 New</div>\n        </div>\n    </script>\n \n    <div id=\"drawer\">\n        <div id=\"drawer-content\">\n            <div id=\"appbar\"></div>\n            <main></main>\n        </div>\n    </div>\n    <style>\n        body {\n            margin: 0px;\n            font-family: Roboto;\n            font-style: normal;\n            font-weight: normal;\n        }\n\n        #appbar {\n            padding: 0px 25px 0px 24px;\n            height: 48px;\n            background: #FFFFFF;\n            box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.06);\n        }\n\n        #avatar {\n            margin: 32px auto 0;\n            width: 64px;\n            border-radius: 50%;\n        }\n\n        #signOutButton {\n            pointer-events: auto;\n            margin: 12px 0 9px 0;\n            background: rgba(66, 66, 66, 0.16);\n        }\n\n        #drawer-content {\n            background-color: #FAFAFA;\n        }\n\n        .k-popover-callout {\n            display: none;\n        }\n\n        .k-popover-body {\n            padding: 0px;\n        }\n\n        .user-photo {\n            display: inline-block;\n            width: 64px;\n            height: 64px;\n            border-radius: 50%;\n            background-size: 60px 64px;\n            background-position: center center;\n            vertical-align: middle;\n            line-height: 64px;\n            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, 0.2);\n            margin-left: 5px;\n        }\n\n        .customer-name {\n            display: inline-block;\n            vertical-align: middle;\n            padding-left: 3 px;\n        }\n    </style>\n</body>\n\n</html>";
+module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Admin Dashboard</title>\n    <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" />\n    <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" />\n\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap\" rel=\"stylesheet\">    \n</head>\n<body>\n\n\n    <script id=\"notification-body\" type=\"text/x-kendo-template\">\n        <div class=\"notification-item\" style=\"padding: 18px 16px 13px 16px; border-bottom: 1px solid rgba(0,0,0,.08);\">\n            <span class=\"badge-missed\"></span>\n            <div class=\"user-photo\" style=\"background-image: url(/assets/images/Employees/9.jpg); margin:0px 16px 0px 8px;\"></div>\n            <div class=\"customer-name\">\n                <div style=\"font-size: 18px\">Rudolf joined the Team</div>\n                <div style=\"font-size: 14px; color: \\#8F8F8F\">Congratulate her</div>\n            </div>\n        </div>\n        <div class=\"notification-item\" style=\"padding: 13px 16px 13px 16px; border-bottom: 1px solid rgba(0,0,0,.08);\">\n            <span class=\"badge-missed\"></span>\n            <div class=\"user-photo\" style=\"background-image: url(/assets/images/Employees/4.jpg); margin:0px 16px 0px 8px;\"></div>\n            <div class=\"customer-name\">\n                <div style=\"font-size: 18px\">Joy invited you to the class</div>\n                <div style=\"font-size: 14px; color: \\#8F8F8F\">You have 3 more messages from Joy</div>\n            </div>\n        </div>\n        <div class=\"notification-item\" style=\"padding: 13px 16px 13px 16px; background-color: rgba(66, 66, 66, 0.04); border-bottom: 1px solid rgba(0,0,0,.08);\">\n            <div class=\"user-photo\" style=\"background-image: url(/assets/images/images/initials.jpg); margin:0px 16px 0px 8px;\"></div>\n            <div class=\"customer-name\">\n                <div style=\"font-size: 18px\">Your order has been shipped</div>\n                <div style=\"font-size: 14px; color: \\#8F8F8F\">MD Inc. order update</div>\n            </div>\n        </div>\n        <button id=\"mark-as-read\" style=\"margin: 15px 15px 0px 0px; background-color: \\#FFFFFF; border-color: \\#FF6358; color:\\#FF6358; width: 165px; float: right;\">Mark all as read</button>\n    </script>\n \n    <script id=\"notification-header\" type=\"text/x-kendo-template\">\n        <div class=\"k-hstack\">\n            <div style=\"font-size: 19px\">Notifications</div>\n            <div class=\"k-spacer\"></div>\n            <div id=\"new-count\">2 New</div>\n        </div>\n    </script>\n \n    <div id=\"drawer\">\n        <div id=\"drawer-content\">\n            <div id=\"appbar\"></div>\n            <main></main>\n        </div>\n    </div>\n    <style>\n        body {\n            margin: 0px;\n            font-family: Roboto;\n            font-style: normal;\n            font-weight: normal;\n        }\n\n        #appbar {\n            padding: 0px 25px 0px 24px;\n            height: 48px;\n            background: #FFFFFF;\n            box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.06);\n        }\n\n        #avatar {\n            margin: 32px auto 0;\n            width: 64px;\n            border-radius: 50%;\n        }\n\n        #signOutButton {\n            pointer-events: auto;\n            margin: 12px 0 9px 0;\n            background: rgba(66, 66, 66, 0.16);\n        }\n\n        #drawer-content {\n            background-color: #FAFAFA;\n        }\n\n        .k-popover-callout {\n            display: none;\n        }\n\n        .k-popover-body {\n            padding: 0px;\n        }\n\n        .user-photo {\n            display: inline-block;\n            width: 64px;\n            height: 64px;\n            border-radius: 50%;\n            background-size: 60px 64px;\n            background-position: center center;\n            vertical-align: middle;\n            line-height: 64px;\n            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, 0.2);\n            margin-left: 5px;\n        }\n\n        .customer-name {\n            display: inline-block;\n            vertical-align: middle;\n            padding-left: 3 px;\n        }\n    </style>\n</body>\n\n</html>";
 
 /***/ }),
 
@@ -17686,7 +17698,7 @@ module.exports = "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\"
   \************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "{\n    \"title\": \"jqa\",\n    \"description\": \"Create jQuery Admin app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryAdminApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
+module.exports = "{\n  \"title\": \"jqa\",\n  \"description\": \"Create jQuery Admin app\",\n  \"type\": \"object\",\n  \"properties\": {\n    \"path\": {\n      \"type\": \"string\",\n      \"hidden\": true,\n      \"description\": \"Path to generate the app into.\"\n    },\n    \"name\": {\n      \"type\": \"string\",\n      \"displayName\": \"Application Name\",\n      \"description\": \"Name of the generated application.\",\n      \"default\": \"MyjQueryAdminApp\"\n    },\n    \"theme\": {\n      \"type\": \"string\",\n      \"description\": \"Kendo theme to apply.\",\n      \"default\": \"default\",\n      \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n    },\n    \"cdn\": {\n        \"type\": \"string\",\n        \"default\": \"8.2.1\",\n        \"description\": \"Version of the CDN to pull themes from.\"\n    }\n  },\n  \"additionalProperties\": false,\n  \"required\": [\"path\", \"name\"]\n}\n";
 
 /***/ }),
 
@@ -17706,7 +17718,7 @@ module.exports = "";
   \*****************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = " import '@progress/kendo-ui/js/kendo.tilelayout';\n import '@progress/kendo-ui/js/kendo.grid';\n import '@progress/kendo-ui/js/kendo.rating';\n import '@progress/kendo-ui/js/kendo.menu';\n import '@progress/kendo-ui/js/kendo.daterangepicker';\n import '@progress/kendo-ui/js/kendo.buttongroup';\n import '@progress/kendo-ui/js/kendo.dataviz.gauge';\n import '@progress/kendo-ui/js/kendo.dataviz.chart';\n import '@progress/kendo-ui/js/kendo.data';\n import {myTeamData} from '../common/my-team-data';\n import {regionSalesRevenue} from '../common/region-sales-revenue';\n import {regionSalesCount} from '../common/region-sales-count';\n import {allTeamsData} from '../common/all-teams-data';\n\nvar tilelayout = $(\"#dashboard-tilelayout\").kendoTileLayout({\n    containers: [\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Tasks On Track</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div style=\"font-size: 84px; line-height: 101px; font-weight: 300; color: \\\\#37B400\">22</div>\n        <div class=\"template-footer\">In Backlog: 43</div>`\n      },\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Overdue Tasks</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div style=\"font-size: 84px; line-height: 101px; font-weight: 300; color: \\\\#F31700\">7</div>\n        <div class=\"template-footer\">From Yesterday: 16</div>`\n      },\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Issues</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div style=\"font-size: 84px; line-height: 101px; font-weight: 300; color: \\\\#FFC000\">47</div>\n      <div class=\"template-footer\">Closed By Team: 15</div>`\n      },\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Used Space</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div id=\"gauge\"></div>\n        <div class=\"template-footer\">25 of 50GB Used</div>`\n      },\n      {\n        colSpan: 4,\n        rowSpan: 2,\n        header: {\n          template: ({}) => ` <span class=\"points-header\" style=\"display: inline-block;\">Total Points</span>\n          <div id=\"range-selection\" title=\"daterangepicker\" style=\"display: inline;\"></div>\n        <span id=\"trend-volume-buttons\" style=\"float: right; padding: 23px 16px 0 0;\"></span>`\n        },\n        bodyTemplate: ({}) => `<div id=\"total-points-chart\" style=\"height:100%; width:100%\"></div>`\n      },\n      {\n        colSpan: 4,\n        rowSpan: 3,\n        header: {\n          template: ({}) => `<span class=\"mkteam-header\" style=\"display: inline-block; margin-top: 16px\">MK Team</span>\n          <span id=\"grid-button-group\" style=\"float: right; padding: 12px 0 0 0;\"></span>`\n        },\n        bodyTemplate: ({}) => `<div id=\"my-team-grid\"></div>`\n      }\n    ],\n    columns: 4,\n    columnsWidth: \"25%\",\n    rowsHeight: \"230px\",\n    reorderable: true,\n    resizable: true,\n    resize: function (e) {\n      // for widgets that do not auto resize\n      kendo.resize(e.container, true);\n    }\n  }).data(\"kendoTileLayout\");\n\n  $(\"#options-menu\").kendoContextMenu({\n    target: \"#dashboard-tilelayout\",\n    filter: \".contextMenuButton\",\n    showOn: \"click\",\n    select: function (e) {\n      var itemId = $(e.target).closest(\".k-tilelayout-item\").attr(\"id\");\n      var mainItems = tilelayout.items;\n      var item = tilelayout.itemsMap[itemId];\n\n      mainItems.splice(mainItems.indexOf(item), 1);\n      item.colSpan = 1;\n\n      $(\"#my-team-grid\").data(\"kendoGrid\").destroy();\n      recreateSetup(mainItems);\n    },\n    activate: function() {\n      kendo.ui.icon($(\".del\"), { icon: 'trash' });\n    }\n  });\n\n  function recreateSetup(mainItems) {\n    for (var i = 0; i < mainItems.length; i++) {\n      if (mainItems[i]) {\n        mainItems[i].order = i;\n      }\n    }\n\n    tilelayout.setOptions({ containers: mainItems });\n    createWidgets();\n  }\n\n  var salesCountDataSource = new kendo.data.DataSource({\n    data: regionSalesCount,\n    schema: {\n      model: {\n        fields: {\n          Region: { type: \"string\" },\n          Date: { type: \"date\" },\n          Sum: { type: \"number\" },\n        }\n      }\n    },\n    group: {\n      field: \"Region\",\n    }\n  });\n\n  var salesRevenueDataSource = new kendo.data.DataSource({\n    data: regionSalesRevenue,\n    schema: {\n      model: {\n        fields: {\n          Region: { type: \"string\" },\n          Date: { type: \"date\" },\n          Sum: { type: \"number\" }\n        }\n      }\n    },\n    group: {\n      field: \"Region\"\n    }\n  });\n\n  function createWidgets() {\n    function getId(id) {\n      return (id % 9) + 1;\n    }\n    $(\"#gauge\").kendoArcGauge({\n      value: 50,\n      centerTemplate:\n        \"<span style='color:\\\\#0058E9; font-size:28px; font-weight: bold;'>#:value#%</span>\",\n      color: \"#0058E9\"\n    });\n\n    $(\"#range-selection\").kendoDateRangePicker({\n      labels: false,\n      min: new Date('2019, 00, 01'),\n      max: new Date('2019, 11, 31'),\n      close: rangeSelection\n    });\n\n    $(\"#trend-volume-buttons\").kendoButtonGroup({\n      items: [\n        { text: \"Trend\", attributes: { style: \"padding: 4px 35px\" } },\n        { text: \"Volume\", attributes: { style: \"padding: 4px 29px\" } },\n      ],\n      index: 0,\n      select: onChartChange\n    });\n\n    $(\"#grid-button-group\").kendoButtonGroup({\n      items: [\n        { text: \"My Team\", attributes: { style: \"padding: 4px 24px\" } },\n        { text: \"All Teams\", attributes: { style: \"padding: 4px 22px\" } },\n      ],\n      index: 0,\n      select: onGridChange\n    });\n\n    var chart = $(\"#total-points-chart\").kendoChart({\n      dataSource: salesRevenueDataSource,\n      title: {\n        visible: false\n      },\n      plotArea: {\n        margin: {\n          bottom: 16,\n        }\n      },\n      chartArea: {\n        margin: { top: \"0px\" }\n      },\n      legend: {\n        position: \"bottom\",\n        labels: {\n          margin: {\n            right: 200\n          }\n        },\n        align: \"center\"\n      },\n      series: [\n        {\n          type: \"line\",\n          field: \"Sum\",\n          categoryField: \"Date\",\n          name: \"#= group.value #\"\n        }\n      ],\n      categoryAxis: {\n        field: \"Date\",\n        labels: {\n          format: \"MMM\"\n        }\n      },\n      valueAxis: {\n        labels: {\n          template: getTemplate,\n        },\n        type: \"numeric\"\n      },\n      tooltip: {\n        visible: true,\n        shared: true,\n        format: \"N0\"\n      },\n    }).data(\"kendoChart\");\n\n    setTimeout(function () {\n      chart.resize();\n    }, 350);\n\n    $(\"#my-team-grid\").kendoGrid({\n      dataSource: myTeamDataSource,\n      height: \"650px\",\n      toolbar: [\"search\", \"excel\", \"pdf\"],\n      groupable: true,\n      sortable: true,\n      pageable: {\n        refresh: true,\n        pageSizes: true,\n        buttonCount: 5\n      },\n      columns: [\n        { selectable: true, width: \"50px\" },\n        {\n          title: \"Employee\",\n          columns: [\n            {\n              field: \"FullName\",\n              title: \"Full Name\",\n              template: function(dataItem){\n                \n                return \"<div class='customer-photo'\" +\n                \"style='background-image: url(/assets/images/Employees/\" + getId(dataItem.id) + \".jpg);'>\"+\"</div>\" +\n                \"<div class='customer-name'>\"+ dataItem.FullName + \"</div>\"\n\n              }\n                \n            },\n            {\n              field: \"JobTitle\",\n              title: \"Job title\",\n            }\n          ]\n        },\n        {\n          title: \"Performance\",\n          columns: [\n            {\n              field: \"Rating\",\n              template: \"<input id='rating_\\\\#=Id\\\\#' data-bind='value: Rating' class='ratingInGrid' />\",\n              attributes: {\n                style: \"text-align: center;\",\n              }\n            },\n            {\n              field: \"Budget\",\n              template: function (dataItem) {\n                if (dataItem.Budget < 0) {\n                  return '<span style=\"color: #FF6358;\">-' + kendo.format(\"{0:c}\", Math.abs(dataItem.Budget)) + \"</span>\";\n                } else return kendo.format(\"{0:c}\", dataItem.Budget);\n              }\n            },\n          ],\n        },\n      ],\n      dataBound: onDataBound\n    });\n  };\n\n  var myTeamDataSource = new kendo.data.DataSource({\n    data: myTeamData,\n    schema: {\n      model: {\n        id: \"Id\",\n        fields: {\n          FullName: { type: \"string\" },\n          JobTitle: { type: \"string\" },\n          Rating: { type: \"number\" },\n          Budget: { type: \"number\" }\n        }\n      }\n    },\n    pageSize: 8\n  });\n\n  var allTeamsDataSource = new kendo.data.DataSource({\n    data: allTeamsData,\n    schema: {\n      model: {\n        id: \"Id\",\n        fields: {\n          FullName: { type: \"string\" },\n          JobTitle: { type: \"string\" },\n          Rating: { type: \"number\" },\n          Budget: { type: \"number\" }\n        }\n      }\n    },\n    pageSize: 8\n  });\n\n  function rangeSelection(e) {\n    var range = this.range();\n    var chart = $(\"#total-points-chart\").data(\"kendoChart\");\n    chart.dataSource.filter({\n      logic: \"and\",\n      filters: [\n        { field: \"Date\", operator: \"gte\", value: range.start },\n        { field: \"Date\", operator: \"lte\", value: range.end }\n      ]\n    });\n  }\n\n\n\n  function onDataBound(e) {\n    var grid = this;\n    grid.table.find(\"tr\").each(function () {\n      var dataItem = grid.dataItem(this);\n      $(this).find(\".ratingInGrid\").kendoRating({\n        min: 1,\n        max: 5,\n        label: false,\n        readonly: true\n      });\n\n      kendo.bind($(this), dataItem);\n    });\n  }\n\n  function onChartChange(e) {\n    var selectedOption = e.sender.current().index();\n    var range = $(\"#range-selection\").data(\"kendoDateRangePicker\").range();\n    if (range) {\n      var filterByRange = {\n        logic: \"and\",\n        filters: [\n          { field: \"Date\", operator: \"gte\", value: range.start },\n          { field: \"Date\", operator: \"lte\", value: range.end }\n        ]\n      }\n      salesCountDataSource.filter(filterByRange);\n      salesRevenueDataSource.filter(filterByRange);\n    }\n\n    if (selectedOption === 1) {\n      $(\"#total-points-chart\").getKendoChart().setDataSource(salesCountDataSource);\n    } else {\n      $(\"#total-points-chart\").getKendoChart().setDataSource(salesRevenueDataSource);\n    }\n  }\n\n  function onGridChange(e) {\n    var selectedOption = e.sender.current().index();\n    if (selectedOption === 1) {\n      $(\"#my-team-grid\").data(\"kendoGrid\").setDataSource(allTeamsDataSource);\n    } else {\n      $(\"#my-team-grid\").data(\"kendoGrid\").setDataSource(myTeamDataSource);\n    }\n  }\n\n  function getTemplate(data) {\n    var selectedOption = $(\"#trend-volume-buttons\").getKendoButtonGroup().current().index();\n    if (selectedOption != 1) {\n      return kendo.toString(data.value, \"c\");\n    } else return kendo.toString(data.value, \"n0\");\n  }\n\n  function updateCategoryAxisLabelsStep() {\n    var chart = $(\"#total-points-chart\").data(\"kendoChart\");\n    if (chart) {\n      if ($(window).width() <= 716) {\n        chart.setOptions({\n          categoryAxis: {\n            labels: {\n              step: 2\n            }\n          }\n        });\n      } else {\n        chart.setOptions({\n          categoryAxis: {\n            labels: {\n              step: 1\n            }\n          }\n        });\n      }\n    }\n  }\n\n  $(document).ready(function () {\n    function getBudgetTemplate(dataItem) {\n      if (dataItem.Budget < 0) {\n        return '<span style=\"color: #FF6358;\">-' + kendo.format(\"{0:c}\", Math.abs(dataItem.Budget)) + \"</span>\";\n      } else return kendo.format(\"{0:c}\", dataItem.Budget);\n    }\n    createWidgets();\n    \n    updateCategoryAxisLabelsStep();\n    $(window).on(\"resize\", function () {\n      kendo.resize($(\".k-chart\"));\n      updateCategoryAxisLabelsStep();\n    });\n  });\n\n  kendo.ui.icon($(\".vertical\"), { icon: 'more-vertical' });\n";
+module.exports = " import '@progress/kendo-ui/js/kendo.tilelayout';\n import '@progress/kendo-ui/js/kendo.grid';\n import '@progress/kendo-ui/js/kendo.rating';\n import '@progress/kendo-ui/js/kendo.menu';\n import '@progress/kendo-ui/js/kendo.daterangepicker';\n import '@progress/kendo-ui/js/kendo.buttongroup';\n import '@progress/kendo-ui/js/kendo.dataviz.gauge';\n import '@progress/kendo-ui/js/kendo.dataviz.chart';\n import '@progress/kendo-ui/js/kendo.data';\n import {myTeamData} from '../common/my-team-data';\n import {regionSalesRevenue} from '../common/region-sales-revenue';\n import {regionSalesCount} from '../common/region-sales-count';\n import {allTeamsData} from '../common/all-teams-data';\n\nvar tilelayout = $(\"#dashboard-tilelayout\").kendoTileLayout({\n    containers: [\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Tasks On Track</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div style=\"font-size: 84px; line-height: 101px; font-weight: 300; color: \\\\#37B400\">22</div>\n        <div class=\"template-footer\">In Backlog: 43</div>`\n      },\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Overdue Tasks</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div style=\"font-size: 84px; line-height: 101px; font-weight: 300; color: \\\\#F31700\">7</div>\n        <div class=\"template-footer\">From Yesterday: 16</div>`\n      },\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Issues</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div style=\"font-size: 84px; line-height: 101px; font-weight: 300; color: \\\\#FFC000\">47</div>\n      <div class=\"template-footer\">Closed By Team: 15</div>`\n      },\n      {\n        colSpan: 1,\n        rowSpan: 1,\n        header: {\n          template:\n            \"<span class=k-card-title>Used Space</span><a class='contextMenuButton'><span style='float:right; margin:5px 15px 0px 0px; color:\\\\#656565;' class='vertical'></span></a>\"\n        },\n        bodyTemplate: ({}) => `<div id=\"gauge\"></div>\n        <div class=\"template-footer\">25 of 50GB Used</div>`\n      },\n      {\n        colSpan: 4,\n        rowSpan: 2,\n        header: {\n          template: ({}) => ` <span class=\"points-header\" style=\"display: inline-block;\">Total Points</span>\n          <div id=\"range-selection\" title=\"daterangepicker\" style=\"display: inline;\"></div>\n        <span id=\"trend-volume-buttons\" style=\"float: right; padding: 23px 16px 0 0;\"></span>`\n        },\n        bodyTemplate: ({}) => `<div id=\"total-points-chart\" style=\"height:100%; width:100%\"></div>`\n      },\n      {\n        colSpan: 4,\n        rowSpan: 3,\n        header: {\n          template: ({}) => `<span class=\"mkteam-header\" style=\"display: inline-block; margin-top: 16px\">MK Team</span>\n          <span id=\"grid-button-group\" style=\"float: right; padding: 12px 0 0 0;\"></span>`\n        },\n        bodyTemplate: ({}) => `<div id=\"my-team-grid\"></div>`\n      }\n    ],\n    columns: 4,\n    columnsWidth: \"25%\",\n    rowsHeight: \"230px\",\n    reorderable: true,\n    resizable: true,\n    resize: function (e) {\n      // for widgets that do not auto resize\n      kendo.resize(e.container, true);\n    }\n  }).data(\"kendoTileLayout\");\n\n  $(\"#options-menu\").kendoContextMenu({\n    target: \"#dashboard-tilelayout\",\n    filter: \".contextMenuButton\",\n    showOn: \"click\",\n    select: function (e) {\n      var itemId = $(e.target).closest(\".k-tilelayout-item\").attr(\"id\");\n      var mainItems = tilelayout.items;\n      var item = tilelayout.itemsMap[itemId];\n\n      mainItems.splice(mainItems.indexOf(item), 1);\n      item.colSpan = 1;\n\n      $(\"#my-team-grid\").data(\"kendoGrid\").destroy();\n      recreateSetup(mainItems);\n    },\n    activate: function() {\n      kendo.ui.icon($(\".del\"), { icon: 'trash' });\n    }\n  });\n\n  function recreateSetup(mainItems) {\n    for (var i = 0; i < mainItems.length; i++) {\n      if (mainItems[i]) {\n        mainItems[i].order = i;\n      }\n    }\n\n    tilelayout.setOptions({ containers: mainItems });\n    createWidgets();\n  }\n\n  var salesCountDataSource = new kendo.data.DataSource({\n    data: regionSalesCount,\n    schema: {\n      model: {\n        fields: {\n          Region: { type: \"string\" },\n          Date: { type: \"date\" },\n          Sum: { type: \"number\" },\n        }\n      }\n    },\n    group: {\n      field: \"Region\",\n    }\n  });\n\n  var salesRevenueDataSource = new kendo.data.DataSource({\n    data: regionSalesRevenue,\n    schema: {\n      model: {\n        fields: {\n          Region: { type: \"string\" },\n          Date: { type: \"date\" },\n          Sum: { type: \"number\" }\n        }\n      }\n    },\n    group: {\n      field: \"Region\"\n    }\n  });\n\n  function createWidgets() {\n    function getId(id) {\n      return (id % 9) + 1;\n    }\n    $(\"#gauge\").kendoArcGauge({\n      value: 50,\n      centerTemplate:\n        \"<span style='color:\\\\#0058E9; font-size:28px; font-weight: bold;'>#:value#%</span>\",\n      color: \"#0058E9\"\n    });\n\n    $(\"#range-selection\").kendoDateRangePicker({\n      labels: false,\n      min: new Date('2019, 01, 01'),\n      max: new Date('2019, 12, 31'),\n      close: rangeSelection\n    });\n    $(\"#range-selection\").mousedown(function(ev){\n      ev.stopImmediatePropagation()\n    })\n    $(\"#trend-volume-buttons\").kendoButtonGroup({\n      items: [\n        { text: \"Trend\", attributes: { style: \"padding: 4px 35px\" } },\n        { text: \"Volume\", attributes: { style: \"padding: 4px 29px\" } },\n      ],\n      index: 0,\n      select: onChartChange\n    });\n\n    $(\"#grid-button-group\").kendoButtonGroup({\n      items: [\n        { text: \"My Team\", attributes: { style: \"padding: 4px 24px\" } },\n        { text: \"All Teams\", attributes: { style: \"padding: 4px 22px\" } },\n      ],\n      index: 0,\n      select: onGridChange\n    });\n\n    var chart = $(\"#total-points-chart\").kendoChart({\n      dataSource: salesRevenueDataSource,\n      title: {\n        visible: false\n      },\n      plotArea: {\n        margin: {\n          bottom: 16,\n        }\n      },\n      chartArea: {\n        margin: { top: \"0px\" }\n      },\n      legend: {\n        position: \"bottom\",\n        labels: {\n          margin: {\n            right: 200\n          }\n        },\n        align: \"center\"\n      },\n      series: [\n        {\n          type: \"line\",\n          field: \"Sum\",\n          categoryField: \"Date\",\n          name: \"#= group.value #\"\n        }\n      ],\n      categoryAxis: {\n        field: \"Date\",\n        labels: {\n          format: \"MMM\"\n        }\n      },\n      valueAxis: {\n        labels: {\n          template: getTemplate,\n        },\n        type: \"numeric\"\n      },\n      tooltip: {\n        visible: true,\n        shared: true,\n        format: \"N0\"\n      },\n    }).data(\"kendoChart\");\n\n    setTimeout(function () {\n      chart.resize();\n    }, 350);\n\n    $(\"#my-team-grid\").kendoGrid({\n      dataSource: myTeamDataSource,\n      height: \"650px\",\n      toolbar: [\"search\", \"excel\", \"pdf\"],\n      groupable: true,\n      sortable: true,\n      pageable: {\n        refresh: true,\n        pageSizes: true,\n        buttonCount: 5\n      },\n      columns: [\n        { selectable: true, width: \"50px\" },\n        {\n          title: \"Employee\",\n          columns: [\n            {\n              field: \"FullName\",\n              title: \"Full Name\",\n              template: function(dataItem){\n                \n                return \"<div class='customer-photo'\" +\n                \"style='background-image: url(/assets/images/Employees/\" + getId(dataItem.id) + \".jpg);'>\"+\"</div>\" +\n                \"<div class='customer-name'>\"+ dataItem.FullName + \"</div>\"\n\n              }\n                \n            },\n            {\n              field: \"JobTitle\",\n              title: \"Job title\",\n            }\n          ]\n        },\n        {\n          title: \"Performance\",\n          columns: [\n            {\n              field: \"Rating\",\n              template: \"<input id='rating_\\\\#=Id\\\\#' data-bind='value: Rating' class='ratingInGrid' />\",\n              attributes: {\n                style: \"text-align: center;\",\n              }\n            },\n            {\n              field: \"Budget\",\n              template: function (dataItem) {\n                if (dataItem.Budget < 0) {\n                  return '<span style=\"color: #FF6358;\">-' + kendo.format(\"{0:c}\", Math.abs(dataItem.Budget)) + \"</span>\";\n                } else return kendo.format(\"{0:c}\", dataItem.Budget);\n              }\n            },\n          ],\n        },\n      ],\n      dataBound: onDataBound\n    });\n  };\n\n  var myTeamDataSource = new kendo.data.DataSource({\n    data: myTeamData,\n    schema: {\n      model: {\n        id: \"Id\",\n        fields: {\n          FullName: { type: \"string\" },\n          JobTitle: { type: \"string\" },\n          Rating: { type: \"number\" },\n          Budget: { type: \"number\" }\n        }\n      }\n    },\n    pageSize: 8\n  });\n\n  var allTeamsDataSource = new kendo.data.DataSource({\n    data: allTeamsData,\n    schema: {\n      model: {\n        id: \"Id\",\n        fields: {\n          FullName: { type: \"string\" },\n          JobTitle: { type: \"string\" },\n          Rating: { type: \"number\" },\n          Budget: { type: \"number\" }\n        }\n      }\n    },\n    pageSize: 8\n  });\n\n  function rangeSelection(e) {\n    var range = this.range();\n    var chart = $(\"#total-points-chart\").data(\"kendoChart\");\n    chart.dataSource.filter({\n      logic: \"and\",\n      filters: [\n        { field: \"Date\", operator: \"gte\", value: range.start },\n        { field: \"Date\", operator: \"lte\", value: range.end }\n      ]\n    });\n  }\n\n\n\n  function onDataBound(e) {\n    var grid = this;\n    grid.table.find(\"tr\").each(function () {\n      var dataItem = grid.dataItem(this);\n      $(this).find(\".ratingInGrid\").kendoRating({\n        min: 1,\n        max: 5,\n        label: false,\n        readonly: true\n      });\n\n      kendo.bind($(this), dataItem);\n    });\n  }\n\n  function onChartChange(e) {\n    var selectedOption = e.sender.current().index();\n    var range = $(\"#range-selection\").data(\"kendoDateRangePicker\").range();\n    if (range) {\n      var filterByRange = {\n        logic: \"and\",\n        filters: [\n          { field: \"Date\", operator: \"gte\", value: range.start },\n          { field: \"Date\", operator: \"lte\", value: range.end }\n        ]\n      }\n      salesCountDataSource.filter(filterByRange);\n      salesRevenueDataSource.filter(filterByRange);\n    }\n\n    if (selectedOption === 1) {\n      $(\"#total-points-chart\").getKendoChart().setDataSource(salesCountDataSource);\n    } else {\n      $(\"#total-points-chart\").getKendoChart().setDataSource(salesRevenueDataSource);\n    }\n  }\n\n  function onGridChange(e) {\n    var selectedOption = e.sender.current().index();\n    if (selectedOption === 1) {\n      $(\"#my-team-grid\").data(\"kendoGrid\").setDataSource(allTeamsDataSource);\n    } else {\n      $(\"#my-team-grid\").data(\"kendoGrid\").setDataSource(myTeamDataSource);\n    }\n  }\n\n  function getTemplate(data) {\n    var selectedOption = $(\"#trend-volume-buttons\").getKendoButtonGroup().current().index();\n    if (selectedOption != 1) {\n      return kendo.toString(data.value, \"c\");\n    } else return kendo.toString(data.value, \"n0\");\n  }\n\n  function updateCategoryAxisLabelsStep() {\n    var chart = $(\"#total-points-chart\").data(\"kendoChart\");\n    if (chart) {\n      if ($(window).width() <= 716) {\n        chart.setOptions({\n          categoryAxis: {\n            labels: {\n              step: 2\n            }\n          }\n        });\n      } else {\n        chart.setOptions({\n          categoryAxis: {\n            labels: {\n              step: 1\n            }\n          }\n        });\n      }\n    }\n  }\n\n  $(document).ready(function () {\n    function getBudgetTemplate(dataItem) {\n      if (dataItem.Budget < 0) {\n        return '<span style=\"color: #FF6358;\">-' + kendo.format(\"{0:c}\", Math.abs(dataItem.Budget)) + \"</span>\";\n      } else return kendo.format(\"{0:c}\", dataItem.Budget);\n    }\n    createWidgets();\n    \n    updateCategoryAxisLabelsStep();\n    $(window).on(\"resize\", function () {\n      kendo.resize($(\".k-chart\"));\n      updateCategoryAxisLabelsStep();\n    });\n  });\n\n  kendo.ui.icon($(\".vertical\"), { icon: 'more-vertical' });\n";
 
 /***/ }),
 
@@ -17926,7 +17938,7 @@ module.exports = "export const sampleProducts = [{\n    ProductID : 1,\n    Prod
   \*********************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryBlankApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryBlankApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-blank\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    console.log(\"===File:\" + file);\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-blank`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryBlankApp = CreatejQueryBlankApp;\n";
+module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryBlankApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryBlankApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async getCdnVersion() {\n        if (this.options.cdn == undefined) {\n            let jsonSchema = await CreatejQueryBlankApp.schema();\n            let cdnVersion = jsonSchema.properties.cdn.default;\n            return cdnVersion;\n        }\n        else {\n            let cdnVersion = this.options.cdn;\n            return cdnVersion;\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const cdnVersion = await this.getCdnVersion();\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-blank\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    console.log(\"===File:\" + file);\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-blank`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryBlankApp = CreatejQueryBlankApp;\n";
 
 /***/ }),
 
@@ -17956,7 +17968,7 @@ module.exports = "{\n  \"name\": \"kendo-jquery-application\",\n  \"version\": \
   \*****************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>My Kendo UI Blank Application</title>\n    \n    <link href=\"https://unpkg.com/%40progress/kendo-font-icons/dist/index.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" rel=\"stylesheet\" type=\"text/css\" />\n\t<script src=\"https://code.jquery.com/jquery-3.7.1.min.js\"></script>\n\t<script src=\"https://unpkg.com/jszip/dist/jszip.min.js\"></script>\n\t<script src=\"https://cdn.kendostatic.com/2024.2.514/js/kendo.all.min.js\"></script>\n</head>\n<body class=\"k-content\">\n    <footer class=\"footer text-center d-flex align-items-center\">\n        <div class=\"container pb-0\">\n            <hr />\n            <p>Copyright &copy; 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n        </div>\n    </footer>\n</body>\n</html>";
+module.exports = "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>My Kendo UI Blank Application</title>\n    <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" />\n    <link href=\"https://unpkg.com/%40progress/kendo-font-icons/dist/index.css\" rel=\"stylesheet\" type=\"text/css\" />\n    <link href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\" rel=\"stylesheet\" type=\"text/css\" />\n\t<script src=\"https://code.jquery.com/jquery-3.7.1.min.js\"></script>\n\t<script src=\"https://unpkg.com/jszip/dist/jszip.min.js\"></script>\n\t<script src=\"https://cdn.kendostatic.com/2024.2.514/js/kendo.all.min.js\"></script>\n</head>\n<body class=\"k-content\">\n    <footer class=\"footer text-center d-flex align-items-center\">\n        <div class=\"container pb-0\">\n            <hr />\n            <p>Copyright &copy; 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n        </div>\n    </footer>\n</body>\n</html>";
 
 /***/ }),
 
@@ -17966,7 +17978,7 @@ module.exports = "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\" /
   \************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "{\n    \"title\": \"jba\",\n    \"description\": \"Create jQuery Blank app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryBlankApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
+module.exports = "{\n    \"title\": \"jba\",\n    \"description\": \"Create jQuery Blank app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryBlankApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        },\n        \"cdn\": {\n            \"type\": \"string\",\n            \"default\": \"8.2.1\",\n            \"description\": \"Version of the CDN to pull themes from.\"\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
 
 /***/ }),
 
@@ -18066,7 +18078,7 @@ module.exports = "export const sampleProducts = [{\n    ProductID : 1,\n    Prod
   \********************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryDashboardLayoutApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryDashboardLayoutApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-dashboard-layout\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-dashboard-layout`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryDashboardLayoutApp = CreatejQueryDashboardLayoutApp;\n";
+module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryDashboardLayoutApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryDashboardLayoutApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async getCdnVersion() {\n        if (this.options.cdn == undefined) {\n            let jsonSchema = await CreatejQueryDashboardLayoutApp.schema();\n            let cdnVersion = jsonSchema.properties.cdn.default;\n            return cdnVersion;\n        }\n        else {\n            let cdnVersion = this.options.cdn;\n            return cdnVersion;\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const cdnVersion = await this.getCdnVersion();\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-dashboard-layout\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-dashboard-layout`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryDashboardLayoutApp = CreatejQueryDashboardLayoutApp;\n";
 
 /***/ }),
 
@@ -18096,7 +18108,7 @@ module.exports = "{\n  \"name\": \"kendo-jquery-application\",\n  \"version\": \
   \****************************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"./assets/styles/site.css\"></link>\n    </head>\n    <body>        \n        <div id=\"content\">         \n            \n            <!-- container text templates -->\n            <script id=\"total-streams-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-streams\"></h2>\n            </script>\n            <script id=\"total-downloads-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-downloads\"></h2>\n            </script>\n            <script id=\"reach-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-reach\"></h2>\n            </script>\n            <script id=\"revenue-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-revenue\"></h2>\n            </script>\n            \n            <!-- container chart templates -->\n            <script id=\"downloads-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"downloads\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"performance-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"performance\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"apps-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"devices\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <script id=\"platforms-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"platforms\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <!-- container grid template -->\n            <script id=\"grid-template\" type=\"text/x-kendo-template\">\n                <div id=\"grid\" style=\"height:100%;\"></div>\n            </script>\n            <div class=\"d-flex justify-content-center\">\n                <div id=\"tilelayout\"></div>\n            </div>\n        </div>\n        \n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n    </body>\n</html>";
+module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link rel=\"shortcut icon\" href=\"../assets/favicon.ico\" />\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"./assets/styles/site.css\"></link>\n    </head>\n    <body>        \n        <div id=\"content\">         \n            \n            <!-- container text templates -->\n            <script id=\"total-streams-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-streams\"></h2>\n            </script>\n            <script id=\"total-downloads-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-downloads\"></h2>\n            </script>\n            <script id=\"reach-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-reach\"></h2>\n            </script>\n            <script id=\"revenue-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-revenue\"></h2>\n            </script>\n            \n            <!-- container chart templates -->\n            <script id=\"downloads-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"downloads\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"performance-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"performance\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"apps-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"devices\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <script id=\"platforms-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"platforms\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <!-- container grid template -->\n            <script id=\"grid-template\" type=\"text/x-kendo-template\">\n                <div id=\"grid\" style=\"height:100%;\"></div>\n            </script>\n            <div class=\"d-flex justify-content-center\">\n                <div id=\"tilelayout\"></div>\n            </div>\n        </div>\n        \n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n    </body>\n</html>";
 
 /***/ }),
 
@@ -18106,7 +18118,7 @@ module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta
   \***********************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "{\n    \"title\": \"jdla\",\n    \"description\": \"Create jQuery Dashboard Layout app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryDashboardLayoutApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
+module.exports = "{\n    \"title\": \"jdla\",\n    \"description\": \"Create jQuery Dashboard Layout app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryDashboardLayoutApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        },\n        \"cdn\": {\n            \"type\": \"string\",\n            \"default\": \"8.2.1\",\n            \"description\": \"Version of the CDN to pull themes from.\"\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
 
 /***/ }),
 
@@ -18236,7 +18248,7 @@ module.exports = "export const sampleProducts = [{\n    ProductID : 1,\n    Prod
   \*************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryDashboardApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryDashboardApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-dashboard\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-dashboard\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-dashboard`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryDashboardApp = CreatejQueryDashboardApp;\n";
+module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryDashboardApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryDashboardApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async getCdnVersion() {\n        if (this.options.cdn == undefined) {\n            let jsonSchema = await CreatejQueryDashboardApp.schema();\n            let cdnVersion = jsonSchema.properties.cdn.default;\n            return cdnVersion;\n        }\n        else {\n            let cdnVersion = this.options.cdn;\n            return cdnVersion;\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const cdnVersion = await this.getCdnVersion();\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-dashboard\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-dashboard\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-dashboard`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryDashboardApp = CreatejQueryDashboardApp;\n";
 
 /***/ }),
 
@@ -18266,7 +18278,7 @@ module.exports = "{\n  \"name\": \"kendo-jquery-application\",\n  \"version\": \
   \*********************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"./assets/styles/site.css\"></link>\n    </head>\n    <body>\n        <script type=\"text/x-kendo-tmpl\" id=\"employeeItemTemplate\">\n            <div class=\"employee\">\n                <div class=\"employee-wrapper\">\n                    <img src=\"./assets/images/employees/#:EmployeeID#.png\" class=\"img-responsive employee-list-image\" />\n                    <dl class=\"employee-list-details\">\n                        <dt class=\"name\">#:FirstName# #:LastName# </dt>\n                        <dd class=\"title\">#:Title# </dd>\n                    </dl>\n                </div>\n            </div>\n        </script>\n        <script type=\"text/x-kendo-tmpl\" id=\"employeeBioTemplate\">\n            <div>\n                <h3>ABOUT</h3>\n                <img src=\"./assets/images/employees/#:EmployeeID#.png\" class=\"img-responsive employee-details-image\" />\n                <dl class=\"employee-bio-details\">\n                    <dt class=\"name\">#:FirstName# #:LastName#</dt>\n                    <dd class=\"title\">#:Title#</dd>\n                    <dd class=\"phone\"><span class=\"icon icon-mobile\"></span>#:HomePhone#</dd>\n                    <dd><a href='\\\\#' class='bioTooltip'> >>FULL BIO <span style='display:none;'>#:Notes#</span></a></dd>\n                </dl>\n            </div>\n        </script>\n        \n         <div id=\"grid\"></div><div class=\"container-fluid\">\n            <!--open container-->\n            <div class=\"row row-offcanvas row-offcanvas-left\">\n                <div id=\"main-section\" class=\"col-xs-12 column\">\n                    <div id=\"main-section-header\" class=\"row align-items-center justify-content-between\">\n                        <h2 id=\"team-efficiency\" class=\"col-sm-3\">Team efficiency</h2>\n                        <div id=\"dateFilter\" class=\"col-sm-9\">\n                            <div class=\"period-wrapper\">\n                                <label for=\"StartDate\" class=\"select-period\">Stats from</label>\n                                <input id=\"start-date\" style=\"width: 150px\"/>\n                                <span class=\"k-invalid-msg\" data-for=\"StartDate\"></span>\n                            </div>\n                            <div class=\"period-wrapper\">\n                                <label for=\"EndDate\" class=\"select-period\">To</label>\n                                <input id=\"end-date\" style=\"width: 150px\" />\n                                <span class=\"k-invalid-msg\" data-for=\"EndDate\"></span>\n                            </div>\n                        </div>\n                    </div>\n        \n                    <div class=\"main-section-content row\" style=\"\">\n        \n                        <div id=\"employee-list\" class=\"col col-2\">\n                            <h3>TEAM MEMBERS</h3>\n                            <div id=\"employees-list\"></div>\n                        </div>\n                        <div id=\"employee-details-wrapper\" class=\"col col-10\">\n                            <div id=\"employee-details\" class=\"row\">\n                                <div id=\"employee-about\" class=\"col-12 placeholder\">\n                                    <div class=\"row\">\n                                        <div id=\"employeeBio\" class=\"col-12 col-sm-4\">\n                                        </div>\n                                        <div class=\"col-12 col-sm-4\">\n                                            <h3>Quarter to date sales</h3>\n                                            <span id=\"employee-quarter-sales-label\"></span>\n                                            <div class=\"sparkline-container\">\n                                                <div id=\"employee-quarter-sales\" style=\"height:30px\"></div>\n                                            </div>\n                                        </div>\n                                        <div class=\"col-12 col-sm-4\">\n                                            <h3>Monthly Average Sales</h3>\n                                            <span id=\"employee-average-sales-label\"></span>\n                                            <div class=\"sparkline-container\">\n                                                <div id=\"employee-average-sales\" style=\"height:30px\"></div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div id=\"employeeStats\" class=\"col-12\">\n                                    <div id=\"team-sales\" style=\"height:200px\"></div>\n                                </div>\n                                <div id=\"employeeSchedule\" class=\"col-12\">\n                                    <h3>Representative orders - schedule</h3>\n                                    <div id=\"employee-sales\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!--close main column-->\n            </div>\n            <!--close row-->\n        </div>\n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n    </body>\n</html>";
+module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link rel=\"shortcut icon\" href=\"../assets/images/employees/favicon.ico\" />\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"./assets/styles/site.css\"></link>\n    </head>\n    <body>\n        <script type=\"text/x-kendo-tmpl\" id=\"employeeItemTemplate\">\n            <div class=\"employee\">\n                <div class=\"employee-wrapper\">\n                    <img src=\"./assets/images/employees/#:EmployeeID#.png\" class=\"img-responsive employee-list-image\" />\n                    <dl class=\"employee-list-details\">\n                        <dt class=\"name\">#:FirstName# #:LastName# </dt>\n                        <dd class=\"title\">#:Title# </dd>\n                    </dl>\n                </div>\n            </div>\n        </script>\n        <script type=\"text/x-kendo-tmpl\" id=\"employeeBioTemplate\">\n            <div>\n                <h3>ABOUT</h3>\n                <img src=\"./assets/images/employees/#:EmployeeID#.png\" class=\"img-responsive employee-details-image\" />\n                <dl class=\"employee-bio-details\">\n                    <dt class=\"name\">#:FirstName# #:LastName#</dt>\n                    <dd class=\"title\">#:Title#</dd>\n                    <dd class=\"phone\"><span class=\"icon icon-mobile\"></span>#:HomePhone#</dd>\n                    <dd><a href='\\\\#' class='bioTooltip'> >>FULL BIO <span style='display:none;'>#:Notes#</span></a></dd>\n                </dl>\n            </div>\n        </script>\n        \n         <div id=\"grid\"></div><div class=\"container-fluid\">\n            <!--open container-->\n            <div class=\"row row-offcanvas row-offcanvas-left\">\n                <div id=\"main-section\" class=\"col-xs-12 column\">\n                    <div id=\"main-section-header\" class=\"row align-items-center justify-content-between\">\n                        <h2 id=\"team-efficiency\" class=\"col-sm-3\">Team efficiency</h2>\n                        <div id=\"dateFilter\" class=\"col-sm-9\">\n                            <div class=\"period-wrapper\">\n                                <label for=\"StartDate\" class=\"select-period\">Stats from</label>\n                                <input id=\"start-date\" style=\"width: 150px\"/>\n                                <span class=\"k-invalid-msg\" data-for=\"StartDate\"></span>\n                            </div>\n                            <div class=\"period-wrapper\">\n                                <label for=\"EndDate\" class=\"select-period\">To</label>\n                                <input id=\"end-date\" style=\"width: 150px\" />\n                                <span class=\"k-invalid-msg\" data-for=\"EndDate\"></span>\n                            </div>\n                        </div>\n                    </div>\n        \n                    <div class=\"main-section-content row\" style=\"\">\n        \n                        <div id=\"employee-list\" class=\"col col-2\">\n                            <h3>TEAM MEMBERS</h3>\n                            <div id=\"employees-list\"></div>\n                        </div>\n                        <div id=\"employee-details-wrapper\" class=\"col col-10\">\n                            <div id=\"employee-details\" class=\"row\">\n                                <div id=\"employee-about\" class=\"col-12 placeholder\">\n                                    <div class=\"row\">\n                                        <div id=\"employeeBio\" class=\"col-12 col-sm-4\">\n                                        </div>\n                                        <div class=\"col-12 col-sm-4\">\n                                            <h3>Quarter to date sales</h3>\n                                            <span id=\"employee-quarter-sales-label\"></span>\n                                            <div class=\"sparkline-container\">\n                                                <div id=\"employee-quarter-sales\" style=\"height:30px\"></div>\n                                            </div>\n                                        </div>\n                                        <div class=\"col-12 col-sm-4\">\n                                            <h3>Monthly Average Sales</h3>\n                                            <span id=\"employee-average-sales-label\"></span>\n                                            <div class=\"sparkline-container\">\n                                                <div id=\"employee-average-sales\" style=\"height:30px\"></div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div id=\"employeeStats\" class=\"col-12\">\n                                    <div id=\"team-sales\" style=\"height:200px\"></div>\n                                </div>\n                                <div id=\"employeeSchedule\" class=\"col-12\">\n                                    <h3>Representative orders - schedule</h3>\n                                    <div id=\"employee-sales\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!--close main column-->\n            </div>\n            <!--close row-->\n        </div>\n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n    </body>\n</html>";
 
 /***/ }),
 
@@ -18276,7 +18288,7 @@ module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta
   \****************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "{\n    \"title\": \"jda\",\n    \"description\": \"Create jQuery Dashboard app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryDashboardApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
+module.exports = "{\n    \"title\": \"jda\",\n    \"description\": \"Create jQuery Dashboard app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryDashboardApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        },\n        \"cdn\": {\n            \"type\": \"string\",\n            \"default\": \"8.2.1\",\n            \"description\": \"Version of the CDN to pull themes from.\"\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
 
 /***/ }),
 
@@ -18286,7 +18298,7 @@ module.exports = "{\n    \"title\": \"jda\",\n    \"description\": \"Create jQue
   \*****************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "import { employeesTeamSales } from '../common/employee-and-team-sales';\nimport { employeeAverageSales } from '../common/employee-average-sales';\nimport { employeeListSales } from '../common/employee-list-sales';\nimport { employeeList } from '../common/employee-list';\nimport { employeeQuarterSales } from '../common/employee-quarter-sales';\nimport { employeeSales } from '../common/employees-sales';\n\n\nimport '@progress/kendo-ui/js/kendo.grid';\nimport '@progress/kendo-ui/js/kendo.listview';\nimport '@progress/kendo-ui/js/kendo.dataviz.chart';\nimport '@progress/kendo-ui/js/kendo.scheduler';\n\n(() => {   \n    var employeeAndTeamSales = employeesTeamSales;  \n    var employeeSchedulerSales = employeeSales;\n    var employeeListSales = employeeListSales;    \n\n\n    $(\"#employees-list\").kendoListView({\n        template: $('#employeeItemTemplate').html(),\n            dataSource: {\n                data: employeeList,\n                pageSize: 9\n            },\n            selectable: \"single\",\n            dataBound: onListDataBound,\n            change: onCriteriaChange\n    });\n\n    $(\"#start-date\").kendoDatePicker({\n        value: new Date(1996, 6, 1),\n        change: onCriteriaChange\n    })\n\n    $(\"#end-date\").kendoDatePicker({\n        value: new Date(1998, 7, 1),\n        change: onCriteriaChange\n    })\n\n    $(\"#employee-quarter-sales\").kendoChart({\n        theme: \"metro\",\n        autoBind: false,\n        tooltip: false,\n        dataBound: onQuarterSalesDataBound,\n        dataSource: {\n            transport: {\n                read: function (options) {\n                    var result = $.grep(employeeQuarterSales, function (e) {                       \n                        return e.EmployeeID == options.data.EmployeeID;\n                    })[0];\n                    \n                    options.success(result.Sales)\n                }\n            }\n        },       \n        series: [{\n            type: \"bullet\",\n            currentField: \"Current\",\n            targetField: \"Target\"\n\n        }],\n        legend: {\n            visible: false\n        },\n        categoryAxis: {\n            labels: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            }\n        },\n        valueAxis: {\n            type: \"numeric\",\n            labels: {\n                visible: false\n            },\n            majorTicks: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            }\n        }\n    })\n\n    $(\"#employee-average-sales\").kendoChart({\n        theme: \"metro\",\n        autoBind: false,\n        dataBound: onAverageSalesDataBound,\n        dataSource: {\n            transport: {\n                read: function (options) {\n                    var result = $.grep(employeeAverageSales, function (e) {\n                        return e.EmployeeID == options.data.EmployeeID;\n                    });\n                    options.success(result);\n                }\n            },\n            aggregate: [{\n                field: \"EmployeeSales\",\n                aggregate: \"average\"\n            }]\n        },\n        series: [{\n            type: \"line\",\n            field: \"EmployeeSales\",\n            width: 1.5,\n            markers: {\n                visible: false\n            }\n        }],\n        categoryAxis: {\n            type: \"date\",\n            field: \"Date\",\n            visible: false,\n            majorGridLines: {\n                visible: false\n            },\n            majorTicks: {\n                visible: false\n            }\n        },\n        legend: {\n            visible: false\n        },\n        valueAxis: {\n            type: \"numeric\",\n            visible: false,\n            labels: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            },\n            majorTicks: {\n                visible: false\n            }\n        }\n    });\n\n    $(\"#team-sales\").kendoChart({\n        theme: \"metro\",\n        title: {\n            text: \"REPRESENTATIVE SALES VS. TOTAL SALES\",\n            align: \"left\",\n            font: \"11px\",\n            color: \"#35373d\"\n        },\n        autoBind: false,\n        dataSource: {\n            transport: {\n                read: function (options) {  \n                             \n                    var startDate = $(\"#start-date\").data(\"kendoDatePicker\").value();\n                    var endDate = $(\"#end-date\").data(\"kendoDatePicker\").value()\n                    var employee = $.grep(employeeAndTeamSales, function (e) {\n                        return e.EmployeeID == options.data.EmployeeID;\n                    })[0];\n\n                    var filtered = employee.Sales.filter(x => new Date(x.Date) >= startDate && new Date(x.Date) <= endDate)\n                    \n                    options.success(filtered);\n                }\n            }\n        },\n        legend: {\n            position: \"bottom\"\n        },\n        series: [{\n            field: \"EmployeeSales\",\n            categoryField: \"Date\",\n            name: \"Employee Sales\",\n            aggregate: \"sum\"\n        }, {\n            field: \"TotalSales\",\n            categoryField: \"Date\",\n            name: \"Team Sales\",\n            aggregate: \"sum\"\n        }],\n        categoryAxis: {\n            type: \"date\",\n            baseUnit: \"months\",\n            majorGridLines: {\n                visible: false\n            }\n        },\n        valueAxis: {\n            labels: {\n                format: \"{0:c2}\",\n                visible: false\n            },\n            majorUnit: 25000,\n            line: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            }\n        },\n        tooltip: {\n            visible: true,\n            format: \"{0:c2}\"\n        }\n    })\n\n    $(\"#employee-sales\").kendoScheduler({\n        autoBind: false,\n        date: new Date(1996, 1,7),\n        views: [\"month\"],\n        editable: false,\n        timezone: \"Etc/UTC\",\n        dataSource: {\n            transport: {\n                read: function (options) {                   \n                    options.success(employeeSchedulerSales);\n                }\n            },\n            schema: {\n                model: {\n                    fields: {\n                        SaleID: {\n                            type: \"number\"\n                        },\n                        title: {\n                            from: \"Title\",\n                            type: \"string\"\n                        },\n                        description: {\n                            from: \"Description\",\n                            type: \"string\"\n                        },\n                        start: {\n                            from: \"Start\",\n                            type: \"date\"\n                        },\n                        startTimezone: {\n                            from: \"StartTimezone\",\n                            type: \"string\"\n                        },\n                        end: {\n                            from: \"End\",\n                            type: \"date\"\n                        },\n                        endTimezone: {\n                            from: \"EndTimezone\",\n                            type: \"string\"\n                        },\n                        recurrenceRule: {\n                            from: \"RecurrenceRule\",\n                            type: \"string\"\n                        },\n                        RecurrenceID: {\n                            type: \"number\",\n                            defaultValue: null\n                        },\n                        recurrenceException: {\n                            from: \"RecurrenceException\",\n                            type: \"string\"\n                        },\n                        isAllDay: {\n                            from: \"IsAllDay\",\n                            type: \"boolean\"\n                        },\n                        EmployeeID: {\n                            type: \"number\",\n                            defaultValue: null\n                        }\n                    }\n                }\n            }\n        }\n    })\n\n   \n\n    $('#employeeBio').kendoTooltip({\n        filter: \"a\",\n        content: function (e) {\n            return e.target.find(\"span\").text();\n        }\n    })\n\n    function onListDataBound(e) {\n        this.select($(\".employee:first\"));\n        setTimeout(function(){\n            e.sender.trigger('change')\n            kendo.ui.icon($(\".icon-mobile\"), { icon: 'user' });\n        })\n        \n    }\n\n    function onCriteriaChange() {\n        var employeeList = $(\"#employees-list\").data(\"kendoListView\"),\n            employee = employeeList.dataSource.getByUid(employeeList.select().attr(\"data-uid\")),\n            employeeQuarterSales = $(\"#employee-quarter-sales\").data(\"kendoChart\"),\n            employeeAverageSales = $(\"#employee-average-sales\").data(\"kendoChart\"),\n            teamSales = $(\"#team-sales\").data(\"kendoChart\"),\n            employeeSales = $(\"#employee-sales\").data(\"kendoScheduler\"),\n            startDate = $(\"#start-date\").data(\"kendoDatePicker\"),\n            endDate = $(\"#end-date\").data(\"kendoDatePicker\"),\n            filter = {\n                EmployeeID: employee.EmployeeID,\n                startDate: new Date(startDate.value()),\n                endDate: new Date(endDate.value())\n            },\n            template = kendo.template($(\"#employeeBioTemplate\").html());   \n            \n            if(endDate.value() < startDate.value()){\n                alert('Invalid date range')\n            }\n\n\n        $(\"#employeeBio\").html(template(employee));\n\n        employeeSales.dataSource.filter({\n            field: \"EmployeeID\",\n            operator: \"eq\",\n            value: employee.EmployeeID\n        });\n\n        employeeSales.date(startDate.value());\n\n        teamSales.dataSource.read(filter);\n        employeeQuarterSales.dataSource.read(filter);\n        employeeQuarterSales.resize();\n        employeeAverageSales.dataSource.read(filter);\n    }\n\n    function onQuarterSalesDataBound(e) {\n        var data = this.dataSource.at(0);\n        $(\"#employee-quarter-sales-label\").text(kendo.toString(data.Current, \"c2\"));\n    }\n\n    function onAverageSalesDataBound(e) {\n        var data = this.dataSource.aggregates()\n        if (data.EmployeeSales) {\n            $(\"#employee-average-sales-label\").text(kendo.toString(data.EmployeeSales.average, \"c2\"));\n        } else {\n            $(\"#employee-average-sales-label\").text(kendo.toString(0, \"c2\"));\n        }\n    }\n})();";
+module.exports = "import { employeesTeamSales } from '../common/employee-and-team-sales';\nimport { employeeAverageSales } from '../common/employee-average-sales';\nimport { employeeListSales } from '../common/employee-list-sales';\nimport { employeeList } from '../common/employee-list';\nimport { employeeQuarterSales } from '../common/employee-quarter-sales';\nimport { employeeSales } from '../common/employees-sales';\n\n\nimport '@progress/kendo-ui/js/kendo.grid';\nimport '@progress/kendo-ui/js/kendo.listview';\nimport '@progress/kendo-ui/js/kendo.dataviz.chart';\nimport '@progress/kendo-ui/js/kendo.scheduler';\n\n(() => {   \n    var employeeAndTeamSales = employeesTeamSales;  \n    var employeeSchedulerSales = employeeSales;\n    var employeeListSales = employeeListSales;    \n\n    $(\"#currentYear\").html(new Date().getFullYear());\n    $(\"#employees-list\").kendoListView({\n        template: $('#employeeItemTemplate').html(),\n            dataSource: {\n                data: employeeList,\n                pageSize: 9\n            },\n            selectable: \"single\",\n            dataBound: onListDataBound,\n            change: onCriteriaChange\n    });\n\n    $(\"#start-date\").kendoDatePicker({\n        value: new Date(1996, 6, 1),\n        change: onCriteriaChange\n    })\n\n    $(\"#end-date\").kendoDatePicker({\n        value: new Date(1998, 7, 1),\n        change: onCriteriaChange\n    })\n\n    $(\"#employee-quarter-sales\").kendoChart({\n        theme: \"metro\",\n        autoBind: false,\n        tooltip: false,\n        dataBound: onQuarterSalesDataBound,\n        dataSource: {\n            transport: {\n                read: function (options) {\n                    var result = $.grep(employeeQuarterSales, function (e) {                       \n                        return e.EmployeeID == options.data.EmployeeID;\n                    })[0];\n                    \n                    options.success(result.Sales)\n                }\n            }\n        },       \n        series: [{\n            type: \"bullet\",\n            currentField: \"Current\",\n            targetField: \"Target\"\n\n        }],\n        legend: {\n            visible: false\n        },\n        categoryAxis: {\n            labels: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            }\n        },\n        valueAxis: {\n            type: \"numeric\",\n            labels: {\n                visible: false\n            },\n            majorTicks: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            }\n        }\n    })\n\n    $(\"#employee-average-sales\").kendoChart({\n        theme: \"metro\",\n        autoBind: false,\n        dataBound: onAverageSalesDataBound,\n        dataSource: {\n            transport: {\n                read: function (options) {\n                    var result = $.grep(employeeAverageSales, function (e) {\n                        return e.EmployeeID == options.data.EmployeeID;\n                    });\n                    options.success(result);\n                }\n            },\n            aggregate: [{\n                field: \"EmployeeSales\",\n                aggregate: \"average\"\n            }]\n        },\n        series: [{\n            type: \"line\",\n            field: \"EmployeeSales\",\n            width: 1.5,\n            markers: {\n                visible: false\n            }\n        }],\n        categoryAxis: {\n            type: \"date\",\n            field: \"Date\",\n            visible: false,\n            majorGridLines: {\n                visible: false\n            },\n            majorTicks: {\n                visible: false\n            }\n        },\n        legend: {\n            visible: false\n        },\n        valueAxis: {\n            type: \"numeric\",\n            visible: false,\n            labels: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            },\n            majorTicks: {\n                visible: false\n            }\n        }\n    });\n\n    $(\"#team-sales\").kendoChart({\n        theme: \"metro\",\n        title: {\n            text: \"REPRESENTATIVE SALES VS. TOTAL SALES\",\n            align: \"left\",\n            font: \"11px\",\n            color: \"#35373d\"\n        },\n        autoBind: false,\n        dataSource: {\n            transport: {\n                read: function (options) {  \n                             \n                    var startDate = $(\"#start-date\").data(\"kendoDatePicker\").value();\n                    var endDate = $(\"#end-date\").data(\"kendoDatePicker\").value()\n                    var employee = $.grep(employeeAndTeamSales, function (e) {\n                        return e.EmployeeID == options.data.EmployeeID;\n                    })[0];\n\n                    var filtered = employee.Sales.filter(x => new Date(x.Date) >= startDate && new Date(x.Date) <= endDate)\n                    \n                    options.success(filtered);\n                }\n            }\n        },\n        legend: {\n            position: \"bottom\"\n        },\n        series: [{\n            field: \"EmployeeSales\",\n            categoryField: \"Date\",\n            name: \"Employee Sales\",\n            aggregate: \"sum\"\n        }, {\n            field: \"TotalSales\",\n            categoryField: \"Date\",\n            name: \"Team Sales\",\n            aggregate: \"sum\"\n        }],\n        categoryAxis: {\n            type: \"date\",\n            baseUnit: \"months\",\n            majorGridLines: {\n                visible: false\n            }\n        },\n        valueAxis: {\n            labels: {\n                format: \"{0:c2}\",\n                visible: false\n            },\n            majorUnit: 25000,\n            line: {\n                visible: false\n            },\n            majorGridLines: {\n                visible: false\n            }\n        },\n        tooltip: {\n            visible: true,\n            format: \"{0:c2}\"\n        }\n    })\n\n    $(\"#employee-sales\").kendoScheduler({\n        autoBind: false,\n        date: new Date(1996, 1,7),\n        views: [\"month\"],\n        editable: false,\n        timezone: \"Etc/UTC\",\n        dataSource: {\n            transport: {\n                read: function (options) {                   \n                    options.success(employeeSchedulerSales);\n                }\n            },\n            schema: {\n                model: {\n                    fields: {\n                        SaleID: {\n                            type: \"number\"\n                        },\n                        title: {\n                            from: \"Title\",\n                            type: \"string\"\n                        },\n                        description: {\n                            from: \"Description\",\n                            type: \"string\"\n                        },\n                        start: {\n                            from: \"Start\",\n                            type: \"date\"\n                        },\n                        startTimezone: {\n                            from: \"StartTimezone\",\n                            type: \"string\"\n                        },\n                        end: {\n                            from: \"End\",\n                            type: \"date\"\n                        },\n                        endTimezone: {\n                            from: \"EndTimezone\",\n                            type: \"string\"\n                        },\n                        recurrenceRule: {\n                            from: \"RecurrenceRule\",\n                            type: \"string\"\n                        },\n                        RecurrenceID: {\n                            type: \"number\",\n                            defaultValue: null\n                        },\n                        recurrenceException: {\n                            from: \"RecurrenceException\",\n                            type: \"string\"\n                        },\n                        isAllDay: {\n                            from: \"IsAllDay\",\n                            type: \"boolean\"\n                        },\n                        EmployeeID: {\n                            type: \"number\",\n                            defaultValue: null\n                        }\n                    }\n                }\n            }\n        }\n    })\n\n   \n\n    $('#employeeBio').kendoTooltip({\n        filter: \"a\",\n        content: function (e) {\n            return e.target.find(\"span\").text();\n        }\n    })\n\n    function onListDataBound(e) {\n        this.select($(\".employee:first\"));\n        setTimeout(function(){\n            e.sender.trigger('change')\n            kendo.ui.icon($(\".icon-mobile\"), { icon: 'user' });\n        })\n        \n    }\n\n    function onCriteriaChange() {\n        var employeeList = $(\"#employees-list\").data(\"kendoListView\"),\n            employee = employeeList.dataSource.getByUid(employeeList.select().attr(\"data-uid\")),\n            employeeQuarterSales = $(\"#employee-quarter-sales\").data(\"kendoChart\"),\n            employeeAverageSales = $(\"#employee-average-sales\").data(\"kendoChart\"),\n            teamSales = $(\"#team-sales\").data(\"kendoChart\"),\n            employeeSales = $(\"#employee-sales\").data(\"kendoScheduler\"),\n            startDate = $(\"#start-date\").data(\"kendoDatePicker\"),\n            endDate = $(\"#end-date\").data(\"kendoDatePicker\"),\n            filter = {\n                EmployeeID: employee.EmployeeID,\n                startDate: new Date(startDate.value()),\n                endDate: new Date(endDate.value())\n            },\n            template = kendo.template($(\"#employeeBioTemplate\").html());   \n            \n            if(endDate.value() < startDate.value()){\n                alert('Invalid date range')\n            }\n\n\n        $(\"#employeeBio\").html(template(employee));\n\n        employeeSales.dataSource.filter({\n            field: \"EmployeeID\",\n            operator: \"eq\",\n            value: employee.EmployeeID\n        });\n\n        employeeSales.date(startDate.value());\n\n        teamSales.dataSource.read(filter);\n        employeeQuarterSales.dataSource.read(filter);\n        employeeQuarterSales.resize();\n        employeeAverageSales.dataSource.read(filter);\n    }\n\n    function onQuarterSalesDataBound(e) {\n        var data = this.dataSource.at(0);\n        $(\"#employee-quarter-sales-label\").text(kendo.toString(data.Current, \"c2\"));\n    }\n\n    function onAverageSalesDataBound(e) {\n        var data = this.dataSource.aggregates()\n        if (data.EmployeeSales) {\n            $(\"#employee-average-sales-label\").text(kendo.toString(data.EmployeeSales.average, \"c2\"));\n        } else {\n            $(\"#employee-average-sales-label\").text(kendo.toString(0, \"c2\"));\n        }\n    }\n})();";
 
 /***/ }),
 
@@ -18346,7 +18358,7 @@ module.exports = "export const sampleProducts = [{\n    ProductID : 1,\n    Prod
   \********************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryGridApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryGridApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-grid\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-grid\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-grid`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryGridApp = CreatejQueryGridApp;\n";
+module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryGridApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryGridApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async getCdnVersion() {\n        if (this.options.cdn == undefined) {\n            let jsonSchema = await CreatejQueryGridApp.schema();\n            let cdnVersion = jsonSchema.properties.cdn.default;\n            return cdnVersion;\n        }\n        else {\n            let cdnVersion = this.options.cdn;\n            return cdnVersion;\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/index.html`];\n        const cdnVersion = await this.getCdnVersion();\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-grid\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-grid\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-grid`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryGridApp = CreatejQueryGridApp;\n";
 
 /***/ }),
 
@@ -18376,7 +18388,7 @@ module.exports = "{\n  \"name\": \"kendo-jquery-application\",\n  \"version\": \
   \****************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM\" crossorigin=\"anonymous\"></script>\n\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"../assets/styles/site.css\"></link>\n    </head>\n    <body class=\"k-content\">\n        <nav class=\"navbar navbar-dark bg-dark\">\n            <div class=\"container-fluid d-flex justify-content-between p-0\">\n                <h1 class=\"navbar-brand d-flex align-items-center\">Project Title</h1>\n                <button id=\"configure\" class=\"k-rpanel-toggle k-button k-primary btn-toggle\">\n                    <span class=\"menu-icon\"></span>\n                </button>\n            </div>\n        </nav>\n\n        <div id=\"responsive-panel\" class=\"navbar navbar-dark bg-light\">\n            <ul id=\"menu\" style=\"width: 100%\">\n                <li>\n                    Item 1\n                </li>\n                <li>\n                    Item 2\n                </li>\n                <li>\n                    Item 3\n                </li>\n                <li disabled=\"disabled\">\n                    Disabled Item\n                </li>\n            </ul>\n        </div>\n\n        <main>\n            <div class=\"container-fluid\">\n                <div<div class=\"placeholders\">\n                    <div class=\"row d-flex justify-content-start\">\n                        <div class=\"col-md-2 mb-3 placeholder\">\n                            <img class=\"img-fluid \" alt=\"200x200\" src=\"../assets/images/200.png\">\n                        </div>\n                        <div class=\"col-md-3\">\n                            <h2>Lorem ipsum dolor sit amet...</h2>\n                            <p>\n                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n                                galley of type and scrambled it to make a type specimen book.\n                            </p>\n                            <p>\n                                <button class=\"primaryButton\">Primary Button</button>\n                            </p>\n                        </div>\n                        <div class=\"col-md-3\">\n                            <h2>&nbsp;</h2>\n                            <p>\n                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n                                galley of type and scrambled it to make a type specimen book.\n                            </p>\n                            <p>\n                                <button class=\"textButton\">Button</button>\n                            </p>\n                        </div>\n                        <div class=\"col-md-3\">\n                            <h2>&nbsp;</h2>\n                            <p>\n                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n                                galley of type and scrambled it to make a type specimen book.\n                            </p>\n                            <p>\n                                <button class=\"textButton\">Button</button>\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                \n                <div class=\"row\">\n                    <div class=\"col-12\">\n                        <div id=\"grid\"></div>     \n                    </div>\n                </div>\n            </div>\n        </main>\n\n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n</body>";
+module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" />\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM\" crossorigin=\"anonymous\"></script>\n\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"../assets/styles/site.css\"></link>\n    </head>\n    <body class=\"k-content\">\n        <nav class=\"navbar navbar-dark bg-dark\">\n            <div class=\"container-fluid d-flex justify-content-between p-0\">\n                <h1 class=\"navbar-brand d-flex align-items-center\">Project Title</h1>\n                <button id=\"configure\" class=\"k-rpanel-toggle k-button k-primary btn-toggle\">\n                    <span class=\"menu-icon\"></span>\n                </button>\n            </div>\n        </nav>\n\n        <div id=\"responsive-panel\" class=\"navbar navbar-dark bg-light\">\n            <ul id=\"menu\" style=\"width: 100%\">\n                <li>\n                    Item 1\n                </li>\n                <li>\n                    Item 2\n                </li>\n                <li>\n                    Item 3\n                </li>\n                <li disabled=\"disabled\">\n                    Disabled Item\n                </li>\n            </ul>\n        </div>\n\n        <main>\n            <div class=\"container-fluid\">\n                <div<div class=\"placeholders\">\n                    <div class=\"row d-flex justify-content-start\">\n                        <div class=\"col-md-2 mb-3 placeholder\">\n                            <img class=\"img-fluid \" alt=\"200x200\" src=\"../assets/images/200.png\">\n                        </div>\n                        <div class=\"col-md-3\">\n                            <h2>Lorem ipsum dolor sit amet...</h2>\n                            <p>\n                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n                                galley of type and scrambled it to make a type specimen book.\n                            </p>\n                            <p>\n                                <button class=\"primaryButton\">Primary Button</button>\n                            </p>\n                        </div>\n                        <div class=\"col-md-3\">\n                            <h2>&nbsp;</h2>\n                            <p>\n                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n                                galley of type and scrambled it to make a type specimen book.\n                            </p>\n                            <p>\n                                <button class=\"textButton\">Button</button>\n                            </p>\n                        </div>\n                        <div class=\"col-md-3\">\n                            <h2>&nbsp;</h2>\n                            <p>\n                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n                                galley of type and scrambled it to make a type specimen book.\n                            </p>\n                            <p>\n                                <button class=\"textButton\">Button</button>\n                            </p>\n                        </div>\n                    </div>\n                </div>\n                \n                <div class=\"row\">\n                    <div class=\"col-12\">\n                        <div id=\"grid\"></div>     \n                    </div>\n                </div>\n            </div>\n        </main>\n\n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n</body>";
 
 /***/ }),
 
@@ -18386,7 +18398,7 @@ module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta
   \***********************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "{\n    \"title\": \"jga\",\n    \"description\": \"Create jQuery Grid app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryGridApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
+module.exports = "{\n    \"title\": \"jga\",\n    \"description\": \"Create jQuery Grid app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryGridApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        },\n        \"cdn\": {\n            \"type\": \"string\",\n            \"default\": \"8.2.1\",\n            \"description\": \"Version of the CDN to pull themes from.\"\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
 
 /***/ }),
 
@@ -18396,7 +18408,7 @@ module.exports = "{\n    \"title\": \"jga\",\n    \"description\": \"Create jQue
   \************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "import '@progress/kendo-ui/js/kendo.grid';\nimport '@progress/kendo-ui/js/kendo.button';\nimport '@progress/kendo-ui/js/kendo.responsivepanel';\nimport '@progress/kendo-ui/js/kendo.all';\n\n(() => {\n    \n    $(function() {\n        renderComponents(\"grid\");\n    });\n\n    const renderComponents = (id) => {\n        \n        $(\"#responsive-panel\").kendoResponsivePanel({\n            breakpoint: 768,\n            autoClose: false,\n            orientation: \"top\"\n        });\n\n        $(\"#menu\").kendoMenu();\n\n        kendo.ui.icon($(\".menu-icon\"), { icon: \"menu\", type: \"svg\" });\n\n\n        $(\".primaryButton\").kendoButton({\n            themeColor: \"primary\"\n        });\n        $(\".textButton\").kendoButton();\n    \n        $(\"#\" + id).kendoGrid({\n            dataSource: {\n                type: \"odata\",\n                transport: {\n                    read: \"http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders\"\n                },\n                schema: {\n                    model: {\n                        fields: {\n                            OrderID: { type: \"number\" },\n                            Freight: { type: \"number\" },\n                            ShipName: { type: \"string\" },\n                            OrderDate: { type: \"date\" },\n                            ShipCity: { type: \"string\" }\n                        }\n                    }\n                },\n                pageSize: 20\n            },\n            height: 550,\n            filterable: true,\n            sortable: true,\n            pageable: true,\n            columns: [{\n                    field:\"OrderID\",\n                    filterable: false\n                },\n                \"Freight\",\n                {\n                    field: \"OrderDate\",\n                    title: \"Order Date\",\n                    format: \"{0:MM/dd/yyyy}\"\n                }, {\n                    field: \"ShipName\",\n                    title: \"Ship Name\"\n                }, {\n                    field: \"ShipCity\",\n                    title: \"Ship City\"\n                }\n            ]\n        });\n    }\n})();\n\n    ";
+module.exports = "import '@progress/kendo-ui/js/kendo.grid';\nimport '@progress/kendo-ui/js/kendo.button';\nimport '@progress/kendo-ui/js/kendo.responsivepanel';\nimport '@progress/kendo-ui/js/kendo.all';\n\n(() => {\n    \n    $(function() {\n        renderComponents(\"grid\");\n    });\n    $(\"#currentYear\").html(new Date().getFullYear());\n    const renderComponents = (id) => {\n        \n        $(\"#responsive-panel\").kendoResponsivePanel({\n            breakpoint: 768,\n            autoClose: false,\n            orientation: \"top\"\n        });\n\n        $(\"#menu\").kendoMenu();\n\n        kendo.ui.icon($(\".menu-icon\"), { icon: \"menu\", type: \"svg\" });\n\n\n        $(\".primaryButton\").kendoButton({\n            themeColor: \"primary\"\n        });\n        $(\".textButton\").kendoButton();\n    \n        $(\"#\" + id).kendoGrid({\n            dataSource: {\n                type: \"odata\",\n                transport: {\n                    read: \"http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders\"\n                },\n                schema: {\n                    model: {\n                        fields: {\n                            OrderID: { type: \"number\" },\n                            Freight: { type: \"number\" },\n                            ShipName: { type: \"string\" },\n                            OrderDate: { type: \"date\" },\n                            ShipCity: { type: \"string\" }\n                        }\n                    }\n                },\n                pageSize: 20\n            },\n            height: 550,\n            filterable: true,\n            sortable: true,\n            pageable: true,\n            columns: [{\n                    field:\"OrderID\",\n                    filterable: false\n                },\n                \"Freight\",\n                {\n                    field: \"OrderDate\",\n                    title: \"Order Date\",\n                    format: \"{0:MM/dd/yyyy}\"\n                }, {\n                    field: \"ShipName\",\n                    title: \"Ship Name\"\n                }, {\n                    field: \"ShipCity\",\n                    title: \"Ship City\"\n                }\n            ]\n        });\n    }\n})();\n\n    ";
 
 /***/ }),
 
@@ -18556,7 +18568,7 @@ module.exports = "export const sampleProducts = [{\n    ProductID : 1,\n    Prod
   \************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryStandardApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryStandardApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/about.html`, `pages/contact.html`, `pages/index.html`];\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-standard\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-standard`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryStandardApp = CreatejQueryStandardApp;\n";
+module.exports = "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CreatejQueryStandardApp = void 0;\nconst scaffolding_1 = require(\"@telerik/scaffolding\");\nconst fs = require(\"fs/promises\");\nconst path = require(\"path\");\nconst glob_1 = require(\"glob\");\nclass CreatejQueryStandardApp extends scaffolding_1.ProjectTemplate {\n    static async schema() {\n        if (process.env.WEBPACK_MODE) {\n            return require(\"./schema.json\");\n        }\n        else {\n            return JSON.parse((await fs.readFile(path.join(__dirname, \"schema.json\"))).toString());\n        }\n    }\n    async getCdnVersion() {\n        if (this.options.cdn == undefined) {\n            let jsonSchema = await CreatejQueryStandardApp.schema();\n            let cdnVersion = jsonSchema.properties.cdn.default;\n            return cdnVersion;\n        }\n        else {\n            let cdnVersion = this.options.cdn;\n            return cdnVersion;\n        }\n    }\n    async applyKendoTheme(file, content) {\n        const filePaths = [`pages/about.html`, `pages/contact.html`, `pages/index.html`];\n        const cdnVersion = await this.getCdnVersion();\n        const theme = this.options.theme;\n        const regex = \"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\";\n        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;\n        for (const filePath of filePaths) {\n            if (file.includes(filePath)) {\n                let updatedContent = content.replace(regex, replacementRegex);\n                return updatedContent;\n            }\n        }\n        return content;\n    }\n    async templateTree(template) {\n        if (process.env.WEBPACK_MODE) {\n            const textFilesTree = require.context(\"!!raw-loader?esModule=false!../kendo-jquery-standard\", true, /\\.(css|js|html|json|svg|md)$/, \"sync\");\n            const binaryFilesTree = require.context(\"!!binary-base64-loader?esModule=false!../kendo-jquery-admin\", true, /\\.(png|jpg)$/, \"sync\");\n            const files = [...new Set([\n                    ...textFilesTree.keys(),\n                    ...binaryFilesTree.keys(),\n                ])]\n                .map(f => template + \"/\" + f.substring(\"./\".length))\n                .filter(f => f.startsWith(template + \"/\"))\n                .map(f => f.substring((template + \"/\").length))\n                .filter(f => !f.startsWith(\"index.js\") && !f.startsWith(\"schema.json\"))\n                .sort();\n            return {\n                files,\n                async readString(file) {\n                    const text = textFilesTree(\"./\" + file);\n                    return text;\n                },\n                async readBase64(file) {\n                    let base64Text = binaryFilesTree(\"./\" + file);\n                    return base64Text;\n                }\n            };\n        }\n        else {\n            // Shim WebPack context for CLI usage outside WebPack\n            const cwd = path.join(__dirname, template);\n            const files = await (0, glob_1.glob)(\"**/*.*\", { dot: true, cwd, ignore: [\".DS_Store\"] });\n            return {\n                files,\n                async readString(file) {\n                    return await fs.readFile(path.join(cwd, file), { encoding: \"utf8\" });\n                },\n                async readBase64(file) {\n                    const base64Text = await fs.readFile(path.join(cwd, file), { encoding: \"base64\" });\n                    return base64Text;\n                }\n            };\n        }\n    }\n    textFileExtensions = new Set([\".js\", \".css\", \".svg\", \".json\", \".html\", \".md\"]);\n    binaryFileExtensions = new Set([\".png\", \".jpg\"]);\n    async apply(project) {\n        await this.createAppSourceFiles(project);\n    }\n    /**\n     * Process each of the files in the {@link template} and create it in the {@link destination}.\n     */\n    async applyTemplate(project, template, destination) {\n        for (const file of template.files) {\n            const ext = path.extname(file);\n            if (this.textFileExtensions.has(ext)) {\n                await template.readString(file);\n                let sourceFile = await project.source(destination, file);\n                let fileContent = await template.readString(file);\n                let applyTheme = await this.applyKendoTheme(file, fileContent);\n                await sourceFile.setContent(applyTheme);\n            }\n            else if (this.binaryFileExtensions.has(ext)) {\n                await project\n                    .source(destination, file)\n                    .setBase64Content(await template.readBase64(file));\n            }\n            else {\n                throw new Error(`Couldn't determine if file type '${file}' is text or binary. Extension '${ext}'.`);\n            }\n        }\n    }\n    async createAppSourceFiles(project) {\n        const template = `kendo-jquery-standard`;\n        const templateFiles = await this.templateTree(`${template}`);\n        await this.applyTemplate(project, templateFiles, \"\");\n    }\n}\nexports.CreatejQueryStandardApp = CreatejQueryStandardApp;\n";
 
 /***/ }),
 
@@ -18606,7 +18618,7 @@ module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta
   \********************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"./assets/styles/site.css\"></link>\n    </head>\n    <body class=\"k-content\">\n        \n        <nav class=\"navbar navbar-inverse navbar-fixed-top p-3\">\n            <div class=\"container p-0 p-sm-3\">\n                <div class=\"navbar-header\">\n                    <button id=\"configure\" class=\"k-rpanel-toggle k-button k-primary btn-toggle\"><span class=\"menu\"></span></button>\n                    <a href=\"/\" class = \"navbar-brand\">your logo here</a>\n                </div>\n                <div id=\"responsive-panel\" class=\"navbar-left\">\n                    <ul id=\"menu\">\n                        <li><a href=\"/\">Home</a></li>\n                        <li><a href=\"about.html\">About</a></li>\n                        <li><a href=\"contact.html\">Contact</a></li>\n                    </ul>\n                </div>\n            </div>\n        </nav>\n    \n        <main>       \n            <div class=\"container\">\n                <div class=\"featured\">\n                    <div class=\"jumbotron\">\n                        <h1>ASP.NET</h1>\n                        <p class=\"lead text-muted\">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>\n                        <p><a href=\"http://asp.net\" class=\"k-button k-primary\">Learn more &raquo;</a></p>\n                    </div>\n                </div>\n                <h4>Kendo UI PanelBar</h4>\n\n                <br />\n                <ul id=\"panelbar\">\n                    <li class=\"k-state-active\">\n                        <span class=\"k-link k-state-selected\">Getting Started</span>\n                        <div style=\"padding: 10px;\">\n                            <p style=\"padding:0 1em\">\n                                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that\n                                enables a clean separation of concerns and that gives you full control over markup\n                                for enjoyable, agile development. ASP.NET MVC includes many features that enable\n                                fast, TDD-friendly development for creating sophisticated applications that use\n                                the latest web standards.\n                                <a href=\"http://go.microsoft.com/fwlink/?LinkId=245151\">Learn more...</a>\n                            </p>\n                        </div>\n                    </li>\n                    <li>\n                        Add NuGet packages and jump-start your coding\n                        <div>\n                            <p style=\"padding:0 1em\">\n                                NuGet makes it easy to install and update free libraries and tools.\n                                <a href=\"http://go.microsoft.com/fwlink/?LinkId=245153\">Learn more...</a>\n                            </p>\n                        </div>\n                    </li>\n                    <li>\n                        Find Web Hosting\n                        <div>\n                            <p style=\"padding:0 1em\">\n                                You can easily find a web hosting company that offers the right mix of features\n                                and price for your applications.\n                                <a href=\"http://go.microsoft.com/fwlink/?LinkId=245157\">Learn more...</a>\n                            </p>\n                        </div>\n                    </li>\n                </ul>\n            </div>\n        </main>\n    \n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container pb-0\">\n                <hr />\n                <p>Copyright &copy; @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n\n\n        <!-- <div id=\"content\">         \n            \n            <!-- container text templates -->\n            <script id=\"total-streams-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-streams\"></h2>\n            </script>\n            <script id=\"total-downloads-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-downloads\"></h2>\n            </script>\n            <script id=\"reach-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-reach\"></h2>\n            </script>\n            <script id=\"revenue-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-revenue\"></h2>\n            </script>\n            \n            <!-- container chart templates -->\n            <script id=\"downloads-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"downloads\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"performance-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"performance\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"apps-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"devices\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <script id=\"platforms-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"platforms\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <!-- container grid template -->\n            <script id=\"grid-template\" type=\"text/x-kendo-template\">\n                <div id=\"grid\" style=\"height:100%;\"></div>\n            </script>\n            <div class=\"d-flex justify-content-center\">\n                <div id=\"tilelayout\"></div>\n            </div>\n        </div>\n        \n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n    </body>\n</html>";
+module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <title>Kendo UI for jQuery Template Project</title>\n        <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" />\n        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        <link rel=\"stylesheet\" href=\"https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css\"></link>\n        <link rel=\"stylesheet\" href=\"./assets/styles/site.css\"></link>\n    </head>\n    <body class=\"k-content\">\n        \n        <nav class=\"navbar navbar-inverse navbar-fixed-top p-3\">\n            <div class=\"container p-0 p-sm-3\">\n                <div class=\"navbar-header\">\n                    <button id=\"configure\" class=\"k-rpanel-toggle k-button k-primary btn-toggle\"><span class=\"menu\"></span></button>\n                    <a href=\"/\" class = \"navbar-brand\">your logo here</a>\n                </div>\n                <div id=\"responsive-panel\" class=\"navbar-left\">\n                    <ul id=\"menu\">\n                        <li><a href=\"/\">Home</a></li>\n                        <li><a href=\"about.html\">About</a></li>\n                        <li><a href=\"contact.html\">Contact</a></li>\n                    </ul>\n                </div>\n            </div>\n        </nav>\n    \n        <main>       \n            <div class=\"container\">\n                <div class=\"featured\">\n                    <div class=\"jumbotron\">\n                        <h1>ASP.NET</h1>\n                        <p class=\"lead text-muted\">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>\n                        <p><a href=\"http://asp.net\" class=\"k-button k-primary\">Learn more &raquo;</a></p>\n                    </div>\n                </div>\n                <h4>Kendo UI PanelBar</h4>\n\n                <br />\n                <ul id=\"panelbar\">\n                    <li class=\"k-state-active\">\n                        <span class=\"k-link k-state-selected\">Getting Started</span>\n                        <div style=\"padding: 10px;\">\n                            <p style=\"padding:0 1em\">\n                                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that\n                                enables a clean separation of concerns and that gives you full control over markup\n                                for enjoyable, agile development. ASP.NET MVC includes many features that enable\n                                fast, TDD-friendly development for creating sophisticated applications that use\n                                the latest web standards.\n                                <a href=\"http://go.microsoft.com/fwlink/?LinkId=245151\">Learn more...</a>\n                            </p>\n                        </div>\n                    </li>\n                    <li>\n                        Add NuGet packages and jump-start your coding\n                        <div>\n                            <p style=\"padding:0 1em\">\n                                NuGet makes it easy to install and update free libraries and tools.\n                                <a href=\"http://go.microsoft.com/fwlink/?LinkId=245153\">Learn more...</a>\n                            </p>\n                        </div>\n                    </li>\n                    <li>\n                        Find Web Hosting\n                        <div>\n                            <p style=\"padding:0 1em\">\n                                You can easily find a web hosting company that offers the right mix of features\n                                and price for your applications.\n                                <a href=\"http://go.microsoft.com/fwlink/?LinkId=245157\">Learn more...</a>\n                            </p>\n                        </div>\n                    </li>\n                </ul>\n            </div>\n        </main>\n\n\n\n        <!-- <div id=\"content\">         \n            \n            <!-- container text templates -->\n            <script id=\"total-streams-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-streams\"></h2>\n            </script>\n            <script id=\"total-downloads-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-downloads\"></h2>\n            </script>\n            <script id=\"reach-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-reach\"></h2>\n            </script>\n            <script id=\"revenue-template\" type=\"text/x-kendo-template\">\n                <h2 id=\"total-revenue\"></h2>\n            </script>\n            \n            <!-- container chart templates -->\n            <script id=\"downloads-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"downloads\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"performance-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"performance\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            <script id=\"apps-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"devices\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <script id=\"platforms-chart-template\" type=\"text/x-kendo-template\">\n                <div id=\"platforms\" style=\"height:100%; width:100%;\"></div>\n            </script>\n            \n            <!-- container grid template -->\n            <script id=\"grid-template\" type=\"text/x-kendo-template\">\n                <div id=\"grid\" style=\"height:100%;\"></div>\n            </script>\n            <div class=\"d-flex justify-content-center\">\n                <div id=\"tilelayout\"></div>\n            </div>\n        </div>\n        \n        <footer class=\"footer text-center d-flex align-items-center\">\n            <div class=\"container-fluid\">\n                <p class=\"text-muted\">Copyright © <span id=\"currentYear\"></span> Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>\n            </div>\n        </footer>\n    </body>\n</html>";
 
 /***/ }),
 
@@ -18616,7 +18628,7 @@ module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta
   \***************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "{\n    \"title\": \"jsa\",\n    \"description\": \"Create jQuery Standard app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryStandardApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
+module.exports = "{\n    \"title\": \"jsa\",\n    \"description\": \"Create jQuery Standard app\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"path\": {\n            \"type\": \"string\",\n            \"hidden\": true,\n            \"description\": \"Path to generate the app into.\"\n        },\n        \"name\": {\n            \"type\": \"string\",\n            \"displayName\": \"Application Name\",\n            \"description\": \"Name of the generated application.\",\n            \"default\": \"MyjQueryStandardApp\"\n        },\n        \"theme\": {\n            \"type\": \"string\",\n            \"description\": \"Kendo theme to apply.\",\n            \"default\": \"default\",\n            \"enum\": [\"default\", \"bootstrap\", \"material\", \"fluent\"]\n        },\n        \"cdn\": {\n            \"type\": \"string\",\n            \"default\": \"8.2.1\",\n            \"description\": \"Version of the CDN to pull themes from.\"\n        }\n    },\n    \"additionalProperties\": false,\n    \"required\": [\n        \"path\",\n        \"name\"\n    ]\n}";
 
 /***/ }),
 
@@ -18646,7 +18658,7 @@ module.exports = "import * as nav from './header-nav';\nimport '@progress/kendo-
   \*********************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "import jQuery from 'jquery';\nimport '@progress/kendo-ui/js/kendo.menu';\nimport '@progress/kendo-ui/js/kendo.panelbar';\nimport '@progress/kendo-ui/js/kendo.responsivepanel';\n\nexport const init = () => {\n    window.jQuery = window.$ = jQuery;\n\n    $(\"#responsive-panel\").kendoResponsivePanel({\n        breakpoint: 768,\n        autoClose: false,\n        orientation: \"top\"\n    });\n\n    $(\"#menu\").kendoMenu();\n\n\n    kendo.ui.icon($(\".menu\"), { icon: \"menu\", type: \"svg\" });\n\n    $(\"#panelbar\").kendoPanelBar();\n}\n";
+module.exports = "import jQuery from 'jquery';\nimport '@progress/kendo-ui/js/kendo.menu';\nimport '@progress/kendo-ui/js/kendo.panelbar';\nimport '@progress/kendo-ui/js/kendo.responsivepanel';\n\nexport const init = () => {\n    window.jQuery = window.$ = jQuery;\n\n    $(\"#responsive-panel\").kendoResponsivePanel({\n        breakpoint: 768,\n        autoClose: false,\n        orientation: \"top\"\n    });\n\n    $(\"#menu\").kendoMenu();\n\n\n    kendo.ui.icon($(\".menu\"), { icon: \"menu\", type: \"svg\" });\n\n    $(\"#panelbar\").kendoPanelBar();\n\n    $(\"#currentYear\").html(new Date().getFullYear());\n}\n";
 
 /***/ }),
 
@@ -18926,7 +18938,7 @@ module.exports = "[\n\t{\n\t\t\"orderID\": 10271,\n\t\t\"customerID\": \"SPLIR\"
   \***********************************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "\"use client\"\n\nimport * as React from \"react\";\n\nimport {\n    Grid,\n    GridColumn,\n    GridToolbar,\n    GridDetailRowProps,\n    GridDataStateChangeEvent,\n    GridExpandChangeEvent\n} from \"@progress/kendo-react-grid\";\n\nimport { GridPDFExport } from \"@progress/kendo-react-pdf\";\nimport { ExcelExport } from \"@progress/kendo-react-excel-export\";\n\nimport { DataResult, process, State } from \"@progress/kendo-data-query\";\nimport orders from \"./orders.json\";\nimport { Order } from \"./interfaces\";\nimport { Button } from \"@progress/kendo-react-buttons\";\n\nconst DetailComponent = (props: GridDetailRowProps) => {\n    const dataItem = props.dataItem;\n    return (\n    <div>\n      <section style={{ width: \"200px\", float: \"left\" }}>\n        <p>\n          <strong>Street:</strong> {dataItem.shipAddress.street}\n        </p>\n        <p>\n          <strong>City:</strong> {dataItem.shipAddress.city}\n        </p>\n        <p>\n          <strong>Country:</strong> {dataItem.shipAddress.country}\n        </p>\n        <p>\n          <strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}\n        </p>\n      </section>\n      <Grid style={{ width: \"500px\" }} data={dataItem.details} />\n    </div>\n    );\n};\n\nexport default function GridNextjs() {\n    const [dataState, setDataState] = React.useState<State>({\n        skip: 0,\n        take: 20,\n        sort: [{ field: \"orderDate\", dir: \"desc\" }],\n        group: [{ field: \"customerID\" }]\n    });\n    const [dataResult, setDataResult] = React.useState<DataResult>(\n        process(orders, dataState)\n    );\n\n    const dataStateChange = (event: GridDataStateChangeEvent) => {\n        setDataResult(process(orders, event.dataState));\n        setDataState(event.dataState);\n    };\n\n    const expandChange = (event: GridExpandChangeEvent) => {\n        const isExpanded =\n      event.dataItem.expanded === undefined\n          ? event.dataItem.aggregates\n          : event.dataItem.expanded;\n        event.dataItem.expanded = !isExpanded;\n\n        setDataResult({ ...dataResult, data: [...dataResult.data] });\n    };\n\n    let _pdfExport: GridPDFExport | null;\n    const exportExcel = () => {\n        _export.save();\n    };\n\n    let _export: ExcelExport | null;\n    const exportPDF = () => {\n        _pdfExport.save();\n    };\n\n    return (\n        <div>\n          <ExcelExport\n            data={orders}\n            ref={(exporter) => {\n              _export = exporter;\n            }}\n          >\n            <Grid\n              id=\"test\"\n              style={{ height: \"700px\" }}\n              sortable={true}\n              filterable={true}\n              groupable={true}\n              reorderable={true}\n              pageable={{ buttonCount: 4, pageSizes: true }}\n              data={dataResult}\n              {...dataState}\n              onDataStateChange={dataStateChange}\n              detail={DetailComponent}\n              expandField=\"expanded\"\n              onExpandChange={expandChange}\n            >\n              <GridToolbar>\n                <Button\n                  title=\"Export to Excel\"\n                  onClick={exportExcel}\n                >\n                  Export to Excel\n                </Button>\n                &nbsp;\n                <Button\n                  onClick={exportPDF}\n                >\n                  Export to PDF\n                </Button>\n              </GridToolbar>\n              <GridColumn field=\"customerID\" width=\"200px\" />\n              <GridColumn\n                field=\"orderDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"shipName\" width=\"280px\" />\n              <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                field=\"shippedDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                locked={true}\n                field=\"orderID\"\n                filterable={false}\n                title=\"ID\"\n                width=\"90px\"\n              />\n            </Grid>\n          </ExcelExport>\n          <GridPDFExport\n            ref={(element) => {\n              _pdfExport = element;\n            }}\n            margin=\"1cm\"\n          >\n            {\n              <Grid\n                data={process(orders, {\n                  skip: dataState.skip,\n                  take: dataState.take\n                })}\n              >\n                <GridColumn field=\"customerID\" width=\"200px\" />\n                <GridColumn\n                  field=\"orderDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"shipName\" width=\"280px\" />\n                <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  field=\"shippedDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  locked={true}\n                  field=\"orderID\"\n                  filterable={false}\n                  title=\"ID\"\n                  width=\"90px\"\n                />\n              </Grid>\n            }\n          </GridPDFExport>\n        </div>\n    );\n}";
+module.exports = "\"use client\"\n\nimport * as React from \"react\";\n\nimport {\n    Grid,\n    GridColumn,\n    GridToolbar,\n    GridDetailRowProps,\n    GridDataStateChangeEvent,\n    GridExpandChangeEvent\n} from \"@progress/kendo-react-grid\";\n\nimport { GridPDFExport } from \"@progress/kendo-react-pdf\";\nimport { ExcelExport } from \"@progress/kendo-react-excel-export\";\n\nimport { DataResult, process, State } from \"@progress/kendo-data-query\";\nimport orders from \"./orders.json\";\nimport { Order } from \"./interfaces\";\nimport { Button } from \"@progress/kendo-react-buttons\";\n\nconst DetailComponent = (props: GridDetailRowProps) => {\n    const dataItem = props.dataItem;\n    return (\n    <div>\n      <section style={{ width: \"200px\", float: \"left\" }}>\n        <p>\n          <strong>Street:</strong> {dataItem.shipAddress.street}\n        </p>\n        <p>\n          <strong>City:</strong> {dataItem.shipAddress.city}\n        </p>\n        <p>\n          <strong>Country:</strong> {dataItem.shipAddress.country}\n        </p>\n        <p>\n          <strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}\n        </p>\n      </section>\n      <Grid style={{ width: \"500px\" }} data={dataItem.details} />\n    </div>\n    );\n};\n\nexport default function GridNextjs() {\n    const [dataState, setDataState] = React.useState<State>({\n        skip: 0,\n        take: 20,\n        sort: [{ field: \"orderDate\", dir: \"desc\" }],\n        group: [{ field: \"customerID\" }]\n    });\n    const [dataResult, setDataResult] = React.useState<DataResult>(\n        process(orders, dataState)\n    );\n\n    const dataStateChange = (event: GridDataStateChangeEvent) => {\n        setDataResult(process(orders, event.dataState));\n        setDataState(event.dataState);\n    };\n\n    const expandChange = (event: GridExpandChangeEvent) => {\n        const isExpanded =\n      event.dataItem.expanded === undefined\n          ? event.dataItem.aggregates\n          : event.dataItem.expanded;\n        event.dataItem.expanded = !isExpanded;\n\n        setDataResult({ ...dataResult, data: [...dataResult.data] });\n    };\n\n    let _export: ExcelExport | null;\n    const exportExcel = () => {\n      _export && _export.save();\n    };\n    \n    let _pdfExport: GridPDFExport | null;\n    const exportPDF = () => {\n      _pdfExport && _pdfExport.save();\n    };\n\n    return (\n        <div>\n          <ExcelExport\n            data={orders}\n            ref={(exporter) => {\n              _export = exporter;\n            }}\n          >\n            <Grid\n              id=\"test\"\n              style={{ height: \"700px\" }}\n              sortable={true}\n              filterable={true}\n              groupable={true}\n              reorderable={true}\n              pageable={{ buttonCount: 4, pageSizes: true }}\n              data={dataResult}\n              {...dataState}\n              onDataStateChange={dataStateChange}\n              detail={DetailComponent}\n              expandField=\"expanded\"\n              onExpandChange={expandChange}\n            >\n              <GridToolbar>\n                <Button\n                  title=\"Export to Excel\"\n                  onClick={exportExcel}\n                >\n                  Export to Excel\n                </Button>\n                &nbsp;\n                <Button\n                  onClick={exportPDF}\n                >\n                  Export to PDF\n                </Button>\n              </GridToolbar>\n              <GridColumn field=\"customerID\" width=\"200px\" />\n              <GridColumn\n                field=\"orderDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"shipName\" width=\"280px\" />\n              <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                field=\"shippedDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                locked={true}\n                field=\"orderID\"\n                filterable={false}\n                title=\"ID\"\n                width=\"90px\"\n              />\n            </Grid>\n          </ExcelExport>\n          <GridPDFExport\n            ref={(element) => {\n              _pdfExport = element;\n            }}\n            margin=\"1cm\"\n          >\n            {\n              <Grid\n                data={process(orders, {\n                  skip: dataState.skip,\n                  take: dataState.take\n                })}\n              >\n                <GridColumn field=\"customerID\" width=\"200px\" />\n                <GridColumn\n                  field=\"orderDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"shipName\" width=\"280px\" />\n                <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  field=\"shippedDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  locked={true}\n                  field=\"orderID\"\n                  filterable={false}\n                  title=\"ID\"\n                  width=\"90px\"\n                />\n              </Grid>\n            }\n          </GridPDFExport>\n        </div>\n    );\n}";
 
 /***/ }),
 
@@ -19016,7 +19028,7 @@ module.exports = "<svg width=\"886\" height=\"366\" viewBox=\"0 0 886 366\" fill
   \**********************************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "import * as React from \"react\";\n\nimport {\n    Grid,\n    GridColumn,\n    GridToolbar,\n    GridDetailRowProps,\n    GridDataStateChangeEvent,\n    GridExpandChangeEvent\n} from \"@progress/kendo-react-grid\";\n\nimport { GridPDFExport } from \"@progress/kendo-react-pdf\";\nimport { ExcelExport } from \"@progress/kendo-react-excel-export\";\n\nimport { DataResult, process, State } from \"@progress/kendo-data-query\";\nimport orders from \"./orders.json\";\nimport { Order } from \"./interfaces\";\nimport { Button } from \"@progress/kendo-react-buttons\";\n\nconst DetailComponent = (props: GridDetailRowProps) => {\n    const dataItem = props.dataItem;\n    return (\n    <div>\n      <section style={{ width: \"200px\", float: \"left\" }}>\n        <p>\n          <strong>Street:</strong> {dataItem.shipAddress.street}\n        </p>\n        <p>\n          <strong>City:</strong> {dataItem.shipAddress.city}\n        </p>\n        <p>\n          <strong>Country:</strong> {dataItem.shipAddress.country}\n        </p>\n        <p>\n          <strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}\n        </p>\n      </section>\n      <Grid style={{ width: \"500px\" }} data={dataItem.details} />\n    </div>\n    );\n};\n\nexport default function GridNextjs() {\n    const [dataState, setDataState] = React.useState<State>({\n        skip: 0,\n        take: 20,\n        sort: [{ field: \"orderDate\", dir: \"desc\" }],\n        group: [{ field: \"customerID\" }]\n    });\n    const [dataResult, setDataResult] = React.useState<DataResult>(\n        process(orders, dataState)\n    );\n\n    const dataStateChange = (event: GridDataStateChangeEvent) => {\n        setDataResult(process(orders, event.dataState));\n        setDataState(event.dataState);\n    };\n\n    const expandChange = (event: GridExpandChangeEvent) => {\n        const isExpanded =\n      event.dataItem.expanded === undefined\n          ? event.dataItem.aggregates\n          : event.dataItem.expanded;\n        event.dataItem.expanded = !isExpanded;\n\n        setDataResult({ ...dataResult, data: [...dataResult.data] });\n    };\n\n    let _pdfExport: GridPDFExport | null;\n    const exportExcel = () => {\n        _export.save();\n    };\n\n    let _export: ExcelExport | null;\n    const exportPDF = () => {\n        _pdfExport.save();\n    };\n\n    return (\n        <div>\n          <ExcelExport\n            data={orders}\n            ref={(exporter) => {\n              _export = exporter;\n            }}\n          >\n            <Grid\n              id=\"test\"\n              style={{ height: \"700px\" }}\n              sortable={true}\n              filterable={true}\n              groupable={true}\n              reorderable={true}\n              pageable={{ buttonCount: 4, pageSizes: true }}\n              data={dataResult}\n              {...dataState}\n              onDataStateChange={dataStateChange}\n              detail={DetailComponent}\n              expandField=\"expanded\"\n              onExpandChange={expandChange}\n            >\n              <GridToolbar>\n                <Button\n                  title=\"Export to Excel\"\n                  onClick={exportExcel}\n                >\n                  Export to Excel\n                </Button>\n                &nbsp;\n                <Button\n                  onClick={exportPDF}\n                >\n                  Export to PDF\n                </Button>\n              </GridToolbar>\n              <GridColumn field=\"customerID\" width=\"200px\" />\n              <GridColumn\n                field=\"orderDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"shipName\" width=\"280px\" />\n              <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                field=\"shippedDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                locked={true}\n                field=\"orderID\"\n                filterable={false}\n                title=\"ID\"\n                width=\"90px\"\n              />\n            </Grid>\n          </ExcelExport>\n          <GridPDFExport\n            ref={(element) => {\n              _pdfExport = element;\n            }}\n            margin=\"1cm\"\n          >\n            {\n              <Grid\n                data={process(orders, {\n                  skip: dataState.skip,\n                  take: dataState.take\n                })}\n              >\n                <GridColumn field=\"customerID\" width=\"200px\" />\n                <GridColumn\n                  field=\"orderDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"shipName\" width=\"280px\" />\n                <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  field=\"shippedDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  locked={true}\n                  field=\"orderID\"\n                  filterable={false}\n                  title=\"ID\"\n                  width=\"90px\"\n                />\n              </Grid>\n            }\n          </GridPDFExport>\n        </div>\n    );\n}";
+module.exports = "import * as React from \"react\";\n\nimport {\n    Grid,\n    GridColumn,\n    GridToolbar,\n    GridDetailRowProps,\n    GridDataStateChangeEvent,\n    GridExpandChangeEvent\n} from \"@progress/kendo-react-grid\";\n\nimport { GridPDFExport } from \"@progress/kendo-react-pdf\";\nimport { ExcelExport } from \"@progress/kendo-react-excel-export\";\n\nimport { DataResult, process, State } from \"@progress/kendo-data-query\";\nimport orders from \"./orders.json\";\nimport { Order } from \"./interfaces\";\nimport { Button } from \"@progress/kendo-react-buttons\";\n\nconst DetailComponent = (props: GridDetailRowProps) => {\n    const dataItem = props.dataItem;\n    return (\n    <div>\n      <section style={{ width: \"200px\", float: \"left\" }}>\n        <p>\n          <strong>Street:</strong> {dataItem.shipAddress.street}\n        </p>\n        <p>\n          <strong>City:</strong> {dataItem.shipAddress.city}\n        </p>\n        <p>\n          <strong>Country:</strong> {dataItem.shipAddress.country}\n        </p>\n        <p>\n          <strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}\n        </p>\n      </section>\n      <Grid style={{ width: \"500px\" }} data={dataItem.details} />\n    </div>\n    );\n};\n\nexport default function GridNextjs() {\n    const [dataState, setDataState] = React.useState<State>({\n        skip: 0,\n        take: 20,\n        sort: [{ field: \"orderDate\", dir: \"desc\" }],\n        group: [{ field: \"customerID\" }]\n    });\n    const [dataResult, setDataResult] = React.useState<DataResult>(\n        process(orders, dataState)\n    );\n\n    const dataStateChange = (event: GridDataStateChangeEvent) => {\n        setDataResult(process(orders, event.dataState));\n        setDataState(event.dataState);\n    };\n\n    const expandChange = (event: GridExpandChangeEvent) => {\n        const isExpanded =\n      event.dataItem.expanded === undefined\n          ? event.dataItem.aggregates\n          : event.dataItem.expanded;\n        event.dataItem.expanded = !isExpanded;\n\n        setDataResult({ ...dataResult, data: [...dataResult.data] });\n    };\n\n    let _export: ExcelExport | null;\n    const exportExcel = () => {\n      _export && _export.save();\n    };\n    \n    let _pdfExport: GridPDFExport | null;\n    const exportPDF = () => {\n      _pdfExport && _pdfExport.save();\n    };\n\n    return (\n        <div>\n          <ExcelExport\n            data={orders}\n            ref={(exporter) => {\n              _export = exporter;\n            }}\n          >\n            <Grid\n              id=\"test\"\n              style={{ height: \"700px\" }}\n              sortable={true}\n              filterable={true}\n              groupable={true}\n              reorderable={true}\n              pageable={{ buttonCount: 4, pageSizes: true }}\n              data={dataResult}\n              {...dataState}\n              onDataStateChange={dataStateChange}\n              detail={DetailComponent}\n              expandField=\"expanded\"\n              onExpandChange={expandChange}\n            >\n              <GridToolbar>\n                <Button\n                  title=\"Export to Excel\"\n                  onClick={exportExcel}\n                >\n                  Export to Excel\n                </Button>\n                &nbsp;\n                <Button\n                  onClick={exportPDF}\n                >\n                  Export to PDF\n                </Button>\n              </GridToolbar>\n              <GridColumn field=\"customerID\" width=\"200px\" />\n              <GridColumn\n                field=\"orderDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"shipName\" width=\"280px\" />\n              <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                field=\"shippedDate\"\n                filter=\"date\"\n                format=\"{0:D}\"\n                width=\"300px\"\n              />\n              <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n              <GridColumn\n                locked={true}\n                field=\"orderID\"\n                filterable={false}\n                title=\"ID\"\n                width=\"90px\"\n              />\n            </Grid>\n          </ExcelExport>\n          <GridPDFExport\n            ref={(element) => {\n              _pdfExport = element;\n            }}\n            margin=\"1cm\"\n          >\n            {\n              <Grid\n                data={process(orders, {\n                  skip: dataState.skip,\n                  take: dataState.take\n                })}\n              >\n                <GridColumn field=\"customerID\" width=\"200px\" />\n                <GridColumn\n                  field=\"orderDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"shipName\" width=\"280px\" />\n                <GridColumn field=\"freight\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  field=\"shippedDate\"\n                  filter=\"date\"\n                  format=\"{0:D}\"\n                  width=\"300px\"\n                />\n                <GridColumn field=\"employeeID\" filter=\"numeric\" width=\"200px\" />\n                <GridColumn\n                  locked={true}\n                  field=\"orderID\"\n                  filterable={false}\n                  title=\"ID\"\n                  width=\"90px\"\n                />\n              </Grid>\n            }\n          </GridPDFExport>\n        </div>\n    );\n}";
 
 /***/ }),
 
@@ -19046,7 +19058,7 @@ module.exports = "[\n\t{\n\t\t\"orderID\": 10271,\n\t\t\"customerID\": \"SPLIR\"
   \*****************************************************************************************************************************************************/
 /***/ ((module) => {
 
-module.exports = "import Image from \"next/image\"\n\nimport { Button } from \"@progress/kendo-react-buttons\";\n\nimport { \n  Card, \n  CardActions,\n  CardBody, \n  CardHeader, \n  CardTitle \n} from \"@progress/kendo-react-layout\";\n\nimport '@progress/kendo-theme-default/dist/all.css';\nimport styles from '@/styles/Home.module.css';\n\nexport default function Home() {\n  return (\n    <>\n      <Head>\n        <title>Create Next App</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <main className={`${styles.main}`}>\n        <div className={styles.page}>\n          <header className={styles.header}>\n            <h2>KendoReact ❤️ Next.js</h2>\n            <div>\n              <Button themeColor=\"primary\" fillMode=\"flat\" className=\"k-mr-1\">Home</Button>\n              <Button themeColor=\"primary\" fillMode=\"flat\" onClick={() => window.location.pathname = \"./grid\"}>Grid</Button>\n            </div>\n          </header>\n          <div className={styles.container}>\n            <Image\n              className={styles.reactLogo}\n              src=\"/react.svg\"\n              alt=\"React Logo\"\n              width={886}\n              height={788}\n              priority\n            />\n            <div className=\"k-d-flex k-flex-col\">\n              <h1 className={styles.title}>Welcome to KendoReact</h1>\n              <h3 className={styles.subtitle}>Comprehensive React UI Component Library</h3>\n              <div className=\"k-mt-3\">\n                <Button themeColor=\"primary\" className=\"k-mr-2\">\n                  <a href=\"https://www.telerik.com/kendo-react-ui\" target=\"_blank\">Try KendoReact</a>\n                </Button>\n                <Button themeColor=\"secondary\" fillMode=\"solid\">\n                  <a href=\"https://vercel.com/\" target=\"_blank\">More about Next.js</a>\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          <section className={styles.section}>\n            <div className={styles.container}>\n              <div className=\"k-pl-8\">\n                <h5 className={styles.sectionTitle}>Get started</h5>\n                <p>Edit index page at or set up data source at <code>pages/index.jsx</code> or set up data source at <code>kendo/data.json</code></p>\n              </div>\n            </div>\n          </section>\n\n          <section className={styles.cardsSection}>\n            <div className={styles.cardsWrapper}>\n              <h5 className={styles.sectionTitle}>Highlights</h5>\n              <div className={styles.cardsContainer}>\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                        src=\"/documentation.svg\"\n                        alt=\"Documentation Logo\"\n                        width={64}\n                        height={64}\n                        priority\n                      />\n                    <CardTitle className={styles.cardTitle}>Documentation</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <p className={styles.cardBody}>\n                      Unlock the full potential of our features! Check KendoReact Documentation for step-by-step guides and insights.\n                    </p>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://www.telerik.com/kendo-react-ui/components/\" target=\"_blank\">Learn more</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                      src=\"/classroom.svg\"\n                      alt=\"Virtual Classroom Logo\"\n                      width={64}\n                      height={64}\n                      priority\n                    />\n                    <CardTitle className={styles.cardTitle}>Virtual Classroom</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <p className={styles.cardBody}>\n                      Need to quickly get started with KendoReact or just prefer video on-boarding materials we have Virtual Classroom for you.\n                    </p>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://rb.gy/w21cc8\" target=\"_blank\">Get Started</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                      src=\"/design.svg\"\n                      alt=\"Design System Logo\"\n                      width={64}\n                      height={64}\n                      priority\n                    />\n                    <CardTitle className={styles.cardTitle}>Design System</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <p className={styles.cardBody}>\n                      Quickly apply harmonious and consistent styles to the components in your app with the Progress Design System.\n                    </p>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://www.telerik.com/design-system\" target=\"_blank\">Find your style</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                      src=\"/license.svg\"\n                      alt=\"License Logo\"\n                      width={64}\n                      height={64}\n                      priority\n                    />\n                    <CardTitle className={styles.cardTitle}>Activate your license</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <ul className={styles.cardBodyList}>\n                      <li>Flexible Licensing Policy</li>\n                      <li>Maintenance & Support</li>\n                      <li>Total Cost of Ownership</li>\n                      <li>Enterprise-Ready Offerings</li>\n                    </ul>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://www.telerik.com/purchase.aspx?filter=web#individual-products\" target=\"_blank\">Buy now</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n              </div>\n            </div>\n          </section>\n\n          <footer className={styles.footer}>\n            <p>Copyright © 2023 Progress Software. All rights reserved.</p>\n          </footer>\n        </div>\n      </main>\n    </>\n  )\n}\n";
+module.exports = "import Head from 'next/head'\nimport Image from \"next/image\"\n\nimport { Button } from \"@progress/kendo-react-buttons\";\n\nimport { \n  Card, \n  CardActions,\n  CardBody, \n  CardHeader, \n  CardTitle \n} from \"@progress/kendo-react-layout\";\n\nimport '@progress/kendo-theme-default/dist/all.css';\nimport styles from '@/styles/Home.module.css';\n\nexport default function Home() {\n  return (\n    <>\n      <Head>\n        <title>Create Next App</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <main className={`${styles.main}`}>\n        <div className={styles.page}>\n          <header className={styles.header}>\n            <h2>KendoReact ❤️ Next.js</h2>\n            <div>\n              <Button themeColor=\"primary\" fillMode=\"flat\" className=\"k-mr-1\">Home</Button>\n              <Button themeColor=\"primary\" fillMode=\"flat\" onClick={() => window.location.pathname = \"./grid\"}>Grid</Button>\n            </div>\n          </header>\n          <div className={styles.container}>\n            <Image\n              className={styles.reactLogo}\n              src=\"/react.svg\"\n              alt=\"React Logo\"\n              width={886}\n              height={788}\n              priority\n            />\n            <div className=\"k-d-flex k-flex-col\">\n              <h1 className={styles.title}>Welcome to KendoReact</h1>\n              <h3 className={styles.subtitle}>Comprehensive React UI Component Library</h3>\n              <div className=\"k-mt-3\">\n                <Button themeColor=\"primary\" className=\"k-mr-2\">\n                  <a href=\"https://www.telerik.com/kendo-react-ui\" target=\"_blank\">Try KendoReact</a>\n                </Button>\n                <Button themeColor=\"secondary\" fillMode=\"solid\">\n                  <a href=\"https://vercel.com/\" target=\"_blank\">More about Next.js</a>\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          <section className={styles.section}>\n            <div className={styles.container}>\n              <div className=\"k-pl-8\">\n                <h5 className={styles.sectionTitle}>Get started</h5>\n                <p>Edit index page at or set up data source at <code>pages/index.jsx</code> or set up data source at <code>kendo/data.json</code></p>\n              </div>\n            </div>\n          </section>\n\n          <section className={styles.cardsSection}>\n            <div className={styles.cardsWrapper}>\n              <h5 className={styles.sectionTitle}>Highlights</h5>\n              <div className={styles.cardsContainer}>\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                        src=\"/documentation.svg\"\n                        alt=\"Documentation Logo\"\n                        width={64}\n                        height={64}\n                        priority\n                      />\n                    <CardTitle className={styles.cardTitle}>Documentation</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <p className={styles.cardBody}>\n                      Unlock the full potential of our features! Check KendoReact Documentation for step-by-step guides and insights.\n                    </p>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://www.telerik.com/kendo-react-ui/components/\" target=\"_blank\">Learn more</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                      src=\"/classroom.svg\"\n                      alt=\"Virtual Classroom Logo\"\n                      width={64}\n                      height={64}\n                      priority\n                    />\n                    <CardTitle className={styles.cardTitle}>Virtual Classroom</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <p className={styles.cardBody}>\n                      Need to quickly get started with KendoReact or just prefer video on-boarding materials we have Virtual Classroom for you.\n                    </p>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://rb.gy/w21cc8\" target=\"_blank\">Get Started</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                      src=\"/design.svg\"\n                      alt=\"Design System Logo\"\n                      width={64}\n                      height={64}\n                      priority\n                    />\n                    <CardTitle className={styles.cardTitle}>Design System</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <p className={styles.cardBody}>\n                      Quickly apply harmonious and consistent styles to the components in your app with the Progress Design System.\n                    </p>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://www.telerik.com/design-system\" target=\"_blank\">Find your style</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n\n                <Card className={styles.card}>\n                  <CardHeader className={styles.cardHeader}>\n                    <Image\n                      src=\"/license.svg\"\n                      alt=\"License Logo\"\n                      width={64}\n                      height={64}\n                      priority\n                    />\n                    <CardTitle className={styles.cardTitle}>Activate your license</CardTitle>\n                  </CardHeader>\n                  <CardBody>\n                    <ul className={styles.cardBodyList}>\n                      <li>Flexible Licensing Policy</li>\n                      <li>Maintenance & Support</li>\n                      <li>Total Cost of Ownership</li>\n                      <li>Enterprise-Ready Offerings</li>\n                    </ul>\n                  </CardBody>\n                  <CardActions>\n                    <Button themeColor=\"primary\" fillMode=\"flat\">\n                      <a href=\"https://www.telerik.com/purchase.aspx?filter=web#individual-products\" target=\"_blank\">Buy now</a>\n                    </Button>\n                  </CardActions>\n                </Card>\n              </div>\n            </div>\n          </section>\n\n          <footer className={styles.footer}>\n            <p>Copyright © 2023 Progress Software. All rights reserved.</p>\n          </footer>\n        </div>\n      </main>\n    </>\n  )\n}\n";
 
 /***/ }),
 
@@ -20224,11 +20236,23 @@ class CreatejQueryBlankApp extends scaffolding_1.ProjectTemplate {
         }
         else {}
     }
+    async getCdnVersion() {
+        if (this.options.cdn == undefined) {
+            let jsonSchema = await CreatejQueryBlankApp.schema();
+            let cdnVersion = jsonSchema.properties.cdn.default;
+            return cdnVersion;
+        }
+        else {
+            let cdnVersion = this.options.cdn;
+            return cdnVersion;
+        }
+    }
     async applyKendoTheme(file, content) {
         const filePaths = [`pages/index.html`];
+        const cdnVersion = await this.getCdnVersion();
         const theme = this.options.theme;
         const regex = "https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css";
-        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;
+        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;
         for (const filePath of filePaths) {
             if (file.includes(filePath)) {
                 let updatedContent = content.replace(regex, replacementRegex);
@@ -20348,11 +20372,23 @@ class CreatejQueryDashboardLayoutApp extends scaffolding_1.ProjectTemplate {
         }
         else {}
     }
+    async getCdnVersion() {
+        if (this.options.cdn == undefined) {
+            let jsonSchema = await CreatejQueryDashboardLayoutApp.schema();
+            let cdnVersion = jsonSchema.properties.cdn.default;
+            return cdnVersion;
+        }
+        else {
+            let cdnVersion = this.options.cdn;
+            return cdnVersion;
+        }
+    }
     async applyKendoTheme(file, content) {
         const filePaths = [`pages/index.html`];
+        const cdnVersion = await this.getCdnVersion();
         const theme = this.options.theme;
         const regex = "https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css";
-        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;
+        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;
         for (const filePath of filePaths) {
             if (file.includes(filePath)) {
                 let updatedContent = content.replace(regex, replacementRegex);
@@ -20471,11 +20507,23 @@ class CreatejQueryDashboardApp extends scaffolding_1.ProjectTemplate {
         }
         else {}
     }
+    async getCdnVersion() {
+        if (this.options.cdn == undefined) {
+            let jsonSchema = await CreatejQueryDashboardApp.schema();
+            let cdnVersion = jsonSchema.properties.cdn.default;
+            return cdnVersion;
+        }
+        else {
+            let cdnVersion = this.options.cdn;
+            return cdnVersion;
+        }
+    }
     async applyKendoTheme(file, content) {
         const filePaths = [`pages/index.html`];
+        const cdnVersion = await this.getCdnVersion();
         const theme = this.options.theme;
         const regex = "https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css";
-        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;
+        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;
         for (const filePath of filePaths) {
             if (file.includes(filePath)) {
                 let updatedContent = content.replace(regex, replacementRegex);
@@ -20594,11 +20642,23 @@ class CreatejQueryGridApp extends scaffolding_1.ProjectTemplate {
         }
         else {}
     }
+    async getCdnVersion() {
+        if (this.options.cdn == undefined) {
+            let jsonSchema = await CreatejQueryGridApp.schema();
+            let cdnVersion = jsonSchema.properties.cdn.default;
+            return cdnVersion;
+        }
+        else {
+            let cdnVersion = this.options.cdn;
+            return cdnVersion;
+        }
+    }
     async applyKendoTheme(file, content) {
         const filePaths = [`pages/index.html`];
+        const cdnVersion = await this.getCdnVersion();
         const theme = this.options.theme;
         const regex = "https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css";
-        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;
+        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;
         for (const filePath of filePaths) {
             if (file.includes(filePath)) {
                 let updatedContent = content.replace(regex, replacementRegex);
@@ -20717,11 +20777,23 @@ class CreatejQueryStandardApp extends scaffolding_1.ProjectTemplate {
         }
         else {}
     }
+    async getCdnVersion() {
+        if (this.options.cdn == undefined) {
+            let jsonSchema = await CreatejQueryStandardApp.schema();
+            let cdnVersion = jsonSchema.properties.cdn.default;
+            return cdnVersion;
+        }
+        else {
+            let cdnVersion = this.options.cdn;
+            return cdnVersion;
+        }
+    }
     async applyKendoTheme(file, content) {
         const filePaths = [`pages/about.html`, `pages/contact.html`, `pages/index.html`];
+        const cdnVersion = await this.getCdnVersion();
         const theme = this.options.theme;
         const regex = "https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css";
-        const replacementRegex = `https://kendo.cdn.telerik.com/themes/8.0.1/${theme}/${theme}-main.css`;
+        const replacementRegex = `https://kendo.cdn.telerik.com/themes/${cdnVersion}/${theme}/${theme}-main.css`;
         for (const filePath of filePaths) {
             if (file.includes(filePath)) {
                 let updatedContent = content.replace(regex, replacementRegex);
@@ -21942,7 +22014,7 @@ class CreateNextJSApp extends scaffolding_1.ProjectTemplate {
             "dependencies": {
                 "react": "^18",
                 "react-dom": "^18",
-                "next": "14.0.3"
+                "next": "14.2.5"
             }
         };
         if (this.language == "TypeScript") {
@@ -22137,52 +22209,52 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
         packageJson.dependencies = {
             ...packageJson.dependencies,
             "@progress/kendo-data-query": "^1.7.0",
-            "@progress/kendo-drawing": "^1.18.0",
-            "@progress/kendo-licensing": "^1.3.3",
-            "@progress/kendo-theme-default": "^7.0.1",
-            "@progress/kendo-theme-bootstrap": "^7.0.1",
-            "@progress/kendo-theme-material": "^7.0.1",
-            "@progress/kendo-react-animation": "^7.0.0",
-            "@progress/kendo-react-buttons": "^7.0.0",
-            "@progress/kendo-react-charts": "^7.0.0",
-            "@progress/kendo-react-common": "^7.0.0",
-            "@progress/kendo-react-conversational-ui": "^7.0.0",
-            "@progress/kendo-react-data-tools": "^7.0.0",
-            "@progress/kendo-react-dateinputs": "^7.0.0",
-            "@progress/kendo-react-dialogs": "^7.0.0",
-            "@progress/kendo-react-dropdowns": "^7.0.0",
-            "@progress/kendo-react-editor": "^7.0.0",
-            "@progress/kendo-react-excel-export": "^7.0.0",
-            "@progress/kendo-react-form": "^7.0.0",
-            "@progress/kendo-react-gantt": "^7.0.0",
-            "@progress/kendo-react-gauges": "^7.0.0",
-            "@progress/kendo-react-grid": "^7.0.0",
-            "@progress/kendo-react-indicators": "^7.0.0",
-            "@progress/kendo-react-inputs": "^7.0.0",
-            "@progress/kendo-react-intl": "^7.0.0",
-            "@progress/kendo-react-labels": "^7.0.0",
-            "@progress/kendo-react-layout": "^7.0.0",
-            "@progress/kendo-react-listbox": "^7.0.0",
-            "@progress/kendo-react-listview": "^7.0.0",
-            "@progress/kendo-react-map": "^7.0.0",
-            "@progress/kendo-react-notification": "^7.0.0",
-            "@progress/kendo-react-orgchart": "^7.0.0",
-            "@progress/kendo-react-pdf": "^7.0.0",
-            "@progress/kendo-react-pivotgrid": "^7.0.0",
-            "@progress/kendo-react-popup": "^7.0.0",
-            "@progress/kendo-react-progressbars": "^7.0.0",
-            "@progress/kendo-react-ripple": "^7.0.0",
-            "@progress/kendo-react-scheduler": "^7.0.0",
-            "@progress/kendo-react-scrollview": "^7.0.0",
-            "@progress/kendo-react-sortable": "^7.0.0",
-            "@progress/kendo-react-spreadsheet": "^7.0.0",
-            "@progress/kendo-react-tooltip": "^7.0.0",
-            "@progress/kendo-react-treelist": "^7.0.0",
-            "@progress/kendo-react-treeview": "^7.0.0",
-            "@progress/kendo-react-upload": "^7.0.0",
-            "@progress/kendo-react-pdf-viewer": "^7.0.0",
-            "@progress/kendo-react-taskboard": "^7.0.0",
-            "@progress/kendo-svg-icons": "^2.0.0",
+            "@progress/kendo-drawing": "^1.20.2",
+            "@progress/kendo-licensing": "^1.3.5",
+            "@progress/kendo-theme-default": "^8.2.1",
+            "@progress/kendo-theme-bootstrap": "^8.2.1",
+            "@progress/kendo-theme-material": "^8.2.1",
+            "@progress/kendo-react-animation": "^8.2.0",
+            "@progress/kendo-react-buttons": "^8.2.0",
+            "@progress/kendo-react-charts": "^8.2.0",
+            "@progress/kendo-react-common": "^8.2.0",
+            "@progress/kendo-react-conversational-ui": "^8.2.0",
+            "@progress/kendo-react-data-tools": "^8.2.0",
+            "@progress/kendo-react-dateinputs": "^8.2.0",
+            "@progress/kendo-react-dialogs": "^8.2.0",
+            "@progress/kendo-react-dropdowns": "^8.2.0",
+            "@progress/kendo-react-editor": "^8.2.0",
+            "@progress/kendo-react-excel-export": "^8.2.0",
+            "@progress/kendo-react-form": "^8.2.0",
+            "@progress/kendo-react-gantt": "^8.2.0",
+            "@progress/kendo-react-gauges": "^8.2.0",
+            "@progress/kendo-react-grid": "^8.2.0",
+            "@progress/kendo-react-indicators": "^8.2.0",
+            "@progress/kendo-react-inputs": "^8.2.0",
+            "@progress/kendo-react-intl": "^8.2.0",
+            "@progress/kendo-react-labels": "^8.2.0",
+            "@progress/kendo-react-layout": "^8.2.0",
+            "@progress/kendo-react-listbox": "^8.2.0",
+            "@progress/kendo-react-listview": "^8.2.0",
+            "@progress/kendo-react-map": "^8.2.0",
+            "@progress/kendo-react-notification": "^8.2.0",
+            "@progress/kendo-react-orgchart": "^8.2.0",
+            "@progress/kendo-react-pdf": "^8.2.0",
+            "@progress/kendo-react-pivotgrid": "^8.2.0",
+            "@progress/kendo-react-popup": "^8.2.0",
+            "@progress/kendo-react-progressbars": "^8.2.0",
+            "@progress/kendo-react-ripple": "^8.2.0",
+            "@progress/kendo-react-scheduler": "^8.2.0",
+            "@progress/kendo-react-scrollview": "^8.2.0",
+            "@progress/kendo-react-sortable": "^8.2.0",
+            "@progress/kendo-react-spreadsheet": "^8.2.0",
+            "@progress/kendo-react-tooltip": "^8.2.0",
+            "@progress/kendo-react-treelist": "^8.2.0",
+            "@progress/kendo-react-treeview": "^8.2.0",
+            "@progress/kendo-react-upload": "^8.2.0",
+            "@progress/kendo-react-pdf-viewer": "^8.2.0",
+            "@progress/kendo-react-taskboard": "^8.2.0",
+            "@progress/kendo-svg-icons": "^3.0.0",
         };
         await packageJsonSource.setContent(JSON.stringify(packageJson, null, "    "));
         // Handle kendo theme...
@@ -45742,7 +45814,7 @@ fetch.Promise = global.Promise;
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"title":"jqa","description":"Create jQuery Admin app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryAdminApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]}},"additionalProperties":false,"required":["path","name"]}');
+module.exports = JSON.parse('{"title":"jqa","description":"Create jQuery Admin app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryAdminApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]},"cdn":{"type":"string","default":"8.2.1","description":"Version of the CDN to pull themes from."}},"additionalProperties":false,"required":["path","name"]}');
 
 /***/ }),
 
@@ -45753,7 +45825,7 @@ module.exports = JSON.parse('{"title":"jqa","description":"Create jQuery Admin a
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"title":"jba","description":"Create jQuery Blank app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryBlankApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]}},"additionalProperties":false,"required":["path","name"]}');
+module.exports = JSON.parse('{"title":"jba","description":"Create jQuery Blank app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryBlankApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]},"cdn":{"type":"string","default":"8.2.1","description":"Version of the CDN to pull themes from."}},"additionalProperties":false,"required":["path","name"]}');
 
 /***/ }),
 
@@ -45764,7 +45836,7 @@ module.exports = JSON.parse('{"title":"jba","description":"Create jQuery Blank a
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"title":"jdla","description":"Create jQuery Dashboard Layout app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryDashboardLayoutApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]}},"additionalProperties":false,"required":["path","name"]}');
+module.exports = JSON.parse('{"title":"jdla","description":"Create jQuery Dashboard Layout app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryDashboardLayoutApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]},"cdn":{"type":"string","default":"8.2.1","description":"Version of the CDN to pull themes from."}},"additionalProperties":false,"required":["path","name"]}');
 
 /***/ }),
 
@@ -45775,7 +45847,7 @@ module.exports = JSON.parse('{"title":"jdla","description":"Create jQuery Dashbo
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"title":"jda","description":"Create jQuery Dashboard app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryDashboardApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]}},"additionalProperties":false,"required":["path","name"]}');
+module.exports = JSON.parse('{"title":"jda","description":"Create jQuery Dashboard app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryDashboardApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]},"cdn":{"type":"string","default":"8.2.1","description":"Version of the CDN to pull themes from."}},"additionalProperties":false,"required":["path","name"]}');
 
 /***/ }),
 
@@ -45786,7 +45858,7 @@ module.exports = JSON.parse('{"title":"jda","description":"Create jQuery Dashboa
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"title":"jga","description":"Create jQuery Grid app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryGridApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]}},"additionalProperties":false,"required":["path","name"]}');
+module.exports = JSON.parse('{"title":"jga","description":"Create jQuery Grid app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryGridApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]},"cdn":{"type":"string","default":"8.2.1","description":"Version of the CDN to pull themes from."}},"additionalProperties":false,"required":["path","name"]}');
 
 /***/ }),
 
@@ -45797,7 +45869,7 @@ module.exports = JSON.parse('{"title":"jga","description":"Create jQuery Grid ap
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"title":"jsa","description":"Create jQuery Standard app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryStandardApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]}},"additionalProperties":false,"required":["path","name"]}');
+module.exports = JSON.parse('{"title":"jsa","description":"Create jQuery Standard app","type":"object","properties":{"path":{"type":"string","hidden":true,"description":"Path to generate the app into."},"name":{"type":"string","displayName":"Application Name","description":"Name of the generated application.","default":"MyjQueryStandardApp"},"theme":{"type":"string","description":"Kendo theme to apply.","default":"default","enum":["default","bootstrap","material","fluent"]},"cdn":{"type":"string","default":"8.2.1","description":"Version of the CDN to pull themes from."}},"additionalProperties":false,"required":["path","name"]}');
 
 /***/ }),