@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/button-bar/custom-elements.json

@@ -0,0 +1,26 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-button-bar",
+      "description": "Used to display multiple buttons to create a list of commands bar.",
+      "attributes": [
+        {
+          "name": "managed",
+          "description": "Manages user interaction, only allowing one toggle button to be active at any one time.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "managed",
+          "attribute": "managed",
+          "description": "Manages user interaction, only allowing one toggle button to be active at any one time.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,76 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResult, 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;
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * 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 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;
+    /**
+     * 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,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BasicElement, html, css, customElement, property, query } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+import { Button } from '../button';
+/**
+ * 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 `CSSResult` 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

@@ -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/custom-elements.json

@@ -0,0 +1,199 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-calendar",
+      "description": "Standard calendar element",
+      "attributes": [
+        {
+          "name": "min",
+          "description": "Set minimum date",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "max",
+          "description": "Set maximum date",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "weekdays-only",
+          "description": "Only enable weekdays",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "weekends-only",
+          "description": "Only enable weekends",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "view",
+          "description": "Current calendar view date",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "first-day-of-week",
+          "description": "Set the first day of the week.\n0 - for Sunday, 6 - for Saturday",
+          "type": "number | null"
+        },
+        {
+          "name": "range",
+          "description": "Set to switch to range select mode",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "multiple",
+          "description": "Set to switch to multiple select mode",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Current date time value",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "values",
+          "description": "Set multiple selected values",
+          "type": "string[]"
+        },
+        {
+          "name": "fill-cells",
+          "description": "Fill head and tail cell dates",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "Set minimum date",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "Set maximum date",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "weekdaysOnly",
+          "attribute": "weekdays-only",
+          "description": "Only enable weekdays",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "weekendsOnly",
+          "attribute": "weekends-only",
+          "description": "Only enable weekends",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "filter",
+          "description": "Custom filter, used for enabling/disabling certain dates",
+          "type": "CalendarFilter | null"
+        },
+        {
+          "name": "view",
+          "attribute": "view",
+          "description": "Current calendar view date",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "firstDayOfWeek",
+          "attribute": "first-day-of-week",
+          "description": "Set the first day of the week.\n0 - for Sunday, 6 - for Saturday",
+          "type": "number | null"
+        },
+        {
+          "name": "range",
+          "attribute": "range",
+          "description": "Set to switch to range select mode",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Set to switch to multiple select mode",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Current date time value",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "values",
+          "attribute": "values",
+          "description": "Set multiple selected values",
+          "type": "string[]"
+        },
+        {
+          "name": "fillCells",
+          "attribute": "fill-cells",
+          "description": "Fill head and tail cell dates",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Fired when the `value` changes."
+        },
+        {
+          "name": "view-changed",
+          "description": "Fired when the `view` changes."
+        }
+      ],
+      "slots": [
+        {
+          "name": "footer",
+          "description": "Adds slotted content into the footer of the calendar control"
+        }
+      ]
+    }
+  ]
+}