npm - @finqu/cool - Versions diffs - 1.2.28 → 1.3.0 - Mend

@finqu/cool 1.2.28 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/README.md +680 -1
package/dist/css/cool.css +23510 -16076
package/dist/css/cool.css.map +1 -154
package/dist/css/cool.min.css +89 -3
package/dist/css/cool.min.css.map +1 -1
package/dist/js/cool.bundle.js +15397 -3775
package/dist/js/cool.bundle.js.map +1 -1
package/dist/js/cool.bundle.min.js +20 -8
package/dist/js/cool.bundle.min.js.map +1 -1
package/dist/js/cool.esm.js +4281 -3352
package/dist/js/cool.esm.js.map +1 -1
package/dist/js/cool.esm.min.js +9 -8
package/dist/js/cool.esm.min.js.map +1 -1
package/dist/js/cool.js +4283 -3354
package/dist/js/cool.js.map +1 -1
package/dist/js/cool.min.js +9 -8
package/dist/js/cool.min.js.map +1 -1
package/package.json +94 -61
package/.babelrc.js +0 -20
package/.browserslistrc +0 -13
package/build/.eslintrc.json +0 -10
package/build/banner.js +0 -14
package/build/build-plugins.js +0 -92
package/build/rollup.config.js +0 -46
package/dist/css/cool-grid.css +0 -3704
package/dist/css/cool-grid.css.map +0 -30
package/dist/css/cool-grid.min.css +0 -7
package/dist/css/cool-grid.min.css.map +0 -1
package/dist/css/cool-reboot.css +0 -285
package/dist/css/cool-reboot.css.map +0 -62
package/dist/css/cool-reboot.min.css +0 -7
package/dist/css/cool-reboot.min.css.map +0 -1
package/html/dropdown-test.html +0 -200
package/html/index.html +0 -2704
package/js/dist/collapse.js +0 -5290
package/js/dist/collapse.js.map +0 -1
package/js/dist/common.js +0 -22152
package/js/dist/common.js.map +0 -1
package/js/dist/cooldropdown.js +0 -467
package/js/dist/cooldropdown.js.map +0 -1
package/js/dist/coolpopover.js +0 -391
package/js/dist/coolpopover.js.map +0 -1
package/js/dist/coolsectiontabs.js +0 -256
package/js/dist/coolsectiontabs.js.map +0 -1
package/js/dist/coolselect.js +0 -796
package/js/dist/coolselect.js.map +0 -1
package/js/dist/cooltooltip.js +0 -360
package/js/dist/cooltooltip.js.map +0 -1
package/js/dist/coolui.js +0 -73
package/js/dist/coolui.js.map +0 -1
package/js/dist/dropdown.js +0 -27421
package/js/dist/dropdown.js.map +0 -1
package/js/dist/popover.js +0 -9298
package/js/dist/popover.js.map +0 -1
package/js/dist/sectiontabs.js +0 -4483
package/js/dist/sectiontabs.js.map +0 -1
package/js/dist/select.js +0 -37052
package/js/dist/select.js.map +0 -1
package/js/dist/tooltip.js +0 -8786
package/js/dist/tooltip.js.map +0 -1
package/js/index.esm.js +0 -21
package/js/index.umd.js +0 -21
package/js/src/abstract-ui-component.js +0 -81
package/js/src/collapse.js +0 -272
package/js/src/common.js +0 -313
package/js/src/dialog.js +0 -578
package/js/src/dropdown.js +0 -525
package/js/src/popover.js +0 -621
package/js/src/section-tabs.js +0 -215
package/js/src/select.js +0 -1341
package/js/src/toast.js +0 -581
package/js/src/tooltip.js +0 -591
package/js/src/util/animate-css.js +0 -22
package/js/src/util/index.js +0 -122
package/js/src/util/perfect-scrollbar.js +0 -1316
package/less/alert.less +0 -345
package/less/badge.less +0 -38
package/less/bootstrap-noconflict.less +0 -23
package/less/bootstrap.less +0 -23
package/less/button-group.less +0 -153
package/less/buttons.less +0 -287
package/less/dialog-noconflict.less +0 -174
package/less/dialog.less +0 -203
package/less/dropdown.less +0 -209
package/less/forms.less +0 -770
package/less/images.less +0 -242
package/less/input-group.less +0 -163
package/less/list-group.less +0 -73
package/less/mixins/aspect-ratio.less +0 -23
package/less/mixins/border-radius.less +0 -24
package/less/mixins/box-shadow.less +0 -4
package/less/mixins/buttons.less +0 -17
package/less/mixins/caret.less +0 -51
package/less/mixins/clearfix.less +0 -10
package/less/mixins/gradients.less +0 -34
package/less/mixins/nav-divider.less +0 -7
package/less/mixins/object-fit.less +0 -13
package/less/mixins/reset-text.less +0 -16
package/less/mixins.less +0 -11
package/less/package.json +0 -11
package/less/pagination.less +0 -69
package/less/popover.less +0 -143
package/less/project.sublime-workspace +0 -774
package/less/reboot.less +0 -235
package/less/section.less +0 -793
package/less/select.less +0 -150
package/less/tables.less +0 -737
package/less/tabs.less +0 -162
package/less/tooltip.less +0 -87
package/less/type.less +0 -71
package/less/utilities/align.less +0 -27
package/less/utilities/animate.less +0 -3512
package/less/utilities/background.less +0 -70
package/less/utilities/borders.less +0 -16
package/less/utilities/color.less +0 -70
package/less/utilities/cursor.less +0 -8
package/less/utilities/display.less +0 -38
package/less/utilities/embed.less +0 -61
package/less/utilities/flex.less +0 -76
package/less/utilities/jquery-ui.less +0 -116
package/less/utilities/lazyload.less +0 -29
package/less/utilities/overflow.less +0 -11
package/less/utilities/pace.less +0 -25
package/less/utilities/placeholder.less +0 -60
package/less/utilities/position.less +0 -42
package/less/utilities/scrollbar.less +0 -152
package/less/utilities/spacing.less +0 -197
package/less/utilities/text.less +0 -68
package/less/utilities/transform.less +0 -7
package/less/utilities.less +0 -21
package/less/variables.less +0 -343
package/scss/LISENCE +0 -15
package/scss/_alert.scss +0 -106
package/scss/_badge.scss +0 -71
package/scss/_button-group.scss +0 -129
package/scss/_buttons.scss +0 -207
package/scss/_custom-forms.scss +0 -429
package/scss/_dialog.scss +0 -161
package/scss/_dropdown.scss +0 -231
package/scss/_forms.scss +0 -257
package/scss/_frame.scss +0 -548
package/scss/_functions.scss +0 -124
package/scss/_grid.scss +0 -35
package/scss/_images.scss +0 -362
package/scss/_input-group.scss +0 -271
package/scss/_list-group.scss +0 -82
package/scss/_mixins.scss +0 -34
package/scss/_navbar.scss +0 -264
package/scss/_notification.scss +0 -13
package/scss/_pagination.scss +0 -79
package/scss/_popover.scss +0 -165
package/scss/_reboot.scss +0 -283
package/scss/_root.scss +0 -15
package/scss/_section.scss +0 -912
package/scss/_select.scss +0 -175
package/scss/_tables.scss +0 -716
package/scss/_tabs.scss +0 -175
package/scss/_toast.scss +0 -182
package/scss/_tooltip.scss +0 -101
package/scss/_type.scss +0 -121
package/scss/_utilities.scss +0 -23
package/scss/_variables.scss +0 -699
package/scss/cool-grid.scss +0 -29
package/scss/cool-reboot.scss +0 -11
package/scss/cool.scss +0 -37
package/scss/mixins/_alert-variant.scss +0 -25
package/scss/mixins/_aspect-ratio.scss +0 -29
package/scss/mixins/_background-variant.scss +0 -25
package/scss/mixins/_badge-variant.scss +0 -36
package/scss/mixins/_breakpoints.scss +0 -102
package/scss/mixins/_buttons.scss +0 -104
package/scss/mixins/_caret.scss +0 -80
package/scss/mixins/_clearfix.scss +0 -10
package/scss/mixins/_float.scss +0 -14
package/scss/mixins/_forms.scss +0 -67
package/scss/mixins/_gradients.scss +0 -40
package/scss/mixins/_grid-framework.scss +0 -72
package/scss/mixins/_grid.scss +0 -60
package/scss/mixins/_nav-divider.scss +0 -9
package/scss/mixins/_notification-variant.scss +0 -7
package/scss/mixins/_object-fit.scss +0 -16
package/scss/mixins/_reset-text.scss +0 -19
package/scss/mixins/_text-emphasis.scss +0 -21
package/scss/mixins/_text-hide.scss +0 -10
package/scss/mixins/_text-truncate.scss +0 -81
package/scss/mixins/_visibility.scss +0 -7
package/scss/project.sublime-workspace +0 -491
package/scss/utilities/_align.scss +0 -41
package/scss/utilities/_animate.scss +0 -3512
package/scss/utilities/_background.scss +0 -14
package/scss/utilities/_borders.scss +0 -146
package/scss/utilities/_clearfix.scss +0 -6
package/scss/utilities/_collapse.scss +0 -33
package/scss/utilities/_cursor.scss +0 -22
package/scss/utilities/_display.scss +0 -16
package/scss/utilities/_embed.scss +0 -78
package/scss/utilities/_flex.scss +0 -52
package/scss/utilities/_lazyload.scss +0 -31
package/scss/utilities/_overflow.scss +0 -6
package/scss/utilities/_perfect-scrollbar.scss +0 -141
package/scss/utilities/_placeholder.scss +0 -76
package/scss/utilities/_position.scss +0 -30
package/scss/utilities/_sizing.scss +0 -32
package/scss/utilities/_spacing.scss +0 -92
package/scss/utilities/_text.scss +0 -99
package/scss/utilities/_user-select.scss +0 -14
package/scss/utilities/_visibility.scss +0 -10

