@refinitiv-ui/elements 5.3.3 → 5.3.4

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
+
+elf.customStyles.define('ef-list', ':host{--item-indent:7px;--item-height:22px;color:#c2c2c2;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
+
+elf.customStyles.define('ef-list', ':host{--item-indent:7px;--item-height:22px;color:#484848;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

package/lib/loader/custom-elements.json

@@ -0,0 +1,9 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-loader",
+      "description": "An animated graphical component,\nused to show that an app is performing an action\nin the background such as downloading content."
+    }
+  ]
+}

package/lib/loader/index.d.ts

@@ -0,0 +1,41 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+/**
+ *  An animated graphical component,
+ *  used to show that an app is performing an action
+ *  in the background such as downloading content.
+ */
+export declare class Loader extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Collection of template part names,
+     * used to create and theme different loader styles
+     */
+    protected get templateParts(): readonly string[];
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     *
+     * @return TemplateResult
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-loader': Loader;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-loader': Partial<Loader> | JSXInterface.HTMLAttributes<Loader>;
+    }
+  }
+}
+
+export {};

package/lib/loader/index.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BasicElement, customElement, html } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+/**
+ * Global cache for loader template parts
+ */
+let cachedParts;
+/**
+ *  An animated graphical component,
+ *  used to show that an app is performing an action
+ *  in the background such as downloading content.
+ */
+let Loader = class Loader extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Collection of template part names,
+     * used to create and theme different loader styles
+     */
+    get templateParts() {
+        const parts = cachedParts || this.getComputedVariable('--parts')
+            .split(',').map(part => part.trim()).filter(part => part);
+        if (cachedParts !== parts && parts.length) {
+            cachedParts = parts;
+        }
+        return parts;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        !cachedParts && this.requestUpdate(); // polyfilled browsers require a second update
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     *
+     * @return TemplateResult
+     */
+    render() {
+        const dots = [];
+        for (const part of this.templateParts) {
+            dots.push(html `
+        <i part="${part}"></i>
+      `);
+        }
+        return html `
+      <div part="wrapper">${dots}</div>
+    `;
+    }
+};
+Loader = __decorate([
+    customElement('ef-loader', {
+        alias: 'amber-loader'
+    })
+], Loader);
+export { Loader };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#404040;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:grey;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate shape-1;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;-webkit-animation:.5s linear infinite alternate shape-2;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate shape-3;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#6678ff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{-webkit-animation:1s linear infinite alternate flash-1;animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{-webkit-animation:.5s linear infinite alternate flash-2;animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{-webkit-animation:1s linear infinite alternate flash-3;animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate box-1;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;-webkit-animation:.5s linear infinite alternate box-2;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate box-3;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#6678ff;-webkit-animation:1s linear infinite alternate bar-1;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#6678ff;-webkit-animation:1s linear infinite alternate bar-2;animation:1s linear infinite alternate bar-2}@-webkit-keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@-webkit-keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@-webkit-keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@-webkit-keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@-webkit-keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@-webkit-keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@-webkit-keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@-webkit-keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@-webkit-keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@-webkit-keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@-webkit-keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#d9d9d9;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:#ccc;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate shape-1;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;-webkit-animation:.5s linear infinite alternate shape-2;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate shape-3;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#334bff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{-webkit-animation:1s linear infinite alternate flash-1;animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{-webkit-animation:.5s linear infinite alternate flash-2;animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{-webkit-animation:1s linear infinite alternate flash-3;animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate box-1;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;-webkit-animation:.5s linear infinite alternate box-2;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate box-3;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#334bff;-webkit-animation:1s linear infinite alternate bar-1;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#334bff;-webkit-animation:1s linear infinite alternate bar-2;animation:1s linear infinite alternate bar-2}@-webkit-keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@-webkit-keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@-webkit-keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@-webkit-keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@-webkit-keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@-webkit-keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@-webkit-keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@-webkit-keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@-webkit-keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@-webkit-keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@-webkit-keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;border:1px solid rgba(194,194,194,.4)}:host [part~=dot0]{-webkit-animation-name:pulse-1;animation-name:pulse-1}:host [part~=dot1]{-webkit-animation-name:pulse-2;animation-name:pulse-2}:host [part~=dot2]{-webkit-animation-name:pulse-3;animation-name:pulse-3}@-webkit-keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@-webkit-keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@-webkit-keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;border:1px solid rgba(72,72,72,.4)}:host [part~=dot0]{-webkit-animation-name:pulse-1;animation-name:pulse-1}:host [part~=dot1]{-webkit-animation-name:pulse-2;animation-name:pulse-2}:host [part~=dot2]{-webkit-animation-name:pulse-3;animation-name:pulse-3}@-webkit-keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@-webkit-keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@-webkit-keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}');

