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

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#1a1a1a)}:host([spacing]){padding:12px 8px}');

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#fafafa)}:host([spacing]){padding:12px 8px}');

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#1a1a1c)}:host([spacing]){padding:6px 10px}');

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#fff)}:host([spacing]){padding:6px 10px}:host(:not([transparent])::after){content:\'\';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(255,255,255,.5);pointer-events:none}');

package/lib/password-field/index.d.ts

@@ -1,89 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
-import { TextField } from '../text-field/index.js';
-import '../icon/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
-import { Translate } from '@refinitiv-ui/translate';
-/**
- * A form control element for password.
- *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires icon-click - Dispatched when icon is clicked
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- *
- * @attr {boolean} error - Set error state
- * @prop {boolean} [error=false] - Set error state
- *
- * @attr {number} maxlength - Set character max limit
- * @prop {number | null} [maxLength=null] - Set character max limit
- *
- * @attr {number} minlength - Set character min limit
- * @prop {number | null} [minLength=null] - Set character min limit
- *
- * @prop {string} [pattern=""] - Set regular expression for input validation
- *
- * @attr {string} placeholder - Set placeholder text
- * @prop {string} [placeholder=""] - Set placeholder text
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} transparent - Disables all other states and border/background styles.
- * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
- *
- * @attr {boolean} warning - Set warning state
- * @prop {boolean} [warning=false] - Set warning state
- *
- * @attr {string} value - Input's value
- * @prop {string} [value=""] - Input's value
- */
-export declare class PasswordField extends TextField {
-    /**
-     * Used for translations
-     */
-    protected t: Translate;
-    /**
-     * Defines whether password is visible or not
-     */
-    private isPasswordVisible;
-    /**
-     * Called when the element’s DOM has been updated and rendered for the first time
-     * @param changedProperties Properties that has changed
-     * @return shouldUpdate
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    /**
-     * Decorate `<input>` element with common properties extended from text-field:
-     * type="text|password" - text if password is visible
-     * @returns template map
-     */
-    protected get decorateInputMap(): TemplateMap;
-    /**
-     * Renders icon element
-     * @returns {void}
-     */
-    protected renderIcon(): TemplateResult | null;
-    /**
-     * Toggles password visibility state
-     * @return void
-     */
-    protected togglePasswordVisibility(): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-password-field': PasswordField;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-password-field': Partial<PasswordField> | JSXInterface.HTMLAttributes<PasswordField>;
-    }
-  }
-}
-
-export {};

package/lib/password-field/index.js

@@ -1,112 +0,0 @@
-import { __decorate } from "tslib";
-import { html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { preload } from '../icon/index.js';
-import { TextField } from '../text-field/index.js';
-import '../icon/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
-import { translate } from '@refinitiv-ui/translate';
-let isEyeOffPreloadRequested = false;
-/**
- * A form control element for password.
- *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires icon-click - Dispatched when icon is clicked
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- *
- * @attr {boolean} error - Set error state
- * @prop {boolean} [error=false] - Set error state
- *
- * @attr {number} maxlength - Set character max limit
- * @prop {number | null} [maxLength=null] - Set character max limit
- *
- * @attr {number} minlength - Set character min limit
- * @prop {number | null} [minLength=null] - Set character min limit
- *
- * @prop {string} [pattern=""] - Set regular expression for input validation
- *
- * @attr {string} placeholder - Set placeholder text
- * @prop {string} [placeholder=""] - Set placeholder text
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} transparent - Disables all other states and border/background styles.
- * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
- *
- * @attr {boolean} warning - Set warning state
- * @prop {boolean} [warning=false] - Set warning state
- *
- * @attr {string} value - Input's value
- * @prop {string} [value=""] - Input's value
- */
-let PasswordField = class PasswordField extends TextField {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines whether password is visible or not
-         */
-        this.isPasswordVisible = false;
-    }
-    /**
-     * Called when the element’s DOM has been updated and rendered for the first time
-     * @param changedProperties Properties that has changed
-     * @return shouldUpdate
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        if (!isEyeOffPreloadRequested) {
-            preload('eye-off');
-            isEyeOffPreloadRequested = true;
-        }
-    }
-    /**
-     * Decorate `<input>` element with common properties extended from text-field:
-     * type="text|password" - text if password is visible
-     * @returns template map
-     */
-    get decorateInputMap() {
-        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': this.isPasswordVisible ? 'text' : 'password' });
-    }
-    /**
-     * Renders icon element
-     * @returns {void}
-     */
-    renderIcon() {
-        return html `
-      <ef-icon
-        part="icon"
-        role="button"
-        tabindex="0"
-        aria-label="${this.isPasswordVisible ? this.t('HIDE_PASSWORD') : this.t('SHOW_PASSWORD')}"
-        icon=${this.isPasswordVisible ? 'eye-off' : 'eye'}
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        @tap="${this.togglePasswordVisibility}"
-      ></ef-icon>
-    `;
-    }
-    /**
-     * Toggles password visibility state
-     * @return void
-     */
-    togglePasswordVisibility() {
-        this.isPasswordVisible = !this.isPasswordVisible;
-    }
-};
-__decorate([
-    translate({ scope: 'ef-password-field' })
-], PasswordField.prototype, "t", void 0);
-__decorate([
-    state()
-], PasswordField.prototype, "isPasswordVisible", void 0);
-PasswordField = __decorate([
-    customElement('ef-password-field', {
-        alias: 'coral-password-field'
-    })
-], PasswordField);
-export { PasswordField };

