@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/icon/custom-elements.json

@@ -6,27 +6,29 @@
       "attributes": [
         {
           "name": "icon",
-          "description": "Name of a known icon to render.",
+          "description": "Name of a known icon to render or URL of SVG icon.",
           "type": "string | null"
         },
         {
           "name": "src",
           "description": "Src location of an svg icon.",
-          "type": "string | null"
+          "type": "string | null",
+          "deprecatedMessage": "Use `icon` instead"
         }
       ],
       "properties": [
         {
           "name": "icon",
           "attribute": "icon",
-          "description": "Name of a known icon to render.",
+          "description": "Name of a known icon to render or URL of SVG icon.",
           "type": "string | null"
         },
         {
           "name": "src",
           "attribute": "src",
           "description": "Src location of an svg icon.",
-          "type": "string | null"
+          "type": "string | null",
+          "deprecatedMessage": "Use `icon` instead"
         }
       ]
     }

package/lib/icon/custom-elements.md

@@ -0,0 +1,8 @@
+# ef-icon
+
+## Properties
+
+| Property | Attribute | Type             | Default | Description                                      |
+|----------|-----------|------------------|---------|--------------------------------------------------|
+| `icon`   | `icon`    | `string \| null` | null    | Name of a known icon to render or URL of SVG icon. |
+| `src`    | `src`     | `string \| null` | null    | Src location of an svg icon.                     |

