@refinitiv-ui/elements 6.0.1 → 6.0.4

package/lib/item/index.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
 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';
+import type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData } from './helpers/types';
+export type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData };
 /**
  * Used as a basic building block to compose complex custom elements,
  * additionally it can be used by applications

package/lib/item/index.js

@@ -6,7 +6,6 @@ import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../checkbox/index.js';
-export * from './helpers/types';
 const isAllWhitespaceTextNode = (node) => node.nodeType === document.TEXT_NODE
     && !node.textContent?.trim();
 /**

package/lib/item/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/checkbox/themes/halo/dark';
 
-elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:600;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');

package/lib/item/themes/halo/light/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/checkbox/themes/halo/light';
 
-elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:600;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');

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

@@ -0,0 +1,30 @@
+import { JSXInterface } from '../../jsx';
+import { Item } from '../../item/index.js';
+/**
+ * Extending from Item Class to provide ability to override tabIndex
+ */
+export declare class ListItem extends Item {
+    /**
+     * Overriding Item tabIndex value, list should have only one focusable point.
+     */
+    protected readonly defaultTabIndex: number | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-list-item': ListItem;
+    }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-list-item': ListItem;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-list-item': Partial<ListItem> | JSXInterface.HTMLAttributes<ListItem>;
+    }
+  }
+}
+
+export {};

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

@@ -0,0 +1,19 @@
+import { __decorate } from "tslib";
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { Item } from '../../item/index.js';
+/**
+ * Extending from Item Class to provide ability to override tabIndex
+ */
+let ListItem = class ListItem extends Item {
+    constructor() {
+        super(...arguments);
+        /**
+         * Overriding Item tabIndex value, list should have only one focusable point.
+         */
+        this.defaultTabIndex = null;
+    }
+};
+ListItem = __decorate([
+    customElement('ef-list-item')
+], ListItem);
+export { ListItem };

package/lib/list/elements/list.d.ts

