@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/tornado-chart/elements/tornado-item.js

@@ -0,0 +1,209 @@
+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, property, customElement, ifDefined } from '@refinitiv-ui/core';
+import '../../progress-bar';
+import '../../layout';
+import { VERSION } from '../../';
+/**
+ * A part of <ef-tornado-chart />,
+ * consists mainly of primary, secondary ef-progress-bar and labels.
+ */
+let TornadoItem = class TornadoItem extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Internal vertical flag value, used only by its getter and setter
+         */
+        this._vertical = false;
+        /**
+         * Display highlight styles onto the item
+         */
+        this.highlighted = false;
+        /**
+         * Primary bar chart's value
+         */
+        this.primaryValue = null;
+        /**
+         * Primary bar chart's label
+         */
+        this.primaryLabel = null;
+        /**
+         * Secondary bar chart's value
+         */
+        this.secondaryValue = null;
+        /**
+         * Secondary bar chart's label
+         */
+        this.secondaryLabel = null;
+        /**
+         * A flag to determine container layout state
+         */
+        this.isContainer = false;
+        /**
+         * Primary bar chart alignment
+         */
+        this.primaryBarAlignment = 'right';
+        /**
+         * Secondary bar chart alignment
+         */
+        this.secondaryBarAlignment = 'left';
+        /**
+         * Label container's size
+         */
+        this.labelLayoutSize = '25%';
+        /**
+         * Primary layout flex basis size
+         */
+        this.primaryLayoutFlexBasis = '40%';
+        /**
+         * Secondary layout flex basis size
+         */
+        this.secondaryLayoutFlexBasis = '40%';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Getter for toggling bar chart alignment
+     * @returns {boolean} true if component is in vertical mode
+     */
+    get vertical() {
+        return this._vertical;
+    }
+    /**
+     * Setter for toggling bar chart alignment
+     * @param {boolean} value vertical
+     */
+    set vertical(value) {
+        const previousValue = this._vertical;
+        if (value === previousValue) {
+            return;
+        }
+        this._vertical = value;
+        /**
+         * Observe when vertical property changes,
+         * then toggle between alignments
+         */
+        if (value) {
+            this.showVerticalMode();
+        }
+        else {
+            this.showHorizontalMode();
+        }
+        void this.requestUpdate('vertical', previousValue);
+    }
+    /**
+     * Triggers vertical layout mode
+     * @returns {void}
+     */
+    showVerticalMode() {
+        this.isContainer = true;
+        this.labelLayoutSize = undefined;
+        this.primaryLayoutFlexBasis = undefined;
+        this.secondaryLayoutFlexBasis = undefined;
+        this.primaryBarAlignment = 'left';
+        this.secondaryBarAlignment = 'left';
+    }
+    /**
+     * Triggers horizontal layout mode
+     * @returns {void}
+     */
+    showHorizontalMode() {
+        this.isContainer = false;
+        this.labelLayoutSize = '25%';
+        this.primaryLayoutFlexBasis = '40%';
+        this.secondaryLayoutFlexBasis = '40%';
+        this.primaryBarAlignment = 'right';
+        this.secondaryBarAlignment = 'left';
+    }
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      :host([vertical]) [part=seperator] {
+        display: none;
+      }
+      :host([vertical]) [part=container] {
+        align-items: inherit;
+      }
+      [part=container] {
+        padding: 0;
+        align-items: center;
+      }
+      [part=primary-bar],
+      [part=secondary-bar] {
+        width: 100%;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <ef-layout part="container" flex nowrap ?container="${this.isContainer}">
+        <ef-layout flex size="${ifDefined(this.labelLayoutSize)}">
+          <div part="label">
+            <slot></slot>
+          </div>
+        </ef-layout>
+        <ef-layout flex basis="${ifDefined(this.primaryLayoutFlexBasis)}">
+          <ef-progress-bar
+            part="primary-bar"
+            alignment=${this.primaryBarAlignment}
+            label="${ifDefined(this.primaryLabel || undefined)}"
+            value="${ifDefined(this.primaryValue || undefined)}">
+          </ef-progress-bar>
+        </ef-layout>
+        <div part="seperator"></div>
+        <ef-layout flex basis="${ifDefined(this.secondaryLayoutFlexBasis)}">
+          <ef-progress-bar
+            part="secondary-bar"
+            alignment="${this.secondaryBarAlignment}"
+            label="${ifDefined(this.secondaryLabel || undefined)}"
+            value="${ifDefined(this.secondaryValue || undefined)}">
+          </ef-progress-bar>
+        </ef-layout>
+      </ef-layout>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TornadoItem.prototype, "vertical", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TornadoItem.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: String, attribute: 'primary-value' })
+], TornadoItem.prototype, "primaryValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'primary-label' })
+], TornadoItem.prototype, "primaryLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'secondary-value' })
+], TornadoItem.prototype, "secondaryValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'secondary-label' })
+], TornadoItem.prototype, "secondaryLabel", void 0);
+TornadoItem = __decorate([
+    customElement('ef-tornado-item')
+], TornadoItem);
+export { TornadoItem };

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

