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

package/lib/button-bar/index.js

@@ -1,155 +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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { VERSION } from '../version.js';
-import { Button } from '../button/index.js';
-/**
- * Used to display multiple buttons to create a list of commands bar.
- */
-let ButtonBar = class ButtonBar extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Manages user interaction, only allowing one toggle button to be active at any one time.
-         */
-        this.managed = 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 {
-        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);
-    }
-    /**
-     * 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);
-        }
-    }
-    /**
-     * 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() {
-        return this.defaultSlot.assignedNodes()
-            .filter(node => node instanceof Element);
-    }
-    /**
-     * 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></slot>`;
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ButtonBar.prototype, "managed", void 0);
-__decorate([
-    query('slot:not([name])')
-], ButtonBar.prototype, "defaultSlot", void 0);
-ButtonBar = __decorate([
-    customElement('ef-button-bar', {
-        alias: 'coral-split-button'
-    })
-], ButtonBar);
-export { ButtonBar };

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

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

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

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

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

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

@@ -1,28 +0,0 @@
-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();

package/lib/calendar/index.d.ts

@@ -1,412 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues, MultiValue } from '@refinitiv-ui/core';
-import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
-import { CalendarFilter } from './types';
-import './locales.js';
-import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
-export { CalendarFilter };
-/**
- * Standard calendar element
- *
- * @fires value-changed - Fired when the `value` changes.
- * @fires view-changed - Fired when the `view` changes.
- *
- * @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
- *
- * @slot footer - Adds slotted content into the footer of the calendar control
- */
-export declare class Calendar extends ControlElement implements MultiValue {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    protected readonly defaultRole: string | null;
-    /**
-     * 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;
-    /**
-     * Reference to the view button
-     */
-    private viewBtnRef;
-    private _min;
-    /**
-    * Set minimum date
-    * @param min min date
-    * @default -
-    */
-    set min(min: string);
-    get min(): string;
-    private _max;
-    /**
-    * Set maximum date
-    * @param max max date
-    * @default -
-    */
-    set max(max: string);
-    get max(): string;
-    /**
-    * Only enable weekdays
-    */
-    weekdaysOnly: boolean;
-    /**
-    * Only enable weekends
-    */
-    weekendsOnly: boolean;
-    /**
-    * Custom filter, used for enabling/disabling certain dates
-    * @type {CalendarFilter | null}
-    */
-    filter: CalendarFilter | null;
-    private _view;
-    /**
-    * Current calendar view date
-    * @param view view date
-    * @default -
-    */
-    set view(view: string);
-    get view(): string;
-    private localFirstDayOfWeek;
-    private localMonthsNames;
-    private localWeekdaysNames;
-    private _firstDayOfWeek;
-    /**
-     * Set the first day of the week.
-     * 0 - for Sunday, 6 - for Saturday
-     * @param firstDayOfWeek The first day of the week
-     * @type {number | null}
-     * @default null
-     */
-    set firstDayOfWeek(firstDayOfWeek: number);
-    get firstDayOfWeek(): number;
-    /**
-    * Set to switch to range select mode
-    */
-    range: boolean;
-    /**
-    * Set to switch to multiple select mode
-    */
-    multiple: boolean;
-    /**
-    * Current date time value
-    * @param value Calendar value
-    * @default -
-    */
-    set value(value: string);
-    get value(): string;
-    private _values;
-    /**
-     * Set multiple selected values
-     * @param values Values to set
-     * @type {string[]}
-     * @default []
-     */
-    set values(values: string[]);
-    get values(): string[];
-    /**
-     * Fill head and tail cell dates
-     */
-    fillCells: boolean;
-    /**
-     * Calendar internal translation strings
-     */
-    protected dateT: TranslateDirective;
-    protected dateTPromise: TranslatePromise;
-    /**
-     * Used for translations
-     */
-    protected t: TranslateDirective;
-    /**
-     * Used for internal navigation between render views
-     */
-    private _renderView;
-    private get renderView();
-    private set renderView(value);
-    /**
-     * Used for keyboard navigation when trying
-     * to restore focus on re-render and control navigation
-     */
-    private _activeCellIndex;
-    private get activeCellIndex();
-    private set activeCellIndex(value);
-    /**
-     * Silently reset cell index without calling request update
-     * @returns {void}
-     */
-    private resetActiveCellIndex;
-    private navigationGrid;
-    /**
-     * Connected to role. If false, the values are not announced in the screen reader
-     */
-    private announceValues;
-    /**
-     * Get an active element
-     */
-    private get activeElement();
-    /**
-     * Get selectable date button element by index
-     * @param index Cell index
-     * @returns button HTML date button element or null
-     */
-    private getDateButtonByIndex;
-    /**
-     * Get active date button element
-     * @returns button HTML date button element or null
-     */
-    private get activeDateButton();
-    /**
-     * Return true if passed target is HTML
-     * date button element that can be selected
-     * @param target Target to check
-     * @returns isDateButtonElement
-     */
-    private isDateButton;
-    private isDateAvailable;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    /**
-     * Perform asynchronous update
-     * @returns promise
-     */
-    protected performUpdate(): Promise<void>;
-    /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
-    protected update(changedProperties: PropertyValues): void;
-    /**
-     * Called after render life-cycle finished
-     * @param changedProperties Properties which have changed
-     * @return {void}
-     */
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * Run when an element has been first updated
-     * @param changedProperties properties that was changed on first update
-     * @returns {void}
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    /**
-     * Show invalid view message
-     * @param value Invalid value
-     * @returns {void}
-     */
-    protected warnInvalidView(value: string): void;
-    /**
-     * Show invalid value message
-     * @param value Invalid value
-     * @returns {void}
-     */
-    protected warnInvalidValue(value: string): void;
-    /**
-    * Validate that the value confirms the control type
-    * @param value Value to check
-    * @returns false if value is invalid
-    */
-    protected isValidValue(value: string): boolean;
-    /**
-     * A helper method to make sure that only valid values are passed
-     * Warn if passed value is invalid
-     * @param values Values to check
-     * @returns Filtered collection of values
-     */
-    private filterAndWarnInvalidValues;
-    /**
-     * Check if there is a need to reconstruct filters
-     * @param changedProperties properties that was changed on first update
-     * @returns true if filter needs to be constructed
-     */
-    private shouldConstructFilters;
-    /**
-     * Construct and store a collection of filters
-     * First always comes default filters and last custom filters
-     * @returns {void}
-     */
-    private constructFilters;
-    /**
-     * Check if date cell is selected
-     * @param value A value to compare
-     * @param comparator A comparator to check for selection. Can be day, month or year
-     * @returns true if cell is selected
-     */
-    private isDateCellSelected;
-    /**
-     * Get cell selection model, which is used to bind values and ranges
-     * to cell styles
-     * @param value A value to compare
-     * @param comparator A comparator to check for selection. Can be day, month or year
-     * @returns cell selection model
-     */
-    private getCellSelection;
-    /**
-     * Set navigation map based on rows
-     * @param rows A collection of rows with cells
-     * @returns {void}
-     */
-    private setNavigationMap;
-    /**
-     * Run when next button is tapped.
-     * Change current view to next view
-     * @param event Next view tap event
-     * @returns {void}
-     */
-    private onNextTap;
-    /**
-     * Run when previous button is tapped.
-     * Change current view to previous view
-     * @param event Previous view tap event
-     * @returns {void}
-     */
-    private onPreviousTap;
-    /**
-     * Run when change view button is tapped.
-     * Switch between views
-     * @param event Render view tap event
-     * @returns {void}
-     */
-    private onRenderViewTap;
-    /**
-     * Run when key down event happens on calendar
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    private onKeyDown;
-    /**
-     * Run when tap event happens ot table.
-     * Select the values or switch the view
-     * @param event Tap event
-     * @returns {void}
-     */
-    private onTableTap;
-    /**
-     * Navigate over the grid
-     * @param key Navigation direction
-     * @returns navigation promise
-     */
-    private onNavigation;
-    /**
-     * Navigate to the next view
-     * @returns {void}
-     */
-    private toNextView;
-    /**
-     * Navigate to the previous view
-     * @returns {void}
-     */
-    private toPreviousView;
-    /**
-     * Run when tap event happened on DAY view and the cell has the values
-     * Try to select/deselect cell value
-     * @param value Date string
-     * @returns {void}
-     */
-    private onTapSelectValue;
-    /**
-     * Notify that values array has been changed
-     * @param values A collection of string dates
-     * @returns {void}
-     */
-    private notifyValuesChange;
-    /**
-     * Notify that view has been changed
-     * @param view Date
-     * @returns {void}
-     */
-    private notifyViewChange;
-    /**
-     * Localised format for render view
-     * @param segment Segment object
-     * @param includeMonth True to include a month
-     * @returns template result
-     */
-    private viewFormattedDate;
-    /**
-     * Get a string representation of current view
-     * @returns template result
-     */
-    private get formattedViewRender();
-    /**
-     * Set an active state of the cell based
-     * @param rows A collection of rows with cells
-     * @returns {void}
-     */
-    private setActiveCell;
-    /**
-     * Get year view template
-     */
-    private get yearView();
-    /**
-     * Get month view template
-     */
-    private get monthView();
-    /**
-     * Get day view template
-     */
-    private get dayView();
-    /**
-     * Get weekday names template
-     */
-    private get renderWeekdayNames();
-    /**
-     * Render a view based on the current render view
-     */
-    private get viewRender();
-    /**
-     * Get cell translate label key based on selected state
-     * @param cell Cell
-     * @returns key Translate label key
-     */
-    private getCellLabelKey;
-    /**
-     * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
-     * @returns template result
-     */
-    private renderCell;
-    /**
-     * Render view rows
-     * @param rows A collection of rows with cells
-     * @returns template result
-     */
-    private renderRows;
-    /**
-     * Render button navigation template
-     * @returns template result
-     */
-    private get buttonNavigationTemplate();
-    /**
-     * A template used to notify currently selected value for screen readers
-     * @returns template result
-     */
-    private get selectionTemplate();
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-calendar': Calendar;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-calendar': Partial<Calendar> | JSXInterface.ControlHTMLAttributes<Calendar>;
-    }
-  }
-}
-
-export {};