npm package: @sobolt/sobolt-components
Description: Sobolt Web Components
Latest version: 1.2.5

![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)![npm](https://img.shields.io/badge/npm-v0.2.8-success)

# Sobolt Components

Web Component library for Sobolt's design system.

## Installation

```
npm i @sobolt/sobolt-components
```

## Development / Component building

`npm install` to install packages, followed by
`npm start` to start the development server

## Development / Storybook

To work with storybook, open 2 terminals and in the first terminal run `npm run watch` and in the second
terminal run `npm run start-storybook` The first command will open a development server that keeps track of updates, so that
storybook, which will open in a separate tab, will also reflect updates.

## React

To use with React, follow the following instructions:

In your index.js file, import the necessary loaders:

```
import {
	applyPolyfills,
	defineCustomElements,
} from "@sobolt/sobolt-components/loader"
```

Then apply the polyfills and define the custome lements

```
applyPolyfills().then(() => {
	defineCustomElements()
})
```

## Angular

To use with Angular, follow the following instructions:

- Include CUSTOM_ELEMENTS_SCHEMA within your modules that use components, for example within AppModule
- Call defineCustomElements() from main.ts (or other place)

```
// within main.ts -> also apply polyfills for different browser support

import { applyPolyfills, defineCustomElements } from  "@sobolt/sobolt-components/loader";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

applyPolyfills().then(() => {
	defineCustomElements()
})
```

```
// within module or wherever you're going to define custom schema elements

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```

For more information on integrating with Angular visit the official [Stencil docs](https://stenciljs.com/docs/angular)

### After integrating the library, you can use every sobolt component [available](https://sobolt-components.web.app/)

## Documentation

[Sobolt Components Documentation, please contact Sobolt for login credentials](https://sobolt-components.web.app/)

## Request Sobolt Component

Coming soon

## Global Styles

For now, global styling only works with font-sizes and widths of contained elements of your choosing for each breakpoint. These widths work with navbar, but you can also choose to add these widths to whatever component you want. Inside your main css file (e.g. `main.scss`), and add the following variables to the root to control the widths and font-sizes:

```
:root {
	--largeScreenWidth: 1200px;
	--mediumScreenWidth: 890px;
	--smallScreenWidth: 600px;
	--tabletScreenWidth: 480px;
	--mobileScreenWidth: 320px;

	--body: 13px;
}

```

### Patch 0.2.1 notes

- Replaced functions wth event emitters
- Updated storybooks with methods & eventemitters
- Fixed dropdown and added width and color customization to button
- Fixed bug in select component that makes it automatically choose first option in
  select content list