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

package/lib/tab-bar/index.js

@@ -1,218 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, ResponsiveElement } 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 { tweenAnimate } from './helpers/animate.js';
-import '../button/index.js';
-const BAR_TRAVEL_DISTANCE = 150; // scroll distance
-/**
- * Container for tabs
- */
-let TabBar = class TabBar extends ResponsiveElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Specify tab's horizontal alignment
-         */
-        this.alignment = 'left';
-        /**
-         * Use level styling from theme
-         */
-        this.level = '1';
-        /**
-         * Use to switch from horizontal to vertical layout.
-         */
-        this.vertical = 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.
-     * @returns CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: flex;
-      }
-      :host([alignment=center]) {
-        justify-content: center;
-      }
-      :host([alignment=right]) {
-        justify-content: flex-end;
-      }
-    `;
-    }
-    /**
-     * Called after the element’s DOM has been updated the first time.
-     * register scroll event on content element to toggle scroll button
-     * @param changedProperties Properties that has changed
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.content.addEventListener('scroll', () => {
-            // Clear our timeout throughout the scroll
-            window.clearTimeout(this.isScrolling);
-            // Set a timeout to run after scrolling ends
-            this.isScrolling = window.setTimeout(() => {
-                this.toggleScrollButton(this.content.clientWidth);
-            }, 66); // equal 15 fps for compatibility
-        });
-    }
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        /* istanbul ignore else */
-        if (changedProperties.has('level')) {
-            this.setLevel();
-        }
-        if (changedProperties.has('vertical')) {
-            // if tab bar changed from horizontal to vertical
-            if (this.vertical) {
-                this.hideScrollButtons();
-            }
-        }
-        super.updated(changedProperties);
-    }
-    /**
-     * private method but can't override
-     * access modifiers in typescript.
-     * @ignore
-     * @param size element dimensions
-     * @returns {void}
-     */
-    resizedCallback(size) {
-        if (!this.vertical) {
-            this.toggleScrollButton(size.width);
-        }
-    }
-    /**
-     * Hide all scroll buttons
-     * @returns {void}
-     */
-    hideScrollButtons() {
-        this.leftBtn.style.setProperty('display', 'none');
-        this.rightBtn.style.setProperty('display', 'none');
-    }
-    /**
-     * Hide/Show scroll button when element is overflow.
-     * @param elementWidth width of element
-     * @returns {void}
-     */
-    toggleScrollButton(elementWidth) {
-        const { scrollLeft, scrollWidth } = this.content;
-        if (this.vertical) {
-            return;
-        }
-        // handle left button
-        if (scrollLeft > 0) {
-            this.leftBtn.style.setProperty('display', 'flex');
-        }
-        else {
-            this.leftBtn.style.setProperty('display', 'none');
-        }
-        // handle right button
-        if (Math.floor(scrollWidth - scrollLeft) > Math.round(elementWidth)) {
-            this.rightBtn.style.setProperty('display', 'flex');
-        }
-        else {
-            this.rightBtn.style.setProperty('display', 'none');
-        }
-    }
-    /**
-     * Set tab level attribute accordingly
-     * @returns {void}
-     */
-    setLevel() {
-        const tabList = this.querySelectorAll('ef-tab');
-        tabList.forEach((tab) => {
-            tab.level = this.level;
-        });
-    }
-    /**
-     * Detects when slot changes
-     * @returns {void}
-     */
-    onSlotChange() {
-        this.setLevel();
-    }
-    /**
-     * Update scroll position when clicked on left button
-     * @returns {void}
-     */
-    handleScrollLeft() {
-        const { scrollLeft } = this.content;
-        const availableScrollLeft = scrollLeft;
-        let endPosition = scrollLeft - BAR_TRAVEL_DISTANCE;
-        // If the space available is less than one half lots of our desired distance, just move to the leftest
-        if (availableScrollLeft < BAR_TRAVEL_DISTANCE * 1.5) {
-            endPosition = 0;
-        }
-        tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
-    }
-    /**
-     * Update scroll position when clicked on right button
-     * @returns {void}
-     */
-    handleScrollRight() {
-        const { scrollLeft, scrollWidth, clientWidth } = this.content;
-        const availableScrollRight = scrollWidth - (scrollLeft + clientWidth);
-        let endPosition = scrollLeft + BAR_TRAVEL_DISTANCE;
-        // If the space available is less than one half lots of our desired distance, just move the whole amount
-        if (availableScrollRight < BAR_TRAVEL_DISTANCE * 1.5) {
-            endPosition = scrollLeft + availableScrollRight;
-        }
-        tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-    <ef-button icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>
-      <div part="content">
-        <slot @slotchange=${this.onSlotChange}></slot>
-      </div>
-    <ef-button icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>
-    `;
-    }
-};
-__decorate([
-    property({ type: String, reflect: true })
-], TabBar.prototype, "alignment", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], TabBar.prototype, "level", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TabBar.prototype, "vertical", void 0);
-__decorate([
-    query('[part="content"')
-], TabBar.prototype, "content", void 0);
-__decorate([
-    query('[part="left-btn"]')
-], TabBar.prototype, "leftBtn", void 0);
-__decorate([
-    query('[part="right-btn"]')
-], TabBar.prototype, "rightBtn", void 0);
-TabBar = __decorate([
-    customElement('ef-tab-bar', {
-        alias: 'coral-tab-bar'
-    })
-], TabBar);
-export { TabBar };

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/tab/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#1a1a1a}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#404040}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level="1"]) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/tab/themes/halo/light';
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
-
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#f2f2f2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#e6e6e6}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #fff}:host([level="1"]) [part=right-btn]{border-left:1px solid #fff}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/tab/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
-
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#3c3c42}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#4a4a4f}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#38383d}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffa041}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#e2e2e2;background-color:#3c3c42}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #000}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #000}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/tab/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
-
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');

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

