@refinitiv-ui/elements 5.3.3 → 5.3.4

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

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

@@ -0,0 +1,7 @@
+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/custom-elements.json

@@ -0,0 +1,207 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-combo-box",
+      "description": "Combines a popup with a filterable selection list",
+      "attributes": [
+        {
+          "name": "multiple",
+          "description": "Multiple selection mode",
+          "type": "boolean"
+        },
+        {
+          "name": "opened",
+          "description": "Track opened state of popup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder for input field",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "clears",
+          "description": "Show clears button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "free-text",
+          "description": "Allow to enter any value",
+          "type": "boolean"
+        },
+        {
+          "name": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "query-debounce-rate",
+          "description": "Control query rate, defaults to 0",
+          "type": "number"
+        },
+        {
+          "name": "value",
+          "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
+          "type": "string"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "name",
+          "description": "Set name of the element",
+          "type": "string",
+          "default": "\"''\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "filter",
+          "description": "Custom filter for static data\nSet this to null when data is filtered externally, eg XHR",
+          "type": "ComboBoxFilter<T> | null",
+          "default": "\"defaultFilter<T>(this)\""
+        },
+        {
+          "name": "renderer",
+          "description": "Renderer used to render list item elements",
+          "type": "ComboBoxRenderer",
+          "default": "\"new ComboBoxRenderer(this)\""
+        },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Multiple selection mode",
+          "type": "boolean"
+        },
+        {
+          "name": "opened",
+          "attribute": "opened",
+          "description": "Track opened state of popup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Placeholder for input field",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "clears",
+          "attribute": "clears",
+          "description": "Show clears button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "freeText",
+          "attribute": "free-text",
+          "description": "Allow to enter any value",
+          "type": "boolean"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "queryDebounceRate",
+          "attribute": "query-debounce-rate",
+          "description": "Control query rate, defaults to 0",
+          "type": "number"
+        },
+        {
+          "name": "data",
+          "description": "Data array to be displayed",
+          "type": "ComboBoxData<T>"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
+          "type": "string"
+        },
+        {
+          "name": "values",
+          "description": "Returns a values collection of the currently\nselected item values",
+          "type": "string[]"
+        },
+        {
+          "name": "query",
+          "description": "Query string applied to combo-box\nSet via internal text-field input",
+          "type": "string | null"
+        },
+        {
+          "name": "label",
+          "description": "Label of selected value",
+          "type": "string"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Set name of the element",
+          "type": "string",
+          "default": "\"''\""
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Dispatched when value changes"
+        },
+        {
+          "name": "query-changed",
+          "description": "Dispatched when query changes"
+        },
+        {
+          "name": "opened-changed",
+          "description": "Dispatched when opened state changes"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,10 @@
+import { DataItem } from '@refinitiv-ui/utils';
+import { ComboBox } from '../index';
+import { ComboBoxFilter } from './types';
+import { 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

@@ -0,0 +1,29 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+/**
+ * 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

@@ -0,0 +1,19 @@
+/**
+ * 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/types.d.ts

@@ -0,0 +1,11 @@
+import { DataItem } from '@refinitiv-ui/utils';
+import { 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

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