package/html/index.html DELETED Viewed

@@ -1,2704 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-		<title>Finqu UI</title>
-		<link rel="dns-prefetch" href="//cdn.finqu.com">
-	    <link rel="dns-prefetch" href="//fonts.gstatic.com">
-	    <meta name="application-name" content="Finqu UI">
-	    <meta name="msapplication-TileColor" content="#212529">
-	    <meta name="msapplication-TileImage" content="https://cdn.finqu.com/sites/public/images/favicons/mstile-144x144.png">
-	    <meta name="theme-color" content="#212529">
-	    <link rel="apple-touch-icon" sizes="57x57" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-57x57.png">
-	    <link rel="apple-touch-icon" sizes="60x60" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-60x60.png">
-	    <link rel="apple-touch-icon" sizes="72x72" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-72x72.png">
-	    <link rel="apple-touch-icon" sizes="76x76" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-76x76.png">
-	    <link rel="apple-touch-icon" sizes="114x114" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-114x114.png">
-	    <link rel="apple-touch-icon" sizes="120x120" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-120x120.png">
-	    <link rel="apple-touch-icon" sizes="144x144" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-144x144.png">
-	    <link rel="apple-touch-icon" sizes="152x152" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-152x152.png">
-	    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-180x180.png">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-16x16.png" sizes="16x16">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-32x32.png" sizes="32x32">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-96x96.png" sizes="96x96">
-	    <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/android-chrome-192x192.png" sizes="192x192">
-		<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i" rel="stylesheet">
-		<link rel="stylesheet" href="../dist/css/cool.css">
-		<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
-	</head>
-	<body>
-		<header class="site-header">
-			<div class="navbar">
-			    <div class="navbar-brand">
-			        <div class="sidebar-left-toggler">
-			            <div class="icon animated">
-			                <span></span>
-			                <span></span>
-			                <span></span>
-			            </div>
-			        </div>
-			        <div class="brand-container">
-			            <a href="//business<?= CONFIG_MAINDOMAIN ?>" class="brand">
-			                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.72 120.53" width="100px">
-			                    <g id="Layer_2" data-name="Layer 2">
-			                        <g id="Layer_1-2" data-name="Layer 1">
-			                            <path d="M439.51 78.14Q428.32 53.06 417.08 28a19.65 19.65 0 0 0-4.76-6.61q-9.9-9-19.83-17.9a12.25 12.25 0 0 0-13.72-2.38q-11.24 4.71-22.24 10a12.31 12.31 0 0 0-7.35 11.84c0 2.1 0 4.21.06 6.3a2 2 0 0 1-1.24 2.11c-10.92 6.37-20.51 14.34-25.84 26-3.94 8.6 3.45 9.51 4.22 5.45 1.06-5.53 5-9.77 8.74-13.83 6.68-7.17 14.39-12.9 23.71-16.22a24.07 24.07 0 0 1 12.87-1.4 20.41 20.41 0 0 1 3.48 1.11c1.9.72 3.59.22 4.31-1.36a2.94 2.94 0 0 0-2-4c-2.26-.75-4.62-1.19-6.94-1.73a13 13 0 0 0-1.61-.19 9 9 0 0 1 3.79-4.5 10.16 10.16 0 0 1 14.43 13.17 10.39 10.39 0 0 1-13.44 4.68c-3.46-1.68-7-1.51-10.59-.57A41.48 41.48 0 0 0 350 44.34a2 2 0 0 0-.61 1.34c-.35 5.1.61 8.87 2.8 14.62.12.31 15.4 34 21.33 47.18a14.79 14.79 0 0 0 2.16 3.53 13.34 13.34 0 0 0 15.78 3.23q10.5-4.67 21-9.39c6.72-3 13.45-6 20.15-9 7-3.25 9.98-10.78 6.9-17.71zm-41.19 10.64a4.4 4.4 0 0 1-2.32 2.48h-.07a4.37 4.37 0 0 1-3.65-8 4.28 4.28 0 0 1 5.82 2.1 4.33 4.33 0 0 1 .22 3.42zM387.69 82c-1.48.7-2.4.41-3.33-1-3-4.56-6.18-9.06-9.36-13.53a6.56 6.56 0 0 0-2.24-1.7c-1.31-.7-2.79-1.11-4-1.91a2.59 2.59 0 0 1-1-2.05c.1-1.06 1.06-1.41 2.08-1.13 2.22.6 4.41 1.29 6.64 1.84a3.42 3.42 0 0 0 2-.06c4.33-1.68 8.63-3.42 12.93-5.17 5.53-2.25 11-4.53 16.57-6.8 1.61-.65 2.53-.16 2.94 1.53 1.26 5.17 2.5 10.35 3.81 15.5a2.06 2.06 0 0 1-1.36 2.78c-4.29 1.91-8.56 3.88-12.84 5.83S391.94 80 387.69 82zm27.36.62l-.25.11a4.38 4.38 0 1 1-3-8.23 4.56 4.56 0 0 1 5.62 2.44 4.43 4.43 0 0 1-2.37 5.65z" fill="#02a9dc"/>
-			                            <path d="M0 83.08V16.3Q0 10.95 2.81 8a10.19 10.19 0 0 1 7.71-3h37.69q9.32 0 9.31 8v.79q0 8.25-9.36 8.25H17.21v22.39h30.93q9.38 0 9.38 7.49v.45q0 7.93-9.38 7.87H17.75v24.62q0 9.48-8.8 9.48h-.56Q0 94.34 0 83.08zM65.39 85.16V35.53q0-9.32 8.64-9.39 8.64 0 8.71 9.39v49.63q0 9.18-8.51 9.18h-.1q-8.74 0-8.74-9.18zM65.39 14.42C64.45 8.29 68.27 5.09 74 5c5.76 0 9.61 3.19 8.71 9.38-.45 3.13-2.84 8-8.51 8h-.1c-5.79.07-8.23-4.79-8.71-7.96zM135.28 25.34q-14.11 0-22 11.5c-.49-2.82-1.26-10.64-11-10.64-5.31 0-8 3.37-8 9.33v49.63q0 9.18 8.77 9.18h2q8.53 0 8.54-9.25V50q4.61-8.84 14.76-8.84 6 0 9.16 3.88t3.21 10.63v29.42q0 9.25 8.77 9.25h2.08q8.5 0 8.51-9.18V53.07q0-12.39-6.2-20.06t-18.6-7.67zM273.69 94.34q14.1 0 22.06-11.5c.47 2.82 1.25 10.64 11 10.64 5.32 0 8-3.37 8-9.32V34.52q0-9.18-8.77-9.18h-2.05q-8.53 0-8.54 9.25v35.1q-4.6 8.84-14.77 8.84-5.94 0-9.15-3.88T268.21 64V34.59q0-9.26-8.77-9.25h-2.08q-8.51 0-8.51 9.18V66.6q0 12.41 6.2 20.07t18.64 7.67zM232.36 26.2c-10 0-10.44 7.75-11 10.37a21.78 21.78 0 0 0-8.71-8.08 27.21 27.21 0 0 0-13.14-3.15q-14 0-22.64 9.67t-8.64 25.77q0 15.45 8.64 25.15t22.38 9.68q14.6-.06 21.7-12.38v28.06q0 9.24 8.54 9.24h2q8.81 0 8.81-9.31V35.53c.01-5.98-2.67-9.33-7.94-9.33zm-13.07 38.33a14.92 14.92 0 0 1-5 11.42 16.92 16.92 0 0 1-11.92 4.59 15.64 15.64 0 0 1-12.36-5.49q-4.78-5.49-4.79-14.27T190 46.51q4.72-5.35 12.7-5.36c7.86 0 15 3.11 16.61 10.85.63 3.07-.02 12.53-.02 12.53z" fill="#ffffff"/>
-			                        </g>
-			                    </g>
-			                </svg>
-			            </a>
-			        </div>
-			        <div class="sidebar-right-toggler"></div>
-			    </div>
-				<nav class="navbar-nav">
-					<a href="#" class="nav-item btn btn-icon disable-hover active pulse" data-toggle="tooltip" data-placement="bottom" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
-			            <i class="fas fa-fw fa-home icon"></i>
-			        </a>
-				</nav>
-			</div>
-		</header>
-		<main class="site-main">
-			<aside class="sidebar-left visible">
-				<div class="sidebar-content">
-		            <ul class="nav">
-		                <li class="nav-parent">
-	                        <a href="#typography" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Typography
-	                            </span>
-	                        </a>
-	                        <span class="nav-additional-action">
-								<i class="fas fa-plus icon"></i>
-	                        </span>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#buttons" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Buttons
-	                            </span>
-	                            <span data-collapse-indicator class="show">
-	                            	<i class="fas fa-angle-down icon"></i>
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#input-group" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Input group
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#tooltip" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Tooltip
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#popover" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Popover
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#select" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Select
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#dropdown" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Dropdown
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#collapse" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Collapse
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#toast" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Toast
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#dialog" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Dialog
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#section-tabs" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Section tabs
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#images" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Images
-	                            </span>
-	                        </a>
-		                </li>
-						<li class="nav-parent">
-	                        <a href="#alerts" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Alerts
-	                            </span>
-	                        </a>
-		                </li>
-		                <li class="nav-parent">
-	                        <a href="#badges" class="nav-item">
-								<i class="fas fa-mug-hot nav-icon icon"></i>
-	                            <span class="nav-item-title">
-	                            	Badges
-	                            </span>
-	                        </a>
-		                </li>
-		            </ul>
-		        </div>
-			</aside>
-			<article class="content">
-                <div class="container-content">
-                	<div class="content-inner">
-						<div class="section" id="typography">
-							<div class="section-title">Typography</div>
-							<div class="section-content">
-								<h1>Heading 1</h1>
-								<h2>Heading 2</h2>
-								<h3>Heading 3</h3>
-								<h4>Heading 4</h4>
-								<h5>Heading 5</h5>
-								<h6>Heading 6</h6>
-								<p class="mt-4">Truncate</p>
-								<p class="text-truncate text-truncate-lines-2">
-									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
-								</p>
-							</div>
-						</div>
-						<div class="section" id="buttons">
-							<div class="section-title">Buttons</div>
-							<div class="section-content">
-								<button class="btn btn-primary">Primary!</button>
-								<button class="btn btn-secondary">Secondary!</button>
-								<button class="btn btn-outline-primary">Primary!</button>
-								<button class="btn btn-outline-secondary">Secondary!</button>
-								<p class="mt-4">Button toggle</p>
-								<div class="btn-group-toggle d-inline-block">
-									<div class="btn-group">
-										<button type="button" class="btn btn-outline-secondary active">
-											<input type="radio" name="btn-group-test-1" value="false" checked="true">
-											<i class="fas fa-coins icon"></i>
-										</button>
-										<button type="button" class="btn btn-outline-secondary">
-											<input type="radio" name="btn-group-test-1" value="true">
-											<i class="fas fa-percent icon"></i>
-										</button>
-									</div>
-								</div>
-								<div class="btn-group-toggle d-inline-block">
-									<div class="btn-group">
-										<button type="button" class="btn btn-outline-primary active">
-											<input type="radio" name="btn-group-test-2" value="false" checked="true">
-											<i class="fas fa-coins icon"></i>
-										</button>
-										<button type="button" class="btn btn-outline-primary">
-											<input type="radio" name="btn-group-test-2" value="true">
-											<i class="fas fa-percent icon"></i>
-										</button>
-									</div>
-								</div>
-								<p class="mt-4">Button group in input</p>
-								<div class="form-group">
-									<div class="input-group">
-										<input type="number" class="form-control">
-										<div class="input-group-append btn-group-toggle">
-											<button type="button" class="btn btn-outline-secondary active">
-												<input type="radio" name="btn-group-test-3" value="false" checked="true">
-												<i class="fas fa-coins icon"></i>
-											</button>
-											<button type="button" class="btn btn-outline-secondary">
-												<input type="radio" name="btn-group-test-3" value="true">
-												<i class="fas fa-percent icon"></i>
-											</button>
-										</div>
-									</div>
-								</div>
-								<div class="form-group">
-									<div class="input-group">
-										<input type="number" class="form-control">
-										<div class="input-group-append btn-group-toggle">
-											<button type="button" class="btn btn-outline-primary active">
-												<input type="radio" name="btn-group-test-4" value="false" checked="true">
-												<i class="fas fa-coins icon"></i>
-											</button>
-											<button type="button" class="btn btn-outline-primary">
-												<input type="radio" name="btn-group-test-4" value="true">
-												<i class="fas fa-percent icon"></i>
-											</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="section" id="input-group">
-							<div class="section-title">Input group</div>
-							<div class="section-content">
-								<div class="form-group">
-									<div class="input-group">
-										<div class="input-group-prepend">
-											<div class="input-group-text">PRE</div>
-										</div>
-										<input type="text" class="form-control">
-									</div>
-								</div>
-								<div class="form-group">
-									<div class="input-group is-valid">
-										<div class="input-group-prepend">
-											<div class="input-group-text">Valid</div>
-										</div>
-										<input type="text" class="form-control">
-									</div>
-								</div>
-								<div class="form-group">
-									<div class="input-group is-invalid">
-										<div class="input-group-prepend">
-											<div class="input-group-text">Invalid</div>
-										</div>
-										<input type="text" class="form-control">
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="section" id="tooltip">
-							<div class="section-title">Tooltip</div>
-							<div class="section-content text-right">
-								<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="left" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
-						            Tooltip left
-						        </button>
-								<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="top" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
-						            Tooltip top
-						        </button>
-						        <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="bottom" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
-						            Tooltip bottom
-						        </button>
-						        <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="right" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
-						            Tooltip right
-						        </button>
-							</div>
-						</div>
-						<div class="section" id="popover">
-							<div class="section-title">Popover</div>
-							<div class="section-content">
-								<button class="btn btn-primary" data-toggle="popover" data-title="Popover left" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi." data-trigger="click" data-placement="left">Popover left</button>
-								<button class="btn btn-primary" data-toggle="popover" data-title="Popover top" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi." data-trigger="click" data-placement="top">Popover top</button>
-								<button class="btn btn-primary" data-toggle="popover" data-title="Popover bottom" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi." data-trigger="click" data-placement="bottom">Popover bottom</button>
-								<button class="btn btn-primary" data-toggle="popover" data-title="Popover right" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi." data-trigger="click" data-placement="right">Popover right</button>
-							</div>
-						</div>
-						<div class="section" id="select">
-							<div class="section-title">Select</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-toggle="select" data-name="test" data-type="checkbox" data-scroll-content-height="250">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	Default
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-check text-green"></i>
-								            </span>
-								        </div>
-								        <div class="select-content">
-								            <div class="select-search">
-								                <div class="select-search-input">
-								                    <input type="text" name="select-search" value placeholder="Hae">
-								                </div>
-								                <div class="select-search-icon" data-clear-search>
-								                    <i class="fas fa-search icon"></i>
-								                </div>
-								            </div>
-								            <div class="select-scrollable-content">
-												<div class="select-item">
-												    <div class="select-item-checkbox">
-												        <div class="styled-checkbox">
-												            <input type="checkbox" id="select-test-1" value="1" autocomplete="off">
-												            <label for="select-test-1">
-												                <span class="checkbox-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"/>
-												                    </svg>
-												                </span>
-												                <span class="checkbox-label" data-label>
-												                	Item 1
-												                </span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-												<div class="select-item">
-												    <div class="select-item-checkbox">
-												        <div class="styled-checkbox">
-												            <input type="checkbox" id="select-test-2" value="2" autocomplete="off">
-												            <label for="select-test-2">
-												                <span class="checkbox-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"/>
-												                    </svg>
-												                </span>
-												                <span class="checkbox-label" data-label>
-												                	Item 2
-												                </span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-												<div class="select-item">
-												    <div class="select-item-checkbox">
-												        <div class="styled-checkbox">
-												            <input type="checkbox" id="select-test-3" value="3" autocomplete="off">
-												            <label for="select-test-3">
-												                <span class="checkbox-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"/>
-												                    </svg>
-												                </span>
-												                <span class="checkbox-label" data-label>
-												                	Item 3
-												                </span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-												<div class="select-item">
-												    <div class="select-item-checkbox">
-												        <div class="styled-checkbox">
-												            <input type="checkbox" id="select-test-4" value="0" autocomplete="off">
-												            <label for="select-test-4">
-												                <span class="checkbox-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"/>
-												                    </svg>
-												                </span>
-												                <span class="checkbox-label" data-label>
-												                	Item 4
-												                </span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-												<div class="select-item">
-												    <div class="select-item-checkbox">
-												        <div class="styled-checkbox">
-												            <input type="checkbox" id="select-test-5" value="0" autocomplete="off">
-												            <label for="select-test-5">
-												                <span class="checkbox-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"/>
-												                    </svg>
-												                </span>
-												                <span class="checkbox-label" data-label>
-												                	Item 5
-												                </span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-								            </div>
-								            <div class="select-footer">
-								                <button class="btn btn-block btn-secondary" type="button" data-select-close>
-								                	Sulje
-								                </button>
-								            </div>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-toggle="select" data-name="test-js-render" data-type="checkbox" data-scroll-content-height="250" data-items='[
-										{
-											"id": "1",
-											"label": "Test 1"
-										},
-										{
-											"id": "2",
-											"label": "Test 2"
-										}
-									]' data-search-placeholder="Hae" data-btn-close-text="Sulje" data-show-search="true" data-show-footer="true">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render & HTML5 data-api
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-check text-green"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectJs">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectJsLabel" data-type="checkbox">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render & custom label
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-check text-green"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectJsAppend" data-type="checkbox">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, custom label, append items after initialize
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-check text-green"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectJsLabelDynamicTitle">
-								        <div class="select-header">
-								            <span class="select-title"></span>
-								            <span class="select-icon">
-								            	<i class="fas fa-check text-green"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="input-group">
-									<div class="select-container form-control">
-										<div class="select" data-name="selectJsDeselect">
-									        <div class="select-header">
-									            <span class="select-title">
-									            	Js-render, deselect items
-									            </span>
-									            <span class="select-icon">
-									            	<i class="fas fa-check text-green"></i>
-									            </span>
-									        </div>
-									    </div>
-									</div>
-									<div class="input-group-append">
-					                    <button type="button" name="deselect-items" class="btn btn-secondary">
-					                        Deselect items
-					                    </button>
-					                </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="input-group">
-									<div class="select-container form-control">
-										<div class="select" data-name="selectJsEmpty">
-									        <div class="select-header">
-									            <span class="select-title">
-									            	Js-render, empty select, append items
-									            </span>
-									            <span class="select-icon">
-									            	<i class="fas fa-check text-green"></i>
-									            </span>
-									        </div>
-									    </div>
-									</div>
-									<div class="input-group-append">
-					                    <button type="button" name="append-items" class="btn btn-secondary">
-					                        <i class="fas fa-plus icon"></i>
-					                    </button>
-					                </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container form-control">
-									<div class="select" data-name="selectExcludeItems">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	Js-render, exclude items
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-check text-green"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectConfirmCheck">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, confirm check
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectConfirmUncheck">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, confirm uncheck
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectReset">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, reset
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectPreventUncheck">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, Prevent uncheck
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectItemDetails">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, Get item details (Printed to console)
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectDataDeleted">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, Deleted data
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectSetDataJs" data-set-data="{&quot;selectSetDataJs&quot;:&quot;name&quot;}">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, Set data
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectSetDataExcludeJs" data-set-data="{&quot;selectSetDataExcludeJs&quot;:&quot;name&quot;}">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	JS-render, Set data, Exclude
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectSetDataHtml" data-set-data="{&quot;selectSetDataHtml&quot;:&quot;name&quot;}">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	Html, Set data
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								        <div class="select-content">
-								        	<div class="select-scrollable-content">
-												<div class="select-item">
-												    <div class="select-item-radio">
-												        <div class="styled-radio">
-												            <input type="radio" id="select-sort-by-name" value="name" autocomplete="off">
-												            <label for="select-sort-by-name">
-												                <span class="radio-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
-												                    </svg>
-												                </span>
-												                <span class="radio-label">Name</span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-												<div class="select-item">
-												    <div class="select-item-radio">
-												        <div class="styled-radio">
-												            <input type="radio" id="select-sort-by-price" value="price" autocomplete="off">
-												            <label for="select-sort-by-price">
-												                <span class="radio-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
-												                    </svg>
-												                </span>
-												                <span class="radio-label">Price</span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-											</div>
-								        </div>
-								    </div>
-								</div>
-							</div>
-							<div class="section-content overflow-visible">
-								<div class="select-container">
-									<div class="select" data-name="selectSetDataExcludeHtml" data-set-data="{&quot;selectSetDataExcludeHtml&quot;:&quot;name&quot;}" data-items-to-exclude="name">
-								        <div class="select-header">
-								            <span class="select-title">
-								            	Html, Set data, Exclude
-								            </span>
-								            <span class="select-icon">
-								            	<i class="fas fa-angle-down"></i>
-								            </span>
-								        </div>
-								        <div class="select-content">
-								        	<div class="select-scrollable-content">
-												<div class="select-item">
-												    <div class="select-item-radio">
-												        <div class="styled-radio">
-												            <input type="radio" id="select-sort-by-v2--name" value="name" autocomplete="off">
-												            <label for="select-sort-by-v2--name">
-												                <span class="radio-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
-												                    </svg>
-												                </span>
-												                <span class="radio-label">Name</span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-												<div class="select-item">
-												    <div class="select-item-radio">
-												        <div class="styled-radio">
-												            <input type="radio" id="select-sort-by-v2-price" value="price" autocomplete="off">
-												            <label for="select-sort-by-v2-price">
-												                <span class="radio-inner">
-												                    <svg viewBox="0 0 18 18">
-												                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
-												                    </svg>
-												                </span>
-												                <span class="radio-label">Price</span>
-												            </label>
-												        </div>
-												    </div>
-												</div>
-											</div>
-								        </div>
-								    </div>
-								</div>
-							</div>
-						</div>
-						<div class="section" id="dropdown">
-							<div class="section-title">Dropdown</div>
-							<div class="section-content overflow-visible">
-								<div class="dropdown dropleft">
-							        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-							            Dropdown left
-							        </button>
-							        <div class="dropdown-menu dropdown-menu-right">
-							            <ul class="dropdown-list">
-							            	<li class="dropdown-item">Item 1</li>
-							            	<li class="dropdown-item">Item 2</li>
-							            	<li class="dropdown-item">Item 3</li>
-							            	<li class="dropdown-divider"></li>
-							            	<li class="dropdown-item">Item 4</li>
-							            	<li class="dropdown-item">Item 5</li>
-							            </ul>
-							        </div>
-							    </div>
-							    <div class="dropdown dropup">
-							        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-							            Dropdown up
-							        </button>
-							        <div class="dropdown-menu dropdown-menu-right">
-							            <ul class="dropdown-list">
-							            	<li class="dropdown-item">Item 1</li>
-							            	<li class="dropdown-item">Item 2</li>
-							            	<li class="dropdown-item">Item 3</li>
-							            	<li class="dropdown-divider"></li>
-							            	<li class="dropdown-item">Item 4</li>
-							            	<li class="dropdown-item">Item 5</li>
-							            </ul>
-							        </div>
-							    </div>
-							    <div class="dropdown dropbottom">
-							        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-							            Dropdown bottom
-							        </button>
-							        <div class="dropdown-menu dropdown-menu-right">
-							            <ul class="dropdown-list">
-							            	<li class="dropdown-item">Item 1</li>
-							            	<li class="dropdown-item">Item 2</li>
-							            	<li class="dropdown-item">Item 3</li>
-							            	<li class="dropdown-divider"></li>
-							            	<li class="dropdown-item">Item 4</li>
-							            	<li class="dropdown-item">Item 5</li>
-							            </ul>
-							        </div>
-							    </div>
-							    <div class="dropdown dropright">
-							        <button class="btn btn-primary" type="button" data-toggle="dropdown">
-							            Dropdown right
-							        </button>
-							        <div class="dropdown-menu dropdown-menu-right">
-							            <ul class="dropdown-list">
-							            	<li class="dropdown-item">Item 1</li>
-							            	<li class="dropdown-item">Item 2</li>
-							            	<li class="dropdown-item">Item 3</li>
-							            	<li class="dropdown-divider"></li>
-							            	<li class="dropdown-item">Item 4</li>
-							            	<li class="dropdown-item">Item 5</li>
-							            </ul>
-							        </div>
-							    </div>
-							</div>
-						</div>
-						<div class="section" id="collapse">
-							<div class="section-title">
-								<button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-primary-collapse" aria-expanded="false">
-						            <span>Collapse</span>
-						            <span data-collapse-indicator=".test-primary-collapse" class="align-self-end">
-						                <i class="fas fa-angle-down icon"></i>
-						            </span>
-						        </button>
-							</div>
-							<div class="section-content section-collapse">
-								<div class="collapse test-primary-collapse">
-							        <p>
-							        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
-							        </p>
-							    </div>
-							</div>
-							<div class="section-hr content-full-width"></div>
-							<div class="section-title">
-								<button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-secondary-collapse" aria-expanded="false">
-						            <span>Collapse</span>
-						            <span data-collapse-indicator=".test-secondary-collapse">
-						                <i class="fas fa-angle-down icon"></i>
-						            </span>
-						        </button>
-							</div>
-							<div class="section-content section-collapse">
-								<div class="collapse test-secondary-collapse">
-							        <p>
-							        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
-							        </p>
-							    </div>
-							</div>
-							<div class="section-hr content-full-width"></div>
-							<div class="section-title">
-								<button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-tertiary-collapse" aria-expanded="true">
-						            <span>Collapse open</span>
-						            <span data-collapse-indicator=".test-tertiary-collapse">
-						                <i class="fas fa-angle-down icon"></i>
-						            </span>
-						        </button>
-							</div>
-							<div class="section-content section-collapse show">
-								<div class="collapse show test-tertiary-collapse">
-							        <p>
-							        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
-							        </p>
-							    </div>
-							</div>
-						</div>
-						<div class="section mt-5">
-							<div class="section-title">
-								<button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-collapse-hr" aria-expanded="false">
-						            <span>Collapse hr</span>
-						            <span data-collapse-indicator=".test-secondary-collapse">
-						                <i class="fas fa-angle-down icon"></i>
-						            </span>
-						        </button>
-							</div>
-							<div class="section-content section-collapse show">
-								<div class="collapse show test-collapse-hr">
-									<div class="section-hr content-full-width"></div>
-							        <p>
-							        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
-							        </p>
-							    </div>
-							</div>
-						</div>
-						<div class="section" id="toast">
-							<div class="section-title">Toast</div>
-							<div class="section-content">
-						        <button type="button" class="btn btn-primary" name="toast-test">
-						            Toast
-						        </button>
-							</div>
-						</div>
-						<div class="section" id="dialog">
-							<div class="section-title">Dialog</div>
-							<div class="section-content">
-						        <button type="button" class="btn btn-primary" name="dialog-test">
-						            Dialog
-						        </button>
-						        <button type="button" class="btn btn-primary" name="dialog-scroll">
-						            Dialog scroll
-						        </button>
-							</div>
-						</div>
-						<div class="section" id="section-tabs">
-							<div class="section-title">
-								Section Tabs
-							</div>
-						    <div class="section-tabs">
-						        <ul class="tabs-container" data-toggle="section-tabs">
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action active">
-						                    Item 1
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 2
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 3
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 4
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 5
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 6
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 7
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 8
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 9
-						                </a>
-						            </li>
-						            <li class="tab-item">
-						                <a href="#section-tabs" class="tab-item-action">
-						                    Item 10
-						                </a>
-						            </li>
-						            <li class="tab-item dropdown-container">
-						                <div class="dropdown dropbottom">
-						                    <button class="btn btn-icon" type="button" data-toggle="dropdown">
-						                        <i class="fas fa-lg fa-ellipsis-h icon"></i>
-						                    </button>
-						                    <div class="dropdown-menu dropdown-menu-right">
-						                        <ul class="dropdown-list"></ul>
-						                    </div>
-						                </div>
-						            </li>
-						        </ul>
-						    </div>
-						    <div class="section-content">
-								<p>
-						        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
-						        </p>
-						   	</div>
-						</div>
-						<div class="section" id="images">
-							<div class="section-title">
-								Images
-							</div>
-						    <div class="section-content">
-						    	<div class="image img-xl img-thumbnail img-placeholder mb-2">
-                                    <img src="https://via.placeholder.com/120" class="cover" alt="">
-								</div>
-								<div class="image img-lg img-thumbnail img-placeholder mb-2">
-                                    <img src="https://via.placeholder.com/90" class="cover" alt="">
-                                </div>
-                                <div class="image img-md img-thumbnail img-placeholder mb-2">
-                                    <img src="https://via.placeholder.com/50" class="cover" alt="">
-                                </div>
-                                <div class="image img-sm img-thumbnail img-placeholder mb-2">
-                                    <img src="https://via.placeholder.com/32" class="cover" alt="">
-                                </div>
-						        <div class="image img-xs img-thumbnail img-placeholder mb-2">
-                                    <img src="https://via.placeholder.com/24" class="cover" alt="">
-                                </div>
-						    </div>
-						</div>
-						<div class="section" id="alerts">
-							<div class="section-title">
-								Alerts
-							</div>
-							<div class="section-content">
-								<div class="alert">
-									<div class="alert-icon">
-										<i class="fas fa-fw fa-hourglass icon"></i>
-									</div>
-									<div class="alert-content-container">
-										<div class="alert-content">
-											<p><strong>Title here</strong></p>
-											<p>Alert text!</p>
-										</div>
-										<div class="alert-action">
-											<a href="#" class="btn btn-secondary">
-												Alert action
-											</a>
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-info">
-									<div class="alert-icon">
-										<i class="fas fa-fw fa-hourglass icon"></i>
-									</div>
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-success">
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-										<div class="alert-action">
-											<a href="#" class="btn btn-secondary">
-												Alert action
-											</a>
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-warning">
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-danger">
-									<div class="alert-icon">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-										<div class="alert-action">
-											<a href="#" class="btn btn-secondary">
-												Alert action
-											</a>
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-danger alert-sm">
-									<div class="alert-icon">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-										<div class="alert-action">
-											<a href="#" class="btn btn-secondary btn-sm">
-												Alert action
-											</a>
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-danger alert-sm">
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-										<div class="alert-action">
-											<a href="#" class="btn btn-secondary btn-sm">
-												Alert action
-											</a>
-										</div>
-									</div>
-								</div>
-								<div class="alert alert-danger alert-sm">
-									<div class="alert-content-container">
-										<div class="alert-content">
-											Alert text!
-										</div>
-									</div>
-								</div>
-								<div class="alert-icon">
-									<i class="fas fa-fw fa-times icon"></i>
-								</div>
-								<div class="alert-icon alert-icon-info">
-									<i class="fas fa-fw fa-times icon"></i>
-								</div>
-								<div class="alert-icon alert-icon-success">
-									<i class="fas fa-fw fa-times icon"></i>
-								</div>
-								<div class="alert-icon alert-icon-warning">
-									<i class="fas fa-fw fa-times icon"></i>
-								</div>
-								<div class="alert-icon alert-icon-danger">
-									<i class="fas fa-fw fa-times icon"></i>
-								</div>
-								<h1 class="mt-3">
-									<div class="alert-icon alert-icon-success">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									Lorem ipsum
-								</h1>
-								<h2>
-									<div class="alert-icon alert-icon-success">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									Lorem ipsum
-								</h2>
-								<h3>
-									<div class="alert-icon alert-icon-success">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									Lorem ipsum
-								</h3>
-								<h4>
-									<div class="alert-icon alert-icon-success">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									Lorem ipsum
-								</h4>
-								<h5>
-									<div class="alert-icon alert-icon-success">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									Lorem ipsum
-								</h5>
-								<h6>
-									<div class="alert-icon alert-icon-success">
-										<i class="fas fa-fw fa-times icon"></i>
-									</div>
-									Lorem ipsum
-								</h6>
-							</div>
-						</div>
-						<div class="section" id="badges">
-							<div class="section-title">
-								Badges
-							</div>
-							<div class="section-content">
-								<p>Colors</p>
-								<span class="badge badge-white">Badge</span>
-								<span class="badge badge-grey-lightest">Badge</span>
-								<span class="badge badge-grey-lighter">Badge</span>
-								<span class="badge badge-grey-light">Badge</span>
-								<span class="badge badge-grey">Badge</span>
-								<span class="badge badge-grey-dark">Badge</span>
-								<span class="badge badge-grey-darker">Badge</span>
-								<span class="badge badge-grey-darkest">Badge</span>
-								<span class="badge badge-black">Badge</span>
-								<span class="badge badge-blue-light">Badge</span>
-								<span class="badge badge-blue">Badge</span>
-								<span class="badge badge-blue-dark">Badge</span>
-								<span class="badge badge-blue-grey">Badge</span>
-								<span class="badge badge-green">Badge</span>
-								<span class="badge badge-pink">Badge</span>
-								<span class="badge badge-red">Badge</span>
-								<span class="badge badge-yellow">Badge</span>
-								<p class="mt-3">Theme colors</p>
-								<span class="badge badge-primary">Badge</span>
-								<span class="badge badge-secondary">Badge</span>
-								<span class="badge badge-success">Badge</span>
-								<span class="badge badge-info">Badge</span>
-								<span class="badge badge-warning">Badge</span>
-								<span class="badge badge-danger">Badge</span>
-								<p class="mt-3">Outline</p>
-								<span class="badge badge-outline-white">Badge</span>
-								<span class="badge badge-outline-grey-lightest">Badge</span>
-								<span class="badge badge-outline-grey-lighter">Badge</span>
-								<span class="badge badge-outline-grey-light">Badge</span>
-								<span class="badge badge-outline-grey">Badge</span>
-								<span class="badge badge-outline-grey-dark">Badge</span>
-								<span class="badge badge-outline-grey-darker">Badge</span>
-								<span class="badge badge-outline-grey-darkest">Badge</span>
-								<span class="badge badge-outline-black">Badge</span>
-								<span class="badge badge-outline-blue-light">Badge</span>
-								<span class="badge badge-outline-blue">Badge</span>
-								<span class="badge badge-outline-blue-dark">Badge</span>
-								<span class="badge badge-outline-blue-grey">Badge</span>
-								<span class="badge badge-outline-green">Badge</span>
-								<span class="badge badge-outline-pink">Badge</span>
-								<span class="badge badge-outline-red">Badge</span>
-								<span class="badge badge-outline-yellow">Badge</span>
-								<span class="badge badge-outline-primary">Badge</span>
-								<span class="badge badge-outline-secondary">Badge</span>
-								<span class="badge badge-outline-success">Badge</span>
-								<span class="badge badge-outline-info">Badge</span>
-								<span class="badge badge-outline-warning">Badge</span>
-								<span class="badge badge-outline-danger">Badge</span>
-								<p class="mt-3">Icons</p>
-								<span class="badge badge-primary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
-								<span class="badge badge-secondary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
-								<span class="badge badge-success"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
-								<span class="badge badge-info"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
-								<span class="badge badge-warning"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
-								<span class="badge badge-danger"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
-								<p class="mt-3">Sizing with font size</p>
-								<h1><span class="badge badge-primary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h1>
-								<h2><span class="badge badge-secondary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h2>
-								<h3><span class="badge badge-success"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h3>
-								<h4><span class="badge badge-info"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h4>
-								<h5><span class="badge badge-warning"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h5>
-								<h6><span class="badge badge-danger"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h6>
-								<p class="mt-3">Sizing with class</p>
-								<span class="badge badge-primary">
-									<span class="alert-icon">
-										<i class="fa fa-exclamation icon"></i>
-									</span>
-									default
-								</span>
-								<span class="badge badge-sm badge-primary">
-									<span class="alert-icon">
-										<i class="fa fa-exclamation icon"></i>
-									</span>
-									sm
-								</span>
-								<span class="badge badge-xs badge-primary">
-									<span class="alert-icon">
-										<i class="fa fa-exclamation icon"></i>
-									</span>
-									xs
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</article>
-		</main>
-		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-		<script src="../dist/js/cool.js"></script>
-		<script type="text/javascript">
-			Cool.initialize({
-				popover: {
-					debug: false
-				},
-				select: {
-					debug: false,
-					faPro: false
-				},
-				dropdown: {
-					debug: true
-				},
-				tooltip: {
-					debug: false
-				},
-				collapse: {
-					debug: false
-				},
-				sectionTabs: {
-					debug: false
-				},
-				toast: {
-					debug: false,
-					faPro: false,
-					size: 'lg'
-				},
-				dialog: {
-					debug: true,
-					faPro: false,
-					actions: {
-						close: {
-							content: 'Sulje'
-						},
-						remove: {
-							content: 'Poista'
-						},
-						confirm: {
-							content: 'Vahvista'
-						}
-					},
-					callbacks: {
-						close: function(cb, dialog) {
-							console.log('Dialog close callback test');
-							console.log(dialog);
-							cb();
-						},
-		                remove: function(cb, dialog) {
-		                	console.log('Dialog remove callback test');
-		                	console.log(dialog);
-		                	cb();
-		                },
-		                confirm: function(cb, dialog) {
-		                	console.log('Dialog confirm callback test');
-		                	console.log(dialog);
-		                	cb();
-		                }
-		            }
-				}
-			});
-			function toast(opts) {
-				return $('body').data('plugin_coolToast').init(opts);
-			};
-			$('[name="toast-test"]').on('click', () => {
-				let testToast = toast({
-					content: 'I have a toast'
-				});
-				console.log(testToast.$el);
-			});
-			function dialog(opts) {
-				return $('body').data('plugin_coolDialog').init(opts);
-			};
-			$('[name="dialog-test"]').on('click', () => {
-				let testDialog = dialog({
-					title: 'Dialog 1',
-					body: '<div class="mb-4">Lorem ipsum dolor dot 1</div><button type="button" class="btn btn-primary" name="dialog-inner-test">Dialog 2</button>',
-					footer: false
-				});
-				console.log(testDialog.$el);
-			});
-			$('[name="dialog-scroll"]').on('click', () => {
-				dialog({
-					title: 'Dialog scroll',
-					body: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.',
-				});
-			});
-			$(document).on('click', '[name="dialog-inner-test"]', () => {
-				dialog({
-					title: 'Dialog 2',
-					body: 'Lorem ipsum dolor dot 2',
-					footer: true
-				});
-			});
-			$('.nav .nav-item').on('click', function(e) {
-				e.preventDefault();
-				let target = $(this).attr('href');
-				$('.content').animate({
-	                scrollTop: $(target).offset().top
-	            }, 800);
-	            return false;
-			});
-			$('[data-name="selectJs"]').coolSelect({
-				type: 'radio',
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1"
-					},
-					{
-						"id": 2,
-						"name": "Test 2"
-					}
-				],
-				scrollContentHeight: 370,
-				showValidStateIcon: false
-	        });
-			$('[data-name="selectJsLabel"]').coolSelect({
-				items: [
-					{
-						"id": "1",
-						"name": "Test 1",
-						"status": "1"
-					},
-					{
-						"id": "2",
-						"name": "Test 2",
-						"status": "0"
-					}
-				],
-				showSearch: true,
-				showFooter: true,
-				searchPlaceholder: 'Search',
-				btnCloseText: 'Close',
-				scrollContentHeight: 370,
-				labelTemplate: (item) => {
-					return `
-	                	<div class="d-flex justify-content-between">
-	                		<div>
-								<span class="d-block" data-label>
-									${item.name}
-								</span>
-							</div>
-							<div>
-								<span>
-									<i class="fas fa-fw fa-xs fa-circle icon ${item.status == 0 ? 'text-danger' : 'text-success'}"></i>
-								</span>
-							</div>
-						</div>
-	            	`
-            	}
-	        });
-	        $('[data-name="selectJsAppend"]').coolSelect({
-				items: [
-					{
-						"id": "1",
-						"name": "Test 1",
-						"status": "1"
-					},
-					{
-						"id": "2",
-						"name": "Test 2",
-						"status": "0"
-					}
-				],
-				showSearch: true,
-				showFooter: true,
-				searchPlaceholder: 'Search',
-				btnCloseText: 'Close',
-				scrollContentHeight: 370,
-				labelTemplate: (item) => {
-					return `
-	                	<div class="d-flex justify-content-between">
-	                		<div>
-								<span class="d-block" data-label>
-									${item.name}
-								</span>
-							</div>
-							<div>
-								<span>
-									<i class="fas fa-fw fa-xs fa-circle icon ${item.status == 0 ? 'text-danger' : 'text-success'}"></i>
-								</span>
-							</div>
-						</div>
-	            	`
-            	},
-            	onInit: function() {
-            		this.appendItems([
-			        	{
-							id: 3,
-							name: 'Test append 3',
-							status: 1
-						},
-						{
-							id: 4,
-							name: 'Test append 4',
-							status: 0
-						}
-			        ], true);
-            	}
-	        });
-	        $('[data-name="selectJsLabelDynamicTitle"]').coolSelect({
-	        	setData: {
-	        		selectJsLabelDynamicTitle: [1]
-	        	},
-				items: [
-					{
-						"id": "1",
-						"name": "Test 1",
-						"status": "1"
-					},
-					{
-						"id": "2",
-						"name": "Test 2",
-						"status": "0"
-					}
-				],
-				type: 'radio',
-				showSearch: true,
-				showFooter: true,
-				searchPlaceholder: 'Search',
-				btnCloseText: 'Close',
-				dynamicTitle: true,
-				dynamicTitleDefault: 'Choose',
-				scrollContentHeight: 370,
-				labelTemplate: (item) => {
-					return `
-	                	<div class="d-flex justify-content-between">
-	                		<div>
-								<span class="d-block" data-label>
-									${item.name}
-								</span>
-							</div>
-							<div>
-								<span>
-									<i class="fas fa-fw fa-xs fa-circle icon ${item.status == 0 ? 'text-danger' : 'text-success'}"></i>
-								</span>
-							</div>
-						</div>
-	            	`
-            	}
-	        });
-	        $('[data-name="selectJsDeselect"]').coolSelect({
-	        	setData: {
-	        		selectJsDeselect: [1,2]
-	        	},
-				items: [
-					{
-						"id": "1",
-						"name": "Test 1",
-						"status": "1"
-					},
-					{
-						"id": "2",
-						"name": "Test 2",
-						"status": "0"
-					}
-				],
-				type: 'checkbox',
-				showSearch: true,
-				showFooter: true,
-				searchPlaceholder: 'Search',
-				btnCloseText: 'Close',
-				scrollContentHeight: 370,
-				onInit: function() {
-					$('[name="deselect-items"]').on('click', () => {
-						this.deselectItems([1,2]);
-					});
-            	}
-	        });
-	        $('[data-name="selectJsEmpty"]').coolSelect({
-				items: [],
-				dynamicTitle: true,
-				dynamicTitleDefault: 'Choose',
-				dynamicTitleEmptyDefault: 'Add',
-				onInit: function() {
-					$('[name="append-items"]').on('click', () => {
-						this.appendItems([
-							{
-								id: 1,
-								name: 'Test 1'
-							},
-							{
-								id: 2,
-								name: 'Test 2'
-							}
-						]);
-					});
-            	}
-	        });
-	        $('[data-name="selectExcludeItems"]').coolSelect({
-				type: 'radio',
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1"
-					},
-					{
-						"id": 2,
-						"name": "Test 2"
-					}
-				],
-				itemsToExclude: [2]
-	        });
-	        $('[data-name="selectConfirmCheck"]').coolSelect({
-				type: 'checkbox',
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1"
-					},
-					{
-						"id": 2,
-						"name": "Test 2"
-					}
-				],
-				scrollContentHeight: 370,
-				confirmCheck: function(confirmCb, el) {
-					dialog({
-						title: 'Select confirm check',
-						body: 'Lorem ipsum dolor dot 2',
-						actions: {
-			                remove: {
-			                    visible: false
-			                }
-			            },
-			            callbacks: {
-			                confirm: function (cb) {
-			                	confirmCb('confirmed');
-			                	cb();
-			                },
-			                close: function (cb) {
-			                	confirmCb();
-			                    cb();
-			                }
-			            }
-					});
-				}
-	        });
-	        $('[data-name="selectConfirmUncheck"]').coolSelect({
-				type: 'checkbox',
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1"
-					},
-					{
-						"id": 2,
-						"name": "Test 2"
-					}
-				],
-				scrollContentHeight: 370,
-				confirmUncheck: function(confirmCb, el) {
-					dialog({
-						title: 'Select confirm uncheck',
-						body: 'Lorem ipsum dolor dot 2',
-						actions: {
-			                remove: {
-			                    visible: false
-			                }
-			            },
-			            callbacks: {
-			                confirm: function (cb) {
-			                	confirmCb('confirmed');
-			                	cb();
-			                },
-			                close: function (cb) {
-			                	confirmCb();
-			                    cb();
-			                }
-			            }
-					});
-				}
-	        });
-	        $('[data-name="selectReset"]').coolSelect({
-				type: 'checkbox',
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1"
-					},
-					{
-						"id": 2,
-						"name": "Test 2"
-					}
-				],
-				scrollContentHeight: 370,
-            	onClose: function() {
-            		this.reset();
-            	}
-	        });
-	        $('[data-name="selectPreventUncheck"]').coolSelect({
-				type: 'checkbox',
-				preventUncheck: true,
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1"
-					},
-					{
-						"id": 2,
-						"name": "Test 2"
-					}
-				],
-				scrollContentHeight: 370
-	        });
-	        $('[data-name="selectItemDetails"]').coolSelect({
-				type: 'checkbox',
-				items: [
-					{
-						"id": 1,
-						"name": "Test 1",
-						"category": 1000,
-						"status": false
-					},
-					{
-						"id": 2,
-						"name": "Test 2",
-						"category": 2000,
-						"status": true
-					}
-				],
-				scrollContentHeight: 370,
-	            onSelect: function(data, plugin) {
-	            	console.log(this);
-	            	console.log(data);
-	            	console.log(plugin);
-	            }
-	        });
-	        $('[data-name="selectDataDeleted"]').coolSelect({
-	        	setData: { 'selectDataDeleted': [1] },
-				type: 'checkbox',
-				scrollContentHeight: 370,
-	            onSelect: function(data, plugin) {
-	            	console.log(this);
-	            	console.log(data);
-	            	console.log(plugin);
-	            }
-	        });
-	        $('[data-name="selectSetDataJs"]').coolSelect({
-				type: 'checkbox',
-				items: [
-					{
-						"id": "name",
-						"name": "Test 1"
-					},
-					{
-						"id": "test",
-						"name": "Test 2"
-					}
-				]
-	        });
-	        $('[data-name="selectSetDataExcludeJs"]').coolSelect({
-				type: 'checkbox',
-				itemsToExclude: ['name'],
-				items: [
-					{
-						"id": "name",
-						"name": "Test 1"
-					},
-					{
-						"id": "test",
-						"name": "Test 2"
-					}
-				]
-	        });
-	        $('[data-name="selectSetDataHtml"]').coolSelect();
-	        $('[data-name="selectSetDataExcludeHtml"]').coolSelect();
-		</script>
-	</body>
-</html>