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

package/lib/pagination/index.js

@@ -1,552 +0,0 @@
-import { __decorate } from "tslib";
-import { BasicElement, html, css, WarningNotice, DeprecationNotice } 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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { VERSION } from '../version.js';
-import '../button/index.js';
-import '../button-bar/index.js';
-import '../layout/index.js';
-import '../text-field/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
-import { translate } from '@refinitiv-ui/translate';
-const pageDeprecation = new DeprecationNotice('Property `page` is deprecated, use `value` instead.');
-const pageSizeDeprecation = new DeprecationNotice('Property `pageSize ` is deprecated, use `max` instead.');
-const totalItemsDeprecation = new DeprecationNotice('Property `totalItems ` is deprecated, use `max` instead.');
-/**
- * Used to control and navigate through multiple pages
- * @fires value-changed - Fired when the `value` property is changed
- */
-let Pagination = class Pagination extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Current page internal current page value
-         */
-        this._value = '';
-        /**
-         * Max page
-         */
-        this._max = '';
-        /**
-         * Number of item per page internal value
-         * @deprecated
-         */
-        this._pageSize = '';
-        /**
-         * Total items internal value
-         * @deprecated
-         */
-        this._totalItems = '';
-        /**
-         * Set state to disable
-         */
-        this.disabled = false;
-        /**
-         * State for check the input focus
-         */
-        this.inputFocused = false;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * Internal current page
-     * @returns current page
-     */
-    get internalValue() {
-        let value = parseInt(this._value, 10) || 0;
-        if (value <= 0) {
-            value = 1;
-        }
-        return value;
-    }
-    /**
-     * Current page
-     */
-    get value() {
-        return this._value;
-    }
-    /**
-     * Set current page
-     * @param value current page
-     */
-    set value(value) {
-        let newValue = value;
-        if (!newValue || !this.validatePage(newValue, true, 'value')) {
-            newValue = '';
-        }
-        const oldValue = this._value;
-        if (oldValue !== newValue) {
-            this._value = newValue.toString();
-        }
-        this.requestUpdate('value', oldValue);
-    }
-    /**
-     * Internal max page
-     * @returns max page
-     */
-    get internalMax() {
-        const max = parseInt(this._max, 10) || 0;
-        const pageSize = this.internalPageSize;
-        const totalItems = this.internalTotalitems;
-        if (!max && !totalItems) {
-            return Infinity;
-        }
-        else if (max >= 1) {
-            return max;
-        }
-        if (pageSize > 0) {
-            const totalPage = Math.ceil(totalItems / pageSize);
-            return totalPage >= 1 ? totalPage : 1;
-        }
-        return 1;
-    }
-    /**
-     * Max page
-     * @returns max page
-     */
-    get max() {
-        return this._max;
-    }
-    /**
-     * Set max page
-     * @param value max page
-     */
-    set max(value) {
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'max')) {
-            newValue = '';
-        }
-        const oldValue = this._max;
-        if (oldValue !== newValue) {
-            this._max = newValue.toString();
-        }
-        this.requestUpdate('max', oldValue);
-    }
-    /**
-     * Current page
-     * @returns current page
-     * @deprecated
-     * @ignore
-     */
-    get page() {
-        pageDeprecation.once();
-        return this._value;
-    }
-    /**
-     * Set current page
-     * @param value - Set current page
-     * @deprecated
-     * @ignore
-     */
-    set page(value) {
-        pageDeprecation.show();
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'page')) {
-            newValue = '';
-        }
-        const oldValue = this._value;
-        if (oldValue !== newValue) {
-            this._value = newValue.toString();
-        }
-        this.requestUpdate('page', oldValue);
-    }
-    /**
-     * Number of item per page
-     * @returns number of items per page
-     * @deprecated
-     * @ignore
-     */
-    get pageSize() {
-        pageSizeDeprecation.once();
-        return this._pageSize;
-    }
-    /**
-     * Set number of item per page
-     * @param value - number of item per page
-     * @deprecated
-     * @ignore
-     */
-    set pageSize(value) {
-        pageSizeDeprecation.show();
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'page-size')) {
-            newValue = '';
-        }
-        // Validate to show warning only, need to keep developer value.
-        // Check page still is in supported range if page-size changed
-        const newTotalPage = Math.ceil(this.internalTotalitems / (parseInt(newValue, 10) || 1)) || 1;
-        if (this.internalValue > newTotalPage) {
-            new WarningNotice(`${this.localName} : The specified value "${newValue}" of page-size caused the value of page property is out of supported range.`).show();
-        }
-        const oldValue = this._pageSize;
-        if (oldValue !== newValue) {
-            this._pageSize = newValue;
-        }
-        this.requestUpdate('pageSize', oldValue);
-    }
-    /**
-     * Internal page size
-     * @deprecated
-     * @returns page size
-     */
-    get internalPageSize() {
-        return parseInt(this._pageSize, 10);
-    }
-    /**
-     * Internal total items
-     * @returns total items
-     * @deprecated
-     */
-    get internalTotalitems() {
-        const totalItems = parseInt(this._totalItems, 10) || 0;
-        return totalItems >= 1 ? totalItems : 0;
-    }
-    /**
-     * Total items
-     * @returns total items
-     * @deprecated
-     * @ignore
-     */
-    get totalItems() {
-        totalItemsDeprecation.once();
-        return this._totalItems;
-    }
-    /**
-     * Set total items
-     * @param value total items
-     * @deprecated
-     * @ignore
-     */
-    set totalItems(value) {
-        totalItemsDeprecation.show();
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'total-items')) {
-            newValue = '';
-        }
-        // Validate to show warning only, need to keep developer value.
-        // Check page still is in supported range if total-item changed
-        const newTotalPage = Math.ceil((parseInt(newValue, 10) || 1) / this.internalPageSize) || 1;
-        if (this.internalValue > newTotalPage) {
-            new WarningNotice(`${this.localName} : The specified value "${newValue}" of total-items caused the value of page property is out of supported range.`).show();
-        }
-        const oldValue = this._totalItems;
-        if (oldValue !== newValue) {
-            this._totalItems = newValue;
-        }
-        this.requestUpdate('totalItems', oldValue);
-    }
-    /**
-     * Get infinite pagination state
-     * @returns infinite pagination state
-     */
-    get infinitePaginate() {
-        return this.internalMax === Infinity; // internalMax always returns 1-Infinity
-    }
-    /**
-     * Getter for display text in the input
-     * @returns input text
-     */
-    get inputText() {
-        if (this.inputFocused) {
-            return this.internalValue.toString();
-        }
-        else {
-            return (this.infinitePaginate ? this.t('PAGE', { page: this.internalValue }) : this.t('PAGE_OF', { page: this.internalValue, pageTotal: this.internalMax }));
-        }
-    }
-    /**
-     * State for checking the first page button is available
-     */
-    get useFirstButton() {
-        return !this.disabled && this.internalValue >= 2;
-    }
-    /**
-     * State for checking the previous page button is available
-     */
-    get usePreviousButton() {
-        return this.useFirstButton;
-    }
-    /**
-     * State for checking the next page button is available
-     */
-    get useNextButton() {
-        return !this.disabled && this.internalValue < this.internalMax;
-    }
-    /**
-     * State for checking the last page button is available
-     */
-    get useLastButton() {
-        return this.useNextButton && !this.infinitePaginate;
-    }
-    /**
-     * @override
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (this.inputFocused && changedProperties.has('inputFocused')) {
-            void this.selectInput();
-        }
-    }
-    /**
-     * Validate page value which returns true when value is valid
-     * @param value value
-     * @param warning show warning message when value is invalid
-     * @param propName property name to show in warning message
-     * @returns result of validation
-     */
-    validatePage(value, warning = false, propName = '') {
-        if ((/^[1-9]([0-9]+)?$/).test(value)) {
-            return true;
-        }
-        else {
-            if (value !== null && warning && propName) {
-                new WarningNotice(`${this.localName} : The specified value "${value}" of ${propName} property is not valid, The value must be integer and greater than 0.`).show();
-            }
-            return false;
-        }
-    }
-    /**
-     * Handles action when Enter and Tab key is press onto the input
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    onInputKeyDown(event) {
-        var _a, _b;
-        const isEnter = event.key === 'Enter' || event.keyCode === 13;
-        const isTab = event.key === 'Tab' || event.keyCode === 9;
-        if (isEnter || isTab) {
-            this.updatePageInput();
-            if (isEnter) {
-                this.input.blur();
-                event.preventDefault();
-                /**
-                 * Issue only in firefox
-                 * cannot blur() or focus() to this.input so create a temp to this.input loses focus
-                 */
-                const temp = document.createElement('input');
-                (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(temp);
-                temp.focus();
-                this.input.blur();
-                (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeChild(temp);
-            }
-        }
-    }
-    /**
-     * Handles action when input focused change
-     * @param event focus change event
-     * @returns {void}
-     */
-    onInputFocusedChanged(event) {
-        this.inputFocused = event.detail.value;
-        if (!this.inputFocused) {
-            this.updatePageInput();
-        }
-    }
-    /**
-     * Update page by using value from the input
-     * @returns {void}
-     */
-    updatePageInput() {
-        // Prevent update page to the same value
-        if (this.value === this.input.value) {
-            return;
-        }
-        const oldValue = this.value;
-        let newValue = parseInt(this.input.value, 10);
-        // Reset input and boundary value into supported range.
-        if (this.validatePage(this.input.value)) {
-            if (newValue > this.internalMax) {
-                newValue = this.internalMax;
-            }
-            this.value = newValue.toString();
-        }
-        // When input value is invalid in case less than support range (value<1), then reset value = '1'.
-        else if (!isNaN(newValue) && newValue < 1) {
-            this.value = '1';
-        }
-        if (this.value !== oldValue) {
-            this.notifyValueChange();
-        }
-    }
-    /**
-     * Select text in input when update element complete
-     * @returns returns a promise void
-     */
-    async selectInput() {
-        await this.updateComplete;
-        this.input.select();
-    }
-    /**
-     * Updates page value depending on direction
-     * @param direction page value direction
-     * @param event whether the event page-changed should fire
-     * @returns {void}
-     */
-    updatePage(direction, event = false) {
-        /**
-         * Handle in case the value of max property is greater than value of value/page property,
-         * which it might happen by using developer API.
-         */
-        let page = this.internalValue;
-        if (page > this.internalMax) {
-            page = this.internalMax + 1;
-        }
-        const limit = direction === 'increment' ? page >= this.internalMax : page <= 1;
-        if (!limit) {
-            this.value = direction === 'increment' ? (page + 1).toString() : (page - 1).toString();
-            if (event) {
-                this.notifyValueChange();
-            }
-        }
-    }
-    /**
-     * Fires event when value change
-     * @returns {void}
-     */
-    notifyValueChange() {
-        this.notifyPropertyChange('value', this.value);
-        this.notifyPropertyChange('page', this.value); // deprecated. support backwards compatibility.
-    }
-    /**
-     * Go to the next page
-     * @returns {void}
-     */
-    next() {
-        this.updatePage('increment');
-    }
-    /**
-     * Go to the next page and fires event
-     * @returns {void}
-     */
-    onNextTap() {
-        this.updatePage('increment', true);
-    }
-    /**
-     * Go to the previous page
-     * @returns {void}
-     */
-    previous() {
-        this.updatePage('decrement');
-    }
-    /**
-     * Go to the previous page and fires event
-     * @returns {void}
-     */
-    onPreviousTap() {
-        this.updatePage('decrement', true);
-    }
-    /**
-     * Go to the first page
-     * @returns {void}
-     */
-    first() {
-        this.value = '1';
-    }
-    /**
-     * Go to the first page and fires event
-     * @returns {void}
-     */
-    onFirstTap() {
-        this.first();
-        this.notifyValueChange();
-    }
-    /**
-     * Go to the last page
-     * @returns {void}
-     */
-    last() {
-        if (this.infinitePaginate) {
-            new WarningNotice(`${this.localName}: Cannot call "last()" when "max" attribute/property is unset.`).show();
-            return;
-        }
-        this.value = this.internalMax.toString();
-    }
-    /**
-     * Go to the last page and fires event
-     * @returns {void}
-     */
-    onLastTap() {
-        this.last();
-        this.notifyValueChange();
-    }
-    /**
-     * 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;
-      }
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      <ef-layout part="container" flex nowrap>
-        <ef-button-bar part="buttons">
-          <ef-button id="first" icon="skip-to-start" @tap="${this.onFirstTap}" .disabled=${!this.useFirstButton}></ef-button>
-          <ef-button id="previous" icon="left" @tap="${this.onPreviousTap}" .disabled=${!this.usePreviousButton}></ef-button>
-        </ef-button-bar>
-        <ef-text-field
-          id="input"
-          part="input"
-          @focused-changed=${this.onInputFocusedChanged}
-          @keydown=${this.onInputKeyDown}
-          .value=${this.inputText}
-          .disabled=${this.disabled}
-          no-spinner></ef-text-field>
-        <ef-button-bar part="buttons">
-          <ef-button id="next" icon="right" @tap="${this.onNextTap}" .disabled=${!this.useNextButton}></ef-button>
-          <ef-button id="last" icon="skip-to-end" @tap="${this.onLastTap}" .disabled=${!this.useLastButton}></ef-button>
-        </ef-button-bar>
-      </ef-layout>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], Pagination.prototype, "value", null);
-__decorate([
-    property({ type: String })
-], Pagination.prototype, "max", null);
-__decorate([
-    property({ type: String })
-], Pagination.prototype, "page", null);
-__decorate([
-    property({ type: String, attribute: 'page-size' })
-], Pagination.prototype, "pageSize", null);
-__decorate([
-    property({ type: String, attribute: 'total-items' })
-], Pagination.prototype, "totalItems", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Pagination.prototype, "disabled", void 0);
-__decorate([
-    query('#input')
-], Pagination.prototype, "input", void 0);
-__decorate([
-    translate()
-], Pagination.prototype, "t", void 0);
-__decorate([
-    state()
-], Pagination.prototype, "inputFocused", void 0);
-Pagination = __decorate([
-    customElement('ef-pagination', {
-        alias: 'emerald-pagination'
-    })
-], Pagination);
-export { Pagination };

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

@@ -1,6 +0,0 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/button-bar/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
-
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{margin:1px 0}:host [part=buttons]{margin:0}');

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

@@ -1,6 +0,0 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
-import '@refinitiv-ui/elements/lib/button-bar/themes/halo/light';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
-
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{margin:1px 0}:host [part=buttons]{margin:0}');

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

@@ -1,6 +0,0 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/button-bar/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
-
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}');

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

@@ -1,6 +0,0 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/button-bar/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
-
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}');

package/lib/panel/index.d.ts

@@ -1,48 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
-/**
- * A container for components.
- * It provides a standard background color and padding, depends on theme.
- */
-export declare class Panel extends BasicElement {
-    /**
-     * 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;
-    /**
-     * Apply default padding from theme
-     */
-    spacing: boolean;
-    /**
-     * Set panel background to transparent
-     */
-    transparent: boolean;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-panel': Panel;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-panel': Partial<Panel> | JSXInterface.HTMLAttributes<Panel>;
-    }
-  }
-}
-
-export {};

package/lib/panel/index.js

@@ -1,74 +0,0 @@
-import { __decorate } from "tslib";
-import { BasicElement, html, css } 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 { VERSION } from '../version.js';
-/**
- * A container for components.
- * It provides a standard background color and padding, depends on theme.
- */
-let Panel = class Panel extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Apply default padding from theme
-         */
-        this.spacing = false;
-        /**
-         * Set panel background to transparent
-         */
-        this.transparent = 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 {
-        position: relative;
-        display: block;
-        overflow: hidden;
-        box-sizing: border-box;
-      }
-
-      :host([transparent]) {
-        background: transparent;
-        border: 0;
-      }
-
-      :host([spacing]) {
-        padding: 10px; /* default padding - can be overridden by theme */
-      }
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `<slot></slot>`;
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Panel.prototype, "spacing", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Panel.prototype, "transparent", void 0);
-Panel = __decorate([
-    customElement('ef-panel', {
-        alias: 'coral-panel'
-    })
-], Panel);
-export { Panel };