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

package/lib/accordion/index.js

@@ -1,136 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { VERSION } from '../version.js';
-import { Collapse } from '../collapse/index.js';
-/**
- * Finds closest accordion parent of element.
- * Created, because IE11 doesn't support closest() method.
- * @param element - potential child of accordion
- * @returns found accordion parent or null, if not found
- */
-const getClosestAccordion = (element) => {
-    while (element) {
-        if (element.localName === 'ef-accordion') {
-            return element;
-        }
-        else {
-            element = element.parentElement;
-        }
-    }
-    return null;
-};
-/**
- * Checks if specified element is a direct child of current accordion.
- * @param element - child that checked
- * @param accordion - parent accordion
- * @returns is current accordion has child accordion that wraps checked element
- */
-const isDirectAccordionChild = (element, accordion) => {
-    return getClosestAccordion(element) === accordion;
-};
-/**
- * Used to display a group of `Collapse` control.
- * Only one item will be able to expand by default but you can customize its behavior.
- *
- * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
- * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
- *
- */
-let Accordion = class Accordion extends Collapse {
-    constructor() {
-        super(...arguments);
-        /**
-         * Allow multiple sections expand at the same time
-         */
-        this.autoCollapseDisabled = false;
-        /**
-         * Add spacing to content section in all collapse items
-         */
-        this.spacing = false;
-        /**
-         * handle bubbled clicks from items
-         * @param event the click event object
-         * @return void
-         */
-        this.handleClick = (event) => {
-            if (!this.autoCollapseDisabled && isDirectAccordionChild(event.target, this)) {
-                this.processChildrenOnClick(event.target);
-                event.stopPropagation();
-            }
-        };
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * 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() {
-        return css `
-      :host {
-        display: block;
-      }
-    `;
-    }
-    /**
-     * Called once after the component is first rendered
-     * @param changedProperties map of changed properties with old values
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.addEventListener('expanded-changed', this.handleClick, true);
-    }
-    /**
-     * get a list of items
-     * @returns array of accordion items
-     */
-    getChildItems() {
-        return [...this.querySelectorAll('ef-collapse')]
-            .filter((el) => isDirectAccordionChild(el, this));
-    }
-    /**
-     * collapse non selected child items on click
-     * @param target currently selected item
-     * @return void
-     */
-    processChildrenOnClick(target) {
-        const children = this.getChildItems();
-        for (let i = 0, len = children.length; i < len; ++i) {
-            if (children[i] !== target) {
-                children[i].expanded = false;
-            }
-        }
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    render() {
-        return html `
-      <slot></slot>
-    `;
-    }
-};
-__decorate([
-    property({ type: Boolean, attribute: 'auto-collapse-disabled' })
-], Accordion.prototype, "autoCollapseDisabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Accordion.prototype, "spacing", void 0);
-Accordion = __decorate([
-    customElement('ef-accordion', {
-        alias: 'coral-accordion'
-    })
-], Accordion);
-export { Accordion };

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/collapse/themes/halo/dark';
-
-elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #404040}');

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/collapse/themes/halo/light';
-
-elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d9d9d9}');

package/lib/accordion/themes/solar/charcoal/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/collapse/themes/solar/charcoal';
-
-elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #0a0a0a}');

package/lib/accordion/themes/solar/pearl/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/collapse/themes/solar/pearl';
-
-elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d5d8db}');

package/lib/appstate-bar/index.d.ts

@@ -1,65 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import '../icon/index.js';
-/**
- * Used to display at the top of application to provide a status or information.
- * @slot right - place custom content on the right of bar.
- *
- * @fires clear - fired when clear button is clicked
- */
-export declare class AppstateBar extends BasicElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     *
-     * @returns CSS template
-     */
-    static get styles(): CSSResultGroup;
-    /**
-     * Text to display in heading section.
-     */
-    heading: string;
-    /**
-     * (optional) Type of state bar. Supported value are `info`, `highlight`.
-     */
-    state: 'info' | 'highlight' | null;
-    /**
-     * Invoked whenever the element is updated
-     * @param {PropertyValues} changedProperties Map of changed properties with old values
-     * @returns {void}
-     */
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * Hide the element when clear button is clicked
-     * @param {Event} event - event params
-     * @fires AppstateBar#clear
-     * @returns {void}
-     */
-    private clear;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-appstate-bar': AppstateBar;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-appstate-bar': Partial<AppstateBar> | JSXInterface.HTMLAttributes<AppstateBar>;
-    }
-  }
-}
-
-export {};