package/lib/icon/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResult, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-export { preload } from './utils/IconLoader';
+import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+export { preload } from './utils/IconLoader.js';
 export declare class Icon extends BasicElement {
     /**
      * Element version number
@@ -8,16 +8,17 @@ export declare class Icon 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;
+    static get styles(): CSSResultGroup;
     private _icon;
     /**
-     * Name of a known icon to render.
-     * @example heart
+     * Name of a known icon to render or URL of SVG icon.
+     * @example heart | https://cdn.io/icons/heart.svg
+     * @default null
      */
     get icon(): string | null;
     set icon(value: string | null);
@@ -25,6 +26,8 @@ export declare class Icon extends BasicElement {
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     * @default null
      */
     get src(): string | null;
     set src(value: string | null);

package/lib/icon/index.js

@@ -1,14 +1,18 @@
-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, svg, css, customElement, property, unsafeHTML } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { IconLoader } from './utils/IconLoader';
-export { preload } from './utils/IconLoader';
+import { __decorate } from "tslib";
+import { BasicElement, svg, 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 { unsafeSVG } from '@refinitiv-ui/core/lib/directives/unsafe-svg.js';
+import { VERSION } from '../version.js';
+import { IconLoader } from './utils/IconLoader.js';
+export { preload } from './utils/IconLoader.js';
 const EmptyTemplate = svg ``;
+/**
+ * Cache for reusing SVG template results across multiple icons.
+ * Reusing these templates increases performance dramatically when many icons are rendered.
+ * As the cache key is an absolute URL, we can assume no clashes will occur.
+ */
+const iconTemplateCache = new Map();
 let Icon = class Icon extends BasicElement {
     constructor() {
         super(...arguments);
@@ -24,7 +28,7 @@ let Icon = class Icon 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
@@ -44,8 +48,9 @@ let Icon = class Icon extends BasicElement {
     `;
     }
     /**
-     * Name of a known icon to render.
-     * @example heart
+     * Name of a known icon to render or URL of SVG icon.
+     * @example heart | https://cdn.io/icons/heart.svg
+     * @default null
      */
     get icon() {
         return this._icon;
@@ -55,12 +60,14 @@ let Icon = class Icon extends BasicElement {
         if (oldValue !== value) {
             this._icon = value;
             void this.setIconSrc();
-            void this.requestUpdate('icon', oldValue);
+            this.requestUpdate('icon', oldValue);
         }
     }
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     * @default null
      */
     get src() {
         return this._src;
@@ -83,7 +90,7 @@ let Icon = class Icon extends BasicElement {
     set template(value) {
         if (this._template !== value) {
             this._template = value;
-            void this.requestUpdate();
+            this.requestUpdate();
         }
     }
     /**
@@ -113,10 +120,13 @@ let Icon = class Icon extends BasicElement {
      * @returns {void}
      */
     async loadAndRenderIcon(src) {
-        const svgBody = await IconLoader.loadSVG(src);
-        if (svgBody) {
-            this.template = svg `${unsafeHTML(svgBody)}`;
+        const iconTemplateCacheItem = iconTemplateCache.get(src);
+        if (!iconTemplateCacheItem) {
+            iconTemplateCache.set(src, IconLoader.loadSVG(src)
+                .then(body => svg `${unsafeSVG(body)}`));
+            return this.loadAndRenderIcon(src); // Load again and await cache result
         }
+        this.template = await iconTemplateCacheItem;
     }
     /**
      * Get and cache CDN prefix

package/lib/icon/utils/IconLoader.d.ts

@@ -1,4 +1,4 @@
-import { CdnLoader } from '@refinitiv-ui/utils';
+import { CdnLoader } from '@refinitiv-ui/utils/lib/loader.js';
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern
@@ -33,6 +33,11 @@ declare class IconLoader extends CdnLoader {
      * @returns Promise, which will be resolved with complete source.
      */
     getSrc(iconName: string): Promise<string>;
+    /**
+     * Loads icon and returns the body of the SVG
+     * @param icon Icon name to load
+     * @returns SVG body of the response
+     */
     loadSVG(icon: string): Promise<string | undefined>;
 }
 declare const iconLoaderInstance: IconLoader;

package/lib/icon/utils/IconLoader.js

@@ -1,5 +1,5 @@
-import { CdnLoader, Deferred } from '@refinitiv-ui/utils';
-const isUrl = (str) => (/^https?:\/\//i).test(str);
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
+const isUrl = (str) => (/^(https?:\/{2}|\.?\/)/i).test(str);
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern
@@ -50,26 +50,33 @@ class IconLoader extends CdnLoader {
      * @returns Promise, which will be resolved with complete source.
      */
     async getSrc(iconName) {
+        if (isUrl(iconName)) {
+            return iconName;
+        }
         return iconName ? `${await this.getCdnPrefix()}${iconName}.svg` : '';
     }
+    /**
+     * Loads icon and returns the body of the SVG
+     * @param icon Icon name to load
+     * @returns SVG body of the response
+     */
     async loadSVG(icon) {
-        if (icon) {
-            if (!isUrl(icon)) {
-                icon = await this.getSrc(icon);
-            }
-            const response = await this.load(icon);
-            if (response && response.status === 200 && response.getResponseHeader('content-type') === 'image/svg+xml') {
-                const container = document.createElement('svg');
-                container.innerHTML = response.responseText;
-                this.stripUnsafeNodes(...container.children);
-                const svgRoot = container.firstElementChild;
-                if (svgRoot) {
-                    svgRoot.setAttribute('focusable', 'false'); /* disable IE11 focus on SVG root element */
-                }
-                return Promise.resolve(container.innerHTML);
+        if (!icon) {
+            return;
+        }
+        icon = await this.getSrc(icon);
+        const response = await this.load(icon);
+        if (response && response.status === 200 && response.getResponseHeader('content-type') === 'image/svg+xml') {
+            const container = document.createElement('svg');
+            container.innerHTML = response.responseText;
+            this.stripUnsafeNodes(...container.children);
+            const svgRoot = container.firstElementChild;
+            if (svgRoot) {
+                svgRoot.setAttribute('focusable', 'false'); /* disable IE11 focus on SVG root element */
             }
-            return Promise.resolve('');
+            return container.innerHTML;
         }
+        return '';
     }
 }
 const iconLoaderInstance = new IconLoader();

package/lib/index.d.ts

@@ -1,2 +1,3 @@
-export declare const VERSION = "PUBLISH_VERSION";
+export { VERSION } from './version.js';
+export * from './events';
 export * from '@refinitiv-ui/core';

package/lib/index.js

@@ -1,2 +1,3 @@
-export const VERSION = '5.5.0';
+export { VERSION } from './version.js';
+export * from './events';
 export * from '@refinitiv-ui/core';

package/lib/interactive-chart/custom-elements.json

@@ -24,8 +24,9 @@
         },
         {
           "name": "legend-style",
-          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
-          "type": "\"vertical\" | \"horizontal\""
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "\"vertical\""
         }
       ],
       "properties": [
@@ -52,14 +53,9 @@
         {
           "name": "legendStyle",
           "attribute": "legend-style",
-          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
-          "type": "\"vertical\" | \"horizontal\""
-        },
-        {
-          "name": "seriesList",
-          "description": "Array of series instances in chart",
-          "type": "object",
-          "default": "[]"
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "\"vertical\""
         }
       ],
       "events": [

package/lib/interactive-chart/custom-elements.md

@@ -0,0 +1,31 @@
+# ef-interactive-chart
+
+A charting component that allows you to create several use cases of financial chart.
+By lightweight-charts library.
+
+## Properties
+
+| Property             | Attribute              | Type                         | Default    | Description                                     |
+|----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `config`             | `config`               | `InteractiveChartConfig`     | null       | Chart configurations for init chart             |
+| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false      | Hide jump to latest data button                 |
+| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false      | Hide legend                                     |
+| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` | "vertical" | Set legend style i.e. `horizontal`, `vertical`. |
+
+## Methods
+
+| Method   | Type         | Description                                    |
+|----------|--------------|------------------------------------------------|
+| `colors` | `(): object` | List of available chart colors from the theme. |
+
+## Events
+
+| Event         | Description                          |
+|---------------|--------------------------------------|
+| `initialized` | Dispatched when chart is initialized |
+
+## Slots
+
+| Name     | Description                                 |
+|----------|---------------------------------------------|
+| `legend` | Slot to use for implementing custom legend. |

package/lib/interactive-chart/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
-import type { RGBColor, HSLColor } from '@refinitiv-ui/utils';
+import type { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
+import type { RGBColor, HSLColor } from '@refinitiv-ui/utils/lib/color.js';
 declare type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
 declare type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
 declare type SeriesData = LineData[] | BarData[] | HistogramData[];

package/lib/interactive-chart/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues, ElementSize } from '@refinitiv-ui/core';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues, ElementSize } from '@refinitiv-ui/core';
 import { IChartApi, MouseEventParams } from 'lightweight-charts';
-import '../tooltip';
+import '../tooltip/index.js';
 import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesList, SeriesDataItem } from './helpers/types';
-import { LegendStyle } from './helpers/types';
-export { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
+import { LegendStyle } from './helpers/types.js';
+export type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
@@ -43,9 +43,9 @@ export declare class InteractiveChart extends ResponsiveElement {
     deprecatedLegendStyle: LegendStyle | undefined;
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value: LegendStyle);
     get legendStyle(): LegendStyle;
@@ -54,7 +54,10 @@ export declare class InteractiveChart extends ResponsiveElement {
      * when deprecated features are used.
     */
     private deprecationNotice;
-    /** Array of series instances in chart */
+    /**
+     * @ignore
+     * Array of series instances in chart
+     */
     seriesList: SeriesList[];
     private jumpButtonInitialized;
     private legendInitialized;
@@ -351,12 +354,12 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     colors(): 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;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/interactive-chart/index.js

@@ -1,18 +1,15 @@
-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;
-};
 var InteractiveChart_1;
-import { ResponsiveElement, html, css, customElement, property, query, DeprecationNotice } from '@refinitiv-ui/core';
-import { color as parseColor } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css, DeprecationNotice } 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 as parseColor } from '@refinitiv-ui/utils/lib/color.js';
 import { createChart as chart } from 'lightweight-charts';
-import { VERSION } from '../';
-import '../tooltip';
-import { LegendStyle } from './helpers/types';
-import { merge } from './helpers/merge';
-export { LegendStyle };
+import '../tooltip/index.js';
+import { LegendStyle } from './helpers/types.js';
+import { merge } from './helpers/merge.js';
 const NOT_AVAILABLE_DATA = 'N/A';
 const NO_DATA_POINT = '--';
 /**
@@ -42,7 +39,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * when deprecated features are used.
         */
         this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
-        /** Array of series instances in chart */
+        /**
+         * @ignore
+         * Array of series instances in chart
+         */
         this.seriesList = [];
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
@@ -119,15 +119,15 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value) {
         const oldValue = this.legendStyle;
         if (oldValue !== value) {
             this._legendStyle = value;
-            void this.requestUpdate('legend-style', oldValue);
+            this.requestUpdate('legend-style', oldValue);
         }
     }
     get legendStyle() {
@@ -1011,7 +1011,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         return colors;
     }
     /**
-    * 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/item/custom-elements.json

@@ -58,7 +58,7 @@
           "name": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -114,12 +114,12 @@
           "type": "string | null"
         },
         {
-          "name": "highlightable",
+          "name": "highlightable (readonly)",
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
           "type": "boolean"
         },
         {
-          "name": "isTruncated",
+          "name": "isTruncated (readonly)",
           "description": "Getter returning if the label is truncated",
           "type": "boolean"
         },
@@ -135,7 +135,7 @@
           "attribute": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "slots": [

package/lib/item/custom-elements.md

@@ -0,0 +1,29 @@
+# ef-item
+
+Used as a basic building block to compose complex custom elements,
+additionally it can be used by applications
+to create simple menus or navigation panels.
+
+## Properties
+
+| Property                   | Attribute     | Type               | Default | Description                                      |
+|----------------------------|---------------|--------------------|---------|--------------------------------------------------|
+| `disabled`                 | `disabled`    | `boolean`          | false   | Set disabled state.                              |
+| `for`                      | `for`         | `string \| null`   | null    | Specifies which element an item is bound to      |
+| `highlightable (readonly)` |               | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
+| `highlighted`              | `highlighted` | `boolean`          | false   | Highlight the item                               |
+| `icon`                     | `icon`        | `string \| null`   | null    | Set the icon name from the ef-icon list          |
+| `isTruncated (readonly)`   |               | `boolean`          |         | Getter returning if the label is truncated       |
+| `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `multiple`                 | `multiple`    | `boolean`          | false   | Is the item part of a multiple selection         |
+| `selected`                 | `selected`    | `boolean`          | false   | Indicates that the item is selected              |
+| `subLabel`                 | `sub-label`   | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `type`                     | `type`        | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
+| `value`                    | `value`       | `string`           | ""      | The content of this attribute represents the value of the item. |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Used to render the content on the left of the label. |
+| `right` | Used to render the content on the right of the label. |

package/lib/item/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { DataItem } from '@refinitiv-ui/utils';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection.js';
 export declare type ItemType = 'text' | 'header' | 'divider';
 interface CommonItem extends DataItem {
     /**

package/lib/item/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
-import '../checkbox';
-import { ItemType } from './helpers/types';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { ItemType } from './helpers/types';
+import '../icon/index.js';
+import '../checkbox/index.js';
 export * from './helpers/types';
 /**
  * Used as a basic building block to compose complex custom elements,
@@ -10,7 +10,7 @@ export * from './helpers/types';
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -25,10 +25,11 @@ export declare class Item extends ControlElement {
      */
     static get version(): string;
     /**
-     * @returns `CSSResult` that will be used to style the host,
+     * `CSSResultGroup` that will be used to style the host,
      * slotted children and the internal template of the element.
+     * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * The text for the label indicating the meaning of the item.
      * By having both `label` and content, `label` always takes priority
@@ -43,10 +44,19 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
+    private _selected;
     /**
      * Indicates that the item is selected
+     * @param value selected value
+     * @default false
      */
-    selected: boolean;
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Aria indicating current select state
+     * @ignore
+     */
+    ariaSelected: string;
     /**
      * Is the item part of a multiple selection
      */