package/lib/password-field/themes/halo/dark/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-
-elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{padding-left:2px;color:#ccc;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');

package/lib/password-field/themes/halo/light/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-
-elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{padding-left:2px;color:#404040;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');

package/lib/password-field/themes/solar/charcoal/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-
-elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');

package/lib/password-field/themes/solar/pearl/index.js

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-
-elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');

package/lib/pill/index.d.ts

@@ -1,97 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon/index.js';
-/**
- * A small button style component
- * which is used to show one or multiple selected item.
- * It is rarely used in the UI but inside other components to visualize multiple item selection item.
- * @attr {string} value - Value of pill
- * @prop {string} [value=""] - Value of pill
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- *
- * @fires clear - Dispatched when click on cross button occurs
- */
-export declare class Pill extends ControlElement {
-    /**
-     * 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.
-     * @return CSS template
-     */
-    static get styles(): CSSResultGroup;
-    /**
-     * Set pill to clearable
-     */
-    clears: boolean;
-    /**
-     * Set pill to toggle mode
-     */
-    toggles: boolean;
-    /**
-     * Add to pill for active state
-     */
-    active: boolean;
-    /**
-     * Set property pressed true on tap start and false on tap end
-     */
-    private pressed;
-    private closeElement?;
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    private get closeTemplate();
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-    /**
-     * change state of `pressed` property to be true if there is no close icon or pill is pressed directly
-     * @param event tapstart event
-     * @returns {void}
-     */
-    private onStartPress;
-    /**
-     * @param event tapstart
-     * @returns true if element property pressed could be set
-     */
-    private couldBePressed;
-    /**
-     * change state of `pressed` property to be false if mouse leave pill or tap is end on pill
-     * @returns {void}
-     */
-    private onEndPress;
-    /**
-     * handle when `clears` icon is tapped
-     * @returns {void}
-     */
-    private onTapHandler;
-    /**
-     * @param event event from close button
-     * @returns {void}
-     */
-    private clear;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-pill': Pill;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-pill': Partial<Pill> | JSXInterface.ControlHTMLAttributes<Pill>;
-    }
-  }
-}
-
-export {};

package/lib/pill/index.js

