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 pathazure-pricing-plnkr.json
More file actions
1 lines (1 loc) · 40.3 KB
/
azure-pricing-plnkr.json
File metadata and controls
1 lines (1 loc) · 40.3 KB
1
{"index.css":"","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>Slider · Cloudpricing · 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/slider\">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/slider/default.html\"><span>Slider</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Cloudpricing</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>This sample demonstrate the cloud pricing slider which is used to calculate the cloud costs by considering Web Hosting,\n VPS Hosting, Cloud Server providers. Drag the thumb over the bar for selecting Processor, Memory and Storage.\n </p>\n\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>This sample calculates the cloud cost based on number of workloads, complexity of workloads, system and monitoring requirements\n which is used under cloud operation.\n </p>\n <p>In this demo, we have used default rendering of slider for selecting Processor, Memory and Storage. The estimated price\n for the selection will appear on the left pane.</p>\n <p>We can avail 25% offer for annual pack. This can be applied by checking the checkbox from the left pane.</p>\n <p>By default, cPanel will be included in the monthly pack. If you don't want, check the checkbox from the left pane which\n will reduce $10 from the estimated price..</p>\n <p>We can also select different range of pack from the left pane toolbar which will have default configuration based on\n the range size.</p>\n <p>After choosing your pack, confirm it by clicking sign up button which will show your selected package detail in a dialog\n box.</p>\n\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 { SliderComponent } from '@syncfusion/ej2-react-inputs';\r\nimport { CheckBoxComponent, ButtonComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';\r\nimport { SliderChangeEventArgs } from '@syncfusion/ej2-inputs';\r\nimport { DialogComponent } from '@syncfusion/ej2-react-popups';\r\nimport { SampleBase } from './sample-base';\r\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\r\n\r\n\r\nconst slidercss = `\r\nhtml,\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n margin: 0px;\r\n}\r\n\r\n#pricing-slider #cloud-right-pane .btn-size {\r\n padding-top: 16px;\r\n padding-bottom: 30px;\r\n border-bottom: 1px solid lightgrey;\r\n}\r\n\r\n#pricing-slider .e-slider-container.e-horizontal {\r\n height: 56px;\r\n}\r\n\r\n#pricing-slider .row {\r\n border: 1px solid #CCCCCC;\r\n box-shadow: 0px 0px 4px;\r\n opacity: 100;\r\n\r\n border-radius: 4px;\r\n}\r\n\r\n.discount .e-label,\r\n.discount .e-label {\r\n white-space: initial;\r\n}\r\n\r\n#pricing-slider .sub-heading {\r\n margin-top: -8px;\r\n font-size: 13px;\r\n font-family: Roboto-Regular;\r\n color: #808080;\r\n}\r\n\r\n#pricing-slider .label-text.right-text {\r\n padding-top: 16px;\r\n padding-bottom: 20px;\r\n}\r\n\r\n#pricing-slider .label-text {\r\n color: #000000;\r\n font-size: 14px;\r\n font-weight: 500;\r\n}\r\n\r\nspan.e-label .offer {\r\n color: #4A90E2;\r\n}\r\n\r\n.cloud-slider {\r\n display: block;\r\n position: relative;\r\n}\r\n\r\n\r\n#processor {\r\n background-color: #A06AFF;\r\n}\r\n\r\n#memory {\r\n background-color: #7ED321;\r\n}\r\n\r\n#storage {\r\n background-color: #4A90E2;\r\n}\r\n\r\n#memory,\r\n#storage,\r\n#processor {\r\n font-family: Roboto-Medium;\r\n font-size: 14px;\r\n height: 24px;\r\n width: 70px;\r\n text-align: center;\r\n line-height: 24px;\r\n float: right;\r\n color: #FFFFFF;\r\n font-weight: 500;\r\n border-radius: 18px;\r\n}\r\n\r\n#cPanel,\r\n#discount {\r\n height: 30px;\r\n margin-top: -10px;\r\n width: 20px;\r\n}\r\n\r\n\r\n#value {\r\n color: #000000;\r\n font-family: Roboto-Bold;\r\n font-size: 28px;\r\n font-weight: bold;\r\n}\r\n\r\n#suffix {\r\n color: #000000;\r\n font-family: Roboto-Regular;\r\n font-size: 16px;\r\n font-weight: 500;\r\n}\r\n\r\n.text {\r\n font-size: 13px;\r\n padding-top: 26px;\r\n width: 190px;\r\n}\r\n\r\n#cloud-right-pane {\r\n background-color: #FFFFFF;\r\n border-left: 1px solid #CCCCCC;\r\n padding: 20px;\r\n height: 443px;\r\n}\r\n\r\n.pricing-slider {\r\n margin-top: 40px;\r\n min-height: 20px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.cloud-slider-right {\r\n color: #000000;\r\n font-size: 14px;\r\n}\r\n\r\n.cloud-slider-right.discount-pay {\r\n padding-top: 20px;\r\n}\r\n\r\n#cloud-left-pane {\r\n height: 443px;\r\n padding: 40px;\r\n background-color: #FAFAFA;\r\n}\r\n\r\n.discount {\r\n padding-top: 20px;\r\n padding-bottom: 35px;\r\n}\r\n\r\n@media (max-width: 1010px) {\r\n #cloud-right-pane {\r\n border-top: 1px solid #d5d7d8 !important;\r\n border-left: none !important;\r\n border-width: 1px 0 0!important;\r\n padding-top: 15px !important;\r\n padding-left: 0!important;\r\n }\r\n .cloud-right-content {\r\n padding-left: 24px !important;\r\n }\r\n #cloud-left-pane {\r\n width: 100%;\r\n }\r\n #cloud-right-pane {\r\n width: 100%;\r\n }\r\n}\r\n\r\n#cloud-slider-text {\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid lightgrey;\r\n}\r\n\r\n#dollar {\r\n color: #000000;\r\n font-family: Roboto-Regular;\r\n font-size: 14px;\r\n font-weight: 500;\r\n position: relative;\r\n top: -7px;\r\n}\r\n\r\n\r\n#btn {\r\n text-transform: uppercase;\r\n width: -webkit-fill-available;\r\n}\r\n\r\n.cloud-left-slider {\r\n margin-top: 40px;\r\n}\r\n\r\n.control-section {\r\n padding-top: 0px;\r\n margin-left: 75px;\r\n\r\n}\r\n\r\n@media screen and (max-width: 1199px) {\r\n .control-section {\r\n margin-left: 0px;\r\n }\r\n}\r\n\r\n.cloud-right-content .e-btn.e-info {\r\n padding: 0px;\r\n width: 30px;\r\n height: 30px;\r\n line-height: inherit;\r\n margin: 2px;\r\n}\r\n\r\n.highcontrast .pricing-slider,\r\n.highcontrast #pricing-slider .label-text,\r\n.highcontrast #pricing-slider .sub-heading {\r\n color: white;\r\n}\r\n\r\n.fabric .cloud-right-content .e-btn.e-info,\r\n.highcontrast .e-btn.e-info {\r\n line-height: 2px;\r\n}\r\n\r\n.highcontrast #dollar,\r\n.highcontrast #value,\r\n.highcontrast #dialog-header,\r\n.highcontrast #StorgeDialog,\r\n.highcontrast #CloudDialog,\r\n.highcontrast #processorDialog {\r\n color: white;\r\n}\r\n\r\n.highcontrast #pricing-slider .row {\r\n border: 1px solid #969696;\r\n}\r\n\r\n.highcontrast #cloud-right-pane {\r\n border-left: 1px solid #969696;\r\n}\r\n\r\n.highcontrast #cloud-slider-text,\r\n.highcontrast #pricing-slider #cloud-right-pane .btn-size {\r\n border-bottom: 1px solid #969696;\r\n}\r\n\r\n.highcontrast #processor {\r\n background-color: #AE80FF;\r\n}\r\n\r\n.highcontrast #memory {\r\n background-color: #7ED321;\r\n}\r\n\r\n.highcontrast #storage {\r\n background-color: #61A4EF;\r\n}\r\n\r\n.highcontrast #cloud-left-pane {\r\n background-color: #1a1a1a;\r\n}\r\n\r\n.highcontrast #cloud-right-pane {\r\n background-color: #000;\r\n}\r\n\r\n.highcontrast #processorPriceName,\r\n.highcontrast #memoryPriceName,\r\n.highcontrast #storgePriceName,\r\n.highcontrast #cloudPriceName {\r\n color: white;\r\n opacity: 1;\r\n}\r\n\r\n#dialog-header {\r\n color: #000000;\r\n opacity: .87;\r\n font-family: Roboto-Medium;\r\n font-weight: 600;\r\n font-size: 20px;\r\n}\r\n\r\n#CloudDialog {\r\n color: #000000;\r\n padding-top: 14px;\r\n padding-bottom: 24px;\r\n border-top: 1px solid #CCCCCC;\r\n}\r\n\r\n#processorPrice,\r\n#memoryPrice,\r\n#storgePrice {\r\n opacity: 0.9;\r\n font-family: Roboto-Bold;\r\n font-weight: 600;\r\n font-size: 16px;\r\n float: right;\r\n}\r\n\r\n#alertDialog .e-footer-content {\r\n padding-top: 0;\r\n}\r\n\r\n#processorPriceName,\r\n#memoryPriceName,\r\n#storgePriceName,\r\n#cloudPriceName {\r\n opacity: 0.9;\r\n color: #000000;\r\n font-family: Roboto-Regular;\r\n font-size: 16px;\r\n}\r\n\r\n#cloudPrice {\r\n opacity: 0.9;\r\n font-family: Roboto-Bold;\r\n font-weight: 600;\r\n font-size: 26px;\r\n float: right;\r\n}\r\n\r\n#processorDialog {\r\n color: #000000;\r\n padding-top: 12px;\r\n padding-bottom: 12px;\r\n}\r\n\r\n#StorgeDialog {\r\n color: #000000;\r\n padding-top: 12px;\r\n padding-bottom: 16px;\r\n}\r\n`\r\nexport class Cloudpricing extends SampleBase<{}, {}> {\r\n\r\n public processorSlider: SliderComponent;\r\n public memorySlider: SliderComponent;\r\n public storageSlider: SliderComponent;\r\n public panelCheckBox: CheckBoxComponent;\r\n public discountCheckBox: CheckBoxComponent;\r\n public button: ButtonComponent;\r\n public alertDialogObj: DialogComponent;\r\n public checkboxObj: CheckBoxComponent;\r\n public proceessorElem: HTMLElement;\r\n public memoryElem: HTMLElement;\r\n public storageElem: HTMLElement;\r\n public nullValue: string = '';\r\n public elemValue: HTMLElement;\r\n public finalValue: number;\r\n public discountValue: number;\r\n\r\n public objElements: string[] = ['#xSmallBtn', '#smallBtn', '#mediumBtn', '#largeBtn', '#xLargeBtn'];\r\n public buttonObj: any = { obj: ButtonComponent, prop: { cssClass: 'e-info', isPrimary: true } };\r\n\r\n public cssClass = 'e-success';\r\n\r\n private content: string = '<div id = \"dialog-content\"><div id = \"dialog-header\">Cloud Price Details</div>' +\r\n '<div id=\"processorDialog\"><span id=\"processorPriceName\">Processor Price</span><span id=\"processorPrice\"></span></div>' +\r\n '<div id=\"MemoryDialog\"><span id=\"memoryPriceName\">Memory Price</span><span id=\"memoryPrice\"></span></div>' +\r\n '<div id=\"StorgeDialog\"><span id=\"storgePriceName\">Storge Price</span><span id=\"storgePrice\"></span></div>' +\r\n '<div id=\"CloudDialog\"><span id=\"cloudPriceName\">Estimated Prices</span><span id=\"cloudPrice\"></span></div></div>';\r\n\r\n public showCloseIcon: any = false;\r\n public buttons: any = [{\r\n click: this.alertDlgBtnClick, buttonModel: { content: 'Close', isPrimary: true }\r\n }];\r\n public closeOnEscape: any = false;\r\n public width: any = '360px';\r\n public target: any = '#pricing-slider';\r\n public animationSettings: Object = { effect: 'None' };\r\n\r\n // //Sets processor value\r\n public onCreateProcessor(args: any): void {\r\n if (!isNullOrUndefined(document.getElementById('processor'))) {\r\n document.getElementById('processor').innerHTML = (document.getElementById('processor-slider') as any).ej2_instances[0].value + ' ' + 'CORE';\r\n }\r\n }\r\n public onCreateStorage(args: any): void {\r\n if (!isNullOrUndefined(document.getElementById('storage'))) {\r\n document.getElementById('storage').innerHTML = (document.getElementById('storage-slider') as any).ej2_instances[0].value + ' ' + 'GB';\r\n this.sliderValueChange();\r\n }\r\n }\r\n //Sets memory value\r\n public onCreateMemory(args: any): void {\r\n if (!isNullOrUndefined(document.getElementById('memory'))) {\r\n document.getElementById('memory').innerHTML = (document.getElementById('memory-slider') as any).ej2_instances[0].value + ' ' + 'GB';\r\n }\r\n }\r\n\r\n //Processor Slider value change method\r\n public onChangeProcessor(args: SliderChangeEventArgs): void {\r\n this.onChange(document.getElementById('processor'), (args.value as number), 'CORE');\r\n }\r\n //Memory Slider value change method\r\n public onChangeMemory(args: SliderChangeEventArgs): void {\r\n this.onChange(document.getElementById('memory'), (args.value as number), 'GB');\r\n }\r\n\r\n //Storage Slider value change method\r\n public onChangeStorage(args: SliderChangeEventArgs): void {\r\n this.onChange(document.getElementById('storage'), (args.value as number), 'GB');\r\n }\r\n //common method for Slider value change\r\n public onChange(elem: HTMLElement, value: number, notation: string): void {\r\n if (!isNullOrUndefined(elem)) {\r\n elem.innerText = value + ' ' + notation;\r\n this.sliderValueChange();\r\n }\r\n }\r\n\r\n //method to calculate monthly cloud price based on slider value\r\n public sliderValueChange(): void {\r\n if (!isNullOrUndefined(document.getElementById('value')) && !isNullOrUndefined(document.getElementById('processor-slider'))\r\n && !isNullOrUndefined(document.getElementById('memory-slider')) && !isNullOrUndefined(document.getElementById('storage-slider'))) {\r\n this.elemValue = document.getElementById('value');\r\n let porcessorValue: any = (document.getElementById('processor-slider') as any).ej2_instances[0].value\r\n let memoryValue: any = (document.getElementById('memory-slider') as any).ej2_instances[0].value;\r\n let storageValue: any = (document.getElementById('storage-slider') as any).ej2_instances[0].value\r\n //formula to calculate cloud price based on slider value\r\n this.finalValue = Number(((((porcessorValue * memoryValue) * 1000) + ((porcessorValue * memoryValue) * storageValue)\r\n + ((porcessorValue * memoryValue) * 100)) / 12).toFixed(2));\r\n if ((document.getElementById('cPanel') as any).ej2_instances && (document.getElementById('cPanel') as any).ej2_instances[0].checked) {\r\n this.finalValue = Number((this.finalValue - 10).toFixed(2));\r\n }\r\n if ((document.getElementById('discount') as any).ej2_instances && (document.getElementById('discount') as any).ej2_instances[0].checked) {\r\n this.finalValue = Number((this.finalValue - ((this.finalValue * 25) / 100)).toFixed(2));\r\n }\r\n\r\n this.elemValue.innerText = this.finalValue.toString();\r\n }\r\n }\r\n\r\n public sliderPriceValue(processor: number, memory: number, storage: number): void {\r\n this.processorSlider.value = processor;\r\n this.memorySlider.value = memory;\r\n this.storageSlider.value = storage;\r\n }\r\n constructor() {\r\n super()\r\n for (let i: number = 0; i < this.objElements.length; i++) {\r\n this.buttonObj.obj = this.buttonObj.prop;\r\n this.buttonObj.obj = this.objElements[i];\r\n }\r\n }\r\n btnClick(e: Event) {\r\n let processorPrice: HTMLElement = document.getElementById('processorPrice');\r\n this.onChange(processorPrice, (this.processorSlider.value as number), 'CORE');\r\n let memoryPrice: HTMLElement = document.getElementById('memoryPrice');\r\n this.onChange(memoryPrice, (this.processorSlider.value as number), 'GB');\r\n let storgePrice: HTMLElement = document.getElementById('storgePrice');\r\n this.onChange(storgePrice, (this.storageSlider.value as number), 'GB');\r\n let cloudPrice: HTMLElement = document.getElementById('cloudPrice');\r\n cloudPrice.innerText = '$' + this.finalValue;\r\n this.sliderValueChange();\r\n (document.getElementById('alertDialog') as any).ej2_instances[0].show();\r\n };\r\n\r\n\r\n public alertDlgBtnClick(): void {\r\n if (!isNullOrUndefined(document.getElementById('alertDialog')) &&\r\n !isNullOrUndefined((document.getElementById('alertDialog') as any).ej2_instances[0])) {\r\n (document.getElementById('alertDialog') as any).ej2_instances[0].hide();\r\n }\r\n }\r\n\r\n\r\n render() {\r\n\r\n return (\r\n <div className='control-pane'>\r\n <div className=\"col-lg-10 control-section\">\r\n <div className=\"cloud-content-wrapper\">\r\n <div id=\"pricing-slider\" className=\"pricing-slider\">\r\n <style>{slidercss}</style>\r\n <div className=\"row\">\r\n <div id=\"cloud-left-pane\" className=\"col-lg-8 col-md-8 col-sm-8\">\r\n <div className=\"cloud-slider\">\r\n <div id=\"processor\"></div>\r\n <span className=\"label-text\"> Processor </span>\r\n {/* processor Slider element */}\r\n <SliderComponent id=\"processor-slider\" value={4} min={1} max={16} ref={(slider) => { this.processorSlider = slider }} change={this.onChangeProcessor.bind(this)} created={this.onCreateProcessor.bind(this)} />\r\n <div className=\"sub-heading\"> Each core included minimum 2.26 GHz power </div>\r\n </div>\r\n <div className=\"cloud-slider cloud-left-slider\">\r\n <div id=\"memory\"></div>\r\n <span className=\"label-text\"> Memory </span>\r\n {/* memory Slider element */}\r\n <SliderComponent id=\"memory-slider\" value={4} min={1} max={12} ref={(slider) => { this.memorySlider = slider }} change={this.onChangeMemory.bind(this)} created={this.onCreateMemory.bind(this)} />\r\n <div className=\"sub-heading\"> Equal to burstable memory included </div>\r\n </div>\r\n <div className=\"cloud-slider cloud-left-slider\">\r\n <div id=\"storage\"></div>\r\n <span className=\"label-text\"> Storage </span>\r\n {/* storage Slider element */}\r\n <SliderComponent id=\"storage-slider\" value={300} min={10} max={500} step={10} ref={(slider) => { this.storageSlider = slider }} change={this.onChangeStorage.bind(this)} created={this.onCreateStorage.bind(this)} />\r\n <div className=\"sub-heading\"> 1000 GB bandwidth per month, at 100 Mbit/s uplink port </div>\r\n </div>\r\n </div>\r\n <div id=\"cloud-right-pane\" className=\"col-lg-4 col-md-4 col-sm-4\">\r\n <div className=\"cloud-right-content\">\r\n <div className=\"label-text\"> Size Range </div>\r\n <div className=\"btn-size\">\r\n {/* Button element */}\r\n <ButtonComponent id=\"xSmallBtn\" cssClass='e-info' isPrimary={true} onClick={this.sliderPriceValue.bind(this, 1, 1, 10)}>XS</ButtonComponent>\r\n {/* Button element */}\r\n <ButtonComponent id=\"smallBtn\" cssClass='e-info' isPrimary={true} onClick={this.sliderPriceValue.bind(this, 1, 2, 10)}>S</ButtonComponent>\r\n {/* Button element */}\r\n <ButtonComponent id=\"mediumBtn\" cssClass='e-info' isPrimary={true} onClick={this.sliderPriceValue.bind(this, 4, 4, 300)}>M</ButtonComponent>\r\n {/* Button element */}\r\n <ButtonComponent id=\"largeBtn\" cssClass='e-info' isPrimary={true} onClick={this.sliderPriceValue.bind(this, 12, 6, 100)}>L</ButtonComponent>\r\n {/* Button element */}\r\n <ButtonComponent id=\"xLargeBtn\" cssClass='e-info' isPrimary={true} onClick={this.sliderPriceValue.bind(this, 8, 12, 300)}>XL</ButtonComponent>\r\n </div>\r\n <div className=\"label-text right-text\"> ESTIMATED PRICE </div>\r\n <div id=\"cloud-slider-text\">\r\n <span id=\"dollar\">$ </span>\r\n <span id=\"value\"></span>\r\n <span className=\"suffix\">/month</span>\r\n </div>\r\n <div className=\"discount\">\r\n <div className=\"cloud-slider-right\">\r\n {/* cPanel Check Box element */}\r\n <CheckBoxComponent id=\"cPanel\" label='Not required cPanel included' checked={false} change={this.sliderValueChange.bind(this)} ></CheckBoxComponent>\r\n </div>\r\n <div className=\"cloud-slider-right discount-pay\">\r\n {/* discount Check Box element */}\r\n <CheckBoxComponent id=\"discount\" label='12 Months <span class = \"offer\" > Save 25%.</span> Pay Monthly' checked={false} ref={(scope) => { this.checkboxObj = scope; }} change={this.sliderValueChange.bind(this)} ></CheckBoxComponent>\r\n </div>\r\n </div>\r\n {/* Button element */}\r\n <div className=\"slider-button\">\r\n <ButtonComponent className=\"dlgbtn\" id=\"btn\" isPrimary={true} onClick={this.btnClick.bind(this)} ref={(button) => { this.buttonObj = button }}>Signup Now!</ButtonComponent>\r\n </div>\r\n <div id=\"dialogWrapper\" className=\"cloud-content-wrapper\">\r\n {/* Initialize alert Dialog */}\r\n <DialogComponent id=\"alertDialog\" animationSettings={this.animationSettings} width='360px' content={this.content} ref={(alertdialog) => { this.alertDialogObj = alertdialog }} showCloseIcon={false}\r\n target={this.target} visible={false} buttons={this.buttons} closeOnEscape={false}></DialogComponent>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n )\r\n }\r\n}\r\n\nReactDOM.render(<Cloudpricing />, 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}"}