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

package/lib/pagination/index.js

@@ -0,0 +1,552 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,74 @@
+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 };