@refinitiv-ui/elements 5.10.1 → 5.12.0-alpha.0

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

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

package/lib/tornado-chart/index.js

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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/elements/tree-item.d.ts

@@ -1,96 +0,0 @@
-import { JSXInterface } from '../../jsx';
-import { TemplateResult, ControlElement, PropertyValues } from '@refinitiv-ui/core';
-import '../../icon/index.js';
-import '../../checkbox/index.js';
-import type { TreeDataItem } from '../helpers/types';
-import { CheckedState } from '../managers/tree-manager.js';
-/**
- * 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

@@ -1,179 +0,0 @@
-import { __decorate } from "tslib";
-import { html, ControlElement } 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 { VERSION } from '../../version.js';
-import '../../icon/index.js';
-import { preload } from '../../icon/index.js';
-import '../../checkbox/index.js';
-import { CheckedState } from '../managers/tree-manager.js';
-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" icon="${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 };

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

@@ -1,202 +0,0 @@
-import { JSXInterface } from '../../jsx';
-import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { List } from '../../list/index.js';
-import { TreeRenderer } from '../helpers/renderer.js';
-import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
-import { TreeManagerMode } from '../managers/tree-manager.js';
-/**
- * Displays a tree structure
- * to be used for menus and group selections
- *
- * @fires value-changed - Fired when the users changed selection item.
- * @fires expanded-changed - Fired when an item's expanded state has changed.
- *
- * @attr {boolean} [stateless=false] - Disable selections
- * @prop {boolean} [stateless=false] - Disable selections
- *
- */
-export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T> {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * Tree manager used for manipulation
-     */
-    private manager;
-    /**
-     * Allows multiple items to be selected
-     */
-    multiple: boolean;
-    /**
-     * Breaks the relationship when multiple
-     * selection mode is enabled
-     */
-    noRelation: boolean;
-    /**
-     * Query string applied to tree
-     */
-    query: string;
-    /**
-     * Custom filter for static data
-     * @type {TreeFilter<T> | null}
-     * @ignore set to protected for now and need to discuss before set to public API
-     */
-    protected filter: TreeFilter<T> | null;
-    /**
-     * Renderer used for generating tree items
-     * @type {TreeRenderer}
-     */
-    renderer: TreeRenderer;
-    /**
-     * Expands all groups
-     * @returns {void}
-     */
-    expandAll(): void;
-    /**
-     * Collapses all groups
-     * @returns {void}
-     */
-    collapseAll(): void;
-    /**
-     * Checks all editable items
-     * @returns {void}
-     */
-    checkAll(): void;
-    /**
-     * Unchecks all editable items
-     * @returns {void}
-     */
-    uncheckAll(): void;
-    /**
-     * @override
-     * @ignore
-     */
-    selectItem(item: T): boolean;
-    /**
-     * Dispatches an event, detailing which item has recently changed it's expanded state.
-     * @param item Data item of which the expanded property changed
-     * @returns {void}
-     */
-    protected dispatchExpandedChangedEvent(item: T): void;
-    /**
-     * Handles tap event when composed path contains
-     * an element with an `expand-toggle` attribute.
-     * @param event Tap event to try and handle
-     * @returns True or False depending if the event was handled
-     */
-    protected handleExpandCollapse(event: TapEvent): boolean;
-    /**
-     * @override
-     */
-    protected onTap(event: TapEvent): void;
-    /**
-     * @override
-     */
-    protected onKeyDown(event: KeyboardEvent): void;
-    /**
-     * Performs left arrow keyboard action,
-     * collapsing a group item if possible.
-     * @returns {void}
-     */
-    protected left(): void;
-    /**
-     * Performs right arrow keyboard action,
-     * expanding a group item if possible.
-     * @returns {void}
-     */
-    protected right(): void;
-    /**
-     * Toggles the expanded state of an item.
-     * Executed when a user taps on an item to expand/collapse the group.
-     * @param item Original data item
-     * @returns {void}
-     */
-    protected toggleExpandedState(item: T): void;
-    /**
-     * @override
-     */
-    protected queryItems(engine: (item: T, composer: CollectionComposer<T>) => boolean): readonly T[];
-    /**
-     * @override
-     */
-    protected queryItemsByPropertyValue<K extends keyof T>(property: K, value: T[K]): readonly T[];
-    /**
-     * @override
-     */
-    protected update(changedProperties: PropertyValues): void;
-    /**
-     * Filter the internal items by query changes items' hidden state
-     * @returns {void}
-     */
-    protected filterItems(): void;
-    /**
-     * Utility method
-     * Adds descendants for each item passed
-     * @param items List of child items
-     * @returns {void}
-     */
-    protected addItemDescendantsToRender(items: T[]): void;
-    /**
-     * Utility method
-     * Add nested children of item list
-     * @param items List of items
-     * @param excludeItems List of exclude items
-     * @param [includeHidden=false] Include hidden items
-     * @returns {void}
-     */
-    protected addNestedItemsToRender(items: readonly T[], excludeItems: readonly T[], includeHidden?: boolean): void;
-    /**
-     * Utility method
-     * Adds ancestors for each item passed and expand
-     * @param items List of child items
-     * @returns {void}
-     */
-    protected addExpandedAncestorsToRender(items: T[]): void;
-    /**
-     * Utility method
-     * Adds parent and expands
-     * @param ancestor parent item
-     * @returns {void}
-     */
-    protected addExpandedAncestorToRender(ancestor: T): void;
-    /**
-     * Selected items in tree
-     * @override
-     * @type {string[]}
-     * @default []
-     */
-    get values(): string[];
-    set values(value: string[]);
-    /**
-     * Data object to be used for creating tree
-     * @override
-     * @type {TreeData<T>}
-     */
-    get data(): TreeData<T>;
-    set data(data: TreeData<T>);
-    /**
-     * @override
-     */
-    protected get renderItems(): readonly T[];
-    /**
-     * Mode to use in the tree manager
-     */
-    protected get mode(): TreeManagerMode;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-tree': Tree;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-tree': Partial<Tree> | JSXInterface.HTMLAttributes<Tree>;
-    }
-  }
-}
-
-export {};