package/lib/multi-input/custom-elements.json

@@ -0,0 +1,238 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-multi-input",
+      "description": "An input control component to display a selection of pills",
+      "attributes": [
+        {
+          "name": "pills-only",
+          "description": "Hide text input box",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "description": "Specify icon to display inside input box",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to display in input box",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
+        {
+          "name": "readonly",
+          "description": "Hides text field and clear icon from all pills",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "value",
+          "description": "Current value of text field",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "values",
+          "description": "Array of item's values ( readonly )",
+          "type": "string[]"
+        },
+        {
+          "name": "pillsOnly",
+          "attribute": "pills-only",
+          "description": "Hide text input box",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Specify icon to display inside input box",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Placeholder text to display in input box",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "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": "maxLength",
+          "attribute": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "attribute": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
+        {
+          "name": "selectionStart",
+          "description": "Selection start index",
+          "type": "number | null"
+        },
+        {
+          "name": "selectionEnd",
+          "description": "Selection end index",
+          "type": "number | null"
+        },
+        {
+          "name": "data",
+          "description": "The data object, used to render the list.",
+          "type": "MultiInputData | null"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Hides text field and clear icon from all pills",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Current value of text field",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Fired when new value of text field is changed.\nProperty `detail.value` will be the new value."
+        },
+        {
+          "name": "error-changed",
+          "description": "Dispatched when error state changes.\nProperty `detail.error` is error from validation."
+        },
+        {
+          "name": "item-added",
+          "description": "Fired when new pill is added.\nProperty `detail.item` is new added pill.\nProperty `detail.items` is new list of all pills."
+        },
+        {
+          "name": "item-removed",
+          "description": "Fired when item is removed.\nProperty `detail.item` is pill that removed.\nProperty `detail.items` is new list of all pills."
+        },
+        {
+          "name": "item-error",
+          "description": "Fired when item that attempt to add is invalid.\nProperty `detail.item` is item with an error.\nProperty `detail.items` a current list of pills."
+        }
+      ],
+      "methods": [
+        {
+          "name": "removeByValue",
+          "description": "Removes the item by the value and returns array of removed items",
+          "params": [
+            {
+              "name": "value",
+              "description": "Value of item to remove"
+            }
+          ]
+        },
+        {
+          "name": "add",
+          "description": "Add a new item to the input. Return newly added object or null if added invalid object.",
+          "params": [
+            {
+              "name": "item",
+              "description": "to add. Object must have at least value and label",
+              "type": "MultiInputDataItem"
+            }
+          ]
+        },
+        {
+          "name": "removeLastItem",
+          "description": "Removes last item. Returns item that removed or null if list was empty",
+          "params": []
+        },
+        {
+          "name": "removeByIndex",
+          "description": "Removes pill by index. Returns item that removed or null if list was empty",
+          "params": [
+            {
+              "name": "index",
+              "description": "of pill to be removed"
+            }
+          ]
+        },
+        {
+          "name": "setSelectionRange",
+          "description": "Set the selection range",
+          "params": [
+            {
+              "name": "startSelection",
+              "description": "Start of selection"
+            },
+            {
+              "name": "endSelection",
+              "description": "End of the selection"
+            }
+          ]
+        },
+        {
+          "name": "select",
+          "description": "Select the contents of input",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

package/lib/multi-input/helpers/types.d.ts

@@ -0,0 +1,11 @@
+import { CollectionItem } from '@refinitiv-ui/utils';
+export declare type SelectionIndex = number | null;
+export declare type MultiInputEvents = 'item-added' | 'item-removed' | 'item-error';
+export declare type MultiInputData = MultiInputDataItem[];
+export interface MultiInputDataItem extends CollectionItem {
+    value: string;
+    label: string;
+    id?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+}

package/lib/multi-input/helpers/types.js

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