@@ -0,0 +1,2 @@
+export { TornadoChart } from './elements/tornado-chart';
+export { TornadoItem } from './elements/tornado-item';

package/lib/tornado-chart/index.js

@@ -0,0 +1,2 @@
+export { TornadoChart } from './elements/tornado-chart';
+export { TornadoItem } from './elements/tornado-item';

package/lib/tornado-chart/themes/halo/dark/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/dark';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#6678FF;--secondary-color:#FFFFFF;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #6678FF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(204,204,204,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #404040}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #404040;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/halo/light/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/light';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#334BFF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#334BFF;--secondary-color:#000000;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #334BFF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(13,13,13,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d9d9d9}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d9d9d9;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/charcoal/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#FF9933;--secondary-color:#b35900;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #FF9933);--secondary-color:var(\'--secondary-color\', #b35900);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(194,194,194,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #0a0a0a}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #0a0a0a;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/pearl/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/pearl';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#EE7600;--secondary-color:#EE7600;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(72,72,72,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d5d8db}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d5d8db;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tree/custom-elements.json

@@ -0,0 +1,100 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-tree",
+      "description": "Displays a tree structure\nto be used for menus and group selections",
+      "attributes": [
+        {
+          "name": "multiple",
+          "description": "Allows multiple items to be selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-relation",
+          "description": "Breaks the relationship when multiple\nselection mode is enabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "stateless",
+          "description": "Disable selections",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Allows multiple items to be selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noRelation",
+          "attribute": "no-relation",
+          "description": "Breaks the relationship when multiple\nselection mode is enabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "renderer",
+          "description": "Renderer used for generating tree items",
+          "type": "TreeRenderer",
+          "default": "\"new TreeRenderer(this)\""
+        },
+        {
+          "name": "values",
+          "description": "Selected items in tree",
+          "type": "string[]"
+        },
+        {
+          "name": "data",
+          "description": "Data object to be used for creating tree",
+          "type": "TreeData<T>"
+        },
+        {
+          "name": "stateless",
+          "attribute": "stateless",
+          "description": "Disable selections",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Fired when the users changed selection item."
+        },
+        {
+          "name": "expanded-changed",
+          "description": "Fired when an item's expanded state has changed."
+        }
+      ],
+      "methods": [
+        {
+          "name": "expandAll",
+          "description": "Expands all groups",
+          "params": []
+        },
+        {
+          "name": "collapseAll",
+          "description": "Collapses all groups",
+          "params": []
+        },
+        {
+          "name": "checkAll",
+          "description": "Checks all editable items",
+          "params": []
+        },
+        {
+          "name": "uncheckAll",
+          "description": "Unchecks all editable items",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

package/lib/tree/elements/tree-item.d.ts

@@ -0,0 +1,96 @@
+import { JSXInterface } from '../../jsx';
+import { TemplateResult, ControlElement, PropertyValues } from '@refinitiv-ui/core';
+import '../../icon';
+import '../../checkbox';
+import { TreeDataItem } from '../helpers/types';
+import { CheckedState } from '../managers/tree-manager';
+/**
+ * Displays a tree list item.
+ * Groups display expansion arrows.
+ */
+export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Checked state of the item
+     */
+    checkedState: CheckedState;
+    /**
+     * Is the item a parent and should it show an expansion toggle?
+     */
+    parent: boolean;
+    /**
+     * Display in multiple selection mode
+     */
+    multiple: boolean;
+    /**
+     * Expanded state of the item
+     */
+    expanded: boolean;
+    /**
+     * Depth of the item
+     */
+    depth: number;
+    /**
+     * Label of the item
+     */
+    label: string;
+    /**
+     * Icon of the item
+     */
+    icon: string;
+    /**
+     * Original data item, used for interacting with the tree manager
+     */
+    item: T;
+    /**
+     * Highlighted state of the item.
+     * This is for showing which item is currently being interacted with.
+     */
+    highlighted: boolean;
+    /**
+     * Template for rendering the indentation element
+     */
+    protected get indentTemplate(): TemplateResult;
+    /**
+     * Template for rendering the toggle
+     *
+     * ! expand-toggle is required for automatically toggling expanded state
+     */
+    protected get toggleTemplate(): TemplateResult;
+    /**
+     * Template for rendering the checkbox
+     */
+    protected get checkboxTemplate(): TemplateResult;
+    /**
+     * Template for rendering the icon
+     */
+    protected get iconTemplate(): TemplateResult;
+    /**
+     * Is the item fully checked?
+     */
+    protected get checked(): boolean;
+    /**
+     * Is the checked state indeterminate?
+     */
+    protected get indeterminate(): boolean;
+    protected update(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tree-item': TreeItem;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tree-item': Partial<TreeItem> | JSXInterface.HTMLAttributes<TreeItem>;
+    }
+  }
+}
+
+export {};