@@ -1,160 +0,0 @@
-import { __decorate } from "tslib";
-import { ControlElement, css, html } 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 { VERSION } from '../version.js';
-import '../icon/index.js';
-/**
- * A small button style component
- * which is used to show one or multiple selected item.
- * It is rarely used in the UI but inside other components to visualize multiple item selection item.
- * @attr {string} value - Value of pill
- * @prop {string} [value=""] - Value of pill
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- *
- * @fires clear - Dispatched when click on cross button occurs
- */
-let Pill = class Pill extends ControlElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Set pill to clearable
-         */
-        this.clears = false;
-        /**
-         * Set pill to toggle mode
-         */
-        this.toggles = false;
-        /**
-         * Add to pill for active state
-         */
-        this.active = false;
-        /**
-         * Set property pressed true on tap start and false on tap end
-         */
-        this.pressed = false;
-    }
-    /**
-     * 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: inline-block;
-      position: relative;
-    }
-    [part=content] {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-    `;
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.addEventListener('tap', this.onTapHandler);
-        this.addEventListener('tapstart', this.onStartPress);
-        this.addEventListener('tapend', this.onEndPress);
-        this.addEventListener('mouseleave', this.onEndPress);
-    }
-    get closeTemplate() {
-        return this.clears && !this.readonly ? html `<ef-icon part="close" icon="cross" @tap="${this.clear}"></ef-icon>` : null;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      <div part="content">
-        <slot>...</slot>
-      </div>
-      ${this.closeTemplate}
-    `;
-    }
-    /**
-     * change state of `pressed` property to be true if there is no close icon or pill is pressed directly
-     * @param event tapstart event
-     * @returns {void}
-     */
-    onStartPress(event) {
-        if (this.couldBePressed(event)) {
-            this.pressed = true;
-        }
-    }
-    /**
-     * @param event tapstart
-     * @returns true if element property pressed could be set
-     */
-    couldBePressed(event) {
-        const element = this.closeElement;
-        return !this.readonly && (!element || !event.composedPath().includes(element));
-    }
-    /**
-     * change state of `pressed` property to be false if mouse leave pill or tap is end on pill
-     * @returns {void}
-     */
-    onEndPress() {
-        if (this.pressed) {
-            this.pressed = false;
-        }
-    }
-    /**
-     * handle when `clears` icon is tapped
-     * @returns {void}
-     */
-    onTapHandler() {
-        if (this.toggles && !this.readonly) {
-            this.active = !this.active;
-        }
-    }
-    /**
-     * @param event event from close button
-     * @returns {void}
-     */
-    clear(event) {
-        event.stopPropagation();
-        /**
-         * Fires when click on cross occurs.
-         */
-        this.dispatchEvent(new CustomEvent('clear'));
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Pill.prototype, "clears", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Pill.prototype, "toggles", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Pill.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Pill.prototype, "pressed", void 0);
-__decorate([
-    query('[part=close]')
-], Pill.prototype, "closeElement", void 0);
-Pill = __decorate([
-    customElement('ef-pill', {
-        alias: 'coral-pill'
-    })
-], Pill);
-export { Pill };

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-
-elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#1a1a1a;border-radius:10px;transition:120ms;color:#ccc;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;height:20px;line-height:20px;border:1px solid #333}:host(:hover),:host([active]:hover){background-color:#334bff;border-color:#334bff}:host([active]){border-color:#0d0d0d;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#0d0d0d}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#0d0d0d;color:#ccc;background-color:#333}:host [part=close]{touch-action:manipulation;cursor:pointer;color:#ccc;display:flex;position:relative;margin-left:4px;min-width:12px;width:12px;height:12px;box-sizing:border-box;opacity:.4}:host [part=close]:active{border:1px solid transparent}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#ccc;background-color:#1a1a1a;border-color:#333}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#ccc;opacity:.4}}');

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-
-elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#fafafa;border-radius:10px;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;height:20px;line-height:20px;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#334bff;border-color:#334bff}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}:host [part=close]{touch-action:manipulation;cursor:pointer;color:#595959;display:flex;position:relative;margin-left:4px;min-width:12px;width:12px;height:12px;box-sizing:border-box;opacity:.4}:host [part=close]:active{border:1px solid transparent}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}');

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-
-elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#c2c2c2;background-color:#000}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host{background:#c2c2c2;border-radius:2px;padding:0 4px;color:#000;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#c2c2c2}:host([toggles][active]){background:#f93;color:#000}:host([toggles][active]) [part=close]{color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#fff}:host([toggles][active]:hover){background:#ffb366}}');

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-
-elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#a9afba;background-color:#fff}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host{background:#a9afba;border-radius:2px;padding:0 4px;color:#fff;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#a9afba}:host([toggles][active]){background:#ee7600;color:#fff}:host([toggles][active]) [part=close]{color:#ee7600}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#8a8a96}:host([toggles][active]:hover){background:#ee7600}}');

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

@@ -1,82 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { CSSResultGroup, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
-/**
- * Data visualisation component,
- * showing a simple percentage bar.
- * @slot label - Overrides the label property and places custom content. Useful for modifying the color, or, adding icons.
- */
-export declare class ProgressBar extends BasicElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    private valuePrevious;
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
-     */
-    static get styles(): CSSResultGroup;
-    /**
-     * The current value of the bar.
-     * This can range from `0-100` and
-     * will be represented as a percentage bar
-     */
-    value: string;
-    /**
-     * The alignment of the bar.
-     * The bar can either start from the `left` or `right`.
-     */
-    alignment: string;
-    /**
-     * The current label to be displayed next to the bar.
-     * This is affixed to the end of the bar, so make sure to cater for this.
-     */
-    label: string;
-    /**
-     * Converts value from string to number for calculations
-     * @returns value of bar as a number
-     */
-    private get valueNumber();
-    /**
-     * Gets the current part names for the internal bar
-     */
-    private get barParts();
-    /**
-     * Calculates the bar's percentage width
-     */
-    private get barFill();
-    /**
-     * Returns CSS styles for showing
-     * the bar's fill percentage.
-     */
-    private get barStyle();
-    /**
-     * Called after an update has occurred
-     * @param changedProperties changed properties
-     * @returns {void}
-     */
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-progress-bar': ProgressBar;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-progress-bar': Partial<ProgressBar> | JSXInterface.HTMLAttributes<ProgressBar>;
-    }
-  }
-}
-
-export {};