Upload 152 files

libs/aos/aos.css

@@ -0,0 +1 @@
+[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}}

libs/aos/aos.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.AOS=t()}(this,function(){"use strict";var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t="Expected a function",n=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,c=/^0o[0-7]+$/i,s=parseInt,u="object"==typeof e&&e&&e.Object===Object&&e,d="object"==typeof self&&self&&self.Object===Object&&self,l=u||d||Function("return this")(),f=Object.prototype.toString,m=Math.max,p=Math.min,b=function(){return l.Date.now()};function v(e,n,o){var i,a,r,c,s,u,d=0,l=!1,f=!1,v=!0;if("function"!=typeof e)throw new TypeError(t);function y(t){var n=i,o=a;return i=a=void 0,d=t,c=e.apply(o,n)}function h(e){var t=e-u;return void 0===u||t>=n||t<0||f&&e-d>=r}function k(){var e=b();if(h(e))return x(e);s=setTimeout(k,function(e){var t=n-(e-u);return f?p(t,r-(e-d)):t}(e))}function x(e){return s=void 0,v&&i?y(e):(i=a=void 0,c)}function O(){var e=b(),t=h(e);if(i=arguments,a=this,u=e,t){if(void 0===s)return function(e){return d=e,s=setTimeout(k,n),l?y(e):c}(u);if(f)return s=setTimeout(k,n),y(u)}return void 0===s&&(s=setTimeout(k,n)),c}return n=w(n)||0,g(o)&&(l=!!o.leading,r=(f="maxWait"in o)?m(w(o.maxWait)||0,n):r,v="trailing"in o?!!o.trailing:v),O.cancel=function(){void 0!==s&&clearTimeout(s),d=0,i=u=a=s=void 0},O.flush=function(){return void 0===s?c:x(b())},O}function g(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function w(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&f.call(e)==o}(e))return n;if(g(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=g(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var u=r.test(e);return u||c.test(e)?s(e.slice(2),u?2:8):a.test(e)?n:+e}var y=function(e,n,o){var i=!0,a=!0;if("function"!=typeof e)throw new TypeError(t);return g(o)&&(i="leading"in o?!!o.leading:i,a="trailing"in o?!!o.trailing:a),v(e,n,{leading:i,maxWait:n,trailing:a})},h="Expected a function",k=NaN,x="[object Symbol]",O=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,E=/^0b[01]+$/i,N=/^0o[0-7]+$/i,z=parseInt,C="object"==typeof e&&e&&e.Object===Object&&e,A="object"==typeof self&&self&&self.Object===Object&&self,q=C||A||Function("return this")(),L=Object.prototype.toString,T=Math.max,M=Math.min,S=function(){return q.Date.now()};function D(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function H(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&L.call(e)==x}(e))return k;if(D(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=D(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(O,"");var n=E.test(e);return n||N.test(e)?z(e.slice(2),n?2:8):j.test(e)?k:+e}var $=function(e,t,n){var o,i,a,r,c,s,u=0,d=!1,l=!1,f=!0;if("function"!=typeof e)throw new TypeError(h);function m(t){var n=o,a=i;return o=i=void 0,u=t,r=e.apply(a,n)}function p(e){var n=e-s;return void 0===s||n>=t||n<0||l&&e-u>=a}function b(){var e=S();if(p(e))return v(e);c=setTimeout(b,function(e){var n=t-(e-s);return l?M(n,a-(e-u)):n}(e))}function v(e){return c=void 0,f&&o?m(e):(o=i=void 0,r)}function g(){var e=S(),n=p(e);if(o=arguments,i=this,s=e,n){if(void 0===c)return function(e){return u=e,c=setTimeout(b,t),d?m(e):r}(s);if(l)return c=setTimeout(b,t),m(s)}return void 0===c&&(c=setTimeout(b,t)),r}return t=H(t)||0,D(n)&&(d=!!n.leading,a=(l="maxWait"in n)?T(H(n.maxWait)||0,t):a,f="trailing"in n?!!n.trailing:f),g.cancel=function(){void 0!==c&&clearTimeout(c),u=0,o=s=i=c=void 0},g.flush=function(){return void 0===c?r:v(S())},g},W=function(){};function P(e){e&&e.forEach(function(e){var t=Array.prototype.slice.call(e.addedNodes),n=Array.prototype.slice.call(e.removedNodes);if(function e(t){var n=void 0,o=void 0;for(n=0;n<t.length;n+=1){if((o=t[n]).dataset&&o.dataset.aos)return!0;if(o.children&&e(o.children))return!0}return!1}(t.concat(n)))return W()})}function Y(){return window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver}var _={isSupported:function(){return!!Y()},ready:function(e,t){var n=window.document,o=new(Y())(P);W=t,o.observe(n.documentElement,{childList:!0,subtree:!0,removedNodes:!0})}},B=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},F=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),I=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},K=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i,G=/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,J=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i,Q=/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;function R(){return navigator.userAgent||navigator.vendor||window.opera||""}var U=new(function(){function e(){B(this,e)}return F(e,[{key:"phone",value:function(){var e=R();return!(!K.test(e)&&!G.test(e.substr(0,4)))}},{key:"mobile",value:function(){var e=R();return!(!J.test(e)&&!Q.test(e.substr(0,4)))}},{key:"tablet",value:function(){return this.mobile()&&!this.phone()}},{key:"ie11",value:function(){return"-ms-scroll-limit"in document.documentElement.style&&"-ms-ime-align"in document.documentElement.style}}]),e}()),V=function(e,t){var n=void 0;return U.ie11()?(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,{detail:t}):n=new CustomEvent(e,{detail:t}),document.dispatchEvent(n)},X=function(e){return e.forEach(function(e,t){return function(e,t){var n=e.options,o=e.position,i=e.node,a=(e.data,function(){e.animated&&(function(e,t){t&&t.forEach(function(t){return e.classList.remove(t)})}(i,n.animatedClassNames),V("aos:out",i),e.options.id&&V("aos:in:"+e.options.id,i),e.animated=!1)});n.mirror&&t>=o.out&&!n.once?a():t>=o.in?e.animated||(function(e,t){t&&t.forEach(function(t){return e.classList.add(t)})}(i,n.animatedClassNames),V("aos:in",i),e.options.id&&V("aos:in:"+e.options.id,i),e.animated=!0):e.animated&&!n.once&&a()}(e,window.pageYOffset)})},Z=function(e){for(var t=0,n=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)t+=e.offsetLeft-("BODY"!=e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!=e.tagName?e.scrollTop:0),e=e.offsetParent;return{top:n,left:t}},ee=function(e,t,n){var o=e.getAttribute("data-aos-"+t);if(void 0!==o){if("true"===o)return!0;if("false"===o)return!1}return o||n},te=function(e,t){return e.forEach(function(e,n){var o=ee(e.node,"mirror",t.mirror),i=ee(e.node,"once",t.once),a=ee(e.node,"id"),r=t.useClassNames&&e.node.getAttribute("data-aos"),c=[t.animatedClassName].concat(r?r.split(" "):[]).filter(function(e){return"string"==typeof e});t.initClassName&&e.node.classList.add(t.initClassName),e.position={in:function(e,t,n){var o=window.innerHeight,i=ee(e,"anchor"),a=ee(e,"anchor-placement"),r=Number(ee(e,"offset",a?0:t)),c=a||n,s=e;i&&document.querySelectorAll(i)&&(s=document.querySelectorAll(i)[0]);var u=Z(s).top-o;switch(c){case"top-bottom":break;case"center-bottom":u+=s.offsetHeight/2;break;case"bottom-bottom":u+=s.offsetHeight;break;case"top-center":u+=o/2;break;case"center-center":u+=o/2+s.offsetHeight/2;break;case"bottom-center":u+=o/2+s.offsetHeight;break;case"top-top":u+=o;break;case"bottom-top":u+=o+s.offsetHeight;break;case"center-top":u+=o+s.offsetHeight/2}return u+r}(e.node,t.offset,t.anchorPlacement),out:o&&function(e,t){window.innerHeight;var n=ee(e,"anchor"),o=ee(e,"offset",t),i=e;return n&&document.querySelectorAll(n)&&(i=document.querySelectorAll(n)[0]),Z(i).top+i.offsetHeight-o}(e.node,t.offset)},e.options={once:i,mirror:o,animatedClassNames:c,id:a}}),e},ne=function(){var e=document.querySelectorAll("[data-aos]");return Array.prototype.map.call(e,function(e){return{node:e}})},oe=[],ie=!1,ae={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,mirror:!1,anchorPlacement:"top-bottom",startEvent:"DOMContentLoaded",animatedClassName:"aos-animate",initClassName:"aos-init",useClassNames:!1,disableMutationObserver:!1,throttleDelay:99,debounceDelay:50},re=function(){return document.all&&!window.atob},ce=function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&(ie=!0),ie&&(oe=te(oe,ae),X(oe),window.addEventListener("scroll",y(function(){X(oe,ae.once)},ae.throttleDelay)))},se=function(){if(oe=ne(),de(ae.disable)||re())return ue();ce()},ue=function(){oe.forEach(function(e,t){e.node.removeAttribute("data-aos"),e.node.removeAttribute("data-aos-easing"),e.node.removeAttribute("data-aos-duration"),e.node.removeAttribute("data-aos-delay"),ae.initClassName&&e.node.classList.remove(ae.initClassName),ae.animatedClassName&&e.node.classList.remove(ae.animatedClassName)})},de=function(e){return!0===e||"mobile"===e&&U.mobile()||"phone"===e&&U.phone()||"tablet"===e&&U.tablet()||"function"==typeof e&&!0===e()};return{init:function(e){return ae=I(ae,e),oe=ne(),ae.disableMutationObserver||_.isSupported()||(console.info('\n      aos: MutationObserver is not supported on this browser,\n      code mutations observing has been disabled.\n      You may have to call "refreshHard()" by yourself.\n    '),ae.disableMutationObserver=!0),ae.disableMutationObserver||_.ready("[data-aos]",se),de(ae.disable)||re()?ue():(document.querySelector("body").setAttribute("data-aos-easing",ae.easing),document.querySelector("body").setAttribute("data-aos-duration",ae.duration),document.querySelector("body").setAttribute("data-aos-delay",ae.delay),-1===["DOMContentLoaded","load"].indexOf(ae.startEvent)?document.addEventListener(ae.startEvent,function(){ce(!0)}):window.addEventListener("load",function(){ce(!0)}),"DOMContentLoaded"===ae.startEvent&&["complete","interactive"].indexOf(document.readyState)>-1&&ce(!0),window.addEventListener("resize",$(ce,ae.debounceDelay,!0)),window.addEventListener("orientationchange",$(ce,ae.debounceDelay,!0)),oe)},refresh:ce,refreshHard:se}});

libs/autocomplete/jquery.autocomplete.js

@@ -0,0 +1,334 @@
+/**
+*    Json key/value autocomplete for jQuery 
+*    Provides a transparent way to have key/value autocomplete
+*    Copyright (C) 2008 Ziadin Givan
+*
+*    This program is free software: you can redistribute it and/or modify
+*    it under the terms of the GNU Lesser General Public License as published by
+*    the Free Software Foundation, either version 3 of the License, or
+*    (at your option) any later version.
+*
+*    This program is distributed in the hope that it will be useful,
+*    but WITHOUT ANY WARRANTY; without even the implied warranty of
+*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*    GNU General Public License for more details.
+*
+*    You should have received a copy of the GNU Lesser General Public License
+*    along with this program.  If not, see http://www.gnu.org/licenses/
+*    
+*    Examples 
+* 
+*	 $("input#example").autocomplete("autocomplete.php");//using default parameters
+* 
+*	 $("input#example").autocomplete("autocomplete.php",{minChars:3,timeout:3000,validSelection:false,parameters:{'myparam':'myvalue'},before : function(input,text) {},after : function(input,text) {}});
+* 
+*    minChars = Minimum characters the input must have for the ajax request to be made
+*	 timeOut = Number of miliseconds passed after user entered text to make the ajax request   
+*    validSelection = If set to true then will invalidate (set to empty) the value field if the text is not selected (or modified) from the list of items.
+*    parameters = Custom parameters to be passed
+*    after, before = a function that will be caled before/after the ajax request
+*/
+(function ($) {
+
+$.fn.autocomplete = function(settings) 
+{
+	return this.each( function()//do it for each matched element
+	{
+		var textInput = $(this);
+		textInput.attr("name", textInput.attr("name") + "_text");
+		
+		//create a new hidden input that will be used for holding the return value when posting the form, then swap names with the original input
+		var hiddenInput = $('<input type=hidden name="' + textInput.attr("name") + '"/>');
+		hiddenInput.val( textInput.val() );
+		textInput.after(hiddenInput);
+		
+		var valueInput = $(this).next();
+		//create the ul that will hold the text and values
+		valueInput.after('<ul class="autocomplete"></ul>');
+		var list = valueInput.next();
+		
+		var oldText = '';
+		var typingTimeout;
+		var size = 0;
+		var selected = -1;
+
+		settings = $.extend(//provide default settings
+		{
+			minChars : 1,
+			timeout: 1000,
+			after : null,
+			before : null,
+			validSelection : true,
+			url : this.dataset.url,
+			parameters : {'inputName' : valueInput.attr('name'), 'inputId' : textInput.attr('id')}
+		} , settings);
+
+		function getData(text)
+		{
+			window.clearInterval(typingTimeout);
+			if (text != oldText && (settings.minChars != null && text.length >= settings.minChars))
+			{
+				clear();
+				if (settings.before == "function") 
+				{
+					settings.before(textInput,text);
+				}
+				textInput.addClass('autocomplete-loading');
+				settings.parameters.text = text;
+				
+				$.getJSON(settings.url, settings.parameters, function(data)
+				{
+					var items = '';
+					if (data)
+					{
+						size = 0;
+
+						  for ( key in data )//get key => value
+						  {	
+								items += '<li value="' + key + '">' + data[key].replace(new RegExp("(" + text + ")","i"),"<strong>$1</strong>") + '</li>';
+								size++;
+						  }
+						
+						list.css({/*top: textInput.offset().top + textInput.outerHeight(), left: textInput.offset().left,*/ width: Math.max(100, textInput.outerWidth())}).html(items);
+						//on mouse hover over elements set selected class and on click set the selected value and close list
+						list.show().children().
+						hover(function() { $(this).addClass("selected").siblings().removeClass("selected");}, function() { $(this).removeClass("selected") } ).
+						  click(function () { value = $(this).attr('value'); text = $(this).text();valueInput.val( value ); textInput.val( text ); textInput.trigger("autocomplete.change", [ value, text ]);clear(); });
+
+						if (settings.after == "function") 
+						{
+							settings.after(textInput,text);
+						}
+						
+					}
+					textInput.removeClass('autocomplete-loading');
+				});
+				oldText = text;
+			}
+		}
+		
+		function clear()
+		{
+			list.hide();
+			size = 0;
+			selected = -1;
+		}	
+		
+		textInput.keydown(function(e) 
+		{
+			window.clearInterval(typingTimeout);
+			if(e.which == 27)//escape
+			{
+				clear();
+			} else if (e.which == 46 || e.which == 8)//delete and backspace
+			{
+				clear();
+				//invalidate previous selection
+				if (settings.validSelection) valueInput.val('');
+			}
+			else if(e.which == 13)//enter 
+			{ 
+				if ( list.css("display") == "none")//if the list is not visible then make a new request, otherwise hide the list
+				{ 
+					getData(textInput.val());
+				} else
+				{
+					clear();
+				}
+				e.preventDefault();
+				return false;
+			}
+			else if(e.which == 40 || e.which == 9 || e.which == 38)//move up, down 
+			{
+			  switch(e.which) 
+			  {
+				case 40: //down
+				case 9:
+				  selected = (selected >= size - 1) ? 0 : selected + 1; break;
+				case 38://up
+				  selected = (selected < 0) ? size -1 : selected - 1; break;
+				default: break;
+			  }
+			  //set selected item and input values
+			  textInput.val( list.children().removeClass('selected').eq(selected).addClass('selected').text() );	        
+			  valueInput.val( list.children().eq(selected).attr('value') );
+			} else 
+			{ 
+				//invalidate previous selection
+				if (settings.validSelection) valueInput.val('');
+				typingTimeout = window.setTimeout(function() { getData(textInput.val()) },settings.timeout);
+			}
+		});
+	});
+};
+
+$.autocompleteList = function(el, settings) 
+{
+		var autocomplete = $(el).autocomplete(settings);
+		
+		var list = $('<div class="autocomplete-list card border-top-0"></div>');
+		
+		var autocomplete_hidden = autocomplete.next();
+		
+		var name =  autocomplete_hidden.attr("name");
+		
+		autocomplete_hidden.next().after(list);
+		var autocomplete_list_hidden = $('<input type=hidden name="' + name + '_list"  value="' + autocomplete_hidden.val() + '"/>');
+		
+		list.after(autocomplete_list_hidden);
+
+		function addItem(value, text)
+		{
+			list.append($('<div class=""><button type="button" class="remove-btn close text-muted" aria-label="Close"><div aria-hidden="true">&times;</div></button><span>' + text + '</span>\
+				<input name="list[]" value="' + value + '" type="hidden">\
+			 </div>'));
+			 autocomplete.val("");
+		};
+	
+		function setList()
+		{
+			values = {};
+			$('input[name="list[]"]', list).each(function(i, el)
+			{
+				values[this.value] = $("span", this.parentNode).text();
+			});
+
+			autocomplete_list_hidden.val( JSON.stringify(values) );
+		};
+
+		
+		function setValue(value) { 
+			if (value == "" || value == undefined) return false;
+//			value = decodeURIComponent(value);
+			values = JSON.parse(value);
+			
+			for (key in values)
+			{
+				addItem(key, values[key]);
+			}
+			
+			setList();
+		};
+
+		autocomplete.on("autocomplete.change", function(event, value, text) { 
+				var autolist = $(this).data("autocompleteList");
+
+				autolist.addItem(value, text);
+				autolist.setList();
+				autolist.trigger("autocompletelist.change", [ JSON.stringify(values) ]);
+		 });
+
+		list.on("click", ".remove-btn", function (event, value, text) 
+		{
+			this.parentNode.remove();
+			setList();
+			autocomplete.trigger("autocompletelist.change", [ JSON.stringify(values) ]);
+
+			event.preventDefault();
+			return false;
+		});		 
+
+		autocomplete.setValue = setValue;
+		autocomplete.addItem = addItem;
+		autocomplete.setList = setList;
+
+		$.data(el, "autocompleteList", autocomplete);
+		
+		return autocomplete;
+}
+
+$.fn.autocompleteList = function(options) 
+{
+	return this.each( function()
+	{
+		$.autocompleteList(this, options);
+	});
+};
+
+$.tagsInput = function(el, settings) 
+{
+		var autocomplete = $(el).autocomplete(settings);
+		
+		var list = autocomplete.parent();//$('<div class="form-control autocomplete-list" style="min-height: 100px;height: 100px; overflow: auto;"></div>');
+		
+		var autocomplete_hidden = autocomplete.next();
+		
+		var name =  autocomplete_hidden.attr("name");
+		
+		autocomplete_hidden.next();//.after(list);
+		var autocomplete_list_hidden = $('<input type=hidden name="' + name + '_list" value="' + autocomplete_hidden.val() + '"/>');
+		
+		list.append(autocomplete_list_hidden);
+
+		function addItem(value, text)
+		{
+			autocomplete.before($('<div class="badge border m-1"><a href="#" class="btn-link"><i class="la la-close"></i></a> <span>' + text + '</span>\
+				<input name="list[]" value="' + value + '" type="hidden">\
+			 </div>'));
+			 autocomplete.val("");
+		};
+	
+		function setList()
+		{
+			var values = {};
+			//console.log($('input[name="list[]"]', list).serialize());
+			$('input[name="list[]"]', list).each(function(i, el)
+			{
+				values[this.value] = $("span", this.parentNode).text();
+			});
+
+			//values = encodeURIComponent(JSON.stringify(values));
+			values = JSON.stringify(values);//.replace('"', '\"');
+			autocomplete_list_hidden.val( values );
+			return values;
+		};
+
+		
+		function setValue(value) { 
+			if (value == "" || value == undefined) return false;
+			values = JSON.parse(value);
+			
+			for (key in values)
+			{
+				addItem(key, values[key]);
+			}
+			
+			setList();
+		};
+
+		autocomplete.on("autocomplete.change", function(event, value, text) { 
+				var autolist = $(this).data("tagsInput");
+
+				autolist.addItem(value, text);
+				var values = autolist.setList();
+				autolist.trigger("tagsinput.change", [ values ]);
+		 });
+
+		list.on("click", ".remove-btn", function (event, value, text) 
+		{
+			this.parentNode.remove();
+			var values = autolist.setList();
+			autocomplete.trigger("tagsinput.change", [ values ]);
+
+			event.preventDefault();
+			return false;
+		});		 
+
+		autocomplete.setValue = setValue;
+		autocomplete.addItem = addItem;
+		autocomplete.setList = setList;
+
+		$.data(el, "tagsInput", autocomplete);
+		
+		return autocomplete;
+}
+
+$.fn.tagsInput = function(options) 
+{
+	return this.each( function()//do it for each matched element
+	{
+		$.tagsInput(this, options);
+	});
+};
+
+})(jQuery);

libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css

@@ -0,0 +1,10 @@
+/*!
+ * Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
+ * @package bootstrap-colorpicker
+ * @version v3.3.0
+ * @license MIT
+ * @link https://itsjavi.com/bootstrap-colorpicker/
+ * @link https://github.com/itsjavi/bootstrap-colorpicker.git
+ */
+.colorpicker{position:relative;display:none;font-size:inherit;color:inherit;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);padding:.75rem .75rem;width:148px;border-radius:4px;-webkit-box-sizing:content-box;box-sizing:content-box}.colorpicker.colorpicker-disabled,.colorpicker.colorpicker-disabled *{cursor:default!important}.colorpicker div{position:relative}.colorpicker-popup{position:absolute;top:100%;left:0;float:left;margin-top:1px;z-index:1060}.colorpicker-popup.colorpicker-bs-popover-content{position:relative;top:auto;left:auto;float:none;margin:0;z-index:initial;border:none;padding:.25rem 0;border-radius:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.colorpicker:after,.colorpicker:before{content:"";display:table;clear:both;line-height:0}.colorpicker-clear{clear:both;display:block}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:auto;right:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:auto;right:7px}.colorpicker.colorpicker-with-alpha{width:170px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-saturation{position:relative;width:126px;height:126px;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(black)),-webkit-gradient(linear,left top,right top,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);cursor:crosshair;float:left;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);margin-bottom:6px}.colorpicker-saturation .colorpicker-guide{display:block;height:6px;width:6px;border-radius:6px;border:1px solid #000;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(255,255,255,.8);position:absolute;top:0;left:0;margin:-3px 0 0 -3px}.colorpicker-alpha,.colorpicker-hue{position:relative;width:16px;height:126px;float:left;cursor:row-resize;margin-left:6px;margin-bottom:6px}.colorpicker-alpha-color{position:absolute;top:0;left:0;width:100%;height:100%}.colorpicker-alpha-color,.colorpicker-hue{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.colorpicker-alpha .colorpicker-guide,.colorpicker-hue .colorpicker-guide{display:block;height:4px;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.4);position:absolute;top:0;left:0;margin-left:-2px;margin-top:-2px;right:-2px;z-index:1}.colorpicker-hue{background:-webkit-gradient(linear,left bottom,left top,from(red),color-stop(8%,#ff8000),color-stop(17%,#ff0),color-stop(25%,#80ff00),color-stop(33%,#0f0),color-stop(42%,#00ff80),color-stop(50%,#0ff),color-stop(58%,#0080ff),color-stop(67%,#00f),color-stop(75%,#8000ff),color-stop(83%,#ff00ff),color-stop(92%,#ff0080),to(red));background:linear-gradient(to top,red 0,#ff8000 8%,#ff0 17%,#80ff00 25%,#0f0 33%,#00ff80 42%,#0ff 50%,#0080ff 58%,#00f 67%,#8000ff 75%,#ff00ff 83%,#ff0080 92%,red 100%)}.colorpicker-alpha{background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px;display:none}.colorpicker-bar{min-height:16px;margin:6px 0 0 0;clear:both;text-align:center;font-size:10px;line-height:normal;max-width:100%;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.colorpicker-bar:before{content:"";display:table;clear:both}.colorpicker-bar.colorpicker-bar-horizontal{height:126px;width:16px;margin:0 0 6px 0;float:left}.colorpicker-input-addon{position:relative}.colorpicker-input-addon i{display:inline-block;cursor:pointer;vertical-align:text-top;height:16px;width:16px;position:relative}.colorpicker-input-addon:before{content:"";position:absolute;width:16px;height:16px;display:inline-block;vertical-align:text-top;background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto;vertical-align:text-bottom}.colorpicker.colorpicker-horizontal{width:126px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-bar{width:126px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{float:none;margin-bottom:0}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{float:none;width:126px;height:16px;cursor:col-resize;margin-left:0;margin-top:6px;margin-bottom:0}.colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide,.colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide{position:absolute;display:block;bottom:-2px;left:0;right:auto;height:auto;width:4px}.colorpicker.colorpicker-horizontal .colorpicker-hue{background:-webkit-gradient(linear,right top,left top,from(red),color-stop(8%,#ff8000),color-stop(17%,#ff0),color-stop(25%,#80ff00),color-stop(33%,#0f0),color-stop(42%,#00ff80),color-stop(50%,#0ff),color-stop(58%,#0080ff),color-stop(67%,#00f),color-stop(75%,#8000ff),color-stop(83%,#ff00ff),color-stop(92%,#ff0080),to(red));background:linear-gradient(to left,red 0,#ff8000 8%,#ff0 17%,#80ff00 25%,#0f0 33%,#00ff80 42%,#0ff 50%,#0080ff 58%,#00f 67%,#8000ff 75%,#ff00ff 83%,#ff0080 92%,red 100%)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker-inline:before,.colorpicker-no-arrow:before,.colorpicker-popup.colorpicker-bs-popover-content:before{content:none;display:none}.colorpicker-inline:after,.colorpicker-no-arrow:after,.colorpicker-popup.colorpicker-bs-popover-content:after{content:none;display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker-alpha.colorpicker-visible,.colorpicker-bar.colorpicker-visible,.colorpicker-hue.colorpicker-visible,.colorpicker-saturation.colorpicker-visible,.colorpicker.colorpicker-visible{display:block}.colorpicker-alpha.colorpicker-hidden,.colorpicker-bar.colorpicker-hidden,.colorpicker-hue.colorpicker-hidden,.colorpicker-saturation.colorpicker-hidden,.colorpicker.colorpicker-hidden{display:none}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker.colorpicker-disabled:after{border:none;content:'';display:block;width:100%;height:100%;background:rgba(233,236,239,.33);top:0;left:0;right:auto;z-index:2;position:absolute}.colorpicker.colorpicker-disabled .colorpicker-guide{display:none}.colorpicker-preview{background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker-preview>div{position:absolute;left:0;top:0;width:100%;height:100%}.colorpicker-bar.colorpicker-swatches{-webkit-box-shadow:none;box-shadow:none;height:auto}.colorpicker-swatches--inner{clear:both;margin-top:-6px}.colorpicker-swatch{position:relative;cursor:pointer;float:left;height:16px;width:16px;margin-right:6px;margin-top:6px;margin-left:0;display:block;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker-swatch--inner{position:absolute;top:0;left:0;width:100%;height:100%}.colorpicker-swatch:nth-of-type(7n+0){margin-right:0}.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0){margin-right:6px}.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0){margin-right:0}.colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0){margin-right:0}.colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0){margin-right:6px}.colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0){margin-right:6px}.colorpicker-swatch:last-of-type:after{content:"";display:table;clear:both}.colorpicker-element input[dir=rtl],.colorpicker-element[dir=rtl] input,[dir=rtl] .colorpicker-element input{direction:ltr;text-align:right}
+/*# sourceMappingURL=bootstrap-colorpicker.min.css.map */

libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["bootstrap-colorpicker.css","bootstrap-colorpicker.css"],"names":[],"mappings":"AAiDA,aACE,SAAA,SACA,QAAA,KACA,UAAA,QACA,MAAA,QACA,WAAA,KACA,WAAA,KACA,iBAAA,KACA,gBAAA,YACA,OAAA,IAAA,MAAA,eAEA,QAAA,OAAA,OACA,MAAA,MACA,cAAA,IACA,mBAAA,YAAA,WAAA,YAGF,kCCjDA,oCDmDE,OAAA,kBAGF,iBACE,SAAA,SAGF,mBACE,SAAA,SACA,IAAA,KACA,KAAA,EACA,MAAA,KACA,WAAA,IACA,QAAA,KAGF,kDACE,SAAA,SACA,IAAA,KACA,KAAA,KACA,MAAA,KACA,OAAA,EACA,QAAA,QACA,OAAA,KACA,QAAA,OAAA,EACA,cAAA,EACA,WAAA,IACA,mBAAA,KAAA,WAAA,KCjDF,mBDoDA,oBAEE,QAAA,GACA,QAAA,MACA,MAAA,KACA,YAAA,EAGF,mBACE,MAAA,KACA,QAAA,MAGF,oBACE,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,oBAAA,eACA,SAAA,SACA,IAAA,KACA,KAAA,KACA,MAAA,IAGF,mBACE,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,KACA,KAAA,KACA,MAAA,IAGF,oCACE,MAAA,MAGF,uDACE,QAAA,MAGF,wBACE,SAAA,SACA,MAAA,MACA,OAAA,MAzHA,WAAA,2EAAA,CAAA,gFAAA,WAAA,oDAAA,CAAA,0DA2HA,OAAA,UACA,MAAA,KACA,mBAAA,EAAA,EAAA,EAAA,IAAA,eAAA,WAAA,EAAA,EAAA,EAAA,IAAA,eACA,cAAA,IARF,2CAWI,QAAA,MACA,OAAA,IACA,MAAA,IACA,cAAA,IACA,OAAA,IAAA,MAAA,KACA,mBAAA,EAAA,EAAA,EAAA,IAAA,qBAAA,WAAA,EAAA,EAAA,EAAA,IAAA,qBACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,OAAA,KAAA,EAAA,EAAA,KChDJ,mBDoDA,iBAEE,SAAA,SACA,MAAA,KACA,OAAA,MACA,MAAA,KACA,OAAA,WACA,YAAA,IACA,cAAA,IAGF,yBACE,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,KACA,OAAA,KCnDF,yBDsDA,iBAEE,mBAAA,EAAA,EAAA,EAAA,IAAA,eAAA,WAAA,EAAA,EAAA,EAAA,IAAA,eCnDF,sCDsDA,oCAEE,QAAA,MACA,OAAA,IACA,WAAA,qBACA,OAAA,IAAA,MAAA,eACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,YAAA,KACA,WAAA,KACA,MAAA,KACA,QAAA,EAGF,iBAjKE,WAAA,2TAAA,WAAA,8JAqKF,mBA3ME,WAAA,iHAAA,CAAA,iHAAA,CAAA,KAGA,gBAAA,KAAA,KACA,oBAAA,EAAA,CAAA,CAAA,IAAA,IAyMA,QAAA,KAGF,iBACE,WAAA,KACA,OAAA,IAAA,EAAA,EAAA,EACA,MAAA,KACA,WAAA,OACA,UAAA,KACA,YAAA,OACA,UAAA,KACA,mBAAA,EAAA,EAAA,EAAA,IAAA,eAAA,WAAA,EAAA,EAAA,EAAA,IAAA,eARF,wBAWI,QAAA,GACA,QAAA,MACA,MAAA,KAIJ,4CACE,OAAA,MACA,MAAA,KACA,OAAA,EAAA,EAAA,IAAA,EACA,MAAA,KAGF,yBACE,SAAA,SAGF,2BACE,QAAA,aACA,OAAA,QACA,eAAA,SACA,OAAA,KACA,MAAA,KACA,SAAA,SAGF,gCACE,QAAA,GACA,SAAA,SACA,MAAA,KACA,OAAA,KACA,QAAA,aACA,eAAA,SA3PA,WAAA,iHAAA,CAAA,iHAAA,CAAA,KAGA,gBAAA,KAAA,KACA,oBAAA,EAAA,CAAA,CAAA,IAAA,IA2PF,gCACE,SAAA,SACA,QAAA,aACA,MAAA,KACA,QAAA,KACA,eAAA,YAGF,oCACE,MAAA,MACA,OAAA,KAGF,qDACE,MAAA,MAGF,4DACE,MAAA,KACA,cAAA,ECrDF,uDDwDA,qDAEE,MAAA,KACA,MAAA,MACA,OAAA,KACA,OAAA,WACA,YAAA,EACA,WAAA,IACA,cAAA,ECtDF,0EDyDA,wEAEE,SAAA,SACA,QAAA,MACA,OAAA,KACA,KAAA,EACA,MAAA,KACA,OAAA,KACA,MAAA,IAGF,qDA/QE,WAAA,yTAAA,WAAA,+JAmRF,uDA/SE,WAAA,iHAAA,CAAA,iHAAA,CAAA,KAGA,gBAAA,KAAA,KACA,oBAAA,EAAA,CAAA,CAAA,IAAA,IA+SF,2BCnDA,6BACA,yDDqDE,QAAA,KACA,QAAA,KAGF,0BCpDA,4BACA,wDDsDE,QAAA,KACA,QAAA,KAIF,mBCrDA,iBADA,wBDyDE,oBAAA,KAAA,iBAAA,KAAA,gBAAA,KAAA,YAAA,KCjDF,uCAGA,qCADA,qCADA,4CDmDA,iCAMI,QAAA,MCnDJ,sCAGA,oCADA,oCADA,2CDsDA,gCAMI,QAAA,KAIJ,wCACE,QAAA,aAGF,wCACE,OAAA,KACA,QAAA,GACA,QAAA,MACA,MAAA,KACA,OAAA,KACA,WAAA,sBACA,IAAA,EACA,KAAA,EACA,MAAA,KACA,QAAA,EACA,SAAA,SAGF,qDACE,QAAA,KAKF,qBApXE,WAAA,iHAAA,CAAA,iHAAA,CAAA,KAGA,gBAAA,KAAA,KACA,oBAAA,EAAA,CAAA,CAAA,IAAA,IAoXF,yBACE,SAAA,SACA,KAAA,EACA,IAAA,EACA,MAAA,KACA,OAAA,KAGF,sCACE,mBAAA,KAAA,WAAA,KACA,OAAA,KAGF,6BACE,MAAA,KACA,WAAA,KAGF,oBACE,SAAA,SACA,OAAA,QACA,MAAA,KACA,OAAA,KACA,MAAA,KACA,aAAA,IACA,WAAA,IACA,YAAA,EACA,QAAA,MACA,mBAAA,EAAA,EAAA,EAAA,IAAA,eAAA,WAAA,EAAA,EAAA,EAAA,IAAA,eApZA,WAAA,iHAAA,CAAA,iHAAA,CAAA,KAGA,gBAAA,KAAA,KACA,oBAAA,EAAA,CAAA,CAAA,IAAA,IAoZF,2BACE,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,KACA,OAAA,KAIF,sCACE,aAAA,EAIF,8DAEI,aAAA,IAFJ,8DAMI,aAAA,EAKJ,8DAEI,aAAA,EAFJ,8DAMI,aAAA,IANJ,8DAUI,aAAA,IAIJ,uCACE,QAAA,GACA,QAAA,MACA,MAAA,KCxEF,oCADA,oCD6EA,qCAGE,UAAA,IACA,WAAA","file":"bootstrap-colorpicker.min.css","sourcesContent":[".colorpicker {\n  position: relative;\n  display: none;\n  font-size: inherit;\n  color: inherit;\n  text-align: left;\n  list-style: none;\n  background-color: #ffffff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  padding: .75rem .75rem;\n  width: 148px;\n  border-radius: 4px;\n  -webkit-box-sizing: content-box;\n          box-sizing: content-box; }\n\n.colorpicker.colorpicker-disabled,\n.colorpicker.colorpicker-disabled * {\n  cursor: default !important; }\n\n.colorpicker div {\n  position: relative; }\n\n.colorpicker-popup {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  float: left;\n  margin-top: 1px;\n  z-index: 1060; }\n\n.colorpicker-popup.colorpicker-bs-popover-content {\n  position: relative;\n  top: auto;\n  left: auto;\n  float: none;\n  margin: 0;\n  z-index: initial;\n  border: none;\n  padding: 0.25rem 0;\n  border-radius: 0;\n  background: none;\n  -webkit-box-shadow: none;\n          box-shadow: none; }\n\n.colorpicker:before,\n.colorpicker:after {\n  content: \"\";\n  display: table;\n  clear: both;\n  line-height: 0; }\n\n.colorpicker-clear {\n  clear: both;\n  display: block; }\n\n.colorpicker:before {\n  content: '';\n  display: inline-block;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 7px solid #ccc;\n  border-bottom-color: rgba(0, 0, 0, 0.2);\n  position: absolute;\n  top: -7px;\n  left: auto;\n  right: 6px; }\n\n.colorpicker:after {\n  content: '';\n  display: inline-block;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #ffffff;\n  position: absolute;\n  top: -6px;\n  left: auto;\n  right: 7px; }\n\n.colorpicker.colorpicker-with-alpha {\n  width: 170px; }\n\n.colorpicker.colorpicker-with-alpha .colorpicker-alpha {\n  display: block; }\n\n.colorpicker-saturation {\n  position: relative;\n  width: 126px;\n  height: 126px;\n  /* FF3.6+ */\n  /* Chrome,Safari4+ */\n  /* Chrome10+,Safari5.1+ */\n  /* Opera 11.10+ */\n  /* IE10+ */\n  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%), linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);\n  /* W3C */\n  cursor: crosshair;\n  float: left;\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n  margin-bottom: 6px; }\n  .colorpicker-saturation .colorpicker-guide {\n    display: block;\n    height: 6px;\n    width: 6px;\n    border-radius: 6px;\n    border: 1px solid #000;\n    -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: -3px 0 0 -3px; }\n\n.colorpicker-hue,\n.colorpicker-alpha {\n  position: relative;\n  width: 16px;\n  height: 126px;\n  float: left;\n  cursor: row-resize;\n  margin-left: 6px;\n  margin-bottom: 6px; }\n\n.colorpicker-alpha-color {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%; }\n\n.colorpicker-hue,\n.colorpicker-alpha-color {\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }\n\n.colorpicker-hue .colorpicker-guide,\n.colorpicker-alpha .colorpicker-guide {\n  display: block;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.8);\n  border: 1px solid rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin-left: -2px;\n  margin-top: -2px;\n  right: -2px;\n  z-index: 1; }\n\n.colorpicker-hue {\n  /* FF3.6+ */\n  /* Chrome,Safari4+ */\n  /* Chrome10+,Safari5.1+ */\n  /* Opera 11.10+ */\n  /* IE10+ */\n  background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red));\n  background: linear-gradient(to top, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%);\n  /* W3C */ }\n\n.colorpicker-alpha {\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px;\n  display: none; }\n\n.colorpicker-bar {\n  min-height: 16px;\n  margin: 6px 0 0 0;\n  clear: both;\n  text-align: center;\n  font-size: 10px;\n  line-height: normal;\n  max-width: 100%;\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }\n  .colorpicker-bar:before {\n    content: \"\";\n    display: table;\n    clear: both; }\n\n.colorpicker-bar.colorpicker-bar-horizontal {\n  height: 126px;\n  width: 16px;\n  margin: 0 0 6px 0;\n  float: left; }\n\n.colorpicker-input-addon {\n  position: relative; }\n\n.colorpicker-input-addon i {\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: text-top;\n  height: 16px;\n  width: 16px;\n  position: relative; }\n\n.colorpicker-input-addon:before {\n  content: \"\";\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  vertical-align: text-top;\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker.colorpicker-inline {\n  position: relative;\n  display: inline-block;\n  float: none;\n  z-index: auto;\n  vertical-align: text-bottom; }\n\n.colorpicker.colorpicker-horizontal {\n  width: 126px;\n  height: auto; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-bar {\n  width: 126px; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-saturation {\n  float: none;\n  margin-bottom: 0; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n  float: none;\n  width: 126px;\n  height: 16px;\n  cursor: col-resize;\n  margin-left: 0;\n  margin-top: 6px;\n  margin-bottom: 0; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide {\n  position: absolute;\n  display: block;\n  bottom: -2px;\n  left: 0;\n  right: auto;\n  height: auto;\n  width: 4px; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue {\n  /* FF3.6+ */\n  /* Chrome,Safari4+ */\n  /* Chrome10+,Safari5.1+ */\n  /* Opera 11.10+ */\n  /* IE10+ */\n  background: -webkit-gradient(linear, right top, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red));\n  background: linear-gradient(to left, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%);\n  /* W3C */ }\n\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker-inline:before,\n.colorpicker-no-arrow:before,\n.colorpicker-popup.colorpicker-bs-popover-content:before {\n  content: none;\n  display: none; }\n\n.colorpicker-inline:after,\n.colorpicker-no-arrow:after,\n.colorpicker-popup.colorpicker-bs-popover-content:after {\n  content: none;\n  display: none; }\n\n.colorpicker-alpha,\n.colorpicker-saturation,\n.colorpicker-hue {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n\n.colorpicker.colorpicker-visible,\n.colorpicker-alpha.colorpicker-visible,\n.colorpicker-saturation.colorpicker-visible,\n.colorpicker-hue.colorpicker-visible,\n.colorpicker-bar.colorpicker-visible {\n  display: block; }\n\n.colorpicker.colorpicker-hidden,\n.colorpicker-alpha.colorpicker-hidden,\n.colorpicker-saturation.colorpicker-hidden,\n.colorpicker-hue.colorpicker-hidden,\n.colorpicker-bar.colorpicker-hidden {\n  display: none; }\n\n.colorpicker-inline.colorpicker-visible {\n  display: inline-block; }\n\n.colorpicker.colorpicker-disabled:after {\n  border: none;\n  content: '';\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: rgba(233, 236, 239, 0.33);\n  top: 0;\n  left: 0;\n  right: auto;\n  z-index: 2;\n  position: absolute; }\n\n.colorpicker.colorpicker-disabled .colorpicker-guide {\n  display: none; }\n\n/** EXTENSIONS **/\n.colorpicker-preview {\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker-preview > div {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%; }\n\n.colorpicker-bar.colorpicker-swatches {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  height: auto; }\n\n.colorpicker-swatches--inner {\n  clear: both;\n  margin-top: -6px; }\n\n.colorpicker-swatch {\n  position: relative;\n  cursor: pointer;\n  float: left;\n  height: 16px;\n  width: 16px;\n  margin-right: 6px;\n  margin-top: 6px;\n  margin-left: 0;\n  display: block;\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker-swatch--inner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%; }\n\n.colorpicker-swatch:nth-of-type(7n+0) {\n  margin-right: 0; }\n\n.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0) {\n  margin-right: 6px; }\n\n.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0) {\n  margin-right: 0; }\n\n.colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0) {\n  margin-right: 0; }\n\n.colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0) {\n  margin-right: 6px; }\n\n.colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0) {\n  margin-right: 6px; }\n\n.colorpicker-swatch:last-of-type:after {\n  content: \"\";\n  display: table;\n  clear: both; }\n\n*[dir='rtl'] .colorpicker-element input,\n.colorpicker-element[dir='rtl'] input,\n.colorpicker-element input[dir='rtl'] {\n  direction: ltr;\n  text-align: right; }\n\n/*# sourceMappingURL=bootstrap-colorpicker.css.map */\n",".colorpicker {\n  position: relative;\n  display: none;\n  font-size: inherit;\n  color: inherit;\n  text-align: left;\n  list-style: none;\n  background-color: #ffffff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  padding: .75rem .75rem;\n  width: 148px;\n  border-radius: 4px;\n  -webkit-box-sizing: content-box;\n          box-sizing: content-box; }\n\n.colorpicker.colorpicker-disabled,\n.colorpicker.colorpicker-disabled * {\n  cursor: default !important; }\n\n.colorpicker div {\n  position: relative; }\n\n.colorpicker-popup {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  float: left;\n  margin-top: 1px;\n  z-index: 1060; }\n\n.colorpicker-popup.colorpicker-bs-popover-content {\n  position: relative;\n  top: auto;\n  left: auto;\n  float: none;\n  margin: 0;\n  z-index: initial;\n  border: none;\n  padding: 0.25rem 0;\n  border-radius: 0;\n  background: none;\n  -webkit-box-shadow: none;\n          box-shadow: none; }\n\n.colorpicker:before,\n.colorpicker:after {\n  content: \"\";\n  display: table;\n  clear: both;\n  line-height: 0; }\n\n.colorpicker-clear {\n  clear: both;\n  display: block; }\n\n.colorpicker:before {\n  content: '';\n  display: inline-block;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 7px solid #ccc;\n  border-bottom-color: rgba(0, 0, 0, 0.2);\n  position: absolute;\n  top: -7px;\n  left: auto;\n  right: 6px; }\n\n.colorpicker:after {\n  content: '';\n  display: inline-block;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #ffffff;\n  position: absolute;\n  top: -6px;\n  left: auto;\n  right: 7px; }\n\n.colorpicker.colorpicker-with-alpha {\n  width: 170px; }\n\n.colorpicker.colorpicker-with-alpha .colorpicker-alpha {\n  display: block; }\n\n.colorpicker-saturation {\n  position: relative;\n  width: 126px;\n  height: 126px;\n  /* FF3.6+ */\n  /* Chrome,Safari4+ */\n  /* Chrome10+,Safari5.1+ */\n  /* Opera 11.10+ */\n  /* IE10+ */\n  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%), linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);\n  /* W3C */\n  cursor: crosshair;\n  float: left;\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n  margin-bottom: 6px; }\n  .colorpicker-saturation .colorpicker-guide {\n    display: block;\n    height: 6px;\n    width: 6px;\n    border-radius: 6px;\n    border: 1px solid #000;\n    -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: -3px 0 0 -3px; }\n\n.colorpicker-hue,\n.colorpicker-alpha {\n  position: relative;\n  width: 16px;\n  height: 126px;\n  float: left;\n  cursor: row-resize;\n  margin-left: 6px;\n  margin-bottom: 6px; }\n\n.colorpicker-alpha-color {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%; }\n\n.colorpicker-hue,\n.colorpicker-alpha-color {\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }\n\n.colorpicker-hue .colorpicker-guide,\n.colorpicker-alpha .colorpicker-guide {\n  display: block;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.8);\n  border: 1px solid rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin-left: -2px;\n  margin-top: -2px;\n  right: -2px;\n  z-index: 1; }\n\n.colorpicker-hue {\n  /* FF3.6+ */\n  /* Chrome,Safari4+ */\n  /* Chrome10+,Safari5.1+ */\n  /* Opera 11.10+ */\n  /* IE10+ */\n  background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red));\n  background: linear-gradient(to top, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%);\n  /* W3C */ }\n\n.colorpicker-alpha {\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px;\n  display: none; }\n\n.colorpicker-bar {\n  min-height: 16px;\n  margin: 6px 0 0 0;\n  clear: both;\n  text-align: center;\n  font-size: 10px;\n  line-height: normal;\n  max-width: 100%;\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }\n  .colorpicker-bar:before {\n    content: \"\";\n    display: table;\n    clear: both; }\n\n.colorpicker-bar.colorpicker-bar-horizontal {\n  height: 126px;\n  width: 16px;\n  margin: 0 0 6px 0;\n  float: left; }\n\n.colorpicker-input-addon {\n  position: relative; }\n\n.colorpicker-input-addon i {\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: text-top;\n  height: 16px;\n  width: 16px;\n  position: relative; }\n\n.colorpicker-input-addon:before {\n  content: \"\";\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  vertical-align: text-top;\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker.colorpicker-inline {\n  position: relative;\n  display: inline-block;\n  float: none;\n  z-index: auto;\n  vertical-align: text-bottom; }\n\n.colorpicker.colorpicker-horizontal {\n  width: 126px;\n  height: auto; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-bar {\n  width: 126px; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-saturation {\n  float: none;\n  margin-bottom: 0; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n  float: none;\n  width: 126px;\n  height: 16px;\n  cursor: col-resize;\n  margin-left: 0;\n  margin-top: 6px;\n  margin-bottom: 0; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide {\n  position: absolute;\n  display: block;\n  bottom: -2px;\n  left: 0;\n  right: auto;\n  height: auto;\n  width: 4px; }\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue {\n  /* FF3.6+ */\n  /* Chrome,Safari4+ */\n  /* Chrome10+,Safari5.1+ */\n  /* Opera 11.10+ */\n  /* IE10+ */\n  background: -webkit-gradient(linear, right top, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red));\n  background: linear-gradient(to left, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%);\n  /* W3C */ }\n\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker-inline:before,\n.colorpicker-no-arrow:before,\n.colorpicker-popup.colorpicker-bs-popover-content:before {\n  content: none;\n  display: none; }\n\n.colorpicker-inline:after,\n.colorpicker-no-arrow:after,\n.colorpicker-popup.colorpicker-bs-popover-content:after {\n  content: none;\n  display: none; }\n\n.colorpicker-alpha,\n.colorpicker-saturation,\n.colorpicker-hue {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none; }\n\n.colorpicker.colorpicker-visible,\n.colorpicker-alpha.colorpicker-visible,\n.colorpicker-saturation.colorpicker-visible,\n.colorpicker-hue.colorpicker-visible,\n.colorpicker-bar.colorpicker-visible {\n  display: block; }\n\n.colorpicker.colorpicker-hidden,\n.colorpicker-alpha.colorpicker-hidden,\n.colorpicker-saturation.colorpicker-hidden,\n.colorpicker-hue.colorpicker-hidden,\n.colorpicker-bar.colorpicker-hidden {\n  display: none; }\n\n.colorpicker-inline.colorpicker-visible {\n  display: inline-block; }\n\n.colorpicker.colorpicker-disabled:after {\n  border: none;\n  content: '';\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: rgba(233, 236, 239, 0.33);\n  top: 0;\n  left: 0;\n  right: auto;\n  z-index: 2;\n  position: absolute; }\n\n.colorpicker.colorpicker-disabled .colorpicker-guide {\n  display: none; }\n\n/** EXTENSIONS **/\n.colorpicker-preview {\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker-preview > div {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%; }\n\n.colorpicker-bar.colorpicker-swatches {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  height: auto; }\n\n.colorpicker-swatches--inner {\n  clear: both;\n  margin-top: -6px; }\n\n.colorpicker-swatch {\n  position: relative;\n  cursor: pointer;\n  float: left;\n  height: 16px;\n  width: 16px;\n  margin-right: 6px;\n  margin-top: 6px;\n  margin-left: 0;\n  display: block;\n  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);\n  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px; }\n\n.colorpicker-swatch--inner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%; }\n\n.colorpicker-swatch:nth-of-type(7n+0) {\n  margin-right: 0; }\n\n.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0) {\n  margin-right: 6px; }\n\n.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0) {\n  margin-right: 0; }\n\n.colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0) {\n  margin-right: 0; }\n\n.colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0) {\n  margin-right: 6px; }\n\n.colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0) {\n  margin-right: 6px; }\n\n.colorpicker-swatch:last-of-type:after {\n  content: \"\";\n  display: table;\n  clear: both; }\n\n*[dir='rtl'] .colorpicker-element input,\n.colorpicker-element[dir='rtl'] input,\n.colorpicker-element input[dir='rtl'] {\n  direction: ltr;\n  text-align: right; }\n\n/*# sourceMappingURL=bootstrap-colorpicker.css.map */\n"]}

libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js

@@ -0,0 +1,10 @@
+/*!
+ * Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
+ * @package bootstrap-colorpicker
+ * @version v3.3.0
+ * @license MIT
+ * @link https://itsjavi.com/bootstrap-colorpicker/
+ * @link https://github.com/itsjavi/bootstrap-colorpicker.git
+ */
+(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory(require("jquery"));else if(typeof define==="function"&&define.amd)define("bootstrap-colorpicker",["jquery"],factory);else if(typeof exports==="object")exports["bootstrap-colorpicker"]=factory(require("jquery"));else root["bootstrap-colorpicker"]=factory(root["jQuery"])})(window,function(__WEBPACK_EXTERNAL_MODULE__0__){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=7)}([function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE__0__},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var Extension=function(){function Extension(colorpicker){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,Extension);this.colorpicker=colorpicker;this.options=options;if(!(this.colorpicker.element&&this.colorpicker.element.length)){throw new Error("Extension: this.colorpicker.element is not valid")}this.colorpicker.element.on("colorpickerCreate.colorpicker-ext",_jquery2.default.proxy(this.onCreate,this));this.colorpicker.element.on("colorpickerDestroy.colorpicker-ext",_jquery2.default.proxy(this.onDestroy,this));this.colorpicker.element.on("colorpickerUpdate.colorpicker-ext",_jquery2.default.proxy(this.onUpdate,this));this.colorpicker.element.on("colorpickerChange.colorpicker-ext",_jquery2.default.proxy(this.onChange,this));this.colorpicker.element.on("colorpickerInvalid.colorpicker-ext",_jquery2.default.proxy(this.onInvalid,this));this.colorpicker.element.on("colorpickerShow.colorpicker-ext",_jquery2.default.proxy(this.onShow,this));this.colorpicker.element.on("colorpickerHide.colorpicker-ext",_jquery2.default.proxy(this.onHide,this));this.colorpicker.element.on("colorpickerEnable.colorpicker-ext",_jquery2.default.proxy(this.onEnable,this));this.colorpicker.element.on("colorpickerDisable.colorpicker-ext",_jquery2.default.proxy(this.onDisable,this))}_createClass(Extension,[{key:"resolveColor",value:function resolveColor(color){var realColor=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;return false}},{key:"onCreate",value:function onCreate(event){}},{key:"onDestroy",value:function onDestroy(event){this.colorpicker.element.off(".colorpicker-ext")}},{key:"onUpdate",value:function onUpdate(event){}},{key:"onChange",value:function onChange(event){}},{key:"onInvalid",value:function onInvalid(event){}},{key:"onHide",value:function onHide(event){}},{key:"onShow",value:function onShow(event){}},{key:"onDisable",value:function onDisable(event){}},{key:"onEnable",value:function onEnable(event){}}]);return Extension}();exports.default=Extension;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ColorItem=exports.HSVAColor=undefined;var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _color=__webpack_require__(16);var _color2=_interopRequireDefault(_color);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var HSVAColor=function(){function HSVAColor(h,s,v,a){_classCallCheck(this,HSVAColor);this.h=isNaN(h)?0:h;this.s=isNaN(s)?0:s;this.v=isNaN(v)?0:v;this.a=isNaN(h)?1:a}_createClass(HSVAColor,[{key:"toString",value:function toString(){return this.h+", "+this.s+"%, "+this.v+"%, "+this.a}}]);return HSVAColor}();var ColorItem=function(){_createClass(ColorItem,[{key:"api",value:function api(fn){for(var _len=arguments.length,args=Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key]}if(arguments.length===0){return this._color}var result=this._color[fn].apply(this._color,args);if(!(result instanceof _color2.default)){return result}return new ColorItem(result,this.format)}},{key:"original",get:function get(){return this._original}}],[{key:"HSVAColor",get:function get(){return HSVAColor}}]);function ColorItem(){var color=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var format=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;var disableHexInputFallback=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;_classCallCheck(this,ColorItem);this.replace(color,format,disableHexInputFallback)}_createClass(ColorItem,[{key:"replace",value:function replace(color){var format=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;var disableHexInputFallback=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;format=ColorItem.sanitizeFormat(format);this._original={color,format,valid:true};this._color=ColorItem.parse(color,disableHexInputFallback);if(this._color===null){this._color=(0,_color2.default)();this._original.valid=false;return}this._format=format?format:ColorItem.isHex(color)?"hex":this._color.model}},{key:"isValid",value:function isValid(){return this._original.valid===true}},{key:"setHueRatio",value:function setHueRatio(h){this.hue=(1-h)*360}},{key:"setSaturationRatio",value:function setSaturationRatio(s){this.saturation=s*100}},{key:"setValueRatio",value:function setValueRatio(v){this.value=(1-v)*100}},{key:"setAlphaRatio",value:function setAlphaRatio(a){this.alpha=1-a}},{key:"isDesaturated",value:function isDesaturated(){return this.saturation===0}},{key:"isTransparent",value:function isTransparent(){return this.alpha===0}},{key:"hasTransparency",value:function hasTransparency(){return this.hasAlpha()&&this.alpha<1}},{key:"hasAlpha",value:function hasAlpha(){return!isNaN(this.alpha)}},{key:"toObject",value:function toObject(){return new HSVAColor(this.hue,this.saturation,this.value,this.alpha)}},{key:"toHsva",value:function toHsva(){return this.toObject()}},{key:"toHsvaRatio",value:function toHsvaRatio(){return new HSVAColor(this.hue/360,this.saturation/100,this.value/100,this.alpha)}},{key:"toString",value:function toString(){return this.string()}},{key:"string",value:function string(){var format=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;format=ColorItem.sanitizeFormat(format?format:this.format);if(!format){return this._color.round().string()}if(this._color[format]===undefined){throw new Error("Unsupported color format: '"+format+"'")}var str=this._color[format]();return str.round?str.round().string():str}},{key:"equals",value:function equals(color){color=color instanceof ColorItem?color:new ColorItem(color);if(!color.isValid()||!this.isValid()){return false}return this.hue===color.hue&&this.saturation===color.saturation&&this.value===color.value&&this.alpha===color.alpha}},{key:"getClone",value:function getClone(){return new ColorItem(this._color,this.format)}},{key:"getCloneHueOnly",value:function getCloneHueOnly(){return new ColorItem([this.hue,100,100,1],this.format)}},{key:"getCloneOpaque",value:function getCloneOpaque(){return new ColorItem(this._color.alpha(1),this.format)}},{key:"toRgbString",value:function toRgbString(){return this.string("rgb")}},{key:"toHexString",value:function toHexString(){return this.string("hex")}},{key:"toHslString",value:function toHslString(){return this.string("hsl")}},{key:"isDark",value:function isDark(){return this._color.isDark()}},{key:"isLight",value:function isLight(){return this._color.isLight()}},{key:"generate",value:function generate(formula){var hues=[];if(Array.isArray(formula)){hues=formula}else if(!ColorItem.colorFormulas.hasOwnProperty(formula)){throw new Error("No color formula found with the name '"+formula+"'.")}else{hues=ColorItem.colorFormulas[formula]}var colors=[],mainColor=this._color,format=this.format;hues.forEach(function(hue){var levels=[hue?(mainColor.hue()+hue)%360:mainColor.hue(),mainColor.saturationv(),mainColor.value(),mainColor.alpha()];colors.push(new ColorItem(levels,format))});return colors}},{key:"hue",get:function get(){return this._color.hue()},set:function set(value){this._color=this._color.hue(value)}},{key:"saturation",get:function get(){return this._color.saturationv()},set:function set(value){this._color=this._color.saturationv(value)}},{key:"value",get:function get(){return this._color.value()},set:function set(value){this._color=this._color.value(value)}},{key:"alpha",get:function get(){var a=this._color.alpha();return isNaN(a)?1:a},set:function set(value){this._color=this._color.alpha(Math.round(value*100)/100)}},{key:"format",get:function get(){return this._format?this._format:this._color.model},set:function set(value){this._format=ColorItem.sanitizeFormat(value)}}],[{key:"parse",value:function parse(color){var disableHexInputFallback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;if(color instanceof _color2.default){return color}if(color instanceof ColorItem){return color._color}var format=null;if(color instanceof HSVAColor){color=[color.h,color.s,color.v,isNaN(color.a)?1:color.a]}else{color=ColorItem.sanitizeString(color)}if(color===null){return null}if(Array.isArray(color)){format="hsv"}if(ColorItem.isHex(color)&&color.length!==6&&color.length!==7&&disableHexInputFallback){return null}try{return(0,_color2.default)(color,format)}catch(e){return null}}},{key:"sanitizeString",value:function sanitizeString(str){if(!(typeof str==="string"||str instanceof String)){return str}if(str.match(/^[0-9a-f]{2,}$/i)){return"#"+str}if(str.toLowerCase()==="transparent"){return"#FFFFFF00"}return str}},{key:"isHex",value:function isHex(str){if(!(typeof str==="string"||str instanceof String)){return false}return!!str.match(/^#?[0-9a-f]{2,}$/i)}},{key:"sanitizeFormat",value:function sanitizeFormat(format){switch(format){case"hex":case"hex3":case"hex4":case"hex6":case"hex8":return"hex";case"rgb":case"rgba":case"keyword":case"name":return"rgb";case"hsl":case"hsla":case"hsv":case"hsva":case"hwb":case"hwba":return"hsl";default:return""}}}]);return ColorItem}();ColorItem.colorFormulas={complementary:[180],triad:[0,120,240],tetrad:[0,90,180,270],splitcomplement:[0,72,216]};exports.default=ColorItem;exports.HSVAColor=HSVAColor;exports.ColorItem=ColorItem},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var sassVars={bar_size_short:16,base_margin:6,columns:6};var sliderSize=sassVars.bar_size_short*sassVars.columns+sassVars.base_margin*(sassVars.columns-1);exports.default={customClass:null,color:false,fallbackColor:false,format:"auto",horizontal:false,inline:false,container:false,popover:{animation:true,placement:"bottom",fallbackPlacement:"flip"},debug:false,input:"input",addon:".colorpicker-input-addon",autoInputFallback:true,autoHexInputFallback:true,useHashPrefix:true,useAlpha:true,template:'<div class="colorpicker">\n      <div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>\n      <div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>\n      <div class="colorpicker-alpha">\n        <div class="colorpicker-alpha-color"></div>\n        <i class="colorpicker-guide"></i>\n      </div>\n    </div>',extensions:[{name:"preview",options:{showText:true}}],sliders:{saturation:{selector:".colorpicker-saturation",maxLeft:sliderSize,maxTop:sliderSize,callLeft:"setSaturationRatio",callTop:"setValueRatio"},hue:{selector:".colorpicker-hue",maxLeft:0,maxTop:sliderSize,callLeft:false,callTop:"setHueRatio"},alpha:{selector:".colorpicker-alpha",childSelector:".colorpicker-alpha-color",maxLeft:0,maxTop:sliderSize,callLeft:false,callTop:"setAlphaRatio"}},slidersHorz:{saturation:{selector:".colorpicker-saturation",maxLeft:sliderSize,maxTop:sliderSize,callLeft:"setSaturationRatio",callTop:"setValueRatio"},hue:{selector:".colorpicker-hue",maxLeft:sliderSize,maxTop:0,callLeft:"setHueRatio",callTop:false},alpha:{selector:".colorpicker-alpha",childSelector:".colorpicker-alpha-color",maxLeft:sliderSize,maxTop:0,callLeft:"setAlphaRatio",callTop:false}}};module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _Extension2=__webpack_require__(1);var _Extension3=_interopRequireDefault(_Extension2);var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return call&&(typeof call==="object"||typeof call==="function")?call:self}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}var defaults={colors:null,namesAsValues:true};var Palette=function(_Extension){_inherits(Palette,_Extension);_createClass(Palette,[{key:"colors",get:function get(){return this.options.colors}}]);function Palette(colorpicker){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,Palette);var _this=_possibleConstructorReturn(this,(Palette.__proto__||Object.getPrototypeOf(Palette)).call(this,colorpicker,_jquery2.default.extend(true,{},defaults,options)));if(!Array.isArray(_this.options.colors)&&_typeof(_this.options.colors)!=="object"){_this.options.colors=null}return _this}_createClass(Palette,[{key:"getLength",value:function getLength(){if(!this.options.colors){return 0}if(Array.isArray(this.options.colors)){return this.options.colors.length}if(_typeof(this.options.colors)==="object"){return Object.keys(this.options.colors).length}return 0}},{key:"resolveColor",value:function resolveColor(color){var realColor=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;if(this.getLength()<=0){return false}if(Array.isArray(this.options.colors)){if(this.options.colors.indexOf(color)>=0){return color}if(this.options.colors.indexOf(color.toUpperCase())>=0){return color.toUpperCase()}if(this.options.colors.indexOf(color.toLowerCase())>=0){return color.toLowerCase()}return false}if(_typeof(this.options.colors)!=="object"){return false}if(!this.options.namesAsValues||realColor){return this.getValue(color,false)}return this.getName(color,this.getName("#"+color))}},{key:"getName",value:function getName(value){var defaultValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;if(!(typeof value==="string")||!this.options.colors){return defaultValue}for(var name in this.options.colors){if(!this.options.colors.hasOwnProperty(name)){continue}if(this.options.colors[name].toLowerCase()===value.toLowerCase()){return name}}return defaultValue}},{key:"getValue",value:function getValue(name){var defaultValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;if(!(typeof name==="string")||!this.options.colors){return defaultValue}if(this.options.colors.hasOwnProperty(name)){return this.options.colors[name]}return defaultValue}}]);return Palette}(_Extension3.default);exports.default=Palette;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},function(module,exports,__webpack_require__){var cssKeywords=__webpack_require__(5);var reverseKeywords={};for(var key in cssKeywords){if(cssKeywords.hasOwnProperty(key)){reverseKeywords[cssKeywords[key]]=key}}var convert=module.exports={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};for(var model in convert){if(convert.hasOwnProperty(model)){if(!("channels"in convert[model])){throw new Error("missing channels property: "+model)}if(!("labels"in convert[model])){throw new Error("missing channel labels property: "+model)}if(convert[model].labels.length!==convert[model].channels){throw new Error("channel and label counts mismatch: "+model)}var channels=convert[model].channels;var labels=convert[model].labels;delete convert[model].channels;delete convert[model].labels;Object.defineProperty(convert[model],"channels",{value:channels});Object.defineProperty(convert[model],"labels",{value:labels})}}convert.rgb.hsl=function(rgb){var r=rgb[0]/255;var g=rgb[1]/255;var b=rgb[2]/255;var min=Math.min(r,g,b);var max=Math.max(r,g,b);var delta=max-min;var h;var s;var l;if(max===min){h=0}else if(r===max){h=(g-b)/delta}else if(g===max){h=2+(b-r)/delta}else if(b===max){h=4+(r-g)/delta}h=Math.min(h*60,360);if(h<0){h+=360}l=(min+max)/2;if(max===min){s=0}else if(l<=.5){s=delta/(max+min)}else{s=delta/(2-max-min)}return[h,s*100,l*100]};convert.rgb.hsv=function(rgb){var rdif;var gdif;var bdif;var h;var s;var r=rgb[0]/255;var g=rgb[1]/255;var b=rgb[2]/255;var v=Math.max(r,g,b);var diff=v-Math.min(r,g,b);var diffc=function(c){return(v-c)/6/diff+1/2};if(diff===0){h=s=0}else{s=diff/v;rdif=diffc(r);gdif=diffc(g);bdif=diffc(b);if(r===v){h=bdif-gdif}else if(g===v){h=1/3+rdif-bdif}else if(b===v){h=2/3+gdif-rdif}if(h<0){h+=1}else if(h>1){h-=1}}return[h*360,s*100,v*100]};convert.rgb.hwb=function(rgb){var r=rgb[0];var g=rgb[1];var b=rgb[2];var h=convert.rgb.hsl(rgb)[0];var w=1/255*Math.min(r,Math.min(g,b));b=1-1/255*Math.max(r,Math.max(g,b));return[h,w*100,b*100]};convert.rgb.cmyk=function(rgb){var r=rgb[0]/255;var g=rgb[1]/255;var b=rgb[2]/255;var c;var m;var y;var k;k=Math.min(1-r,1-g,1-b);c=(1-r-k)/(1-k)||0;m=(1-g-k)/(1-k)||0;y=(1-b-k)/(1-k)||0;return[c*100,m*100,y*100,k*100]};function comparativeDistance(x,y){return Math.pow(x[0]-y[0],2)+Math.pow(x[1]-y[1],2)+Math.pow(x[2]-y[2],2)}convert.rgb.keyword=function(rgb){var reversed=reverseKeywords[rgb];if(reversed){return reversed}var currentClosestDistance=Infinity;var currentClosestKeyword;for(var keyword in cssKeywords){if(cssKeywords.hasOwnProperty(keyword)){var value=cssKeywords[keyword];var distance=comparativeDistance(rgb,value);if(distance<currentClosestDistance){currentClosestDistance=distance;currentClosestKeyword=keyword}}}return currentClosestKeyword};convert.keyword.rgb=function(keyword){return cssKeywords[keyword]};convert.rgb.xyz=function(rgb){var r=rgb[0]/255;var g=rgb[1]/255;var b=rgb[2]/255;r=r>.04045?Math.pow((r+.055)/1.055,2.4):r/12.92;g=g>.04045?Math.pow((g+.055)/1.055,2.4):g/12.92;b=b>.04045?Math.pow((b+.055)/1.055,2.4):b/12.92;var x=r*.4124+g*.3576+b*.1805;var y=r*.2126+g*.7152+b*.0722;var z=r*.0193+g*.1192+b*.9505;return[x*100,y*100,z*100]};convert.rgb.lab=function(rgb){var xyz=convert.rgb.xyz(rgb);var x=xyz[0];var y=xyz[1];var z=xyz[2];var l;var a;var b;x/=95.047;y/=100;z/=108.883;x=x>.008856?Math.pow(x,1/3):7.787*x+16/116;y=y>.008856?Math.pow(y,1/3):7.787*y+16/116;z=z>.008856?Math.pow(z,1/3):7.787*z+16/116;l=116*y-16;a=500*(x-y);b=200*(y-z);return[l,a,b]};convert.hsl.rgb=function(hsl){var h=hsl[0]/360;var s=hsl[1]/100;var l=hsl[2]/100;var t1;var t2;var t3;var rgb;var val;if(s===0){val=l*255;return[val,val,val]}if(l<.5){t2=l*(1+s)}else{t2=l+s-l*s}t1=2*l-t2;rgb=[0,0,0];for(var i=0;i<3;i++){t3=h+1/3*-(i-1);if(t3<0){t3++}if(t3>1){t3--}if(6*t3<1){val=t1+(t2-t1)*6*t3}else if(2*t3<1){val=t2}else if(3*t3<2){val=t1+(t2-t1)*(2/3-t3)*6}else{val=t1}rgb[i]=val*255}return rgb};convert.hsl.hsv=function(hsl){var h=hsl[0];var s=hsl[1]/100;var l=hsl[2]/100;var smin=s;var lmin=Math.max(l,.01);var sv;var v;l*=2;s*=l<=1?l:2-l;smin*=lmin<=1?lmin:2-lmin;v=(l+s)/2;sv=l===0?2*smin/(lmin+smin):2*s/(l+s);return[h,sv*100,v*100]};convert.hsv.rgb=function(hsv){var h=hsv[0]/60;var s=hsv[1]/100;var v=hsv[2]/100;var hi=Math.floor(h)%6;var f=h-Math.floor(h);var p=255*v*(1-s);var q=255*v*(1-s*f);var t=255*v*(1-s*(1-f));v*=255;switch(hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}};convert.hsv.hsl=function(hsv){var h=hsv[0];var s=hsv[1]/100;var v=hsv[2]/100;var vmin=Math.max(v,.01);var lmin;var sl;var l;l=(2-s)*v;lmin=(2-s)*vmin;sl=s*vmin;sl/=lmin<=1?lmin:2-lmin;sl=sl||0;l/=2;return[h,sl*100,l*100]};convert.hwb.rgb=function(hwb){var h=hwb[0]/360;var wh=hwb[1]/100;var bl=hwb[2]/100;var ratio=wh+bl;var i;var v;var f;var n;if(ratio>1){wh/=ratio;bl/=ratio}i=Math.floor(6*h);v=1-bl;f=6*h-i;if((i&1)!==0){f=1-f}n=wh+f*(v-wh);var r;var g;var b;switch(i){default:case 6:case 0:r=v;g=n;b=wh;break;case 1:r=n;g=v;b=wh;break;case 2:r=wh;g=v;b=n;break;case 3:r=wh;g=n;b=v;break;case 4:r=n;g=wh;b=v;break;case 5:r=v;g=wh;b=n;break}return[r*255,g*255,b*255]};convert.cmyk.rgb=function(cmyk){var c=cmyk[0]/100;var m=cmyk[1]/100;var y=cmyk[2]/100;var k=cmyk[3]/100;var r;var g;var b;r=1-Math.min(1,c*(1-k)+k);g=1-Math.min(1,m*(1-k)+k);b=1-Math.min(1,y*(1-k)+k);return[r*255,g*255,b*255]};convert.xyz.rgb=function(xyz){var x=xyz[0]/100;var y=xyz[1]/100;var z=xyz[2]/100;var r;var g;var b;r=x*3.2406+y*-1.5372+z*-.4986;g=x*-.9689+y*1.8758+z*.0415;b=x*.0557+y*-.204+z*1.057;r=r>.0031308?1.055*Math.pow(r,1/2.4)-.055:r*12.92;g=g>.0031308?1.055*Math.pow(g,1/2.4)-.055:g*12.92;b=b>.0031308?1.055*Math.pow(b,1/2.4)-.055:b*12.92;r=Math.min(Math.max(0,r),1);g=Math.min(Math.max(0,g),1);b=Math.min(Math.max(0,b),1);return[r*255,g*255,b*255]};convert.xyz.lab=function(xyz){var x=xyz[0];var y=xyz[1];var z=xyz[2];var l;var a;var b;x/=95.047;y/=100;z/=108.883;x=x>.008856?Math.pow(x,1/3):7.787*x+16/116;y=y>.008856?Math.pow(y,1/3):7.787*y+16/116;z=z>.008856?Math.pow(z,1/3):7.787*z+16/116;l=116*y-16;a=500*(x-y);b=200*(y-z);return[l,a,b]};convert.lab.xyz=function(lab){var l=lab[0];var a=lab[1];var b=lab[2];var x;var y;var z;y=(l+16)/116;x=a/500+y;z=y-b/200;var y2=Math.pow(y,3);var x2=Math.pow(x,3);var z2=Math.pow(z,3);y=y2>.008856?y2:(y-16/116)/7.787;x=x2>.008856?x2:(x-16/116)/7.787;z=z2>.008856?z2:(z-16/116)/7.787;x*=95.047;y*=100;z*=108.883;return[x,y,z]};convert.lab.lch=function(lab){var l=lab[0];var a=lab[1];var b=lab[2];var hr;var h;var c;hr=Math.atan2(b,a);h=hr*360/2/Math.PI;if(h<0){h+=360}c=Math.sqrt(a*a+b*b);return[l,c,h]};convert.lch.lab=function(lch){var l=lch[0];var c=lch[1];var h=lch[2];var a;var b;var hr;hr=h/360*2*Math.PI;a=c*Math.cos(hr);b=c*Math.sin(hr);return[l,a,b]};convert.rgb.ansi16=function(args){var r=args[0];var g=args[1];var b=args[2];var value=1 in arguments?arguments[1]:convert.rgb.hsv(args)[2];value=Math.round(value/50);if(value===0){return 30}var ansi=30+(Math.round(b/255)<<2|Math.round(g/255)<<1|Math.round(r/255));if(value===2){ansi+=60}return ansi};convert.hsv.ansi16=function(args){return convert.rgb.ansi16(convert.hsv.rgb(args),args[2])};convert.rgb.ansi256=function(args){var r=args[0];var g=args[1];var b=args[2];if(r===g&&g===b){if(r<8){return 16}if(r>248){return 231}return Math.round((r-8)/247*24)+232}var ansi=16+36*Math.round(r/255*5)+6*Math.round(g/255*5)+Math.round(b/255*5);return ansi};convert.ansi16.rgb=function(args){var color=args%10;if(color===0||color===7){if(args>50){color+=3.5}color=color/10.5*255;return[color,color,color]}var mult=(~~(args>50)+1)*.5;var r=(color&1)*mult*255;var g=(color>>1&1)*mult*255;var b=(color>>2&1)*mult*255;return[r,g,b]};convert.ansi256.rgb=function(args){if(args>=232){var c=(args-232)*10+8;return[c,c,c]}args-=16;var rem;var r=Math.floor(args/36)/5*255;var g=Math.floor((rem=args%36)/6)/5*255;var b=rem%6/5*255;return[r,g,b]};convert.rgb.hex=function(args){var integer=((Math.round(args[0])&255)<<16)+((Math.round(args[1])&255)<<8)+(Math.round(args[2])&255);var string=integer.toString(16).toUpperCase();return"000000".substring(string.length)+string};convert.hex.rgb=function(args){var match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match){return[0,0,0]}var colorString=match[0];if(match[0].length===3){colorString=colorString.split("").map(function(char){return char+char}).join("")}var integer=parseInt(colorString,16);var r=integer>>16&255;var g=integer>>8&255;var b=integer&255;return[r,g,b]};convert.rgb.hcg=function(rgb){var r=rgb[0]/255;var g=rgb[1]/255;var b=rgb[2]/255;var max=Math.max(Math.max(r,g),b);var min=Math.min(Math.min(r,g),b);var chroma=max-min;var grayscale;var hue;if(chroma<1){grayscale=min/(1-chroma)}else{grayscale=0}if(chroma<=0){hue=0}else if(max===r){hue=(g-b)/chroma%6}else if(max===g){hue=2+(b-r)/chroma}else{hue=4+(r-g)/chroma+4}hue/=6;hue%=1;return[hue*360,chroma*100,grayscale*100]};convert.hsl.hcg=function(hsl){var s=hsl[1]/100;var l=hsl[2]/100;var c=1;var f=0;if(l<.5){c=2*s*l}else{c=2*s*(1-l)}if(c<1){f=(l-.5*c)/(1-c)}return[hsl[0],c*100,f*100]};convert.hsv.hcg=function(hsv){var s=hsv[1]/100;var v=hsv[2]/100;var c=s*v;var f=0;if(c<1){f=(v-c)/(1-c)}return[hsv[0],c*100,f*100]};convert.hcg.rgb=function(hcg){var h=hcg[0]/360;var c=hcg[1]/100;var g=hcg[2]/100;if(c===0){return[g*255,g*255,g*255]}var pure=[0,0,0];var hi=h%1*6;var v=hi%1;var w=1-v;var mg=0;switch(Math.floor(hi)){case 0:pure[0]=1;pure[1]=v;pure[2]=0;break;case 1:pure[0]=w;pure[1]=1;pure[2]=0;break;case 2:pure[0]=0;pure[1]=1;pure[2]=v;break;case 3:pure[0]=0;pure[1]=w;pure[2]=1;break;case 4:pure[0]=v;pure[1]=0;pure[2]=1;break;default:pure[0]=1;pure[1]=0;pure[2]=w}mg=(1-c)*g;return[(c*pure[0]+mg)*255,(c*pure[1]+mg)*255,(c*pure[2]+mg)*255]};convert.hcg.hsv=function(hcg){var c=hcg[1]/100;var g=hcg[2]/100;var v=c+g*(1-c);var f=0;if(v>0){f=c/v}return[hcg[0],f*100,v*100]};convert.hcg.hsl=function(hcg){var c=hcg[1]/100;var g=hcg[2]/100;var l=g*(1-c)+.5*c;var s=0;if(l>0&&l<.5){s=c/(2*l)}else if(l>=.5&&l<1){s=c/(2*(1-l))}return[hcg[0],s*100,l*100]};convert.hcg.hwb=function(hcg){var c=hcg[1]/100;var g=hcg[2]/100;var v=c+g*(1-c);return[hcg[0],(v-c)*100,(1-v)*100]};convert.hwb.hcg=function(hwb){var w=hwb[1]/100;var b=hwb[2]/100;var v=1-b;var c=v-w;var g=0;if(c<1){g=(v-c)/(1-c)}return[hwb[0],c*100,g*100]};convert.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]};convert.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]};convert.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]};convert.gray.hsl=convert.gray.hsv=function(args){return[0,0,args[0]]};convert.gray.hwb=function(gray){return[0,100,gray[0]]};convert.gray.cmyk=function(gray){return[0,0,0,gray[0]]};convert.gray.lab=function(gray){return[gray[0],0,0]};convert.gray.hex=function(gray){var val=Math.round(gray[0]/100*255)&255;var integer=(val<<16)+(val<<8)+val;var string=integer.toString(16).toUpperCase();return"000000".substring(string.length)+string};convert.rgb.gray=function(rgb){var val=(rgb[0]+rgb[1]+rgb[2])/3;return[val/255*100]}},function(module,exports,__webpack_require__){"use strict";var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};var _Colorpicker=__webpack_require__(8);var _Colorpicker2=_interopRequireDefault(_Colorpicker);var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var plugin="colorpicker";_jquery2.default[plugin]=_Colorpicker2.default;_jquery2.default.fn[plugin]=function(option){var fnArgs=Array.prototype.slice.call(arguments,1),isSingleElement=this.length===1,returnValue=null;var $elements=this.each(function(){var $this=(0,_jquery2.default)(this),inst=$this.data(plugin),options=(typeof option==="undefined"?"undefined":_typeof(option))==="object"?option:{};if(!inst){inst=new _Colorpicker2.default(this,options);$this.data(plugin,inst)}if(!isSingleElement){return}returnValue=$this;if(typeof option==="string"){if(option==="colorpicker"){returnValue=inst}else if(_jquery2.default.isFunction(inst[option])){returnValue=inst[option].apply(inst,fnArgs)}else{returnValue=inst[option]}}});return isSingleElement?returnValue:$elements};_jquery2.default.fn[plugin].constructor=_Colorpicker2.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _Extension=__webpack_require__(1);var _Extension2=_interopRequireDefault(_Extension);var _options=__webpack_require__(3);var _options2=_interopRequireDefault(_options);var _extensions=__webpack_require__(9);var _extensions2=_interopRequireDefault(_extensions);var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);var _SliderHandler=__webpack_require__(13);var _SliderHandler2=_interopRequireDefault(_SliderHandler);var _PopupHandler=__webpack_require__(14);var _PopupHandler2=_interopRequireDefault(_PopupHandler);var _InputHandler=__webpack_require__(15);var _InputHandler2=_interopRequireDefault(_InputHandler);var _ColorHandler=__webpack_require__(22);var _ColorHandler2=_interopRequireDefault(_ColorHandler);var _PickerHandler=__webpack_require__(23);var _PickerHandler2=_interopRequireDefault(_PickerHandler);var _AddonHandler=__webpack_require__(24);var _AddonHandler2=_interopRequireDefault(_AddonHandler);var _ColorItem=__webpack_require__(2);var _ColorItem2=_interopRequireDefault(_ColorItem);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var colorPickerIdCounter=0;var root=typeof self!=="undefined"?self:undefined;var Colorpicker=function(){_createClass(Colorpicker,[{key:"color",get:function get(){return this.colorHandler.color}},{key:"format",get:function get(){return this.colorHandler.format}},{key:"picker",get:function get(){return this.pickerHandler.picker}}],[{key:"Color",get:function get(){return _ColorItem2.default}},{key:"Extension",get:function get(){return _Extension2.default}}]);function Colorpicker(element,options){_classCallCheck(this,Colorpicker);colorPickerIdCounter+=1;this.id=colorPickerIdCounter;this.lastEvent={alias:null,e:null};this.element=(0,_jquery2.default)(element).addClass("colorpicker-element").attr("data-colorpicker-id",this.id);this.options=_jquery2.default.extend(true,{},_options2.default,options,this.element.data());this.disabled=false;this.extensions=[];this.container=this.options.container===true||this.options.container!==true&&this.options.inline===true?this.element:this.options.container;this.container=this.container!==false?(0,_jquery2.default)(this.container):false;this.inputHandler=new _InputHandler2.default(this);this.colorHandler=new _ColorHandler2.default(this);this.sliderHandler=new _SliderHandler2.default(this);this.popupHandler=new _PopupHandler2.default(this,root);this.pickerHandler=new _PickerHandler2.default(this);this.addonHandler=new _AddonHandler2.default(this);this.init();(0,_jquery2.default)(_jquery2.default.proxy(function(){this.trigger("colorpickerCreate")},this))}_createClass(Colorpicker,[{key:"init",value:function init(){this.addonHandler.bind();this.inputHandler.bind();this.initExtensions();this.colorHandler.bind();this.pickerHandler.bind();this.sliderHandler.bind();this.popupHandler.bind();this.pickerHandler.attach();this.update();if(this.inputHandler.isDisabled()){this.disable()}}},{key:"initExtensions",value:function initExtensions(){var _this=this;if(!Array.isArray(this.options.extensions)){this.options.extensions=[]}if(this.options.debug){this.options.extensions.push({name:"debugger"})}this.options.extensions.forEach(function(ext){_this.registerExtension(Colorpicker.extensions[ext.name.toLowerCase()],ext.options||{})})}},{key:"registerExtension",value:function registerExtension(ExtensionClass){var config=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var ext=new ExtensionClass(this,config);this.extensions.push(ext);return ext}},{key:"destroy",value:function destroy(){var color=this.color;this.sliderHandler.unbind();this.inputHandler.unbind();this.popupHandler.unbind();this.colorHandler.unbind();this.addonHandler.unbind();this.pickerHandler.unbind();this.element.removeClass("colorpicker-element").removeData("colorpicker").removeData("color").off(".colorpicker");this.trigger("colorpickerDestroy",color)}},{key:"show",value:function show(e){this.popupHandler.show(e)}},{key:"hide",value:function hide(e){this.popupHandler.hide(e)}},{key:"toggle",value:function toggle(e){this.popupHandler.toggle(e)}},{key:"getValue",value:function getValue(){var defaultValue=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var val=this.colorHandler.color;val=val instanceof _ColorItem2.default?val:defaultValue;if(val instanceof _ColorItem2.default){return val.string(this.format)}return val}},{key:"setValue",value:function setValue(val){if(this.isDisabled()){return}var ch=this.colorHandler;if(ch.hasColor()&&!!val&&ch.color.equals(val)||!ch.hasColor()&&!val){return}ch.color=val?ch.createColor(val,this.options.autoInputFallback,this.options.autoHexInputFallback):null;this.trigger("colorpickerChange",ch.color,val);this.update()}},{key:"update",value:function update(){if(this.colorHandler.hasColor()){this.inputHandler.update()}else{this.colorHandler.assureColor()}this.addonHandler.update();this.pickerHandler.update();this.trigger("colorpickerUpdate")}},{key:"enable",value:function enable(){this.inputHandler.enable();this.disabled=false;this.picker.removeClass("colorpicker-disabled");this.trigger("colorpickerEnable");return true}},{key:"disable",value:function disable(){this.inputHandler.disable();this.disabled=true;this.picker.addClass("colorpicker-disabled");this.trigger("colorpickerDisable");return true}},{key:"isEnabled",value:function isEnabled(){return!this.isDisabled()}},{key:"isDisabled",value:function isDisabled(){return this.disabled===true}},{key:"trigger",value:function trigger(eventName){var color=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;var value=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;this.element.trigger({type:eventName,colorpicker:this,color:color?color:this.color,value:value?value:this.getValue()})}}]);return Colorpicker}();Colorpicker.extensions=_extensions2.default;exports.default=Colorpicker;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Palette=exports.Swatches=exports.Preview=exports.Debugger=undefined;var _Debugger=__webpack_require__(10);var _Debugger2=_interopRequireDefault(_Debugger);var _Preview=__webpack_require__(11);var _Preview2=_interopRequireDefault(_Preview);var _Swatches=__webpack_require__(12);var _Swatches2=_interopRequireDefault(_Swatches);var _Palette=__webpack_require__(4);var _Palette2=_interopRequireDefault(_Palette);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}exports.Debugger=_Debugger2.default;exports.Preview=_Preview2.default;exports.Swatches=_Swatches2.default;exports.Palette=_Palette2.default;exports.default={debugger:_Debugger2.default,preview:_Preview2.default,swatches:_Swatches2.default,palette:_Palette2.default}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined}else{return get(parent,property,receiver)}}else if("value"in desc){return desc.value}else{var getter=desc.get;if(getter===undefined){return undefined}return getter.call(receiver)}};var _Extension2=__webpack_require__(1);var _Extension3=_interopRequireDefault(_Extension2);var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return call&&(typeof call==="object"||typeof call==="function")?call:self}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}var Debugger=function(_Extension){_inherits(Debugger,_Extension);function Debugger(colorpicker){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,Debugger);var _this=_possibleConstructorReturn(this,(Debugger.__proto__||Object.getPrototypeOf(Debugger)).call(this,colorpicker,options));_this.eventCounter=0;if(_this.colorpicker.inputHandler.hasInput()){_this.colorpicker.inputHandler.input.on("change.colorpicker-ext",_jquery2.default.proxy(_this.onChangeInput,_this))}return _this}_createClass(Debugger,[{key:"log",value:function log(eventName){var _console;for(var _len=arguments.length,args=Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key]}this.eventCounter+=1;var logMessage="#"+this.eventCounter+": Colorpicker#"+this.colorpicker.id+" ["+eventName+"]";(_console=console).debug.apply(_console,[logMessage].concat(args));this.colorpicker.element.trigger({type:"colorpickerDebug",colorpicker:this.colorpicker,color:this.color,value:null,debug:{debugger:this,eventName,logArgs:args,logMessage}})}},{key:"resolveColor",value:function resolveColor(color){var realColor=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;this.log("resolveColor()",color,realColor);return false}},{key:"onCreate",value:function onCreate(event){this.log("colorpickerCreate");return _get(Debugger.prototype.__proto__||Object.getPrototypeOf(Debugger.prototype),"onCreate",this).call(this,event)}},{key:"onDestroy",value:function onDestroy(event){this.log("colorpickerDestroy");this.eventCounter=0;if(this.colorpicker.inputHandler.hasInput()){this.colorpicker.inputHandler.input.off(".colorpicker-ext")}return _get(Debugger.prototype.__proto__||Object.getPrototypeOf(Debugger.prototype),"onDestroy",this).call(this,event)}},{key:"onUpdate",value:function onUpdate(event){this.log("colorpickerUpdate")}},{key:"onChangeInput",value:function onChangeInput(event){this.log("input:change.colorpicker",event.value,event.color)}},{key:"onChange",value:function onChange(event){this.log("colorpickerChange",event.value,event.color)}},{key:"onInvalid",value:function onInvalid(event){this.log("colorpickerInvalid",event.value,event.color)}},{key:"onHide",value:function onHide(event){this.log("colorpickerHide");this.eventCounter=0}},{key:"onShow",value:function onShow(event){this.log("colorpickerShow")}},{key:"onDisable",value:function onDisable(event){this.log("colorpickerDisable")}},{key:"onEnable",value:function onEnable(event){this.log("colorpickerEnable")}}]);return Debugger}(_Extension3.default);exports.default=Debugger;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined}else{return get(parent,property,receiver)}}else if("value"in desc){return desc.value}else{var getter=desc.get;if(getter===undefined){return undefined}return getter.call(receiver)}};var _Extension2=__webpack_require__(1);var _Extension3=_interopRequireDefault(_Extension2);var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return call&&(typeof call==="object"||typeof call==="function")?call:self}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}var Preview=function(_Extension){_inherits(Preview,_Extension);function Preview(colorpicker){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,Preview);var _this=_possibleConstructorReturn(this,(Preview.__proto__||Object.getPrototypeOf(Preview)).call(this,colorpicker,_jquery2.default.extend(true,{},{template:'<div class="colorpicker-bar colorpicker-preview"><div /></div>',showText:true,format:colorpicker.format},options)));_this.element=(0,_jquery2.default)(_this.options.template);_this.elementInner=_this.element.find("div");return _this}_createClass(Preview,[{key:"onCreate",value:function onCreate(event){_get(Preview.prototype.__proto__||Object.getPrototypeOf(Preview.prototype),"onCreate",this).call(this,event);this.colorpicker.picker.append(this.element)}},{key:"onUpdate",value:function onUpdate(event){_get(Preview.prototype.__proto__||Object.getPrototypeOf(Preview.prototype),"onUpdate",this).call(this,event);if(!event.color){this.elementInner.css("backgroundColor",null).css("color",null).html("");return}this.elementInner.css("backgroundColor",event.color.toRgbString());if(this.options.showText){this.elementInner.html(event.color.string(this.options.format||this.colorpicker.format));if(event.color.isDark()&&event.color.alpha>.5){this.elementInner.css("color","white")}else{this.elementInner.css("color","black")}}}}]);return Preview}(_Extension3.default);exports.default=Preview;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined}else{return get(parent,property,receiver)}}else if("value"in desc){return desc.value}else{var getter=desc.get;if(getter===undefined){return undefined}return getter.call(receiver)}};var _Palette2=__webpack_require__(4);var _Palette3=_interopRequireDefault(_Palette2);var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return call&&(typeof call==="object"||typeof call==="function")?call:self}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}var defaults={barTemplate:'<div class="colorpicker-bar colorpicker-swatches">\n                    <div class="colorpicker-swatches--inner"></div>\n                </div>',swatchTemplate:'<i class="colorpicker-swatch"><i class="colorpicker-swatch--inner"></i></i>'};var Swatches=function(_Palette){_inherits(Swatches,_Palette);function Swatches(colorpicker){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,Swatches);var _this=_possibleConstructorReturn(this,(Swatches.__proto__||Object.getPrototypeOf(Swatches)).call(this,colorpicker,_jquery2.default.extend(true,{},defaults,options)));_this.element=null;return _this}_createClass(Swatches,[{key:"isEnabled",value:function isEnabled(){return this.getLength()>0}},{key:"onCreate",value:function onCreate(event){_get(Swatches.prototype.__proto__||Object.getPrototypeOf(Swatches.prototype),"onCreate",this).call(this,event);if(!this.isEnabled()){return}this.element=(0,_jquery2.default)(this.options.barTemplate);this.load();this.colorpicker.picker.append(this.element)}},{key:"load",value:function load(){var _this2=this;var colorpicker=this.colorpicker,swatchContainer=this.element.find(".colorpicker-swatches--inner"),isAliased=this.options.namesAsValues===true&&!Array.isArray(this.colors);swatchContainer.empty();_jquery2.default.each(this.colors,function(name,value){var $swatch=(0,_jquery2.default)(_this2.options.swatchTemplate).attr("data-name",name).attr("data-value",value).attr("title",isAliased?name+": "+value:value).on("mousedown.colorpicker touchstart.colorpicker",function(e){var $sw=(0,_jquery2.default)(this);colorpicker.setValue(isAliased?$sw.attr("data-name"):$sw.attr("data-value"))});$swatch.find(".colorpicker-swatch--inner").css("background-color",value);swatchContainer.append($swatch)});swatchContainer.append((0,_jquery2.default)('<i class="colorpicker-clear"></i>'))}}]);return Swatches}(_Palette3.default);exports.default=Swatches;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var SliderHandler=function(){function SliderHandler(colorpicker){_classCallCheck(this,SliderHandler);this.colorpicker=colorpicker;this.currentSlider=null;this.mousePointer={left:0,top:0};this.onMove=_jquery2.default.proxy(this.defaultOnMove,this)}_createClass(SliderHandler,[{key:"defaultOnMove",value:function defaultOnMove(top,left){if(!this.currentSlider){return}var slider=this.currentSlider,cp=this.colorpicker,ch=cp.colorHandler;var color=!ch.hasColor()?ch.getFallbackColor():ch.color.getClone();slider.guideStyle.left=left+"px";slider.guideStyle.top=top+"px";if(slider.callLeft){color[slider.callLeft](left/slider.maxLeft)}if(slider.callTop){color[slider.callTop](top/slider.maxTop)}cp.setValue(color);cp.popupHandler.focus()}},{key:"bind",value:function bind(){var sliders=this.colorpicker.options.horizontal?this.colorpicker.options.slidersHorz:this.colorpicker.options.sliders;var sliderClasses=[];for(var sliderName in sliders){if(!sliders.hasOwnProperty(sliderName)){continue}sliderClasses.push(sliders[sliderName].selector)}this.colorpicker.picker.find(sliderClasses.join(", ")).on("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.pressed,this))}},{key:"unbind",value:function unbind(){(0,_jquery2.default)(this.colorpicker.picker).off({"mousemove.colorpicker":_jquery2.default.proxy(this.moved,this),"touchmove.colorpicker":_jquery2.default.proxy(this.moved,this),"mouseup.colorpicker":_jquery2.default.proxy(this.released,this),"touchend.colorpicker":_jquery2.default.proxy(this.released,this)})}},{key:"pressed",value:function pressed(e){if(this.colorpicker.isDisabled()){return}this.colorpicker.lastEvent.alias="pressed";this.colorpicker.lastEvent.e=e;if(!e.pageX&&!e.pageY&&e.originalEvent&&e.originalEvent.touches){e.pageX=e.originalEvent.touches[0].pageX;e.pageY=e.originalEvent.touches[0].pageY}var target=(0,_jquery2.default)(e.target);var zone=target.closest("div");var sliders=this.colorpicker.options.horizontal?this.colorpicker.options.slidersHorz:this.colorpicker.options.sliders;if(zone.is(".colorpicker")){return}this.currentSlider=null;for(var sliderName in sliders){if(!sliders.hasOwnProperty(sliderName)){continue}var slider=sliders[sliderName];if(zone.is(slider.selector)){this.currentSlider=_jquery2.default.extend({},slider,{name:sliderName});break}else if(slider.childSelector!==undefined&&zone.is(slider.childSelector)){this.currentSlider=_jquery2.default.extend({},slider,{name:sliderName});zone=zone.parent();break}}var guide=zone.find(".colorpicker-guide").get(0);if(this.currentSlider===null||guide===null){return}var offset=zone.offset();this.currentSlider.guideStyle=guide.style;this.currentSlider.left=e.pageX-offset.left;this.currentSlider.top=e.pageY-offset.top;this.mousePointer={left:e.pageX,top:e.pageY};(0,_jquery2.default)(this.colorpicker.picker).on({"mousemove.colorpicker":_jquery2.default.proxy(this.moved,this),"touchmove.colorpicker":_jquery2.default.proxy(this.moved,this),"mouseup.colorpicker":_jquery2.default.proxy(this.released,this),"touchend.colorpicker":_jquery2.default.proxy(this.released,this)}).trigger("mousemove")}},{key:"moved",value:function moved(e){this.colorpicker.lastEvent.alias="moved";this.colorpicker.lastEvent.e=e;if(!e.pageX&&!e.pageY&&e.originalEvent&&e.originalEvent.touches){e.pageX=e.originalEvent.touches[0].pageX;e.pageY=e.originalEvent.touches[0].pageY}e.preventDefault();var left=Math.max(0,Math.min(this.currentSlider.maxLeft,this.currentSlider.left+((e.pageX||this.mousePointer.left)-this.mousePointer.left)));var top=Math.max(0,Math.min(this.currentSlider.maxTop,this.currentSlider.top+((e.pageY||this.mousePointer.top)-this.mousePointer.top)));this.onMove(top,left)}},{key:"released",value:function released(e){this.colorpicker.lastEvent.alias="released";this.colorpicker.lastEvent.e=e;(0,_jquery2.default)(this.colorpicker.picker).off({"mousemove.colorpicker":this.moved,"touchmove.colorpicker":this.moved,"mouseup.colorpicker":this.released,"touchend.colorpicker":this.released})}}]);return SliderHandler}();exports.default=SliderHandler;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);var _options=__webpack_require__(3);var _options2=_interopRequireDefault(_options);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var PopupHandler=function(){function PopupHandler(colorpicker,root){_classCallCheck(this,PopupHandler);this.root=root;this.colorpicker=colorpicker;this.popoverTarget=null;this.popoverTip=null;this.clicking=false;this.hidding=false;this.showing=false}_createClass(PopupHandler,[{key:"bind",value:function bind(){var cp=this.colorpicker;if(cp.options.inline){cp.picker.addClass("colorpicker-inline colorpicker-visible");return}cp.picker.addClass("colorpicker-popup colorpicker-hidden");if(!this.hasInput&&!this.hasAddon){return}if(cp.options.popover){this.createPopover()}if(this.hasAddon){if(!this.addon.attr("tabindex")){this.addon.attr("tabindex",0)}this.addon.on({"mousedown.colorpicker touchstart.colorpicker":_jquery2.default.proxy(this.toggle,this)});this.addon.on({"focus.colorpicker":_jquery2.default.proxy(this.show,this)});this.addon.on({"focusout.colorpicker":_jquery2.default.proxy(this.hide,this)})}if(this.hasInput&&!this.hasAddon){this.input.on({"mousedown.colorpicker touchstart.colorpicker":_jquery2.default.proxy(this.show,this),"focus.colorpicker":_jquery2.default.proxy(this.show,this)});this.input.on({"focusout.colorpicker":_jquery2.default.proxy(this.hide,this)})}(0,_jquery2.default)(this.root).on("resize.colorpicker",_jquery2.default.proxy(this.reposition,this))}},{key:"unbind",value:function unbind(){if(this.hasInput){this.input.off({"mousedown.colorpicker touchstart.colorpicker":_jquery2.default.proxy(this.show,this),"focus.colorpicker":_jquery2.default.proxy(this.show,this)});this.input.off({"focusout.colorpicker":_jquery2.default.proxy(this.hide,this)})}if(this.hasAddon){this.addon.off({"mousedown.colorpicker touchstart.colorpicker":_jquery2.default.proxy(this.toggle,this)});this.addon.off({"focus.colorpicker":_jquery2.default.proxy(this.show,this)});this.addon.off({"focusout.colorpicker":_jquery2.default.proxy(this.hide,this)})}if(this.popoverTarget){this.popoverTarget.popover("dispose")}(0,_jquery2.default)(this.root).off("resize.colorpicker",_jquery2.default.proxy(this.reposition,this));(0,_jquery2.default)(this.root.document).off("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.hide,this));(0,_jquery2.default)(this.root.document).off("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.onClickingInside,this))}},{key:"isClickingInside",value:function isClickingInside(e){if(!e){return false}return this.isOrIsInside(this.popoverTip,e.currentTarget)||this.isOrIsInside(this.popoverTip,e.target)||this.isOrIsInside(this.colorpicker.picker,e.currentTarget)||this.isOrIsInside(this.colorpicker.picker,e.target)}},{key:"isOrIsInside",value:function isOrIsInside(container,element){if(!container||!element){return false}element=(0,_jquery2.default)(element);return element.is(container)||container.find(element).length>0}},{key:"onClickingInside",value:function onClickingInside(e){this.clicking=this.isClickingInside(e)}},{key:"createPopover",value:function createPopover(){var cp=this.colorpicker;this.popoverTarget=this.hasAddon?this.addon:this.input;cp.picker.addClass("colorpicker-bs-popover-content");this.popoverTarget.popover(_jquery2.default.extend(true,{},_options2.default.popover,cp.options.popover,{trigger:"manual",content:cp.picker,html:true}));this.popoverTip=(0,_jquery2.default)(bootstrap.Popover.getInstance(this.popoverTarget[0]).getTipElement());this.popoverTip.addClass("colorpicker-bs-popover");this.popoverTarget.on("shown.bs.popover",_jquery2.default.proxy(this.fireShow,this));this.popoverTarget.on("hidden.bs.popover",_jquery2.default.proxy(this.fireHide,this))}},{key:"reposition",value:function reposition(e){if(this.popoverTarget&&this.isVisible()){this.popoverTarget.popover("update")}}},{key:"toggle",value:function toggle(e){if(this.isVisible()){this.hide(e)}else{this.show(e)}}},{key:"show",value:function show(e){if(this.isVisible()||this.showing||this.hidding){return}this.showing=true;this.hidding=false;this.clicking=false;var cp=this.colorpicker;cp.lastEvent.alias="show";cp.lastEvent.e=e;if(e&&(!this.hasInput||this.input.attr("type")==="color")&&e&&e.preventDefault){e.stopPropagation();e.preventDefault()}if(this.isPopover){(0,_jquery2.default)(this.root).on("resize.colorpicker",_jquery2.default.proxy(this.reposition,this))}cp.picker.addClass("colorpicker-visible").removeClass("colorpicker-hidden");if(this.popoverTarget){this.popoverTarget.popover("show")}else{this.fireShow()}}},{key:"fireShow",value:function fireShow(){this.hidding=false;this.showing=false;if(this.isPopover){(0,_jquery2.default)(this.root.document).on("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.hide,this));(0,_jquery2.default)(this.root.document).on("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.onClickingInside,this))}this.colorpicker.trigger("colorpickerShow")}},{key:"hide",value:function hide(e){if(this.isHidden()||this.showing||this.hidding){return}var cp=this.colorpicker,clicking=this.clicking||this.isClickingInside(e);this.hidding=true;this.showing=false;this.clicking=false;cp.lastEvent.alias="hide";cp.lastEvent.e=e;if(clicking){this.hidding=false;return}if(this.popoverTarget){this.popoverTarget.popover("hide")}else{this.fireHide()}}},{key:"fireHide",value:function fireHide(){this.hidding=false;this.showing=false;var cp=this.colorpicker;cp.picker.addClass("colorpicker-hidden").removeClass("colorpicker-visible");(0,_jquery2.default)(this.root).off("resize.colorpicker",_jquery2.default.proxy(this.reposition,this));(0,_jquery2.default)(this.root.document).off("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.hide,this));(0,_jquery2.default)(this.root.document).off("mousedown.colorpicker touchstart.colorpicker",_jquery2.default.proxy(this.onClickingInside,this));cp.trigger("colorpickerHide")}},{key:"focus",value:function focus(){if(this.hasAddon){return this.addon.focus()}if(this.hasInput){return this.input.focus()}return false}},{key:"isVisible",value:function isVisible(){return this.colorpicker.picker.hasClass("colorpicker-visible")&&!this.colorpicker.picker.hasClass("colorpicker-hidden")}},{key:"isHidden",value:function isHidden(){return this.colorpicker.picker.hasClass("colorpicker-hidden")&&!this.colorpicker.picker.hasClass("colorpicker-visible")}},{key:"input",get:function get(){return this.colorpicker.inputHandler.input}},{key:"hasInput",get:function get(){return this.colorpicker.inputHandler.hasInput()}},{key:"addon",get:function get(){return this.colorpicker.addonHandler.addon}},{key:"hasAddon",get:function get(){return this.colorpicker.addonHandler.hasAddon()}},{key:"isPopover",get:function get(){return!this.colorpicker.options.inline&&!!this.popoverTip}}]);return PopupHandler}();exports.default=PopupHandler;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);var _ColorItem=__webpack_require__(2);var _ColorItem2=_interopRequireDefault(_ColorItem);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var InputHandler=function(){function InputHandler(colorpicker){_classCallCheck(this,InputHandler);this.colorpicker=colorpicker;this.input=this.colorpicker.element.is("input")?this.colorpicker.element:this.colorpicker.options.input?this.colorpicker.element.find(this.colorpicker.options.input):false;if(this.input&&this.input.length===0){this.input=false}this._initValue()}_createClass(InputHandler,[{key:"bind",value:function bind(){if(!this.hasInput()){return}this.input.on({"keyup.colorpicker":_jquery2.default.proxy(this.onkeyup,this)});this.input.on({"change.colorpicker":_jquery2.default.proxy(this.onchange,this)})}},{key:"unbind",value:function unbind(){if(!this.hasInput()){return}this.input.off(".colorpicker")}},{key:"_initValue",value:function _initValue(){if(!this.hasInput()){return}var val="";[this.input.val(),this.input.data("color"),this.input.attr("data-color")].map(function(item){if(item&&val===""){val=item}});if(val instanceof _ColorItem2.default){val=this.getFormattedColor(val.string(this.colorpicker.format))}else if(!(typeof val==="string"||val instanceof String)){val=""}this.input.prop("value",val)}},{key:"getValue",value:function getValue(){if(!this.hasInput()){return false}return this.input.val()}},{key:"setValue",value:function setValue(val){if(!this.hasInput()){return}var inputVal=this.input.prop("value");val=val?val:"";if(val===(inputVal?inputVal:"")){return}this.input.prop("value",val);this.input.trigger({type:"change",colorpicker:this.colorpicker,color:this.colorpicker.color,value:val})}},{key:"getFormattedColor",value:function getFormattedColor(){var val=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;val=val?val:this.colorpicker.colorHandler.getColorString();if(!val){return""}val=this.colorpicker.colorHandler.resolveColorDelegate(val,false);if(this.colorpicker.options.useHashPrefix===false){val=val.replace(/^#/g,"")}return val}},{key:"hasInput",value:function hasInput(){return this.input!==false}},{key:"isEnabled",value:function isEnabled(){return this.hasInput()&&!this.isDisabled()}},{key:"isDisabled",value:function isDisabled(){return this.hasInput()&&this.input.prop("disabled")===true}},{key:"disable",value:function disable(){if(this.hasInput()){this.input.prop("disabled",true)}}},{key:"enable",value:function enable(){if(this.hasInput()){this.input.prop("disabled",false)}}},{key:"update",value:function update(){if(!this.hasInput()){return}if(this.colorpicker.options.autoInputFallback===false&&this.colorpicker.colorHandler.isInvalidColor()){return}this.setValue(this.getFormattedColor())}},{key:"onchange",value:function onchange(e){this.colorpicker.lastEvent.alias="input.change";this.colorpicker.lastEvent.e=e;var val=this.getValue();if(val!==e.value){this.colorpicker.setValue(val)}}},{key:"onkeyup",value:function onkeyup(e){this.colorpicker.lastEvent.alias="input.keyup";this.colorpicker.lastEvent.e=e;var val=this.getValue();if(val!==e.value){this.colorpicker.setValue(val)}}}]);return InputHandler}();exports.default=InputHandler;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";var colorString=__webpack_require__(17);var convert=__webpack_require__(20);var _slice=[].slice;var skippedModels=["keyword","gray","hex"];var hashedModelKeys={};Object.keys(convert).forEach(function(model){hashedModelKeys[_slice.call(convert[model].labels).sort().join("")]=model});var limiters={};function Color(obj,model){if(!(this instanceof Color)){return new Color(obj,model)}if(model&&model in skippedModels){model=null}if(model&&!(model in convert)){throw new Error("Unknown model: "+model)}var i;var channels;if(obj==null){this.model="rgb";this.color=[0,0,0];this.valpha=1}else if(obj instanceof Color){this.model=obj.model;this.color=obj.color.slice();this.valpha=obj.valpha}else if(typeof obj==="string"){var result=colorString.get(obj);if(result===null){throw new Error("Unable to parse color from string: "+obj)}this.model=result.model;channels=convert[this.model].channels;this.color=result.value.slice(0,channels);this.valpha=typeof result.value[channels]==="number"?result.value[channels]:1}else if(obj.length){this.model=model||"rgb";channels=convert[this.model].channels;var newArr=_slice.call(obj,0,channels);this.color=zeroArray(newArr,channels);this.valpha=typeof obj[channels]==="number"?obj[channels]:1}else if(typeof obj==="number"){obj&=16777215;this.model="rgb";this.color=[obj>>16&255,obj>>8&255,obj&255];this.valpha=1}else{this.valpha=1;var keys=Object.keys(obj);if("alpha"in obj){keys.splice(keys.indexOf("alpha"),1);this.valpha=typeof obj.alpha==="number"?obj.alpha:0}var hashedKeys=keys.sort().join("");if(!(hashedKeys in hashedModelKeys)){throw new Error("Unable to parse color from object: "+JSON.stringify(obj))}this.model=hashedModelKeys[hashedKeys];var labels=convert[this.model].labels;var color=[];for(i=0;i<labels.length;i++){color.push(obj[labels[i]])}this.color=zeroArray(color)}if(limiters[this.model]){channels=convert[this.model].channels;for(i=0;i<channels;i++){var limit=limiters[this.model][i];if(limit){this.color[i]=limit(this.color[i])}}}this.valpha=Math.max(0,Math.min(1,this.valpha));if(Object.freeze){Object.freeze(this)}}Color.prototype={toString:function(){return this.string()},toJSON:function(){return this[this.model]()},string:function(places){var self=this.model in colorString.to?this:this.rgb();self=self.round(typeof places==="number"?places:1);var args=self.valpha===1?self.color:self.color.concat(this.valpha);return colorString.to[self.model](args)},percentString:function(places){var self=this.rgb().round(typeof places==="number"?places:1);var args=self.valpha===1?self.color:self.color.concat(this.valpha);return colorString.to.rgb.percent(args)},array:function(){return this.valpha===1?this.color.slice():this.color.concat(this.valpha)},object:function(){var result={};var channels=convert[this.model].channels;var labels=convert[this.model].labels;for(var i=0;i<channels;i++){result[labels[i]]=this.color[i]}if(this.valpha!==1){result.alpha=this.valpha}return result},unitArray:function(){var rgb=this.rgb().color;rgb[0]/=255;rgb[1]/=255;rgb[2]/=255;if(this.valpha!==1){rgb.push(this.valpha)}return rgb},unitObject:function(){var rgb=this.rgb().object();rgb.r/=255;rgb.g/=255;rgb.b/=255;if(this.valpha!==1){rgb.alpha=this.valpha}return rgb},round:function(places){places=Math.max(places||0,0);return new Color(this.color.map(roundToPlace(places)).concat(this.valpha),this.model)},alpha:function(val){if(arguments.length){return new Color(this.color.concat(Math.max(0,Math.min(1,val))),this.model)}return this.valpha},red:getset("rgb",0,maxfn(255)),green:getset("rgb",1,maxfn(255)),blue:getset("rgb",2,maxfn(255)),hue:getset(["hsl","hsv","hsl","hwb","hcg"],0,function(val){return(val%360+360)%360}),saturationl:getset("hsl",1,maxfn(100)),lightness:getset("hsl",2,maxfn(100)),saturationv:getset("hsv",1,maxfn(100)),value:getset("hsv",2,maxfn(100)),chroma:getset("hcg",1,maxfn(100)),gray:getset("hcg",2,maxfn(100)),white:getset("hwb",1,maxfn(100)),wblack:getset("hwb",2,maxfn(100)),cyan:getset("cmyk",0,maxfn(100)),magenta:getset("cmyk",1,maxfn(100)),yellow:getset("cmyk",2,maxfn(100)),black:getset("cmyk",3,maxfn(100)),x:getset("xyz",0,maxfn(100)),y:getset("xyz",1,maxfn(100)),z:getset("xyz",2,maxfn(100)),l:getset("lab",0,maxfn(100)),a:getset("lab",1),b:getset("lab",2),keyword:function(val){if(arguments.length){return new Color(val)}return convert[this.model].keyword(this.color)},hex:function(val){if(arguments.length){return new Color(val)}return colorString.to.hex(this.rgb().round().color)},rgbNumber:function(){var rgb=this.rgb().color;return(rgb[0]&255)<<16|(rgb[1]&255)<<8|rgb[2]&255},luminosity:function(){var rgb=this.rgb().color;var lum=[];for(var i=0;i<rgb.length;i++){var chan=rgb[i]/255;lum[i]=chan<=.03928?chan/12.92:Math.pow((chan+.055)/1.055,2.4)}return.2126*lum[0]+.7152*lum[1]+.0722*lum[2]},contrast:function(color2){var lum1=this.luminosity();var lum2=color2.luminosity();if(lum1>lum2){return(lum1+.05)/(lum2+.05)}return(lum2+.05)/(lum1+.05)},level:function(color2){var contrastRatio=this.contrast(color2);if(contrastRatio>=7.1){return"AAA"}return contrastRatio>=4.5?"AA":""},isDark:function(){var rgb=this.rgb().color;var yiq=(rgb[0]*299+rgb[1]*587+rgb[2]*114)/1e3;return yiq<128},isLight:function(){return!this.isDark()},negate:function(){var rgb=this.rgb();for(var i=0;i<3;i++){rgb.color[i]=255-rgb.color[i]}return rgb},lighten:function(ratio){var hsl=this.hsl();hsl.color[2]+=hsl.color[2]*ratio;return hsl},darken:function(ratio){var hsl=this.hsl();hsl.color[2]-=hsl.color[2]*ratio;return hsl},saturate:function(ratio){var hsl=this.hsl();hsl.color[1]+=hsl.color[1]*ratio;return hsl},desaturate:function(ratio){var hsl=this.hsl();hsl.color[1]-=hsl.color[1]*ratio;return hsl},whiten:function(ratio){var hwb=this.hwb();hwb.color[1]+=hwb.color[1]*ratio;return hwb},blacken:function(ratio){var hwb=this.hwb();hwb.color[2]+=hwb.color[2]*ratio;return hwb},grayscale:function(){var rgb=this.rgb().color;var val=rgb[0]*.3+rgb[1]*.59+rgb[2]*.11;return Color.rgb(val,val,val)},fade:function(ratio){return this.alpha(this.valpha-this.valpha*ratio)},opaquer:function(ratio){return this.alpha(this.valpha+this.valpha*ratio)},rotate:function(degrees){var hsl=this.hsl();var hue=hsl.color[0];hue=(hue+degrees)%360;hue=hue<0?360+hue:hue;hsl.color[0]=hue;return hsl},mix:function(mixinColor,weight){if(!mixinColor||!mixinColor.rgb){throw new Error('Argument to "mix" was not a Color instance, but rather an instance of '+typeof mixinColor)}var color1=mixinColor.rgb();var color2=this.rgb();var p=weight===undefined?.5:weight;var w=2*p-1;var a=color1.alpha()-color2.alpha();var w1=((w*a===-1?w:(w+a)/(1+w*a))+1)/2;var w2=1-w1;return Color.rgb(w1*color1.red()+w2*color2.red(),w1*color1.green()+w2*color2.green(),w1*color1.blue()+w2*color2.blue(),color1.alpha()*p+color2.alpha()*(1-p))}};Object.keys(convert).forEach(function(model){if(skippedModels.indexOf(model)!==-1){return}var channels=convert[model].channels;Color.prototype[model]=function(){if(this.model===model){return new Color(this)}if(arguments.length){return new Color(arguments,model)}var newAlpha=typeof arguments[channels]==="number"?channels:this.valpha;return new Color(assertArray(convert[this.model][model].raw(this.color)).concat(newAlpha),model)};Color[model]=function(color){if(typeof color==="number"){color=zeroArray(_slice.call(arguments),channels)}return new Color(color,model)}});function roundTo(num,places){return Number(num.toFixed(places))}function roundToPlace(places){return function(num){return roundTo(num,places)}}function getset(model,channel,modifier){model=Array.isArray(model)?model:[model];model.forEach(function(m){(limiters[m]||(limiters[m]=[]))[channel]=modifier});model=model[0];return function(val){var result;if(arguments.length){if(modifier){val=modifier(val)}result=this[model]();result.color[channel]=val;return result}result=this[model]().color[channel];if(modifier){result=modifier(result)}return result}}function maxfn(max){return function(v){return Math.max(0,Math.min(max,v))}}function assertArray(val){return Array.isArray(val)?val:[val]}function zeroArray(arr,length){for(var i=0;i<length;i++){if(typeof arr[i]!=="number"){arr[i]=0}}return arr}module.exports=Color},function(module,exports,__webpack_require__){var colorNames=__webpack_require__(5);var swizzle=__webpack_require__(18);var reverseNames={};for(var name in colorNames){if(colorNames.hasOwnProperty(name)){reverseNames[colorNames[name]]=name}}var cs=module.exports={to:{},get:{}};cs.get=function(string){var prefix=string.substring(0,3).toLowerCase();var val;var model;switch(prefix){case"hsl":val=cs.get.hsl(string);model="hsl";break;case"hwb":val=cs.get.hwb(string);model="hwb";break;default:val=cs.get.rgb(string);model="rgb";break}if(!val){return null}return{model,value:val}};cs.get.rgb=function(string){if(!string){return null}var abbr=/^#([a-f0-9]{3,4})$/i;var hex=/^#([a-f0-9]{6})([a-f0-9]{2})?$/i;var rgba=/^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;var per=/^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;var keyword=/(\D+)/;var rgb=[0,0,0,1];var match;var i;var hexAlpha;if(match=string.match(hex)){hexAlpha=match[2];match=match[1];for(i=0;i<3;i++){var i2=i*2;rgb[i]=parseInt(match.slice(i2,i2+2),16)}if(hexAlpha){rgb[3]=Math.round(parseInt(hexAlpha,16)/255*100)/100}}else if(match=string.match(abbr)){match=match[1];hexAlpha=match[3];for(i=0;i<3;i++){rgb[i]=parseInt(match[i]+match[i],16)}if(hexAlpha){rgb[3]=Math.round(parseInt(hexAlpha+hexAlpha,16)/255*100)/100}}else if(match=string.match(rgba)){for(i=0;i<3;i++){rgb[i]=parseInt(match[i+1],0)}if(match[4]){rgb[3]=parseFloat(match[4])}}else if(match=string.match(per)){for(i=0;i<3;i++){rgb[i]=Math.round(parseFloat(match[i+1])*2.55)}if(match[4]){rgb[3]=parseFloat(match[4])}}else if(match=string.match(keyword)){if(match[1]==="transparent"){return[0,0,0,0]}rgb=colorNames[match[1]];if(!rgb){return null}rgb[3]=1;return rgb}else{return null}for(i=0;i<3;i++){rgb[i]=clamp(rgb[i],0,255)}rgb[3]=clamp(rgb[3],0,1);return rgb};cs.get.hsl=function(string){if(!string){return null}var hsl=/^hsla?\(\s*([+-]?(?:\d*\.)?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;var match=string.match(hsl);if(match){var alpha=parseFloat(match[4]);var h=(parseFloat(match[1])+360)%360;var s=clamp(parseFloat(match[2]),0,100);var l=clamp(parseFloat(match[3]),0,100);var a=clamp(isNaN(alpha)?1:alpha,0,1);return[h,s,l,a]}return null};cs.get.hwb=function(string){if(!string){return null}var hwb=/^hwb\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;var match=string.match(hwb);if(match){var alpha=parseFloat(match[4]);var h=(parseFloat(match[1])%360+360)%360;var w=clamp(parseFloat(match[2]),0,100);var b=clamp(parseFloat(match[3]),0,100);var a=clamp(isNaN(alpha)?1:alpha,0,1);return[h,w,b,a]}return null};cs.to.hex=function(){var rgba=swizzle(arguments);return"#"+hexDouble(rgba[0])+hexDouble(rgba[1])+hexDouble(rgba[2])+(rgba[3]<1?hexDouble(Math.round(rgba[3]*255)):"")};cs.to.rgb=function(){var rgba=swizzle(arguments);return rgba.length<4||rgba[3]===1?"rgb("+Math.round(rgba[0])+", "+Math.round(rgba[1])+", "+Math.round(rgba[2])+")":"rgba("+Math.round(rgba[0])+", "+Math.round(rgba[1])+", "+Math.round(rgba[2])+", "+rgba[3]+")"};cs.to.rgb.percent=function(){var rgba=swizzle(arguments);var r=Math.round(rgba[0]/255*100);var g=Math.round(rgba[1]/255*100);var b=Math.round(rgba[2]/255*100);return rgba.length<4||rgba[3]===1?"rgb("+r+"%, "+g+"%, "+b+"%)":"rgba("+r+"%, "+g+"%, "+b+"%, "+rgba[3]+")"};cs.to.hsl=function(){var hsla=swizzle(arguments);return hsla.length<4||hsla[3]===1?"hsl("+hsla[0]+", "+hsla[1]+"%, "+hsla[2]+"%)":"hsla("+hsla[0]+", "+hsla[1]+"%, "+hsla[2]+"%, "+hsla[3]+")"};cs.to.hwb=function(){var hwba=swizzle(arguments);var a="";if(hwba.length>=4&&hwba[3]!==1){a=", "+hwba[3]}return"hwb("+hwba[0]+", "+hwba[1]+"%, "+hwba[2]+"%"+a+")"};cs.to.keyword=function(rgb){return reverseNames[rgb.slice(0,3)]};function clamp(num,min,max){return Math.min(Math.max(min,num),max)}function hexDouble(num){var str=num.toString(16).toUpperCase();return str.length<2?"0"+str:str}},function(module,exports,__webpack_require__){"use strict";var isArrayish=__webpack_require__(19);var concat=Array.prototype.concat;var slice=Array.prototype.slice;var swizzle=module.exports=function swizzle(args){var results=[];for(var i=0,len=args.length;i<len;i++){var arg=args[i];if(isArrayish(arg)){results=concat.call(results,slice.call(arg))}else{results.push(arg)}}return results};swizzle.wrap=function(fn){return function(){return fn(swizzle(arguments))}}},function(module,exports,__webpack_require__){"use strict";module.exports=function isArrayish(obj){if(!obj){return false}return obj instanceof Array||Array.isArray(obj)||obj.length>=0&&obj.splice instanceof Function}},function(module,exports,__webpack_require__){var conversions=__webpack_require__(6);var route=__webpack_require__(21);var convert={};var models=Object.keys(conversions);function wrapRaw(fn){var wrappedFn=function(args){if(args===undefined||args===null){return args}if(arguments.length>1){args=Array.prototype.slice.call(arguments)}return fn(args)};if("conversion"in fn){wrappedFn.conversion=fn.conversion}return wrappedFn}function wrapRounded(fn){var wrappedFn=function(args){if(args===undefined||args===null){return args}if(arguments.length>1){args=Array.prototype.slice.call(arguments)}var result=fn(args);if(typeof result==="object"){for(var len=result.length,i=0;i<len;i++){result[i]=Math.round(result[i])}}return result};if("conversion"in fn){wrappedFn.conversion=fn.conversion}return wrappedFn}models.forEach(function(fromModel){convert[fromModel]={};Object.defineProperty(convert[fromModel],"channels",{value:conversions[fromModel].channels});Object.defineProperty(convert[fromModel],"labels",{value:conversions[fromModel].labels});var routes=route(fromModel);var routeModels=Object.keys(routes);routeModels.forEach(function(toModel){var fn=routes[toModel];convert[fromModel][toModel]=wrapRounded(fn);convert[fromModel][toModel].raw=wrapRaw(fn)})});module.exports=convert},function(module,exports,__webpack_require__){var conversions=__webpack_require__(6);function buildGraph(){var graph={};var models=Object.keys(conversions);for(var len=models.length,i=0;i<len;i++){graph[models[i]]={distance:-1,parent:null}}return graph}function deriveBFS(fromModel){var graph=buildGraph();var queue=[fromModel];graph[fromModel].distance=0;while(queue.length){var current=queue.pop();var adjacents=Object.keys(conversions[current]);for(var len=adjacents.length,i=0;i<len;i++){var adjacent=adjacents[i];var node=graph[adjacent];if(node.distance===-1){node.distance=graph[current].distance+1;node.parent=current;queue.unshift(adjacent)}}}return graph}function link(from,to){return function(args){return to(from(args))}}function wrapConversion(toModel,graph){var path=[graph[toModel].parent,toModel];var fn=conversions[graph[toModel].parent][toModel];var cur=graph[toModel].parent;while(graph[cur].parent){path.unshift(graph[cur].parent);fn=link(conversions[graph[cur].parent][cur],fn);cur=graph[cur].parent}fn.conversion=path;return fn}module.exports=function(fromModel){var graph=deriveBFS(fromModel);var conversion={};var models=Object.keys(graph);for(var len=models.length,i=0;i<len;i++){var toModel=models[i];var node=graph[toModel];if(node.parent===null){continue}conversion[toModel]=wrapConversion(toModel,graph)}return conversion}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);var _ColorItem=__webpack_require__(2);var _ColorItem2=_interopRequireDefault(_ColorItem);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var ColorHandler=function(){function ColorHandler(colorpicker){_classCallCheck(this,ColorHandler);this.colorpicker=colorpicker}_createClass(ColorHandler,[{key:"bind",value:function bind(){if(this.colorpicker.options.color){this.color=this.createColor(this.colorpicker.options.color);return}if(!this.color&&!!this.colorpicker.inputHandler.getValue()){this.color=this.createColor(this.colorpicker.inputHandler.getValue(),this.colorpicker.options.autoInputFallback)}}},{key:"unbind",value:function unbind(){this.colorpicker.element.removeData("color")}},{key:"getColorString",value:function getColorString(){if(!this.hasColor()){return""}return this.color.string(this.format)}},{key:"setColorString",value:function setColorString(val){var color=val?this.createColor(val):null;this.color=color?color:null}},{key:"createColor",value:function createColor(val){var fallbackOnInvalid=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var autoHexInputFallback=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var disableHexInputFallback=!fallbackOnInvalid&&!autoHexInputFallback;var color=new _ColorItem2.default(this.resolveColorDelegate(val),this.format,disableHexInputFallback);if(!color.isValid()){if(fallbackOnInvalid){color=this.getFallbackColor()}this.colorpicker.trigger("colorpickerInvalid",color,val)}if(!this.isAlphaEnabled()){color.alpha=1}return color}},{key:"getFallbackColor",value:function getFallbackColor(){if(this.fallback&&this.fallback===this.color){return this.color}var fallback=this.resolveColorDelegate(this.fallback);var color=new _ColorItem2.default(fallback,this.format);if(!color.isValid()){console.warn("The fallback color is invalid. Falling back to the previous color or black if any.");return this.color?this.color:new _ColorItem2.default("#000000",this.format)}return color}},{key:"assureColor",value:function assureColor(){if(!this.hasColor()){this.color=this.getFallbackColor()}return this.color}},{key:"resolveColorDelegate",value:function resolveColorDelegate(color){var realColor=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var extResolvedColor=false;_jquery2.default.each(this.colorpicker.extensions,function(name,ext){if(extResolvedColor!==false){return}extResolvedColor=ext.resolveColor(color,realColor)});return extResolvedColor?extResolvedColor:color}},{key:"isInvalidColor",value:function isInvalidColor(){return!this.hasColor()||!this.color.isValid()}},{key:"isAlphaEnabled",value:function isAlphaEnabled(){return this.colorpicker.options.useAlpha!==false}},{key:"hasColor",value:function hasColor(){return this.color instanceof _ColorItem2.default}},{key:"fallback",get:function get(){return this.colorpicker.options.fallbackColor?this.colorpicker.options.fallbackColor:this.hasColor()?this.color:null}},{key:"format",get:function get(){if(this.colorpicker.options.format){return this.colorpicker.options.format}if(this.hasColor()&&this.color.hasTransparency()&&this.color.format.match(/^hex/)){return this.isAlphaEnabled()?"rgba":"hex"}if(this.hasColor()){return this.color.format}return"rgb"}},{key:"color",get:function get(){return this.colorpicker.element.data("color")},set:function set(value){this.colorpicker.element.data("color",value);if(value instanceof _ColorItem2.default&&this.colorpicker.options.format==="auto"){this.colorpicker.options.format=this.color.format}}}]);return ColorHandler}();exports.default=ColorHandler;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _jquery=__webpack_require__(0);var _jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var PickerHandler=function(){function PickerHandler(colorpicker){_classCallCheck(this,PickerHandler);this.colorpicker=colorpicker;this.picker=null}_createClass(PickerHandler,[{key:"bind",value:function bind(){var picker=this.picker=(0,_jquery2.default)(this.options.template);if(this.options.customClass){picker.addClass(this.options.customClass)}if(this.options.horizontal){picker.addClass("colorpicker-horizontal")}if(this._supportsAlphaBar()){this.options.useAlpha=true;picker.addClass("colorpicker-with-alpha")}else{this.options.useAlpha=false}}},{key:"attach",value:function attach(){var pickerParent=this.colorpicker.container?this.colorpicker.container:null;if(pickerParent){this.picker.appendTo(pickerParent)}}},{key:"unbind",value:function unbind(){this.picker.remove()}},{key:"_supportsAlphaBar",value:function _supportsAlphaBar(){return(this.options.useAlpha||this.colorpicker.colorHandler.hasColor()&&this.color.hasTransparency())&&this.options.useAlpha!==false&&(!this.options.format||this.options.format&&!this.options.format.match(/^hex([36])?$/i))}},{key:"update",value:function update(){if(!this.colorpicker.colorHandler.hasColor()){return}var vertical=this.options.horizontal!==true,slider=vertical?this.options.sliders:this.options.slidersHorz;var saturationGuide=this.picker.find(".colorpicker-saturation .colorpicker-guide"),hueGuide=this.picker.find(".colorpicker-hue .colorpicker-guide"),alphaGuide=this.picker.find(".colorpicker-alpha .colorpicker-guide");var hsva=this.color.toHsvaRatio();if(hueGuide.length){hueGuide.css(vertical?"top":"left",(vertical?slider.hue.maxTop:slider.hue.maxLeft)*(1-hsva.h))}if(alphaGuide.length){alphaGuide.css(vertical?"top":"left",(vertical?slider.alpha.maxTop:slider.alpha.maxLeft)*(1-hsva.a))}if(saturationGuide.length){saturationGuide.css({top:slider.saturation.maxTop-hsva.v*slider.saturation.maxTop,left:hsva.s*slider.saturation.maxLeft})}this.picker.find(".colorpicker-saturation").css("backgroundColor",this.color.getCloneHueOnly().toHexString());var hexColor=this.color.toHexString();var alphaBg="";if(this.options.horizontal){alphaBg="linear-gradient(to right, "+hexColor+" 0%, transparent 100%)"}else{alphaBg="linear-gradient(to bottom, "+hexColor+" 0%, transparent 100%)"}this.picker.find(".colorpicker-alpha-color").css("background",alphaBg)}},{key:"options",get:function get(){return this.colorpicker.options}},{key:"color",get:function get(){return this.colorpicker.colorHandler.color}}]);return PickerHandler}();exports.default=PickerHandler;module.exports=exports.default},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var AddonHandler=function(){function AddonHandler(colorpicker){_classCallCheck(this,AddonHandler);this.colorpicker=colorpicker;this.addon=null}_createClass(AddonHandler,[{key:"hasAddon",value:function hasAddon(){return!!this.addon}},{key:"bind",value:function bind(){this.addon=this.colorpicker.options.addon?this.colorpicker.element.find(this.colorpicker.options.addon):null;if(this.addon&&this.addon.length===0){this.addon=null}}},{key:"unbind",value:function unbind(){if(this.hasAddon()){this.addon.off(".colorpicker")}}},{key:"update",value:function update(){if(!this.colorpicker.colorHandler.hasColor()||!this.hasAddon()){return}var colorStr=this.colorpicker.colorHandler.getColorString();var styles={background:colorStr};var icn=this.addon.find("i").eq(0);if(icn.length>0){icn.css(styles)}else{this.addon.css(styles)}}}]);return AddonHandler}();exports.default=AddonHandler;module.exports=exports.default}])});
+//# sourceMappingURL=bootstrap-colorpicker.min.js.map

libs/builder/blocks-bootstrap4.js

@@ -0,0 +1,1244 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/Vvvebjs
+*/
+
+//Snippets from https://bootsnipp.com/license
+
+Vvveb.BlocksGroup['Bootstrap'] =
+["bootstrap4/product-card", "bootstrap4/user-online", "bootstrap4/our-team", "bootstrap4/login-form", "bootstrap4/about-team", "bootstrap4/pricing-1", "bootstrap4/loading-circle", "bootstrap4/block-quote", "bootstrap4/subscribe-newsletter"];
+
+
+Vvveb.Blocks.add("bootstrap4/product-card", {
+    name: "Product Cards with Transition",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/0c3153bcb2ed97483a82b1f4ea966f8187379792.png",
+    html: `
+<div class="container">
+	<div class="row ads">
+    <!-- Category Card -->
+    <div class="col-md-4">
+        <div class="card rounded">
+            <div class="card-image">
+                <span class="card-notify-badge">Low KMS</span>
+                <span class="card-notify-year">2018</span>
+                <img class="img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC011A021001.jpg&width=440&height=262" alt="Alternate Text" />
+            </div>
+            <div class="card-image-overlay m-auto">
+                <span class="card-detail-badge">Used</span>
+                <span class="card-detail-badge">$28,000.00</span>
+                <span class="card-detail-badge">13000 Kms</span>
+            </div>
+            <div class="card-body text-center">
+                <div class="ad-title m-auto">
+                    <h5>Honda Accord LX</h5>
+                </div>
+                <a class="ad-btn" href="#">View</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card rounded">
+            <div class="card-image">
+                <span class="card-notify-badge">Fully-Loaded</span>
+                <span class="card-notify-year">2017</span>
+                <img class="img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=CAC80HOC021B121001.jpg&width=440&height=262" alt="Alternate Text" />
+            </div>
+            <div class="card-image-overlay m-auto">
+                <span class="card-detail-badge">Used</span>
+                <span class="card-detail-badge">$28,000.00</span>
+                <span class="card-detail-badge">13000 Kms</span>
+            </div>
+            <div class="card-body text-center">
+                <div class="ad-title m-auto">
+                    <h5>Honda CIVIC HATCHBACK LS</h5>
+                </div>
+                <a class="ad-btn" href="#">View</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-4">
+        <div class="card rounded">
+            <div class="card-image">
+                <span class="card-notify-badge">Price Reduced</span>
+                <span class="card-notify-year">2018</span>
+                <img class="img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC091A021001.jpg&width=440&height=262" alt="Alternate Text" />
+            </div>
+            <div class="card-image-overlay m-auto">
+                <span class="card-detail-badge">Used</span>
+                <span class="card-detail-badge">$22,000.00</span>
+                <span class="card-detail-badge">8000 Kms</span>
+            </div>
+            <div class="card-body text-center">
+                <div class="ad-title m-auto">
+                    <h5>Honda Accord Hybrid LT</h5>
+                </div>
+                <a class="ad-btn" href="#">View</a>
+            </div>
+        </div>
+    </div>
+
+</div>
+<style>
+.ads {
+    margin: 30px 0 30px 0;
+   
+}
+
+.ads .card-notify-badge {
+        position: absolute;
+        left: -10px;
+        top: -20px;
+        background: #f2d900;
+        text-align: center;
+        border-radius: 30px 30px 30px 30px; 
+        color: #000;
+        padding: 5px 10px;
+        font-size: 14px;
+
+    }
+
+.ads .card-notify-year {
+        position: absolute;
+        right: -10px;
+        top: -20px;
+        background: #ff4444;
+        border-radius: 50%;
+        text-align: center;
+        color: #fff;      
+        font-size: 14px;      
+        width: 50px;
+        height: 50px;    
+        padding: 15px 0 0 0;
+}
+
+
+.ads .card-detail-badge {      
+        background: #f2d900;
+        text-align: center;
+        border-radius: 30px 30px 30px 30px;
+        color: #000;
+        padding: 5px 10px;
+        font-size: 14px;        
+    }
+
+   
+
+.ads .card:hover {
+            background: #fff;
+            box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
+            border-radius: 4px;
+            transition: all 0.3s ease;
+        }
+
+.ads .card-image-overlay {
+        font-size: 20px;
+        
+    }
+
+
+.ads .card-image-overlay span {
+            display: inline-block;              
+        }
+
+
+.ads .ad-btn {
+        text-transform: uppercase;
+        width: 150px;
+        height: 40px;
+        border-radius: 80px;
+        font-size: 16px;
+        line-height: 35px;
+        text-align: center;
+        border: 3px solid #e6de08;
+        display: block;
+        text-decoration: none;
+        margin: 20px auto 1px auto;
+        color: #000;
+        overflow: hidden;        
+        position: relative;
+        background-color: #e6de08;
+    }
+
+.ads .ad-btn:hover {
+            background-color: #e6de08;
+            color: #1e1717;
+            border: 2px solid #e6de08;
+            background: transparent;
+            transition: all 0.3s ease;
+            box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
+        }
+
+.ads .ad-title h5 {
+        text-transform: uppercase;
+        font-size: 18px;
+    }
+</style>    
+</div>
+`,
+});    
+
+Vvveb.Blocks.add("bootstrap4/user-online", {
+    name: "User online",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/75091e3b5e6efba238457f05e6f9edd847de1bf8.jpg",
+    html: `
+   	<div class="container user-online-thumb">
+		<div class="d-flex justify-content-center h-100">
+			<div class="image_outer_container">
+				<div class="green_icon"></div>
+				<div class="image_inner_container">
+					<img src="https://source.unsplash.com/9UVmlIb0wJU/500x500">
+				</div>
+			</div>
+		</div>
+<style>
+.container.user-online-thumb{
+	height: 100%;
+	align-content: center;
+}
+
+.user-online-thumb .image_outer_container{
+margin-top: auto;
+margin-bottom: auto;
+border-radius: 50%;
+position: relative;
+}
+
+.user-online-thumb .image_inner_container{
+border-radius: 50%;
+padding: 5px;
+background: #833ab4; 
+background: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4); 
+background: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
+}
+
+.user-online-thumb .image_inner_container img{
+height: 200px;
+width: 200px;
+border-radius: 50%;
+border: 5px solid white;
+}
+
+.user-online-thumb .image_outer_container .green_icon{
+ background-color: #4cd137;
+ position: absolute;
+ right: 30px;
+ bottom: 10px;
+ height: 30px;
+ width: 30px;
+ border:5px solid white;
+ border-radius: 50%;
+}
+</style>	
+</div>
+`,
+});    
+
+Vvveb.Blocks.add("bootstrap4/our-team", {
+    name: "Our team",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/b43c39513963d870d399a0aab2438af225f9f485.jpg",
+    html:`
+<div class="team pb-5">
+    <div class="container">
+        <h5 class="div-title h1">OUR TEAM</h5>
+        <div class="row">
+            <!-- Team member -->
+            <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="image-flip" >
+                    <div class="mainflip flip-0">
+                        <div class="frontside">
+                            <div class="card">
+                                <div class="card-body text-center">
+                                    <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image"></p>
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.</p>
+                                    <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="backside">
+                            <div class="card">
+                                <div class="card-body text-center mt-4">
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-facebook"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-skype"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-google"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ./Team member -->
+            <!-- Team member -->
+            <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
+                    <div class="mainflip">
+                        <div class="frontside">
+                            <div class="card">
+                                <div class="card-body text-center">
+                                    <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_02.png" alt="card image"></p>
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.</p>
+                                    <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="backside">
+                            <div class="card">
+                                <div class="card-body text-center mt-4">
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-facebook"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-skype"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-google"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ./Team member -->
+            <!-- Team member -->
+            <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
+                    <div class="mainflip">
+                        <div class="frontside">
+                            <div class="card">
+                                <div class="card-body text-center">
+                                    <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_03.png" alt="card image"></p>
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.</p>
+                                    <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="backside">
+                            <div class="card">
+                                <div class="card-body text-center mt-4">
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-facebook"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-skype"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-google"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ./Team member -->
+            <!-- Team member -->
+            <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
+                    <div class="mainflip">
+                        <div class="frontside">
+                            <div class="card">
+                                <div class="card-body text-center">
+                                    <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_04.jpg" alt="card image"></p>
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.</p>
+                                    <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="backside">
+                            <div class="card">
+                                <div class="card-body text-center mt-4">
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-facebook"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-skype"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-google"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ./Team member -->
+            <!-- Team member -->
+            <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
+                    <div class="mainflip">
+                        <div class="frontside">
+                            <div class="card">
+                                <div class="card-body text-center">
+                                    <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_05.png" alt="card image"></p>
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.</p>
+                                    <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="backside">
+                            <div class="card">
+                                <div class="card-body text-center mt-4">
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-facebook"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-skype"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-google"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ./Team member -->
+            <!-- Team member -->
+            <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
+                    <div class="mainflip">
+                        <div class="frontside">
+                            <div class="card">
+                                <div class="card-body text-center">
+                                    <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_06.jpg" alt="card image"></p>
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.</p>
+                                    <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="backside">
+                            <div class="card">
+                                <div class="card-body text-center mt-4">
+                                    <h4 class="card-title">Sunlimetech</h4>
+                                    <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-facebook"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-skype"></i>
+                                            </a>
+                                        </li>
+                                        <li class="list-inline-item">
+                                            <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02">
+                                                <i class="fa fa-google"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ./Team member -->
+
+        </div>
+    </div>
+
+<style>
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+.team {
+    background: #eee !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: #108d6f;
+    border-color: #108d6f;
+    box-shadow: none;
+    outline: none;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #007b5e;
+    border-color: #007b5e;
+}
+
+section {
+    padding: 60px 0;
+}
+
+section .section-title {
+    text-align: center;
+    color: #007b5e;
+    margin-bottom: 50px;
+    text-transform: uppercase;
+}
+
+.team .card {
+    border: none;
+    background: #ffffff;
+}
+
+.image-flip:hover .backside,
+.image-flip.hover .backside {
+    -webkit-transform: rotateY(0deg);
+    -moz-transform: rotateY(0deg);
+    -o-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+    border-radius: .25rem;
+}
+
+.image-flip:hover .frontside,
+.image-flip.hover .frontside {
+    -webkit-transform: rotateY(180deg);
+    -moz-transform: rotateY(180deg);
+    -o-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+}
+
+.mainflip {
+    -webkit-transition: 1s;
+    -webkit-transform-style: preserve-3d;
+    -ms-transition: 1s;
+    -moz-transition: 1s;
+    -moz-transform: perspective(1000px);
+    -moz-transform-style: preserve-3d;
+    -ms-transform-style: preserve-3d;
+    transition: 1s;
+    transform-style: preserve-3d;
+    position: relative;
+}
+
+.frontside {
+    position: relative;
+    -webkit-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    z-index: 2;
+    margin-bottom: 30px;
+}
+
+.backside {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: white;
+    -webkit-transform: rotateY(-180deg);
+    -moz-transform: rotateY(-180deg);
+    -o-transform: rotateY(-180deg);
+    -ms-transform: rotateY(-180deg);
+    transform: rotateY(-180deg);
+    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
+    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
+    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
+}
+
+.frontside,
+.backside {
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition: 1s;
+    -webkit-transform-style: preserve-3d;
+    -moz-transition: 1s;
+    -moz-transform-style: preserve-3d;
+    -o-transition: 1s;
+    -o-transform-style: preserve-3d;
+    -ms-transition: 1s;
+    -ms-transform-style: preserve-3d;
+    transition: 1s;
+    transform-style: preserve-3d;
+}
+
+.frontside .card,
+.backside .card {
+    min-height: 312px;
+}
+
+.backside .card a {
+    font-size: 18px;
+    color: #007b5e !important;
+}
+
+.frontside .card .card-title,
+.backside .card .card-title {
+    color: #007b5e !important;
+}
+
+.frontside .card .card-body img {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+}
+</style>
+</div>
+`,
+});
+
+
+Vvveb.Blocks.add("bootstrap4/login-form", {
+    name: "Login form",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/fd3f41be24ffb976d66edf08adc4b2453a871b19.jpeg",
+    html:`
+<div class="container">
+    <div class="row justify-content-md-center">
+    
+        <div class="col-sm-6 col-md-6 col-lg-6">
+            <div class="account-wall">
+                <div id="my-tab-content" class="tab-content">
+						<div class="tab-pane active" id="login">
+               		    <img class="profile-img img-fluid rounded-circle" src="https://source.unsplash.com/9UVmlIb0wJU/200x200"
+                    alt="">
+               			<form class="form-signin" action="" method="">
+               				<input type="text" class="form-control" placeholder="Username" required autofocus>
+               				<input type="password" class="form-control" placeholder="Password" required>
+               				<input type="submit" class="btn btn-lg btn-default w-100" value="Sign In" />
+               			</form>
+               			<div id="tabs" data-tabs="tabs">
+               				<p class="text-center"><a href="#register" data-bs-toggle="tab">Need an Account?</a></p>
+               				<p class="text-center"><a href="#select" data-bs-toggle="tab">Select Account</a></p>
+              				</div>
+						</div>
+						<div class="tab-pane" id="register">
+							<form class="form-signin" action="" method="">
+								<input type="text" class="form-control" placeholder="User Name ..." required autofocus>
+								<input type="email" class="form-control" placeholder="Emaill Address ..." required>
+								<input type="password" class="form-control" placeholder="Password ..." required>
+								<input type="submit" class="btn btn-lg btn-default w-100" value="Sign Up" />
+							</form>
+							<div id="tabs" data-tabs="tabs">
+               			<p class="text-center"><a href="#login" data-bs-toggle="tab">Have an Account?</a></p>
+              			</div>
+						</div>
+						<div class="tab-pane" id="select">
+							<div id="tabs" data-tabs="tabs">
+								<div class="media account-select">
+									<a href="#user1" data-bs-toggle="tab">
+										<div class="pull-left">		
+											<img class="select-img" src="https://source.unsplash.com/9UVmlIb0wJU/500x500"
+                    alt="">
+										</div>	 
+										<div class="media-body">
+											<h4 class="select-name">User Name 1</h4>
+										</div>
+									</a>
+								</div>
+                                <hr />
+								<div class="media account-select">
+									<a href="#user2" data-bs-toggle="tab">
+										<div class="pull-left">		
+											<img class="select-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
+                    alt="">
+										</div>	 
+										<div class="media-body">
+											<h4 class="select-name">User Name 2</h4>
+										</div>
+									</a>
+								</div>
+                                <hr />
+               			<p class="text-center"><a href="#login" data-bs-toggle="tab">Back to Login</a></p>
+              			</div>
+						</div>
+						<div class="tab-pane" id="user1">
+							<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
+                    alt="">
+							<h3 class="text-center">User Name 1</h3>
+							<form class="form-signin" action="" method="">
+								<input type="hidden" class="form-control" value="User Name">
+								<input type="password" class="form-control" placeholder="Password" autofocus required>
+								<input type="submit" class="btn btn-lg btn-default w-100" value="Sign In" />
+							</form>
+							<p class="text-center"><a href="#login" data-bs-toggle="tab">Back to Login</a></p>
+               		<p class="text-center"><a href="#select" data-bs-toggle="tab">Select another Account</a></p>
+						</div>
+						<div class="tab-pane" id="user2">
+							<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
+                    alt="">
+							<h3 class="text-center">User Name 2</h3>
+							<form class="form-signin" action="" method="">
+								<input type="hidden" class="form-control" value="User Name">
+								<input type="password" class="form-control" placeholder="Password" autofocus required>
+								<input type="submit" class="btn btn-lg btn-default w-100" value="Sign In" />
+							</form>
+							<p class="text-center"><a href="#login" data-bs-toggle="tab">Back to Login</a></p>
+               		<p class="text-center"><a href="#select" data-bs-toggle="tab">Select another Account</a></p>
+						</div>
+					</div>
+            </div>
+        </div>
+    </div>
+<style>
+body{
+    background-color:#f5f5f5;
+}
+.form-signin
+{
+    max-width: 330px;
+    padding: 15px;
+    margin: 0 auto;
+}
+.form-signin .form-control
+{
+    position: relative;
+    font-size: 16px;
+    height: auto;
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.form-signin .form-control:focus
+{
+    z-index: 2;
+}
+.form-signin input[type="text"]
+{
+    margin-bottom: -1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.form-signin input[type="password"]
+{
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.account-wall
+{
+    margin-top: 80px;
+    padding: 40px 0px 20px 0px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
+}
+.login-title
+{
+    color: #555;
+    font-size: 22px;
+    font-weight: 400;
+    display: block;
+}
+.profile-img
+{
+    width: 96px;
+    height: 96px;
+    margin: 0 auto 10px;
+    display: block;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+.select-img
+{
+	border-radius: 50%;
+    display: block;
+    height: 75px;
+    margin: 0 30px 10px;
+    width: 75px;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+.select-name
+{
+    display: block;
+    margin: 30px 10px 10px;
+}
+
+.logo-img
+{
+    width: 96px;
+    height: 96px;
+    margin: 0 auto 10px;
+    display: block;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+</style>    
+</div>
+`,
+});
+
+
+
+Vvveb.Blocks.add("bootstrap4/about-team", {
+    name: "About and Team Section",
+    image: "https://assets.startbootstrap.com/img/screenshots/snippets/about-team.jpg",
+    html:`
+<div class="container">
+  <div class="row">
+    <!-- Team Member 1 -->
+    <div class="col-xl-3 col-md-6 mb-4">
+      <div class="card border-0 shadow">
+        <img src="https://source.unsplash.com/TMgQMXoglsM/500x350" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+          <h5 class="card-title mb-0">Team Member</h5>
+          <div class="card-text text-black-50">Web Developer</div>
+        </div>
+      </div>
+    </div>
+    <!-- Team Member 2 -->
+    <div class="col-xl-3 col-md-6 mb-4">
+      <div class="card border-0 shadow">
+        <img src="https://source.unsplash.com/9UVmlIb0wJU/500x350" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+          <h5 class="card-title mb-0">Team Member</h5>
+          <div class="card-text text-black-50">Web Developer</div>
+        </div>
+      </div>
+    </div>
+    <!-- Team Member 3 -->
+    <div class="col-xl-3 col-md-6 mb-4">
+      <div class="card border-0 shadow">
+        <img src="https://source.unsplash.com/sNut2MqSmds/500x350" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+          <h5 class="card-title mb-0">Team Member</h5>
+          <div class="card-text text-black-50">Web Developer</div>
+        </div>
+      </div>
+    </div>
+    <!-- Team Member 4 -->
+    <div class="col-xl-3 col-md-6 mb-4">
+      <div class="card border-0 shadow">
+        <img src="https://source.unsplash.com/ZI6p3i9SbVU/500x350" class="card-img-top" alt="...">
+        <div class="card-body text-center">
+          <h5 class="card-title mb-0">Team Member</h5>
+          <div class="card-text text-black-50">Web Developer</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /.row -->
+
+</div>
+`,
+});
+
+
+
+Vvveb.Blocks.add("bootstrap4/pricing-1", {
+    name: "Pricing table",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/e92f797807bb4cd880bc3f161d9f9869854b6991.jpeg",
+    html:`
+<div id="plans">
+  <div class="container">
+	<div class="row">
+
+		<!-- item -->
+		<div class="col-md-4 text-center">
+			<div class="panel panel-danger panel-pricing">
+				<div class="panel-heading">
+					<i class="fa fa-desktop"></i>
+					<h3>Plan 1</h3>
+				</div>
+				<div class="panel-body text-center">
+					<p><strong>$100 / Month</strong></p>
+				</div>
+				<ul class="list-group text-center">
+					<li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
+					<li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
+					<li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
+				</ul>
+				<div class="panel-footer">
+					<a class="btn btn-lg w-100 btn-danger" href="#">BUY NOW!</a>
+				</div>
+			</div>
+		</div>
+		<!-- /item -->
+
+		<!-- item -->
+		<div class="col-md-4 text-center">
+			<div class="panel panel-warning panel-pricing">
+				<div class="panel-heading">
+					<i class="fa fa-desktop"></i>
+					<h3>Plan 2</h3>
+				</div>
+				<div class="panel-body text-center">
+					<p><strong>$200 / Month</strong></p>
+				</div>
+				<ul class="list-group text-center">
+					<li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
+					<li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
+					<li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
+				</ul>
+				<div class="panel-footer">
+					<a class="btn btn-lg w-100 btn-warning" href="#">BUY NOW!</a>
+				</div>
+			</div>
+		</div>
+		<!-- /item -->
+
+		<!-- item -->
+		<div class="col-md-4 text-center">
+			<div class="panel panel-success panel-pricing">
+				<div class="panel-heading">
+					<i class="fa fa-desktop"></i>
+					<h3>Plan 3</h3>
+				</div>
+				<div class="panel-body text-center">
+					<p><strong>$300 / Month</strong></p>
+				</div>
+				<ul class="list-group text-center">
+					<li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
+					<li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
+					<li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
+				</ul>
+				<div class="panel-footer">
+					<a class="btn btn-lg w-100 btn-success" href="#">BUY NOW!</a>
+				</div>
+			</div>
+		</div>
+		<!-- /item -->
+
+		</div>
+	</div>
+<style>
+@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
+
+.panel-pricing {
+  -moz-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  -webkit-transition: all .3s ease;
+}
+.panel-pricing:hover {
+  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
+}
+.panel-pricing .panel-heading {
+  padding: 20px 10px;
+}
+.panel-pricing .panel-heading .fa {
+  margin-top: 10px;
+  font-size: 58px;
+}
+.panel-pricing .list-group-item {
+  color: #777777;
+  border-bottom: 1px solid rgba(250, 250, 250, 0.5);
+}
+.panel-pricing .list-group-item:last-child {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.panel-pricing .list-group-item:first-child {
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+.panel-pricing .panel-body {
+  background-color: #f0f0f0;
+  font-size: 40px;
+  color: #777777;
+  padding: 20px;
+  margin: 0px;
+}
+</style>
+</div>
+`,
+});
+
+Vvveb.Blocks.add("bootstrap4/loading-circle", {
+    name: "Loading circle",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/39f0571b9a377cb7ac9c0c11d2346b07dabe1c66.png",
+    html:`
+<div class="loading-circle">
+  <div class="loader">
+    <div class="loader">
+        <div class="loader">
+           <div class="loader">
+
+           </div>
+        </div>
+    </div>
+  </div>
+<style>  
+
+.loading-circle {
+	width: 150px;
+    height: 150px;	
+}
+
+.loader {
+    width: calc(100% - 0px);
+	height: calc(100% - 0px);
+	border: 8px solid #162534;
+	border-top: 8px solid #09f;
+	border-radius: 50%;
+	animation: rotate 5s linear infinite;
+}
+
+@keyframes rotate {
+100% {transform: rotate(360deg);}
+} 
+</style>  
+</div> 
+`,
+});
+
+
+Vvveb.Blocks.add("bootstrap4/block-quote", {
+    name: "Block quote",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/d9f382e143b77d5a630dd79a2a3860611a8a953c.jpg",
+    html:`
+<div class="container">
+    <blockquote class="quote-box">
+      <p class="quotation-mark">
+        “
+      </p>
+      <p class="quote-text">
+        Don't believe anything that you read on the internet, it may be fake. 
+      </p>
+      <hr>
+      <div class="blog-post-actions">
+        <p class="blog-post-bottom pull-left">
+          Abraham Lincoln
+        </p>
+        <p class="blog-post-bottom pull-right">
+          <span class="badge quote-badge">896</span>  ❤
+        </p>
+      </div>
+    </blockquote>
+<style>
+blockquote{
+    border-left:none
+}
+
+.quote-badge{
+    background-color: rgba(0, 0, 0, 0.2);   
+}
+
+.quote-box{
+    
+    overflow: hidden;
+    margin-top: -50px;
+    padding-top: -100px;
+    border-radius: 17px;
+    background-color: #4ADFCC;
+    margin-top: 25px;
+    color:white;
+    width: 325px;
+    box-shadow: 2px 2px 2px 2px #E0E0E0;
+    
+}
+
+.quotation-mark{
+    
+    margin-top: -10px;
+    font-weight: bold;
+    font-size:100px;
+    color:white;
+    font-family: "Times New Roman", Georgia, Serif;
+    
+}
+
+.quote-text{
+    
+    font-size: 19px;
+    margin-top: -65px;
+}
+</style>
+</div>
+`,
+});
+
+Vvveb.Blocks.add("bootstrap4/subscribe-newsletter", {
+    name: "Subscribe newsletter",
+    image: "https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/4f610196b7cb9596555c9c8c475d93ab4ef084f6.jpg",
+    html:`
+<div class="subscribe-area pb-50 pt-70">
+<div class="container">
+	<div class="row">
+
+					<div class="col-md-4">
+						<div class="subscribe-text mb-15">
+							<span>JOIN OUR NEWSLETTER</span>
+							<h2>subscribe newsletter</h2>
+						</div>
+					</div>
+					<div class="col-md-8">
+						<div class="subscribe-wrapper subscribe2-wrapper mb-15">
+							<div class="subscribe-form">
+								<form action="#">
+									<input placeholder="enter your email address" type="email">
+									<button>subscribe <i class="fas fa-long-arrow-alt-right"></i></button>
+								</form>
+							</div>
+						</div>
+					</div>
+				</div>
+
+</div>
+<style>
+.subscribe-area {
+background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
+}
+
+.pb-50 {
+    padding-bottom: 50px;
+}
+.pt-70 {
+    padding-top: 70px;
+}
+
+.mb-15 {
+    margin-bottom: 15px;
+}
+
+.subscribe-text span {
+    font-size: 12px;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 5px;
+}
+.subscribe-text h2 {
+    color: #fff;
+    font-size: 36px;
+    font-weight: 300;
+    margin-bottom: 0;
+    margin-top: 6px;
+}
+.subscribe-wrapper {
+    overflow: hidden;
+}
+.mb-15 {
+    margin-bottom: 15px;
+}
+.subscribe-form {
+}
+.subscribe2-wrapper .subscribe-form input {
+    background: none;
+    border: 1px solid #fff;
+    border-radius: 30px;
+    color: #fff;
+    display: inline-block;
+    font-size: 15px;
+    font-weight: 300;
+    height: 57px;
+    margin-right: 17px;
+    padding-left: 35px;
+    width: 70%;
+    cursor: pointer;
+}
+ 
+.subscribe2-wrapper .subscribe-form button {
+    background: #ffff;
+    border: none;
+    border-radius: 30px;
+    color: #4b5d73;
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1;
+    padding: 18px 46px;
+    transition: all 0.3s ease 0s;
+}
+.subscribe2-wrapper .subscribe-form button i {
+    font-size: 18px;
+    padding-left: 5px;
+}
+</style>
+</div>
+`,
+});

libs/builder/components-bootstrap4.js

@@ -0,0 +1,2458 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/Vvvebjs
+*/
+
+bgcolorClasses = ["bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-light-subtle", "bg-dark", "bg-white"]
+
+bgcolorSelectOptions = 
+[{
+	value: "Default",
+	text: ""
+}, 
+{
+	value: "bg-primary",
+	text: "Primary"
+}, {
+	value: "bg-secondary",
+	text: "Secondary"
+}, {
+	value: "bg-success",
+	text: "Success"
+}, {
+	value: "bg-danger",
+	text: "Danger"
+}, {
+	value: "bg-warning",
+	text: "Warning"
+}, {
+	value: "bg-info",
+	text: "Info"
+}, {
+	value: "bg-light-subtle",
+	text: "Light"
+}, {
+	value: "bg-dark",
+	text: "Dark"
+}, {
+	value: "bg-white",
+	text: "White"
+}];
+
+function changeNodeName(node, newNodeName)
+{
+	var newNode;
+	newNode = document.createElement(newNodeName);
+	attributes = node.get(0).attributes;
+	
+	for (i = 0, len = attributes.length; i < len; i++) {
+		newNode.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
+	}
+
+	$(newNode).append($(node).contents());
+	$(node).replaceWith(newNode);
+	
+	return newNode;
+}
+
+Vvveb.ComponentsGroup['Bootstrap 4'] =
+["html/container", "html/gridrow", "html/button", "html/buttongroup", "html/buttontoolbar", "html/heading", "html/image", "html/jumbotron", "html/alert", "html/card", "html/listgroup", "html/hr", "html/taglabel", "html/badge", "html/progress", "html/navbar", "html/breadcrumbs", "html/pagination", "html/form", "html/textinput", "html/textareainput", "html/selectinput", "html/fileinput", "html/checkbox", "html/radiobutton", "html/table", "html/paragraph", "html/link", "html/video", "html/button"];
+
+
+var base_sort = 100;//start sorting for base component from 100 to allow extended properties to be first
+var style_section = 'style';
+
+Vvveb.Components.add("_base", {
+    name: "Element",
+	properties: [{
+        key: "element_header",
+        inputtype: SectionInput,
+        name:false,
+        sort:base_sort++,
+        data: {header:"General"},
+    }, {
+        name: "Id",
+        key: "id",
+        htmlAttr: "id",
+        sort: base_sort++,
+        inline:true,
+        col:6,
+        inputtype: TextInput
+    }, {
+        name: "Class",
+        key: "class",
+        htmlAttr: "class",
+        sort: base_sort++,
+        inline:true,
+        col:6,
+        inputtype: TextInput
+    }
+   ]
+});    
+
+//display
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [
+     {
+        key: "display_header",
+        inputtype: SectionInput,
+        name:false,
+        sort: base_sort++,
+		section: style_section,
+        data: {header:"Display"},
+    }, {
+        name: "Display",
+        key: "display",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: SelectInput,
+        validValues: ["block", "inline", "inline-block", "none"],
+        data: {
+            options: [{
+                value: "block",
+                text: "Block"
+            }, {
+                value: "inline",
+                text: "Inline"
+            }, {
+                value: "inline-block",
+                text: "Inline Block"
+            }, {
+                value: "none",
+                text: "none"
+            }]
+        }
+    }, {
+        name: "Position",
+        key: "position",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: SelectInput,
+        validValues: ["static", "fixed", "relative", "absolute"],
+        data: {
+            options: [{
+                value: "static",
+                text: "Static"
+            }, {
+                value: "fixed",
+                text: "Fixed"
+            }, {
+                value: "relative",
+                text: "Relative"
+            }, {
+                value: "absolute",
+                text: "Absolute"
+            }]
+        }
+    }, {
+        name: "Top",
+        key: "top",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        parent:"",
+        inputtype: CssUnitInput
+	}, {
+        name: "Left",
+        key: "left",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        parent:"",
+        inputtype: CssUnitInput
+    }, {
+        name: "Bottom",
+        key: "bottom",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        parent:"",
+        inputtype: CssUnitInput
+	}, {
+        name: "Right",
+        key: "right",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        parent:"",
+        inputtype: CssUnitInput
+    },{
+        name: "Float",
+        key: "float",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+        inline:true,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "none",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            }, {
+                value: "left",
+                //text: "Left",
+                title: "Left",
+                icon:"la la-align-left",
+                checked:false,
+            }, {
+                value: "right",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            }],
+         }
+	}, {
+        name: "Opacity",
+        key: "opacity",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+		inline:true,
+        parent:"",
+        inputtype: RangeInput,
+        data:{
+			max: 1, //max zoom level
+			min:0,
+			step:0.1
+       },
+	}, {
+        name: "Background Color",
+        key: "background-color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+	}, {
+        name: "Text Color",
+        key: "color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+  	}]
+});    
+
+//Typography
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [
+     {
+		key: "typography_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Typography"},
+ 
+	}, {
+        name: "Font size",
+        key: "font-size",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Font weight",
+        key: "font-weight",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "100",
+				text: "Thin"
+			}, {
+				value: "200",
+				text: "Extra-Light"
+			}, {
+				value: "300",
+				text: "Light"
+			}, {
+				value: "400",
+				text: "Normal"
+			}, {
+				value: "500",
+				text: "Medium"
+			}, {
+				value: "600",
+				text: "Semi-Bold"
+			}, {
+				value: "700",
+				text: "Bold"
+			}, {
+				value: "800",
+				text: "Extra-Bold"
+			}, {
+				value: "900",
+				text: "Ultra-Bold"
+			}],
+		}
+   }, {
+        name: "Font family",
+        key: "font-family",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+		inline:true,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {
+				value: "Arial, Helvetica, sans-serif",
+				text: "Arial"
+			}, {
+				value: '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif',
+				text: 'Lucida Grande'
+			}, {
+				value: '\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif',
+				text: 'Palatino Linotype'
+			}, {
+				value: '\'Times New Roman\', Times, serif',
+				text: 'Times New Roman'
+			}, {
+				value: "Georgia, serif",
+				text: "Georgia, serif"
+			}, {
+				value: "Tahoma, Geneva, sans-serif",
+				text: "Tahoma"
+			}, {
+				value: '\'Comic Sans MS\', cursive, sans-serif',
+				text: 'Comic Sans'
+			}, {
+				value: 'Verdana, Geneva, sans-serif',
+				text: 'Verdana'
+			}, {
+				value: 'Impact, Charcoal, sans-serif',
+				text: 'Impact'
+			}, {
+				value: '\'Arial Black\', Gadget, sans-serif',
+				text: 'Arial Black'
+			}, {
+				value: '\'Trebuchet MS\', Helvetica, sans-serif',
+				text: 'Trebuchet'
+			}, {
+				value: '\'Courier New\', Courier, monospace',
+				text: 'Courier New'
+			}, {
+				value: '\'Brush Script MT\', sans-serif',
+				text: 'Brush Script'
+			}]
+		}
+	}, {
+        name: "Text align",
+        key: "text-align",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+        inline:true,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            }, {
+                value: "left",
+                //text: "Left",
+                title: "Left",
+                icon:"la la-align-left",
+                checked:false,
+            }, {
+                value: "center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            }, {
+                value: "right",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            }, {
+                value: "justify",
+                //text: "justify",
+                title: "Justify",
+                icon:"la la-align-justify",
+                checked:false,
+            }],
+        },
+	}, {
+        name: "Line height",
+        key: "line-height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Letter spacing",
+        key: "letter-spacing",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Text decoration",
+        key: "text-decoration-line",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+        inline:true,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "none",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            }, {
+                value: "underline",
+                //text: "Left",
+                title: "underline",
+                icon:"la la-long-arrow-alt-down",
+                checked:false,
+            }, {
+                value: "overline",
+                //text: "Right",
+                title: "overline",
+                icon:"la la-long-arrow-alt-up",
+                checked:false,
+            }, {
+                value: "line-through",
+                //text: "Right",
+                title: "Line Through",
+                icon:"la la-strikethrough",
+                checked:false,
+            }, {
+                value: "underline overline",
+                //text: "justify",
+                title: "Underline Overline",
+                icon:"la la-arrows-alt-v",
+                checked:false,
+            }],
+        },
+	}, {
+        name: "Decoration Color",
+        key: "text-decoration-color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+	}, {
+        name: "Decoration style",
+        key: "text-decoration-style",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "solid",
+				text: "Solid"
+			}, {
+				value: "wavy",
+				text: "Wavy"
+			}, {
+				value: "dotted",
+				text: "Dotted"
+			}, {
+				value: "dashed",
+				text: "Dashed"
+			}, {
+				value: "double",
+				text: "Double"
+			}],
+		}
+  }]
+})
+    
+//Size
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "size_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Size", expanded:false},
+	}, {
+        name: "Width",
+        key: "width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Height",
+        key: "height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Min Width",
+        key: "min-width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Min Height",
+        key: "min-height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Max Width",
+        key: "max-width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Max Height",
+        key: "max-height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }]
+});
+
+//Margin
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "margins_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Margin", expanded:false},
+	}, {
+        name: "Top",
+        key: "margin-top",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Right",
+        key: "margin-right",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }, {
+        name: "Bottom",
+        key: "margin-bottom",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }, {
+        name: "Left",
+        key: "margin-left",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }]
+});
+
+//Padding
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "paddings_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Padding", expanded:false},
+	}, {
+        name: "Top",
+        key: "padding-top",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Right",
+        key: "padding-right",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }, {
+        name: "Bottom",
+        key: "padding-bottom",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }, {
+        name: "Left",
+        key: "padding-left",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }]
+});
+
+
+//Border
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "border_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Border", expanded:false},
+	 }, {        
+        name: "Style",
+        key: "border-style",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+		inline:true,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "solid",
+				text: "Solid"
+			}, {
+				value: "dotted",
+				text: "Dotted"
+			}, {
+				value: "dashed",
+				text: "Dashed"
+			}],
+		}
+	}, {
+        name: "Width",
+        key: "border-width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+   	}, {
+        name: "Color",
+        key: "border-color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+	}]
+});    
+
+
+
+//Border radius
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "border_radius_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Border radius", expanded:false},
+	}, {
+        name: "Top Left",
+        key: "border-top-left-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+	}, {
+        name: "Top Right",
+        key: "border-top-right-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }, {
+        name: "Bottom Left",
+        key: "border-bottom-left-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }, {
+        name: "Bottom Right",
+        key: "border-bottom-right-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: CssUnitInput
+    }]
+});
+
+//Background image
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "background_image_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Background Image", expanded:false},
+	 },{
+        name: "Image",
+        key: "Image",
+        sort: base_sort++,
+		section: style_section,
+		//htmlAttr: "style",
+        inputtype: ImageInput,
+        
+        init: function(node) {
+			var image = $(node).css("background-image").replace(/^url\(['"]?(.+)['"]?\)/, '$1');
+			return image;
+        },
+
+		onChange: function(node, value) {
+			
+			$(node).css('background-image', 'url(' + value + ')');
+			
+			return node;
+		}        
+
+   	}, {
+        name: "Repeat",
+        key: "background-repeat",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "repeat-x",
+				text: "repeat-x"
+			}, {
+				value: "repeat-y",
+				text: "repeat-y"
+			}, {
+				value: "no-repeat",
+				text: "no-repeat"
+			}],
+		}
+   	}, {
+        name: "Size",
+        key: "background-size",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "contain",
+				text: "contain"
+			}, {
+				value: "cover",
+				text: "cover"
+			}],
+		}
+   	}, {
+        name: "Position x",
+        key: "background-position-x",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        col:6,
+		inline:true,
+		inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "center",
+				text: "center"
+			}, {	
+				value: "right",
+				text: "right"
+			}, {
+				value: "left",
+				text: "left"
+			}],
+		}
+   	}, {
+        name: "Position y",
+        key: "background-position-y",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        col:6,
+		inline:true,
+		inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			}, {	
+				value: "center",
+				text: "center"
+			}, {	
+				value: "top",
+				text: "top"
+			}, {
+				value: "bottom",
+				text: "bottom"
+			}],
+		}
+    }]
+});    
+
+Vvveb.Components.extend("_base", "html/container", {
+    classes: ["container", "container-fluid"],
+    image: "icons/container.svg",
+    html: '<div class="container" style="min-height:150px;"><div class="m-5">Container</div></div>',
+    name: "Container",
+    properties: [
+     {
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["container", "container-fluid"],
+        data: {
+            options: [{
+                value: "container",
+                text: "Default"
+            }, {
+                value: "container-fluid",
+                text: "Fluid"
+            }]
+        }
+    },
+	{
+        name: "Background",
+        key: "background",
+		htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    },
+	{
+        name: "Background Color",
+        key: "background-color",
+		htmlAttr: "style",
+        inputtype: ColorInput,
+    },
+	{
+        name: "Text Color",
+        key: "color",
+		htmlAttr: "style",
+        inputtype: ColorInput,
+    }],
+});
+
+Vvveb.Components.extend("_base", "html/heading", {
+    image: "icons/heading.svg",
+    name: "Heading",
+    nodes: ["h1", "h2","h3", "h4","h5","h6"],
+    html: "<h1>Heading</h1>",
+    
+	properties: [
+	{
+        name: "Size",
+        key: "size",
+        inputtype: SelectInput,
+        
+        onChange: function(node, value) {
+			
+			return changeNodeName(node, "h" + value);
+		},	
+			
+        init: function(node) {
+            var regex;
+            regex = /H(\d)/.exec(node.nodeName);
+            if (regex && regex[1]) {
+                return regex[1]
+            }
+            return 1
+        },
+        
+        data:{
+			options: [{
+                value: "1",
+                text: "1"
+            }, {
+                value: "2",
+                text: "2"
+            }, {
+                value: "3",
+                text: "3"
+            }, {
+                value: "4",
+                text: "4"
+            }, {
+                value: "5",
+                text: "5"
+            }, {
+                value: "6",
+                text: "6"
+            }]
+       },
+    }]
+});    
+Vvveb.Components.extend("_base", "html/link", {
+    nodes: ["a"],
+    name: "Link",
+    html: '<a href="#" class="d-inline-block"><span>Link</span></a>',
+	image: "icons/link.svg",
+    properties: [{
+        name: "Url",
+        key: "href",
+        htmlAttr: "href",
+        inputtype: LinkInput
+    }, {
+        name: "Target",
+        key: "target",
+        htmlAttr: "target",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.extend("_base", "html/image", {
+    nodes: ["img"],
+    name: "Image",
+    html: '<img src="' +  Vvveb.baseUrl + 'icons/image.svg" height="128" width="128">',
+    /*
+    afterDrop: function (node)
+	{
+		node.attr("src", '');
+		return node;
+	},*/
+    image: "icons/image.svg",
+    properties: [{
+        name: "Image",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: ImageInput
+    }, {
+        name: "Width",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "Height",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }, {
+        name: "Alt",
+        key: "alt",
+        htmlAttr: "alt",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("html/hr", {
+    image: "icons/hr.svg",
+    nodes: ["hr"],
+    name: "Horizontal Rule",
+    html: "<hr>"
+});
+Vvveb.Components.extend("_base", "html/label", {
+    name: "Label",
+    nodes: ["label"],
+    html: '<label for="">Label</label>',
+    properties: [{
+        name: "For id",
+        htmlAttr: "for",
+        key: "for",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.extend("_base", "html/button", {
+    classes: ["btn", "btn-link"],
+    name: "Button",
+    image: "icons/button.svg",
+    html: '<button type="button" class="btn btn-primary">Primary</button>',
+    properties: [{
+        name: "Link To",
+        key: "href",
+        htmlAttr: "href",
+        inputtype: LinkInput
+    }, {
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-default", "btn-primary", "btn-info", "btn-success", "btn-warning", "btn-info", "btn-light", "btn-dark", "btn-outline-primary", "btn-outline-info", "btn-outline-success", "btn-outline-warning", "btn-outline-info", "btn-outline-light", "btn-outline-dark", "btn-link"],
+        data: {
+            options: [{
+                value: "btn-default",
+                text: "Default"
+            }, {
+                value: "btn-primary",
+                text: "Primary"
+            }, {
+                value: "btn btn-info",
+                text: "Info"
+            }, {
+                value: "btn-success",
+                text: "Success"
+            }, {
+                value: "btn-warning",
+                text: "Warning"
+            }, {
+                value: "btn-info",
+                text: "Info"
+            }, {
+                value: "btn-light",
+                text: "Light"
+            }, {
+                value: "btn-dark",
+                text: "Dark"
+            }, {
+                value: "btn-outline-primary",
+                text: "Primary outline"
+            }, {
+                value: "btn btn-outline-info",
+                text: "Info outline"
+            }, {
+                value: "btn-outline-success",
+                text: "Success outline"
+            }, {
+                value: "btn-outline-warning",
+                text: "Warning outline"
+            }, {
+                value: "btn-outline-info",
+                text: "Info outline"
+            }, {
+                value: "btn-outline-light",
+                text: "Light outline"
+            }, {
+                value: "btn-outline-dark",
+                text: "Dark outline"
+            }, {
+                value: "btn-link",
+                text: "Link"
+            }]
+        }
+    }, {
+        name: "Size",
+        key: "size",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-lg", "btn-sm"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "btn-lg",
+                text: "Large"
+            }, {
+                value: "btn-sm",
+                text: "Small"
+            }]
+        }
+    }, {
+        name: "Target",
+        key: "target",
+        htmlAttr: "target",
+        inputtype: TextInput
+    }, {
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "class",
+        inputtype: ToggleInput,
+        validValues: ["disabled"],
+        data: {
+            on: "disabled",
+            off: null
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/buttongroup", {
+    classes: ["btn-group"],
+    name: "Button Group",
+    image: "icons/button_group.svg",
+    html: '<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Left</button><button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button></div>',
+	properties: [{
+	    name: "Size",
+        key: "size",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-group-lg", "btn-group-sm"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "btn-group-lg",
+                text: "Large"
+            }, {
+                value: "btn-group-sm",
+                text: "Small"
+            }]
+        }
+    }, {
+	    name: "Alignment",
+        key: "alignment",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-group", "btn-group-vertical"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "btn-group",
+                text: "Horizontal"
+            }, {
+                value: "btn-group-vertical",
+                text: "Vertical"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/buttontoolbar", {
+    classes: ["btn-toolbar"],
+    name: "Button Toolbar",
+    image: "icons/button_toolbar.svg",
+    html: '<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">\
+		  <div class="btn-group mr-2" role="group" aria-label="First group">\
+			<button type="button" class="btn btn-secondary">1</button>\
+			<button type="button" class="btn btn-secondary">2</button>\
+			<button type="button" class="btn btn-secondary">3</button>\
+			<button type="button" class="btn btn-secondary">4</button>\
+		  </div>\
+		  <div class="btn-group mr-2" role="group" aria-label="Second group">\
+			<button type="button" class="btn btn-secondary">5</button>\
+			<button type="button" class="btn btn-secondary">6</button>\
+			<button type="button" class="btn btn-secondary">7</button>\
+		  </div>\
+		  <div class="btn-group" role="group" aria-label="Third group">\
+			<button type="button" class="btn btn-secondary">8</button>\
+		  </div>\
+		</div>'
+});
+Vvveb.Components.extend("_base","html/alert", {
+    classes: ["alert"],
+    name: "Alert",
+    image: "icons/alert.svg",
+    html: '<div class="alert alert-warning alert-dismissible fade show" role="alert">\
+		  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close">\
+			<span aria-hidden="true">&times;</span>\
+		  </button>\
+		  <strong>Holy guacamole!</strong> You should check in on some of those fields below.\
+		</div>',
+    properties: [{
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        validValues: ["alert-primary", "alert-secondary", "alert-success", "alert-danger", "alert-warning", "alert-info", "alert-light", "alert-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "alert-primary",
+                text: "Default"
+            }, {
+                value: "alert-secondary",
+                text: "Secondary"
+            }, {
+                value: "alert-success",
+                text: "Success"
+            }, {
+                value: "alert-danger",
+                text: "Danger"
+            }, {
+                value: "alert-warning",
+                text: "Warning"
+            }, {
+                value: "alert-info",
+                text: "Info"
+            }, {
+                value: "alert-light",
+                text: "Light"
+            }, {
+                value: "alert-dark",
+                text: "Dark"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/badge", {
+    classes: ["badge"],
+    image: "icons/badge.svg",
+    name: "Badge",
+    html: '<span class="badge badge-primary">Primary badge</span>',
+    properties: [{
+        name: "Color",
+        key: "color",
+        htmlAttr: "class",
+        validValues:["badge-primary", "badge-secondary", "badge-success", "badge-danger", "badge-warning", "badge-info", "badge-light", "badge-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "badge-primary",
+                text: "Primary"
+            }, {
+                value: "badge-secondary",
+                text: "Secondary"
+            }, {
+                value: "badge-success",
+                text: "Success"
+            }, {
+                value: "badge-warning",
+                text: "Warning"
+            }, {
+                value: "badge-danger",
+                text: "Danger"
+            }, {
+                value: "badge-info",
+                text: "Info"
+            }, {
+                value: "badge-light",
+                text: "Light"
+            }, {
+                value: "badge-dark",
+                text: "Dark"
+            }]
+        }
+     }]
+});
+Vvveb.Components.extend("_base", "html/card", {
+    classes: ["card"],
+    image: "icons/panel.svg",
+    name: "Card",
+    html: '<div class="card">\
+		  <img class="card-img-top" src="../libs/builder/icons/image.svg" alt="Card image cap" width="128" height="128">\
+		  <div class="card-body">\
+			<h4 class="card-title">Card title</h4>\
+			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>\
+			<a href="#" class="btn btn-primary">Go somewhere</a>\
+		  </div>\
+		</div>'
+});
+Vvveb.Components.extend("_base", "html/listgroup", {
+    name: "List Group",
+    image: "icons/list_group.svg",
+    classes: ["list-group"],
+    html: '<ul class="list-group">\n  <li class="list-group-item">\n    <span class="badge">14</span>\n    Cras justo odio\n  </li>\n  <li class="list-group-item">\n    <span class="badge">2</span>\n    Dapibus ac facilisis in\n  </li>\n  <li class="list-group-item">\n    <span class="badge">1</span>\n    Morbi leo risus\n  </li>\n</ul>'
+});
+Vvveb.Components.extend("_base", "html/listitem", {
+    name: "List Item",
+    classes: ["list-group-item"],
+    html: '<li class="list-group-item"><span class="badge">14</span> Cras justo odio</li>'
+});
+Vvveb.Components.extend("_base", "html/breadcrumbs", {
+    classes: ["breadcrumb"],
+    name: "Breadcrumbs",
+    image: "icons/breadcrumbs.svg",
+    html: '<ol class="breadcrumb">\
+		  <li class="breadcrumb-item active"><a href="#">Home</a></li>\
+		  <li class="breadcrumb-item active"><a href="#">Library</a></li>\
+		  <li class="breadcrumb-item active">Data 3</li>\
+		</ol>'
+});
+Vvveb.Components.extend("_base", "html/breadcrumbitem", {
+	classes: ["breadcrumb-item"],
+    name: "Breadcrumb Item",
+    html: '<li class="breadcrumb-item"><a href="#">Library</a></li>',
+    properties: [{
+        name: "Active",
+        key: "active",
+        htmlAttr: "class",
+        validValues: ["", "active"],
+        inputtype: ToggleInput,
+        data: {
+            on: "active",
+            off: ""
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/pagination", {
+    classes: ["pagination"],
+    name: "Pagination",
+    image: "icons/pagination.svg",
+    html: '<nav aria-label="Page navigation example">\
+	  <ul class="pagination">\
+		<li class="page-item"><a class="page-link" href="#">Previous</a></li>\
+		<li class="page-item"><a class="page-link" href="#">1</a></li>\
+		<li class="page-item"><a class="page-link" href="#">2</a></li>\
+		<li class="page-item"><a class="page-link" href="#">3</a></li>\
+		<li class="page-item"><a class="page-link" href="#">Next</a></li>\
+	  </ul>\
+	</nav>',
+
+    properties: [{
+        name: "Size",
+        key: "size",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-lg", "btn-sm"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "btn-lg",
+                text: "Large"
+            }, {
+                value: "btn-sm",
+                text: "Small"
+            }]
+        }
+    },{
+        name: "Alignment",
+        key: "alignment",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["justify-content-center", "justify-content-end"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "justify-content-center",
+                text: "Center"
+            }, {
+                value: "justify-content-end",
+                text: "Right"
+            }]
+        }
+    }]	
+});
+Vvveb.Components.extend("_base", "html/pageitem", {
+	classes: ["page-item"],
+    html: '<li class="page-item"><a class="page-link" href="#">1</a></li>',
+    name: "Pagination Item",
+    properties: [{
+        name: "Link To",
+        key: "href",
+        htmlAttr: "href",
+        child:".page-link",
+        inputtype: TextInput
+    }, {
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "class",
+        validValues: ["disabled"],
+        inputtype: ToggleInput,
+        data: {
+            on: "disabled",
+            off: ""
+        }
+   }]
+});
+Vvveb.Components.extend("_base", "html/progress", {
+    classes: ["progress"],
+    name: "Progress Bar",
+    image: "icons/progressbar.svg",
+    html: '<div class="progress"><div class="progress-bar w-25"></div></div>',
+    properties: [{
+        name: "Background",
+        key: "background",
+		htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    },
+    {
+        name: "Progress",
+        key: "background",
+        child:".progress-bar",
+		htmlAttr: "class",
+        validValues: ["", "w-25", "w-50", "w-75", "w-100"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "None"
+            }, {
+                value: "w-25",
+                text: "25%"
+            }, {
+                value: "w-50",
+                text: "50%"
+            }, {
+                value: "w-75",
+                text: "75%"
+            }, {
+                value: "w-100",
+                text: "100%"
+            }]
+        }
+    }, 
+    {
+        name: "Progress background",
+        key: "background",
+        child:".progress-bar",
+		htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    }, {
+        name: "Striped",
+        key: "striped",
+        child:".progress-bar",
+        htmlAttr: "class",
+        validValues: ["", "progress-bar-striped"],
+        inputtype: ToggleInput,
+        data: {
+            on: "progress-bar-striped",
+            off: "",
+        }
+    }, {
+        name: "Animated",
+        key: "animated",
+        child:".progress-bar",
+        htmlAttr: "class",
+        validValues: ["", "progress-bar-animated"],
+        inputtype: ToggleInput,
+        data: {
+            on: "progress-bar-animated",
+            off: "",
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/jumbotron", {
+    classes: ["jumbotron"],
+    image: "icons/jumbotron.svg",
+    name: "Jumbotron",
+    html: '<div class="jumbotron">\
+		  <h1 class="display-3">Hello, world!</h1>\
+		  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>\
+		  <hr class="my-4">\
+		  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>\
+		  <p class="lead">\
+			<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>\
+		  </p>\
+		</div>'
+});
+Vvveb.Components.extend("_base", "html/navbar", {
+    classes: ["navbar"],
+    image: "icons/navbar.svg",
+    name: "Nav Bar",
+    html: '<nav class="navbar navbar-expand-lg navbar-light bg-light-subtle">\
+		  <a class="navbar-brand" href="#">Navbar</a>\
+		  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\
+			<span class="navbar-toggler-icon"></span>\
+		  </button>\
+		\
+		  <div class="collapse navbar-collapse" id="navbarSupportedContent">\
+			<ul class="navbar-nav mr-auto">\
+			  <li class="nav-item active">\
+				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>\
+			  </li>\
+			  <li class="nav-item">\
+				<a class="nav-link" href="#">Link</a>\
+			  </li>\
+			  <li class="nav-item">\
+				<a class="nav-link disabled" href="#">Disabled</a>\
+			  </li>\
+			</ul>\
+			<form class="form-inline my-2 my-lg-0">\
+			  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">\
+			  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>\
+			</form>\
+		  </div>\
+		</nav>',
+    
+    properties: [{
+        name: "Color theme",
+        key: "color",
+        htmlAttr: "class",
+        validValues: ["navbar-light", "navbar-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "navbar-light",
+                text: "Light"
+            }, {
+                value: "navbar-dark",
+                text: "Dark"
+            }]
+        }
+    },{
+        name: "Background color",
+        key: "background",
+        htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    }, {
+        name: "Placement",
+        key: "placement",
+        htmlAttr: "class",
+        validValues: ["fixed-top", "fixed-bottom", "sticky-top"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "fixed-top",
+                text: "Fixed Top"
+            }, {
+                value: "fixed-bottom",
+                text: "Fixed Bottom"
+            }, {
+                value: "sticky-top",
+                text: "Sticky top"
+            }]
+        }
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/form", {
+    nodes: ["form"],
+    image: "icons/form.svg",
+    name: "Form",
+    html: '<form><div class="mb-3"><label>Text</label><input type="text" class="form-control"></div></div></form>',
+    properties: [{
+        name: "Style",
+        key: "style",
+        htmlAttr: "class",
+        validValues: ["", "form-search", "form-inline", "form-horizontal"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "form-search",
+                text: "Search"
+            }, {
+                value: "form-inline",
+                text: "Inline"
+            }, {
+                value: "form-horizontal",
+                text: "Horizontal"
+            }]
+        }
+    }, {
+        name: "Action",
+        key: "action",
+        htmlAttr: "action",
+        inputtype: TextInput
+    }, {
+        name: "Method",
+        key: "method",
+        htmlAttr: "method",
+        inputtype: TextInput
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/textinput", {
+    name: "Input",
+	nodes: ["input"],
+	//attributes: {"type":"text"},
+    image: "icons/text_input.svg",
+    html: '<div class="mb-3"><label>Text</label><input type="text" class="form-control"></div></div>',
+    properties: [{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TextInput
+    }, {
+        name: "Type",
+        key: "type",
+        htmlAttr: "type",
+		inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "text",
+                text: "text"
+            }, {
+                value: "button",
+                text: "button"
+            }, {
+
+                value: "checkbox",
+                text: "checkbox"
+            }, {
+
+                value: "color",
+                text: "color"
+            }, {
+
+                value: "date",
+                text: "date"
+            }, {
+
+                value: "datetime-local",
+                text: "datetime-local"
+            }, {
+
+                value: "email",
+                text: "email"
+            }, {
+
+                value: "file",
+                text: "file"
+            }, {
+
+                value: "hidden",
+                text: "hidden"
+            }, {
+
+                value: "image",
+                text: "image"
+            }, {
+
+                value: "month",
+                text: "month"
+            }, {
+
+                value: "number",
+                text: "number"
+            }, {
+
+                value: "password",
+                text: "password"
+            }, {
+
+                value: "radio",
+                text: "radio"
+            }, {
+
+                value: "range",
+                text: "range"
+            }, {
+
+                value: "reset",
+                text: "reset"
+            }, {
+
+                value: "search",
+                text: "search"
+            }, {
+
+                value: "submit",
+                text: "submit"
+            }, {
+
+                value: "tel",
+                text: "tel"
+            }, {
+
+                value: "text",
+                text: "text"
+            }, {
+
+                value: "time",
+                text: "time"
+            }, {
+
+                value: "url",
+                text: "url"
+            }, {
+
+                value: "week",
+                text: "week"
+            }]
+        }
+    }, {
+        name: "Placeholder",
+        key: "placeholder",
+        htmlAttr: "placeholder",
+        inputtype: TextInput
+    }, {
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+		col:6,
+        inputtype: CheckboxInput,
+	},{
+        name: "Required",
+        key: "required",
+        htmlAttr: "required",
+		col:6,
+        inputtype: CheckboxInput,
+	}]
+});
+
+Vvveb.Components.extend("_base", "html/selectinput", {
+	nodes: ["select"],
+    name: "Select Input",
+    image: "icons/select_input.svg",
+    html: '<div class="mb-3"><label>Choose an option </label><select class="form-control"><option value="value1">Text 1</option><option value="value2">Text 2</option><option value="value3">Text 3</option></select></div>',
+
+	beforeInit: function (node)
+	{
+		properties = [];
+		var i = 0;
+		
+		$(node).find('option').each(function() {
+
+			data = {"value": this.value, "text": this.text};
+			
+			i++;
+			properties.push({
+				name: "Option " + i,
+				key: "option" + i,
+				//index: i - 1,
+				optionNode: this,
+				inputtype: TextValueInput,
+				data: data,
+				onChange: function(node, value, input) {
+					
+					option = $(this.optionNode);
+					
+					//if remove button is clicked remove option and render row properties
+					if (input.nodeName == 'BUTTON')
+					{
+						option.remove();
+						Vvveb.Components.render("html/selectinput");
+						return node;
+					}
+
+					if (input.name == "value") option.attr("value", value); 
+					else if (input.name == "text") option.text(value);
+					
+					return node;
+				},	
+			});
+		});
+		
+		//remove all option properties
+		this.properties = this.properties.filter(function(item) {
+			return item.key.indexOf("option") === -1;
+		});
+		
+		//add remaining properties to generated column properties
+		properties.push(this.properties[0]);
+		
+		this.properties = properties;
+		return node;
+	},
+    
+    properties: [{
+        name: "Option",
+        key: "option1",
+        inputtype: TextValueInput
+	}, {
+        name: "Option",
+        key: "option2",
+        inputtype: TextValueInput
+	}, {
+        name: "",
+        key: "addChild",
+        inputtype: ButtonInput,
+        data: {text:"Add option", icon:"la-plus"},
+        onChange: function(node)
+        {
+			 $(node).append('<option value="value">Text</option>');
+			 
+			 //render component properties again to include the new column inputs
+			 Vvveb.Components.render("html/selectinput");
+			 
+			 return node;
+		}
+	}]
+});
+Vvveb.Components.extend("_base", "html/textareainput", {
+    name: "Text Area",
+    image: "icons/text_area.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>'
+});
+Vvveb.Components.extend("_base", "html/radiobutton", {
+    name: "Radio Button",
+	attributes: {"type":"radio"},
+    image: "icons/radio.svg",
+    html: '<label class="radio"><input type="radio"> Radio</label>',
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.extend("_base", "html/checkbox", {
+    name: "Checkbox",
+    attributes: {"type":"checkbox"},
+    image: "icons/checkbox.svg",
+    html: '<label class="checkbox"><input type="checkbox"> Checkbox</label>',
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.extend("_base", "html/fileinput", {
+    name: "Input group",
+	attributes: {"type":"file"},
+    image: "icons/text_input.svg",
+    html: '<div class="mb-3">\
+			  <input type="file" class="form-control">\
+			</div>'
+});
+Vvveb.Components.extend("_base", "html/table", {
+    nodes: ["table"],
+    classes: ["table"],
+    image: "icons/table.svg",
+    name: "Table",
+    html: '<table class="table">\
+		  <thead>\
+			<tr>\
+			  <th>#</th>\
+			  <th>First Name</th>\
+			  <th>Last Name</th>\
+			  <th>Username</th>\
+			</tr>\
+		  </thead>\
+		  <tbody>\
+			<tr>\
+			  <th scope="row">1</th>\
+			  <td>Mark</td>\
+			  <td>Otto</td>\
+			  <td>@mdo</td>\
+			</tr>\
+			<tr>\
+			  <th scope="row">2</th>\
+			  <td>Jacob</td>\
+			  <td>Thornton</td>\
+			  <td>@fat</td>\
+			</tr>\
+			<tr>\
+			  <th scope="row">3</th>\
+			  <td>Larry</td>\
+			  <td>the Bird</td>\
+			  <td>@twitter</td>\
+			</tr>\
+		  </tbody>\
+		</table>',
+    properties: [
+	{
+        name: "Type",
+        key: "type",
+		htmlAttr: "class",
+        validValues: ["table-primary", "table-secondary", "table-success", "table-danger", "table-warning", "table-info", "table-light", "table-dark", "table-white"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+				value: "Default",
+				text: ""
+			}, {
+				value: "table-primary",
+				text: "Primary"
+			}, {
+				value: "table-secondary",
+				text: "Secondary"
+			}, {
+				value: "table-success",
+				text: "Success"
+			}, {
+				value: "table-danger",
+				text: "Danger"
+			}, {
+				value: "table-warning",
+				text: "Warning"
+			}, {
+				value: "table-info",
+				text: "Info"
+			}, {
+				value: "table-light",
+				text: "Light"
+			}, {
+				value: "table-dark",
+				text: "Dark"
+			}, {
+				value: "table-white",
+				text: "White"
+			}]
+        }
+    },
+	{
+        name: "Responsive",
+        key: "responsive",
+        htmlAttr: "class",
+        validValues: ["table-responsive"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-responsive",
+            off: ""
+        }
+    },   
+	{
+        name: "Small",
+        key: "small",
+        htmlAttr: "class",
+        validValues: ["table-sm"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-sm",
+            off: ""
+        }
+    },   
+	{
+        name: "Hover",
+        key: "hover",
+        htmlAttr: "class",
+        validValues: ["table-hover"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-hover",
+            off: ""
+        }
+    },   
+	{
+        name: "Bordered",
+        key: "bordered",
+        htmlAttr: "class",
+        validValues: ["table-bordered"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-bordered",
+            off: ""
+        }
+    },   
+	{
+        name: "Striped",
+        key: "striped",
+        htmlAttr: "class",
+        validValues: ["table-striped"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-striped",
+            off: ""
+        }
+    },   
+	{
+        name: "Inverse",
+        key: "inverse",
+        htmlAttr: "class",
+        validValues: ["table-inverse"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-inverse",
+            off: ""
+        }
+    },   
+    {
+        name: "Head options",
+        key: "head",
+        htmlAttr: "class",
+        child:"thead",
+        inputtype: SelectInput,
+        validValues: ["", "thead-inverse", "thead-default"],
+        data: {
+            options: [{
+                value: "",
+                text: "None"
+            }, {
+                value: "thead-default",
+                text: "Default"
+            }, {
+                value: "thead-inverse",
+                text: "Inverse"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/tablerow", {
+    nodes: ["tr"],
+    name: "Table Row",
+    html: "<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>",
+    properties: [{
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["", "success", "danger", "warning", "active"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "success",
+                text: "Success"
+            }, {
+                value: "error",
+                text: "Error"
+            }, {
+                value: "warning",
+                text: "Warning"
+            }, {
+                value: "active",
+                text: "Active"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/tablecell", {
+    nodes: ["td"],
+    name: "Table Cell",
+    html: "<td>Cell</td>"
+});
+Vvveb.Components.extend("_base", "html/tableheadercell", {
+    nodes: ["th"],
+    name: "Table Header Cell",
+    html: "<th>Head</th>"
+});
+Vvveb.Components.extend("_base", "html/tablehead", {
+    nodes: ["thead"],
+    name: "Table Head",
+    html: "<thead><tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr></thead>",
+    properties: [{
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["", "success", "danger", "warning", "info"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "success",
+                text: "Success"
+            }, {
+                value: "anger",
+                text: "Error"
+            }, {
+                value: "warning",
+                text: "Warning"
+            }, {
+                value: "info",
+                text: "Info"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/tablebody", {
+    nodes: ["tbody"],
+    name: "Table Body",
+    html: "<tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr></tbody>"
+});
+
+Vvveb.Components.add("html/gridcolumn", {
+    name: "Grid Column",
+    image: "icons/grid_row.svg",
+    classesRegex: ["col-"],
+    html: '<div class="col-sm-4"><h3>col-sm-4</h3></div>',
+    properties: [{
+        name: "Column",
+        key: "column",
+        inputtype: GridInput,
+        data: {hide_remove:true},
+		
+		beforeInit: function(node) {
+			_class = $(node).attr("class");
+			
+			var reg = /col-([^-\$ ]*)?-?(\d+)/g; 
+			var match;
+
+			while ((match = reg.exec(_class)) != null) {
+				this.data["col" + ((match[1] != undefined)?"_" + match[1]:"")] = match[2];
+			}
+		},
+		
+		onChange: function(node, value, input) {
+			var _class = node.attr("class");
+			
+			//remove previous breakpoint column size
+			_class = _class.replace(new RegExp(input.name + '-\\d+?'), '');
+			//add new column size
+			if (value) _class +=  ' ' + input.name + '-' + value;
+			node.attr("class", _class);
+			
+			return node;
+		},				
+	}]
+});
+Vvveb.Components.add("html/gridrow", {
+    name: "Grid Row",
+    image: "icons/grid_row.svg",
+    classes: ["row"],
+    html: '<div class="row"><div class="col-sm-4"><h3>col-sm-4</h3></div><div class="col-sm-4 col-5"><h3>col-sm-4</h3></div><div class="col-sm-4"><h3>col-sm-4</h3></div></div>',
+    children :[{
+		name: "html/gridcolumn",
+		classesRegex: ["col-"],
+	}],
+	beforeInit: function (node)
+	{
+		properties = [];
+		var i = 0;
+		var j = 0;
+		
+		$(node).find('[class*="col-"]').each(function() {
+			_class = $(this).attr("class");
+			
+			var reg = /col-([^-\$ ]*)?-?(\d+)/g; 
+			var match;
+			var data = {};
+
+			while ((match = reg.exec(_class)) != null) {
+				data["col" + ((match[1] != undefined)?"_" + match[1]:"")] = match[2];
+			}
+			
+			i++;
+			properties.push({
+				name: "Column " + i,
+				key: "column" + i,
+				//index: i - 1,
+				columnNode: this,
+				col:12,
+				inline:true,
+				inputtype: GridInput,
+				data: data,
+				onChange: function(node, value, input) {
+
+					//column = $('[class*="col-"]:eq(' + this.index + ')', node);
+					var column = $(this.columnNode);
+					
+					//if remove button is clicked remove column and render row properties
+					if (input.nodeName == 'BUTTON')
+					{
+						column.remove();
+						Vvveb.Components.render("html/gridrow");
+						return node;
+					}
+
+					//if select input then change column class
+					_class = column.attr("class");
+					
+					//remove previous breakpoint column size
+					_class = _class.replace(new RegExp(input.name + '-\\d+?'), '');
+					//add new column size
+					if (value) _class +=  ' ' + input.name + '-' + value;
+					column.attr("class", _class);
+					
+					//console.log(this, node, value, input, input.name);
+					
+					return node;
+				},	
+			});
+		});
+		
+		//remove all column properties
+		this.properties = this.properties.filter(function(item) {
+			return item.key.indexOf("column") === -1;
+		});
+		
+		//add remaining properties to generated column properties
+		properties.push(this.properties[0]);
+		
+		this.properties = properties;
+		return node;
+	},
+    
+    properties: [{
+        name: "Column",
+        key: "column1",
+        inputtype: GridInput
+	}, {
+        name: "Column",
+        key: "column1",
+        inline:true,
+        col:12,
+        inputtype: GridInput
+	}, {
+        name: "",
+        key: "addChild",
+        inputtype: ButtonInput,
+        data: {text:"Add column", icon:"la la-plus"},
+        onChange: function(node)
+        {
+			 $(node).append('<div class="col-3">Col-3</div>');
+			 
+			 //render component properties again to include the new column inputs
+			 Vvveb.Components.render("html/gridrow");
+			 
+			 return node;
+		}
+	}]
+});
+
+
+Vvveb.Components.extend("_base", "html/paragraph", {
+    nodes: ["p"],
+    name: "Paragraph",
+	image: "icons/paragraph.svg",
+	html: '<p>Lorem ipsum</p>',
+    properties: [{
+        name: "Text align",
+        key: "text-align",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["", "text-left", "text-center", "text-right"],
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            }, {
+                value: "text-left",
+                //text: "Left",
+                title: "text-left",
+                icon:"la la-align-left",
+                checked:false,
+            }, {
+                value: "text-center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            }, {
+                value: "text-right",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            }],
+        },
+	}]
+});
+
+Vvveb.Components.extend("_base", "html/video", {
+    nodes: ["video"],
+    name: "Video",
+    html: '<video width="320" height="240" playsinline loop autoplay><source src="../../media/sample.webm"><video>',
+    dragHtml: '<img  width="320" height="240" src="' + Vvveb.baseUrl + 'icons/video.svg">',
+	image: "icons/video.svg",
+    properties: [{
+        name: "Src",
+        child: "source",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: LinkInput
+    },{
+        name: "Width",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "Height",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    },{
+        name: "Muted",
+        key: "muted",
+        htmlAttr: "muted",
+        inputtype: CheckboxInput
+    },{
+        name: "Loop",
+        key: "loop",
+        htmlAttr: "loop",
+        inputtype: CheckboxInput
+    },{
+        name: "Autoplay",
+        key: "autoplay",
+        htmlAttr: "autoplay",
+        inputtype: CheckboxInput
+    },{
+        name: "Plays inline",
+        key: "playsinline",
+        htmlAttr: "playsinline",
+        inputtype: CheckboxInput
+    },{
+        name: "Controls",
+        key: "controls",
+        htmlAttr: "controls",
+        inputtype: CheckboxInput
+    }]
+});
+
+
+Vvveb.Components.extend("_base", "html/button", {
+    nodes: ["button"],
+    name: "Html Button",
+    image: "icons/button.svg",
+    html: '<button>Button</button>',
+    properties: [{
+        name: "Text",
+        key: "text",
+        htmlAttr: "innerHTML",
+        inputtype: TextInput
+    }, {
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }, {
+        name: "Type",
+        key: "type",
+		htmlAttr: "type",
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "button",
+				text: "button"
+			}, {	
+				value: "reset",
+				text: "reset"
+			}, {
+				value: "submit",
+				text: "submit"
+			}],
+		}
+   	},{
+        name: "Autofocus",
+        key: "autofocus",
+        htmlAttr: "autofocus",
+        inputtype: CheckboxInput,
+		inline:true,
+        col:6,
+   	},{
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+        inputtype: CheckboxInput,		
+		inline:true,
+        col:6,
+    }]
+});   
+
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [
+	 {
+        name: "Font family",
+        key: "font-family",
+		htmlAttr: "style",
+        sort: base_sort++,
+        col:6,
+		inline:true,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "extended"
+			}, {
+				value: "Ggoogle ",
+				text: "google"
+			}]
+		}
+    }]
+});

libs/builder/components-bootstrap5.js

@@ -0,0 +1,1029 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/Vvvebjs
+*/
+
+Vvveb.ComponentsGroup['Bootstrap 5'] =
+["html/container", "html/gridrow", "html/btn", "html/btn-link", "html/buttongroup", "html/buttontoolbar", "html/alert", "html/card", "html/listgroup", "html/badge", "html/progress", "html/navbar", "html/breadcrumbs", "html/pagination"];
+
+
+Vvveb.Components.extend("_base", "html/container", {
+    classes: ["container", "container-fluid"],
+    image: "icons/container.svg",
+    html: '<div class="container" style="min-height:150px;"><div class="m-5">Container</div></div>',
+    name: "Container",
+    properties: [
+     {
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["container", "container-fluid"],
+        data: {
+            options: [{
+                value: "container",
+                text: "Default"
+            },{
+                value: "container-fluid",
+                text: "Fluid"
+            }]
+        }
+    },{
+        name: "Background",
+        key: "background",
+		htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    },{
+        name: "Background Color",
+        key: "background-color",
+		htmlAttr: "style",
+        inputtype: ColorInput,
+    },{
+        name: "Text Color",
+        key: "color",
+		htmlAttr: "style",
+        inputtype: ColorInput,
+    }],
+});
+
+Vvveb.Components.extend("html/link", "html/btn", {
+    classes: ["btn"],
+    nodes: null,
+    name: "Button",
+    image: "icons/button.svg",
+    html: '<a class="btn btn-primary">Primary</a>',
+    properties: [{
+        name: "Background",
+        key: "background",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-default", "btn-primary", "btn-info", "btn-success", "btn-warning", "btn-info", "btn-light", "btn-dark", "btn-outline-primary", "btn-outline-info", "btn-outline-success", "btn-outline-warning", "btn-outline-info", "btn-outline-light", "btn-outline-dark", "btn-link"],
+        data: {
+            options: [{
+                value: "btn-default",
+                text: "Default"
+            },{
+                value: "btn-primary",
+                text: "Primary"
+            },{
+                value: "btn btn-info",
+                text: "Info"
+            },{
+                value: "btn-success",
+                text: "Success"
+            },{
+                value: "btn-warning",
+                text: "Warning"
+            },{
+                value: "btn-info",
+                text: "Info"
+            },{
+                value: "btn-light",
+                text: "Light"
+            },{
+                value: "btn-dark",
+                text: "Dark"
+            },{
+                value: "btn-outline-primary",
+                text: "Primary outline"
+            },{
+                value: "btn btn-outline-info",
+                text: "Info outline"
+            },{
+                value: "btn-outline-success",
+                text: "Success outline"
+            },{
+                value: "btn-outline-warning",
+                text: "Warning outline"
+            },{
+                value: "btn-outline-info",
+                text: "Info outline"
+            },{
+                value: "btn-outline-light",
+                text: "Light outline"
+            },{
+                value: "btn-outline-dark",
+                text: "Dark outline"
+            },{
+                value: "btn-link",
+                text: "Link"
+            }]
+        }
+    },{
+        name: "Size",
+        key: "size",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-lg", "btn-sm"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "btn-lg",
+                text: "Large"
+            },{
+                value: "btn-sm",
+                text: "Small"
+            }]
+        }
+   	},{
+        name: "Autofocus",
+        key: "autofocus",
+        htmlAttr: "autofocus",
+        inputtype: CheckboxInput,
+		inline:true,
+        col:6,
+   	},{
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "class",
+		inline:true,
+        col:6,
+        inputtype: ToggleInput,
+        validValues: ["disabled"],
+        data: {
+            on: "disabled",
+            off: null
+        }
+    },{
+	key: "link_options",
+        inputtype: SectionInput,
+        name:false,
+        data: {header:"Link"},
+    }]
+});
+	
+Vvveb.Components.extend("_base", "html/buttongroup", {
+    classes: ["btn-group"],
+    name: "Button Group",
+    image: "icons/button_group.svg",
+    html: '<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Left</button><button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button></div>',
+	properties: [{
+	    name: "Size",
+        key: "size",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-group-lg", "btn-group-sm"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "btn-group-lg",
+                text: "Large"
+            },{
+                value: "btn-group-sm",
+                text: "Small"
+            }]
+        }
+    },{
+	    name: "Alignment",
+        key: "alignment",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["btn-group", "btn-group-vertical"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "btn-group",
+                text: "Horizontal"
+            },{
+                value: "btn-group-vertical",
+                text: "Vertical"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/buttontoolbar", {
+    classes: ["btn-toolbar"],
+    name: "Button Toolbar",
+    image: "icons/button_toolbar.svg",
+    html: '<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">\
+		  <div class="btn-group me-2" role="group" aria-label="First group">\
+			<button type="button" class="btn btn-secondary">1</button>\
+			<button type="button" class="btn btn-secondary">2</button>\
+			<button type="button" class="btn btn-secondary">3</button>\
+			<button type="button" class="btn btn-secondary">4</button>\
+		  </div>\
+		  <div class="btn-group me-2" role="group" aria-label="Second group">\
+			<button type="button" class="btn btn-secondary">5</button>\
+			<button type="button" class="btn btn-secondary">6</button>\
+			<button type="button" class="btn btn-secondary">7</button>\
+		  </div>\
+		  <div class="btn-group" role="group" aria-label="Third group">\
+			<button type="button" class="btn btn-secondary">8</button>\
+		  </div>\
+		</div>'
+});
+Vvveb.Components.extend("_base","html/alert", {
+    classes: ["alert"],
+    name: "Alert",
+    image: "icons/alert.svg",
+    html: '<div class="alert alert-warning alert-dismissible fade show" role="alert">\
+		  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">\
+			<!--span aria-hidden="true">&times;</span-->\
+		  </button>\
+		  <strong>Holy guacamole!</strong> You should check in on some of those fields below.\
+		</div>',
+    properties: [{
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        validValues: ["alert-primary", "alert-secondary", "alert-success", "alert-danger", "alert-warning", "alert-info", "alert-light", "alert-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "alert-primary",
+                text: "Default"
+            },{
+                value: "alert-secondary",
+                text: "Secondary"
+            },{
+                value: "alert-success",
+                text: "Success"
+            },{
+                value: "alert-danger",
+                text: "Danger"
+            },{
+                value: "alert-warning",
+                text: "Warning"
+            },{
+                value: "alert-info",
+                text: "Info"
+            },{
+                value: "alert-light",
+                text: "Light"
+            },{
+                value: "alert-dark",
+                text: "Dark"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/badge", {
+    classes: ["badge"],
+    image: "icons/badge.svg",
+    name: "Badge",
+    html: '<span class="badge bg-primary">Primary badge</span>',
+    properties: [{
+        name: "Color",
+        key: "color",
+        htmlAttr: "class",
+        validValues:["bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-body-secondary", "bg-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "bg-primary",
+                text: "Primary"
+            },{
+                value: "bg-secondary",
+                text: "Secondary"
+            },{
+                value: "bg-success",
+                text: "Success"
+            },{
+                value: "bg-warning",
+                text: "Warning"
+            },{
+                value: "bg-danger",
+                text: "Danger"
+            },{
+                value: "bg-info",
+                text: "Info"
+            },{
+                value: "bg-body-secondary",
+                text: "Light"
+            },{
+                value: "bg-dark",
+                text: "Dark"
+            }]
+        }
+     }]
+});
+Vvveb.Components.extend("_base", "html/card", {
+    classes: ["card"],
+    image: "icons/panel.svg",
+    name: "Card",
+    html: '<div class="card">\
+		  <img class="card-img-top bg-body-secondary" src="' +  Vvveb.baseUrl + 'icons/image.svg" alt="Card image cap">\
+		  <div class="card-body">\
+			<h4 class="card-title">Card title</h4>\
+			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>\
+			<a href="#" class="btn btn-primary">Go somewhere</a>\
+		  </div>\
+		</div>'
+});
+
+Vvveb.Components.extend("_base", "html/listgroup", {
+    name: "List Group",
+    image: "icons/list_group.svg",
+    classes: ["list-group"],
+    html: '<ul class="list-group">\n  <li class="list-group-item">\n    <span class="badge bg-success">14</span>\n    Cras justo odio\n  </li>\n  <li class="list-group-item">\n    <span class="badge bg-primary">2</span>\n    Dapibus ac facilisis in\n  </li>\n  <li class="list-group-item">\n    <span class="badge bg-danger">1</span>\n    Morbi leo risus\n  </li>\n</ul>',
+	properties: [{
+        name: "Flush",
+        key: "flush",
+        htmlAttr: "class",
+        validValues: ["", "list-group-flush"],
+        inputtype: ToggleInput,
+        data: {
+            on: "list-group-flush",
+            off: ""
+        }
+    },{
+        name: "Numbered",
+        key: "numbered",
+        htmlAttr: "class",
+        validValues: ["", "list-group-numbered"],
+        inputtype: ToggleInput,
+        data: {
+            on: "list-group-numbered",
+            off: ""
+        }
+    },{
+        name: "Horizontal",
+        key: "horizontal",
+        htmlAttr: "class",
+        validValues: ["", "list-group-horizontal"],
+        inputtype: ToggleInput,
+        data: {
+            on: "list-group-horizontal",
+            off: ""
+        }
+    }]    
+});
+
+Vvveb.Components.extend("_base", "html/listitem", {
+    name: "List Item",
+    classes: ["list-group-item"],
+    html: '<li class="list-group-item"><span class="badge bg-primary">14</span> Cras justo odio</li>',
+	properties: [{
+        name: "Background",
+        key: "background",
+        htmlAttr: "class",
+        validValues:["list-group-item-primary", "list-group-item-secondary", "list-group-item-success", "list-group-item-danger", "list-group-item-warning", "list-group-item-info", "list-group-item-light", "list-group-item-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "list-group-item-primary",
+                text: "Primary"
+            },{
+                value: "list-group-item-secondary",
+                text: "Secondary"
+            },{
+                value: "list-group-item-success",
+                text: "Success"
+            },{
+                value: "list-group-item-warning",
+                text: "Warning"
+            },{
+                value: "list-group-item-danger",
+                text: "Danger"
+            },{
+                value: "list-group-item-info",
+                text: "Info"
+            },{
+                value: "list-group-item-light",
+                text: "Light"
+            },{
+                value: "list-group-item-dark",
+                text: "Dark"
+            }]
+        }
+     },	{
+        name: "Active",
+        key: "active",
+        htmlAttr: "class",
+        validValues: ["", "active"],
+        inputtype: ToggleInput,
+        inline:true,
+        col:6,
+        data: {
+            on: "active",
+            off: ""
+        }
+    },{
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "class",
+        validValues: ["", "disabled"],
+        inputtype: ToggleInput,
+        inline:true,
+        col:6,
+        data: {
+            on: "disabled",
+            off: ""
+        }
+    }]    
+});
+
+Vvveb.Components.extend("_base", "html/breadcrumbs", {
+    classes: ["breadcrumb"],
+    name: "Breadcrumbs",
+    image: "icons/breadcrumbs.svg",
+    html: `<ol class="breadcrumb">
+			<li class="breadcrumb-item"><a href="#">Home</a></li>
+			<li class="breadcrumb-item"><a href="#">Library</a></li>
+			s<li class="breadcrumb-item active" aria-current="page"><a href="#">Book</a></li>
+		  </ol>`,
+	properties: [{
+		name: "Divider",
+		key: "--bs-breadcrumb-divider",
+		htmlAttr: "style",
+		inputtype: TextInput
+	}]        
+});
+
+Vvveb.Components.extend("_base", "html/breadcrumbitem", {
+	classes: ["breadcrumb-item"],
+    name: "Breadcrumb Item",
+    html: '<li class="breadcrumb-item"><a href="#">Library</a></li>',
+    properties: [{
+        name: "Active",
+        key: "active",
+        htmlAttr: "class",
+        validValues: ["", "active"],
+        inputtype: ToggleInput,
+        data: {
+            on: "active",
+            off: ""
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/pagination", {
+    classes: ["pagination"],
+    name: "Pagination",
+    image: "icons/pagination.svg",
+    html: '<nav aria-label="Page navigation example">\
+	  <ul class="pagination">\
+		<li class="page-item"><a class="page-link" href="#">Previous</a></li>\
+		<li class="page-item"><a class="page-link" href="#">1</a></li>\
+		<li class="page-item"><a class="page-link" href="#">2</a></li>\
+		<li class="page-item"><a class="page-link" href="#">3</a></li>\
+		<li class="page-item"><a class="page-link" href="#">Next</a></li>\
+	  </ul>\
+	</nav>',
+
+    properties: [{
+        name: "Size",
+        key: "size",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["pagination-lg", "pagination-sm"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "pagination-lg",
+                text: "Large"
+            },{
+                value: "pagination-sm",
+                text: "Small"
+            }]
+        }
+    },{
+        name: "Alignment",
+        key: "alignment",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["justify-content-center", "justify-content-end"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "justify-content-center",
+                text: "Center"
+            },{
+                value: "justify-content-end",
+                text: "Right"
+            }]
+        }
+    }]	
+});
+Vvveb.Components.extend("_base", "html/pageitem", {
+	classes: ["page-item"],
+    html: '<li class="page-item"><a class="page-link" href="#">1</a></li>',
+    name: "Pagination Item",
+    properties: [{
+        name: "Link To",
+        key: "href",
+        htmlAttr: "href",
+        child:".page-link",
+        inputtype: LinkInput
+    },{
+        name: "Active",
+        key: "active",
+        htmlAttr: "class",
+        validValues: ["active"],
+        inputtype: ToggleInput,
+        data: {
+            on: "active",
+            off: ""
+        }
+    },{
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "class",
+        validValues: ["disabled"],
+        inputtype: ToggleInput,
+        data: {
+            on: "disabled",
+            off: ""
+        }
+   }]
+});
+Vvveb.Components.extend("_base", "html/progress", {
+    classes: ["progress"],
+    name: "Progress Bar",
+    image: "icons/progressbar.svg",
+    html: '<div class="progress"><div class="progress-bar w-25"></div></div>',
+    properties: [{
+        name: "Background",
+        key: "background",
+		htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    },
+    {
+        name: "Progress",
+        key: "background",
+        child:".progress-bar",
+		htmlAttr: "class",
+        validValues: ["", "w-25", "w-50", "w-75", "w-100"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "None"
+            },{
+                value: "w-25",
+                text: "25%"
+            },{
+                value: "w-50",
+                text: "50%"
+            },{
+                value: "w-75",
+                text: "75%"
+            },{
+                value: "w-100",
+                text: "100%"
+            }]
+        }
+    }, 
+    {
+        name: "Progress background",
+        key: "background",
+        child:".progress-bar",
+		htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    },{
+        name: "Striped",
+        key: "striped",
+        child:".progress-bar",
+        htmlAttr: "class",
+        validValues: ["", "progress-bar-striped"],
+        inputtype: ToggleInput,
+        data: {
+            on: "progress-bar-striped",
+            off: "",
+        }
+    },{
+        name: "Animated",
+        key: "animated",
+        child:".progress-bar",
+        htmlAttr: "class",
+        validValues: ["", "progress-bar-animated"],
+        inputtype: ToggleInput,
+        data: {
+            on: "progress-bar-animated",
+            off: "",
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/navbar", {
+    classes: ["navbar"],
+    image: "icons/navbar.svg",
+    name: "Nav Bar",
+    html: `<nav class="navbar navbar-expand-lg bg-body-secondary bg-body-tertiary">
+			  <div class="container-fluid">
+				<a class="navbar-brand" href="#">Navbar</a>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+				  <span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+				  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+					<li class="nav-item">
+					  <a class="nav-link active" aria-current="page" href="#">Home</a>
+					</li>
+					<li class="nav-item">
+					  <a class="nav-link" href="#">Link</a>
+					</li>
+					<li class="nav-item">
+					  <a class="nav-link disabled">Disabled</a>
+					</li>
+				  </ul>
+				  <form class="d-flex" role="search">
+					<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+					<button class="btn btn-outline-success" type="submit">Search</button>
+				  </form>
+				</div>
+			  </div>
+			</nav>`,
+    
+    properties: [{
+        name: "Color theme",
+        key: "color",
+        htmlAttr: "class",
+        validValues: ["navbar-light", "navbar-dark"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "navbar-light",
+                text: "Light"
+            },{
+                value: "navbar-dark",
+                text: "Dark"
+            }]
+        }
+    },{
+        name: "Background color",
+        key: "background",
+        htmlAttr: "class",
+        validValues: bgcolorClasses,
+        inputtype: SelectInput,
+        data: {
+            options: bgcolorSelectOptions
+        }
+    },{
+        name: "Placement",
+        key: "placement",
+        htmlAttr: "class",
+        validValues: ["fixed-top", "fixed-bottom", "sticky-top"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "fixed-top",
+                text: "Fixed Top"
+            },{
+                value: "fixed-bottom",
+                text: "Fixed Bottom"
+            },{
+                value: "sticky-top",
+                text: "Sticky top"
+            }]
+        }
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/tablebody", {
+    nodes: ["tbody"],
+    name: "Table Body",
+    html: "<tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr></tbody>"
+});
+
+Vvveb.Components.extend("_base", "html/gridcolumn", {
+    name: "Grid Column",
+    image: "icons/grid_column.svg",
+    classesRegex: ["col-"],
+    classes: ["col"],
+    html: '<div class="col-sm-4"><h3>col-sm-4</h3></div>',
+    properties: [{
+        name: "Column",
+        key: "column",
+        inline:false,
+        inputtype: GridInput,
+        data: {hide_remove:true},
+
+		beforeInit: function(node) {
+			_class = node.getAttribute("class");
+			
+			let reg = /col(-[^-\$ ]*)?-?(\d+)?/g; 
+			let match;
+
+			while ((match = reg.exec(_class)) != null) {
+				let key = "col" + ((match[1] != undefined) ? "_" + match[1].replace('-','') : "");
+				this.data[key] = match[2] ?? '';
+			}
+		},
+		
+		onChange: function(node, value, input) {
+			let _class = node.getAttribute("class");
+			
+			//remove previous breakpoint column size
+			_class = _class.replace(new RegExp(input.name + '-\\d+?'), '');
+			//add new column size
+			if (value) _class +=  ' ' + input.name + '-' + value;
+			node.setAttribute("class", _class);
+			
+			return node;
+		},				
+	}]
+});
+
+Vvveb.Components.extend("_base", "html/gridrow", {
+    name: "Grid Row",
+    image: "icons/grid_row.svg",
+    classes: ["row"],
+    html: '<div class="row"><div class="col-sm-4"><h3>col-sm-4</h3></div><div class="col-sm-4 col-5"><h3>col-sm-4</h3></div><div class="col-sm-4"><h3>col-sm-4</h3></div></div>',
+    children :[{
+		name: "html/gridcolumn",
+		classesRegex: ["col-"],
+	}],
+	beforeInit: function (node) {
+		properties = [];
+		let i = 0;
+		let j = 0;
+		
+		node.querySelectorAll('[class*="col-"],.col').forEach(el => {
+			_class = el.getAttribute("class");
+			
+			let reg = /col(-[^-\$ ]*)?-?(\d+)?/g; 
+			let match;
+			let data = {};
+
+			while ((match = reg.exec(_class)) != null) {
+				let key = "col" + ((match[1] != undefined) ? "_" + match[1].replace('-','') : "");
+				data[key] = match[2] ?? '';
+			}
+			
+			i++;
+			properties.push({
+				name: "Column " + i,
+				key: "column" + i,
+				//index: i - 1,
+				columnNode: el,
+				col:12,
+				inline:false,
+				inputtype: GridInput,
+				data: data,
+				onChange: function(node, value, input) {
+
+					let column = this.columnNode;
+					
+					//if remove button is clicked remove column and render row properties
+					if (input.nodeName == 'BUTTON') {
+						column.remove();
+						Vvveb.Components.render("html/gridrow");
+						return node;
+					}
+
+					//if select input then change column class
+					_class = column.getAttribute("class");
+					
+					//remove previous breakpoint column size
+					_class = _class.replace(new RegExp(input.name + '-\\d+?'), '');
+					//add new column size
+					if (value) _class +=  ' ' + input.name + '-' + value;
+					column.setAttribute("class", _class);
+					
+					return node;
+				},	
+			});
+		});
+		
+		//remove all column properties
+		this.properties = this.properties.filter(function(item) {
+			return item.key.indexOf("column") === -1;
+		});
+
+		//add remaining properties to generated column properties, put first 2 align properties first
+		this.properties = this.properties.slice(0,4).concat(properties, this.properties.slice(4));
+
+		return node;
+	},
+    
+    properties: [{
+        name: "Direction",
+        key: "direction",
+        htmlAttr: "class",
+        inline:false,
+        validValues: ["", "flex-row", "flex-row-reverse", "flex-column", "flex-column-reverse"],
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "Default",
+                checked:true,
+            },{
+                value: "flex-row",
+                //text: "Left",
+                title: "Row - horizontal",
+                icon:"la la-arrow-right",
+                checked:false,
+            },{
+                value: "flex-column",
+                //text: "Center",
+                title: "Column - vertical",
+                icon:"la la-arrow-down",
+                checked:false,
+            },{
+                value: "flex-row-reverse",
+                //text: "Right",
+                title: "Row - reversed",
+                icon:"la la-arrow-left",
+                checked:false,
+            },{
+                value: "flex-column-reverse",
+                //text: "Center",
+                title: "Column - reversed",
+                icon:"la la-arrow-up",
+                checked:false,
+            }],
+        },
+	},{       
+		name: "Vertical align",
+        key: "vertical-align",
+        htmlAttr: "class",
+        inline:false,
+        validValues: ["", "align-items-start", "align-items-center", "align-items-end", "align-items-baseline", "align-items-stretch"],
+        inputtype: RadioButtonInput,
+        data: {
+            extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            },{
+                value: "align-items-start",
+                //text: "Left",
+                title: "Start",
+                icon:"la la-align-left",
+                checked:false,
+            },{
+                value: "align-items-center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            },{
+                value: "align-items-end",
+                //text: "Right",
+                title: "End",
+                icon:"la la-align-right",
+                checked:false,
+            },{
+                value: "align-items-baseline",
+                title: "Baseline",
+                icon:"la la-indent",
+                checked:false,
+            },{
+                value: "align-items-stretch",
+                title: "Stretch",
+                icon:"la la-align-justify",
+                checked:false,
+            }],
+        },
+	},{
+        name: "Horizontal align",
+        key: "horizontal-align",
+        htmlAttr: "class",
+        inline:false,
+        validValues: ["", "justify-content-start", "justify-content-center", "justify-content-end", "justify-content-around", "justify-content-between", "justify-content-evenly"],
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            },{
+                value: "justify-content-start",
+                //text: "Left",
+                title: "Start",
+                icon:"la la-align-left",
+                checked:false,
+            },{
+                value: "justify-content-center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            },{
+                value: "justify-content-end",
+                //text: "Right",
+                title: "End",
+                icon:"la la-align-right",
+                checked:false
+			},{
+                value: "justify-content-around",
+                //text: "Left",
+                title: "Around",
+                icon:"la la-indent",
+                checked:false,
+            },{
+                value: "justify-content-between",
+                //text: "Center",
+                title: "Between",
+                icon:"la la-outdent",
+                checked:false,
+            },{
+                value: "justify-content-evenly",
+                //text: "Right",
+                title: "Evenly",
+                icon:"la la-align-justify",
+                checked:false,
+            }],
+        },
+	},{       
+        name: "Wrap",
+        key: "wrap",
+        htmlAttr: "class",
+        inline:false,
+        validValues: ["", "flex-wrap", "flex-nowrap"],
+        inputtype: RadioButtonInput,
+        data: {
+            extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            },{
+                value: "flex-wrap",
+                //text: "Left",
+                title: "Wrap",
+                icon:"la la-undo",
+                checked:false,
+            },{
+                value: "flex-nowrap",
+                //text: "Center",
+                title: "No wrap",
+                icon:"la la-arrow-right",
+                checked:false,
+            }],
+        },
+	},{
+        name: "Column",
+        key: "column1",
+        inputtype: GridInput
+	},{
+        name: "Column",
+        key: "column1",
+        inline:true,
+        col:12,
+        inputtype: GridInput
+	},{
+        name: "",
+        key: "addChild",
+        inputtype: ButtonInput,
+        data: {text:"Add column", icon:"la la-plus"},
+        onChange: function(node)
+        {
+			 node.append(generateElements('<div class="col-3"><h3>Col-3</h3></div>')[0]);
+			 
+			 //render component properties again to include the new column inputs
+			 Vvveb.Components.render("html/gridrow");
+			 
+			 return node;
+		}
+	}]
+});
+

libs/builder/components-common.js

@@ -0,0 +1,1135 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/Vvvebjs
+*/
+
+bgcolorClasses = ["bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-body-secondary", "bg-dark", "bg-white"]
+
+bgcolorSelectOptions = [{
+	value: "Default",
+	text: ""
+},{
+	value: "bg-primary",
+	text: "Primary"
+},{
+	value: "bg-secondary",
+	text: "Secondary"
+},{
+	value: "bg-success",
+	text: "Success"
+},{
+	value: "bg-danger",
+	text: "Danger"
+},{
+	value: "bg-warning",
+	text: "Warning"
+},{
+	value: "bg-info",
+	text: "Info"
+},{
+	value: "bg-body-secondary",
+	text: "Light"
+},{
+	value: "bg-dark",
+	text: "Dark"
+},{
+	value: "bg-white",
+	text: "White"
+}];
+
+function changeNodeName(node, newNodeName) {
+	let newNode;
+	newNode = document.createElement(newNodeName);
+	attributes = node.attributes;
+	
+	for (i = 0, len = attributes.length; i < len; i++) {
+		newNode.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
+	}
+
+	while (node.hasChildNodes()) {
+		newNode.appendChild(node.removeChild(node.firstChild))
+	}
+
+	node.replaceWith(newNode);
+	
+	return newNode;
+}
+
+let base_sort = 1000;//start sorting for base component from 100 to allow extended properties to be first
+let style_section = 'style';
+let advanced_section = 'advanced';
+
+Vvveb.Components.add("_base", {
+    name: "Element",
+	properties: [{
+        key: "element_header",
+        inputtype: SectionInput,
+        name:false,
+        sort:base_sort++,
+        data: {header:"General"},
+    },{
+        name: "Id",
+        key: "id",
+        htmlAttr: "id",
+        sort: base_sort++,
+        inline:false,
+        col:6,
+        inputtype: TextInput
+    },{
+        name: "Class",
+        key: "class",
+        htmlAttr: "class",
+        sort: base_sort++,
+        inline:false,
+        col:6,
+        inputtype: TextInput
+    }
+   ]
+});    
+
+//display
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+        key: "display_header",
+        inputtype: SectionInput,
+        name:false,
+        sort: base_sort++,
+		section: style_section,
+        data: {header:"Display"},
+     },{
+		//linked styles notice message
+		name:"",
+		key: "linked_styles_check",
+        sort: base_sort++,
+        section: style_section,
+        inline:false,
+        col:12,
+        inputtype: NoticeInput,
+        data: {
+			type:'warning',
+			title:'Linked styles',
+			text:'This element shares styles with other <a class="linked-elements-hover" href="javascript:void()"><b class="elements-count">4</b> elements</a>, to apply styles <b>only for this element</b> enter a <b>unique id</b> eg: <i>marketing-heading</i> in in <br/><a class="id-input" href="#content-tab" role="tab" aria-controls="components" aria-selected="false" href="#content-tab">Content > General > Id</a>.<br/><span class="text-muted small"></span>',
+		},
+		afterInit:function(node, inputElement) {
+			let selector = Vvveb.StyleManager.getSelectorForElement(node);
+			let elements = window.FrameDocument.querySelectorAll(selector);
+
+			if (elements.length <= 1) {
+				if (inputElement.style) {
+					inputElement.style.display = "none";
+				}
+			} else {
+				inputElement.style.display = "";
+				inputElement.querySelector(".elements-count").innerHTML = elements.length;
+				inputElement.querySelector(".text-muted").innerHTML = selector;
+				
+				inputElement.querySelector(".id-input", inputElement).addEventListener("click", (event) => {
+					document.querySelectorAll(".content-tab a").forEach(e => e.click());
+					
+					setTimeout(function () { 
+						let idInput = document.querySelectorAll("[name=id]");
+						idInput.forEach(el => {if (el.offsetParent) el.focus()});/*
+						idInput.forEach(el => el .dispatchEvent(new FocusEvent("focusin", {
+							bubbles: true,
+							cancelable: false
+						})));*/
+					}, 700);
+					
+					event.preventDefault();
+					return false;
+				});
+				
+				inputElement.querySelector(".linked-elements-hover").addEventListener("mouseenter", function (){
+					elements.forEach( e => e.style.outline = "2px dotted blue");
+				});
+				
+				inputElement.querySelector(".linked-elements-hover").addEventListener("mouseleave", function (){
+					elements.forEach( e => e.style.outline = "");
+				});
+			}
+		},	 
+    },{
+        name: "Display",
+        key: "display",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: SelectInput,
+        validValues: ["block", "inline", "inline-block", "none"],
+        data: {
+            options: [{
+                value: "block",
+                text: "Block"
+            },{
+                value: "inline",
+                text: "Inline"
+            },{
+                value: "inline-block",
+                text: "Inline Block"
+            },{
+                value: "inline-block",
+                text: "Inline Block"
+            },{
+                value: "flex",
+                text: "Flex"
+            },{
+                value: "inline-flex",
+                text: "Inline Flex"
+            },{
+                value: "grid",
+                text: "Grid"
+            },{
+                value: "inline-grid",
+                text: "Inline grid"
+            },{
+                value: "table",
+                text: "Table"
+            },{
+                value: "table-row",
+                text: "Table Row"
+            },{
+                value: "list-item",
+                text: "List Item"
+            },{
+                value: "inherit",
+                text: "Inherit"
+            },{
+                value: "initial",
+                text: "Initial"
+            },{
+                value: "none",
+                text: "none"
+            }]
+        }
+    },{
+        name: "Position",
+        key: "position",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: SelectInput,
+        validValues: ["static", "fixed", "relative", "absolute"],
+        data: {
+            options: [{
+                value: "static",
+                text: "Static"
+            },{
+                value: "fixed",
+                text: "Fixed"
+            },{
+                value: "relative",
+                text: "Relative"
+            },{
+                value: "absolute",
+                text: "Absolute"
+            }]
+        }
+    },{
+        name: "Top",
+        key: "top",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        parent:"",
+        inputtype: CssUnitInput
+	},{
+        name: "Left",
+        key: "left",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        parent:"",
+        inputtype: CssUnitInput
+    },{
+        name: "Bottom",
+        key: "bottom",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        parent:"",
+        inputtype: CssUnitInput
+	},{
+        name: "Right",
+        key: "right",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        parent:"",
+        inputtype: CssUnitInput
+    },{
+        name: "Float",
+        key: "float",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+        inline:false,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "none",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            },{
+                value: "left",
+                //text: "Left",
+                title: "Left",
+                icon:"la la-align-left",
+                checked:false,
+            },{
+                value: "right",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            }],
+         }
+	},{
+        name: "Opacity",
+        key: "opacity",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+		inline:false,
+        parent:"",
+        inputtype: RangeInput,
+        data:{
+			max: 1, //max zoom level
+			min:0,
+			step:0.1
+       },
+	},{
+        name: "Background Color",
+        key: "background-color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+	},{
+        name: "Text Color",
+        key: "color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+  	}]
+});    
+
+//Typography
+let ComponentBaseTypography = {
+	 properties: [{
+		key: "typography_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Typography"},
+ 
+	},{
+        name: "Font size",
+        key: "font-size",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Font weight",
+        key: "font-weight",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "100",
+				text: "Thin"
+			},{
+				value: "200",
+				text: "Extra-Light"
+			},{
+				value: "300",
+				text: "Light"
+			},{
+				value: "400",
+				text: "Normal"
+			},{
+				value: "500",
+				text: "Medium"
+			},{
+				value: "600",
+				text: "Semi-Bold"
+			},{
+				value: "700",
+				text: "Bold"
+			},{
+				value: "800",
+				text: "Extra-Bold"
+			},{
+				value: "900",
+				text: "Ultra-Bold"
+			}],
+		}
+    },{
+        name: "Font family",
+        key: "font-family",
+	htmlAttr: "style",
+        sort: base_sort++,
+	section: style_section,
+        col:12,
+	inline:false,
+        inputtype: SelectInput,
+        data: {
+			options: fontList
+		}
+	},{
+        name: "Text align",
+        key: "text-align",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+        inline:false,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            },{
+                value: "left",
+                //text: "Left",
+                title: "Left",
+                icon:"la la-align-left",
+                checked:false,
+            },{
+                value: "center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            },{
+                value: "right",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            },{
+                value: "justify",
+                //text: "justify",
+                title: "Justify",
+                icon:"la la-align-justify",
+                checked:false,
+            }],
+        },
+	},{
+        name: "Line height",
+        key: "line-height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Letter spacing",
+        key: "letter-spacing",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Text decoration",
+        key: "text-decoration-line",
+        htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+        inline:false,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "none",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            },{
+                value: "underline",
+                //text: "Left",
+                title: "underline",
+                icon:"la la-long-arrow-alt-down",
+                checked:false,
+            },{
+                value: "overline",
+                //text: "Right",
+                title: "overline",
+                icon:"la la-long-arrow-alt-up",
+                checked:false,
+            },{
+                value: "line-through",
+                //text: "Right",
+                title: "Line Through",
+                icon:"la la-strikethrough",
+                checked:false,
+            },{
+                value: "underline overline",
+                //text: "justify",
+                title: "Underline Overline",
+                icon:"la la-arrows-alt-v",
+                checked:false,
+            }],
+        },
+	},{
+        name: "Decoration Color",
+        key: "text-decoration-color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+	},{
+        name: "Decoration style",
+        key: "text-decoration-style",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:true,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "solid",
+				text: "Solid"
+			},{
+				value: "wavy",
+				text: "Wavy"
+			},{
+				value: "dotted",
+				text: "Dotted"
+			},{
+				value: "dashed",
+				text: "Dashed"
+			},{
+				value: "double",
+				text: "Double"
+			}],
+		}
+  }]
+}
+
+Vvveb.Components.extend("_base", "_base", ComponentBaseTypography);
+    
+//Size
+let ComponentBaseSize = {
+	 properties: [{
+		key: "size_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Size", expanded:false},
+	},{
+        name: "Width",
+        key: "width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Height",
+        key: "height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Min Width",
+        key: "min-width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Min Height",
+        key: "min-height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Max Width",
+        key: "max-width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Max Height",
+        key: "max-height",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    }]
+}
+
+Vvveb.Components.extend("_base", "_base", ComponentBaseSize);
+
+//Margin
+let ComponentBaseMargin = {
+	 properties: [{
+		key: "margins_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Margin", expanded:false},
+	},{
+        name: "Top",
+        key: "margin-top",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Right",
+        key: "margin-right",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    },{
+        name: "Bottom",
+        key: "margin-bottom",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    },{
+        name: "Left",
+        key: "margin-left",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    }]
+}
+
+Vvveb.Components.extend("_base", "_base", ComponentBaseMargin);
+
+//Padding
+let ComponentBasePadding = {
+
+	 properties: [{
+		key: "paddings_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Padding", expanded:false},
+	},{
+        name: "Top",
+        key: "padding-top",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Right",
+        key: "padding-right",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    },{
+        name: "Bottom",
+        key: "padding-bottom",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    },{
+        name: "Left",
+        key: "padding-left",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    }]
+}
+
+Vvveb.Components.extend("_base", "_base", ComponentBasePadding);
+
+
+//Border
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "border_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Border", expanded:false},
+	 },{        
+        name: "Style",
+        key: "border-style",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:12,
+		inline:false,
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "solid",
+				text: "Solid"
+			},{
+				value: "dotted",
+				text: "Dotted"
+			},{
+				value: "dashed",
+				text: "Dashed"
+			}],
+		}
+	},{
+        name: "Width",
+        key: "border-width",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+   	},{
+        name: "Color",
+        key: "border-color",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+		htmlAttr: "style",
+        inputtype: ColorInput,
+	}]
+});    
+
+
+
+//Border radius
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "border_radius_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Border radius", expanded:false},
+	},{
+        name: "Top Left",
+        key: "border-top-left-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+	},{
+        name: "Top Right",
+        key: "border-top-right-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    },{
+        name: "Bottom Left",
+        key: "border-bottom-left-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    },{
+        name: "Bottom Right",
+        key: "border-bottom-right-radius",
+		htmlAttr: "style",
+        sort: base_sort++,
+		section: style_section,
+        col:6,
+		inline:false,
+        inputtype: CssUnitInput
+    }]
+});    
+
+//Background image
+Vvveb.Components.extend("_base", "_base", {
+	 properties: [{
+		key: "background_image_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: style_section,
+		data: {header:"Background Image", expanded:false},
+	 },{
+        name: "Image",
+        key: "Image",
+        sort: base_sort++,
+		section: style_section,
+		//htmlAttr: "style",
+        inputtype: ImageInput,
+        
+        init: function(node) {
+			let image = node.style.backgroundImage.replace(/url\(['"]?([^"\)$]+?)['"]?\).*/, '$1');
+			return image;
+        },
+
+		onChange: function(node, value) {
+			
+			Vvveb.StyleManager.setStyle(node, "background-image", 'url(' + value + ')');
+			
+			return node;
+		}        
+
+   	},{
+        name: "Repeat",
+        key: "background-repeat",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "repeat-x",
+				text: "repeat-x"
+			},{
+				value: "repeat-y",
+				text: "repeat-y"
+			},{
+				value: "no-repeat",
+				text: "no-repeat"
+			}],
+		}
+   	},{
+        name: "Size",
+        key: "background-size",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "contain",
+				text: "contain"
+			},{
+				value: "cover",
+				text: "cover"
+			}],
+		}
+   	},{
+        name: "Position x",
+        key: "background-position-x",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        col:6,
+		inline:true,
+		inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "center",
+				text: "center"
+			},{	
+				value: "right",
+				text: "right"
+			},{
+				value: "left",
+				text: "left"
+			}],
+		}
+   	},{
+        name: "Position y",
+        key: "background-position-y",
+        sort: base_sort++,
+		section: style_section,
+		htmlAttr: "style",
+        col:6,
+		inline:true,
+		inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "",
+				text: "Default"
+			},{	
+				value: "center",
+				text: "center"
+			},{	
+				value: "top",
+				text: "top"
+			},{
+				value: "bottom",
+				text: "bottom"
+			}],
+		}
+    }]
+});    
+
+
+//Device visibility
+let ComponentDeviceVisibility = {
+	 properties: [{
+		key: "visibility_header",
+		inputtype: SectionInput,
+		name:false,
+		sort: base_sort++,
+		section: advanced_section,
+		data: {header:"Hide based on device screen width"},
+	},{
+        name: "Extra small devices",
+        key: "hidexs",
+        col:6,
+		inline:true,
+		sort: base_sort++,
+		section: advanced_section,
+        htmlAttr: "class",
+        validValues: ["d-xs-none"],
+        inputtype: ToggleInput,
+        data: {
+            on: "d-xs-none",
+            off: ""
+        }
+	},{
+        name: "Small devices",
+        key: "hidesm",
+        col:6,
+		inline:true,
+		sort: base_sort++,
+		section: advanced_section,
+        htmlAttr: "class",
+        validValues: ["d-sm-none"],
+        inputtype: ToggleInput,
+        data: {
+            on: "d-sm-none",
+            off: ""
+        }
+	},{
+        name: "Medium devices",
+        key: "hidemd",
+        col:6,
+		inline:true,
+		sort: base_sort++,
+		section: advanced_section,
+        htmlAttr: "class",
+        validValues: ["d-md-none"],
+        inputtype: ToggleInput,
+        data: {
+            on: "d-md-none",
+            off: ""
+        }
+	},{
+        name: "Large devices",
+        key: "hidelg",
+        col:6,
+		inline:true,
+		sort: base_sort++,
+		section: advanced_section,
+        htmlAttr: "class",
+        validValues: ["d-lg-none"],
+        inputtype: ToggleInput,
+        data: {
+            on: "d-lg-none",
+            off: ""
+        }
+	},{
+        name: "Xl devices",
+        key: "hidexl",
+        col:6,
+		inline:true,
+		sort: base_sort++,
+		section: advanced_section,
+        htmlAttr: "class",
+        validValues: ["d-xl-none"],
+        inputtype: ToggleInput,
+        data: {
+            on: "d-xl-none",
+            off: ""
+        }
+	},{
+        name: "Xxl devices",
+        key: "hidexxl",
+        col:6,
+		inline:true,
+		sort: base_sort++,
+		section: advanced_section,
+        htmlAttr: "class",
+        validValues: ["d-xxl-none"],
+        inputtype: ToggleInput,
+        data: {
+            on: "d-xxl-none",
+            off: ""
+        }
+    }]
+};
+
+Vvveb.Components.extend("_base", "_base", ComponentDeviceVisibility);
+
+
+Vvveb.Components.add("config/bootstrap", {
+    name: "Bootstrap Variables",
+	beforeInit: function (node) {
+		properties = [];
+		let i = 0;
+		let j = 0;
+
+		let cssVars = Vvveb.ColorPaletteManager.getAllCSSVariableNames(window.FrameDocument.styleSheets/*, ":root"*/);
+		
+		for (type in cssVars) {
+			properties.push({
+				key: "cssVars" + type,
+				inputtype: SectionInput,
+				name:type,
+				sort: base_sort++,
+				data: {header:type[0].toUpperCase() + type.slice(1)},
+			});
+			
+			for (selector in cssVars[type]) {
+				
+				let friendlyName = selector.replaceAll(/--bs-/g,"").replaceAll("-", " ").trim();  
+				friendlyName = friendlyName[0].toUpperCase() + friendlyName.slice(1);
+
+				let value = cssVars[type][selector];
+				let input;
+				
+				data = {selector, type:value.type, step:"any"};
+				
+				if (value.type == "color") {
+					input = ColorInput;
+				} else if (value.type == "font") {
+					input = SelectInput;
+					data.options = fontList;
+				} else if (value.type == "dimensions") {
+					input = CssUnitInput;
+				}
+
+				i++;
+				properties.push({
+					name: friendlyName,
+					key: "cssvar" + i,
+					defaultValue: value.value,
+					//index: i - 1,
+					columnNode: this,
+					col:(value.type == "font" || value.type == "dimensions") ? 12 : 6,
+					inline:(value.type == "font" || value.type == "dimensions") ? false : true,
+					section: advanced_section,
+					inputtype: input,
+					data: data,
+					onChange: function(node, value, input) {
+						
+						if (this.data.type == "font") {
+							let option = input.options[input.selectedIndex];
+							Vvveb.FontsManager.addFont(option.dataset.provider, value, node[0]);
+						}
+
+						Vvveb.StyleManager.setStyle(":root", this.data.selector, value);
+						
+						return node;
+					},	
+				});
+			}
+		}
+		
+		this.properties = properties;
+		return node;
+	},
+	properties: [],
+});

libs/builder/components-elements.js

@@ -0,0 +1,1428 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/Vvvebjs
+*/
+
+Vvveb.ComponentsGroup['Elements'] = [
+/*sections */
+"elements/font-icon",
+"elements/carousel", 
+"elements/gallery",
+"elements/slider",
+"elements/tabs",
+"elements/accordion",
+"elements/flip-box",
+"elements/counter",
+"elements/svg-icon",
+"elements/figure",
+//"elements/testimonial",
+"elements/social-icons",
+//"elements/icon-list",
+//"elements/divider",
+//"elements/separator",
+//"elements/image-box",
+//"elements/icon-box",
+//"elements/animated-headline",
+//"elements/price-table",
+//"elements/price-list",
+//"elements/reviews",
+"elements/code",
+"elements/image-compare",
+//"elements/back-to-top",
+//"elements/blob",
+//"elements/image-shape",
+//"elements/image-shape",
+//"elements/rating",
+];
+
+Vvveb.Components.extend("_base","elements/figure", {
+    nodes: ["figure"],
+	name: "Figure",
+    image: "icons/image.svg",
+    resizable:true,
+    html: `<figure>
+		  <img src="${Vvveb.baseUrl}icons/image.svg" alt="Trulli">
+		  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
+		  <div class="border"></div>
+		</figure>`,
+		
+	stylesheets:[{
+			//the css is added in head when the element is added to page
+			'src': Vvveb.baseUrl + 'css/figure.css',
+			//the css is removed on save if none of the figure elements are present in the page
+			'mustHaveElement':"figure",
+		},
+	],
+	/*
+	javascripts:[
+		{
+			'src': Vvveb.baseUrl + 'css/figure.js',
+			//the js is removed on save if none of the figure elements are present in the page
+			'mustHaveElement':"figure",
+		}
+	],*/	
+    resizable:true,//show select box resize handlers
+    
+    properties: [{
+        name: "Image",
+        key: "src",
+        child:"img",
+        htmlAttr: "src",
+        inputtype: ImageInput
+    },{
+        name: "Width",
+        key: "width",
+        child:"img",
+        htmlAttr: "width",
+        inputtype: CssUnitInput
+    },{
+        name: "Height",
+        key: "height",
+        child:"img",
+        htmlAttr: "height",
+        inputtype: CssUnitInput
+    },{
+        name: "Alt",
+        key: "alt",
+        child:"img",
+        htmlAttr: "alt",
+        inputtype: TextInput
+    },{
+        name: "Caption",
+        key: "caption",
+        child:"figcaption",
+        htmlAttr: "innerHTML",
+        inputtype: TextareaInput
+    }]    
+});
+
+
+
+//Icon
+Vvveb.Components.extend("_base","elements/font-icon", {
+    classes: ["la", "lab"],
+    name: "Font Icon",
+    image: "icons/star.svg",
+    html: `<i class="la la-star la-2x"></i>`,
+    properties: [
+{
+		name: "Icon",
+		key: "icon",
+		inline:true,
+		inputtype: HtmlListSelectInput,
+		onChange:function(element, value, input, component) {
+			element.classList.remove("la", "lab", "lar");
+			let className = element.getAttribute('class');
+			element.classList.forEach((value, key, listObj) => {
+				if (value.startsWith("la-") && value != "la-lg") {
+					element.classList.remove(value);
+				}
+			});
+
+			element.classList.add(...input.className.split(" "));
+			return element;
+		},
+		data: {
+			url: Vvveb.baseUrl + "../../resources/{value}.html",
+			clickElement:"li",
+			insertElement:"i",
+			elements: 'Loading ...',
+			options: [{
+                value: "line-awesome",
+                text: "Line-awesome"
+            }]
+		},
+	},{
+        name: "Size",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["","la-lg", "la-2x"],
+        data: {
+            options: [{
+                value: "",
+                text: "Normal"
+            },{
+                value: "la-lg",
+                text: "Large"
+            },{
+                value: "la-2x",
+                text: "2x"
+            }]
+        }
+    }]
+});   
+/*
+V.Resources.Icons =
+[{
+	value: `stopwatch.svg`,
+	text: "Star"
+}, 
+{
+	value: `envelope.svg`,
+	text: "Sections"
+},{
+	value: `star.svg`,
+	text: "Flipbox"
+}];*/
+
+Vvveb.Components.extend("_base","elements/svg-icon", {
+    nodes: ["svg"],
+    name: "Svg Icon",
+    image: "icons/star.svg",
+    html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
+		<path d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z"/>
+    </svg>`,
+    properties: [{
+		name: "Icon",
+		key: "icon",
+		inline:true,
+		inputtype: HtmlListSelectInput,
+		onChange:function(element, value, input, component) {
+			let newElement = generateElements(value)[0];
+			let attributes = element.attributes;
+			
+			//keep old svg size and colors
+			for (let i = 0; i < attributes.length; i++) {
+				let attr = attributes[i];
+				if (attr.name && attr.name != "viewBox") {
+					newElement.setAttribute(attr.name, attr.value);
+				}
+			}
+			
+			element.replaceWith(newElement);
+			return newElement;
+		},
+                data: {
+				url: Vvveb.baseUrl + "../../resources/svg/icons/{value}/index.html",
+				clickElement:"li",
+				insertElement:"svg",
+				elements: 'Loading ...',
+				options: [{
+					value: "eva-icons",
+					text: "Eva icons"
+				},{
+					value: "ionicons",
+					text: "IonIcons"
+				},{
+					value: "linea",
+					text: "Linea"
+				},{
+					value: "remix-icon",
+					text: "RemixIcon"
+				},{
+					value: "unicons",
+					text: "Unicons"
+				},{
+					value: "clarity-icons",
+					text: "Clarity icons"
+				},{
+					value: "jam-icons",
+					text: "Jam icons"
+				},{
+					value: "ant-design-icons",
+					text: "Ant design icons"
+				},{
+					value: "themify",
+					text: "Themify"
+				},{
+					value: "css.gg",
+					text: "Css.gg"
+				},{
+					value: "olicons",
+					text: "Olicons"
+				},{
+					value: "open-iconic",
+					text: "Open iconic"
+				},{
+					value: "boxicons",
+					text: "Box icons"
+				},{
+					value: "elegant-font",
+					text: "Elegant font"
+				},{
+					value: "dripicons",
+					text: "Dripicons"
+				},{
+					value: "feather",
+					text: "Feather"
+				},{
+					value: "coreui-icons",
+					text: "Coreui icons"
+				},{
+					value: "heroicons",
+					text: "Heroicons"
+				},{
+					value: "iconoir",
+					text: "Iconoir"
+				},{
+					value: "iconsax",
+					text: "Iconsax"
+				},{
+					value: "ikonate",
+					text: "Ikonate"
+				},{
+					value: "tabler-icons",
+					text: "Tabler icons"
+				},{
+					value: "octicons",
+					text: "Octicons"
+				},{
+					value: "system-uicons",
+					text: "System-uicons"
+				},{
+					value: "font-awesome",
+					text: "FontAwesome"
+				},{
+					value: "pe-icon-7-stroke",
+					text: "Pixeden icon 7 stroke"
+				},{
+					value: "77_essential_icons",
+					text: "77 essential icons"
+				},{
+					value: "150-outlined-icons",
+					text: "150 outlined icons"
+				},{
+					value: "material-design",
+					text: "Material Design"
+				}]
+            },
+	   },{
+		name: "Width",
+		key: "width",
+		htmlAttr: "width",
+		inputtype: RangeInput,
+		data:{
+			max: 640,
+			min:6,
+			step:1
+		}
+   },{
+		name: "Height",
+		key: "height",
+		htmlAttr: "height",
+		inputtype: RangeInput,
+		data:{
+			max: 640,
+			min:6,
+			step:1
+		}			
+   },{
+		name: "Stroke width",
+		key: "stroke-width",
+		htmlAttr: "stroke-width",
+		inputtype: RangeInput,
+		data:{
+			max: 512,
+			min:1,
+			step:1
+		}			
+   },{
+		key: "svg_style_header",
+		inputtype: SectionInput,
+		name:false,
+		//sort: base_sort++,
+		section: style_section,
+		data: {header:"Svg colors"},
+	},{
+        name: "Fill Color",
+        key: "fill",
+        //sort: base_sort++,
+        col:4,
+        inline:true,
+        section: style_section,
+        htmlAttr: "fill",
+        inputtype: ColorInput,
+   },{
+        name: "Color",
+        key: "color",
+        //sort: base_sort++,
+        col:4,
+        inline:true,
+        section: style_section,
+        htmlAttr: "color",
+        inputtype: ColorInput,
+   },{
+        name: "Stroke",
+        key: "Stroke",
+        //sort: base_sort++,
+        col:4,
+        inline:true,
+        section: style_section,
+        htmlAttr: "stroke",
+        inputtype: ColorInput,
+  	}]
+});   
+
+
+Vvveb.Components.add("elements/svg-element", {
+    nodes: ["path", "line", "polyline", "polygon", "rect", "circle", "ellipse", "g"],
+    name: "Svg element",
+    image: "icons/star.svg",
+    html: ``,
+    properties: [{
+        name: "Fill Color",
+        key: "fill",
+        //sort: base_sort++,
+        col:4,
+        inline:true,
+		section: style_section,
+		htmlAttr: "fill",
+        inputtype: ColorInput,
+   },{
+        name: "Color",
+        key: "color",
+        //sort: base_sort++,
+        col:4,
+        inline:true,
+		section: style_section,
+		htmlAttr: "color",
+        inputtype: ColorInput,
+   },{
+        name: "Stroke",
+        key: "Stroke",
+        //sort: base_sort++,
+        col:4,
+        inline:true,
+		section: style_section,
+		htmlAttr: "color",
+        inputtype: ColorInput,
+  	},{
+  		name: "Stroke width",
+		key: "stroke-width",
+		htmlAttr: "stroke-width",
+		inputtype: RangeInput,
+		data:{
+			max: 512,
+			min:1,
+			step:1
+		}			
+	}]
+});  
+
+//Gallery
+Vvveb.Components.add("elements/gallery", {
+    attributes: ["data-component-gallery"],
+    name: "Gallery",
+    image: "icons/images.svg",
+    html: `
+			<div class="gallery masonry has-shadow" data-component-gallery>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/1.jpg">
+					</a>
+				</div>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/2.jpg">
+					</a>
+				</div>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/3.jpg">
+					</a>
+				</div>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/4.jpg">
+					</a>
+				</div>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/5.jpg">
+					</a>
+				</div>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/6.jpg">
+					</a>
+				</div>
+				<div class="item">
+					<a>
+						<img src="../../media/posts/7.jpg">
+					</a>
+				</div>
+			</div>
+			`,
+		properties: [{
+			name: "Masonry layout",
+			key: "masonry",
+			htmlAttr: "class",
+			validValues: ["masonry", "flex"],
+			inputtype: ToggleInput,
+			data: {
+				on: "masonry",
+				off: "flex"
+			},
+			setGroup: group => {
+				document.querySelectorAll(".mb-3[data-group]").forEach(el => el.style.display = "none");
+				document.querySelector('.mb-3[data-group="'+ group + '"]').style.display = "";
+			}, 		
+			onChange : function(node, value, input)  {
+				this.setGroup(value);
+				return node;
+			}, 
+			init: function (node) {
+				if (node.classList.contains("masonry")) {
+					return "masonry";
+				} else {
+					return "flex";
+				}
+			},   			
+		},{
+			name: "Image shadow",
+			key: "shadow",
+			htmlAttr: "class",
+			validValues: [ "", "has-shadow"],
+			inputtype: ToggleInput,
+			data: {
+				on: "has-shadow",
+				off: ""
+			},
+		},{
+			name: "Horizontal gap",
+			key: "column-gap",
+			htmlAttr: "style",
+			inputtype: CssUnitInput,
+			data:{
+				max: 100,
+				min:0,
+				step:1
+			}
+	   },{
+			name: "Vertical gap",
+			key: "margin-bottom",
+			htmlAttr: "style",
+			child: ".item",
+			inputtype: CssUnitInput,
+			data:{
+				max: 100,
+				min:0,
+				step:1
+			}
+	   },{
+			name: "Images per row masonry",
+			key: "column-count",
+			group:"masonry",
+			htmlAttr: "style",
+			inputtype: RangeInput,
+			data:{
+				max: 12,
+				min:1,
+				step:1
+			}
+		},{
+			name: "Images per row flex",
+			group:"flex",
+			key: "flex-basis",
+			child: ".item",
+			htmlAttr: "style",
+			inputtype: RangeInput,
+			data:{
+				max: 12,
+				min:1,
+				step:1
+			},
+			onChange: function(node, value, input, component, inputElement) {
+				if (value) {
+					value = 100 / value;
+					value += "%";
+				} 
+				
+				return value;
+			}  			
+	   },{
+			name: "",
+			key: "addChild",
+			inputtype: ButtonInput,
+			data: {text:"Add image", icon:"la la-plus"},
+			onChange: function(node) {
+				 node.append(generateElements('<div class="item"><a><img src="../../media/posts/1.jpg"></a></div>')[0]);
+				 
+				 //render component properties again to include the new image
+				 //Vvveb.Components.render("ellements/gallery");
+				 
+				 return node;
+			}
+	}],
+    init(node)	{
+
+		document.querySelectorAll(".mb-3[data-group]").forEach(el => el.style.display = "none");
+		
+		let source = "flex";
+		if (node.classList.contains("masonry")) {
+			source = "masonry";
+		} else {
+			source = "flex";
+		}
+		
+		document.querySelector('.mb-3[data-group="'+ source + '"]').style.display = "";
+	}	
+});  
+
+//Tabs
+Vvveb.Components.add("elements/tab", {
+	//attributes: ["data-component-tabs"],
+	classes: ["tab-pane"],
+    name: "Tab",
+    image: "icons/tabs.svg",
+    html: ``,
+    properties: [{
+			name: "Id",
+			key: "id",
+			htmlAttr: "id",
+			inline:false,
+			col:6,
+			inputtype: TextInput
+		},{
+			name: "Class",
+			key: "class",
+			htmlAttr: "class",
+			inline:false,
+			col:6,
+			inputtype: TextInput
+			
+		} , {
+        name: "Active",
+        key: "active",
+        htmlAttr: "class",
+        validValues: ["", "active"],
+        inputtype: ToggleInput,
+        inline:true,
+        col:6,
+        data: {
+            on: "active",
+            off: ""
+        }
+    }]
+}); 
+	
+Vvveb.Components.add("elements/tabs", {
+    attributes: ["data-component-tabs"],
+    name: "Tabs",
+    image: "icons/tabs.svg",
+    html: `
+	<div data-component-tabs id="tabs-parentId">
+			<nav>
+			  <div class="nav nav-tabs" role="tablist">
+				<button class="nav-link active" id="nav-tab-parentId-1" data-bs-toggle="tab" data-bs-target="#nav-parentId-1" type="button" role="tab" aria-controls="nav-1" aria-selected="true">Home</button>
+				<button class="nav-link" id="nav-tab-parentId-2" data-bs-toggle="tab" data-bs-target="#nav-parentId-2" type="button" role="tab" aria-controls="nav-2" aria-selected="false">Profile</button>
+				<button class="nav-link" id="nav-tab-parentId-3" data-bs-toggle="tab" data-bs-target="#nav-parentId-3" type="button" role="tab" aria-controls="nav-3" aria-selected="false">Contact</button>	  </div>
+			</nav>
+			<div class="tab-content">
+			  <div class="tab-pane p-4 show active" id="nav-parentId-1" role="tabpanel" aria-labelledby="nav-tab-1" tabindex="0">
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis perferendis rem accusantium ducimus animi nesciunt expedita omnis aut quas molestias!</p>
+			  </div>
+			  <div class="tab-pane p-4" id="nav-parentId-2" role="tabpanel" aria-labelledby="nav-tab-2" tabindex="0">
+				<p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
+			  </div>
+			  <div class="tab-pane p-4" id="nav-parentId-3" role="tabpanel" aria-labelledby="nav-tab-3" tabindex="0">
+				<p>Quisque sagittis non ex eget vestibulum</p>
+			  </div>
+			</div>
+	</div>`,
+	afterDrop: function(node) {
+		//set unique accordion parent id, this is a bootstrap accordion limitation
+		let parentId = Math.ceil(Math.random() * 1000);
+		node.id = 'tabs-' + parentId;
+		node.innerHTML = node.innerHTML.replaceAll('parentId', parentId);
+
+		return node;
+	},	
+    properties: [{
+			//name: "List",
+			key: "list",
+			component: "elements/tab",
+			children :[{
+				component: "elements/tab",
+				name: "html/gridcolumn",
+				classesRegex: ["col-"],
+			}],			
+			inline:false,
+			inputtype: ListInput,
+			data: {
+				selector:"> .nav-link",
+				container:"nav > .nav-tabs",
+				prefix:"Tab ",
+				name: "text",
+				removeElement: false,//handle manually to delete pane also
+				//"newElement": ``
+			},
+			onChange: function(node, value, input, component, event) {
+				let element = node;
+				let tabsId = element.id.replace('tabs-','');
+				
+				let nav = node.querySelector("nav .nav-tabs");
+				let content = node.querySelector(".tab-content");
+
+				if (event.action) {
+					if (event.action == "add") {
+						let random = Math.floor(Math.random() * 100) + 1;
+						let index = nav.childElementCount + 1;
+						
+						nav.append(generateElements(`<button class="nav-link" id="nav-tab-${tabsId}-${index}-${random}" data-bs-toggle="tab" data-bs-target="#tab-${tabsId}-${index}-${random}" type="button" role="tab" aria-controls="tab-${index}-${random}" aria-selected="false">Tab ${index}</button>`)[0]);
+						
+						content.append(generateElements(`<div class="tab-pane p-4" id="tab-${tabsId}-${index}-${random}" role="tabpanel" aria-labelledby="tab-${tabsId}-${index}-${random}" tabindex="0"><p>Never think of results, just do!</p></div>`)[0]);
+						
+						//temporary solution to better update list
+						Vvveb.Components.render("elements/tabs");
+					}
+					
+					let index = event.index + 1;
+					if (event.action == "remove") {
+						nav.querySelector("button:nth-child(" + index + ")").remove();
+						content.querySelector(".tab-pane:nth-child(" + index + ")").remove();
+					} else if (event.action == "select") {
+						let tab = nav.querySelector("button:nth-child(" + index + ")");
+						Vvveb.Builder.iframe.contentWindow.bootstrap.Tab.getOrCreateInstance(tab).show();
+					}
+				}
+				
+				return node;
+			},
+		}
+	]
+}); 	
+
+
+//Accordion
+Vvveb.Components.add("elements/accordion", {
+    classes: ["accordion"],
+    name: "Accordeon",
+    image: "icons/accordion.svg",
+    html: `<div class="accordion" id="accordion-parentId">
+		  <div class="accordion-item">
+			<h2 class="accordion-header" id="headingOne-parentId">
+			  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-parentId" aria-expanded="true" aria-controls="collapseOne-parentId">
+				Accordion Item #1
+			  </button>
+			</h2>
+			<div id="collapseOne-parentId" class="accordion-collapse collapse show" aria-labelledby="headingOne-parentId" data-bs-parent="#accordion-parentId">
+			  <div class="accordion-body">
+				<p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
+			  </div>
+			</div>
+		  </div>
+		  <div class="accordion-item">
+			<h2 class="accordion-header" id="headingTwo-parentId">
+			  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-parentId" aria-expanded="false" aria-controls="collapseTwo">
+				Accordion Item #2
+			  </button>
+			</h2>
+			<div id="collapseTwo-parentId" class="accordion-collapse collapse" aria-labelledby="headingTwo-parentId" data-bs-parent="#accordion-parentId">
+			  <div class="accordion-body">
+				<p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
+			  </div>
+			</div>
+		  </div>
+		  <div class="accordion-item">
+			<h2 class="accordion-header" id="headingThree-parentId">
+			  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-parentId" aria-expanded="false" aria-controls="collapseThree">
+				Accordion Item #3
+			  </button>
+			</h2>
+			<div id="collapseThree-parentId" class="accordion-collapse collapse" aria-labelledby="headingThree-parentId" data-bs-parent="#accordion-parentId">
+			  <div class="accordion-body">
+				<p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
+			  </div>
+			</div>
+		  </div>
+		</div>`,
+	afterDrop: function(node) {
+		//set unique accordion id
+		let parentId = Math.ceil(Math.random() * 1000);
+		//node.outerHTML = node.outerHTML.replaceAll('parentId', parentId);
+		node.id = 'accordion-' + parentId;
+		node.innerHTML = node.innerHTML.replaceAll('parentId', parentId);
+		
+		return node;
+	},
+    properties: [{
+			//name: "List",
+			key: "list",
+			component: "elements/tab",
+			inline:false,
+			inputtype: ListInput,
+			data: {
+				selector:":scope > .accordion-item",
+				container:"",
+				prefix:"Item ",
+				name: "text",
+				nameElement: ".accordion-button",
+				removeElement: false,//handle manually
+				//"newElement": ``
+			},
+			onChange: function(node, value, input, component, event) {
+				let element = node;
+				let accordionId = element.id.replace('accordion-','');
+				
+				if (event.action) {
+					if (event.action == "add") {
+						let random = Math.floor(Math.random() * 100) + 1;
+						let index = element.childElementCount + 1;
+						
+						node.append(generateElements(`<div class="accordion-item">
+							<h2 class="accordion-header" id="heading-${index}-${random}">
+							  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${index}-${random}" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #${index}</button>
+							</h2>
+							<div id="collapse-${index}-${random}" class="accordion-collapse collapse" aria-labelledby="heading-${index}-${random}" data-bs-parent="#accordion-${accordionId}">
+							  <div class="accordion-body">
+								<p>Begin with the possible; begin with one step.</p>
+							  </div>
+							</div>
+						  </div>`)[0]);
+						
+						//temporary solution to better update list
+						Vvveb.Components.render("elements/accordion");
+					}
+					
+					let index = (event.index + 1);
+					if (event.action == "remove") {
+						node.querySelector(":scope > .accordion-item:nth-child(" + index + ")").remove();
+					} else if (event.action == "select") {
+						let el = node.querySelector(":scope > .accordion-item:nth-child(" + index + ")");
+						let btn= el.querySelector(".accordion-button");
+						let collapse = el.querySelector(" .collapse");
+
+						node.querySelectorAll(":scope > .accordion-item .collapse").forEach(e => e.classList.remove("show"));
+						node.querySelectorAll(":scope > .accordion-item .accordion-button").forEach(btn => btn.classList.add("collapsed"));
+						collapse.classList.add("show");
+						btn.classList.remove("collapsed");
+						//el[0].click();
+						//Vvveb.Builder.iframe.contentWindow.bootstrap.Collapse.getOrCreateInstance(el[0]).toggle();
+					}
+				}
+				
+				return node;
+			},
+		},{
+			name: "Flush",
+			key: "flush",
+			htmlAttr: "class",
+			validValues: ["accordion-flush"],
+			inputtype: ToggleInput,
+			data: {
+				on: "accordion-flush",
+				off: ""
+			}
+		},		
+	]
+}); 
+
+Vvveb.Components.add("elements/flip-box", {
+    classes: ["flip-box"],
+    name: "Flip box",
+    image: "icons/flipbox.svg",
+    html: `<div class="flip-box enabled">
+		  <div class="flip-box-inner">
+			<div class="flip-box-front">
+				  <div class="card">
+				  <img src="../../media/posts/1.jpg" class="card-img-top" alt="Post">
+				  <div class="card-body">
+					<h5 class="card-title">Card title</h5>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+					<a href="#" class="btn btn-primary">Go somewhere</a>
+				  </div>
+				</div>	
+			</div>
+			
+			<div class="flip-box-back">
+				<div class="d-flex align-items-center flex-column">
+				  <div class="flex-shrink-0">
+					<img src="../../media/posts/2.jpg" alt="Post">
+				  </div>
+				  <div class="flex-grow-1 ms-3">
+					<p>
+						This is some content from a media component. You can replace this with any content and adjust it as needed.
+					</p>
+					
+					<a href="#" class="btn btn-primary">Go somewhere</a>
+				  </div>
+				</div>
+			</div>
+		  </div>
+		</div>`,
+		properties: [{
+			name: "Width",
+			key: "width",
+			htmlAttr: "style",
+			inputtype: CssUnitInput
+		},{
+			name: "Height",
+			key: "height",
+			htmlAttr: "style",
+			inputtype: CssUnitInput
+		},{
+			name: "Enabled",
+			key: "enabled",
+			htmlAttr: "class",
+			validValues: ["enabled"],
+			inputtype: ToggleInput,
+			data: {
+				on: "enabled",
+				off: ""
+			}
+		},{
+			name: "Show back",
+			key: "back",
+			htmlAttr: "class",
+			validValues: ["back"],
+			inputtype: ToggleInput,
+			data: {
+				on: "back",
+				off: ""
+			}
+		},
+		{
+			name: "Vertical",
+			key: "vertical",
+			htmlAttr: "class",
+			validValues: ["vertical"],
+			inputtype: ToggleInput,
+			data: {
+				on: "vertical",
+				off: ""
+			}
+		},
+	]
+});   
+
+Vvveb.Components.add("elements/counter", {
+    nodes: [".counter"],
+    name: "Counter",
+    image: "icons/stopwatch.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/testimonial", {
+    nodes: [".counter"],
+    name: "Testimonial",
+    image: "icons/testimonial.svg",
+    html: `<blockquote cite="https://en.wikipedia.org/wiki/Marcus_Aurelius">
+				<p>Today I shall be meeting with interference, ingratitude, insolence, disloyalty, ill-will, and selfishness all of them due to the offenders' ignorance of what is good or evil.</p>
+				<cite class="small">
+					<a href="https://en.wikipedia.org/wiki/Marcus_Aurelius" class="text-decoration-none" target="blank">Marcus Aurelius</a>
+				</cite>	
+			</blockquote>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/social-icons", {
+    classes: ["social-icons"],
+    name: "Social icons",
+    image: "icons/social-icons.svg",
+    html: `<ul class="social-icons list-unstyled">
+				<li>
+					<a href="https://facebook.com">
+						<i class="lab la-facebook-f la-2x"></i> <span>Facebook</span>
+					</a>
+				</li>
+				<li>
+					<a href="https://linkedin.com">
+						<i class="lab la-linkedin-in la-2x"></i> <span>Linkedin</span>
+					</a>
+				</li>		
+				<li>
+					<a href="https://twitter.com">
+						<i class="lab la-twitter la-2x"></i> <span>Twitter</span>
+					</a>
+				</li>					
+				<li>
+					<a href="https://instagram.com">
+						<i class="lab la-instagram la-2x"></i> <span>Instagram</span>
+					</a>
+				</li>				
+				<li>
+					<a href="https://github.com">
+						<i class="lab la-github la-2x"></i> <span>Github</span>
+					</a>
+				</li>
+			</ul>`,
+		properties: [{
+			//name: "List",
+			key: "list",
+			//component: "elements/tab",
+			inline:false,
+			inputtype: ListInput,
+			data: {
+				selector:"> li",
+				container:"",
+				prefix:"Item ",
+				name: "text",
+				nameElement: "span",
+				removeElement: true,
+				//"newElement": ``
+			},
+			onChange: function(node, value, input, component, event) {
+				let element = node;
+
+				if (event.action) {
+					if (event.action == "add") {
+						node.append(generateElements(`<li>
+							<a href="https://twitter.com">
+								<i class="lab la-twitter la-2x"></i> <span>Twitter</span>
+							</a>
+						</li>`)[0]);
+						
+						//temporary solution to better update list
+						Vvveb.Components.render("elements/social-icons");
+					}
+					if (event.action == "remove") {
+						node.querySelector(":scope > li:nth-child(" + event.index + ")").remove();
+					} else if (event.action == "select") {
+						let el = node.querySelector(":scope > li:nth-child(" + event.index + ")");
+						//el[0].click();
+						//Vvveb.Builder.iframe.contentWindow.bootstrap.Collapse.getOrCreateInstance(el[0]).toggle();
+					}
+				}
+				
+				return node;
+			},
+		},{
+			name: "Inline",
+			key: "list-inline",
+			htmlAttr: "class",
+			validValues: ["list-inline"],
+			inputtype: ToggleInput,
+			data: {
+				on: "list-inline",
+				off: ""
+			}
+		},{
+			name: "Unstyled",
+			key: "list-unstyled",
+			htmlAttr: "class",
+			validValues: ["list-unstyled"],
+			inputtype: ToggleInput,
+			data: {
+				on: "list-unstyled",
+				off: ""
+			}
+		}]
+}); 
+
+function carouselAfterDrop(node) {
+	//check if swiper js is included and if not add it when drag starts to allow the script to load
+	body = Vvveb.Builder.frameBody;
+
+	if (!body.querySelector("#swiper-js")) {
+		let link = document.createElement('link');
+		let lib = document.createElement('script');
+		let code = document.createElement('script');
+		link.href = '../../libs/swiper/swiper-bundle.min.css';
+		link.id = 'swiper-css';
+		link.rel = 'stylesheet';
+		lib.id = 'swiper-js';
+		lib.type = 'text/javascript';
+		lib.src = '../../libs/swiper/swiper-bundle.min.js';
+		code.type = 'text/javascript';
+		code.text = `
+		let swiper = [];
+		function initSwiper(onlyNew = false) {
+			if (typeof Swiper == "undefined") return;
+			let list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
+			list.forEach(el => {
+				let params = {      
+					navigation: {
+						nextEl: ".swiper-button-next",
+						prevEl: ".swiper-button-prev",
+					},      
+					pagination: {
+						el: ".swiper-pagination",
+				  },
+				};
+				for (i in el.dataset) {
+					let param = el.dataset[i];
+					if (param[0] = '{') {
+						param = JSON.parse(param);
+					}
+					params[i] = param;
+				}
+				swiper.push(new Swiper(el, params))
+				//swiper.push(new Swiper(el, { ...{autoplay:{delay: 500}}, ...el.dataset}))		
+			});
+		}
+
+		if (document.readyState !== 'loading') {
+			initSwiper();
+		  } else {
+			document.addEventListener('DOMContentLoaded', initSwiper);
+		  }`;			
+		
+		body.appendChild(link);
+		body.appendChild(lib);
+		body.appendChild(code);
+		
+		lib.addEventListener('load', function() {		
+			Vvveb.Builder.iframe.contentWindow.initSwiper();
+		});
+	} else {
+		Vvveb.Builder.iframe.contentWindow.initSwiper(true);
+	}
+	
+	return node;
+};
+
+Vvveb.Components.add("elements/carousel", {
+    name: "Carousel",
+    image: "icons/carousel.svg",
+    classes: ["swiper"],
+    html: `
+	  <div class="swiper" data-slides-per-view="3" data-draggable="true">
+		<div class="swiper-wrapper">
+		  <div class="swiper-slide"><img src="/media/4.jpg" class="img-fluid"><p>Slide 1</p></div>
+		  <div class="swiper-slide"><img src="/media/2.jpg" class="img-fluid"><p>Slide 2</p></div>
+		  <div class="swiper-slide"><img src="/media/5.jpg" class="img-fluid"><p>Slide 3</p></div>
+		  <div class="swiper-slide"><img src="/media/7.jpg" class="img-fluid"><p>Slide 4</p></div>
+		</div>
+		<div class="swiper-pagination"></div>
+
+		<!--
+		<div class="swiper-button-prev"></div>
+		<div class="swiper-button-next"></div>
+		-->
+		
+		<!-- <div class="swiper-scrollbar"></div> -->
+	  </div>	
+	`,
+	afterDrop: carouselAfterDrop,
+	
+    onChange: function (node, property, value) {
+		let element = node;
+		if (property.key == "autoplay" && value == true) {
+			value = {"waitForTransition":true,"enabled":value,"delay":element.dataset.delay};
+		}
+
+		element.swiper.params[property.key] = value;
+		element.swiper.originalParams[property.key] = value;
+		element.swiper.update();
+		return node;
+	},
+
+    properties: [{
+		name: "Slides",
+        key: "slidesPerView",
+        inputtype: ListInput,
+		htmlAttr:"data-slides-per-view",
+		inline:true,
+		data: {
+			selector:".swiper-slide",
+			container:".swiper-wrapper",
+			prefix:"Slide ",
+			removeElement: false,//handle manually with removeSlide
+			//"newElement": `<div class="swiper-slide"><img src="../../media/posts/1.jpg" class="img-fluid"><p>Slide 1</p></div>`
+		},
+        onChange: function(node, value, input, component, event) {
+			let element = node;
+			let dataset = {};
+			for (i in element.dataset) {
+				dataset[i] = element.dataset[i];
+			}; 
+
+			if (event.action) {
+				if (event.action == "add") {
+					let random = Math.floor(Math.random() * 6) + 1;
+					let index = element.swiper.slides.length + 1;
+					element.swiper.appendSlide(generateElements(`<div class="swiper-slide"><img src="../../media/posts/${random}.jpg" class="img-fluid"><p>Slide ${index}</p></div>`)[0]);
+					element.swiper.slideTo(index);
+					//temporary solution to better update list
+					Vvveb.Components.render("elements/carousel");
+				}
+				if (event.action == "remove") {
+					element.swiper.removeSlide(event.index);
+				} else if (event.action == "select") {
+					element.swiper.slideTo(event.index, 300, true);
+				}
+			}
+			
+			setTimeout(function () {
+				for (i in dataset) {
+					element.swiper.params[i] = dataset[i];
+					element.dataset[i] = dataset[i];
+				}; 
+				element.swiper.update(); 
+			}, 1000);
+			
+			return node;
+		},
+	},{
+		name: "Slides per view",
+        key: "slidesPerView",
+        inputtype: NumberInput,
+		htmlAttr:"data-slides-per-view",
+	},{
+		name: "Space between",
+        key: "spaceBetween",
+        inputtype: NumberInput,
+		htmlAttr:"data-space-between",
+	},{
+		name: "Speed",
+        key: "speed",
+        inputtype: NumberInput,
+		htmlAttr:"data-speed",
+		data: {step:100},
+	},{
+		name: "Delay",
+        key: "delay",
+        inputtype: NumberInput,
+		htmlAttr:"data-delay",
+		data: {step:100},
+    },{
+		key: "carousel_options",
+        inputtype: SectionInput,
+        name:false,
+        data: {header:"Options"},
+    },{	
+		name: "Simulate touch",
+        key: "simulateTouch",
+		htmlAttr:"data-simulate-touch",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+    },{	
+		name: "Autoplay",
+        key: "autoplay",
+		htmlAttr:"data-autoplay",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{
+		name: "Auto height",
+        key: "autoHeight",
+		htmlAttr:"data-auto-height",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{
+		name: "Centered slides",
+        key: "centeredSlides",
+		htmlAttr:"data-centered-slides",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Center insufficient",
+        key: "centerInsufficientSlides",
+		htmlAttr:"data-center-insufficient-slides",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Loop",
+        key: "loop",
+		htmlAttr:"data-loop",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Mouse wheel",
+        key: "mousewheel",
+		htmlAttr:"data-mousewheel",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	
+        name: "Pagination",
+        key: "pagination",
+		htmlAttr:"data-pagination",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Rewind",
+        key: "rewind",
+		htmlAttr:"data-rewind",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Scrollbar",
+        key: "scrollbar",
+		htmlAttr:"data-scrollbar",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},/*{
+        name: "direction",
+        key: "direction",
+		htmlAttr:"data-direction",
+		section: style_section,
+        col:6,
+        inline:false,
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "horizontal",
+                icon:"la la-arrow-down",
+                title: "Horizontal",
+                checked:true,
+            },{
+                value: "vertical",
+                title: "Vertical",
+                icon:"la la-arrow-right",
+                checked:false,
+			}],
+		}
+    }*/]
+});
+
+//Slider
+Vvveb.Components.add("elements/slider", {
+	name: "Slider",
+    image: "icons/slider.svg",
+     html: `
+	  <div class="swiper" data-slides-per-view="1" data-draggable="true" data-navigation='{"nextEl": ".swiper-button-next","prevEl": ".swiper-button-prev"}'>
+		<div class="swiper-wrapper">
+		  <div class="swiper-slide"><img src="/media/posts/1.jpg" class="img-fluid"><p>Slider 1</p></div>
+		  <div class="swiper-slide"><img src="/media/posts/2.jpg" class="img-fluid"><p>Slider 2</p></div>
+		  <div class="swiper-slide"><img src="/media/posts/3.jpg" class="img-fluid"><p>Slider 3</p></div>
+		  <div class="swiper-slide"><img src="/media/posts/4.jpg" class="img-fluid"><p>Slider 4</p></div>
+		</div>
+		<div class="swiper-pagination"></div>
+
+		<div class="swiper-button-prev"></div>
+		<div class="swiper-button-next"></div>
+		
+		<!-- <div class="swiper-scrollbar"></div> -->
+	  </div>	
+	`,
+	afterDrop: carouselAfterDrop,
+}); 	
+
+
+Vvveb.Components.add("elements/icon-list", {
+    nodes: [".counter"],
+    name: "Icon list",
+    image: "icons/icon-list.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/divider", {
+    nodes: [".counter"],
+    name: "Divider",
+    image: "icons/stopwatch.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/separator", {
+    nodes: [".counter"],
+    name: "Separator",
+    image: "icons/separator.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/Image box", {
+    nodes: [".counter"],
+    name: "Image Box",
+    image: "icons/stopwatch.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/Icon box", {
+    nodes: [".counter"],
+    name: "Image Box",
+    image: "icons/stopwatch.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/animated-headline", {
+    nodes: [".counter"],
+    name: "Animated headline",
+    image: "icons/dots_three.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/price-table", {
+    nodes: [".counter"],
+    name: "Price table",
+    image: "icons/price-table.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/price-list", {
+    nodes: [".counter"],
+    name: "Price list",
+    image: "icons/stopwatch.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/reviews", {
+    nodes: [".counter"],
+    name: "Reviews",
+    image: "icons/reviews.svg",
+    html: `<i class="font-icon la la-star"></i>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/code", {
+    nodes: ["code"],
+    name: "Code",
+    image: "icons/code.svg",
+    html: `<code>print "Hello world!"</code>`,
+	properties: [{
+		name: "Text",
+		key: "text",
+		inline:false,
+		htmlAttr: "innerHTML",
+		inputtype: TextareaInput,
+		data:{
+			rows:20,
+		}
+	}]
+}); 
+  
+Vvveb.Components.add("elements/image-compare", {
+    nodes: [".counter"],
+    name: "Image Compare",
+    image: "icons/image-compare.svg",
+    html: `<div class="c-compare" style="--value:50%;">
+	  <img class="c-compare__left" src="img/color.jpg" alt="" />
+	  <img class="c-compare__right" src="img/bw.jpg" alt="" />
+	</div>`,
+    properties: [
+	]
+});   
+
+Vvveb.Components.add("elements/rating", {
+    nodes: [".rating"],
+    name: "Rating stars",
+    image: "icons/rating.svg",
+    html: `<div class="rating">
+                <i class="la la-star text-warning"></i>
+                <i class="la la-star text-warning"></i>
+                <i class="la la-star text-warning"></i>
+                <i class="la la-star text-warning"></i>
+                <i class="la la-star text-secondary"></i>
+            </div>`,
+    properties: [
+	]
+});

libs/builder/components-embeds.js

@@ -0,0 +1,92 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/VvvebJs
+*/
+
+
+Vvveb.ComponentsGroup['Embeds'] = ["embeds/embed"];
+
+Vvveb.Components.extend("_base", "embeds/embed", {
+    name: "Embed",
+    attributes: ["data-component-oembed"],
+    image: "icons/code.svg",
+    //dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/maps.png">',
+	html: `<div data-component-oembed data-url="">
+			<div class="alert alert-light  m-5" role="alert">
+				<img width="64" src="${Vvveb.baseUrl}icons/code.svg">
+				<h6>Enter url to embed</h6>
+			</div></div>`,
+
+
+    properties: [{
+        name: "Url",
+        key: "url",
+		htmlAttr: "data-url",
+        inputtype: TextInput,
+        onChange: function(node, value) {
+			node.innerHTML = `<div class="alert alert-light d-flex justify-content-center">
+				  <div class="spinner-border m-5" role="status">
+					<span class="visually-hidden">Loading...</span>
+				  </div>
+				</div>`;
+			
+			getOembed(value).then(response => {
+				  node.innerHTML = response.html;
+				  let containerW = node.offsetWidth;
+				  let iframe = node.querySelector("iframe");
+				  if (iframe) {
+					  let ratio = containerW / iframe.offsetWidth;
+					  iframe.setAttribute("width", (width * ratio));
+					  iframe.setAttribute("height", (height * ratio));
+				  }
+
+				  let arr = node.querySelectorAll('script').forEach(script => {
+						let newScript = Vvveb.Builder.frameDoc.createElement("script");
+						newScript.src = script.src;
+						script.replaceWith(newScript);
+				  });				  
+				  
+			}).catch(error => console.log(error));
+
+			return node;
+		},	
+    },{
+        name: "Width",
+        key: "width",
+        child:"iframe",
+        htmlAttr: "width",
+        inputtype: CssUnitInput
+    },{
+        name: "Height",
+        key: "height",
+        child:"iframe",
+        htmlAttr: "height",
+        inputtype: CssUnitInput
+	}]
+});
+
+for (const provider of ["youtube", "vimeo", "dailymotion", "flickr", "smugmug", "scribd", "twitter", "soundcloud", "slideshare", "spotify", "imgur", "issuu", "mixcloud", "ted", "animoto", "tumblr", "kickstarter", "reverbnation", "reddit", "speakerdeck", "screencast", "amazon", "someecards", "tiktok","pinterest", "wolfram", "anghami"])  {
+	Vvveb.Components.add("embeds/" + provider, {
+		name: provider,
+		image: "icons/code.svg",
+		html: `<div data-component-oembed data-url="">
+				<div class="alert alert-light  m-5" role="alert">
+					<img width="64" src="${Vvveb.baseUrl}icons/code.svg">
+					<h6>Enter ${provider} url to embed</h6>
+				</div></div>`,
+	});
+	Vvveb.ComponentsGroup['Embeds'].push("embeds/" + provider);
+}

libs/builder/components-html.js

@@ -0,0 +1,1459 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/VvvebJs
+*/
+
+Vvveb.ComponentsGroup['Base'] =
+["html/heading", "html/image", "html/hr",  "html/form", "html/textinput", "html/textareainput", "html/selectinput"/*, "html/fileinput"*/, "html/checkbox", "html/radiobutton", "html/link", "html/button", "html/paragraph", "html/blockquote", "html/list", "html/table", "html/preformatted", "html/audio", "html/video","html/iframe"];
+
+Vvveb.Components.extend("_base", "html/heading", {
+    image: "icons/heading.svg",
+    name: "Heading",
+    nodes: ["h1", "h2","h3", "h4","h5","h6"],
+    html: "<h1>Heading</h1>",
+    
+	properties: [{
+        name: "Size",
+        key: "size",
+        inputtype: SelectInput,
+        
+        onChange: function(node, value) {
+
+			return changeNodeName(node, "h" + value);
+		},	
+			
+        init: function(node) {
+            let regex;
+            regex = /H(\d)/.exec(node.nodeName);
+            if (regex && regex[1]) {
+                return regex[1]
+            }
+            return 1
+        },
+        
+        data:{
+			options: [{
+                value: "1",
+                text: "Heading 1"
+            }, {
+                value: "2",
+                text: "Heading 2"
+            }, {
+                value: "3",
+                text: "Heading 3"
+            }, {
+                value: "4",
+                text: "Heading 4"
+            }, {
+                value: "5",
+                text: "Heading 5"
+            }, {
+                value: "6",
+                text: "Heading 6"
+            }]
+       },
+    }]
+});    
+
+
+let linkComponentProperties = [
+/*	{
+		name: "Text",
+		key: "text",
+		sort:1,
+		htmlAttr: "innerText",
+		inputtype: TextInput
+	},*/
+	{
+		name: "Url",
+		key: "href",
+		sort:2,
+		htmlAttr: "href",
+		inputtype: LinkInput
+	},{
+		name: "Rel",
+		key: "rel",
+		sort:3,
+		htmlAttr: "rel",
+		inputtype: LinkInput
+	}, {
+		name: "Target",
+		key: "target",
+		sort:4,
+		htmlAttr: "target",
+		inputtype: SelectInput,
+		data:{
+			options: [{
+				value: "",
+				text: ""
+			}, {
+				value: "_blank",
+				text: "Blank"
+			}, {
+				value: "_parent",
+				text: "Parent"
+			}, {
+				value: "_self",
+				text: "Self"
+			}, {
+				value: "_top",
+				text: "Top"
+			}]
+	   },
+	}, {
+		name: "Download",
+		sort:5,
+		key: "download",
+		htmlAttr: "download",
+		inputtype: CheckboxInput,
+}];
+
+Vvveb.Components.extend("_base", "html/link", {
+    nodes: ["a"],
+    name: "Link",
+    html: '<a href="#" rel="noopener">Link Text</a>',
+	image: "icons/link.svg",
+    properties: linkComponentProperties
+});
+
+Vvveb.Components.extend("_base", "html/image", {
+    nodes: ["img"],
+    name: "Image",
+    html: '<img src="' +  Vvveb.baseUrl + 'icons/image.svg" width="200" class="img-fluid align-center">',
+    image: "icons/image.svg",
+    resizable:true,//show select box resize handlers
+    
+    properties: [{
+        name: "Image",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: ImageInput
+    }, {
+        name: "Width",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: NumberInput
+    }, {
+        name: "Height",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: NumberInput
+    }, {
+        name: "Alt",
+        key: "alt",
+        htmlAttr: "alt",
+        inputtype: TextInput
+    }, {
+        name: "Align",
+        key: "align",
+        htmlAttr: "class",
+        inline:false,
+        validValues: ["", "align-left", "align-center", "align-right"],
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            }, {
+                value: "align-left",
+                //text: "Left",
+                title: "text-start",
+                icon:"la la-align-left",
+                checked:false,
+            }, {
+                value: "align-center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            }, {
+                value: "align-right",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            }],
+        },
+	},{
+		key: "link_options",
+        inputtype: SectionInput,
+        //name:false,
+        data: {header:"Link"},
+    },{
+        name: "Enable link",
+        key: "enable_link",
+        inputtype: CheckboxInput,
+        data: {
+            className: "form-switch"
+        },
+		setGroup: value => {
+			let group = document.querySelectorAll('.mb-3[data-group="link"]');
+			if (group.length) {
+				group.forEach(el => {
+					if (value) {	
+						el.style.display = "";
+					} else {
+						el.style.display = "none";
+					}
+				});
+			}
+		}, 		
+		onChange : function(node, value, input)  {
+			this.setGroup(value);
+			if (value) {
+				const wrappingElement = document.createElement('a');
+				node.replaceWith(wrappingElement);
+				wrappingElement.appendChild(node);
+			} else {
+				if (node.parentNode.tagName.toLowerCase() == "a"){
+					node.parentNode.replaceWith(node);
+				}
+			}
+			return node;
+		}, 
+		init: function (node) {
+			let value = node.parentNode.tagName.toLowerCase() == "a";
+			this.setGroup(value);
+			return value;
+		}
+	}].concat(
+	    //add link properties after setting parent to <a> element
+		linkComponentProperties.map(
+		(el) => {let a = Object.assign({}, el);a["parent"] = "a";a["group"] = "link";return a}
+	)),
+	
+    init(node) {
+		let group = document.querySelectorAll('.mb-3[data-group="link"]');
+		if (group.length) {
+			group.forEach(el => {
+				if (value) {	
+					el.style.display = "";
+				} else {
+					el.style.display = "none";
+				}
+			});
+		}
+
+		return node;
+	}	
+});
+
+Vvveb.Components.extend("_base", "html/hr", {
+    image: "icons/hr.svg",
+    nodes: ["hr"],
+    name: "Horizontal Rule",
+    html: '<hr class="border-primary border-4 opacity-25">',
+	properties:[{
+        name: "Type",
+        key: "border-color",
+		htmlAttr: "class",
+        validValues: ["border-primary", "border-secondary", "border-success", "border-danger", "border-warning", "border-info", "border-light", "border-dark", "border-white"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+				value: "Default",
+				text: ""
+			}, {
+				value: "border-primary",
+				text: "Primary"
+			}, {
+				value: "border-secondary",
+				text: "Secondary"
+			}, {
+				value: "border-success",
+				text: "Success"
+			}, {
+				value: "border-danger",
+				text: "Danger"
+			}, {
+				value: "border-warning",
+				text: "Warning"
+			}, {
+				value: "border-info",
+				text: "Info"
+			}, {
+				value: "border-light",
+				text: "Light"
+			}, {
+				value: "border-dark",
+				text: "Dark"
+			}, {
+				value: "border-white",
+				text: "White"
+			}]
+        }
+    },{
+        name: "Border",
+        key: "border-size",
+		htmlAttr: "class",
+        validValues: ["border-1", "border-2", "border-3", "border-4", "border-5"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+				value: "Default",
+				text: ""
+			}, {
+				value: "border-1",
+				text: "Size 1"
+			}, {
+				value: "border-2",
+				text: "Size 2"
+			}, {
+				value: "border-3",
+				text: "Size 3"
+			}, {
+				value: "border-4",
+				text: "Size 4"
+			}, {
+				value: "border-5",
+				text: "Size 5"
+			}]
+        }
+    },{
+        name: "Opacity",
+        key: "opacity",
+		htmlAttr: "class",
+        validValues: ["opacity-25", "opacity-50", "opacity-75", "opacity-100"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+				value: "Default",
+				text: ""
+			}, {
+				value: "opacity-25",
+				text: "Opacity 25%"
+			}, {
+				value: "opacity-50",
+				text: "Opacity 50%"
+			}, {
+				value: "opacity-75",
+				text: "Opacity 75%"
+			}, {
+				value: "opacity-100",
+				text: "Opacity 100%"
+			}]
+        }
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/label", {
+    name: "Label",
+    nodes: ["label"],
+    html: '<label for="">Label</label>',
+    properties: [{
+        name: "For id",
+        htmlAttr: "for",
+        key: "for",
+        inputtype: TextInput
+    }]
+});
+
+
+Vvveb.Components.extend("_base", "html/textinput", {
+    name: "Input",
+	nodes: ["input"],
+	//attributes: {"type":"text"},
+    image: "icons/text_input.svg",
+    html: '<input type="text" class="form-control">',
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }, {
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TextInput
+    }, {
+        name: "Type",
+        key: "type",
+        htmlAttr: "type",
+		inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "text",
+                text: "text"
+            }, {
+                value: "button",
+                text: "button"
+            }, {
+                value: "checkbox",
+                text: "checkbox"
+            }, {
+                value: "color",
+                text: "color"
+            }, {
+                value: "date",
+                text: "date"
+            }, {
+                value: "datetime-local",
+                text: "datetime-local"
+            }, {
+                value: "email",
+                text: "email"
+            }, {
+                value: "file",
+                text: "file"
+            }, {
+                value: "hidden",
+                text: "hidden"
+            }, {
+                value: "image",
+                text: "image"
+            }, {
+                value: "month",
+                text: "month"
+            }, {
+                value: "number",
+                text: "number"
+            }, {
+                value: "password",
+                text: "password"
+            }, {
+                value: "radio",
+                text: "radio"
+            }, {
+                value: "range",
+                text: "range"
+            }, {
+                value: "reset",
+                text: "reset"
+            }, {
+                value: "search",
+                text: "search"
+            }, {
+                value: "submit",
+                text: "submit"
+            }, {
+                value: "tel",
+                text: "tel"
+            }, {
+                value: "text",
+                text: "text"
+            }, {
+                value: "time",
+                text: "time"
+            }, {
+                value: "url",
+                text: "url"
+            }, {
+                value: "week",
+                text: "week"
+            }]
+        }
+    }, {
+        name: "Placeholder",
+        key: "placeholder",
+        htmlAttr: "placeholder",
+        inputtype: TextInput
+    }, {
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+	},{
+        name: "Required",
+        key: "required",
+        htmlAttr: "required",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/selectinput", {
+	nodes: ["select"],
+    name: "Select Input",
+    image: "icons/select_input.svg",
+    html: '<select class="form-control"><option value="value1">Text 1</option><option value="value2">Text 2</option><option value="value3">Text 3</option></select>',
+
+	beforeInit: function (node) {
+		properties = [];
+		let i = 0;
+		
+		node.querySelectorAll('option').forEach(el => {
+			data = {"value": el.value, "text": el.text};
+			i++;
+			properties.push({
+				name: "Option " + i,
+				key: "option" + i,
+				//index: i - 1,
+				optionNode: el,
+				inline:true,
+				inputtype: TextValueInput,
+				data: data,
+				onChange: function(node, value, input) {
+					
+					option = this.optionNode;
+					
+					//if remove button is clicked remove option and render row properties
+					if (input.nodeName == 'BUTTON') {
+						option.remove();
+						Vvveb.Components.render("html/selectinput");
+						return node;
+					}
+
+					if (input.name == "value") option.setAttribute("value", value); 
+					else if (input.name == "text") option.textContent = value;
+					return node;
+				},	
+			});
+		});
+
+		//remove all option properties
+		this.properties = this.properties.filter(function(item) {
+			return item.key.indexOf("option") === -1;
+		});
+		
+		//add remaining properties to generated column properties
+		this.properties =  properties.concat(this.properties);
+		
+		return node;
+	},
+    
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }, {
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+	},{
+        name: "Required",
+        key: "required",
+        htmlAttr: "required",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+    }, {
+        name: "Option",
+        key: "option1",
+        inputtype: TextValueInput
+	}, {
+        name: "Option",
+        key: "option2",
+        inputtype: TextValueInput
+	}, {
+        name: "",
+        key: "addChild",
+        inputtype: ButtonInput,
+        data: {text:"Add option", icon:"la-plus"},
+        onChange: function(node)
+        {
+			 node.append(generateElements('<option value="value">Text</option>')[0]);
+			 
+			 //render component properties again to include the new column inputs
+			 Vvveb.Components.render("html/selectinput");
+			 
+			 return node;
+		}
+	}]
+});
+
+Vvveb.Components.extend("_base", "html/textareainput", {
+	nodes: ["textarea"],
+    name: "Text Area",
+    image: "icons/text_area.svg",
+    html: '<textarea class="form-control"></textarea>',
+	properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }, {
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TextInput
+    }, {
+        name: "Placeholder",
+        key: "placeholder",
+        htmlAttr: "placeholder",
+        inputtype: TextInput
+    }, {
+        name: "Columns",
+        key: "cols",
+        htmlAttr: "cols",
+        inputtype: NumberInput
+    }, {
+        name: "Rows",
+        key: "rows",
+        htmlAttr: "rows",
+        inputtype: NumberInput
+    }, {
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+	},{
+        name: "Required",
+        key: "required",
+        htmlAttr: "required",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+    }]	
+});
+Vvveb.Components.extend("_base", "html/radiobutton", {
+    name: "Radio Button",
+	attributes: {"type":"radio"},
+    image: "icons/radio.svg",
+    html: `<div class="form-check">
+			  <label class="form-check-label">
+				<input class="form-check-input" type="radio" name="radiobutton"> Option 1
+			  </label>
+			</div>
+			<div class="form-check">
+			  <label class="form-check-label">
+				<input class="form-check-input" type="radio" name="radiobutton" checked> Option 2
+			  </label>
+			</div>
+			<div class="form-check">
+			  <label class="form-check-label">
+				<input class="form-check-input" type="radio" name="radiobutton"> Option 3
+			  </label>
+			</div>`,
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput,
+        //inline:true,
+        //col:6
+    },{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TextInput,
+        //inline:true,
+        //col:6
+    },{
+		name: "Checked",
+        key: "checked",
+        htmlAttr: "Checked",
+        inputtype: CheckboxInput,
+        //inline:true,
+        //col:6
+	},{
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+	},{
+        name: "Required",
+        key: "required",
+        htmlAttr: "required",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+     }]
+});
+
+Vvveb.Components.extend("_base", "html/checkbox", {
+    name: "Checkbox",
+    attributes: {"type":"checkbox"},
+    image: "icons/checkbox.svg",
+    html: `<div class="form-check">
+			  <label class="form-check-label">
+				<input class="form-check-input" type="checkbox" value=""> Default checkbox
+			  </label>
+			</div>`,
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput,
+        //inline:true,
+        //col:6
+    },{
+        name: "Value",
+        key: "value",
+        htmlAttr: "value",
+        inputtype: TextInput,
+        //inline:true,
+        //col:6
+    },{
+		name: "Checked",
+        key: "checked",
+        htmlAttr: "Checked",
+        inputtype: CheckboxInput,
+        //inline:true,
+        //col:6
+	},{
+        name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+	},{
+        name: "Required",
+        key: "required",
+        htmlAttr: "required",
+		col:6,
+		inline:true,
+        inputtype: CheckboxInput,
+     }]
+});
+
+/*
+Vvveb.Components.extend("_base", "html/fileinput", {
+    name: "Input group",
+	attributes: {"type":"file"},
+    image: "icons/text_input.svg",
+    html: '<input type="file" class="form-control">'
+});
+*/
+
+Vvveb.Components.extend("_base", "html/video", {
+    nodes: ["video"],
+    name: "Video",
+    html: '<video width="320" height="240" playsinline loop autoplay muted src="../../media/demo/sample.webm" poster="../../media/sample.webp"><video>',
+    dragHtml: '<img  width="320" height="240" src="' + Vvveb.baseUrl + 'icons/video.svg">',
+	image: "icons/video.svg",
+    resizable:true,//show select box resize handlers
+    properties: [{
+        name: "Video",
+        //child: "source",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: VideoInput
+    },{       
+		name: "Poster",
+        key: "poster",
+        htmlAttr: "poster",
+        inputtype: ImageInput
+    },{
+        name: "Width",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "Height",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    },{
+        name: "Muted",
+        key: "muted",
+        htmlAttr: "muted",
+        inputtype: CheckboxInput
+    },{
+        name: "Loop",
+        key: "loop",
+        htmlAttr: "loop",
+        inputtype: CheckboxInput
+    },{
+        name: "Autoplay",
+        key: "autoplay",
+        htmlAttr: "autoplay",
+        inputtype: CheckboxInput
+    },{
+        name: "Plays inline",
+        key: "playsinline",
+        htmlAttr: "playsinline",
+        inputtype: CheckboxInput
+    },{
+        name: "Controls",
+        key: "controls",
+        htmlAttr: "controls",
+        inputtype: CheckboxInput
+    },{
+	name:"",
+	key: "autoplay_warning",
+        inline:false,
+        col:12,
+        inputtype: NoticeInput,
+        data: {
+			type:'warning',
+			title:'Autoplay',
+			text:'Most browsers allow auto play only if video is muted and plays inline'
+		}
+	}]
+});
+
+
+Vvveb.Components.extend("_base", "html/button", {
+    nodes: ["button"],
+    name: "Html Button",
+    image: "icons/button.svg",
+    html: '<button>Button</button>',
+    properties: [{
+        name: "Text",
+        key: "text",
+        htmlAttr: "innerHTML",
+        inputtype: TextInput
+    }, {
+        name: "Name",
+        key: "name",
+        htmlAttr: "name",
+        inputtype: TextInput
+    }, {
+        name: "Type",
+        key: "type",
+		htmlAttr: "type",
+        inputtype: SelectInput,
+        data: {
+			options: [{
+				value: "button",
+				text: "button"
+			}, {	
+				value: "reset",
+				text: "reset"
+			}, {
+				value: "submit",
+				text: "submit"
+			}],
+		}
+   	},{
+        name: "Autofocus",
+        key: "autofocus",
+        htmlAttr: "autofocus",
+        inputtype: CheckboxInput,
+		inline:true,
+        col:6,
+   	},{
+		name: "Disabled",
+        key: "disabled",
+        htmlAttr: "disabled",
+        inputtype: CheckboxInput,
+		inline:true,
+        col:6,
+	}]
+});
+
+Vvveb.Components.extend("_base", "html/paragraph", {
+    nodes: ["p"],
+    name: "Paragraph",
+	image: "icons/paragraph.svg",
+	html: '<p>Lorem ipsum</p>',
+    properties: [{
+        name: "Text align",
+        key: "p-text-align",
+        htmlAttr: "class",
+        inline:false,
+        validValues: ["", "text-start", "text-center", "text-end"],
+        inputtype: RadioButtonInput,
+        data: {
+			extraclass:"btn-group-sm btn-group-fullwidth",
+            options: [{
+                value: "",
+                icon:"la la-times",
+                //text: "None",
+                title: "None",
+                checked:true,
+            }, {
+                value: "text-start",
+                //text: "Left",
+                title: "text-start",
+                icon:"la la-align-left",
+                checked:false,
+            }, {
+                value: "text-center",
+                //text: "Center",
+                title: "Center",
+                icon:"la la-align-center",
+                checked:false,
+            }, {
+                value: "text-end",
+                //text: "Right",
+                title: "Right",
+                icon:"la la-align-right",
+                checked:false,
+            }],
+        },
+	}]
+});
+
+Vvveb.Components.extend("_base", "html/blockquote", {
+    nodes: ["blockquote"],
+    name: "Blockquote",
+	image: "icons/blockquote.svg",
+	html: `<blockquote cite="https://en.wikipedia.org/wiki/Marcus_Aurelius">
+				<p>Today I shall be meeting with interference, ingratitude, insolence, disloyalty, ill-will, and selfishness all of them due to the offenders' ignorance of what is good or evil.</p>
+				<cite class="small">
+					<a href="https://en.wikipedia.org/wiki/Marcus_Aurelius" class="text-decoration-none" target="blank">Marcus Aurelius</a>
+				</cite>	
+			</blockquote>`,
+    properties: [{
+        name: "Cite",
+        key: "cite",
+        inline:false,
+        htmlAttr: "cite",
+        inputtype: TextInput,
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/list", {
+    nodes: ["ul", "ol"],
+    name: "List",
+	image: "icons/list.svg",
+	html: `<ul>
+				<li>Begin with the possible; begin with one step.</li>
+				<li>Never think of results, just do!</li>
+				<li>Patience is the mother of will.</li>
+				<li>Man must use what he has, not hope for what is not.</li>
+				<li>Only super-efforts count.</li>
+			</ul>`,
+	properties: [{
+        name: "Type",
+        key: "type",
+        inputtype: SelectInput,
+        
+        onChange: function(node, value) {
+			return changeNodeName(node, value);
+		},	
+			
+        init: function(node) {
+            return node.nodeName.toLowerCase()
+        },
+        
+        data:{
+            options: [{
+                value: "ul",
+                text: "Unordered"
+            }, {
+                value: "ol",
+                text: "Ordered"
+            }]
+       },
+    },{
+		name: "Items",
+        key: "items",
+        inputtype: ListInput,
+		htmlAttr:"data-slides-per-view",
+		inline:true,
+		data: {
+			selector:"li",
+			container:"",
+			prefix:"Item ",
+			removeElement: true,
+			"newElement": `<li>Do everything quickly and well.</li>`
+		},
+		onChange: function(node, value, input, component, event) {
+			let element = node;
+
+			if (event.action) {
+				if (event.action == "add") {
+					//node.append(generateElements(`<li>List item</li>`)[0]);
+					
+					//temporary solution to better update list
+					Vvveb.Components.render("html/list");
+				}
+				if (event.action == "remove") {
+				} else if (event.action == "select") {
+				}
+			}
+			
+			return node;
+		},
+	}]			
+});
+
+Vvveb.Components.extend("_base", "html/preformatted", {
+    nodes: ["pre"],
+    name: "Preformatted",
+	image: "icons/paragraph.svg",
+	html: `<pre>Today I shall be meeting with interference, 
+ingratitude, insolence, disloyalty, ill-will, and
+selfishness all of them due to the offenders'
+ignorance of what is good or evil..</pre>`,
+    properties: [{
+        name: "Text",
+        key: "text",
+        inline:false,
+        htmlAttr: "innerHTML",
+        inputtype: TextareaInput,
+        data:{
+			rows:20,
+		}
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/form", {
+    nodes: ["form"],
+    image: "icons/form.svg",
+    name: "Form",
+    html: `<form action="" method="POST">
+	  <div class="mb-3">
+		<label for="exampleInputEmail1" class="form-label">Email address</label>
+		<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
+		<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
+	  </div>
+	  <div class="mb-3">
+		<label for="exampleInputPassword1" class="form-label">Password</label>
+		<input type="password" class="form-control" id="exampleInputPassword1">
+	  </div>
+	  <div class="mb-3 form-check">
+		<input type="checkbox" class="form-check-input" id="exampleCheck1">
+		<label class="form-check-label" for="exampleCheck1">Check me out</label>
+	  </div>
+	  <button type="submit" class="btn btn-primary">Submit</button>
+	</form>`,
+    properties: [/*{
+        name: "Style",
+        key: "style",
+        htmlAttr: "class",
+        validValues: ["", "form-search", "form-inline", "form-horizontal"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "form-search",
+                text: "Search"
+            }, {
+                value: "form-inline",
+                text: "Inline"
+            }, {
+                value: "form-horizontal",
+                text: "Horizontal"
+            }]
+        }
+    }, */{
+        name: "Action",
+        key: "action",
+        htmlAttr: "action",
+        inputtype: TextInput
+    }, {
+        name: "Method",
+        key: "method",
+        htmlAttr: "method",
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "post",
+                text: "Post"
+            }, {
+                value: "get",
+                text: "Get"
+            }]
+        }
+    }, {
+        name: "Encoding type",
+        key: "enctype",
+        htmlAttr: "enctype",
+        inputtype: SelectInput,
+        data: {
+            options: [{
+                value: "",
+                text: ""
+            }, {
+                value: "application/x-www-form-urlencoded",
+                text: "Url encoded (default)"
+            }, {
+                value: "multipart/form-data",
+                text: "Multipart (for file upload)"
+            }, {
+                value: "text/plain",
+                text: "Text plain"
+            }]
+        }
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/tablerow", {
+    nodes: ["tr"],
+    image: "icons/table.svg",
+    name: "Table Row",
+    html: "<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>",
+    properties: [{
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["", "success", "danger", "warning", "active"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "success",
+                text: "Success"
+            }, {
+                value: "error",
+                text: "Error"
+            }, {
+                value: "warning",
+                text: "Warning"
+            }, {
+                value: "active",
+                text: "Active"
+            }]
+        }
+    }]
+});
+Vvveb.Components.extend("_base", "html/tablecell", {
+    nodes: ["td"],
+    image: "icons/table.svg",
+    name: "Table Cell",
+    html: "<td>Cell</td>"
+});
+
+Vvveb.Components.extend("_base", "html/tableheadercell", {
+    nodes: ["th"],
+    image: "icons/table.svg",
+    name: "Table Header Cell",
+    html: "<th>Head</th>"
+});
+
+Vvveb.Components.extend("_base", "html/tablebody", {
+    nodes: ["tbody"],
+    image: "icons/table.svg",
+    name: "Table Body",
+    html: "<tbody>Table body</tbody>"
+});
+
+Vvveb.Components.extend("_base", "html/tablefooter", {
+    nodes: ["tfooter"],
+    image: "icons/table.svg",
+    name: "Table Footer",
+    html: "<tfooter>Table footer</tfooter>"
+});
+
+Vvveb.Components.extend("_base", "html/tablehead", {
+    nodes: ["thead"],
+    image: "icons/table.svg",
+    name: "Table Head",
+    html: "<thead><tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr></thead>",
+    properties: [{
+        name: "Type",
+        key: "type",
+        htmlAttr: "class",
+        inputtype: SelectInput,
+        validValues: ["", "success", "danger", "warning", "info"],
+        data: {
+            options: [{
+                value: "",
+                text: "Default"
+            }, {
+                value: "success",
+                text: "Success"
+            }, {
+                value: "anger",
+                text: "Error"
+            }, {
+                value: "warning",
+                text: "Warning"
+            }, {
+                value: "info",
+                text: "Info"
+            }]
+        }
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/table", {
+    nodes: ["table"],
+    classes: ["table"],
+    image: "icons/table.svg",
+    name: "Table",
+    html: `<table class="table table-striped table-hover">
+			  <thead>
+				<tr>
+				  <th scope="col">#</th>
+				  <th scope="col">First</th>
+				  <th scope="col">Last</th>
+				  <th scope="col">Handle</th>
+				</tr>
+			  </thead>
+			  <tbody>
+				<tr>
+				  <th scope="row">1</th>
+				  <td>Mark</td>
+				  <td>Otto</td>
+				  <td>@mdo</td>
+				</tr>
+				<tr>
+				  <th scope="row">2</th>
+				  <td>Jacob</td>
+				  <td>Thornton</td>
+				  <td>@fat</td>
+				</tr>
+				<tr>
+				  <th scope="row">3</th>
+				  <td colspan="2">Larry the Bird</td>
+				  <td>@twitter</td>
+				</tr>
+			  </tbody>
+			</table>`,
+    properties: [{
+        name: "Type",
+        key: "type",
+		htmlAttr: "class",
+        validValues: ["table-primary", "table-secondary", "table-success", "table-danger", "table-warning", "table-info", "table-light", "table-dark", "table-white"],
+        inputtype: SelectInput,
+        data: {
+            options: [{
+				value: "Default",
+				text: ""
+			}, {
+				value: "table-primary",
+				text: "Primary"
+			},{
+				value: "table-secondary",
+				text: "Secondary"
+			},{
+				value: "table-success",
+				text: "Success"
+			},{
+				value: "table-danger",
+				text: "Danger"
+			},{
+				value: "table-warning",
+				text: "Warning"
+			},{
+				value: "table-info",
+				text: "Info"
+			},{
+				value: "table-light",
+				text: "Light"
+			},{
+				value: "table-dark",
+				text: "Dark"
+			},{
+				value: "table-white",
+				text: "White"
+			}]
+        }
+    }, {
+        name: "Responsive",
+        key: "responsive",
+        htmlAttr: "class",
+        validValues: ["table-responsive"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-responsive",
+            off: ""
+        }
+    }, {
+        name: "Small",
+        key: "small",
+        htmlAttr: "class",
+        validValues: ["table-sm"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-sm",
+            off: ""
+        }
+    }, {
+        name: "Hover",
+        key: "hover",
+        htmlAttr: "class",
+        validValues: ["table-hover"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-hover",
+            off: ""
+        }
+    }, {
+        name: "Bordered",
+        key: "bordered",
+        htmlAttr: "class",
+        validValues: ["table-bordered"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-bordered",
+            off: ""
+        }
+    }, {
+        name: "Striped",
+        key: "striped",
+        htmlAttr: "class",
+        validValues: ["table-striped"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-striped",
+            off: ""
+        }
+    }, {
+        name: "Inverse",
+        key: "inverse",
+        htmlAttr: "class",
+        validValues: ["table-inverse"],
+        inputtype: ToggleInput,
+        data: {
+            on: "table-inverse",
+            off: ""
+        }
+    },   
+    {
+        name: "Head options",
+        key: "head",
+        htmlAttr: "class",
+        child:"thead",
+        inputtype: SelectInput,
+        validValues: ["", "thead-dark", "thead-light"],
+        data: {
+            options: [{
+                value: "",
+                text: "None"
+            }, {
+                value: "thead-default",
+                text: "Default"
+            }, {
+                value: "thead-inverse",
+                text: "Inverse"
+            }]
+        }
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/audio", {
+    nodes: ["audio"],
+    attributes: ["data-component-audio"],
+    name: "Audio",
+    image: "icons/audio.svg",
+    html: `<figure data-component-audio><audio controls src="#"></audio></figure>`,
+    properties: [{
+        name: "Src",
+        key: "src",
+        child:"audio",
+        htmlAttr: "src",
+        inputtype: LinkInput
+	}, {
+       	key: "audio_options",
+        inputtype: SectionInput,
+        name:false,
+        data: {header:"Options"},
+    }, {
+		name: "Autoplay",
+        key: "autoplay",
+        htmlAttr: "autoplay",
+        child:"audio",
+        inputtype: CheckboxInput,
+        inline:true,
+        col:4,
+/*    }, {
+        name: "Controls",
+        key: "controls",
+        htmlAttr: "controls",
+        inputtype: CheckboxInput,
+        child:"audio",
+        inline:true,
+        col:4,
+*/    }, {
+        name: "Loop",
+        key: "loop",
+        htmlAttr: "loop",
+        inputtype: CheckboxInput,
+        child:"audio",
+        inline:true,
+        col:4
+    }]
+});
+
+
+Vvveb.Components.extend("_base", "html/pdf", {
+    attributes: ["data-component-pdf"],
+    image: "icons/pdf.svg",
+    name: "Pdf embed",
+    html: `<object data="" type="application/pdf" data-component-pdf></object>`,
+    properties: [{
+        name: "Data",
+        key: "data",
+        htmlAttr: "data",
+        inputtype: TextInput
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/embed", {
+    attributes: ["data-component-embed"],
+    image: "icons/embed.svg",
+    name: "Embed",
+    html: `<object data="" type="application/pdf" data-component-pdf></object>`,
+    properties: [{
+        name: "Data",
+        key: "data",
+        htmlAttr: "data",
+        inputtype: TextInput
+    }]
+});
+
+Vvveb.Components.extend("_base", "html/html", {
+    nodes: ["html"],
+    name: "Html Page",
+    image: "icons/posts.svg",
+    html: `<html><body></body></html>`,
+    properties: [{
+        name: "Title",
+        key: "title",
+        htmlAttr: "innerHTML",
+        inputtype: TextInput,
+        child:"title",
+    }, {
+        name: "Meta description",
+        key: "description",
+        htmlAttr: "content",
+        inputtype: TextInput,
+        child:'meta[name=description]',
+    }, {
+        name: "Meta keywords",
+        key: "keywords",
+        htmlAttr: "content",
+        inputtype: TextInput,
+        child:'meta[name=keywords]',
+    }]
+});
+
+/*
+Vvveb.ComponentsGroup['Base'] =
+["html/heading", "html/image", "html/hr",  "html/form", "html/textinput", "html/textareainput", "html/selectinput", "html/fileinput", "html/checkbox", "html/radiobutton", "html/link", "html/video", "html/button", "html/paragraph", "html/blockquote", "html/list", "html/table", "html/preformatted"];
+
+*/
+
+Vvveb.Components.extend("_base", "html/iframe", {
+	attributes: ["data-component-iframe"],
+    name: "Iframe",
+    image: "icons/file.svg",
+    html: '<div data-component-iframe><iframe src="https://www.vvveb.com" width="320" height="240"></iframe></div>',
+	properties: [{
+        name: "Src",
+        key: "src",
+        htmlAttr: "src",
+        child:"iframe",
+        inputtype: TextInput
+    }, {
+        name: "Width",
+        key: "width",
+        htmlAttr: "width",
+        child:"iframe",
+        inputtype: CssUnitInput
+    }, {
+        name: "Height",
+        key: "height",
+        htmlAttr: "height",
+        child:"iframe",
+        inputtype: CssUnitInput
+	}]	
+});

libs/builder/components-server.js

@@ -0,0 +1,432 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/VvvebJs
+*/
+
+Vvveb.ComponentsGroup['Server Components'] = ["components/products", "components/product", "components/categories", "components/manufacturers", "components/search", "components/user", "components/product_gallery", "components/cart", "components/checkout", "components/filters", "components/product", "components/slider"];
+
+
+Vvveb.Components.add("components/product", {
+    name: "Product",
+    attributes: ["data-component-product"],
+
+    image: "icons/map.svg",
+    html: '<iframe frameborder="0" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>',
+    
+	properties: [
+	{
+        name: "Id",
+        key: "id",
+        htmlAttr: "id",
+        inputtype: TextInput
+    },
+	{
+        name: "Select",
+        key: "id",
+        htmlAttr: "id",
+        inputtype: SelectInput,
+        data:{
+			options: [{
+                value: "",
+                text: "None"
+            }, {
+                value: "pull-left",
+                text: "Left"
+            }, {
+                value: "pull-right",
+                text: "Right"
+            }]
+       },
+    },
+	{
+        name: "Select 2",
+        key: "id",
+        htmlAttr: "id",
+        inputtype: SelectInput,
+        data:{
+			options: [{
+                value: "",
+                text: "nimic"
+            }, {
+                value: "pull-left",
+                text: "gigi"
+            }, {
+                value: "pull-right",
+                text: "vasile"
+            }, {
+                value: "pull-right",
+                text: "sad34"
+            }]
+       },
+    }]
+});    
+
+
+Vvveb.Components.add("components/products", {
+    name: "Products",
+    attributes: ["data-component-products"],
+
+    image: "icons/products.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+
+    init: function (node)
+	{
+		$('.mb-3[data-group]').hide();
+		if (node.dataset.type != undefined)
+		{
+			$('.mb-3[data-group="'+ node.dataset.type + '"]').show();
+		} else
+		{		
+			$('.mb-3[data-group]:first').show();
+		}
+	},
+    properties: [{
+        name: false,
+        key: "type",
+        inputtype: RadioButtonInput,
+		htmlAttr:"data-type",
+        data: {
+            inline: true,
+            extraclass:"btn-group-fullwidth",
+            options: [{
+                value: "autocomplete",
+                text: "Autocomplete",
+                title: "Autocomplete",
+                icon:"la la-search",
+                checked:true,
+            }, {
+                value: "automatic",
+                icon:"la la-cog",
+                text: "Configuration",
+                title: "Configuration",
+            }],
+        },
+		onChange : function(element, value, input) {
+			
+			$('.mb-3[data-group]').hide();
+			$('.mb-3[data-group="'+ input.value + '"]').show();
+
+			return element;
+		}, 
+		init: function(node) {
+			return node.dataset.type;
+		},            
+    },{
+        name: "Products",
+        key: "products",
+        group:"autocomplete",
+        htmlAttr:"data-products",
+        inputtype: AutocompleteList,
+        data: {
+            url: "/admin/?module=editor/editor&action=productsAutocomplete",
+        },
+    },{
+        name: "Number of products",
+        group:"automatic",
+        key: "limit",
+		htmlAttr:"data-limit",
+        inputtype: NumberInput,
+        data: {
+            value: "8",//default
+            min: "1",
+            max: "1024",
+            step: "1"
+        },        
+        getFromNode: function(node) {
+            return 10
+        },
+    },{
+        name: "Start from page",
+        group:"automatic",
+        key: "page",
+		htmlAttr:"data-page",
+        data: {
+            value: "1",//default
+            min: "1",
+            max: "1024",
+            step: "1"
+        },        
+        inputtype: NumberInput,
+        getFromNode: function(node) {
+            return 0
+        },
+    },{
+        name: "Order by",
+        group:"automatic",
+        key: "order",
+		htmlAttr:"data-order",
+        inputtype: SelectInput,
+        data: {
+            options: [{
+				value: "price_asc",
+                text: "Price Ascending"
+            }, {
+                value: "price_desc",
+                text: "Price Descending"
+            }, {
+                value: "date_asc",
+                text: "Date Ascending"
+            }, {
+                value: "date_desc",
+                text: "Date Descending"
+            }, {
+                value: "sales_asc",
+                text: "Sales Ascending"
+            }, {
+                value: "sales_desc",
+                text: "Sales Descending"
+            }]
+		}
+	},{
+        name: "Category",
+        group:"automatic",
+        key: "category",
+		htmlAttr:"data-category",
+        inputtype: AutocompleteList,
+        data: {
+            url: "/admin/?module=editor/editor&action=productsAutocomplete",
+        },
+
+	},{
+        name: "Manufacturer",
+        group:"automatic",
+        key: "manufacturer",
+		htmlAttr:"data-manufacturer",
+        inputtype: AutocompleteList,
+        data: {
+            url: "/admin/?module=editor/editor&action=productsAutocomplete",
+		}
+	},{
+        name: "Manufacturer 2",
+        group:"automatic",
+        key: "manufacturer 2",
+		htmlAttr:"data-manufacturer2",
+        inputtype: AutocompleteList,
+        data: {
+            url: "/admin/?module=editor/editor&action=productsAutocomplete",
+        },
+    }]
+});
+
+Vvveb.Components.add("components/manufacturers", {
+    name: "Manufacturers",
+    classes: ["component_manufacturers"],
+    image: "icons/categories.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        nolabel:false,
+        inputtype: TextInput,
+        data: {text:"Fields"}
+	},{
+        name: "Name",
+        key: "category",
+        inputtype: TextInput
+	},{
+        name: "Image",
+        key: "category",
+        inputtype: TextInput
+	}
+    ]
+});
+
+Vvveb.Components.add("components/categories", {
+    name: "Categories",
+    classes: ["component_categories"],
+    image: "icons/categories.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "Name",
+        key: "name",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }]
+});
+Vvveb.Components.add("components/search", {
+    name: "Search",
+    classes: ["component_search"],
+    image: "icons/search.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/user", {
+    name: "User",
+    classes: ["component_user"],
+    image: "icons/user.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/product_gallery", {
+    name: "Product gallery",
+    classes: ["component_product_gallery"],
+    image: "icons/product_gallery.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/cart", {
+    name: "Cart",
+    classes: ["component_cart"],
+    image: "icons/cart.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/checkout", {
+    name: "Checkout",
+    classes: ["component_checkout"],
+    image: "icons/checkout.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/filters", {
+    name: "Filters",
+    classes: ["component_filters"],
+    image: "icons/filters.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/product", {
+    name: "Product",
+    classes: ["component_product"],
+    image: "icons/product.svg",
+    html: '<div class="mb-3"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});
+Vvveb.Components.add("components/slider", {
+    name: "Slider",
+    classes: ["component_slider"],
+    image: "icons/slider.svg",
+    html: '<div class="form-group"><label>Your response:</label><textarea class="form-control"></textarea></div>',
+    properties: [{
+        name: "asdasdad",
+        key: "src",
+        htmlAttr: "src",
+        inputtype: FileUploadInput
+    }, {
+        name: "34234234",
+        key: "width",
+        htmlAttr: "width",
+        inputtype: TextInput
+    }, {
+        name: "d32d23",
+        key: "height",
+        htmlAttr: "height",
+        inputtype: TextInput
+    }]
+});

libs/builder/components-widgets.js

@@ -0,0 +1,839 @@
+/*
+Copyright 2017 Ziadin Givan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+https://github.com/givanz/VvvebJs
+*/
+
+Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/embed-video", "widgets/chartjs", "widgets/lottie",/* "widgets/facebookpage", */"widgets/paypal", /*"widgets/instagram",*/ "widgets/twitter", "widgets/openstreetmap"/*, "widgets/facebookcomments"*/];
+
+Vvveb.Components.extend("_base", "widgets/googlemaps", {
+    name: "Google Maps",
+    attributes: ["data-component-maps"],
+    image: "icons/map.svg",
+    dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/maps.png">',
+    html: '<div data-component-maps><iframe frameborder="0" src="https://maps.google.com/maps?q=Bucharest&z=15&t=q&key=&output=embed" width="100%" height="100%" style="width:100%;height:100%;left:0px"></iframe></div>',
+    resizable:true,//show select box resize handlers
+    resizeMode:"css",
+    
+    
+    //url parameters
+    z:3, //zoom
+    q:'Paris',//location
+    t: 'q', //map type q = roadmap, w = satellite
+    key: '',
+    
+	init: function (node) {
+		let iframe = node.querySelector('iframe');
+		let url = new URL(iframe.getAttribute("src"));
+		let params = new URLSearchParams(url.search);
+		
+		this.z = params.get("z");
+		this.q = params.get("q");
+		this.t = params.get("t");
+		this.key = params.get("key");
+
+		document.querySelector(".component-properties input[name=z]").value = this.z;
+		document.querySelector(".component-properties input[name=q]").value = this.q;
+		document.querySelector(".component-properties select[name=t]").value = this.t;
+		document.querySelector(".component-properties input[name=key]").value = this.key;
+	},
+	    
+    onChange: function (node, property, value) {
+		map_iframe = node.querySelector('iframe');
+		
+		this[property.key] = value;
+		
+		mapurl = 'https://maps.google.com/maps?q=' + this.q + '&z=' + this.z + '&t=' + this.t + '&output=embed';
+		
+		map_iframe.setAttribute("src",mapurl);
+		
+		return node;
+	},
+
+    properties: [{
+        name: "Address",
+        key: "q",
+        inputtype: TextInput
+    },{
+        name: "Map type",
+        key: "t",
+        inputtype: SelectInput,
+        data:{
+			options: [{
+                value: "q",
+                text: "Roadmap"
+            },{
+                value: "w",
+                text: "Satellite"
+            }]
+       },
+    },{
+        name: "Zoom",
+        key: "z",
+        inputtype: RangeInput,
+        data:{
+			max: 20, //max zoom level
+			min:1,
+			step:1
+		}
+    },{
+        name: "Key",
+        key: "key",
+        inputtype: TextInput
+	}]
+});
+
+Vvveb.Components.extend("_base", "widgets/openstreetmap", {
+    name: "Open Street Map",
+    attributes: ["data-component-openstreetmap"],
+    image: "icons/map.svg",
+    dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/maps.png">',
+    html: `<div data-component-openstreetmap><iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&layer=mapnik"></iframe></div>`,
+    resizable:true,//show select box resize handlers
+    resizeMode:"css",
+    
+    
+    //url parameters
+    bbox:'',//location
+    layer: 'mapnik', //map type
+    
+	init: function (node) {
+		let iframe = node.querySelector('iframe');
+		let url = new URL(iframe.getAttribute("src"));
+		let params = new URLSearchParams(url.search);
+		
+		this.bbox = params.get("bbox");
+		this.layer = params.get("layer");
+
+		document.querySelector(".component-properties input[name=bbox]").value = this.bbox;
+		document.querySelector(".component-properties input[name=layer]").value = this.layer;
+	},
+	    
+    onChange: function (node, property, value) {
+		map_iframe = node.querySelector('iframe');
+		
+		this[property.key] = value;
+		
+		mapurl = 'https://www.openstreetmap.org/export/embed.html?bbox=' + this.bbox + '&layer=' + this.layer;
+		
+		map_iframe.setAttribute("src",mapurl);
+		
+		return node;
+	},
+
+    properties: [{
+        name: "Map",
+        key: "bbox",
+        inputtype: TextInput
+/*    },{
+        name: "Layer",
+        key: "layer",
+        inputtype: SelectInput,
+        data:{
+			options: [{
+                value: "",
+                text: "Default"
+            },{
+                value: "Y",
+                text: "CyclOSM"
+            },{
+                value: "C",
+                text: "Cycle Map"
+            },{
+                value: "T",
+                text: "Transport Map"
+            }]
+       }*/
+	}]
+});
+
+Vvveb.Components.extend("_base", "widgets/embed-video", {
+    name: "Embed Video",
+    attributes: ["data-component-video"],
+    image: "icons/youtube.svg",
+    dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/youtube.svg" width="100" height="100">', //use image for drag and swap with iframe on drop for drag performance
+    html: '<div data-component-video style="width:640px;height:480px;"><iframe frameborder="0" src="https://player.vimeo.com/video/24253126?autoplay=false&controls=false&loop=false&playsinline=true&muted=false" width="100%" height="100%"></iframe></div>',
+    
+    
+    //url parameters set with onChange
+    t:'y',//video type
+    video_id:'',//video id
+    url: '', //html5 video src
+    autoplay: false,
+    controls: false,
+    loop: false,
+    playsinline: true,
+    muted: false,
+    resizable:true,//show select box resize handlers
+    resizeMode:"css",//div unlike img/iframe etc does not have width,height attributes need to use css
+	youtubeRegex:/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]+)/i,
+	vimeoRegex : /(?:vimeo\.com(?:[^\d]+))(\d+)/i,
+
+	init: function (node) {
+		iframe = node.querySelector('iframe');
+		video = node.querySelector('video');
+		
+		document.querySelector(".component-properties [data-key=url]").style.display = "none";
+		document.querySelector(".component-properties [data-key=poster]").style.display = "none";
+		
+		//check if html5
+		if (video) {
+			this.url = video.src;
+		} else if (iframe) {//vimeo or youtube
+			let src = iframe.getAttribute("src");
+			let match;
+
+			if (src && src.indexOf("youtube") && (match = src.match(this.youtubeRegex))) {//youtube
+				this.video_id = match[1];
+				this.t = "y";
+			} else if (src && src.indexOf("vimeo") && (match = src.match(this.vimeoRegex))) { //vimeo
+				this.video_id = match[1];
+				this.t = "v";
+			} else {
+				this.t = "h";
+			}
+		}
+		
+		document.querySelector(".component-properties input[name=video_id]").value = this.video_id;
+		document.querySelector(".component-properties input[name=url]").value = this.url;
+		document.querySelector(".component-properties select[name=t]").value = this.t;
+	},
+	
+	onChange: function (node, property, value) {
+		this[property.key] = value;
+		//if (property.key == "t")
+		{
+			switch (this.t) {
+				case 'y':
+					document.querySelector(".component-properties [data-key=video_id]").style.display = "";
+					document.querySelector(".component-properties [data-key=url]").style.display = "none";
+					document.querySelector(".component-properties [data-key=poster]").style.display = "none";
+				
+					newnode = generateElements(`<iframe width="100%" height="100%" allowfullscreen="true" frameborder="0" allow="autoplay" 
+										src="https://www.youtube.com/embed/${this.video_id}?autoplay=${this.autoplay}&controls=${this.controls}&loop=${this.loop}&playsinline=${this.playsinline}&muted=${this.muted}">
+								</iframe>`)[0];
+				break;
+				case 'v':
+					document.querySelector(".component-properties [data-key=video_id]").style.display = "";
+					document.querySelector(".component-properties [data-key=url]").style.display = "none";
+					document.querySelector(".component-properties [data-key=poster]").style.display = "none";
+					newnode = generateElements(`<iframe width="100%" height="100%" allowfullscreen="true" frameborder="0" allow="autoplay" 
+										src="https://player.vimeo.com/video/${this.video_id}?autoplay=${this.autoplay}&controls=${this.controls}&loop=${this.loop}&playsinline=${this.playsinline}&muted=${this.muted}">
+								</iframe>`)[0];
+				break;
+				case 'h':
+					document.querySelector(".component-properties [data-key=video_id]").style.display = "none";
+					document.querySelector(".component-properties [data-key=url]").style.display = "";
+					document.querySelector(".component-properties [data-key=poster]").style.display = "";
+					newnode = generateElements('<video poster="' + this.poster + '" src="' + this.url + '" ' + (this.autoplay?' autoplay ':'') + (this.controls?' controls ':'') + (this.loop?' loop ':'') + (this.playsinline?' playsinline ':'') + (this.muted?' muted ':'') + ' style="height: 100%; width: 100%;"></video>')[0];
+				break;
+			}
+			
+			node.querySelector(":scope > iframe,:scope  > video").replaceWith(newnode);
+			return node;
+		}
+		
+		return node;
+	},	
+	
+    properties: [{
+        name: "Provider",
+        key: "t",
+        inputtype: SelectInput,
+        data:{
+			options: [{
+                text: "Youtube",
+                value: "y"
+            },{
+                text: "Vimeo",
+                value: "v"
+            },{
+                text: "HTML5",
+                value: "h"
+            }]
+       },
+	 },{
+        name: "Video",
+        key: "video_id",
+        inputtype: TextInput,
+   		onChange: function(node, value, input, component) {
+			
+			let youtube = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]+)/i;
+			let vimeo = /(?:vimeo\.com(?:[^\d]+))(\d+)/i;
+			let id = false;
+			let t = false;
+
+			if (((id = value.match(youtube)) && (t = "y")) || ((id = value.match(vimeo)) && (t = "v"))) {
+				document.querySelector(".component-properties select[name=t]").value = t;
+				document.querySelector(".component-properties select[name=video_id]").value = id[1];
+
+				component.t = t;
+				component.video_id = id[1];
+
+				return id[1];
+			}
+			
+			return node;
+		}
+    },{
+        name: "Poster",
+        key: "poster",
+        htmlAttr: "poster",
+        inputtype: ImageInput
+    },{
+        name: "Url",
+        key: "url",
+        inputtype: TextInput
+    },{
+		name: "Width",
+        key: "width",
+        htmlAttr: "style",
+        inline:false,
+        col:6,
+        inputtype: CssUnitInput
+    },{
+        name: "Height",
+        key: "height",
+        htmlAttr: "style",
+        inline:false,
+        col:6,
+        inputtype: CssUnitInput
+    },{
+		key: "video_options",
+        inputtype: SectionInput,
+        name:false,
+        data: {header:"Options"},
+    },{
+        name: "Auto play",
+        key: "autoplay",
+        htmlAttr: "autoplay",
+        inline:true,
+        col:4,
+        inputtype: CheckboxInput
+    },{
+        name: "Plays inline",
+        key: "playsinline",
+        htmlAttr: "playsinline",
+        inline:true,
+        col:4,
+        inputtype: CheckboxInput
+    },{
+        name: "Controls",
+        key: "controls",
+        htmlAttr: "controls",
+        inline:true,
+        col:4,
+        inputtype: CheckboxInput
+    },{
+        name: "Loop",
+        key: "loop",
+        htmlAttr: "loop",
+        inline:true,
+        col:4,
+        inputtype: CheckboxInput
+    },{
+        name: "Muted",
+        key: "muted",
+        htmlAttr: "muted",
+        inline:true,
+        col:4,
+        inputtype: CheckboxInput
+	},{
+		name:"",
+		key: "autoplay_warning",
+        inline:false,
+        col:12,
+        inputtype: NoticeInput,
+        data: {
+			type:'warning',
+			title:'Autoplay',
+			text:'Most browsers allow auto play only if video is muted and plays inline'
+		}
+	}]
+});
+
+Vvveb.Components.extend("_base", "widgets/facebookcomments", {
+    name: "Facebook Comments",
+    attributes: ["data-component-facebookcomments"],
+    image: "icons/facebook.svg",
+    dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/facebook.svg">',
+    html: '<div  data-component-facebookcomments><script>(function(d, s, id) {\
+			  let js, fjs = d.getElementsByTagName(s)[0];\
+			  if (d.getElementById(id)) return;\
+			  js = d.createElement(s); js.id = id;\
+			  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=";\
+			  fjs.parentNode.insertBefore(js, fjs);\
+			}(document, \'script\', \'facebook-jssdk\'));</script>\
+			<div class="fb-comments" \
+			data-href="' + window.location.href + '" \
+			data-numposts="5" \
+			data-colorscheme="light" \
+			data-mobile="" \
+			data-order-by="social" \
+			data-width="100%" \
+			></div></div>',
+    properties: [{
+        name: "Href",
+        key: "business",
+        htmlAttr: "data-href",
+        child:".fb-comments",
+        inputtype: TextInput
+    },{		
+        name: "Item name",
+        key: "item_name",
+        htmlAttr: "data-numposts",
+        child:".fb-comments",
+        inputtype: TextInput
+    },{		
+        name: "Color scheme",
+        key: "colorscheme",
+        htmlAttr: "data-colorscheme",
+        child:".fb-comments",
+        inputtype: TextInput
+    },{		
+        name: "Order by",
+        key: "order-by",
+        htmlAttr: "data-order-by",
+        child:".fb-comments",
+        inputtype: TextInput
+    },{		
+        name: "Currency code",
+        key: "width",
+        htmlAttr: "data-width",
+        child:".fb-comments",
+        inputtype: TextInput
+	}]
+});
+/*
+Vvveb.Components.extend("_base", "widgets/instagram", {
+    name: "Instagram",
+    attributes: ["data-component-instagram"],
+    image: "icons/instagram.svg",
+    drophtml: '<img src="' + Vvveb.baseUrl + 'icons/instagram.png">',
+    html: '<div align=center data-component-instagram>\
+			<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/tsxp1hhQTG/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/tsxp1hhQTG/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Text</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/instagram/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Instagram</a> (@instagram) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="-">-</time></p></div></blockquote>\
+			<script async defer src="//www.instagram.com/embed.js"></script>\
+		</div>',
+    properties: [{
+        name: "Widget id",
+        key: "instgrm-permalink",
+        htmlAttr: "data-instgrm-permalink",
+        child: ".instagram-media",
+        inputtype: TextInput
+    }],
+});
+*/
+Vvveb.Components.extend("_base", "widgets/twitter", {
+    name: "Twitter",
+    attributes: ["data-component-twitter"],
+    image: "icons/twitter.svg",
+    dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/twitter.svg">',
+    html: '<div data-component-twitter><iframe width="100%" height="100%"src="https://platform.twitter.com/embed/Tweet.html?embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=false&id=943901463998169088"></iframe></div>',
+    resizable:true,//show select box resize handlers
+    resizeMode:"css",
+    twitterRegex : /(?:twitter\.com(?:[^\d]+))(\d+)/i,
+
+    tweet:'',//location
+	init: function (node) {
+		let iframe = node.querySelector('iframe');
+		let src = iframe.getAttribute("src");
+		let url = new URL(src);
+		let params = new URLSearchParams(url.search);
+		
+		this.tweet = params.get("id");
+		
+		if (!this.tweet) {
+			if (match = src.match(this.twitterRegex)) {
+				this.tweet = match[1];
+			}
+			
+		}
+
+		document.querySelector(".component-properties input[name=tweet]").value = this.tweet;
+	},
+	    
+    onChange: function (node, property, value) {
+		tweet_iframe = node.querySelector('iframe');
+
+		if (property.key == "tweet") {
+			this[property.key] = value;
+			
+			tweeturl = 'https://platform.twitter.com/embed/Tweet.html?embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=false&id=' + this.tweet;
+			
+			tweet_iframe.setAttribute("src",tweeturl);
+		}
+		
+		return node;
+	},
+
+    properties: [{
+        name: "Tweet",
+        key: "tweet",
+        inputtype: TextInput,
+   		onChange: function(node, value, input, component) {
+			
+			let twitterRegex = /(?:twitter\.com(?:[^\d]+))(\d+)/i;
+			let id = false;
+
+			if (id = value.match(twitterRegex)) {
+				document.querySelector(".component-properties input[name=tweet]").value = id[1];
+
+				component.tweet = id[1];
+				return id[1];
+			}
+			
+			return node;
+		}
+	}]
+});
+
+Vvveb.Components.extend("_base", "widgets/paypal", {
+    name: "Paypal",
+    attributes: ["data-component-paypal"],
+    image: "icons/paypal.svg",
+    html: '<form action="https://www.paypal.com/cgi-bin/webscr" method="post" data-component-paypal>\
+\
+				<!-- Identify your business so that you can collect the payments. -->\
+				<input type="hidden" name="business"\
+					value="givanz@yahoo.com">\
+\
+				<!-- Specify a Donate button. -->\
+				<input type="hidden" name="cmd" value="_donations">\
+\
+				<!-- Specify details about the contribution -->\
+				<input type="hidden" name="item_name" value="VvvebJs">\
+				<input type="hidden" name="item_number" value="Support">\
+				<input type="hidden" name="currency_code" value="USD">\
+\
+				<!-- Display the payment button. -->\
+				<input type="image" name="submit"\
+				src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif"\
+				alt="Donate">\
+				<img alt="" width="1" height="1"\
+				src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >\
+\
+			</form>',
+    properties: [{
+        name: "Email",
+        key: "business",
+        htmlAttr: "value",
+        child:"input[name='business']",
+        inputtype: TextInput
+    },{		
+        name: "Item name",
+        key: "item_name",
+        htmlAttr: "value",
+        child:"input[name='item_name']",
+        inputtype: TextInput
+    },{		
+        name: "Item number",
+        key: "item_number",
+        htmlAttr: "value",
+        child:"input[name='item_number']",
+        inputtype: TextInput
+    },{		
+        name: "Currency code",
+        key: "currency_code",
+        htmlAttr: "value",
+        child:"input[name='currency_code']",
+        inputtype: TextInput
+	}],
+});
+    
+Vvveb.Components.extend("_base", "widgets/facebookpage", {
+    name: "Facebook Page Plugin",
+    attributes: ["data-component-facebookpage"],
+    image: "icons/facebook.svg",
+    dropHtml: '<img src="' + Vvveb.baseUrl + 'icons/facebook.png">',
+	html: `<div data-component-facebookpage><div class="fb-page" 
+			 data-href="https://www.facebook.com/facebook" 
+			 data-tabs="timeline"
+			 data-width="" 
+			 data-height="" 
+			 data-small-header="true" 
+			 data-adapt-container-width="true" 
+			 data-hide-cover="false" 
+			 data-show-facepile="true">
+			 
+				<blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
+					<a href="https://www.facebook.com/facebook">Facebook</a>
+				</blockquote>
+
+			</div>
+
+			<div id="fb-root"></div>
+			<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ro_RO/sdk.js#xfbml=1&version=v15.0" nonce="o7Y7zPjy"></script>
+		</div>`,
+
+    properties: [{
+        name: "Small header",
+        key: "small-header",
+        htmlAttr: "data-small-header",
+        child:".fb-page",
+        inputtype: TextInput
+    },{		
+        name: "Adapt container width",
+        key: "adapt-container-width",
+        htmlAttr: "data-adapt-container-width",
+        child:".fb-page",
+        inputtype: TextInput
+    },{		
+        name: "Hide cover",
+        key: "hide-cover",
+        htmlAttr: "data-hide-cover",
+        child:".fb-page",
+        inputtype: TextInput
+    },{		
+        name: "Show facepile",
+        key: "show-facepile",
+        htmlAttr: "data-show-facepile",
+        child:".fb-page",
+        inputtype: TextInput
+    },{		
+        name: "App Id",
+        key: "appid",
+        htmlAttr: "data-appId",
+        child:".fb-page",
+        inputtype: TextInput
+	}],
+   onChange: function(node, input, value, component) {
+	   
+	   let newElement = generateElements(this.html)[0];
+	   newElement.find(".fb-page").setAttribute(input.htmlAttr, value);
+
+	   frameHead.querySelector("[data-fbcssmodules]").remove();
+	   frameBody.querySelector("[data-fbcssmodules]").remove();
+	   frameHead.querySelector("script[src^='https://connect.facebook.net']").remove();
+
+
+	   node.parent().html(newElement.html());
+	   return newElement;
+	}	
+});
+    
+Vvveb.Components.extend("_base", "widgets/chartjs", {
+    name: "Chart.js",
+    attributes: ["data-component-chartjs"],
+    image: "icons/chart.svg",
+	dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/chart.svg">',
+    html: '<div data-component-chartjs class="chartjs" data-chart=\'{\
+			"type": "line",\
+			"data": {\
+				"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],\
+				"datasets": [{\
+					"data": [12, 19, 3, 5, 2, 3],\
+					"fill": false,\
+					"borderColor":"rgba(255, 99, 132, 0.2)"\
+				},{\
+					"fill": false,\
+					"data": [3, 15, 7, 4, 19, 12],\
+					"borderColor": "rgba(54, 162, 235, 0.2)"\
+				}]\
+			}}\' style="min-height:240px;min-width:240px;width:100%;height:100%;position:relative">\
+			  <canvas></canvas>\
+			</div>',
+	chartjs: null,
+	ctx: null,
+	node: null,
+
+	config: {/*
+			type: 'line',
+			data: {
+				labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+				datasets: [{
+					data: [12, 19, 3, 5, 2, 3],
+					fill: false,
+					borderColor:'rgba(255, 99, 132, 0.2)',
+				},{
+					fill: false,
+					data: [3, 15, 7, 4, 19, 12],
+					borderColor: 'rgba(54, 162, 235, 0.2)',
+				}]
+			},*/
+	},		
+
+	dragStart: function (node) {
+		//check if chartjs is included and if not add it when drag starts to allow the script to load
+		body = Vvveb.Builder.frameBody;
+		
+		if (document.getElementById("#chartjs-script")) {
+			body.append(generateElements('<script id="chartjs-script" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>')[0]);
+			body.append(generateElements('<script>\
+				$(document).ready(function() {\
+					$(".chartjs").each(function () {\
+						ctx = $("canvas", this).get(0).getContext("2d");\
+						config = JSON.parse(this.dataset.chart);\
+						chartjs = new Chart(ctx, config);\
+					});\
+				\});\
+			  </script>')[0]);
+		}
+		
+		return node;
+	},
+	
+
+	drawChart: function () {
+		if (this.chartjs != null) this.chartjs.destroy();
+		this.node.dataset.chart = JSON.stringify(this.config);
+		
+		config = Object.assign({}, this.config);//avoid passing by reference to avoid chartjs to fill the object
+		this.chartjs = new Chart(this.ctx, config);
+	},
+	
+	init: function (node) {
+		this.node = node;
+		this.ctx = node.querySelector("canvas").getContext("2d");
+		this.config = JSON.parse(node.dataset.chart);
+		this.drawChart();
+
+		return node;
+	},
+  
+  
+	beforeInit: function (node) {
+		return node;
+	},
+    
+    properties: [{
+        name: "Type",
+        key: "type",
+        inputtype: SelectInput,
+        data:{
+			options: [{
+                text: "Line",
+                value: "line"
+            },{
+                text: "Bar",
+                value: "bar"
+            },{
+                text: "Pie",
+                value: "pie"
+            },{
+                text: "Doughnut",
+                value: "doughnut"
+            },{
+                text: "Polar Area",
+                value: "polarArea"
+            },{
+                text: "Bubble",
+                value: "bubble"
+            },{
+                text: "Scatter",
+                value: "scatter"
+            },{
+                text: "Radar",
+                value: "radar"
+            }]
+       },
+		init: function(node) {
+			return JSON.parse(node.dataset.chart).type;
+		},
+       onChange: function(node, value, input, component) {
+		   component.config.type = value;
+		   component.drawChart();
+		   
+		   return node;
+		}
+	 }]
+});
+
+function lottieAfterDrop(node) {
+	//check if lottie js is included and if not add it when drag starts to allow the script to load
+	body = Vvveb.Builder.frameBody;
+
+	if (!body.querySelector("#lottie-js")) {
+		let lib = document.createElement('script');
+		let code = document.createElement('script');
+		lib.id = 'lottie-js';
+		lib.type = 'text/javascript';
+		lib.src = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js';
+		code.type = 'text/javascript';
+		code.text = `
+		let lottie = [];
+		function initLottie(onlyNew = false) {
+			if (typeof bodymovin == "undefined") return;
+			
+			
+			let list = document.querySelectorAll('.lottie' + (onlyNew ? ":not(.lottie-initialized)" : "") );
+			list.forEach(el => {
+				el.replaceChildren();
+				let animItem = bodymovin.loadAnimation({
+				  wrapper: el,
+				  animType: 'svg',
+				  loop: (el.dataset.loop  == "true" ? true : false),
+				  autoplay: (el.dataset.autoplay == "true" ? true : false),
+				  path: el.dataset.path
+				});
+				
+			});
+		}
+
+		if (document.readyState !== 'loading') {
+			initLottie();
+		  } else {
+			document.addEventListener('DOMContentLoaded', initLottie);
+		  }`;			
+		
+		body.appendChild(lib);
+		body.appendChild(code);
+		
+		lib.addEventListener('load', function() {		
+			Vvveb.Builder.iframe.contentWindow.initLottie();
+		});
+	} else {
+		Vvveb.Builder.iframe.contentWindow.initLottie(true);
+	}
+	
+	return node;
+};
+
+Vvveb.Components.add("widgets/lottie", {
+    name: "Lottie",
+    image: "icons/lottie.svg",
+    attributes: ["data-component-lottie"],
+    html: `
+	  <div class="lottie" data-component-lottie data-path="https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json" data-loop="true" data-autoplay="true">
+	  </div>	
+	`,
+	afterDrop: lottieAfterDrop,
+	
+    onChange: function (node, property, value) {
+		Vvveb.Builder.iframe.contentWindow.initLottie();
+		Vvveb.Builder.selectNode(node);
+		return node;
+	},	
+	
+    properties: [{
+		name: "Path",
+        key: "path",
+        //inputtype: ImageInput,
+        inputtype: TextInput,
+		htmlAttr:"data-path",
+	},{
+		name: "Autoplay",
+        key: "autoplay",
+		htmlAttr:"data-autoplay",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Loop",
+        key: "loop",
+		htmlAttr:"data-loop",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	}]
+});