open-index/open-npm huggingface dataset:
npm package: @qualityunit/liveagent-components-basic
Description: Basic components for LiveAgent
Author: QualityUnit
Latest version: 0.0.5

# Basic components for LiveAgent

Summary: The package contains 4 fundamental UI components - a universal button, an icon, an action banner for locked features, and a loading indicator for LiveAgent.

---

## Components

1. Button

Description: A basic button component with support for custom CSS classes and click handler. Uses a slot for flexible button content.

Props:
- onClick - callback function called on click
- className - custom CSS classes

Usage:
```ts
<Button onClick={() => console.log('click')} className="primary">
    Click me
</Button>
```                                                                                                                                                          
---                                                                                                                                                          
2. Icon

Description: A component for displaying icons from the custom la-icon-font icon font. The icon is defined via a CSS class.

Props:
- iconLaClassName - icon CSS class (e.g., la-settings, la-user)
- className - additional CSS classes

Usage:
```ts
<Icon iconLaClassName="la-settings" className="large" />
```                                                                                                                                                          
---                                                                                                                                                          
3. ActionBanner

Description: An informational banner with a text message and action button. Primarily used to notify users about locked features with an option to take      
action (e.g., upgrade).

Props:
- label - message text displayed in the banner
- actionLabel - button text
- onAction - callback function called on button click

Usage:
```ts
<ActionBanner                                                                                                                                                
    label="This feature requires a higher plan"
    actionLabel="Upgrade"
    onAction={() => navigateToUpgrade()}
/>
```
---
4. LoadingIndicator

Description: An animated circular loading indicator with smooth rotation and stroke animations. The color can be customized using a CSS variable.

Props:
- None

CSS Variables:
- `--loading-indicator-color` - sets the stroke color of the loading circle

Usage:
```ts
<style>
    .container {
        --loading-indicator-color: #3498db;
    }
</style>

<div class="container">
    <LoadingIndicator />
</div>
```
npm package: @qualityunit/liveagent-components-editor
Description: Editor component for LiveAgent
Author: QualityUnit
Latest version: 0.0.88

# Editor component for LiveAgent

Basic usage example:

```html

<ckeditor5-classic placeHolder="Type text" lang="sk"/>

```

or

```ts

const editor = document.createElement('ckeditor5-classic');
editor.placeHolder = 'Type text';
editor.lang = 'sk';
document.body.appendChild(editor);

```

Advanced usage example:

```ts

const editor = document.createElement('ckeditor5-classic');
// needed for "imageUpload" when this feature is enabled
editor.insertImageServiceUrl = 'https://hosted.la.localhost/LiveAgent/server/agent/index.php?C=La_Agent_ImageUpload&M=upload&S=rghw2zc7hs9yfi0jh7qvoqxbl61t4nah&T=1720005193335e4&FormRequest=Y&FormResponse=Y';
editor.items = ['undo', 'redo', '|', 'heading', 'bold', 'italic', 'strikethrough', 'underline', 'fontColor', 'fontBackgroundColor', 'fontFamily', 'fontSize', '|', 'numberedList', 'bulletedList', '|', 'outdent', 'indent', 'blockQuote', '|', 'alignment', '|', 'link', 'imageUpload', 'mediaEmbed', 'horizontalLine', 'specialCharacters', 'code', 'codeBlock', 'insertTable', '|', 'style', '|', 'removeFormat', 'selectAll', '|', 'sourceEditing'];
editor.allowHtmlSupport = false;
editor.value = 'Your text';
editor.placeHolder = 'Type text';
editor.lang = 'sk';
editor.valueChange = (evt, data) => {
    console.log("Value change: " + editor.value, data);
};
editor.stateChange = (evt, data) => {
    console.log("Status change: " + data);
};
editor.sourceEditingModeChange = (evt, data) => {
    console.log("Source editing mode change: " + data);
};
editor.selectionRangeChange = (evt, data) => {
    console.log("Selection range change: ", data);
};
document.body.appendChild(editor);

```
npm package: @qualityunit/liveagent-components-utils
Description: Utils for LiveAgent components
Author: QualityUnit
Latest version: 1.0.5

# Utils for LiveAgent components

Localization example:

```ts
<script>
import {initI18N, fallbackLocale, initialLocale, initDayJS} from '@qualityunit/liveagent-components-utils/i18n';
import {_, isLoading} from 'svelte-i18n';

const options: {
    thousandsSeparator: 'S',
    decimalSeparator: 'D',
    dateFormat: 'MM/d/yyyy',
    timeFormat: 'HH:mm:ss',
    timeShortFormat: 'HH:mm',
    locale: 'sk'
};

initI18N(options, () => import(`./locales/${fallbackLocale}.json`), () => import(`./locales/${initialLocale}.json`));

// needed only if you use svelte-time with relative time
initDayJS(options.locale);

</script>

{#if $isLoading}
    <p>Loading translations...</p>
{:else}
    <p>{$_("Translated string")}</p>
{/if}
```
npm package: @qualityunit/liveagent-help
Description: Help component for LiveAgent
Author: QualityUnit
Latest version: 0.0.30

# Help component for LiveAgent

### Install

You can start the installation:

```
npm install
```

### Usage

Usage example:

```ts
const helpCenter = document.createElement('help-center');
helpCenter.options = {
    basePath: 'https://hosted.la.localhost/LiveAgent/server',
    sessionId: 'ryt8pct5megpxtp7cpkipy2ycmfnyw59',
    localeOptions: {
        thousandsSeparator: 'S',
        decimalSeparator: 'D',
        dateFormat: 'MM/d/yyyy',
        timeFormat: 'HH:mm:ss',
        timeShortFormat: 'HH:mm',
        locale: 'sk'
    },
    darkMode: true,
    onSuccessNotification: (message) => {
        if (message) console.log('Success notification: ', message);
    },
    onErrorNotification: (message) => {
        if (message) console.log('Error notification: ', message);
    },
    builtInEmailAddress: 'buildin@emailaddress.com',
    limitedMode: false
};
document.body.appendChild(helpCenter);
```