package/lib/appstate-bar/index.js

@@ -1,100 +0,0 @@
-import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { VERSION } from '../version.js';
-import '../icon/index.js';
-/**
- * Used to display at the top of application to provide a status or information.
- * @slot right - place custom content on the right of bar.
- *
- * @fires clear - fired when clear button is clicked
- */
-let AppstateBar = class AppstateBar extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Text to display in heading section.
-         */
-        this.heading = '';
-        /**
-         * (optional) Type of state bar. Supported value are `info`, `highlight`.
-         */
-        this.state = null;
-        /**
-         * Hide the element when clear button is clicked
-         * @param {Event} event - event params
-         * @fires AppstateBar#clear
-         * @returns {void}
-         */
-        this.clear = (event) => {
-            event.stopPropagation();
-            this.style.display = 'none';
-            /**
-             * Clear Event
-             * Fired when clear button is clicked
-             *
-             * @event clear
-             */
-            this.dispatchEvent(new CustomEvent('clear'));
-        };
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     *
-     * @returns CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: block;
-      }
-    `;
-    }
-    /**
-     * Invoked whenever the element is updated
-     * @param {PropertyValues} changedProperties Map of changed properties with old values
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        // Call this.updateStyles() to update css variables
-        if (changedProperties.has('state')) {
-            this.updateStyles();
-        }
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    render() {
-        return html `
-      <div part="heading">${this.heading}</div>
-      <div part="message"><slot></slot></div>
-      <div part="right"><slot name="right"></slot></div>
-      <ef-icon part="close"  @tap="${this.clear}" icon="cross"></ef-icon>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], AppstateBar.prototype, "heading", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], AppstateBar.prototype, "state", void 0);
-AppstateBar = __decorate([
-    customElement('ef-appstate-bar', {
-        alias: 'amber-appstate-bar'
-    })
-], AppstateBar);
-export { AppstateBar };

package/lib/appstate-bar/themes/halo/dark/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-
-elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#CCCCCC;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#404040;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#CCCCCC;--background-color:#262626}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}');

package/lib/appstate-bar/themes/halo/light/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-
-elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#0D0D0D;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#595959;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#0D0D0D;--background-color:#F2F2F2;--border-color:#CCCCCC}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}');

package/lib/appstate-bar/themes/solar/charcoal/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-
-elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#E2E2E2;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#4A4A52;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#46A0F0;--heading-background-color:#142E45;--text-color:#C2C2C2;--background-color:#0F2233;--border-color:#000000;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#000000;--heading-background-color:#FF9933}:host([state=info]){--heading-background-color:#b35900;--heading-text-color:#C2C2C2;--heading-background-color:#282E33}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}');

package/lib/appstate-bar/themes/solar/pearl/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-
-elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#484848;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#A9AFBA;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#FFFFFF;--heading-background-color:#2A6090;--text-color:#484848;--background-color:#C1E3FE;--border-color:#FFFFFF;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#FFFFFF;--heading-background-color:#CC7F33}:host([state=info]){--heading-background-color:#EE7600;--heading-text-color:#FFFFFF;--heading-background-color:#666570}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}');

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

@@ -1,54 +0,0 @@
-import type { ItemType } from '../../item';
-export declare type AutosuggestSelectItemEvent = CustomEvent<{
-    query: string;
-    suggestion: Suggestion;
-}>;
-export declare type AutosuggestHighlightItem = {
-    highlighted: boolean;
-};
-export declare type AutosuggestHighlightItemEvent = CustomEvent<{
-    target: AutosuggestHighlightItem;
-    oldTarget: AutosuggestHighlightItem;
-}>;
-export declare type AutosuggestQueryAction = (event: CustomEvent) => void;
-export declare type AutosuggestReason = 'value-changed' | 'input-focus' | 'suggestions-revealed' | 'escape-pressed' | 'enter-pressed' | 'more-results';
-export interface Suggestion {
-    /**
-     * Type of item. Value can be `text`, `header`, `divider`
-     */
-    type?: ItemType;
-    /**
-     * The text for the label indicating the meaning of the item.
-     */
-    label?: string;
-    /**
-     * The text for the pop-up of item when it's hover.
-     */
-    title?: string;
-    /**
-     * Set the icon name from the coral-icon list
-     */
-    icon?: string;
-    /**
-     * Sets the item to be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Value of the data item.
-     */
-    value?: string;
-    /**
-     * Sort data item into the group.
-     */
-    group?: string;
-}
-export declare type AutosuggestItem = Suggestion | string | unknown;
-export interface AutosuggestQuery {
-    toString(): string;
-}
-export declare type AutosuggestTargetElement = HTMLElement & {
-    value: string;
-};
-export declare type AutosuggestMethodType = 'click' | 'enter' | 'clear' | 'reset' | 'navigation';
-export declare type AutosuggestRenderer = (suggestion: AutosuggestItem, query: AutosuggestQuery | null) => HTMLElement;
-export declare type AutosuggestHighlightable = (suggestion: AutosuggestItem, target: HTMLElement) => boolean;