package/lib/tree/elements/tree-item.js

@@ -0,0 +1,182 @@
+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 { customElement, html, property, ControlElement } from '@refinitiv-ui/core';
+import '../../icon';
+import { preload } from '../../icon';
+import '../../checkbox';
+import { CheckedState } from '../managers/tree-manager';
+import { VERSION } from '../../';
+preload('right');
+const emptyTemplate = html ``;
+/**
+ * Displays a tree list item.
+ * Groups display expansion arrows.
+ */
+let TreeItem = class TreeItem extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Checked state of the item
+         */
+        this.checkedState = CheckedState.UNCHECKED;
+        /**
+         * Is the item a parent and should it show an expansion toggle?
+         */
+        this.parent = false;
+        /**
+         * Display in multiple selection mode
+         */
+        this.multiple = false;
+        /**
+         * Expanded state of the item
+         */
+        this.expanded = false;
+        /**
+         * Depth of the item
+         */
+        this.depth = 0;
+        /**
+         * Label of the item
+         */
+        this.label = '';
+        /**
+         * Icon of the item
+         */
+        this.icon = '';
+        /**
+         * Highlighted state of the item.
+         * This is for showing which item is currently being interacted with.
+         */
+        this.highlighted = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Template for rendering the indentation element
+     */
+    get indentTemplate() {
+        return this.depth ? html `<div part="indent" style="width:${this.depth}em"></div>` : emptyTemplate;
+    }
+    /**
+     * Template for rendering the toggle
+     *
+     * ! expand-toggle is required for automatically toggling expanded state
+     */
+    get toggleTemplate() {
+        return html `
+    <div
+    expand-toggle
+    part="toggle"
+    style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
+      <ef-icon part="toggle-icon${this.expanded ? ' toggle-icon-expanded' : ''}" icon="right"></ef-icon>
+    </div>
+    `;
+    }
+    /**
+     * Template for rendering the checkbox
+     */
+    get checkboxTemplate() {
+        if (!this.multiple) {
+            return emptyTemplate;
+        }
+        return html `
+    <ef-checkbox
+    part="checkbox"
+    tabindex="-1"
+    .disabled="${this.disabled}"
+    .readonly="${this.readonly}"
+    .indeterminate="${this.indeterminate}"
+    .checked="${this.checked}"
+    style="pointer-events:none"></ef-checkbox>
+    `;
+    }
+    /**
+     * Template for rendering the icon
+     */
+    get iconTemplate() {
+        if (typeof this.icon === 'undefined') {
+            return emptyTemplate;
+        }
+        return html `<ef-icon part="label-icon" src="${this.icon}"></ef-icon>`;
+    }
+    /**
+     * Is the item fully checked?
+     */
+    get checked() {
+        return this.checkedState === CheckedState.CHECKED;
+    }
+    /**
+     * Is the checked state indeterminate?
+     */
+    get indeterminate() {
+        return this.checkedState === CheckedState.INDETERMINATE;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checkedState')) {
+            switch (this.checkedState) {
+                case CheckedState.CHECKED:
+                    this.setAttribute('selected', '');
+                    break;
+                case CheckedState.INDETERMINATE:
+                    this.setAttribute('selected', 'indeterminate');
+                    break;
+                default:
+                    this.removeAttribute('selected');
+            }
+        }
+    }
+    render() {
+        return html `
+      ${this.indentTemplate}
+      ${this.toggleTemplate}
+      ${this.checkboxTemplate}
+      ${this.iconTemplate}
+      <div part="label">
+        <slot>${this.label}</slot>
+      </div>
+  `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], TreeItem.prototype, "checkedState", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'group' })
+], TreeItem.prototype, "parent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TreeItem.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItem.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], TreeItem.prototype, "depth", void 0);
+__decorate([
+    property({ type: String })
+], TreeItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TreeItem.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: false })
+], TreeItem.prototype, "item", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], TreeItem.prototype, "highlighted", void 0);
+TreeItem = __decorate([
+    customElement('ef-tree-item', {
+        alias: 'coral-tree-item'
+    })
+], TreeItem);
+export { TreeItem };