npm package: @group-gti/tc-rss-feed-widget
Description: Stencil Component Starter
Latest version: 1.0.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)

# TC RSS Feed Widget

This is a widget to display a RSS feeds from TARGETconnect, you will need your RSS feed url to use this widget.

## Prerequisites

There are a few things you need to know before you can add the widget to your website/application:

- You will need to know the version of the widget you want to use, the latest version can be found on [npm](https://www.npmjs.com/package/@group-gti/tc-rss-feed-widget)
- You will need your RSS feed Url, please contact TARGETconnect support if you are having trouble finding this.

## Getting started

Paste the following script on to the webpage you want to display the widget on (replacing {version} & {url} with your values)

```bash
<script type="module" src="https://cdn.jsdelivr.net/npm/@group-gti/tc-rss-feed-widget@{version}/dist/tc-rss-feed-widget/tc-rss-feed-widget.esm.js"></script>
<tc-rss-feed-widget url="{url}"></tc-rss-feed-widget>
```

**NOTE:** version will be in x.x.x format (e.g 1.0.0)

## Properties

Properties that can be passed into the widget:

| Property         | Description                                                                                                              | Type                | Default           |
| ---------------- | ---------------------------------------------------------                                                                | --------            | --------------    |
| `url`            | TARGETconnect RSS feed Url                                                                                               | `string`            | `-`               |
| `heading`        | Optional: Override the heading on the widget                                                                             | `string`            | `Feed title`      |
| `description`    | Optional: Override the desciption on the widget, if you want to turn the desciption off change to `false`                | `string/boolean`    | `Feed description`|
| `height`         | Optional: Override the height of the widget, by default it will fill the HTML container it is in. Example height="500px" | `string`            | `-`               |
| `width`          | Optional: Override the width of the widget, by default it will fill the HTML container it is in. Example width="350px"   | `string`            | `-`               |
| `theme`          | Optional: Turn the default widget theme off                                                                              | `boolean`           | `true`            |
| `details`        | Optional: Turn the details (modal) off                                                                                   | `boolean`           | `true`            |


Please note the minimum width the widget can be is 250px.

## Browser compatibility

The widget is build with Web components which are centered around the Custom Element v1 spec, a cross-browser way to define and create essentially new HTML tags, and is the successor to the now-defunct v0 spec.

We are currently supporting the following browsers:

- Chrome 60+
- Safari 10.1+
- Firefox 63+
- Edge 79+