package/lib/autosuggest/helpers/types.js

@@ -1 +0,0 @@
-export {};

package/lib/autosuggest/helpers/utils.d.ts

@@ -1,39 +0,0 @@
-import type { Item } from '../../item';
-import type { AutosuggestHighlightable, AutosuggestRenderer } from './types';
-/**
- * Check whether item can be highlighted
- * @param suggestion Suggestion object
- * @param target item element
- * @returns highlightable
- */
-export declare const itemHighlightable: AutosuggestHighlightable;
-/**
- * Replace forbidden characters in regular expressions
- * @param string A string to process
- * @returns clean string
- */
-export declare const escapeRegExp: (string?: string) => string;
-/**
- * A basic regexp matching pattern to replace text based on string input.
- * @param text Value to test against
- * @param query The query
- * @param [pattern=<mark>$1</mark>] Provide a pattern to replace string
- * @returns innerHTML The text that can be used as innerHTML
- */
-export declare const queryWordSelect: (text: string, query?: string, pattern?: string) => string;
-/**
- * Update element content
- * @param el to update content
- * @param query to search
- * @param label text to test against
- * @param value text to use as fallback
- * @return {void}
- */
-export declare const updateElementContent: (el: Item, query: string, label: string, value: string | number) => void;
-/**
- * Build item element from data object
- * @param suggestion Suggestion data
- * @param query A query data (usually string, but could be any entity )
- * @returns item
- */
-export declare const itemRenderer: AutosuggestRenderer;

package/lib/autosuggest/helpers/utils.js

@@ -1,75 +0,0 @@
-/**
- * Check whether item can be highlighted
- * @param suggestion Suggestion object
- * @param target item element
- * @returns highlightable
- */
-export const itemHighlightable = (suggestion, target) => {
-    return target.highlightable;
-};
-/**
- * Replace forbidden characters in regular expressions
- * @param string A string to process
- * @returns clean string
- */
-export const escapeRegExp = (string = '') => {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-};
-/**
- * A basic regexp matching pattern to replace text based on string input.
- * @param text Value to test against
- * @param query The query
- * @param [pattern=<mark>$1</mark>] Provide a pattern to replace string
- * @returns innerHTML The text that can be used as innerHTML
- */
-export const queryWordSelect = (text, query = '', pattern = '<mark>$1</mark>') => {
-    query = query && query.trim();
-    if (!query) {
-        return text;
-    }
-    const regExReplace = new RegExp(`(${escapeRegExp(query)})`, 'ig');
-    return text.replace(regExReplace, pattern);
-};
-/**
- * Update element content
- * @param el to update content
- * @param query to search
- * @param label text to test against
- * @param value text to use as fallback
- * @return {void}
- */
-export const updateElementContent = (el, query, label, value) => {
-    if (itemHighlightable(value, el)) {
-        el.innerHTML = queryWordSelect(label, query);
-    }
-    else {
-        el.label = `${value}`;
-    }
-};
-/**
- * Build item element from data object
- * @param suggestion Suggestion data
- * @param query A query data (usually string, but could be any entity )
- * @returns item
- */
-export const itemRenderer = (suggestion, query) => {
-    const el = document.createElement('ef-item');
-    if (typeof suggestion === 'object') {
-        const { type, label, title, icon, disabled, value } = suggestion;
-        el.type = type || null;
-        el.disabled = !!disabled;
-        el.icon = icon || null;
-        el.value = value || label || '';
-        if (title) {
-            el.title = title;
-        }
-        updateElementContent(el, query || '', label || '', el.value);
-    }
-    else {
-        const value = suggestion || '';
-        el.label = value;
-        el.value = value;
-        updateElementContent(el, query || '', value, value);
-    }
-    return el;
-};