@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/accordion/custom-elements.json

@@ -0,0 +1,49 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-accordion",
+      "description": "Used to display a group of `Collapse` control.\nOnly one item will be able to expand by default but you can customize its behavior.",
+      "attributes": [
+        {
+          "name": "auto-collapse-disabled",
+          "description": "Allow multiple sections expand at the same time",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "spacing",
+          "description": "Add spacing to content section in all collapse items",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "autoCollapseDisabled",
+          "attribute": "auto-collapse-disabled",
+          "description": "Allow multiple sections expand at the same time",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "spacing",
+          "attribute": "spacing",
+          "description": "Add spacing to content section in all collapse items",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "header-left",
+          "description": "Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox"
+        },
+        {
+          "name": "header-right",
+          "description": "Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox"
+        }
+      ]
+    }
+  ]
+}

package/lib/accordion/index.d.ts

@@ -0,0 +1,76 @@
+import { JSXInterface } from '../jsx';
+import { PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import { Collapse } from '../collapse';
+/**
+ * Used to display a group of `Collapse` control.
+ * Only one item will be able to expand by default but you can customize its behavior.
+ *
+ * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ *
+ */
+export declare class Accordion extends Collapse {
+    /**
+     * 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 {CSSResult | CSSResult[]} CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * Allow multiple sections expand at the same time
+     */
+    autoCollapseDisabled: boolean;
+    /**
+     * Add spacing to content section in all collapse items
+     */
+    spacing: boolean;
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * handle bubbled clicks from items
+     * @param event the click event object
+     * @return void
+     */
+    private handleClick;
+    /**
+     * get a list of items
+     * @returns array of accordion items
+     */
+    private getChildItems;
+    /**
+     * collapse non selected child items on click
+     * @param target currently selected item
+     * @return void
+     */
+    private processChildrenOnClick;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-accordion': Accordion;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-accordion': Partial<Accordion> | JSXInterface.HTMLAttributes<Accordion>;
+    }
+  }
+}
+
+export {};

package/lib/accordion/index.js

@@ -0,0 +1,139 @@
+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 { html, css, customElement, property } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+import { Collapse } from '../collapse';
+/**
+ * Finds closest accordion parent of element.
+ * Created, because IE11 doesn't support closest() method.
+ * @param element - potential child of accordion
+ * @returns found accordion parent or null, if not found
+ */
+const getClosestAccordion = (element) => {
+    while (element) {
+        if (element.localName === 'ef-accordion') {
+            return element;
+        }
+        else {
+            element = element.parentElement;
+        }
+    }
+    return null;
+};
+/**
+ * Checks if specified element is a direct child of current accordion.
+ * @param element - child that checked
+ * @param accordion - parent accordion
+ * @returns is current accordion has child accordion that wraps checked element
+ */
+const isDirectAccordionChild = (element, accordion) => {
+    return getClosestAccordion(element) === accordion;
+};
+/**
+ * Used to display a group of `Collapse` control.
+ * Only one item will be able to expand by default but you can customize its behavior.
+ *
+ * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ *
+ */
+let Accordion = class Accordion extends Collapse {
+    constructor() {
+        super(...arguments);
+        /**
+         * Allow multiple sections expand at the same time
+         */
+        this.autoCollapseDisabled = false;
+        /**
+         * Add spacing to content section in all collapse items
+         */
+        this.spacing = false;
+        /**
+         * handle bubbled clicks from items
+         * @param event the click event object
+         * @return void
+         */
+        this.handleClick = (event) => {
+            if (!this.autoCollapseDisabled && isDirectAccordionChild(event.target, this)) {
+                this.processChildrenOnClick(event.target);
+                event.stopPropagation();
+            }
+        };
+    }
+    /**
+     * 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 {CSSResult | CSSResult[]} CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+    `;
+    }
+    /**
+     * 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('expanded-changed', this.handleClick, true);
+    }
+    /**
+     * get a list of items
+     * @returns array of accordion items
+     */
+    getChildItems() {
+        return [...this.querySelectorAll('ef-collapse')]
+            .filter((el) => isDirectAccordionChild(el, this));
+    }
+    /**
+     * collapse non selected child items on click
+     * @param target currently selected item
+     * @return void
+     */
+    processChildrenOnClick(target) {
+        const children = this.getChildItems();
+        for (let i = 0, len = children.length; i < len; ++i) {
+            if (children[i] !== target) {
+                children[i].expanded = false;
+            }
+        }
+    }
+    /**
+     * 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, attribute: 'auto-collapse-disabled' })
+], Accordion.prototype, "autoCollapseDisabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Accordion.prototype, "spacing", void 0);
+Accordion = __decorate([
+    customElement('ef-accordion', {
+        alias: 'coral-accordion'
+    })
+], Accordion);
+export { Accordion };

package/lib/accordion/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/halo/dark';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #404040}');

package/lib/accordion/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/halo/light';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d9d9d9}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/solar/charcoal';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #0a0a0a}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/collapse/themes/solar/pearl';
+
+elf.customStyles.define('ef-accordion', ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d5d8db}');

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

@@ -0,0 +1,49 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-appstate-bar",
+      "description": "Used to display at the top of application to provide a status or information.",
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "Text to display in heading section.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "state",
+          "description": "(optional) Type of state bar. Supported value are `info`, `highlight`.",
+          "type": "\"info\" | \"highlight\" | null"
+        }
+      ],
+      "properties": [
+        {
+          "name": "heading",
+          "attribute": "heading",
+          "description": "Text to display in heading section.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "state",
+          "attribute": "state",
+          "description": "(optional) Type of state bar. Supported value are `info`, `highlight`.",
+          "type": "\"info\" | \"highlight\" | null"
+        }
+      ],
+      "events": [
+        {
+          "name": "clear",
+          "description": "fired when clear button is clicked"
+        }
+      ],
+      "slots": [
+        {
+          "name": "right",
+          "description": "place custom content on the right of bar."
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,65 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import '../icon';
+/**
+ * Used to display at the top of application to provide a status or information.
+ * @slot right - place custom content on the right of bar.
+ *
+ * @fires clear - fired when clear button is clicked
+ */
+export declare class AppstateBar 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.
+     *
+     * @returns {(CSSResult|CSSResult[])} CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * Text to display in heading section.
+     */
+    heading: string;
+    /**
+     * (optional) Type of state bar. Supported value are `info`, `highlight`.
+     */
+    state: 'info' | 'highlight' | null;
+    /**
+     * Invoked whenever the element is updated
+     * @param {PropertyValues} changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Hide the element when clear button is clicked
+     * @param {Event} event - event params
+     * @fires AppstateBar#clear
+     * @returns {void}
+     */
+    private clear;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-appstate-bar': AppstateBar;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-appstate-bar': Partial<AppstateBar> | JSXInterface.HTMLAttributes<AppstateBar>;
+    }
+  }
+}
+
+export {};

