@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.6);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation}:host [part=icon]{flex:none}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([hover-icon]) #hover-icon{display:none}:host([empty][icon]){min-width:23px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#c2c2c2}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:rgba(0,0,0,.07)}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([cta]){background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([toggles]){background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host([toggles][active]){border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%)}@media all{:host(:not([cta])[empty][icon][transparent]:active){background-color:rgba(0,0,0,.07);color:#3c3c42;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#3c3c42;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:rgba(0,0,0,.07);color:rgba(0,0,0,.07);box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:rgba(0,0,0,.07);border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host(:active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:active:not(:focus)){border-color:#000;outline:0}:host([disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([cta]:active:not(:focus)){border-color:#000;outline:0}:host([cta][disabled]){background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles]:active:not(:focus)){border-color:#000;outline:0}:host([toggles][disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles][active]:active:not(:focus)){border-color:#000;outline:0}:host([toggles][active][disabled]){background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host([cta]:active){background-color:#f93;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([cta][disabled]){opacity:.4}:host([disabled]){opacity:.4;border-color:#000}:host(:active){background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host(:not([cta])[empty][icon][transparent][disabled]){color:#c2c2c2}@media (-ms-high-contrast:none),(pointer:fine){:host([hover-icon]:hover) #icon{display:none}:host([hover-icon]:hover) #hover-icon{display:block}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:rgba(18,18,18,0);box-shadow:0 0 0 0 rgba(0,0,0,.9);color:#e2e2e2}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:rgba(18,18,18,0);color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#000;outline:0}:host(:focus:not([focused])),:host([focused=visible]){background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0;border-style:dotted;box-shadow:inset 0 0 0 1px #000}:host(:hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host(:hover:not(:focus)){border-color:#000;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#f93;box-shadow:inset 0 0 0 1px #000;outline:0;border-color:#000;box-shadow:inset 0 0 0 1px #000;color:#0a0a0a}:host([cta]:hover){background-color:#ffab57;box-shadow:0 0 0 0 rgba(0,0,0,.9);color:#0a0a0a}:host([cta]:hover:not(:focus)){border-color:#000;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host([toggles]:hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host([toggles]:hover:not(:focus)){border-color:#000;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host([toggles][active]:hover){background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host([toggles][active]:hover:not(:focus)){border-color:#000;outline:0}}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.3);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation}:host [part=icon]{flex:none}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([hover-icon]) #hover-icon{display:none}:host([empty][icon]){min-width:23px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#505050}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#fff}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host([cta]){background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%)}:host([toggles]){background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host([toggles][active]){border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%)}@media all{:host(:not([cta])[empty][icon][transparent]:active){background-color:#fff;color:#bac8d6;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#fafbfc;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#fff;color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#fff;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host(:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:active:not(:focus)){border-color:#a9afba;outline:0}:host([disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([cta]:active:not(:focus)){border-color:#a9afba;outline:0}:host([cta][disabled]){background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([toggles]:active:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([toggles][active]:active:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][active][disabled]){background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host([cta]:active){background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host([cta][disabled]){opacity:.4}:host([disabled]){opacity:.4;border-color:#a9afba}:host(:active){background-image:none}:host(:not([cta])[empty][icon][transparent][disabled]){color:#505050}@media (-ms-high-contrast:none),(pointer:fine){:host([hover-icon]:hover) #icon{display:none}:host([hover-icon]:hover) #hover-icon{display:block}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#fafbfc;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:rgba(18,18,18,0);box-shadow:0 0 0 0 rgba(0,0,0,.6);color:#1d1d1d}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:rgba(18,18,18,0);color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#a9afba;outline:0}:host(:focus:not([focused])),:host([focused=visible]){background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0;border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba}:host(:hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:hover:not(:focus)){border-color:#a9afba;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#ffb266;box-shadow:inset 0 0 0 1px #a9afba;outline:0;border-color:#a9afba;box-shadow:inset 0 0 0 1px #a9afba;color:#505050}:host([cta]:hover){background-color:#ffc48a;box-shadow:0 0 0 0 rgba(0,0,0,.6);color:#505050}:host([cta]:hover:not(:focus)){border-color:#a9afba;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host([toggles]:hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles]:hover:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host([toggles][active]:hover){background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles][active]:hover:not(:focus)){border-color:#a9afba;outline:0}}');

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

@@ -0,0 +1,9 @@
+# ef-button-bar
+
+Used to display multiple buttons to create a list of commands bar.
+
+## Properties
+
+| Property  | Attribute | Type      | Default | Description                                      |
+|-----------|-----------|-----------|---------|--------------------------------------------------|
+| `managed` | `managed` | `boolean` | false   | Manages user interaction, only allowing one toggle button to be active at any one time. |

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

@@ -0,0 +1,76 @@
+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;
+    /**
+     * 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 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,155 @@
+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

@@ -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,22 @@
+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;
+};

package/lib/calendar/constants.js

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

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"
+        }
+      ]
+    }
+  ]
+}

package/lib/calendar/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-calendar
+
+Standard calendar element
+
+## Properties
+
+| Property         | Attribute           | Type                     | Default | Description                                      |
+|------------------|---------------------|--------------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`          | `boolean`                | false   | Set disabled state                               |
+| `fillCells`      | `fill-cells`        | `boolean`                | false   | Fill head and tail cell dates                    |
+| `filter`         |                     | `CalendarFilter \| null` | null    | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek` | `first-day-of-week` | `number \| null`         |         | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `max`            | `max`               | `string`                 | ""      | Set maximum date                                 |
+| `min`            | `min`               | `string`                 | ""      | Set minimum date                                 |
+| `multiple`       | `multiple`          | `boolean`                | false   | Set to switch to multiple select mode            |
+| `range`          | `range`             | `boolean`                | false   | Set to switch to range select mode               |
+| `readonly`       | `readonly`          | `boolean`                | false   | Set readonly state                               |
+| `value`          | `value`             | `string`                 | ""      | Current date time value                          |
+| `values`         | `values`            | `string[]`               |         | Set multiple selected values                     |
+| `view`           | `view`              | `string`                 | ""      | Current calendar view date                       |
+| `weekdaysOnly`   | `weekdays-only`     | `boolean`                | false   | Only enable weekdays                             |
+| `weekendsOnly`   | `weekends-only`     | `boolean`                | false   | Only enable weekends                             |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |
+| `view-changed`  | Fired when the `view` changes.  |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the calendar control |