open-index/open-npm huggingface dataset:
npm package: @lsportsltd/sec-core
Description: Sports Expert Chat
Latest version: 1.5.4

# @lsportsltd/sec-core

> *LSports' Sports Expert Chat widget*

This is the core package which contains the widget as a raw custom HTML element.

Built with StencilJS, the widget can be used without any framework, on any browser and platform

## Usage

define the custom elements in your main entry
```typescript
import { defineCustomElements } from '@lsportsltd/sec-core';

defineCustomElements();
```
This will register the widget and all its components to the custom elements registry

you can use the widget anywhere like any other HTML element
```html
<lsports-sec api-token='XXX'></lsports-sec>
```
```typescript
import type { Fixture } from '@lsportsltd/sec-core';

const fixtures: Fixture[] = [];
const widget = document.querySelector('lsports-sec');

widget.fixtures = fixtures;
```

## Frameworks Support

The widget is native HTML element and can be used anywhere,
but we also provide dedicated packages for major frameworks:
* @lsportsltd/sec-ng
* @lsportsltd/sec-react
* @lsportsltd/sec-svelte
* @lsportsltd/sec-vue

Check out [our docs](https://sec.lsports.eu/documentation) for more information
npm package: @lsportsltd/sec-ng
Description: > _LSports' Sports Expert Chat widget_
Latest version: 6.0.0

# @lsportsltd/sec-ng

> _LSports' Sports Expert Chat widget_

This package wraps the native HTML widget element with Angular component.

## Usage

### Ng Add
You can use `ng add` to quickly install and add the widget to your app, it'll detect if it's a standalone or module-based project and set up the widget accordingly.
```shell
ng add @lsportsltd/sec-ng
```
*Note: The widget will be added to `app.component`*

### Manual
We support both standalone and module-based projects.

If your project still uses angular modules you can import `SecModule`,  
otherwise you will need to add `provideSecInitializer()` in either root providers or lazy-loaded route providers (depends on where you plan to use the component), and import the component directly.

```typescript
// app.component.ts
import { LSportsSecComponent, Fixture } from '@lsportsltd/sec-ng';

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [LSportsSecComponent],
})
export class AppComponent {
  // api token is required in order to use the widget
  token: string;
  // a list of up to 10 mapped fixtures
  fixtures: Fixture[] = [...];
}
```

```html
<!-- app.component.html -->
<lsports-sec [apiToken]="token" [fixtures]="fixtures"></lsports-sec>
```
npm package: @lsportsltd/sec-react
Description: > *LSports' Sports Expert Chat widget*
Latest version: 6.0.0

# @lsportsltd/sec-react

> *LSports' Sports Expert Chat widget*

This package wraps the native HTML widget element with React component.

## Usage

Import the widget like any other React component, anywhere in your code.
```tsx
// App.tsx
import { LSportsSec } from '@lsportsltd/sec-react';

export const App = () => {
  const [apiToken, setApiToken] = useState('123');
  const [fixtures, setFixtures] = useState<Fixture[]>([]);

  return <LSportsSec apiToken={apiToken} fixtures={fixtures} />;
};
```
npm package: @lsportsltd/sec-svelte
Description: > *LSports' Sports Expert Chat widget*
Latest version: 6.0.0

# @lsportsltd/sec-svelte

> *LSports' Sports Expert Chat widget*

This package wraps the native HTML widget element with Svelte component.

## Usage

Import the widget like any other Svelte component, anywhere in your code.
```sveltehtml
<!-- App.svelte -->
<script context="module" lang='ts'>
  import { LsportsSec } from '@lsportsltd/sec-svelte';
</script>
<script lang="ts">
  import type { Fixture } from '@lsportsltd/sec-svelte';
  export let apiToken: string;
  export let fixtures: Fixture[];
</script>
<main>
  <LsportsSec {apiToken} {fixtures}/>
</main>
```
npm package: @lsportsltd/sec-vue
Description: > *LSports' Sports Expert Chat widget*
Latest version: 6.0.0

# @lsportsltd/sec-vue

> *LSports' Sports Expert Chat widget*

This package wraps the native HTML widget element with Vue component.

## Usage

Import the widget like any other Vue component, anywhere in your code.
```vue
<!-- App.vue -->
<script setup lang="ts">
  import { LsportsSec } from '@lsportsltd/sec-vue';
</script>
<script lang="ts">
  import type { Fixture } from '@lsportsltd/sec-vue';
  import { ref } from 'vue';

  const apiToken = ref<string>('123');
  const fixtures = ref<Fixture[]>([]);
</script>
<template>
  <LsportsSec :apiToken="apiToken" :fixtures="fixtures" />
</template>
```