package/lib/appstate-bar/index.js

@@ -0,0 +1,103 @@
+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 } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+import '../icon';
+/**
+ * Used to display at the top of application to provide a status or information.
+ * @slot right - place custom content on the right of bar.
+ *
+ * @fires clear - fired when clear button is clicked
+ */
+let AppstateBar = class AppstateBar extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Text to display in heading section.
+         */
+        this.heading = '';
+        /**
+         * (optional) Type of state bar. Supported value are `info`, `highlight`.
+         */
+        this.state = null;
+        /**
+         * Hide the element when clear button is clicked
+         * @param {Event} event - event params
+         * @fires AppstateBar#clear
+         * @returns {void}
+         */
+        this.clear = (event) => {
+            event.stopPropagation();
+            this.style.display = 'none';
+            /**
+             * Clear Event
+             * Fired when clear button is clicked
+             *
+             * @event clear
+             */
+            this.dispatchEvent(new CustomEvent('clear'));
+        };
+    }
+    /**
+     * 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.
+     *
+     * @returns {(CSSResult|CSSResult[])} CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+    `;
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param {PropertyValues} changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Call this.updateStyles() to update css variables
+        if (changedProperties.has('state')) {
+            this.updateStyles();
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <div part="heading">${this.heading}</div>
+      <div part="message"><slot></slot></div>
+      <div part="right"><slot name="right"></slot></div>
+      <ef-icon part="close"  @tap="${this.clear}" icon="cross"></ef-icon>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AppstateBar.prototype, "heading", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AppstateBar.prototype, "state", void 0);
+AppstateBar = __decorate([
+    customElement('ef-appstate-bar', {
+        alias: 'amber-appstate-bar'
+    })
+], AppstateBar);
+export { AppstateBar };

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#CCCCCC;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#404040;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#CCCCCC;--background-color:#262626}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#0D0D0D;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#595959;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#0D0D0D;--background-color:#F2F2F2;--border-color:#CCCCCC}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#E2E2E2;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#4A4A52;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#46A0F0;--heading-background-color:#142E45;--text-color:#C2C2C2;--background-color:#0F2233;--border-color:#000000;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#000000;--heading-background-color:#FF9933}:host([state=info]){--heading-background-color:#b35900;--heading-text-color:#C2C2C2;--heading-background-color:#282E33}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-appstate-bar', ':host{--heading-text-color:#484848;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#A9AFBA;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#FFFFFF;--heading-background-color:#2A6090;--text-color:#484848;--background-color:#C1E3FE;--border-color:#FFFFFF;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#FFFFFF;--heading-background-color:#CC7F33}:host([state=info]){--heading-background-color:#EE7600;--heading-text-color:#FFFFFF;--heading-background-color:#666570}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}');