@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,193 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../icon/index.js';
+declare type SelectionIndex = number | null;
+/**
+ * Form control element for text
+ *
+ * @fires value-changed - Dispatched when value changes
+ * @fires error-changed - Dispatched when error state changes
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=] - Input's value
+ *
+ * @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
+ */
+export declare class TextField 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.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Set regular expression for input validation
+     */
+    pattern: string;
+    /**
+     * Set place holder text
+     */
+    placeholder: string;
+    /**
+     * Set state to error
+     */
+    error: boolean;
+    /**
+     * Aria indicating if the field is required
+     * @ignore
+     */
+    ariaRequired: string;
+    /**
+     * Aria description used to describe input or error to screen reader
+     * @ignore
+     */
+    ariaDescription: string;
+    /**
+     * Aria label used to label input to screen reader
+     * @ignore
+     */
+    ariaLabel: string;
+    /**
+     * Set state to warning
+     */
+    warning: boolean;
+    /**
+     * Specify icon to display in input. Value can be icon name
+     */
+    icon: string;
+    /**
+     * Specify when icon need to be clickable
+     */
+    iconHasAction: boolean;
+    /**
+     * Disables all other states and border/background styles.
+     * Use with advanced composite elements requiring e.g. multi selection in
+     * combo-box when parent container handles element states.
+     */
+    transparent: boolean;
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
+    /**
+     * Get native input element from shadow roots
+     */
+    private inputElement;
+    /**
+     * Selection start index
+     */
+    get selectionStart(): number | null;
+    set selectionStart(index: SelectionIndex);
+    /**
+     * Selection end index
+     */
+    get selectionEnd(): number | null;
+    set selectionEnd(index: SelectionIndex);
+    /**
+     * Select the contents of input
+     * @returns void
+     */
+    select(): void;
+    /**
+     * Set the selection range
+     * @param startSelection Start of selection
+     * @param endSelection End of the selection
+     * @returns {void}
+     */
+    setSelectionRange(startSelection: number, endSelection: number): void;
+    /**
+     * 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
+     */
+    private shouldValidateInput;
+    /**
+     * Renders icon element if property present
+     * @returns {void}
+     */
+    private renderIcon;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+    /**
+     * Check if value is changed and fire event
+     * @returns {void}
+     */
+    private onPossibleValueChange;
+    /**
+     * Validate input according `pattern`, `minLength` and `maxLength` properties
+     * change state of `error` property according pattern validation
+     * @returns void
+     */
+    private validateInput;
+    /**
+     * @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
+     */
+    private shouldValidateForMinLength;
+    /**
+     * Fires event on `icon` click
+     * @returns {void}
+     */
+    private iconClick;
+    /**
+     * Handles the focus event
+     * @returns {void}
+     */
+    private onFocus;
+    /**
+     * Query field's label from host to native input
+     * to support aria label when using screen reader
+     * @returns {void}
+     */
+    private queryFieldLabel;
+    /**
+     * Query field's description from host to native input
+     * to support aria description when using screen reader
+     * @returns {void}
+     */
+    private queryFieldDescription;
+}
+export {};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-text-field': TextField;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-text-field': Partial<TextField> | JSXInterface.ControlHTMLAttributes<TextField>;
+    }
+  }
+}
+
+export {};

package/lib/text-field/index.js

