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

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

@@ -0,0 +1,125 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+/**
+ * Used to display multiple buttons to create a list of commands bar.
+ */
+export declare class ButtonBar extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Element's role attribute for accessibility
+     * `role` should be `radiogroup` when it is managed.
+     */
+    protected defaultRole: 'toolbar' | 'radiogroup';
+    /**
+     * 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;
+    /**
+     * Manages user interaction, only allowing one toggle button to be active at any one time.
+     */
+    managed: boolean;
+    /**
+     * Default slot
+     */
+    private defaultSlot;
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    private manageTabIndex;
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    private isNested;
+    /**
+     * Handles tap event
+     * @param event the param is the event of click and tap handlers
+     * @returns {void}
+     */
+    private onTapHandler;
+    /**
+     * Get the target Button item and handle it with other managed Button items
+     * @param targetButton an Button item is the target of the event
+     * @returns {void}
+     */
+    private manageButtons;
+    /**
+     * Return the array of Element items which is changed in the default slot
+     * @returns the array of Element of the default slot
+     */
+    private getElementsOfSlot;
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    private getFocusableButtons;
+    /**
+     * Filter Button classes by the toggles property
+     * @param buttons the array of Button items is the converted nodes of the default slot
+     * @returns filtered Button items by the toggles property
+     */
+    private getManagedButtons;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-button-bar': ButtonBar;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-button-bar': Partial<ButtonBar> | JSXInterface.HTMLAttributes<ButtonBar>;
+    }
+  }
+}
+
+export {};

package/lib/button-bar/index.js

@@ -0,0 +1,295 @@
+var ButtonBar_1;
+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';
+import { Button } from '../button/index.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
+/**
+ * Used to display multiple buttons to create a list of commands bar.
+ */
+let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Element's role attribute for accessibility
+         * `role` should be `radiogroup` when it is managed.
+         */
+        this.defaultRole = 'toolbar';
+        /**
+         * Manages user interaction, only allowing one toggle button to be active at any one time.
+         */
+        this.managed = false;
+        /**
+         * Default slot
+         */
+        this.defaultSlot = createRef();
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-flex;
+        z-index: 0;
+      }
+      :host ::slotted(ef-button) {
+        margin: 0;
+      }
+      :host ::slotted(ef-button-bar) {
+        border-radius: 0;
+        margin: 0;
+        box-shadow: none;
+        overflow: visible;
+        background: none;
+        z-index: auto;
+      }
+      :host ::slotted(ef-button:hover) {
+        z-index: 1;
+      }
+      :host ::slotted(ef-button:focus) {
+        z-index: 2;
+      }
+      :host ::slotted(ef-button:not(:hover):not(:focus)) {
+        box-shadow: none;
+      }
+      @media (pointer: coarse){
+        :host ::slotted(ef-button) {
+          box-shadow: none;
+        }
+      }
+      :host ::slotted(ef-button:first-of-type) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      :host ::slotted(ef-button:last-of-type) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      :host ::slotted(ef-button:not(:first-of-type):not(:last-of-type)) {
+        border-radius: 0;
+      }
+      :host ::slotted(:not(ef-button):not(ef-button-bar)) {
+        display: none;
+      }
+    `;
+    }
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('tap', this.onTapHandler);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.manageTabIndex();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Tab':
+                // To prevent inserting button case, make sure there is only one tabIndex=0 in the buttons
+                this.manageTabIndex();
+                break;
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.onTapHandler(event);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                // Prevent calling twice if this component is nested
+                !this.isNested() && this.navigateToSibling('next');
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                // Managed works as role radiogroup so `Up` and `Down` key can navigate among radios in the group
+                this.managed && this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                !this.isNested() && this.navigateToSibling('previous');
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.managed && this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                !this.isNested() && this.first();
+                break;
+            case 'End':
+                !this.isNested() && this.last();
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        const focusedButtonIndex = buttons.findIndex(button => button === document.activeElement);
+        const nextButton = direction === 'next'
+            ? buttons[focusedButtonIndex + 1] || buttons[0]
+            : buttons[focusedButtonIndex - 1] || buttons[buttons.length - 1];
+        nextButton.focus();
+        this.rovingTabIndex(nextButton, buttons);
+    }
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    first() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[0].focus();
+        this.rovingTabIndex(buttons[0], buttons);
+    }
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    last() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[buttons.length - 1].focus();
+        this.rovingTabIndex(buttons[buttons.length - 1], buttons);
+    }
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    rovingTabIndex(target, buttons) {
+        buttons.forEach((button) => {
+            button.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    manageTabIndex() {
+        if (this.isNested()) {
+            return;
+        }
+        const buttons = this.getFocusableButtons();
+        if (buttons && buttons.length > 0) {
+            // Set tabindex=0 to previous focused button when new button added If not found set it to first button instead
+            let focusedButtonIndex = buttons.findIndex(button => document.activeElement === button);
+            if (focusedButtonIndex === -1) {
+                focusedButtonIndex = 0;
+            }
+            this.rovingTabIndex(buttons[focusedButtonIndex], buttons);
+        }
+    }
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    isNested() {
+        return this.parentElement instanceof ButtonBar_1;
+    }
+    /**
+     * Handles tap event
+     * @param event the param is the event of click and tap handlers
+     * @returns {void}
+     */
+    onTapHandler(event) {
+        if (!this.managed) {
+            return;
+        }
+        const target = event.target;
+        if (target instanceof Button && target.toggles) {
+            event.stopPropagation();
+            this.manageButtons(target);
+        }
+        target.focus();
+        this.rovingTabIndex(target, this.getFocusableButtons());
+    }
+    /**
+     * Get the target Button item and handle it with other managed Button items
+     * @param targetButton an Button item is the target of the event
+     * @returns {void}
+     */
+    manageButtons(targetButton) {
+        const managedButtons = this.getManagedButtons();
+        const isTargetOfManaged = managedButtons.some(managedButton => managedButton === targetButton);
+        if (!isTargetOfManaged) {
+            return;
+        }
+        managedButtons.forEach(managedButton => {
+            managedButton.active = managedButton === targetButton;
+        });
+    }
+    /**
+     * Return the array of Element items which is changed in the default slot
+     * @returns the array of Element of the default slot
+     */
+    getElementsOfSlot() {
+        var _a;
+        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+    }
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    getFocusableButtons() {
+        return [...this.querySelectorAll('ef-button,coral-button')].filter(button => !button.disabled);
+    }
+    /**
+     * Filter Button classes by the toggles property
+     * @param buttons the array of Button items is the converted nodes of the default slot
+     * @returns filtered Button items by the toggles property
+     */
+    getManagedButtons() {
+        const elements = this.getElementsOfSlot();
+        return elements.filter(element => element instanceof Button && element.toggles);
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `<slot ${ref(this.defaultSlot)} ></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ButtonBar.prototype, "managed", void 0);
+ButtonBar = ButtonBar_1 = __decorate([
+    customElement('ef-button-bar', {
+        alias: 'coral-split-button'
+    })
+], ButtonBar);
+export { ButtonBar };

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+
+elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.5);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.5)}:host ::slotted(ef-button:not(:focus):hover),:host ::slotted(ef-button:not(:focus)[active][toggles]:hover){border-color:#0d0d0d}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+
+elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.25);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.25)}:host ::slotted(ef-button:not(:focus):hover),:host ::slotted(ef-button:not(:focus)[active][toggles]:hover){border-color:#ccc}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+
+elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.6);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.6)}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}:host ::slotted(ef-button){box-shadow:none}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+
+elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.3);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.3)}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}:host ::slotted(ef-button){box-shadow:none}');

