![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# mwcpl

> Master's Web Components Pattern Library

A part of a master's thesis titled Development of universal web components using the Web Components standard.

## Components

| Name                                                                                                          | Issues                                                                                                              |
| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| [`<mwcpl-button>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-button)                 | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Button%22)         |
| [`<mwcpl-dialog>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-dialog)                 | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Dialog%22)         |
| [`<mwcpl-fab>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-fab)                       | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Fab%22)            |
| [`<mwcpl-form-field>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-form-field)         | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Form+Field%22)     |
| [`<mwcpl-list>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-list)                     | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+List%22)           |
| [`<mwcpl-list-item>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-list-item)           | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+List+Item%22)      |
| [`<mwcpl-navbar>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-navbar)                 | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Navbar%22)         |
| [`<mwcpl-navbar-item>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-navbar-item)       | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Navbar+Item%22)    |
| [`<mwcpl-notification>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-notification)     | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Notification%22)   |
| [`<mwcpl-tree-view>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-tree-view)           | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Tree+View%22)      |
| [`<mwcpl-tree-view-item>`](https://github.com/zanozbot/mwcpl/tree/master/src/components/mwcpl-tree-view-item) | [Issues](https://github.com/zanozbot/mwcpl/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+Tree+View+Item%22) | 

You can experience FOUC before hydration with some components. To fix that set their `visibility` to `hidden`, since this property is overridden upon hydration.<br>
Example

```css
mwcpl-dialog {
    visibility: hidden;
}
```

## Fonts

Master's Web Components Pattern Library defaults to using [Roboto](https://fonts.google.com/specimen/Roboto) font for the text, and the [FontAwesome](https://fontawesome.com/) font for the icons.

```html
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="https://kit.fontawesome.com/**.js" crossorigin="anonymous"></script>
```

## Quickstart

**1.) Install**

Install the pattern library from NPM

```
npm install mwcpl
```

**2.)**

Import the pattern library in you HTML.<br>
Stencil makes sure to lazy load only the used components on the page from the bundle.<br>
All elements can be controlled with JavaScript, just like built-in HTML elements.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master's Web Components Pattern Library</title>
    <script src='node_modules/mwcpl/dist/mwcpl.js'></script>
</head>
<body>
    <mwcpl-button id="button" label="Click here"></mwcpl-button>

    <script>
        const button = document.querySelector("#button");
        button.addEventListener('click', () => {
            alert("Clicked");
        });
    </script>
</body>
</html>
```

**3.) Serve**

Serve your HTML with e.g.

```
npm install http-server
```

and for Windows

```
.\node_modules\.bin\http-server.cmd .
```

or for Linux

```
.\node_modules\.bin\http-server .
```

## Contribute

To start contribute a new web component or a fix using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/zanozbot/mwcpl.git
cd mwcpl
```

and run:

```bash
npm install
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).