@@ -0,0 +1,307 @@
+import { JSXInterface } from '../../jsx';
+import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { ItemData } from '../../item';
+import type { ListData } from '../helpers/types';
+import { ListRenderer } from '../helpers/renderer.js';
+import './list-item.js';
+/**
+ * Key direction
+ */
+declare enum Direction {
+    UP = -1,
+    DOWN = 1
+}
+/**
+ * Provides listing and immutable selection
+ * @fires value-changed - Dispatched when value changes
+ */
+export declare class List<T extends DataItem = ItemData> extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * Used to timestamp renders.
+     * This enables diff checking against item updates,
+     * rendering only items which have updated since the last render cycle.
+     */
+    private renderTimestamp;
+    /**
+     * Requests an update after a composer modification.
+     * @returns Update promise.
+     */
+    private modificationUpdate;
+    /**
+     * Item map; used to link element nodes to data items.
+     */
+    private itemMap;
+    /**
+     * Element map; used to link data items to element nodes.
+     */
+    private elementMap;
+    /**
+     * Composer used to query and modify item state.
+     */
+    protected composer: CollectionComposer<T>;
+    /**
+     * Element focus delegation.
+     * Set to `false` and relies on native focusing.
+     */
+    readonly delegatesFocus = false;
+    /**
+     * Renderer used to render list item elements
+     * @type {ListRenderer}
+     */
+    renderer: ListRenderer;
+    /**
+     * Disable selections
+     */
+    stateless: boolean;
+    /**
+     * Allow multiple selections
+     */
+    multiple: boolean;
+    /**
+     * The data object, used to render the list.
+     * @type {ListData}
+     * @default null
+     */
+    get data(): ListData<T>;
+    set data(value: ListData<T>);
+    private _data;
+    /**
+     * Returns the first selected item value.
+     * Use `values` when multiple selection mode is enabled.
+     * @default -
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Returns a values collection of the currently
+     * selected item values
+     * @type {string[]}
+     * @default []
+     * @readonly
+     */
+    get values(): string[];
+    set values(values: string[]);
+    /**
+     * Selects an item in the list
+     * @param item Data Item or Item Element
+     * @returns If a selection has been made or not
+     */
+    selectItem(item?: T | HTMLElement): boolean;
+    /**
+     * Navigate up through the list items
+     * @returns {void}
+     */
+    up(): void;
+    /**
+     * Navigate down through the list items
+     * @returns {void}
+     */
+    down(): void;
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first(): void;
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last(): void;
+    /**
+     * Proxy for querying the composer
+     * @param engine composer querying engine
+     * @returns Collection of queried items
+     */
+    protected queryItems(engine: (item: T, composer: CollectionComposer<T>) => boolean): readonly T[];
+    /**
+     * Proxy for querying the composer by property and value
+     * @param name Property name
+     * @param value Property value
+     * @returns Collection of queried items
+     */
+    protected queryItemsByPropertyValue<K extends keyof T>(name: K, value: T[K]): readonly T[];
+    /**
+     * Gets the associated element for the data item provided,
+     * if there is one available.
+     * @param item Item to map element to
+     * @returns Associated element
+     */
+    protected elementFromItem(item: T): HTMLElement | undefined;
+    /**
+     * Gets the associated data item for the provided element,
+     * if there is one available.
+     * @param element Element to map item to
+     * @returns Associated date item
+     */
+    protected itemFromElement(element: HTMLElement): T | undefined;
+    /**
+     * Tries to find the next focusable element.
+     * @param direction Direction to search
+     * @param element Starting element
+     * @returns Next logical element to focus
+     */
+    protected getNextFocusableItem(direction: Direction, element?: HTMLElement): HTMLElement | undefined;
+    /**
+     * Tries to find the next highlight item
+     * @param direction Direction to search
+     * @returns A data item, if found.
+     */
+    protected getNextHighlightItem(direction: Direction): T | undefined;
+    /**
+     * Clears any highlighted item
+     * @returns {void}
+     */
+    protected clearHighlighted(): void;
+    /**
+     * Highlights a single item.
+     * Used for navigation.
+     * @param item Item to highlight
+     * @param scrollToItem Scroll the item into view?
+     * @returns {void}
+     */
+    protected highlightItem(item?: T, scrollToItem?: boolean): void;
+    /**
+     * Gets the available tabbable elements
+     */
+    protected get tabbableItems(): HTMLElement[];
+    /**
+     * Returns the current focused element
+     */
+    protected get highlightElement(): HTMLElement | null;
+    /**
+     * Tries to select the current highlighted element
+     * @returns {void}
+     */
+    protected triggerActiveItem(): void;
+    /**
+     * Scroll to list item element
+     * @param item Data item to scroll to
+     * @returns {void}
+     */
+    scrollToItem(item: T): void;
+    /**
+     * Handles key input
+     * @param event Key down event object
+     * @returns {void}
+     */
+    protected onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle list on tap
+     * Typically it will select an item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    protected onTap(event: TapEvent): void;
+    /**
+     * Handles mouse move
+     * Typically it will highlight an item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    protected onMouse(event: Event): void;
+    /**
+     * Handles item focus out
+     * Typically it will remove highlighting
+     * @returns {void}
+     */
+    protected onBlur(): void;
+    /**
+     * Tries to find a known item element,
+     * from an event target
+     * @param target Event target
+     * @returns Found element, if available
+     */
+    protected findItemElementFromTarget(target: EventTarget | HTMLElement | null): HTMLElement | null;
+    /**
+     * Clears the current selected items
+     * @returns {void}
+     */
+    protected clearSelection(): void;
+    /**
+     * Queries and returns all renderable items.
+     * @returns Collection of renderable items
+     */
+    protected get renderItems(): readonly T[];
+    /**
+     * Proxy for creating list item elements.
+     * Allows for a mapping to be created between
+     * Data Item and Item Element.
+     * @param item Data item context
+     * @param recyclableElements Child elements available for reuse
+     * @returns List item element
+     */
+    private createListItem;
+    /**
+     * Clears all item-element and timestamp maps
+     * @returns {void}
+     */
+    private clearMaps;
+    /**
+     * Fire value changed event
+     * @returns {void}
+     */
+    private fireSelectionUpdate;
+    /**
+     * Calculates what elements can be recycled safely
+     * @param renderItems Current items to render
+     * @returns Collection of elements to be recycled
+     */
+    private calculateRecyclableElements;
+    /**
+     * Renders updates to light DOM
+     * @returns {void}
+     */
+    protected renderLightDOM(): void;
+    /**
+     * Invoked when the element is first updated. Implement to perform one time work on the element after update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
+    protected firstUpdated(changeProperties: PropertyValues): void;
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
+    protected willUpdate(changeProperties: PropertyValues): void;
+    /**
+     * 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(): CSSResultGroup;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-list': List;
+    }
+}
+export {};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-list': List;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-list': Partial<List> | JSXInterface.HTMLAttributes<List>;
+    }
+  }
+}
+
+export {};