package/lib/calendar/constants.d.ts

@@ -0,0 +1,26 @@
+export declare enum RenderView {
+    DAY = "day",
+    MONTH = "month",
+    YEAR = "year"
+}
+export declare const FIRST_DAY_OF_WEEK = 0;
+export declare const YEARS_PER_YEAR_VIEW = 16;
+export declare const DAY_VIEW: {
+    rowCount: number;
+    columnCount: number;
+    totalCount: number;
+};
+export declare const YEAR_VIEW: {
+    rowCount: number;
+    columnCount: number;
+    totalCount: number;
+};
+export declare const MONTH_VIEW: {
+    rowCount: number;
+    columnCount: number;
+    totalCount: number;
+};
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export declare const CalendarLocaleScope: string;

package/lib/calendar/constants.js

@@ -0,0 +1,28 @@
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+export var RenderView;
+(function (RenderView) {
+    RenderView["DAY"] = "day";
+    RenderView["MONTH"] = "month";
+    RenderView["YEAR"] = "year";
+})(RenderView || (RenderView = {}));
+export const FIRST_DAY_OF_WEEK = 0; // 0 for Sunday
+export const YEARS_PER_YEAR_VIEW = 16; /* must be a square number */
+export const DAY_VIEW = {
+    rowCount: 6,
+    columnCount: 7,
+    totalCount: 6 * 7
+};
+export const YEAR_VIEW = {
+    rowCount: 4,
+    columnCount: 4,
+    totalCount: 4 * 4
+};
+export const MONTH_VIEW = {
+    rowCount: 4,
+    columnCount: 4,
+    totalCount: 4 * 4
+};
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export const CalendarLocaleScope = uuid();