# @tilde-nlp/ngx-translate

Tilde translator package with translation window components and services for Tilde MT api. It includes text and file translation.

## Tilde Translate box

It is possible to include translate box in any website as webcomponent. To do this, you need to add `<tilde-translate-box>` tag with necessary properties.

In order to `<tilde-translate-box>` tag to work, you need to include compiled js file and components stylesheet file. 

To include javascript file, you need to add following part somewhere in your head or body (depends on your web app and goals): 
` <script type="text/javascript" src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/tilde-translate-box.js"></script>`. This tag references translate box javascript file. 

Including stylesheet is pretty much the same as javacsript, you need to add link in your project `<link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">`.
// INFO about specific parts for translate box

**Note `@latest` part in the urls** - this means that your page will always load latest version of library, which means library can change at any day with some new updates. If major version is updated, it may even break. Please evaluate best scenario. It might be good also to set it to specific version, to do that just replace `@latest` with version number, for example `@5.0.5`.

### Integrating translatebox from javascript

If you are integrating from javascript, you can add parameters by appending translateBox element with properties in `camelCase`, which means if param name below is `x-api-key`, when using it in javascript, you should use it as `xApiKey`. Full list of params is visible below.

```javascript
  <script>
    // create element for tilde-translate-box 
    var translateBox = document.createElement('tilde-translate-box'); 
    // set mandatory params  
    translateBox.xApiKey='MY-X-API-KEY';	
    // set optional params as needed
    translateBox.language="en";
    document.body.appendChild(translateBox);
</script>
```

### Integrating translatebox from html

If you are integrating from html, you can add parameters by appending `<tilde-translate-box></tilde-translate-box>` tag. For example, if the parameter name is `x-api-key` and your value for this parameter is `MY-API-KEY`, your tag after modification would look like this: `<tilde-translate-box x-api-key="MY-API-KEY"></tilde-translate-box>`. Full list of params is visible below.

```html
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Testing Tilde Translate Box</title>
      <base href="/">
	  <link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">
    </head>
    <body>
      <tilde-translate-box x-api-key="MY-X-API-KEY"></tilde-translate-box>
      
      <script type="text/javascript" src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/tilde-translate-box.js"></script>
    </body>
</html>
```

## Input params

Translate box has some mandatory parameters and some optional configuration settings than can be set from html or javascript. See integration examples for usage of params. 

Translate box has following input params:

### Mandatory params 
Params that are mandatory and whose default values are null.

**x-api-key** - client authentication key. Contact support to get one.

### Optional params

Translate box will work with default values that are described below.

**allowed-file-types-auth-user** - allowed file formats for authorized user
default value *[".doc", ".docx", ".docm", ".xlsx", ".pptx", ".odt", ".odp", ".ods", ".txt", ".html", ".htm",
        ".xhtml", ".xht", ".tmx", ".xlf", ".xlif", ".xliff", ".sdlxliff", ".sdlxlf", ".ttx", ".rtf",
        ".pages", ".tex", ".xml", ".json", ".sxw", ".pdf", ".csv", ".ttl", ".srt", ".png", ".jpg", ".jpeg", ".bmp"];*

**language** - UI language code.
default value *en*

Supported languages: 
  - lv (Latvian)
  - lt (Lithuanian)
  - et (Estonian)
  - en (English)
  - de (German)
  - fi (Finnish)
  - pl (Polish)

**default-language** - UI fallback language.
default value *en*

**show-extensions** - Show allowed extensions.
default value *true*

**contact-support** - Wether should show contact support in nontification messages.
default value *true*

**is-auto-language-detection-enabled** - Enable or disable auto detection of source language.
defult value *true*
