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

package/lib/color-dialog/index.js

@@ -1,459 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, WarningNotice } 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
-import { rgb } from '@refinitiv-ui/utils/lib/color.js';
-import { VERSION } from '../version.js';
-import { ValueModel } from './helpers/value-model.js';
-import { isHex, removeHashSign } from './helpers/color-helpers.js';
-import '../button/index.js';
-import '../number-field/index.js';
-import '../text-field/index.js';
-import { Dialog } from '../dialog/index.js';
-import './elements/color-palettes.js';
-import './elements/grayscale-palettes.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
-/**
- * Displays a colour picker dialog,
- * for selecting a predefined range of colours.
- *
- * @fires value-changed - Fired when the `value` property changes.
- * @fires opened-changed - Fired when the `opened` property changes.
- *
- * @attr {string | null} header - Set Header/Title of the color dialog
- * @prop {string | null} [header=null] - Set Header/Title of the color dialog
- *
- * @attr {boolean} [opened=false] - Set dialog to open
- * @prop {boolean} [opened=false] - Set dialog to open
- *
- * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
- * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
- *
- * @attr {string | undefined} x - Set a specific x coordinate of dialog
- * @prop {string | undefined} x - Set a specific x coordinate of dialog
- *
- * @attr {string | undefined} y - Set a specific y coordinate of dialog
- * @prop {string | undefined} y - Set a specific y coordinate of dialog
- *
- * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- *
- * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
- *
- * @prop {boolean} [withBackdrop=true] - False to hide backdrop.
- *
- * @prop {boolean} [draggable=true] - False to make the dialog not draggable.
- *
- * @prop {boolean} [withShadow=true] - False to remove shadow for dialog component.
- */
-let ColorDialog = class ColorDialog extends Dialog {
-    constructor() {
-        super(...arguments);
-        /**
-         * speed up rendering by not populating content on page load
-         */
-        this.lazyRendered = false;
-        /**
-         * Color dialog has commit button to update actual values
-         * Value model is used to support this functionality
-         */
-        this.valueModel = new ValueModel();
-        /**
-        * @ignore
-        */
-        this.draggable = true;
-        /**
-         * Set the palettes to activate no-color option
-         */
-        this.allowNocolor = false;
-        this._value = '';
-    }
-    /**
-     * 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 [
-            super.styles,
-            css `
-        :host {
-          display: block;
-        }
-        [part=preview-color][no-color] {
-          background: linear-gradient(to bottom right, transparent calc(50% - 2px),
-          var(--no-color-line-color, #ff0000) calc(50% - 1px),
-          var(--no-color-line-color, #ff0000) calc(50% + 1px),
-          transparent calc(50% + 2px));
-        }
-    `
-        ];
-    }
-    /**
-     * Value of selected color from color dialog will be written here as hex value
-     * e.g. "#00f" or "#0000ff"
-     * @default -
-     * @param value A value to set
-     */
-    set value(value) {
-        value = String(value);
-        const oldValue = this._value;
-        if (!this.isValidValue(value)) {
-            value = '';
-        }
-        this._value = value;
-        this.requestUpdate('value', oldValue);
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex
-     * @default -
-     * @param hex A hex value to set
-     */
-    set hex(hex) {
-        hex = String(hex);
-        if (!this.isValidHex(hex)) {
-            hex = '';
-        }
-        this.value = hex ? `#${hex}` : '';
-    }
-    get hex() {
-        const value = this.value;
-        return value ? removeHashSign(value) : '';
-    }
-    /**
-     * Red value from 0 to 255
-     * @default -
-     * @param red Red value
-     */
-    set red(red) {
-        red = String(red);
-        this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
-    }
-    get red() {
-        return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
-    }
-    /**
-     * Green value from 0 to 255
-     * @default -
-     * @param green Green value
-     */
-    set green(green) {
-        green = String(green);
-        this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
-    }
-    get green() {
-        return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
-    }
-    /**
-     * Blue value from 0 to 255
-     * @default -
-     * @param blue Blue value
-     */
-    set blue(blue) {
-        blue = String(blue);
-        this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
-    }
-    get blue() {
-        return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
-    }
-    /**
-     * Check if component should be updated
-     * @param changedProperties properties changed on shouldUpdate lifecycle callback
-     * @returns boolean should component update
-     */
-    shouldUpdate(changedProperties) {
-        const shouldUpdate = super.shouldUpdate(changedProperties);
-        return shouldUpdate
-            || changedProperties.has('allowNocolor')
-            || changedProperties.has('red')
-            || changedProperties.has('green')
-            || changedProperties.has('blue')
-            || changedProperties.has('value')
-            || changedProperties.has('hex')
-            || changedProperties.has('enableConfirm');
-    }
-    /**
-     * Updates the element
-     * @param changedProperties Properties that has changed
-     * @returns {void}
-     */
-    update(changedProperties) {
-        if (changedProperties.has('value')) {
-            // ensure that the internal values are always in sync when set externally
-            this.resetValueModel();
-        }
-        if (this.opened && changedProperties.has('opened')) {
-            this.lazyRendered = true;
-        }
-        super.update(changedProperties);
-    }
-    /**
-     * @inheritdoc
-     * Reset value model
-     * @param opened True if opened
-     * @returns {void}
-     */
-    setOpened(opened) {
-        // setOpened is run only from internal context. It is safe to reset it here
-        this.resetValueModel();
-        super.setOpened(opened);
-    }
-    /**
-     * Reset value model always resets
-     * when either red, green, blue, hex or value are changed externally
-     * Value model is reset internally otherwise
-     * @returns {void}
-     */
-    resetValueModel() {
-        this.valueModel = new ValueModel(this.value);
-    }
-    /**
-     * Check if value is valid HEX value (including #)
-     * @param value Value to check
-     * @returns true if value is valid
-     */
-    isValidValue(value) {
-        const isValid = value === '' || isHex(value);
-        if (!isValid) {
-            new WarningNotice(`The specified value "${value}" is not valid value. The correct value should look like "#fff" or "#ffffff".`).show();
-        }
-        return isValid;
-    }
-    /**
-     * Check if value is valid HEX value (excluding #)
-     * @param value Value to check
-     * @returns true if value is valid
-     */
-    isValidHex(value) {
-        const isValid = value === '' || (!value.includes('#') && isHex(`#${value}`));
-        if (!isValid) {
-            new WarningNotice(`The specified hex "${value}" is not valid color. The correct value should look like "fff" or "ffffff".`).show();
-        }
-        return isValid;
-    }
-    /**
-     * Check if value is within 0 - 255, and warn of it is not
-     * @param value Value to check
-     * @returns true if value is within 0 - 255
-     */
-    isValidRGB(value) {
-        const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
-        if (!isValid) {
-            new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
-        }
-        return isValid;
-    }
-    /**
-     * update color value when tapping or dragging on color palettes
-     * @param event select color event
-     * @return {void}
-     */
-    onColorChanged(event) {
-        this.valueModel.hex = removeHashSign(event.target.value);
-        this.requestUpdate();
-    }
-    /**
-     * update hex value when typing on hex input
-     * @param event input event
-     * @return {void}
-     */
-    onHexChanged(event) {
-        this.valueModel.hex = event.target.value;
-        this.requestUpdate();
-    }
-    /**
-     * update r,g,b value when typing on RGB inputs
-     * @param event input event
-     * @return {void}
-     */
-    onRGBChanged(event) {
-        const targetElem = event.target;
-        if (targetElem === this.redInputEl) {
-            this.valueModel.red = this.redInputEl.value;
-        }
-        else if (targetElem === this.greenInputEl) {
-            this.valueModel.green = this.greenInputEl.value;
-        }
-        else if (targetElem === this.blueInputEl) {
-            this.valueModel.blue = this.blueInputEl.value;
-        }
-        this.requestUpdate();
-    }
-    /**
-     * set opened state to false
-     * @return {void}
-     */
-    onCloseDialog() {
-        this.setOpened(false);
-    }
-    /**
-     * fired value-changed event and close dialog
-     * @return {void}
-     */
-    onConfirmValue() {
-        // no need to check for anything, as the button is disabled if not dirty is invalid
-        this.value = this.valueModel.value;
-        this.notifyPropertyChange('value', this.value);
-        this.setOpened(false);
-    }
-    /**
-     * Check if apply button is disabled
-     * The button is disabled if value is invalid
-     * or value has not changed
-     * @returns {boolean} true if disabled
-     */
-    isApplyDisabled() {
-        return this.valueModel.hasChanged() && this.valueModel.isValid() ? this.allowNocolor ? false : this.valueModel.hex === '' : true;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    get contentRegion() {
-        if (!this.lazyRendered) {
-            return html ``;
-        }
-        return html `
-      <div part="content-section">
-        <div part="palettes-container">
-          <ef-color-palettes
-            .value=${this.valueModel.value}
-            @value-changed=${this.onColorChanged}
-            part="color-palettes">
-          </ef-color-palettes>
-          <ef-grayscale-palettes
-            .value=${this.valueModel.value}
-            @value-changed=${this.onColorChanged}
-            ?allow-nocolor=${this.allowNocolor}
-            part="grayscale-palettes"
-            >
-          </ef-grayscale-palettes>
-        </div>
-        <div part="inputs-container">
-          <div
-            part="preview-color"
-            style=${styleMap({
-            backgroundColor: this.valueModel.value || undefined
-        })}
-            ?no-color=${!this.valueModel.value}></div>
-          <div>${this.t('RED')}&nbsp;:
-            <ef-number-field
-              .value=${this.valueModel.red}
-              @value-changed=${this.onRGBChanged}
-              part="color-input"
-              min="0"
-              max="255"
-              no-spinner
-              id="redInput"
-            ></ef-number-field>
-          </div>
-          <div>${this.t('GREEN')}&nbsp;:
-            <ef-number-field
-              .value=${this.valueModel.green}
-              @value-changed=${this.onRGBChanged}
-              part="color-input"
-              min="0"
-              max="255"
-              no-spinner
-              id="greenInput"
-            ></ef-number-field>
-          </div>
-          <div>${this.t('BLUE')}&nbsp;:
-            <ef-number-field
-              .value=${this.valueModel.blue}
-              @value-changed=${this.onRGBChanged}
-              part="color-input"
-              min="0"
-              max="255"
-              no-spinner
-              id="blueInput"
-            ></ef-number-field>
-          </div>
-          <div>#&nbsp;:
-            <ef-text-field
-              .value=${this.valueModel.hex}
-              @value-changed=${this.onHexChanged}
-              pattern="^([0-9a-fA-F]{3}){1,2}$"
-              part="color-input"
-              id="hexInput"
-              maxlength="6">
-            </ef-text-field>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    get footerRegion() {
-        if (!this.lazyRendered) {
-            return html ``;
-        }
-        return html `
-      <ef-button
-        id="confirmButton"
-        part="button"
-        cta
-        @tap=${this.onConfirmValue}
-        ?disabled=${this.isApplyDisabled()}>${this.t('APPLY')}</ef-button>
-      <ef-button
-        id="closeButton"
-        @tap=${this.onCloseDialog}
-        part="button">${this.t('CLOSE')}</ef-button>
-    `;
-    }
-};
-__decorate([
-    property({ type: Boolean, attribute: 'allow-nocolor' })
-], ColorDialog.prototype, "allowNocolor", void 0);
-__decorate([
-    property({ type: String })
-], ColorDialog.prototype, "value", null);
-__decorate([
-    property({ type: String })
-], ColorDialog.prototype, "hex", null);
-__decorate([
-    property({ type: String })
-], ColorDialog.prototype, "red", null);
-__decorate([
-    property({ type: String })
-], ColorDialog.prototype, "green", null);
-__decorate([
-    property({ type: String })
-], ColorDialog.prototype, "blue", null);
-__decorate([
-    translate()
-], ColorDialog.prototype, "t", void 0);
-__decorate([
-    query('#redInput')
-], ColorDialog.prototype, "redInputEl", void 0);
-__decorate([
-    query('#greenInput')
-], ColorDialog.prototype, "greenInputEl", void 0);
-__decorate([
-    query('#blueInput')
-], ColorDialog.prototype, "blueInputEl", void 0);
-ColorDialog = __decorate([
-    customElement('ef-color-dialog', {
-        alias: 'emerald-color-dialog'
-    })
-], ColorDialog);
-export { ColorDialog };

package/lib/color-dialog/themes/halo/dark/index.js

@@ -1,7 +0,0 @@
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/dialog/themes/halo/dark';
-
-elf.customStyles.define('ef-color-dialog', ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #404040;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}');

package/lib/color-dialog/themes/halo/light/index.js

@@ -1,7 +0,0 @@
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
-import '@refinitiv-ui/elements/lib/number-field/themes/halo/light';
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
-import '@refinitiv-ui/elements/lib/panel/themes/halo/light';
-import '@refinitiv-ui/elements/lib/dialog/themes/halo/light';
-
-elf.customStyles.define('ef-color-dialog', ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #595959;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}');

package/lib/color-dialog/themes/solar/charcoal/index.js

@@ -1,7 +0,0 @@
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/number-field/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/panel/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/dialog/themes/solar/charcoal';
-
-elf.customStyles.define('ef-color-dialog', ':host [part=content-section]{display:flex;min-width:0;padding:5px 0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;box-sizing:border-box;width:60px;margin:0 0 0 5px}:host [part=preview-color]{border:1px solid #4a4a52;height:30px;margin-bottom:15px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:10px 10px 10px 3px}:host{width:300px}:host [part=grayscale-palettes]{height:18px;width:140px;margin:5px 0 0 23px}:host [part=button]:first-child{margin-right:3px}');

package/lib/color-dialog/themes/solar/pearl/index.js

@@ -1,7 +0,0 @@
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/number-field/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/panel/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/dialog/themes/solar/pearl';
-
-elf.customStyles.define('ef-color-dialog', ':host [part=content-section]{display:flex;min-width:0;padding:5px 0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;box-sizing:border-box;width:60px;margin:0 0 0 5px}:host [part=preview-color]{border:1px solid #a9afba;height:30px;margin-bottom:15px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:10px 10px 10px 3px}:host{width:300px}:host [part=grayscale-palettes]{height:18px;width:140px;margin:5px 0 0 23px}:host [part=button]:first-child{margin-right:3px}');

package/lib/combo-box/helpers/filter.d.ts

@@ -1,10 +0,0 @@
-import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
-import type { ComboBox } from '../index';
-import type { ComboBoxFilter } from './types';
-import type { ItemData } from '../../item';
-/**
- * Default filter used by combo box
- * @param el ComboBox instance to filter
- * @returns Filter accepting an item
- */
-export declare const defaultFilter: <T extends DataItem = ItemData>(el: ComboBox<T>) => ComboBoxFilter<T>;

package/lib/combo-box/helpers/filter.js

@@ -1,29 +0,0 @@
-/**
- * Default filter used by combo box
- * @param el ComboBox instance to filter
- * @returns Filter accepting an item
- */
-export const defaultFilter = (el) => {
-    // reference query string for validating queryRegExp cache state
-    let query = '';
-    // cache RegExp
-    let queryRegExp;
-    // Get current RegExp, or renew if out of date
-    // this is fetched on demand by filter/renderer
-    // only created once per query
-    const getRegularExpressionOfQuery = () => {
-        if (el.query !== query || !queryRegExp) {
-            query = el.query || '';
-            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
-        }
-        return queryRegExp;
-    };
-    // return scoped custom filter
-    return (item) => {
-        const regex = getRegularExpressionOfQuery();
-        const result = regex.test(item.label);
-        // this example uses global scope, so the index needs resetting
-        regex.lastIndex = 0;
-        return result;
-    };
-};

package/lib/combo-box/helpers/keyboard-event.d.ts

@@ -1,17 +0,0 @@
-/**
- * A helper class to propagate KeyBoard event to the list
- * Done is this way to cover IE11
- */
-export declare class CustomKeyboardEvent extends Event {
-    key?: string;
-    shiftKey?: boolean;
-    altKey?: boolean;
-    ctrlKey?: boolean;
-    metaKey?: boolean;
-    /**
-     * Create custom keyboard event
-     * @param type Event type
-     * @param eventInitDict Keyboard event init object
-     */
-    constructor(type: string, eventInitDict?: KeyboardEventInit);
-}

package/lib/combo-box/helpers/keyboard-event.js

@@ -1,19 +0,0 @@
-/**
- * A helper class to propagate KeyBoard event to the list
- * Done is this way to cover IE11
- */
-export class CustomKeyboardEvent extends Event {
-    /**
-     * Create custom keyboard event
-     * @param type Event type
-     * @param eventInitDict Keyboard event init object
-     */
-    constructor(type, eventInitDict = {}) {
-        super(type, eventInitDict);
-        this.key = eventInitDict.key;
-        this.shiftKey = eventInitDict.shiftKey;
-        this.altKey = eventInitDict.altKey;
-        this.ctrlKey = eventInitDict.ctrlKey;
-        this.metaKey = eventInitDict.metaKey;
-    }
-}

package/lib/combo-box/helpers/renderer.d.ts

@@ -1,8 +0,0 @@
-import { Renderer } from '../../list/renderer.js';
-/**
- * Renders list items as `ef-item` elements.
- * Extends its behaviour from ListRenderer.
- */
-export declare class ComboBoxRenderer extends Renderer {
-    constructor(context?: unknown);
-}

package/lib/combo-box/helpers/renderer.js

@@ -1,24 +0,0 @@
-import { ListRenderer } from '../../list/index.js';
-import { Renderer } from '../../list/renderer.js';
-/**
- * Renders list items as `ef-item` elements.
- * Extends its behaviour from ListRenderer.
- */
-export class ComboBoxRenderer extends Renderer {
-    constructor(context) {
-        const listRenderer = new ListRenderer(context);
-        super((item, composer, element) => {
-            // Extending renderer from listRenderer
-            element = listRenderer(item, composer, element);
-            const value = composer.getItemPropertyValue(item, 'value');
-            // Using value as id for `aria-activedescendant` in combobox
-            if (value && element.id !== value) {
-                element.id = value;
-            }
-            else if (!value && element.id) {
-                element.removeAttribute('id');
-            }
-            return element;
-        });
-    }
-}

package/lib/combo-box/helpers/types.d.ts

@@ -1,11 +0,0 @@
-import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
-import type { ItemData } from '../../item';
-/**
- * Predicate callback
- * Matches item against filter function
- *
- * @param item Item to filter
- * @return Does item match filter
- */
-export declare type ComboBoxFilter<T extends DataItem = ItemData> = (item: T) => boolean;
-export declare type ComboBoxData<T extends DataItem = ItemData> = T[] | Promise<T[]>;

package/lib/combo-box/helpers/types.js

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