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 pathtile-plnkr.json
More file actions
1 lines (1 loc) · 76.2 KB
/
tile-plnkr.json
File metadata and controls
1 lines (1 loc) · 76.2 KB
1
{"index.css":" /* Weather Card Layout Customization */\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/weather.png');\r\n }\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\r\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\r\n color: white;\r\n }\r\n\r\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\r\n border: none;\r\n }\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\r\n text-align: right;\r\n }\r\n\r\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/rainy.svg');\r\n }\r\n\r\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.basic_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 400px;\r\n }\r\n\r\n @media (min-width: 870px) {\r\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n\r\n .card-control-section.basic_card_layout .card-layout {\r\n max-width: 870px;\r\n }\r\n }\r\n /* Flip card Customization */\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-header-title,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-header-title,\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {\r\n color: #000;\r\n }\r\n\r\n .highcontrast .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-front.e-front .e-card-header-caption .e-card-header-title,\r\n .highcontrast .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-front.e-front .e-card-header-caption .e-card-sub-title {\r\n color: #fff;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-right .e-card-header-image,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-right .e-card-header-caption {\r\n margin-right: 15px;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-front .e-card-left {\r\n margin-left: 20px;\r\n padding-left: 0;\r\n width: 50%;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-header-image,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-header-image {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/creative_flip.png');\r\n background-size: cover;\r\n height: 75px;\r\n width: 75px;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card {\r\n text-align: center;\r\n background-size: cover;\r\n min-height: 300px;\r\n height: 300px;\r\n justify-content: flex-end;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card,\r\n .card-control-section.flip_card_layout #card_profile.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/vertical_img.png');\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card.e-flipped,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card.e-flipped {\r\n background-image: none;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions {\r\n justify-content: center;\r\n padding-bottom: 40px;\r\n padding-top: 22px;\r\n }\r\n\r\n .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,\r\n .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {\r\n background-color: transparent;\r\n text-transform: none;\r\n border: none;\r\n }\r\n\r\n .highcontrast .card-control-section.flip_card_layout .e-card-header .e-card-header-image {\r\n border: none;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-flip .e-card-header.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-flip .e-card-front.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-flip .e-card-actions.e-front {\r\n backface-visibility: hidden;\r\n\t\t-webkit-backface-visibility: hidden;\r\n transform-style: preserve-3d;\r\n transition: all 1s ease-in-out;\r\n overflow: hidden;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front {\r\n display: block;\r\n height: 100%;\r\n width: 100%;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front .e-card-header:first-child {\r\n padding-bottom: 0;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front {\r\n backface-visibility: hidden;\r\n\t\t-webkit-backface-visibility: hidden;\r\n transform-style: preserve-3d;\r\n transition: all 1s ease-in-out;\r\n overflow: hidden;\r\n position: absolute;\r\n\t\ttop: 0;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-header.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-front.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-card-actions.e-front {\r\n transform: rotateX(0);\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back {\r\n top: 45px;\r\n text-align: left;\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip .e-back {\r\n transform: rotateX(180deg);\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-header.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-front.e-front,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-card-actions.e-front {\r\n transform: rotateX(180deg);\r\n }\r\n\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-back,\r\n .card-control-section.flip_card_layout .e-card.e-business.e-flip.e-flipped .e-back {\r\n transform: rotateX(0);\r\n }\r\n\r\n .card-control-section.flip_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.flip_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 400px;\r\n }\r\n\r\n @media (min-width: 870px) {\r\n .card-control-section.flip_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.flip_card_layout .card-layout {\r\n max-width: 870px;\r\n }\r\n }\r\n /* Horizontal Card Layout Customization */\r\n\r\n .card-control-section.horizontal_card_layout #horizontal_phone_product .e-card-stacked {\r\n justify-content: flex-start;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #horizontal_phone_product .e-card-actions button:last-child {\r\n margin-left: 20px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .e-card.e-card-horizontal.e-product .e-card-stacked> :first-child,\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card.e-card-horizontal .e-card-stacked> :first-child,\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card.e-card-horizontal .e-card-stacked> :first-child {\r\n flex-grow: 0;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample {\r\n height: inherit;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card img {\r\n height: 188px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card {\r\n height: 50%;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card:first-child {\r\n margin-bottom: 10px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #vertical_Sample .e-card>* {\r\n width: 50%;\r\n justify-content: flex-start;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout #horizontal_product .e-card-header {\r\n width: 100%;\r\n }\r\n\r\n #source_link {\r\n float: right;\r\n margin-right: 10px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n #source_link {\r\n margin-top: -10px;\r\n margin-right: 0px;\r\n }\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .e-card-resize-container {\r\n margin-bottom: 50px;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n margin: auto;\r\n }\r\n\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 870px;\r\n }\r\n\r\n @media (min-width: 912px) {\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n max-width: 800px;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n max-width: 400px !important;\r\n }\r\n }\r\n\r\n @media (max-width: 912px) {\r\n .card-control-section.horizontal_card_layout .row.card-layout {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-control-section.horizontal_card_layout .card-layout {\r\n max-width: 640px;\r\n }\r\n }\r\n\r\n @media (min-width: 700px) and (max-width: 912px) {\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 70%;\r\n }\r\n }\r\n\r\n @media (min-width: 600px) and (max-width: 700px) {\r\n .card-control-section.horizontal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 80%;\r\n }\r\n }\r\n .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td,\r\n .card-control-section.reveal_card_layout .e-card #card_reveal .e-card-header .e-card-header-caption {\r\n text-align: left\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {\r\n background-color: #fff;\r\n border: none;\r\n }\r\n\r\n .highcontrast .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {\r\n background-color: #000;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-show {\r\n display: block;\r\n height: auto;\r\n overflow: hidden;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .row.card-layout .e-card .e-reveal-show {\r\n animation: reveal 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n }\r\n\r\n .card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-hide {\r\n animation: hidden 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n transition: all 200ms;\r\n transform: translateY(0px) scale(0);\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card #card_reveal {\r\n display: none;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .card-layout .e-card .e-reveal-hide {\r\n display: none;\r\n height: 0;\r\n overflow: hidden;\r\n }\r\n\r\n @keyframes hidden {\r\n 0% {\r\n transform: translateY(-100px);\r\n display: block !important;\r\n z-index: 20;\r\n }\r\n 10% {\r\n transform: translateY(-90px);\r\n }\r\n 20% {\r\n transform: translateY(-80px);\r\n }\r\n 30% {\r\n transform: translateY(-70px);\r\n }\r\n 40% {\r\n transform: translateY(-60px);\r\n }\r\n 50% {\r\n transform: translateY(-50px);\r\n }\r\n 60% {\r\n transform: translateY(-40px);\r\n }\r\n 70% {\r\n transform: translateY(-30px);\r\n }\r\n 80% {\r\n transform: translateY(-20px);\r\n }\r\n 90% {\r\n transform: translateY(-10px);\r\n }\r\n 100% {\r\n transform: translateY(0px) scale(0);\r\n display: none;\r\n z-index: 0;\r\n }\r\n }\r\n\r\n @keyframes reveal {\r\n 0% {\r\n transform: translateY(100px);\r\n }\r\n 10% {\r\n transform: translateY(90px);\r\n }\r\n 20% {\r\n transform: translateY(80px);\r\n }\r\n 30% {\r\n transform: translateY(70px);\r\n }\r\n 40% {\r\n transform: translateY(60px);\r\n }\r\n 50% {\r\n transform: translateY(50px);\r\n }\r\n 60% {\r\n transform: translateY(40px);\r\n }\r\n 70% {\r\n transform: translateY(30px);\r\n }\r\n 80% {\r\n transform: translateY(20px);\r\n }\r\n 90% {\r\n transform: translateY(10px);\r\n }\r\n 100% {\r\n transform: translateY(0px) scale(0);\r\n }\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card .e-collapse:before {\r\n content: \"\\e7fc\";\r\n font-size: 12px;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card .e-reveal-icon {\r\n -webkit-transform: rotate(-90deg);\r\n transform: rotate(-90deg);\r\n -moz-transform: rotate(-90deg);\r\n -ms-transform: rotate(-90deg);\r\n }\r\n\r\n .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {\r\n content: \"\\e984\";\r\n }\r\n\r\n .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.reveal_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 250px;\r\n }\r\n\r\n @media (min-width: 560px) {\r\n .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n }\r\n .card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 .e-card {\r\n width: 250px;\r\n margin: auto;\r\n }\r\n }\r\n /* Swipeable card customization */\r\n\r\n .card-control-section.swipe_card_layout #source_link {\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .row.card-layout {\r\n display: flex;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .row.card-layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n margin: 0 auto;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked .e-card-actions {\r\n flex-grow: 1;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked .e-card-actions button {\r\n background: #fff;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n background-color: transparent;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked> :first-child {\r\n flex-grow: initial;\r\n }\r\n\r\n .card-control-section.swipe_card_layout #horizontal_product .e-card {\r\n user-select: none;\r\n width: calc(100% - 15px);\r\n }\r\n\r\n .card-control-section.swipe_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n position: relative;\r\n top: 50px;\r\n width: 100%;\r\n }\r\n\r\n .card-control-section.swipe_card_layout {\r\n min-height: 450px;\r\n }\r\n\r\n .card-control-section.swipe_card_layout #horizontal_product .e-card {\r\n position: absolute;\r\n transition: all 200ms;\r\n touch-action: none;\r\n }\r\n\r\n .card-control-section.swipe_card_layout .card-out {\r\n animation: card-out 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n transform: translateX(0px) rotate(0deg) translateY(0px) scale(1);\r\n }\r\n\r\n .card-control-section.swipe_card_layout .card-out-left {\r\n animation: card-out-left 0.3s cubic-bezier(.8, .2, .1, 0.8);\r\n transform: translateX(0px) rotate(0deg) translateY(0px) scale(1);\r\n }\r\n\r\n @keyframes card-out-left {\r\n 0% {\r\n z-index: 20;\r\n transform: translateX(0px) translateY(0px);\r\n }\r\n 10% {\r\n transform: translateX(-50px) translateY(0px);\r\n }\r\n 20% {\r\n transform: translateX(-100px) translateY(0px);\r\n }\r\n 30% {\r\n transform: translateX(-150px) translateY(0px);\r\n }\r\n 40% {\r\n transform: translateX(-200px) translateY(0px);\r\n }\r\n 50% {\r\n transform: translateX(-250px) translateY(0px);\r\n }\r\n 60% {\r\n transform: translateX(-200px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 70% {\r\n transform: translateX(-150px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 80% {\r\n transform: translateX(-100px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 90% {\r\n transform: translateX(-50px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 100% {\r\n transform: translateX(0px) translateY(0px) scale(1);\r\n }\r\n }\r\n\r\n @keyframes card-out {\r\n 0% {\r\n z-index: 20;\r\n transform: translateX(0px) translateY(0px);\r\n }\r\n 10% {\r\n transform: translateX(50px) translateY(0px);\r\n }\r\n 20% {\r\n transform: translateX(100px) translateY(0px);\r\n }\r\n 30% {\r\n transform: translateX(150px) translateY(0px);\r\n }\r\n 40% {\r\n transform: translateX(200px) translateY(0px);\r\n }\r\n 50% {\r\n transform: translateX(250px) translateY(0px);\r\n }\r\n 60% {\r\n transform: translateX(200px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 70% {\r\n transform: translateX(150px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 80% {\r\n transform: translateX(100px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 90% {\r\n transform: translateX(50px) translateY(0px);\r\n z-index: 0;\r\n }\r\n 100% {\r\n transform: translateX(0px) translateY(0px) scale(1);\r\n }\r\n }\r\n\r\n .card-control-section.swipe_card_layout .e-card>* {\r\n max-width: 50%;\r\n justify-content: flex-start;\r\n }\r\n\r\n #source_link {\r\n float: right;\r\n margin-right: 10px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n #source_link {\r\n margin-top: -10px;\r\n margin-right: 0px;\r\n }\r\n }\r\n\r\n @media (min-width: 540px) {\r\n .card-control-section.swipe_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.swipe_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 870px;\r\n }\r\n }\r\n /* Tile view card customization */\r\n\r\n .tile_layout.card-control-section .row.filter .tile_search {\r\n justify-content: flex-end;\r\n }\r\n\r\n .tile_layout.card-control-section .row .e-card {\r\n text-align: left;\r\n }\r\n\r\n .tile_layout.card-control-section .control-wrapper {\r\n padding: 0 20px;\r\n }\r\n\r\n .tile_layout.card-control-section .row.filter {\r\n margin: 0;\r\n }\r\n\r\n .tile_layout.card-control-section .e-card .e-card-actions a {\r\n border: 1px solid;\r\n display: block;\r\n margin: auto;\r\n width: 100px;\r\n border-radius: inherit;\r\n }\r\n\r\n .tile_layout.card-control-section .e-card .e-card-header .e-card-header-caption .e-card-header-title {\r\n font-size: 18px;\r\n }\r\n\r\n .tile_layout.card-control-section .e-card .e-card-image {\r\n height: 165px;\r\n width: 200px;\r\n }\r\n\r\n .tile_layout.card-control-section .row.filter .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n display: inline-flex;\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.tile_layout .e-card-layout {\r\n margin: auto;\r\n max-width: 190px;\r\n }\r\n\r\n #source_link {\r\n float: right;\r\n margin-right: 10px;\r\n }\r\n\r\n @media screen and (max-width: 768px) {\r\n #source_link {\r\n margin-right: 0px;\r\n }\r\n }\r\n\r\n @media (min-width: 960px) {\r\n .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 25%;\r\n }\r\n .card-control-section.tile_layout .e-card-layout {\r\n max-width: 850px;\r\n }\r\n }\r\n\r\n @media (min-width: 540px) {\r\n .tile_layout.card-control-section .row.filter {\r\n display: flex\r\n }\r\n .tile_layout.card-control-section .e-card .e-card-content {\r\n min-height: 170px;\r\n max-height: 170px;\r\n }\r\n }\r\n\r\n @media (max-width: 960px) and (min-width: 540px) {\r\n .tile_layout.card-control-section .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n .card-control-section.tile_layout .e-card-layout {\r\n max-width: 410px;\r\n }\r\n }\r\n @font-face {\r\n font-family: 'Card_Icon';\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 .fabric .card-control-section.swipe_card_layout .e-card:hover,\r\n .highcontrast .card-control-section.swipe_card_layout .e-card:hover,\r\n .fabric .card-control-section.vertical_card_layout .e-card:hover,\r\n .highcontrast .card-control-section.vertical_card_layout .e-card:hover,\r\n .fabric .card-control-section.flip_card_layout .e-card:hover,\r\n .highcontrast .card-control-section.flip_card_layout .e-card:hover {\r\n border-width: 1px;\r\n padding: 1px;\r\n }\r\n\r\n\r\n .card-control-section.swipe_card_layout #horizontal_product .e-card .cb-icons {\r\n display: flex;\r\n width: inherit !important;\r\n height: inherit !important;\r\n font-size: 18px !important;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .cb-icons {\r\n margin: auto;\r\n font-family: 'Card_Icon';\r\n speak: none;\r\n width: 38px !important;\r\n height: 38px !important;\r\n font-size: 37px !important;\r\n font-style: normal;\r\n font-weight: normal;\r\n font-variant: normal;\r\n text-transform: none;\r\n }\r\n\r\n .e-fav-icon.cb-icons::before {\r\n content: '\\e700';\r\n }\r\n\r\n .e-like-icon.cb-icons::before {\r\n content: '\\e703';\r\n }\r\n\r\n .e-share-icon.cb-icons::before {\r\n content: '\\e704';\r\n }\r\n\r\n .e-mail-icon.cb-icons::before {\r\n content: '\\e701';\r\n }\r\n\r\n .e-fb-icon.cb-icons::before {\r\n content: '\\e706';\r\n }\r\n\r\n .e-google-icon.cb-icons::before {\r\n content: '\\e702';\r\n }\r\n\r\n .e-tweet-icon.cb-icons::before {\r\n content: '\\e705';\r\n }\r\n\r\n /* Vertical card customization */\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-header .e-card-header-title,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header .e-card-header-title {\r\n font-size: 18px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header {\r\n text-align: left;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card>* {\r\n height: 50%;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-content {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-header-caption .e-card-header-title,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-content table td {\r\n color: #fff;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card {\r\n justify-content: flex-end;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card {\r\n text-align: center;\r\n background-size: cover;\r\n height: 300px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-header-caption .e-card-header-title,\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-header-caption .e-card-sub-title,\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-actions button {\r\n color: #000;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/vertical_img.png');\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/vertical_img01.png');\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-actions,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-actions {\r\n justify-content: center;\r\n padding-bottom: 40px;\r\n padding-top: 22px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout #vertical_business.e-card .e-card-actions button,\r\n .card-control-section.vertical_card_layout #vertical_business_profile.e-card .e-card-actions button {\r\n background-color: transparent;\r\n text-transform: none;\r\n border: none;\r\n }\r\n\r\n /* Profile card Customization */\r\n\r\n .highcontrast .card-control-section.vertical_card_layout .e-card.profile .e-card-header-image {\r\n border-color: #fff;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header-image {\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/card/images/8.png');\r\n width: 132px;\r\n height: 120px;\r\n background-size: cover;\r\n border-style: solid;\r\n border-color: rgba(0, 0, 0, 0.54);\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header-caption.center,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-content {\r\n text-align: center;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-btn {\r\n height: 45px;\r\n width: 50px;\r\n background-color: transparent;\r\n border: none;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions button.e-card-btn:hover,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions a:first-child:hover,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions button.e-card-btn,\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions a:first-child {\r\n background: #ffff\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card .e-card-actions.center {\r\n justify-content: center;\r\n display: flex; \r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-actions.center {\r\n background-color: transparent;\r\n border: none;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header .e-card-header-caption .e-card-sub-title {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: rgba(0, 0, 0, 0.8);\r\n }\r\n\r\n .card-control-section.vertical_card_layout .e-card.profile .e-card-header .e-card-header-caption .e-card-header-title {\r\n font-size: 18px;\r\n font-weight: 500;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 100%;\r\n padding: 10px;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .card-layout {\r\n margin: auto;\r\n max-width: 400px;\r\n }\r\n\r\n @media (min-width: 870px) {\r\n .card-control-section.vertical_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\r\n width: 50%;\r\n }\r\n\r\n .card-control-section.vertical_card_layout .card-layout {\r\n max-width: 870px;\r\n }\r\n }","data-source":"\r\n/**\r\n * Card datasource\r\n */\r\n// tslint:disable:max-line-length\r\nexport let cardBook: Object[] = [\r\n {\r\n header_title: ' ASP.NET MVC',\r\n header_subtitle: 'Nick Harrison',\r\n cardImage: { url: './src/card/images/Tile_1.png', tag: 'server' },\r\n cardContent: 'ASP.NET Model View Controller design pattern to keep the data, views, and logic clearly separated in apps.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/ASPNET_MVC_Succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: ' Node.js',\r\n header_subtitle: 'Emanuele DelBono ',\r\n cardImage: { url: './src/card/images/Tile_2.png', tag: 'client' },\r\n cardContent: ' Node.js is a wildly popular platform for writing web applications that has revolutionized web development in many ways.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/nodejs', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: ' React.js',\r\n header_subtitle: 'Dmitri Nesteruk',\r\n cardImage: { url: './src/card/images/Tile_3.png', tag: 'client' },\r\n cardContent: 'React is a JavaScript library that has revolutionized how developers design and think about views in web applications.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/reactjs_succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: ' TypeScript',\r\n header_subtitle: 'Steve Fenton',\r\n cardImage: { url: './src/card/images/Tile_4.png', tag: 'client' },\r\n cardContent: 'Microsoft TypeScript extends many familiar features of .NET programming to JavaScript.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/typescript', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: ' PHP',\r\n header_subtitle: 'Jose Roberto Olivas Mendoza',\r\n cardImage: { url: './src/card/images/Tile_5.png', tag: 'server' },\r\n cardContent: 'Known for its straightforward simplicity, PHP is an open source, general-purpose scripting language oriented for web development.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/php_succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: ' CSS3',\r\n header_subtitle: 'Peter Shaw',\r\n cardImage: { url: './src/card/images/Tile_6.png', tag: 'ui' },\r\n cardContent: 'In CSS3 Succinctly, author Peter Shaw provides an overview of the latest features available for custom cascading style sheets.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/css3', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: ' ASP.NET Core',\r\n header_subtitle: 'Simone Chiaretta and Ugo Lattanzi',\r\n cardImage: { url: './src/card/images/Tile_7.png', tag: 'server' },\r\n cardContent: 'In ASP.NET Core Succinctly, seasoned authors Simone Chiaretta and Ugo Lattanzi update you on all the advances provided by Microsoft’s landmark framework.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/asp_net_core_succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: 'Aurelia',\r\n header_subtitle: 'Matthew Duffield',\r\n cardImage: { url: './src/card/images/Tile_8.png', tag: 'client' },\r\n cardContent: 'Aurelia is a relatively new, open-source JavaScript library/framework that simplifies the creation of web-based applications.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/aurelia_succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: 'ECMAScript 6 ',\r\n header_subtitle: 'Matthew Duffield',\r\n cardImage: { url: './src/card/images/Tile_9.png', tag: 'client' },\r\n cardContent: 'ECMAScript 6 (ES6), also known as ECMAScript 2015, brings new functionality and features to the table that developers have been wanting for a long time.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/ecmascript_6_succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: 'JavaScript',\r\n header_subtitle: 'Cody Lindley',\r\n cardImage: { url: './src/card/images/Tile_10.png', tag: 'client' },\r\n cardContent: 'JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/javascript', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: 'Knockout.js',\r\n header_subtitle: 'Ryan Hodson',\r\n cardImage: { url: './src/card/images/Tile_11.png', tag: 'client' },\r\n cardContent: 'Knockout.js Succinctly is intended for professional web developers who need to build dynamic, scalable user interfaces with minimal code.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/knockoutjs', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n {\r\n header_title: 'Angular 2',\r\n header_subtitle: 'Joseph D. Booth',\r\n cardImage: { url: './src/card/images/Tile_12.png', tag: 'client' },\r\n cardContent: 'Angular 2 is a massively popular JavaScript framework built to take advantage of component development in web apps.',\r\n card_action_btn: {\r\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/angular2_succinctly', target: '_blank', text: 'Read More' }],\r\n isVertical: true\r\n },\r\n isHorizontal: false\r\n },\r\n];\r\n// tslint:enable:max-line-length","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>Card · Tile · 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/card\">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/card/default.html\"><span>Card</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Tile</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 filter and search of the <code>card</code> based on categories, and text containing the card. You can use search\n box to search cards, and you can filter choosing categories in multi-select component.\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 Card is a small container in which user can show defined content in specific structure and it is flexible and extensible.\n This sample demonstrates to render the\n <code>Card</code> Using\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/base/template-engine.html\"> Template Engine</a> and it can be filtered based on\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/data/getting-started.html\">\n data Manager</a>.\n </p><p> More information about Card can be found in this\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/card/getting-started.html\">\n documentation</a> section. </p>\n <p></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 { compile, detach } from '@syncfusion/ej2-base';\r\nimport { cardBook } from '../data-source';\r\nimport { MultiSelect, SelectEventArgs, RemoveEventArgs } from '@syncfusion/ej2-dropdowns';\r\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\r\n\r\n\r\n// tslint:disable:max-line-length\r\ninterface FilterKey {\r\n Code: string;\r\n}\r\nlet templateStr: string = \"<div class='e-card ${if(isHorizontal)} e-card-horizontal ${/if}'>${if(cardImage)}<div class='e-card-image' style='background-image:url(${cardImage.url})'>${if(cardImage.title)}<div class='e-card-title'>${cardImage.title}</div>${/if}</div>${/if}${if(cardTitle)}<div class='e-card-title'>${cardTitle}</div>${/if}${if(header_title||header_subtitle||header_img)}<div class='e-card-header'>${if(header_img)}<div class='e-card-header-image ${if(header_img.isRounded)} e-card-corner ${/if}' style='background-image:url(${header_img.url})'></div>${/if}${if(header_title||header_subtitle)}<div class='e-card-header-caption'>${if(header_title)}<div class='e-card-header-title'>${header_title}</div>${/if}${if(header_subtitle)}<div class='e-card-sub-title'>${header_subtitle}</div>${/if}</div>${/if}</div>${/if}${if(cardContent)}<div class='e-card-content'>${cardContent}</div>${/if}${if(card_action_btn)}<div class='e-card-actions ${if(card_action_btn.isVertical)} e-card-vertical ${/if}'>${for(action_btn of card_action_btn.action_btns)}${if(action_btn.tag==='a')}<a href='${action_btn.href}' target='${action_btn.target}' class='e-btn e-outline e-primary'>${action_btn.text}</a>${else}<button class='e-card-btn'>${action_btn.text}</button>${/if}${/for}</div>${/if}</div>\";\r\nlet cardTemplateFn: (data: object) => HTMLCollection = compile(templateStr);\r\nlet card: HTMLCollection; let cardEle: HTMLElement; let cardObj: JSON[] = cardBook as JSON[]; let data: Object[] = []; let multiSelectData: Object[] = []; let searchData: Object[] = [];\r\nlet searchValCount: number = 0; let filterCategory: { [key: string]: Object; }[] = [{ Name: 'Client-Side', Code: 'client' }, { Name: 'Server-Side', Code: 'server' }, { Name: 'Front-End', Code: 'ui' }];\r\nlet emptyData: boolean = true;\r\n\r\n/* Initialize MultiSelect component */\r\nlet multiselectComp: MultiSelect;\r\nfunction cardRendering(cardObj: Object[]): void {\r\n let errorContent: HTMLElement = document.querySelector('.tile_layout .row.error') as HTMLElement;\r\n if (cardObj.length > 0) {\r\n errorContent.style.display = 'none';\r\n cardObj.forEach((data: Object, index: number): void => {\r\n card = cardTemplateFn(data); cardEle = document.getElementById('card_sample_' + (++index));\r\n if (cardEle) {\r\n cardEle.appendChild(card[0]);\r\n }\r\n });\r\n } else {\r\n errorContent.style.display = 'flex';\r\n }\r\n}\r\n/* Funtion for Destroying Cards */\r\nfunction destroyAllCard(): void {\r\n let cards: NodeList = document.querySelectorAll('.card-control-section .e-card');\r\n [].slice.call(cards).forEach((el: HTMLElement) => {\r\n detach(el);\r\n });\r\n}\r\nexport class Tile extends SampleBase<{}, {}> {\r\n\r\n public rendereComplete(): void {\r\n multiselectComp = new MultiSelect({\r\n // set the local data to dataSource property\r\n dataSource: filterCategory,\r\n // map the appropriate columns to fields property\r\n fields: { text: 'Name', value: 'Code' },\r\n // set the placeholder to MultiSelect input element\r\n placeholder: 'Search by categories',\r\n select: this.multiSelectFun,\r\n removed: this.multiSelectRemove,\r\n });\r\n multiselectComp.appendTo('#local');\r\n cardRendering(cardObj);\r\n document.getElementById('search_Card').onkeyup = (e: KeyboardEvent) => {\r\n if (e.code === 'Tab' || e.code === 'Escape' || e.code === 'ShiftLeft' || (e.code === 'Backspace' && emptyData)) {\r\n return;\r\n }\r\n let inputVal: string = (e.target as HTMLInputElement).value;\r\n inputVal.length === 0 ? emptyData = true : emptyData = false;\r\n this.searchFilter(inputVal);\r\n };\r\n }\r\n\r\n /* Remove event function for multiSelect component */\r\n public multiSelectRemove(e: RemoveEventArgs): void {\r\n let cardDa: Object[] = searchData.length > 0 ? searchData : (multiSelectData.length > 0 ? multiSelectData : cardObj);\r\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\r\n multiSelectData = cardDa; destroyAllCard(); cardRendering(cardObj);\r\n } else if (multiselectComp.value.length === 0 && searchValCount > 0) {\r\n this.searchFilter((document.getElementById('search_Card') as HTMLInputElement).value);\r\n } else if (multiselectComp.value.length === 0) {\r\n destroyAllCard();\r\n multiSelectData = cardDa;\r\n cardRendering(cardDa);\r\n } else {\r\n let keywords: string[] = (e.itemData as FilterKey).Code.split(',');\r\n let dublicate: Object[];\r\n keywords.forEach((key: string): void => {\r\n dublicate = new DataManager(cardObj as JSON[]).executeLocal(new Query().where('cardImage.tag', 'Contains', key, true));\r\n dublicate.forEach((da: Object): void => {\r\n if (cardDa.indexOf(da) !== -1) {\r\n cardDa.splice(cardDa.indexOf(da), 1);\r\n }\r\n });\r\n multiSelectData = cardDa;\r\n });\r\n destroyAllCard(); cardRendering(multiSelectData);\r\n }\r\n }\r\n\r\n public multiSelectFun(e: SelectEventArgs): void {\r\n let keywords: string[] = (e.itemData as FilterKey).Code.split(','); let dublicate: Object[];\r\n let cardDa: Object[] = searchData.length > 0 ? searchData : cardObj;\r\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\r\n multiSelectData = [];\r\n }\r\n keywords.forEach((key: string): void => {\r\n dublicate = new DataManager(cardDa as JSON[]).executeLocal(new Query().where('cardImage.tag', 'Contains', key, true));\r\n if (dublicate.length === 0) {\r\n multiSelectData = [];\r\n destroyAllCard();\r\n return;\r\n }\r\n dublicate.forEach((da: Object): void => {\r\n if (multiSelectData.indexOf(da) === -1) {\r\n multiSelectData.push(da);\r\n }\r\n });\r\n });\r\n destroyAllCard();\r\n cardRendering(multiSelectData);\r\n }\r\n /* Function for Filtering Cards */\r\n public searchFilter(key: string): void {\r\n searchValCount = key.length;\r\n let predicate: Predicate = new Predicate('cardContent', 'Contains', key, true);\r\n predicate = predicate.or('cardImage.title', 'Contains', key, true).or('header_title', 'Contains', key, true).or('header_subtitle', 'Contains', key, true);\r\n let cardDa: Object[] = (multiSelectData.length > 0 && multiselectComp.value.length > 0) ? multiSelectData : cardObj;\r\n searchData = data = new DataManager(cardDa as JSON[]).executeLocal(new Query().where(predicate));\r\n destroyAllCard(); cardRendering(data);\r\n }\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <div className=\"control-section card-control-section tile_layout\">\r\n <div className=\"row filter\">\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div className=\"e-float-input\">\r\n <input type=\"text\" required id=\"search_Card\" />\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\" style={{ fontSize: '14px' }}>Enter text to search</label>\r\n </div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6 tile_search\">\r\n <input type=\"text\" id=\"local\" />\r\n </div>\r\n </div>\r\n <div className='row e-card-layout' style={{textAlign: 'center'}}>\r\n <div className=\"row\">\r\n <div className=\"row error\" style={{ display: 'none', minHeight: '150px' }}>\r\n <div className=\"e-error-content\" style={{ margin: 'auto', height: 'inherit', fontSize: '18px', fontWeight: 500, color: 'inherit' }} >No results found. Please try a different search.</div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_1' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_2' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_3' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_4' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_5' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_6' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_7' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_8' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_9' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_10' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_11' className='card_sample'></div>\r\n </div>\r\n <div className=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\r\n <div id='card_sample_12' className='card_sample'></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id='source_link'>Source: \r\n <a href=\"https://www.syncfusion.com/ebooks/\" target='_blank'>https://www.syncfusion.com/ebooks</a>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\nReactDOM.render(<Tile />, 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}"}