This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathwizard-plnkr.json
More file actions
1 lines (1 loc) · 41.7 KB
/
wizard-plnkr.json
File metadata and controls
1 lines (1 loc) · 41.7 KB
1
{"index.css":".tab-control-section .e-content .e-item {\r\n font-size: 12px;\r\n padding: 10px;\r\n margin: 10px;\r\n text-align: justify;\r\n}\r\n.tab-control-section .e-headertext {\r\n font-weight: 500;\r\n}\r\n.e-bigger .tab-control-section .e-tab .e-list-item {\r\n border-bottom: 1px solid gainsboro;\r\n}\r\n.tab-control-section .e-tab .e-list-item {\r\n height: 63px;\r\n border-bottom: 1px solid gainsboro;\r\n}\r\n.tab-control-section .e-tab .e-list-item:last-child {\r\n border-bottom: 1px solid gainsboro;\r\n}\r\n.e-bigger .tab-control-section .e-tab .e-list-item {\r\n height: 63px;\r\n}\r\n.tab-control-section .template-container {\r\n height: 100%;\r\n padding-top: 7px;\r\n}\r\n.tab-control-section .left {\r\n display: inline-block;\r\n vertical-align: top;\r\n}\r\n.tab-control-section .empImg {\r\n height: 48px;\r\n width: 48px;\r\n}\r\n.tab-control-section .name, .role {\r\n line-height: normal;\r\n}\r\n.tab-control-section .name {\r\n font-weight: 500;\r\n}\r\n.tab-control-section .role {\r\n color: grey;\r\n font-weight: 100;\r\n}\r\n.tab-control-section .info-div {\r\n padding: 7px 0 0 15px;\r\n}\r\n.tab-control-section .content-title {\r\n height: 50px;\r\n display: table;\r\n margin: 0 auto;\r\n}\r\n.tab-control-section .cnt-text {\r\n vertical-align: middle;\r\n display: table-cell;\r\n font-size: 18px;\r\n font-weight: 600;\r\n}\r\n.tab-control-section .e-tab .e-listview .e-text {\r\n display: block;\r\n text-align: center;\r\n}\r\n.tab-control-section .property-panel-content {\r\n padding: 10px;\r\n}\r\n@media only screen and (min-width: 1824px) {\r\n .tab-control-section .col-lg-8.adaptive {\r\n width: 40%;\r\n }\r\n .e-bigger .tab-control-section .col-lg-8.adaptive {\r\n width: 45%;\r\n }\r\n}\r\n\r\n#amount {\r\n text-align: right;\r\n font-size: 15px;\r\n padding: 15px 0px;\r\n}\r\n\r\n#passenger-table th {\r\n text-align: center;\r\n font-size: 14px;\r\n font-weight: 400;\r\n border: 1px solid gainsboro;\r\n}\r\n\r\n#passenger-table td,\r\n#passenger-table th {\r\n padding: 10px;\r\n}\r\n\r\n#passenger-table td {\r\n border: 1px solid gainsboro;\r\n}\r\n\r\n.name-header {\r\n width: 200px;\r\n}\r\n\r\n.age-header {\r\n width: 80px;\r\n}\r\n\r\n.gender-header {\r\n width: 120px;\r\n}\r\n\r\n.type-header {\r\n width: 150px;\r\n}\r\n\r\n.btn-container {\r\n text-align: center;\r\n}\r\n\r\n.search-item {\r\n padding-right: 50px;\r\n padding-bottom: 20px;\r\n}\r\n\r\n.item-title {\r\n font-weight: 500;\r\n padding-top: 10px;\r\n}\r\n\r\n@media (max-width: 450px) {\r\n .e-sample-resize-container {\r\n height: 450px;\r\n }\r\n .responsive-align {\r\n width: 75%;\r\n margin: 0 auto;\r\n }\r\n .search-item {\r\n padding: 0 0 20px 0;\r\n width: 100%;\r\n }\r\n}\r\n\r\n#err1,\r\n#err2,\r\n#err3 {\r\n font-weight: bold;\r\n color: red;\r\n display: block;\r\n margin-top: 15px;\r\n}\r\n\r\n.wizard-title {\r\n font-size: 15px;\r\n}\r\n\r\n#PassengersList {\r\n overflow: auto;\r\n}\r\n#passenger-table {\r\n min-width: 500px;\r\n width: 100%;\r\n}\r\n.tab-control-section .e-listview:not(.e-list-template) .e-list-item {\r\n height: 63px;\r\n}","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Tab · Wizard · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/tab\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/tab/default.html\"><span>Tab</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Wizard</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample demonstrates simple train reservation wizard that enable/disable Tab items based on sequential validation of each Tab content.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n Tab items can be disabled dynamically by passing the index and boolean value to the <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/tab/api-tab.html?lang=typescript#enabletab\">enableTab</a> method.\n </p>\n <p>\n You can design wizard like sample with Tab using the in-built API and customizing the content with proper validations.\n </p>\n <p>\n More information about Tab can be found in this <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/tab/getting-started.html\"> documentation</a> section.\n </p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { DialogComponent } from '@syncfusion/ej2-react-popups';\r\nimport { DatePickerComponent } from '@syncfusion/ej2-react-calendars';\r\nimport { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport { TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';\r\nimport { GridComponent, RowSelectEventArgs, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';\r\nimport { SampleBase } from './sample-base';\r\n\r\n/**\r\n * Tab Wizard sample\r\n */\r\n\r\n// tslint:disable:max-line-length\r\nexport class Wizard extends SampleBase<{}, {}> {\r\n public alertDlg: DialogComponent;\r\n public tab: TabComponent;\r\n public ticketDetailGrid: GridComponent;\r\n public pass_gender3: DropDownListComponent;\r\n public pass_gender2: DropDownListComponent;\r\n public listObj: DropDownListComponent;\r\n public pass_gender1: DropDownListComponent;\r\n public pass_berth1: DropDownListComponent;\r\n public pass_berth2: DropDownListComponent;\r\n public pass_berth3: DropDownListComponent;\r\n public pass_age1: NumericTextBoxComponent;\r\n public availTrainGrid: GridComponent;\r\n public ticketType: DropDownListComponent;\r\n public journeyDate: DatePickerComponent;\r\n public endPoint: DropDownListComponent;\r\n public startPoint: DropDownListComponent;\r\n public today: Date = new Date();\r\n public selectedTrain: any;\r\n public dlgTarget: HTMLElement = document.querySelector('.sb-content-tab.e-tab .e-content.sb-sample-content-area');\r\n public dateMin: Date = new Date(this.today.getTime());\r\n public dateMax: Date = new Date(this.today.getTime() + 60 * 24 * 60 * 60 * 1000);\r\n public fields: Object = { id: \"id\", text: \"text\", value: \"text\" };\r\n public autoCompleteFields: Object = { text: 'name', value: 'name' };\r\n public dateValue = new Date();\r\n\r\n public headerText: any = [\r\n { \"text\": \"New Booking\" },\r\n { \"text\": \"Train List\" },\r\n { \"text\": \"Add Passenger\" },\r\n { \"text\": \"Make Payment\" }];\r\n\r\n public quotas: any = [\r\n { id: \"1\", text: \"Business Class\" },\r\n { id: \"2\", text: \"Economy Class\" },\r\n { id: \"4\", text: \"Common Class\" }\r\n ];\r\n\r\n public gender: any = [\r\n { id: \"1\", text: \"Male\" },\r\n { id: \"2\", text: \"Female\" }\r\n ];\r\n\r\n public berths: any = [\r\n { id: \"1\", text: \"Upper\" },\r\n { id: \"2\", text: \"Lower\" },\r\n { id: \"3\", text: \"Middle\" },\r\n { id: \"4\", text: \"Window\" },\r\n { id: \"5\", text: \"Aisle\" }\r\n ];\r\n public cities: any = [\r\n { name: 'Chicago', fare: 300 },\r\n { name: 'San Francisco', fare: 125 },\r\n { name: 'Los Angeles', fare: 175 },\r\n { name: 'Seattle', fare: 250 },\r\n { name: 'Florida', fare: 150 }\r\n ]\r\n\r\n public dlgButtons: any = [{\r\n buttonModel: { content: \"OK\", isPrimary: true },\r\n click: (() => {\r\n this.alertDlg.hide();\r\n this.tab.enableTab(0, true);\r\n this.tab.enableTab(1, false);\r\n this.tab.enableTab(2, false);\r\n this.tab.enableTab(3, false);\r\n this.tab.select(0);\r\n })\r\n }];\r\n\r\n public dlgCreated(): void {\r\n let proxy: any = this;\r\n proxy.hide();\r\n }\r\n\r\n public tabSelected(e: SelectEventArgs): void {\r\n if (e.isSwiped) {\r\n e.cancel = true;\r\n }\r\n }\r\n\r\n public trainSelected(args: RowSelectEventArgs): void {\r\n this.selectedTrain = args.data;\r\n }\r\n\r\n public btnClicked(e: RowSelectEventArgs): void {\r\n switch (e.target.id) {\r\n case \"searchNext\":\r\n /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */\r\n if (this.startPoint.value != null && this.endPoint.value != null &&\r\n this.ticketType.value != null && this.journeyDate.value != null) {\r\n if (this.startPoint.value && this.startPoint.value === this.endPoint.value) {\r\n document.getElementById(\"err1\").innerText = \"* Arrival point can't be same as Departure\";\r\n } else {\r\n this.tab.enableTab(0, false);\r\n this.tab.enableTab(1, true);\r\n this.filterTrains(e);\r\n this.tab.select(1);\r\n document.getElementById(\"err1\").innerText = \"\";\r\n document.getElementById(\"err2\").innerText = \"\";\r\n }\r\n } else {\r\n document.getElementById(\"err1\").innerText = \"* Please fill all the details before proceeding\";\r\n }\r\n break;\r\n case \"bookTickets\":\r\n /* Based on the selected station generate Grid content to display trains available */\r\n if (this.availTrainGrid.getSelectedRecords() === undefined || this.availTrainGrid.getSelectedRecords().length === 0) {\r\n document.getElementById(\"err2\").innerText = \"* Select your convenient train\";\r\n } else {\r\n this.tab.enableTab(2, true);\r\n this.tab.select(2);\r\n this.tab.enableTab(1, false);\r\n document.getElementById(\"err2\").innerText = \"\";\r\n }\r\n break;\r\n case \"confirmTickets\":\r\n /* Get the Passenger details and validate the fields must not be left empty */\r\n let name: any = document.getElementById(\"pass_name1\");\r\n let age: any = this.pass_age1.value;\r\n let gender: any = this.pass_gender1.value;\r\n if (name.value === \"\" || age === \"\" || gender === \"\") {\r\n document.getElementById(\"err3\").innerText = \"* Please enter passenger details\";\r\n } else {\r\n this.tab.enableTab(3, true);\r\n this.tab.select(3);\r\n this.tab.enableTab(2, false);\r\n document.getElementById(\"err3\").innerText = \"\";\r\n this.finalizeDetails(e);\r\n }\r\n break;\r\n case \"makePayment\":\r\n this.alertDlg.show();\r\n break;\r\n case \"goToSearch\":\r\n /* Go back to change class, date or boarding places */\r\n this.selectedTrain = [];\r\n this.tab.enableTab(0, true);\r\n this.tab.select(0);\r\n this.tab.enableTab(1, false);\r\n break;\r\n case \"goBackToBook\":\r\n /* Change the preferred train chosen already */\r\n this.tab.enableTab(1, true);\r\n this.tab.select(1);\r\n this.tab.enableTab(2, false);\r\n break;\r\n case \"goBackDetails\":\r\n /* Update passenger detail before confirming the payment */\r\n this.tab.enableTab(2, true);\r\n this.tab.select(2);\r\n this.tab.enableTab(3, false);\r\n break;\r\n }\r\n }\r\n\r\n public filterTrains(args: RowSelectEventArgs): void {\r\n /* Generating trains based on source and destination chosen */\r\n let result: Object[] = [];\r\n let fromCity: string = this.startPoint.value as string;\r\n let toCity: string = this.endPoint.value as string;\r\n let count: number = Math.floor((Math.random() * 3) + 2);\r\n\r\n for (let i: number = 0; i < count; i++) {\r\n let details: { [key: string]: Object } = {};\r\n details[\"TrainNo\"] = Math.floor((Math.random() * 20) + 19000);\r\n details[\"Name\"] = \"Train \" + i;\r\n details[\"Departure\"] = fromCity;\r\n details[\"Arrival\"] = toCity;\r\n details[\"Availability\"] = Math.floor((Math.random() * 20) + 20);\r\n result.push(details);\r\n }\r\n this.availTrainGrid.dataSource = result;\r\n this.availTrainGrid.dataBind();\r\n }\r\n\r\n public finalizeDetails(args: RowSelectEventArgs): void {\r\n /* Get the passenger details and update table with name and other details for confirmation */\r\n let reserved: Object[] = [];\r\n let passCount: any = 0;\r\n let name1: any = document.getElementById(\"pass_name1\");\r\n let name2: any = document.getElementById(\"pass_name2\");\r\n let name3: any = document.getElementById(\"pass_name3\");\r\n\r\n for (let i: number = 1; i <= 3; i++) {\r\n if (name1.value !== \"\") {\r\n let details: { [key: string]: Object } = {};\r\n let gender: string = ((i === 1) ? this.pass_gender1.value : (i === 2) ? this.pass_gender2.value : this.pass_gender3.value) as string;\r\n let berth: string = ((i === 1) ? this.pass_berth1.value : (i === 2) ? this.pass_berth2.value : this.pass_berth3.value) as string;\r\n details[\"TrainNo\"] = this.selectedTrain.TrainNo.toString();\r\n details[\"PassName\"] = (i === 1) ? name1.value : (i === 2) ? name2.value : name3.value;\r\n details[\"Gender\"] = (gender === \"\") ? \"Male\" : gender;\r\n details[\"Berth\"] = berth;\r\n if (details[\"PassName\"] !== \"\") { reserved.push(details); }\r\n passCount++;\r\n }\r\n let calcFare: any = 0;\r\n for (let i in this.cities) {\r\n if (this.startPoint.value == this.cities[i].name)\r\n calcFare = calcFare + this.cities[i].fare;\r\n if (this.endPoint.value == this.cities[i].name)\r\n calcFare = calcFare + this.cities[i].fare;\r\n }\r\n let displayAmt: any = document.getElementById(\"amount\");\r\n if (this.ticketType.value === 'Economy Class') {\r\n displayAmt.innerText = \"Total payable amount: $\" + passCount * (300 + calcFare)\r\n } else if (this.ticketType.value === 'Business Class') {\r\n displayAmt.innerText = \"Total payable amount: $\" + passCount * (500 + calcFare)\r\n } else if (this.ticketType.value === 'Common Class') {\r\n displayAmt.innerText = \"Total payable amount: $\" + passCount * (150 + calcFare)\r\n }\r\n }\r\n this.ticketDetailGrid.dataSource = reserved;\r\n }\r\n\r\n render() {\r\n const hideDiv = { display: \"none\" };\r\n return (\r\n <div>\r\n <div className=\"col-lg-12 control-section e-tab-section\">\r\n <div className=\"e-sample-resize-container\">\r\n <div id=\"booking\" style={hideDiv}>\r\n <div className=\"wizard-title\">Plan your journey</div>\r\n <div className=\"responsive-align\">\r\n <div className='row'>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item\">\r\n <DropDownListComponent ref={(dropdownlist) => { this.startPoint = dropdownlist }} width=\"100%\" dataSource={this.cities} fields={this.autoCompleteFields} placeholder='From' floatLabelType=\"Auto\"></DropDownListComponent>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item\">\r\n <DropDownListComponent ref={(dropdownlist) => { this.endPoint = dropdownlist }} width=\"100%\" dataSource={this.cities} fields={this.autoCompleteFields} placeholder='To' floatLabelType=\"Auto\"></DropDownListComponent>\r\n </div>\r\n </div>\r\n <div className=\"row\">\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item\">\r\n <DatePickerComponent ref={calendar => this.journeyDate = calendar} width='100%' placeholder='Journey Date' floatLabelType='Auto' min={this.dateMin} max={this.dateMax} value={this.dateValue}></DatePickerComponent>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item\">\r\n <DropDownListComponent ref={dropdownlist => this.ticketType = dropdownlist} dataSource={this.quotas} placeholder='Ticket type' floatLabelType='Auto' fields={this.fields}></DropDownListComponent>\r\n </div>\r\n </div>\r\n <div className=\"btn-container\">\r\n <button id=\"searchNext\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Search Train</button>\r\n </div>\r\n <span id=\"err1\"></span>\r\n </div>\r\n </div >\r\n <div id=\"selectTrain\" style={hideDiv}>\r\n <div className=\"wizard-title\">Select the train from the list </div>\r\n <GridComponent ref={grid => this.availTrainGrid = grid} width='100%' rowSelected={this.trainSelected.bind(this)}>\r\n <ColumnsDirective>\r\n <ColumnDirective field=\"TrainNo\" headerText=\"Train No\" width={120} type=\"number\"></ColumnDirective>\r\n <ColumnDirective field=\"Name\" headerText=\"Name\" width={140}></ColumnDirective>\r\n <ColumnDirective field=\"Departure\" headerText=\"Departure\" width={120}></ColumnDirective>\r\n <ColumnDirective field=\"Arrival\" headerText=\"Arrival\" width={140}></ColumnDirective>\r\n <ColumnDirective field=\"Availability\" headerText=\"Availability\" width={140} type=\"number\"></ColumnDirective>\r\n </ColumnsDirective>\r\n </GridComponent>\r\n <br />\r\n <div className=\"btn-container\">\r\n <button id=\"goToSearch\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Back</button>\r\n <button id=\"bookTickets\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Continue</button>\r\n </div>\r\n <span id=\"err2\"></span>\r\n </div>\r\n <div id=\"details\" style={hideDiv}>\r\n <div className=\"details-page wizard-title\">Enter the passenger details</div>\r\n <div id=\"PassengersList\">\r\n <table id=\"passenger-table\">\r\n <colgroup>\r\n <col />\r\n <col />\r\n <col />\r\n <col />\r\n <col />\r\n <col />\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n <th className=\"name-header\">Name</th>\r\n <th className=\"age-header\">Age</th>\r\n <th className=\"gender-header\">Gender</th>\r\n <th className=\"type-header\">Berth Preference</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <input className=\"e-input\" id=\"pass_name1\" type=\"text\" placeholder=\"Passenger Name\" />\r\n </td>\r\n <td>\r\n <NumericTextBoxComponent ref={(numerictextbox) => { this.pass_age1 = numerictextbox }} showSpinButton={false} min={1} max={100} value={18} format='n0'></NumericTextBoxComponent>\r\n </td>\r\n <td>\r\n <DropDownListComponent ref={(dropdownlist) => { this.pass_gender1 = dropdownlist }} dataSource={this.gender} text=\"Male\" fields={this.fields}></DropDownListComponent>\r\n </td>\r\n <td>\r\n <DropDownListComponent ref={(dropdownlist) => { this.pass_berth1 = dropdownlist }} dataSource={this.berths} placeholder=\"Optional\" fields={this.fields}></DropDownListComponent>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <input id=\"pass_name2\" className=\"e-input\" type=\"text\" placeholder=\"Passenger Name\" />\r\n </td>\r\n <td>\r\n <NumericTextBoxComponent showSpinButton={false} min={1} max={100} value={18} format=\"n0\"></NumericTextBoxComponent>\r\n </td>\r\n <td>\r\n <DropDownListComponent ref={(dropdownlist) => { this.pass_gender2 = dropdownlist }} dataSource={this.gender} text=\"Male\" fields={this.fields}></DropDownListComponent>\r\n </td>\r\n <td>\r\n <DropDownListComponent ref={(dropdownlist) => { this.pass_berth2 = dropdownlist }} dataSource={this.berths} placeholder=\"Optional\" fields={this.fields}></DropDownListComponent>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <input id=\"pass_name3\" className=\"e-input\" type=\"text\" placeholder=\"Passenger Name\" />\r\n </td>\r\n <td>\r\n <NumericTextBoxComponent showSpinButton={false} min={1} max={100} value={18} format=\"n0\"></NumericTextBoxComponent>\r\n </td>\r\n <td>\r\n <DropDownListComponent ref={(dropdownlist) => { this.pass_gender3 = dropdownlist }} dataSource={this.gender} text=\"Male\" fields={this.fields}></DropDownListComponent>\r\n </td>\r\n <td>\r\n <DropDownListComponent ref={(dropdownlist) => { this.pass_berth3 = dropdownlist }} dataSource={this.berths} placeholder=\"Optional\" fields={this.fields}></DropDownListComponent>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <br />\r\n <div className=\"btn-container\">\r\n <button id=\"goBackToBook\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Back</button>\r\n <button id=\"confirmTickets\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Continue</button>\r\n </div>\r\n <span id=\"err3\"></span>\r\n </div>\r\n <div id=\"confirm\" style={hideDiv}>\r\n <div className=\"tab-title1 wizard-title\">Confirm the details and proceed</div>\r\n <GridComponent ref={grid => this.ticketDetailGrid = grid} width='100%'>\r\n <ColumnsDirective>\r\n <ColumnDirective field=\"TrainNo\" headerText=\"Train No\" width={120} type=\"number\"></ColumnDirective>\r\n <ColumnDirective field=\"PassName\" headerText=\"Name\" width={140}></ColumnDirective>\r\n <ColumnDirective field=\"Gender\" headerText=\"Gender\" width={120}></ColumnDirective>\r\n <ColumnDirective field=\"Berth\" headerText=\"Berth\" width={140}></ColumnDirective>\r\n </ColumnsDirective>\r\n </GridComponent>\r\n <br />\r\n <div id=\"amount\"></div>\r\n <br />\r\n <div className=\"btn-container\">\r\n <button id=\"goBackDetails\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Back</button>\r\n <button id=\"makePayment\" className=\"e-btn\" onClick={this.btnClicked.bind(this)}>Pay</button>\r\n </div>\r\n </div>\r\n <TabComponent id=\"tab-wizard\" ref={tab => this.tab = tab} heightAdjustMode=\"None\" height={390} selecting={this.tabSelected.bind(this)}>\r\n <TabItemsDirective>\r\n <TabItemDirective header={this.headerText[0]} content={\"#booking\"} />\r\n <TabItemDirective header={this.headerText[1]} content={\"#selectTrain\"} disabled={true} />\r\n <TabItemDirective header={this.headerText[2]} content={\"#details\"} disabled={true} />\r\n <TabItemDirective header={this.headerText[3]} content={\"#confirm\"} disabled={true} />\r\n </TabItemsDirective>\r\n </TabComponent>\r\n <DialogComponent ref={dialog => this.alertDlg = dialog} header=\"Success\" width={250} isModal={true} visible={false} showCloseIcon={true} content='Your payment successfully processed' target={this.dlgTarget} buttons={this.dlgButtons} created={this.dlgCreated}></DialogComponent>\r\n </div >\r\n </div >\r\n </div >\r\n );\r\n }\r\n}\nReactDOM.render(<Wizard />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}