templates-plnkr.json

{"index.css":"  @font-face {\r\n        font-family: 'Toast_icons';\r\n        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');\r\n        font-weight: normal;\r\n        font-style: normal;\r\n    }\r\n\r\n    .toast-icons {\r\n        font-family: 'Toast_icons' !important;\r\n        speak: none;\r\n        font-size: 55px;\r\n        font-style: normal;\r\n        font-weight: normal;\r\n        font-variant: normal;\r\n        text-transform: none;\r\n        line-height: 1;\r\n        -webkit-font-smoothing: antialiased;\r\n        -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n\r\n    body>#toast_template .e-toast {\r\n        width: 400px !important;\r\n    }\r\n\r\n    body>#toast_template .e-toast img {\r\n        height: 50%;\r\n    }\r\n\r\n    .toast-template-section #reminder {\r\n        text-align: center;\r\n        margin: 15px;\r\n    }\r\n    \r\n    #toast_custom .e-toast .e-toast-title,\r\n    #toast_custom .e-toast .e-toast-message,\r\n    #toast_custom  .e-toast .e-toast-message .e-toast-content,\r\n    #toast_custom  .e-toast .e-toast-close-icon {\r\n        color: #fff;\r\n    }\r\n\r\n    #toast_custom .e-toast-template {\r\n        display: inline-flex;\r\n    }\r\n\r\n    #toast_custom .e-toast-icon.e-toast-image {\r\n        border-radius: 50%;\r\n        background-repeat: no-repeat;\r\n        background-size: cover;\r\n        height: 50px !important;\r\n        width: 50px !important;\r\n        background-size: 50px 50px;\r\n    }\r\n\r\n    #toast_custom .camden .e-toast-icon.e-toast-image,\r\n    #toast_custom .chase .e-toast-icon.e-toast-image {\r\n        width: 65px !important;\r\n    }\r\n\r\n    @media (max-width: 1052px) {\r\n        .toast-template-section .row .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n            width: 100%;\r\n        }\r\n    }\r\n\r\n    #snooze,\r\n    #template_toast .snooze,\r\n    #dismiss{\r\n        color: #fff;\r\n    }\r\n\r\n\r\n    #template_toast .horizontal-align .toast-content .toast-title {\r\n        font-weight: 500;\r\n        color: #fff;\r\n    }\r\n\r\n    #template_toast .horizontal-align .toast-content .toast-message {\r\n        opacity: 0.75;\r\n        color: #fff;\r\n    }\r\n\r\n    .material  #snooze,\r\n    .material  #dismiss,\r\n    .fabric  #snooze,\r\n    .fabric  #dismiss,\r\n    .highcontrast  #snooze,\r\n    .highcontrast  #dismiss {\r\n        background-color: transparent;\r\n        border-color: transparent;\r\n    }\r\n\r\n    .toast-template-section .e-toast-container {\r\n        top: 0;\r\n    }\r\n\r\n    .toast-template-section #toast_template_target {\r\n        width: 70%;\r\n        height: 700px;\r\n        border: none;\r\n        margin: auto;\r\n    }\r\n\r\n    @media (max-width: 540px) {\r\n        .toast-template-section #toast_template_target {\r\n            width: 100%;\r\n        }\r\n    }\r\n\r\n    #toast_template.e-toast-container .e-toast,\r\n    #toast_custom .e-toast {\r\n        background-color: #3277b2;\r\n    }\r\n\r\n    @media (min-width: 740px) {\r\n        .toast-template-section #toast_template_target {\r\n            width: 400px;\r\n        }\r\n    }\r\n\r\n    .toast-template-section #toast_template_target .e-toast-container .e-toast {\r\n        width: inherit !important;\r\n        display: inline-block;\r\n    }\r\n\r\n    #template_toast .toast-icons {\r\n        font-size: 35px;\r\n        height: auto;\r\n        margin: auto;\r\n    }\r\n\r\n    #template_toast .toast-icons.e-alarm::before {\r\n        content: \"\\e702\";\r\n        color: #fff;\r\n    }\r\n\r\n    #template_toast .horizontal-align {\r\n        display: inline-flex;\r\n        flex-direction: row;\r\n        width: 100%;\r\n    }\r\n\r\n    #template_toast .horizontal-align,\r\n    #template_toast #snoozedropDown,\r\n    #template_toast .snooze,\r\n    #template_toast .snoozeBtn {\r\n        margin: 10px 0;\r\n    }\r\n\r\n\r\n    #template_toast .horizontal-align .toast-content {\r\n        display: inline-flex;\r\n        flex: 1;\r\n        flex-direction: column;\r\n        margin-left: 10px;\r\n    }\r\n\r\n    .material #template_toast .e-input,\r\n    .material #template_toast .e-ddl-icon {\r\n        color: white !important;\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>Toast · Templates · 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/toast\">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/toast/default.html\"><span>Toast</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">Templates</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 demonstrates the Template rendering of the Toast. Static HTML toast to display an alarm notification which can be snoozed or dismissed and Dynamic template rendered using template engine to display mail remainders.</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>This sample illustrates the way to display the template content on the toast. With the usage of Template, the user can format and structure the HTML content to be displayed on the toast as per their application needs.</p>\n                    <ul>\n                        <li>Alarm toast is integrated with button and drop-down list that allows to set timeOut for toast and close it.</li>\n                        <li>Dynamic toast opened based on the data source given to add mail reminder notifications and it can be hidden using the close button available.</li>\n                    </ul>\n                    <p>More information about Toast can be found in this <a target=\"_blank\" href=\"http://ej2.syncfusion.com/react/documentation/toast/getting-started.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 { SampleBase } from './sample-base';\r\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\r\nimport { ButtonComponent } from '@syncfusion/ej2-react-buttons';\r\nimport { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';\r\nimport { ToastComponent, ToastOpenArgs, ToastCloseArgs, ToastBeforeOpenArgs } from '@syncfusion/ej2-react-notifications';\r\nimport { compile, Browser, closest } from '@syncfusion/ej2-base';\r\n\r\n\r\nexport class Templates extends SampleBase<{}, {}> {\r\n    \r\n    private toastObj: ToastComponent;\r\n    private toastObjEmail: ToastComponent;\r\n    private cusPosition: Object = { X: 'Right' };\r\n    private tempPosition: Object = !Browser.isDevice ? { X: 'Right', Y: 'Bottom' } : { X: 'Center', Y: 'Top' };\r\n    private tempTarget: any = !Browser.isDevice ? document.body : '#toast_template_target';\r\n    private template: string = '<div class=\"e-toast-template\">${if(image)}<img class=\"e-toast-icon e-toast-image\" src=\"${image.url}\" />${/if} ${if(from || subject)}<div class=\"e-toast-message\">${if(from)}<div class=\"e-toast-title\">${from}</div>${/if} ${if(subject)}<div class=\"e-toast-content\">${subject}</div>${/if}</div>${/if}</div>';\r\n    private toastData: Object[] = [\r\n        { from: ' Anjolie Stokes', subject: 'Networking Referral', image: { url: 'http://ej2.syncfusion.com/react/demos/src/toast/resource/laura.png' }, },\r\n        { from: ' Ila Russo', subject: 'Business dinner invitation', image: { url: 'http://ej2.syncfusion.com/react/demos/src/toast/resource/janat.png' }, },\r\n        { from: ' Camden Mcmillan', subject: 'Reference Request - Cameran Hester', image: { url: 'http://ej2.syncfusion.com/react/demos/src/toast/resource/camden.png' }, },\r\n        { from: ' Chase Solomon', subject: 'New business relationship confirmation', image: { url: 'http://ej2.syncfusion.com/react/demos/src/toast/resource/chase.png' }, },\r\n        {\r\n            from: ' Inga Scott', subject: 'Application for Sales Associate', image: { url: 'http://ej2.syncfusion.com/react/demos/src/toast/resource/michael.png' },\r\n        }];\r\n    private cusAnimation: {\r\n            hide: { effect: 'SlideRightOut' },\r\n            show: { effect: 'SlideRightIn' }\r\n        };\r\n    private toastFlag: number = 0;\r\n    private snoozeFlag: boolean = false;\r\n    private listObj: DropDownList = new DropDownList({\r\n             placeholder: 'Select a snooze time',\r\n             popupHeight: '200px',\r\n             change: this.listChange.bind(this)\r\n        }) as DropDownList;\r\n    public remainderClick(): void {\r\n        var obj: HTMLElement = this.cardTemplateFn(this.toastData[this.toastFlag])[0] as HTMLElement;\r\n        this.toastObjEmail.show({ template: obj.outerHTML});\r\n        ++this.toastFlag;\r\n        if (this.toastFlag === (this.toastData.length)) {\r\n            this.toastFlag = 0;\r\n        }\r\n    }\r\n    public alarmClick(): void {\r\n         this.toastObj.show();\r\n    }\r\n    public onOpenToast(): void {\r\n        let dismisBtn: HTMLElement = document.getElementById('dismiss');\r\n        let snooze: HTMLElement = document.getElementById('snooze');\r\n        snooze.addEventListener('click',  function() : void {\r\n             this.snoozeFlag = true;\r\n            this.toastObj.hide();\r\n        }.bind(this));\r\n        dismisBtn.addEventListener('click',  function() : void {\r\n            this.toastObj.hide();\r\n        }.bind(this));\r\n        document.addEventListener('click',  function(e: Event) : void {\r\n            let closestEle: HTMLElement = closest(e.target as Element, '.e-toast-container') as HTMLElement;\r\n           let alarm: HTMLElement = document.getElementById('Alarm_turn_on');\r\n           let btnEle: HTMLElement = document.getElementById('toast_mail_remainder');\r\n           if (!isNullOrUndefined(this.toastObj) && e.target !== alarm && e.target !== btnEle && closestEle !== this.toastObj.element && closestEle !== this.toastObjEmail.element) {\r\n               this.toastObj.hide('All');\r\n               this.toastObjEmail.hide('All');\r\n           }\r\n        }.bind(this));\r\n    }\r\n    public onToastClose(): void {\r\n         let alarm: HTMLElement = document.getElementById('Alarm_turn_on');\r\n         alarm.style.display = 'inline-block';\r\n        if (this.snoozeFlag) {\r\n            this.toastObj.show({ timeOut: (parseInt(this.listObj.value.toString(), 10) * 60000) });\r\n            this.snoozeFlag = false;\r\n        }\r\n    }\r\n    public onToastBeforeOpen(e: ToastBeforeOpenArgs): void {\r\n        let alarm: HTMLElement = document.getElementById('Alarm_turn_on');\r\n        alarm.style.display = 'none';\r\n        this.listObj.appendTo(e.element.querySelector('#snoozeDD') as HTMLElement);\r\n    }\r\n    public listChange(e: ChangeEventArgs): void {\r\n        this.snoozeFlag = true;\r\n        this.toastObj.hide();\r\n    }\r\n    public cardTemplateFn(data: Object): HTMLCollection {\r\n        return compile(this.template.trim())(data) as HTMLCollection;\r\n    }\r\n    public toastObjCreate(): void {\r\n         setTimeout(function(){\r\n           this.toastObj.show();\r\n         }.bind(this),200);\r\n    }\r\n    public toastObjEmailCreate(): void {\r\n         setTimeout(function(){\r\n            this.toastObjEmail.show({ template: this.cardTemplateFn(this.toastData[this.toastFlag])[0].outerHTML });\r\n            ++this.toastFlag;\r\n        }.bind(this),200);\r\n    }\r\n   \r\n    render() {\r\n        function templatedata(data: any): JSX.Element {\r\n            return(\r\n                <div id=\"template_toast_ele\">\r\n                             <div id='template_toast'>\r\n                                <div className=\"horizontal-align\">\r\n                                    <div className='e-icons toast-icons e-alarm'></div>\r\n                                <div className='toast-content'>\r\n                                <div className='toast-title'>Weekend Alarm</div>\r\n                                 <div className='toast-message'> With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.\r\n                                      Olive Way by 10:00PM </div>\r\n                                 </div>\r\n                              </div>\r\n                              <img src=\"http://ej2.syncfusion.com/react/demos/src/toast/resource/map.jpg\" width=\"100%\" height=\"70%\"/>\r\n                               <div className=\"snooze\"> Snooze for </div>\r\n                                   <div id='snoozedropDown'>\r\n                                        <select id=\"snoozeDD\">\r\n                                            <option value=\"2min\">2 minutes</option>\r\n                                            <option value=\"5min\">5 minutes</option>\r\n                                            <option value=\"10min\">10 minutes</option>\r\n                                         </select>\r\n                                   </div>\r\n                                   <div className=\"snoozeBtn\">\r\n                                        <button id=\"snooze\" className='e-btn e-flat e-primary' style={{'margin-right': '15px'}}> Snooze </button>\r\n                                        <button id=\"dismiss\" className='e-btn e-flat e-primary'> Dismiss </button>\r\n                                  </div>\r\n                                </div>\r\n                            </div>\r\n          );\r\n          }\r\n          return (\r\n            <div className='control-pane'>\r\n                <div className='col-lg-12 control-section toast-template-section'>\r\n                     <div className=\"e-sample-resize-container\">\r\n                       <div className=\"row\">\r\n                          <div id=\"reminder\">\r\n                              <ButtonComponent className=\"e-btn\" id='toast_mail_remainder' onClick={ this.remainderClick.bind(this) }> Mail Reminder</ButtonComponent>\r\n                              <ButtonComponent className=\"e-btn\" id='Alarm_turn_on' onClick={ this.alarmClick.bind(this) }>Turn on Alarm</ButtonComponent>\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\">\r\n                            <ToastComponent ref={(toast) => { this.toastObjEmail = toast }} id='toast_custom' position={this.cusPosition} animation={this.cusAnimation} newestOnTop={true} showCloseButton={true} timeOut={0} created={this.toastObjEmailCreate.bind(this)}></ToastComponent>\r\n                     </div>\r\n                    <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n                       <ToastComponent ref={(scope) => { this.toastObj = scope }} id='toast_template' position={this.tempPosition} target={this.tempTarget} template={ templatedata } extendedTimeout={0} timeOut={120000} open={this.onOpenToast.bind(this)} close={this.onToastClose.bind(this)} beforeOpen={this.onToastBeforeOpen.bind(this)} created={this.toastObjCreate.bind(this)}></ToastComponent>\r\n                    <div id=\"toast_template_target\"></div>\r\n                    \r\n                   </div>\r\n                  </div>\r\n                </div>\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\nReactDOM.render(<Templates />, 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}"}