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 pathtemplate-plnkr.json
More file actions
1 lines (1 loc) · 29.2 KB
/
template-plnkr.json
File metadata and controls
1 lines (1 loc) · 29.2 KB
1
{"index.css":".material button#sendButton {\r\n top: 2px;\r\n position: relative;\r\n}\r\n.e-bigger.material button#sendButton {\r\n right: 7px;\r\n}\r\n.bootstrap button#sendbtn {\r\n margin-right: 1%;\r\n}\r\n.material .target-element .e-dialog .e-dlg-header-content {\r\n background-color: #3f51b5;\r\n}\r\n.fabric .target-element .e-dialog .e-dlg-header-content {\r\n background-color: #0078d7;\r\n}\r\n.bootstrap .target-element .e-dialog .e-dlg-header-content {\r\n background-color: #428bca;\r\n}\r\n.highcontrast .target-element .e-dialog .e-dlg-header-content {\r\n background-color: #ffd939;\r\n}\r\n.material.e-bigger .target-element .e-dialog .e-footer-content {\r\n padding-left: 23px;\r\n}\r\n\r\n.target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {\r\n top: 5px;\r\n left: -11px;\r\n}\r\n.e-bigger .target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {\r\n top: 3px;\r\n left: -11px;\r\n}\r\n.target-element .e-dialog .e-dlg-header {\r\n position: relative;\r\n}\r\n.target-element .e-dialog .e-footer-content, .highcontrast.e-bigger .e-dialog .e-footer-content {\r\n padding: 15px;\r\n}\r\n.target-element .e-dialog .e-dlg-content {\r\n padding: 0;\r\n}\r\n.fabric button#sendButton, .highcontrast button#sendButton {\r\n position: relative;\r\n}\r\n\r\n.fabric button#sendbtn, .highcontrast button#sendbtn {\r\n top: -2px;\r\n}\r\n.fabric.e-bigger .target-element .e-dialog .e-footer-content .e-btn, .highcontrast.e-bigger .target-element .e-dialog .e-footer-content .e-btn {\r\n margin-top: -3px;\r\n}\r\n .fabric .target-element input.e-input, .highcontrast .target-element input.e-input {\r\n float: left;\r\n height: 35px;\r\n}\r\n\r\n.e-bigger.highcontrast button#sendbtn {\r\n margin-right: -17px;\r\n margin-top: -2%;\r\n}\r\n\r\n.target-element .e-dialog .e-dlg-header-content {\r\n padding: 6px;\r\n}\r\n.e-bigger.e-dialog .e-dlg-header-content, .e-bigger .target-element .e-dialog .e-dlg-header-content {\r\n padding: 8px;\r\n}\r\n.target-element .e-open-icon::before {\r\n content: '\\e782';\r\n}\r\n#dlg-template {\r\n display: inline-block;\r\n padding: 0px 10px;\r\n vertical-align: middle;\r\n height: 40px;\r\n line-height: 40px;\r\n}\r\n.target-element input.e-input {\r\n width: 75%;\r\n float: left;\r\n}\r\n.e-bigger.bootstrap .target-element input.e-input {\r\n height: 39px;\r\n}\r\n.target-element .e-icon-settings.e-icons {\r\n float: left;\r\n position: relative;\r\n left: 14%;\r\n top: -33px;\r\n}\r\n\r\n.fabric .target-element .e-icon-settings.e-icons, .highcontrast .target-element .e-icon-settings.e-icons {\r\n top: -37px;\r\n}\r\n\r\n.e-bigger.fabric .target-element .e-icon-settings.e-icons, .e-bigger.highcontrast .target-element .e-icon-settings.e-icons {\r\n top: -35px;\r\n}\r\n.target-element .dialogContent .dialogText {\r\n font-size: 13px;\r\n padding: 5%;\r\n word-wrap: break-word;\r\n border-radius: 6px;\r\n text-align: justify;\r\n font-style: initial;\r\n display: block;\r\n}\r\n.target-element .e-dlg-header .e-icon-settings, .target-element .e-icon-btn {\r\n color: #fff;\r\n}\r\n\r\n.target-element .dialogContent .dialogText, .target-element .dialogContent .dialogText {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.material .target-element .e-dialog .e-footer-content, .fabric .target-element .e-dialog .e-footer-content {\r\n border-top: 0.5px solid rgba(0, 0, 0, 0.42);\r\n}\r\n.highcontrast .target-element .e-dialog .e-footer-content, .fabric .target-element .e-dialog .e-footer-content {\r\n padding: 20px 25px;\r\n}\r\n\r\n.highcontrast .target-element .e-dialog .e-footer-content {\r\n border-top: 0.5px solid #fff;\r\n}\r\n.highcontrast .target-element .dialogContent .dialogText { \r\n background-color : rgba(255,255,255,0.20);\r\n}\r\n.target-element .dialogContent {\r\n display: block;\r\n font-size: 15px;\r\n word-wrap: break-word;\r\n text-align: center;\r\n font-style: italic;\r\n border-radius: 6px;\r\n padding: 3%;\r\n position: relative;\r\n top: 5px;\r\n}\r\n.e-bigger.e-dialog .e-dlg-content, .e-bigger .target-element .e-dialog .e-dlg-content {\r\n padding: 0;\r\n}\r\n.bootstrap .target-element .dialogContent {\r\n top: 7px;\r\n}\r\n.control-wrapper .e-control.e-dialog {\r\n width: 30%;\r\n}\r\n.target-element .e-dialog .e-dlg-header-content .e-icon-dlg-close {\r\n color: #fff;\r\n}\r\n.fabric .target-element .e-dialog .e-btn.e-dlg-closeicon-btn:hover span{\r\n color: #8ECBFF;\r\n}\r\n.material .target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover,\r\n.material .target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus {\r\n background-color: rgba(255,255,255, 0.10);\r\n}\r\n.material .target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close ,\r\n.material .target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close,\r\n.material .target-element .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close {\r\n color: #fff;\r\n}\r\n\r\n.e-bigger .target-element .e-dialog.e-rtl .e-dlg-header-content .e-dlg-closeicon-btn.e-btn {\r\n top: 2px;\r\n margin-left: 20px;\r\n}\r\n.target-element .e-dialog.e-rtl .e-dlg-header-content .e-dlg-closeicon-btn.e-btn {\r\n top: 4px;\r\n margin-left: 20px;\r\n}\r\n.target-element .e-rtl input.e-input {\r\n width: 75%;\r\n float: right;\r\n margin-right: 9px;\r\n}\r\n.target-element .e-dialog .e-dlg-header-content .e-dlg-header .e-avatar.template-image {\r\n background-image: url(http://ej2.syncfusion.com/react/demos/src/dialog/images/1.png);\r\n vertical-align: middle;\r\n display: inline-block;\r\n width: 36px;\r\n height: 36px;\r\n}\r\n.control-section .target-element {\r\n min-height: 350px;\r\n}\r\n.dlgbtn.dlgbtn-position {\r\n position: absolute;\r\n}","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\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>Dialog · Template · 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/dialog\">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/dialog/default.html\"><span>Dialog</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Template</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 the template functionalities of the dialog component. The dialog's header and footer is configured with HTML template. \n The typed content will be replaced every time when clicking the "send" button.\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 The dialog component displays HTML template content on the header and footer. The user can set any HTML element as header and footer with the usage of content and footer template properties.\n </p>\n <p>More information on the modal behavior of Dialog can be found in\n the <a target=\"_blank\" href=\"http://ej2.syncfusion.com/15.4.23/react/documentation/dialog/template.html\">\n documentation section</a>.</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 { PropertyPane } from './property-pane';\r\nimport { SampleBase } from './sample-base';\r\nimport {detach, isNullOrUndefined} from '@syncfusion/ej2-base';\r\n\r\n\r\n\r\nexport class Template extends SampleBase<{}, {hideDialog: boolean}> {\r\n private dialogInstance: DialogComponent;\r\n private proxy: any;\r\n private buttonRef;\r\n private buttonElement: HTMLElement;\r\n constructor(props: {}) {\r\n super(props);\r\n this.state = {\r\n hideDialog : true\r\n };\r\n this.buttonElement = null;\r\n this.buttonRef = element => {\r\n this.buttonElement = element;\r\n };\r\n }\r\n public header(data: any): JSX.Element {\r\n return (\r\n <div>\r\n <span className=\"e-avatar template-image e-avatar-xsmall e-avatar-circle\"></span>\r\n <div id=\"dlg-template\" title=\"Nancy\" className=\"e-icon-settings\">Nancy</div>\r\n </div>\r\n );\r\n }\r\n public footerTemplate(data: any): JSX.Element {\r\n return (\r\n <div>\r\n <input id=\"inVal\" className=\"e-input\" type=\"text\" placeholder=\"Enter your message here!\"/>\r\n <button id=\"sendButton\" className=\"e-control e-btn e-primary\" data-ripple=\"true\">Send</button>\r\n </div>\r\n );\r\n }\r\n public content(data: any): JSX.Element {\r\n return (\r\n <div className=\"dialogContent\">\r\n <span className=\"dialogText\">Greetings Nancy! When will you share me the source files of the project?</span>\r\n </div>\r\n );\r\n }\r\n private buttonClick(): void {\r\n this.setState({ hideDialog: true });\r\n }\r\n private dialogClose(): void {\r\n this.setState({ hideDialog: false });\r\n this.buttonElement.style.display='inline-block';\r\n }\r\n private dialogOpen(): void {\r\n this.setState({ hideDialog: true });\r\n this.buttonElement.style.display='none';\r\n }\r\n\r\n private updateTextValue(): void {\r\n let enteredVal: HTMLInputElement = document.getElementById('inVal') as HTMLInputElement;\r\n let dialogTextElement: HTMLElement = document.getElementsByClassName('dialogText')[0] as HTMLElement;\r\n if ( enteredVal.value !== '') {\r\n dialogTextElement.innerHTML = enteredVal.value;\r\n }\r\n enteredVal.value = '';\r\n }\r\n public rendereComplete(): void {\r\n this.proxy = this;\r\n this.dialogInstance.target = document.getElementById('target');\r\n (document.getElementById('sendButton')as HTMLElement).onkeydown = (e: any) => {\r\n if (e.keyCode === 13) { this.updateTextValue(); }\r\n };\r\n\r\n (document.getElementById('inVal')as HTMLElement).onkeydown = (e: any) => {\r\n if (e.keyCode === 13) { this.updateTextValue(); }\r\n };\r\n\r\n document.getElementById('sendButton').onclick = (): void => {\r\n this.updateTextValue();\r\n };\r\n }\r\n public render(): JSX.Element {\r\n return (\r\n <div className='control-pane'>\r\n <div className='control-section row'>\r\n <div id='target' className='col-lg-12 target-element'>\r\n <button className=\"e-control e-btn dlgbtn dlgbtn-position\" ref={this.buttonRef} onClick={this.buttonClick.bind(this)}>Open</button>\r\n <DialogComponent header={this.header as any}\r\n footerTemplate= {this.footerTemplate as any}\r\n content= {this.content as any}\r\n showCloseIcon= {true}\r\n ref={dialog => this.dialogInstance = dialog}\r\n target= '#target'\r\n width= {'437px'}\r\n open= {this.dialogOpen.bind(this)}\r\n close= {this.dialogClose.bind(this)}\r\n height= {'255px'}\r\n visible={this.state.hideDialog}\r\n ></DialogComponent>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\nReactDOM.render(<Template />, 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}"}