@@ -1,151 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { FormFieldElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
-import '../icon/index.js';
-/**
- * Form control element for text.
- *
- * @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 {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 TextField extends FormFieldElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * A `CSSResultGroup` that will be used to style the host,
-     * slotted children and the internal template of the element.
-     * @returns CSS template
-     */
-    static get styles(): CSSResultGroup;
-    /**
-     * Set regular expression for input validation
-     */
-    pattern: string;
-    /**
-     * Specify icon to display in input. Value can be icon name
-     */
-    icon: string | null;
-    /**
-     * Specify when icon need to be clickable
-     */
-    iconHasAction: boolean;
-    /**
-     * Set character max limit
-     */
-    maxLength: number | null;
-    /**
-     * Set character min limit
-     */
-    minLength: number | null;
-    /**
-     * Called after the component is first rendered
-     * @param changedProperties Properties which have changed
-     * @returns {void}
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns shouldUpdate
-     */
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
-    /**
-     * Runs on input element `input` event
-     * @param event `input` event
-     * @returns {void}
-     */
-    protected onInputInput(event: InputEvent): void;
-    /**
-     * Runs on input element `change` event
-     * @param event `change` event
-     * @returns {void}
-     */
-    protected onInputChange(event: InputEvent): void;
-    /**
-     * Check if value is changed and fire event
-     * @returns {void}
-     */
-    protected onPossibleValueChange(event: InputEvent): void;
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    protected validateInput(): void;
-    /**
-     * @param error existing state of error
-     * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
-     */
-    protected shouldValidateForMinLength(error: boolean): boolean;
-    /**
-     * Fires event on `icon` click
-     * @returns {void}
-     */
-    protected iconClick(): void;
-    /**
-     * Decorate `<input>` element with common properties extended from form field element:
-     * type="text" - always `text`
-     * part="input" - always "input", used for styling
-     * maxlength - calculated from `this.maxLength`
-     * minlength - calculated from `this.minLength`
-     * pattern - calculated from `this.pattern`
-     * @returns template map
-     */
-    protected get decorateInputMap(): TemplateMap;
-    /**
-     * Renders icon element if property present
-     * @returns {void}
-     */
-    protected renderIcon(): TemplateResult | null;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-text-field': TextField;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-text-field': Partial<TextField> | JSXInterface.HTMLAttributes<TextField>;
-    }
-  }
-}
-
-export {};

package/lib/text-field/index.js

