update va-report-components v2.13.0 doc and changelog (#72)

sdk/va-report-components/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.13.0 (August 15, 2024)
+
+### Added
+- SAS Viya 2024.08 support (Report Package version 48)
+- [ES Module imports](https://developer.sas.com/sdk/va/docs/guides/esm) support
+
 ## 2.12.0 (July 18, 2024)
 
 ### Added

sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api-reference.md

@@ -0,0 +1,44 @@
+---
+id: version-2.13.0-api-reference
+title: API Reference
+original_id: api-reference
+---
+
+The SAS Visual Analytics SDK provides a set of components and APIs that enable you to render reports and report parts. It also enables you 
+to use SAS data to drive your own components or visualizations.
+
+## Top-Level Exports
+
+- [`SASReportElement`](api/SASReportElement.md)
+- [`SASReportPageElement`](api/SASReportPageElement.md)
+- [`SASReportObjectElement`](api/SASReportObjectElement.md)
+- [`connectToServer`](api/connectToServer.md)
+- [`registerDataDrivenContent`](api/registerDataDrivenContent.md)
+- [`DataDrivenContentHandle`](api/DataDrivenContentHandle.md)
+- [`setUseHighContrastReportTheme`](api/setUseHighContrastReportTheme.md)
+- [`setLoadingTheme`](api/setLoadingTheme.md)
+- [`setLocale`](api/setLocale.md)
+- [`setFormatterLocale`](api/setFormatterLocale.md)
+
+## Loading with \<script\>
+
+When you load the library with a script element, the `vaReportComponents` global variable is not ready to use until all of the other
+assets are loaded. The `vaReportComponents.loaded` event is dispatched once it is ready.
+
+```html
+<script async src="https://cdn.developer.sas.com/packages/va-report-components/latest/dist/umd/va-report-components.js"></script>
+<script>
+  window.addEventListener('vaReportComponents.loaded', function() {
+    // The SAS Visual Analytics SDK is loaded and ready
+    const connectToServer = vaReportComponents.connectToServer;
+  });
+</script>
+```
+
+## Loading with imports
+
+When you load the library as an ES module, APIs are available as named imports. See the [ES module imports guide](guides/esm.md) for more information about loading the library as a module.
+
+```ts
+import { connectToServer } from '@sassoftware/va-report-components';
+```

sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api/setFormatterLocale.md

@@ -0,0 +1,45 @@
+---
+id: version-2.13.0-setFormatterLocale
+title: setFormatterLocale
+original_id: setFormatterLocale
+---
+
+```
+setFormatterLocale(locale): void
+```
+
+`setFormatterLocale` enables the user to set the language that is used to format numeric values and dates. If not specified, the language will fallback to the one that is specified by calling setLocale or the one is specified in the browser settings.
+
+## Arguments
+
+### `locale: string | null`
+
+The locale should be specified as a language code and an optional country code. This is the same format that is used by [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language)
+
+## Examples
+
+### Script Tag
+
+```javascript
+window.addEventListener("vaReportComponents.loaded", function() {
+  vaReportComponents.setFormatterLocale("fr");
+});
+```
+
+```javascript
+window.addEventListener("vaReportComponents.loaded", function() {
+  vaReportComponents.setFormatterLocale("fr-CA");
+});
+```
+
+### ESM
+
+```javascript
+import { setFormatterLocale } from "@sassoftware/va-report-components";
+setFormatterLocale("fr");
+```
+
+```javascript
+import { setFormatterLocale } from "@sassoftware/va-report-components";
+setFormatterLocale("fr-CA");
+```

sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api/setLoadingTheme.md

@@ -0,0 +1,67 @@
+---
+id: version-2.13.0-setLoadingTheme
+title: setLoadingTheme
+original_id: setLoadingTheme
+---
+
+```
+setLoadingTheme(options): void
+```
+
+`setLoadingTheme` allows the user to set the theme of the sdk before a report loads. You might want to set the theme for the initial loading state to match the website that the SAS Visual Analytic SDK is embedded in. You also might want to set the loading theme to be consistent with the report that will be loaded.
+
+`setLoadingTheme` only affects the initial loading and logon states. It does not affect the report theme once a report has been loaded.
+
+## Arguments
+
+### `options: Object | 'light' | 'dark' | 'high-contrast'`
+
+When you select `'light'`, `'dark'`, or `'high-contrast'`, then the loading theme is based on one of the built-in themes.
+
+Alternatively, you can specify theme values. The following optional properties are supported:
+
+- `baseTheme: 'light' | 'dark'`: The base theme that is used for loading the theme values. The theme values are used when no defaults are provided. For example, if backgroundColor is not specified and the baseTheme is light, then the backgoundColor will be white since that is the theme's background color. **default**:`light`
+
+You can further customize the loading style with additional style properties. Some examples are provided below to show you how certain options affect the theme. The following style overrides are available:
+
+- `primary: string`: The logon button background and loading indicator.
+- `backgroundColor: string`
+- `textColor: string`
+- `textColorInverse: string` The button text color for the logon state.
+- `fontFamily: string`
+
+## Examples
+
+### Script Tag
+
+```javascript
+window.addEventListener("vaReportComponents.loaded", function() {
+  vaReportComponents.setLoadingTheme("dark");
+});
+```
+
+```javascript
+window.addEventListener("vaReportComponents.loaded", function() {
+  vaReportComponents.setLoadingTheme({
+    baseTheme: "dark",
+    primary: "#FFA500",
+    fontFamily: "Gothic",
+  });
+});
+```
+
+### ESM
+
+```javascript
+import { setLoadingTheme } from "@sassoftware/va-report-components";
+setLoadingTheme("dark");
+```
+
+```javascript
+import { setLoadingTheme } from "@sassoftware/va-report-components";
+setLoadingTheme({
+  baseTheme: "dark",
+  primary: "#FFA500",
+  fontFamily: "Gothic",
+});
+```

sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api/setLocale.md

@@ -0,0 +1,45 @@
+---
+id: version-2.13.0-setLocale
+title: setLocale
+original_id: setLocale
+---
+
+```
+setLocale(locale): void
+```
+
+`setLocale` enables the user to set an override for the language that is specified in the browser settings.
+
+## Arguments
+
+### `locale: string | null`
+
+The locale should be specified as a language code and an optional country code. This is the same format that is used by [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language)
+
+## Examples
+
+### Script Tag
+
+```javascript
+window.addEventListener("vaReportComponents.loaded", function() {
+  vaReportComponents.setLocale("fr");
+});
+```
+
+```javascript
+window.addEventListener("vaReportComponents.loaded", function() {
+  vaReportComponents.setLocale("fr-CA");
+});
+```
+
+### ESM
+
+```javascript
+import { setLocale } from "@sassoftware/va-report-components";
+setLocale("fr");
+```
+
+```javascript
+import { setLocale } from "@sassoftware/va-report-components";
+setLocale("fr-CA");
+```

sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/getting-started.md

@@ -0,0 +1,88 @@
+---
+id: version-2.13.0-getting-started
+title: Getting started
+original_id: getting-started
+---
+
+The SAS Visual Analytics SDK enables you to use the power of SAS Visual Analytics in your own websites and HTML applications.
+You can embed entire reports with the `<sas-report>` custom HTML element, embed a single object with the
+`<sas-report-object>` element, or connect to your reports with our JavaScript API.
+
+## Installation
+
+### NPM
+
+The <a target="_blank" href="https://www.npmjs.com/package/@sassoftware/va-report-components">`@sassoftware/va-report-components`</a> library is published to NPM and can be installed by running the `npm install` command as shown below. `va-report-components` can then be loaded with either a `script` tag or with an ES module import.
+
+```bash
+# From the root directory of your project
+npm install @sassoftware/va-report-components
+```
+
+When using a `script` tag, the contents of the `va-report-components/dist` folder must be deployed with your page.
+
+```bash
+# Copy the contents of the package to an asset folder for deployment
+cp -r ./node_modules/@sassoftware/va-report-components ./sdk-assets
+```
+
+The library can then be loaded out of the deployed assets folder.
+
+```html
+<script async src="./sdk-assets/dist/umd/va-report-components.js"></script>
+```
+
+If your site is built using a code bundler, it might be more convenient to load the library through ES module imports. See the [ES module guide](guides/esm.md) for more details.
+
+```js
+import "@sassoftware/va-report-components"
+```
+
+### CDN (Content Delivery Network)
+
+Accessing the `va-report-components` library from the SAS Developer CDN is easy. It does not require installation or
+hosting of the library code and assets. Here is an example of loading the latest version of `va-report-components` from the CDN using an HTML `script` tag.
+
+```html
+<script async src="https://cdn.developer.sas.com/packages/va-report-components/latest/dist/umd/va-report-components.js"></script>
+```
+
+When the library is used in production, consider pinning it to an explicit version. This is done with a URL like `https://cdn.developer.sas.com/packages/va-report-components/${VERSION}/dist/umd/va-report-components.js`, where `${VERSION}` is the full `major.minor.patch` semantic version.
+
+## SAS Viya setup
+
+The SAS Visual Analytics SDK requires either connecting directly to SAS Viya or exporting a SAS Report Package.  Server setup requirements for connecting to SAS Viya are covered in the [SAS Viya Setup Guide](guides/viya-setup.md).
+
+## Create a custom HTML tag
+
+To build the custom HTML tag that you will embed in your web page:
+
+1. Open a report in SAS Visual Analytics.
+1. Open the menu in the report toolbar (which is displayed in the image below) or right-click an individual object, and then select Copy Link. The Copy Link window is displayed.
+1. If you are using guest access, expand the Options heading and select the Guest access check box.
+1. Click Copy Link.
+
+![Report Overflow Menu](assets/report-overflow-menu.png)
+
+Once the report link or object link has been copied to your clipboard, paste it below, and the output will show a custom HTML
+tag that is ready to use.
+
+<link rel="stylesheet" href="/sdk/va/css/copy-link-translator.css">
+<form>
+  <textarea id="vdk-slt-input"
+    rows="5"
+    style="resize: none; width: 100%;"
+    placeholder="Paste the link from SAS Visual Analytics here."
+    aria-label="Paste the link from SAS Visual Analytics here."
+  ></textarea>
+  <pre><code id="vdk-slt-output" class="hljs" data-hide="true"></code></pre>
+</form>
+<script type="module" src="/sdk/va/js/copy-link-translator.js"></script>
+
+For a complete list of options, see the documentation for [`SASReportElement`](api/SASReportElement.md) and
+[`SASReportObjectElement`](api/SASReportObjectElement.md)
+
+## See our examples
+
+<a target="_blank" href="https://github.com/sassoftware/sas-viya-sdk-js/blob/main/sdk/va-report-components/examples">Our examples</a> demonstrate a few different
+ways to start using the SAS Visual Analytics SDK in your HTML application.