@@ -0,0 +1,409 @@
+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 { 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
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=] - Input's value
+ *
+ * @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
+ */
+let TextField = class TextField extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set regular expression for input validation
+         */
+        this.pattern = '';
+        /**
+         * Set place holder text
+         */
+        this.placeholder = '';
+        /**
+         * Set state to error
+         */
+        this.error = false;
+        /**
+         * Aria indicating if the field is required
+         * @ignore
+         */
+        this.ariaRequired = 'false';
+        /**
+         * Aria description used to describe input or error to screen reader
+         * @ignore
+         */
+        this.ariaDescription = '';
+        /**
+         * Aria label used to label input to screen reader
+         * @ignore
+         */
+        this.ariaLabel = '';
+        /**
+         * Set state to warning
+         */
+        this.warning = false;
+        /**
+         * Specify icon to display in input. Value can be icon name
+         */
+        this.icon = '';
+        /**
+         * Specify when icon need to be clickable
+         */
+        this.iconHasAction = false;
+        /**
+         * Disables all other states and border/background styles.
+         * Use with advanced composite elements requiring e.g. multi selection in
+         * combo-box when parent container handles element states.
+         */
+        this.transparent = 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;
+      }
+    `;
+    }
+    /**
+     * Selection start index
+     */
+    get selectionStart() {
+        return this.inputElement.selectionStart;
+    }
+    set selectionStart(index) {
+        this.inputElement.selectionStart = index;
+    }
+    /**
+     * Selection end index
+     */
+    get selectionEnd() {
+        return this.inputElement.selectionEnd;
+    }
+    set selectionEnd(index) {
+        this.inputElement.selectionEnd = index;
+    }
+    /**
+     * Select the contents of input
+     * @returns void
+     */
+    select() {
+        if (!this.disabled && !this.readonly) {
+            this.inputElement.select();
+        }
+    }
+    /**
+     * Set the selection range
+     * @param startSelection Start of selection
+     * @param endSelection End of the selection
+     * @returns {void}
+     */
+    setSelectionRange(startSelection, endSelection) {
+        this.inputElement.setSelectionRange(startSelection, endSelection);
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        registerOverflowTooltip(this.inputElement, () => this.value);
+        this.addEventListener('focus', this.onFocus);
+    }
+    /**
+     * 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.inputElement.value !== this.value) {
+            this.inputElement.value = 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
+     */
+    shouldValidateInput(changedProperties) {
+        return (changedProperties.has('pattern') || !!(this.pattern && changedProperties.has('value')))
+            || (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')));
+    }
+    /**
+     * 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 `
+      <input
+        type="text"
+        part="input"
+        aria-required="${this.ariaRequired}"
+        aria-label="${ifDefined(this.ariaLabel || undefined)}"
+        aria-invalid="${ifDefined(this.error || undefined)}"
+        aria-description="${ifDefined(this.ariaDescription || undefined)}"
+        ?readonly="${this.readonly}"
+        ?disabled="${this.disabled}"
+        placeholder="${ifDefined(this.placeholder || undefined)}"
+        maxlength="${ifDefined(this.maxLength || undefined)}"
+        minlength="${ifDefined(this.minLength || undefined)}"
+        @input="${this.onPossibleValueChange}"
+        @change="${this.onPossibleValueChange}"
+        pattern="${ifDefined(this.pattern || undefined)}"
+        autocomplete="off"
+      />
+      ${this.renderIcon()}
+    `;
+    }
+    /**
+     * Check if value is changed and fire event
+     * @returns {void}
+     */
+    onPossibleValueChange() {
+        const value = this.inputElement.value;
+        this.setValueAndNotify(value);
+    }
+    /**
+     * Validate input according `pattern`, `minLength` and `maxLength` properties
+     * change state of `error` property according pattern validation
+     * @returns void
+     */
+    validateInput() {
+        let error = !this.inputElement.checkValidity();
+        if (this.shouldValidateForMinLength(error)) {
+            error = !!this.minLength && (this.minLength > this.value.length);
+        }
+        if (this.error !== error) {
+            this.error = error;
+            this.notifyPropertyChange('error', this.error);
+            this.queryFieldDescription();
+        }
+    }
+    /**
+     * @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
+     */
+    shouldValidateForMinLength(error) {
+        return !!(!error && isIE && this.minLength && !!this.value);
+    }
+    /**
+     * Fires event on `icon` click
+     * @returns {void}
+     */
+    iconClick() {
+        if (this.iconHasAction) {
+            /**
+             * Dispatched only when element has icon-has-action attribute and icon is clicked
+             */
+            this.dispatchEvent(new CustomEvent('icon-click', { bubbles: false }));
+        }
+    }
+    /**
+     * Handles the focus event
+     * @returns {void}
+     */
+    onFocus() {
+        this.queryFieldLabel();
+        this.queryFieldDescription();
+    }
+    /**
+     * Query field's label from host to native input
+     * to support aria label when using screen reader
+     * @returns {void}
+     */
+    queryFieldLabel() {
+        if (this.hasAttribute('aria-labelledby')) {
+            const ids = this.getAttribute('aria-labelledby');
+            if (!ids) {
+                return;
+            }
+            const elementIds = ids.split(' ');
+            elementIds.forEach(id => {
+                const element = document.getElementById(id);
+                if (!element) {
+                    return;
+                }
+                const label = element.textContent || '';
+                if (this.ariaLabel && label) {
+                    this.ariaLabel += ' ';
+                }
+                this.ariaLabel += label;
+            });
+        }
+        else if (this.hasAttribute('aria-label')) {
+            this.ariaLabel = this.getAttribute('aria-label') || '';
+        }
+        else if (this.id) {
+            const labelForElement = document.querySelector(`label[for="${this.id}"]`);
+            if (!labelForElement) {
+                return;
+            }
+            this.ariaLabel = labelForElement.textContent || '';
+        }
+    }
+    /**
+     * Query field's description from host to native input
+     * to support aria description when using screen reader
+     * @returns {void}
+     */
+    queryFieldDescription() {
+        if (!this.hasAttribute('aria-describedby')) {
+            // Support `aria-description` only if `aria-describedby` is not in use.
+            if (!this.hasAttribute('aria-description')) {
+                return;
+            }
+            this.ariaDescription = this.getAttribute('aria-description') || '';
+            return;
+        }
+        this.ariaDescription = '';
+        const ids = this.getAttribute('aria-describedby');
+        if (!ids) {
+            return;
+        }
+        // In scenarios where there is multiple ids
+        const elementIds = ids.split(' ');
+        elementIds.forEach(id => {
+            const element = document.getElementById(id);
+            if (!element) {
+                return;
+            }
+            const text = element.textContent || '';
+            if (this.ariaDescription && text) {
+                this.ariaDescription += ' ';
+            }
+            this.ariaDescription += text;
+        });
+    }
+};
+__decorate([
+    property({ type: String, hasChanged })
+], TextField.prototype, "pattern", void 0);
+__decorate([
+    property({ type: String })
+], TextField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TextField.prototype, "error", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-required' })
+], TextField.prototype, "ariaRequired", void 0);
+__decorate([
+    property({ type: String })
+], TextField.prototype, "ariaDescription", void 0);
+__decorate([
+    property({ type: String })
+], TextField.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TextField.prototype, "warning", 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: Boolean, reflect: true })
+], TextField.prototype, "transparent", 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);
+__decorate([
+    query('[part="input"]')
+], TextField.prototype, "inputElement", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], TextField.prototype, "selectionStart", null);
+__decorate([
+    property({ type: Number, attribute: false })
+], TextField.prototype, "selectionEnd", null);
+TextField = __decorate([
+    customElement('ef-text-field', {
+        alias: 'coral-text-field'
+    })
+], TextField);
+export { TextField };

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

@@ -0,0 +1,3 @@
+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}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+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:#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 [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:#404040;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:#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}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+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: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)}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+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: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)}');