@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/select/index.js

@@ -1,24 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, customElement, property, styleMap, query, FocusedPropertyKey } from '@refinitiv-ui/core';
-import '../overlay';
-import { Item } from '../item';
-import '../item';
-import '../icon';
-import { CollectionComposer, TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils';
-import { VERSION } from '../';
-/**
- * Key direction
- */
-var Direction;
-(function (Direction) {
-    Direction[Direction["Up"] = -1] = "Up";
-    Direction[Direction["Down"] = 1] = "Down";
-})(Direction || (Direction = {}));
+import { __decorate } from "tslib";
+import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import '../overlay/index.js';
+import '../item/index.js';
+import '../icon/index.js';
+import { Item } from '../item/index.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 // Observer config for items
 const observerOptions = {
     subtree: true,
@@ -36,6 +28,13 @@ const observerOptions = {
 const LABEL_SEPARATOR = ', '; // TODO: for multiselect
 const POPUP_POSITION = ['bottom-start', 'top-start'];
 const KEY_SEARCH_DEBOUNCER = 300;
+var Navigation;
+(function (Navigation) {
+    Navigation["FIRST"] = "First";
+    Navigation["LAST"] = "Last";
+    Navigation["NEXT"] = "Next";
+    Navigation["PREVIOUS"] = "Previous";
+})(Navigation || (Navigation = {}));
 /**
  * Expands upon the native select element,
  * providing a fully themeable dropdown element.
@@ -49,6 +48,7 @@ const KEY_SEARCH_DEBOUNCER = 300;
 let Select = class Select extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'button';
         this.composer = new CollectionComposer([]);
         this._data = null;
         this.popupDynamicStyles = {}; /* set popup min-width based on select width or CSS vars */
@@ -91,7 +91,7 @@ let Select = class Select extends ControlElement {
             const hasLightDomMutations = mutations
                 .some(m => m.target.getRootNode() !== this.shadowRoot);
             if (hasLightDomMutations) {
-                void this.requestUpdate();
+                this.requestUpdate();
             }
         };
         this.shouldOpenOnFocus = false;
@@ -111,7 +111,7 @@ let Select = class Select extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -213,6 +213,7 @@ let Select = class Select extends ControlElement {
     /**
     * Construct the menu from data object. Cannot be used with slotted content
     * @type {SelectData | null}
+    * @default null
     */
     get data() {
         return this._data;
@@ -234,11 +235,12 @@ let Select = class Select extends ControlElement {
         if (!this.selectedDataItems.length) {
             this.value = this.cachedValue;
         }
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
     * Value of the element
     * @param value Element value
+    * @default -
     */
     set value(value) {
         value = this.castValue(value);
@@ -250,7 +252,7 @@ let Select = class Select extends ControlElement {
             // either defined in data or by having selected as an attribute
             this.clearSelection();
             this.selectValue(value);
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     get value() {
@@ -267,6 +269,15 @@ let Select = class Select extends ControlElement {
         }
         return this.selectedSlotItems.map(item => this.getItemValue(item));
     }
+    /**
+     * Called when connected to DOM
+     * @returns {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        // Indicating that this select has a popup of type listbox
+        this.setAttribute('aria-haspopup', 'listbox');
+    }
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -290,6 +301,10 @@ let Select = class Select extends ControlElement {
             else {
                 this.closing();
             }
+            this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
+        }
+        if (changedProperties.has('error')) {
+            this.setAttribute('aria-invalid', this.error ? 'true' : 'false');
         }
         super.update(changedProperties);
     }
@@ -372,7 +387,7 @@ let Select = class Select extends ControlElement {
             this.resizeThrottler.schedule(() => {
                 if (this.offsetWidth) { /* must be here to avoid infinitive loop */
                     this.restrictPopupWidth();
-                    void this.requestUpdate();
+                    this.requestUpdate();
                 }
             });
             return;
@@ -541,14 +556,20 @@ let Select = class Select extends ControlElement {
                 break;
             case 'Up':
             case 'ArrowUp':
-                this.focusElement(Direction.Up);
+                this.focusElement(Navigation.PREVIOUS);
                 break;
             case 'Down':
             case 'ArrowDown':
-                this.focusElement(Direction.Down);
+                this.focusElement(Navigation.NEXT);
                 break;
             case 'Tab':
-                this.focusElement(event.shiftKey ? Direction.Up : Direction.Down);
+                this.focusElement(event.shiftKey ? Navigation.PREVIOUS : Navigation.NEXT);
+                break;
+            case 'Home':
+                this.focusElement(Navigation.FIRST);
+                break;
+            case 'End':
+                this.focusElement(Navigation.LAST);
                 break;
             default:
                 if (this.isValidFilterKey(event)) {
@@ -574,27 +595,42 @@ let Select = class Select extends ControlElement {
             && !event.metaKey;
     }
     /**
-     * Focus and highlight the next/previous element
-     * @param direction Focus next or previous element
+     * Focus and highlight element according to specified direction
+     * @param direction previous, next, first or last focusable element
      * @returns {void}
      */
     focusElement(direction) {
         const highlightedItem = this.highlightedItem || this.getSelectedElements()[0];
-        const children = this.getSelectableElements();
-        const idx = highlightedItem ? children.indexOf(highlightedItem) : -1;
-        let focusElement;
-        if (direction === 1) {
-            focusElement = idx === -1 ? children[0] : children[idx + 1];
+        const selectableElements = this.getSelectableElements();
+        if (selectableElements.length === 0) {
+            return;
         }
-        else {
-            focusElement = idx === -1 ? children[children.length - 1] : children[idx - 1];
+        const index = highlightedItem ? selectableElements.indexOf(highlightedItem) : -1;
+        const firstElement = selectableElements[0];
+        const lastElement = selectableElements[selectableElements.length - 1];
+        let element;
+        switch (direction) {
+            case Navigation.PREVIOUS:
+                element = index === -1 ? lastElement : selectableElements[index - 1];
+                break;
+            case Navigation.NEXT:
+                element = index === -1 ? firstElement : selectableElements[index + 1];
+                break;
+            case Navigation.FIRST:
+                element = firstElement;
+                break;
+            case Navigation.LAST:
+                element = lastElement;
+                break;
+            default:
+                break;
         }
-        if (!focusElement) {
-            focusElement = direction === 1 ? children[0] : children[children.length - 1];
+        if (!element) {
+            element = direction === Navigation.NEXT ? firstElement : lastElement;
         }
-        if (focusElement) {
-            focusElement.focus();
-            this.setItemHighlight(focusElement);
+        if (element) {
+            element.focus();
+            this.setItemHighlight(element);
         }
     }
     /**
@@ -705,7 +741,7 @@ let Select = class Select extends ControlElement {
                 item.selected = false;
             });
         }
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Mark item as selected
@@ -805,15 +841,17 @@ let Select = class Select extends ControlElement {
     toItem(item) {
         switch (item.type) {
             case 'divider':
-                return html `<ef-item part="item" type="divider"></ef-item>`;
+                return html `<ef-item role="presentation" part="item" type="divider"></ef-item>`;
             case 'header':
                 return html `<ef-item
+          role="presentation"
           part="item"
           type="header"
           .label=${item.label}></ef-item>`;
             // no default
         }
         return html `<ef-item
+      role="option"
       part="item"
       .value=${item.value}
       .label=${item.label}
@@ -865,6 +903,7 @@ let Select = class Select extends ControlElement {
         tabindex="-1"
         id="menu"
         part="list"
+        role="listbox"
         style=${styleMap(this.popupDynamicStyles)}
         with-shadow
         lock-position-target

package/lib/sidebar-layout/custom-elements.json

@@ -8,7 +8,7 @@
         {
           "name": "sidebar-width",
           "description": "Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30%",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "collapsed",
@@ -28,7 +28,7 @@
           "name": "sidebarWidth",
           "attribute": "sidebar-width",
           "description": "Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30%",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "collapsed",
@@ -43,10 +43,6 @@
           "description": "Set sidebar position to left or right",
           "type": "\"left\" | \"right\"",
           "default": "\"left\""
-        },
-        {
-          "name": "sidebar",
-          "description": "Property to get sidebar"
         }
       ],
       "slots": [

package/lib/sidebar-layout/custom-elements.md

@@ -0,0 +1,21 @@
+# ef-sidebar-layout
+
+Provides an app layout with sidebar.
+There are 4 sections that can be slotted a component in.
+
+## Properties
+
+| Property          | Attribute          | Type                  | Default | Description                                      |
+|-------------------|--------------------|-----------------------|---------|--------------------------------------------------|
+| `collapsed`       | `collapsed`        | `boolean`             | false   | Set to hide sidebar                              |
+| `sidebarPosition` | `sidebar-position` | `"left" \| "right"`   | "left"  | Set sidebar position to left or right            |
+| `sidebarWidth`    | `sidebar-width`    | `string \| undefined` |         | Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30% |
+
+## Slots
+
+| Name              | Description              |
+|-------------------|--------------------------|
+| `main-content`    | Content of main section. |
+| `main-header`     | Main header.             |
+| `sidebar-content` | Content of sidebar.      |
+| `sidebar-header`  | Sidebar header.          |

package/lib/sidebar-layout/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import { Layout } from '../layout';
-import '../layout';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import type { Layout } from '../layout';
+import '../layout/index.js';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.
@@ -18,15 +18,15 @@ export declare class SidebarLayout extends BasicElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30%
-     * @type {string}
+     * @type {string | undefined}
      */
     sidebarWidth?: string;
     /**
@@ -39,6 +39,7 @@ export declare class SidebarLayout extends BasicElement {
     sidebarPosition: 'left' | 'right';
     /**
      * Property to get sidebar
+     * @ignore
      */
     sidebar: Layout;
     /**

package/lib/sidebar-layout/index.js

@@ -1,12 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, customElement, property, ifDefined, query } from '@refinitiv-ui/core';
-import '../layout';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import '../layout/index.js';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.
@@ -36,7 +35,7 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/slider/custom-elements.json

@@ -68,13 +68,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -152,14 +152,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/slider/custom-elements.md

@@ -0,0 +1,28 @@
+# ef-slider
+
+Allows users to make selections from a range of values
+
+## Properties
+
+| Property         | Attribute          | Type                       | Default | Description                                      |
+|------------------|--------------------|----------------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`         | `boolean`                  | false   | Set disabled state                               |
+| `from`           | `from`             | `string`                   | "0"     | Uses with `range`. Low value of slider in range mode. |
+| `max`            | `max`              | `string`                   | "100"   | Slider maximum value of slider.                  |
+| `min`            | `min`              | `string`                   | "0"     | Set minimum value of slider.                     |
+| `minRange`       | `min-range`        | `string`                   | "0"     | Uses with `range`. Set minimum allowance value (distance) between `from` and `to`. |
+| `range`          | `range`            | `boolean`                  | false   | Set slider to range mode. Instead of a single value, slider will provide `from` and `to`. |
+| `readonly`       | `readonly`         | `boolean`                  | false   | Set readonly state                               |
+| `showInputField` | `show-input-field` | `"" \| "readonly" \| null` | null    | Show input number field.                         |
+| `showSteps`      | `show-steps`       | `boolean`                  | false   | Show steps marker on slider.                     |
+| `step`           | `step`             | `string`                   | "1"     | Specified size of increment or decrement jump between value. |
+| `to`             | `to`               | `string`                   | "100"   | Uses with `range`. High value of slider in range mode |
+| `value`          | `value`            | `string`                   | "0"     | Value of slider. Not applicable in range mode.   |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `from-changed`  | Fired when the `from` changes.  |
+| `to-changed`    | Fired when the `to` changes.    |
+| `value-changed` | Fired when the `value` changes. |

package/lib/slider/index.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../number-field';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../number-field/index.js';
 /**
  * Allows users to make selections from a range of values
  *
  * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value=0] - Value of slider. Not applicable in range mode.
+ * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -386,7 +386,7 @@ export declare class Slider extends ControlElement {
      * Define styles in a tagged template literal, using the css tag function.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Implement `render` slider template.
      * @returns Slider template

package/lib/slider/index.js

@@ -1,12 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, ControlElement, customElement, property, styleMap, query, WarningNotice } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../number-field';
+import { __decorate } from "tslib";
+import { html, css, ControlElement, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import '../number-field/index.js';
 var SliderNameType;
 (function (SliderNameType) {
     SliderNameType["value"] = "value";
@@ -50,7 +49,7 @@ const clamp = function (value, min, max) {
  * Allows users to make selections from a range of values
  *
  * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value=0] - Value of slider. Not applicable in range mode.
+ * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state

package/lib/sparkline/custom-elements.json

@@ -7,13 +7,13 @@
         {
           "name": "data",
           "description": "Chart data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
           "name": "previous-data",
           "description": "Chart previous data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -27,14 +27,14 @@
           "name": "data",
           "attribute": "data",
           "description": "Chart data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
           "name": "previousData",
           "attribute": "previous-data",
           "description": "Chart previous data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {

package/lib/sparkline/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-sparkline
+
+## Properties
+
+| Property         | Attribute         | Type                  | Default | Description                                      |
+|------------------|-------------------|-----------------------|---------|--------------------------------------------------|
+| `data`           | `data`            | `number[]`            | []      | Chart data as an array of number.                |
+| `previousData`   | `previous-data`   | `number[]`            | []      | Chart previous data as an array of number.       |
+| `referenceValue` | `reference-value` | `number \| undefined` |         | Baseline value to show horizontal line (optional) |
+
+## Events
+
+| Event          | Description                                      |
+|----------------|--------------------------------------------------|
+| `data-changed` | Fired when data is changed                       |
+| `data-error`   | Fired when data has error and chart cannot be updated |

package/lib/sparkline/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, PropertyValues, ResponsiveElement, TemplateResult, ElementSize } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult, ElementSize } from '@refinitiv-ui/core';
 import '@refinitiv-ui/browser-sparkline';
 import type { BrowserSparklineChart } from '@refinitiv-ui/browser-sparkline';
 import type { ThemeConfig } from '@refinitiv-ui/browser-sparkline/lib/browserSparklineCanvas';
@@ -11,12 +11,14 @@ export declare class Sparkline extends ResponsiveElement {
     static get version(): string;
     /**
      * Chart data as an array of number.
+     * @type {number[]}
      */
     data: number[];
     /**
      * Chart previous data as an array of number.
+     * @type {number[]}
      */
-    previousData: never[];
+    previousData: number[];
     /**
      * Baseline value to show horizontal line (optional)
      */
@@ -78,12 +80,12 @@ export declare class Sparkline extends ResponsiveElement {
      */
     protected createChart(): void;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult;
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/sparkline/index.js

@@ -1,22 +1,22 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, customElement, property, ResponsiveElement, html, query } from '@refinitiv-ui/core';
-import { color } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { css, ResponsiveElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { color } from '@refinitiv-ui/utils/lib/color.js';
 import '@refinitiv-ui/browser-sparkline';
-import { VERSION } from '../';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {
         super(...arguments);
         /**
          * Chart data as an array of number.
+         * @type {number[]}
          */
         this.data = [];
         /**
          * Chart previous data as an array of number.
+         * @type {number[]}
          */
         this.previousData = [];
         /**
@@ -133,7 +133,7 @@ let Sparkline = class Sparkline extends ResponsiveElement {
         };
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/swing-gauge/custom-elements.json

@@ -96,12 +96,14 @@
         },
         {
           "name": "valueFormatter",
-          "description": "Custome value formatter",
+          "description": "Custom value formatter",
+          "type": "SwingGaugeValueFormatter",
           "default": "\"defaultValueFormatter\""
         },
         {
-          "name": "canvasSize",
-          "description": "Getter size of component"
+          "name": "canvasSize (readonly)",
+          "description": "Getter size of component",
+          "type": "SwingGaugeCanvasSize"
         }
       ]
     }