@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
150 lines (102 loc) • 7.29 kB
Markdown
# Tecnologia web components
  <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
This is a Work in Progress Web components library made by [BPM Suite](https://www.senior.com.br/senior-x/bpm/) team.
## Browser Support
| Chrome | New Edge (Chromium) | Safari | Firefox | Older Edge | IE |
| ------ | ------------------- | ------ | ------- | ----------------- | ----------------- |
| 60+ | 79+ | 10.1+ | 63+ | 16-18 (polyfills) | >= 11 (polyfills) |
> [See complete docs](https://stenciljs.com/docs/browser-support)
## How to install
### NPM
Install dependency:
```bash
npm i @seniorsistemas/tecnologia-webcomponents
```
And import `tecnologia-webcomponents.esm.js`:
```js
<script src="@seniorsistemas/tecnologia-webcomponents/dist/tecnologia-webcomponents/tecnologia-webcomponents.esm.js" type="module"></script>
```
For legacy projects import `tecnologia-webcomponents.js`:
```js
<script src="@seniorsistemas/tecnologia-webcomponents/dist/tecnologia-webcomponents/tecnologia-webcomponents.js" type="text/javascript"></script>
```
For use in frameworks, [see the Stencil page](https://stenciljs.com/docs/overview).
### Via CDN (release candidate)
Now you can test components in a HTML page importing via script from CDN.
#### Stable
```html
<script src="https://cdn.tecnologia.senior.com.br/platform/tecnologia-webcomponents/master/tecnologia-webcomponents/tecnologia-webcomponents.esm.js" type="module"></script>
```
For legacy projects use:
```html
<script src="https://cdn.tecnologia.senior.com.br/platform/tecnologia-webcomponents/master/tecnologia-webcomponents/tecnologia-webcomponents.js" type="text/javascript"></script>
```
#### Release candidate (develop branch)
**(ATTENTION!! Not use for production!)**
```html
<script src="https://cdn.tecnologia.senior.com.br/platform/tecnologia-webcomponents/develop/tecnologia-webcomponents/tecnologia-webcomponents.js"></script>
```
> Other alternative is use UNPKG, for this, overwrite with the following URL: `https://unpkg.com/@seniorsistemas/tecnologia-webcomponents@latest/dist/tecnologia-webcomponents/tecnologia-webcomponents.js`
### Angular applications
```bash
npm i @seniorsistemas/tecnologia-webcomponents
```
In your `app.module.ts` declare `CUSTOM_ELEMENTS_SCHEMA`:
```ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // <-- import from here
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- declare this
})
export class AppModule { }
```
And in `main.ts` end of file, add following imports:
```ts
import { applyPolyfills, defineCustomElements } from '@seniorsistemas/tecnologia-webcomponents/loader';
defineCustomElements();
// for IE support (optional)
applyPolyfills().then(() => {
defineCustomElements()
})
```
### React applications
```bash
yarn add @seniorsistemas/tecnologia-webcomponents
```
In your `src/index.js` or `src/index.tsx` (typescript project) file, add following imports preferably before of the React Render:
```js
import { applyPolyfills, defineCustomElements } from '@seniorsistemas/tecnologia-webcomponents/loader';
defineCustomElements();
// for IE support (optional)
applyPolyfills().then(() => {
defineCustomElements()
})
```
## I want to contribute
View [contribution guide](CONTRIBUTING.md).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="https://github.com/lucasreichert3"><img src="https://avatars2.githubusercontent.com/u/39280222?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lucas Reichert</b></sub></a><br /><a href="https://github.com/SeniorSA/tecnologia-webcomponents/commits?author=lucasreichert3" title="Code">💻</a> <a href="https://github.com/SeniorSA/tecnologia-webcomponents/commits?author=lucasreichert3" title="Tests">⚠️</a> <a href="#ideas-lucasreichert3" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/SeniorSA/tecnologia-webcomponents/commits?author=lucasreichert3" title="Documentation">📖</a> <a href="https://github.com/SeniorSA/tecnologia-webcomponents/pulls?q=is%3Apr+reviewed-by%3Alucasreichert3" title="Reviewed Pull Requests">👀</a></td>
<td align="center"><a href="http://linkedin.com/in/tiagoboeing/"><img src="https://avatars2.githubusercontent.com/u/3449932?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tiago Boeing</b></sub></a><br /><a href="https://github.com/SeniorSA/tecnologia-webcomponents/commits?author=tiagoboeing" title="Code">💻</a> <a href="https://github.com/SeniorSA/tecnologia-webcomponents/commits?author=tiagoboeing" title="Tests">⚠️</a> <a href="#design-tiagoboeing" title="Design">🎨</a> <a href="https://github.com/SeniorSA/tecnologia-webcomponents/pulls?q=is%3Apr+reviewed-by%3Atiagoboeing" title="Reviewed Pull Requests">👀</a> <a href="#projectManagement-tiagoboeing" title="Project Management">📆</a> <a href="#ideas-tiagoboeing" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/SeniorSA/tecnologia-webcomponents/commits?author=tiagoboeing" title="Documentation">📖</a></td>
</tr>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!