Swelte web components
This project uses template for Svelte from https://github.com/sveltejs/template-webpack.
Components are dynamically loaded, depending whether elements are used. Added polyfills for IE 11 for Custom elements.
Preview of the elements is on https://tihi321.github.io/svelte-web-components/
Components
Scroller - adds animated progress bar on top of wrapped elements, animated on scroll.
Element
<ts-scroller>... html ...</ts-scroller>
*Attributes*<br/>
**color** - color of the loader
*Css Variables*<br/>
**height**: --ts-scroller-height<br/>
**box-shadow** : --ts-scroller-shadow<br/>
PathGrid - svg element takes path as argument and displays grid with coordinates on side over canvas, for easier path generation.
Element
<ts-path-grid></ts-path-grid>
*Attributes*<br/>
**path** - svg path <br/>
**opacity** - opacity of the grid<br/>
**fill**: fill of the path<br/>
**stroke** : stroke of the path<br/>
**strokewidth** - stroke width<br/>
**vbx** - x coordinate for the viewbox<br/>
**vby**: y coordinate for the viewbox<br/>
**other** : here you can write any other property for path, as. dash-array, ...
*Css Variables*<br/>
**fill**: --ts-path-grid-fill - color of the grid<br/>
Modal - simple modal wrapper, dispatches event on close. With close activated when clicked on backdrop.
Element
<ts-modal>... html ...</ts-modal>
*Attributes* <br/>
**show** - show modal, default is false<br/>
**zindex** - default 1<br/>
**duration**: duration of transition, default is 350ms<br/>
**background** : backdrop color of the modal<br/>
Date - simple date element, shows a year.
Element
<ts-date></ts-date>