@@ -1,260 +0,0 @@
-import { __decorate } from "tslib";
-import { FormFieldElement, 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
-import '../icon/index.js';
-import { registerOverflowTooltip } from '../tooltip/index.js';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
-/**
- * Form control element for text.
- *
- * @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 {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 TextField = class TextField extends FormFieldElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Set regular expression for input validation
-         */
-        this.pattern = '';
-        /**
-         * Specify icon to display in input. Value can be icon name
-         */
-        this.icon = null;
-        /**
-         * Specify when icon need to be clickable
-         */
-        this.iconHasAction = false;
-        /**
-         * Set character max limit
-         */
-        this.maxLength = null;
-        /**
-         * Set character min limit
-         */
-        this.minLength = null;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * A `CSSResultGroup` that will be used to style the host,
-     * slotted children and the internal template of the element.
-     * @returns CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: inline-block;
-      }
-
-      :host(:focus), :host input:focus {
-        outline: none;
-      }
-      [part=input] {
-        font: inherit;
-        background: none;
-        color: currentColor;
-        border: none;
-        text-align: inherit;
-      }
-      :host([icon]) [part=icon]{
-        display: flex;
-        outline: none;
-      }
-      :host([transparent]) {
-        background: none !important;
-        border: none !important;
-      }
-      :host([icon][icon-has-action]) [part=icon] {
-        cursor: pointer;
-      }
-    `;
-    }
-    /**
-     * Called after the component is first rendered
-     * @param changedProperties Properties which have changed
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        if (this.inputElement) {
-            registerOverflowTooltip(this.inputElement, () => this.value);
-        }
-    }
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns shouldUpdate
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (this.inputValue !== this.value) {
-            this.inputValue = this.value;
-        }
-        if (this.shouldValidateInput(changedProperties)) {
-            this.validateInput();
-        }
-    }
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    /* istanbul ignore next */
-    shouldValidateInput(changedProperties) {
-        // TODO: This validation should be refactored
-        return (changedProperties.has('pattern') || !!(this.pattern && changedProperties.has('value')))
-            || (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')))
-            || (changedProperties.has('maxLength') || !!(this.maxLength && changedProperties.has('value')));
-    }
-    /**
-     * Runs on input element `input` event
-     * @param event `input` event
-     * @returns {void}
-     */
-    onInputInput(event) {
-        this.onPossibleValueChange(event);
-    }
-    /**
-     * Runs on input element `change` event
-     * @param event `change` event
-     * @returns {void}
-     */
-    onInputChange(event) {
-        this.onPossibleValueChange(event);
-    }
-    /**
-     * Check if value is changed and fire event
-     * @returns {void}
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onPossibleValueChange(event) {
-        var _a;
-        const value = ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) || '';
-        this.setValueAndNotify(value);
-    }
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    validateInput() {
-        var _a;
-        let error = !((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checkValidity());
-        /* istanbul ignore next */
-        if (this.shouldValidateForMinLength(error)) {
-            error = !!this.minLength && (this.minLength > this.value.length);
-        }
-        this.notifyErrorChange(error);
-    }
-    /**
-     * @param error existing state of error
-     * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
-     */
-    /* istanbul ignore next */
-    shouldValidateForMinLength(error) {
-        return !!(!error && isIE && this.minLength && !!this.value);
-    }
-    /**
-     * Fires event on `icon` click
-     * @returns {void}
-     */
-    iconClick() {
-        if (this.iconHasAction && !this.disabled) {
-            this.dispatchEvent(new CustomEvent('icon-click', { bubbles: false }));
-        }
-    }
-    /**
-     * Decorate `<input>` element with common properties extended from form field element:
-     * type="text" - always `text`
-     * part="input" - always "input", used for styling
-     * maxlength - calculated from `this.maxLength`
-     * minlength - calculated from `this.minLength`
-     * pattern - calculated from `this.pattern`
-     * @returns template map
-     */
-    get decorateInputMap() {
-        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'text', 'part': 'input', 'maxlength': this.maxLength, 'minlength': this.minLength, 'pattern': this.pattern || null });
-    }
-    /**
-     * Renders icon element if property present
-     * @returns {void}
-     */
-    renderIcon() {
-        return this.icon ? html `
-    <ef-icon
-        role="${ifDefined(this.iconHasAction ? 'button' : undefined)}"
-        part="icon"
-        icon="${this.icon}"
-        aria-label="${ifDefined(this.iconHasAction ? this.icon : undefined)}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        @tap="${this.iconClick}"
-        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
-      ></ef-icon>
-    ` : null;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      ${super.render()}
-      ${this.renderIcon()}
-    `;
-    }
-};
-__decorate([
-    property({ type: String, hasChanged })
-], TextField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], TextField.prototype, "icon", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'icon-has-action' })
-], TextField.prototype, "iconHasAction", void 0);
-__decorate([
-    property({ type: Number, attribute: 'maxlength', reflect: true })
-], TextField.prototype, "maxLength", void 0);
-__decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
-], TextField.prototype, "minLength", void 0);
-TextField = __decorate([
-    customElement('ef-text-field', {
-        alias: 'coral-text-field'
-    })
-], TextField);
-export { TextField };

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

@@ -1,3 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-
-elf.customStyles.define('ef-text-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 [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:#ccc;min-width:1em;padding-left:2px}: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(: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}');