@refinitiv-ui/elements 5.3.3 → 5.7.0

package/CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.7.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.6.0...@refinitiv-ui/elements@5.7.0) (2021-11-22)
+
+
+### Bug Fixes
+
+* **tree:** correctly update dependant checked states ([#82](https://github.com/Refinitiv/refinitiv-ui/issues/82)) ([fdb7018](https://github.com/Refinitiv/refinitiv-ui/commit/fdb7018f9446f933f428448ada60f4a8cacc1acf))
+
+
+### Features
+
+* **item:** improve screen reader support ([#74](https://github.com/Refinitiv/refinitiv-ui/issues/74)) ([b14b950](https://github.com/Refinitiv/refinitiv-ui/commit/b14b950897cb96cdc957e12d93b510cc4361c4f3))
+
+
+
+
+
+# [5.6.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.5.0...@refinitiv-ui/elements@5.6.0) (2021-11-08)
+
+
+### Bug Fixes
+
+* **datetime-picker:** values are not update synchronously ([#59](https://github.com/Refinitiv/refinitiv-ui/issues/59)) ([55500a3](https://github.com/Refinitiv/refinitiv-ui/commit/55500a30f4daab1110d7664b6c244dd2b83995cb))
+* incorrect tap behaviour ([#57](https://github.com/Refinitiv/refinitiv-ui/issues/57)) ([a245fbe](https://github.com/Refinitiv/refinitiv-ui/commit/a245fbe1999057de0525313e35d5156cc497135f))
+* **multi-input:** only focus input on click clear button ([#64](https://github.com/Refinitiv/refinitiv-ui/issues/64)) ([214452a](https://github.com/Refinitiv/refinitiv-ui/commit/214452ac02f77c91090226597c2c02e95fc3d084))
+* **tree-select:** update selectAll condition when search no match ([#53](https://github.com/Refinitiv/refinitiv-ui/issues/53)) ([c3b5e46](https://github.com/Refinitiv/refinitiv-ui/commit/c3b5e461bdf56ad9d17ae921d1c5f980d44754ac))
+
+
+### Features
+
+* **button:** improve accessibility for screen readers ([#33](https://github.com/Refinitiv/refinitiv-ui/issues/33)) ([89f2e19](https://github.com/Refinitiv/refinitiv-ui/commit/89f2e19f631257e5572d2c74cf7449f9be265aca))
+* **checkbox:** improve accessibility for screen readers ([#37](https://github.com/Refinitiv/refinitiv-ui/issues/37)) ([93509d0](https://github.com/Refinitiv/refinitiv-ui/commit/93509d0ec801b880b9bf68013d83c140075c59dd))
+* **clock:** small analogue clock face ([#54](https://github.com/Refinitiv/refinitiv-ui/issues/54)) ([bc4b2a8](https://github.com/Refinitiv/refinitiv-ui/commit/bc4b2a816135ef70819d826d15ba9b36dda99207))
+* **core:** add latest lit directives, add focused-changed event ([69168f6](https://github.com/Refinitiv/refinitiv-ui/commit/69168f6fe3e6eea8e9abb2a875a2f283eb06d42b))
+* **icon:** support icon names and icon urls ([6d3a92d](https://github.com/Refinitiv/refinitiv-ui/commit/6d3a92db329c5198d56aeed4a1944ef3d0e29f1d))
+* Lit@2 upgrade ([dbda63b](https://github.com/Refinitiv/refinitiv-ui/commit/dbda63be97257f891cb1f2c5ff46b638c70e0b15))
+* **radio-button:** improve radio button accessibility ([#43](https://github.com/Refinitiv/refinitiv-ui/issues/43)) ([12d2b23](https://github.com/Refinitiv/refinitiv-ui/commit/12d2b238c988e880d8055afe280cfb93ace6dd51))
+* **text-field:** improve screen reader support ([#65](https://github.com/Refinitiv/refinitiv-ui/issues/65)) ([65bfa44](https://github.com/Refinitiv/refinitiv-ui/commit/65bfa4404bb4b462f20163c733b75fd509485b1b))
+* **toggle:** improve accessibility for screen readers ([#42](https://github.com/Refinitiv/refinitiv-ui/issues/42)) ([7554471](https://github.com/Refinitiv/refinitiv-ui/commit/755447104777606247bb06bfba5e97accb893ccf))
+
+
+### Performance Improvements
+
+* **icon:** cache svg template results ([463c6ba](https://github.com/Refinitiv/refinitiv-ui/commit/463c6ba1f0403aa25605fd363ac863159ee4c492))
+* **list:** check before positioning element in dom ([244b44f](https://github.com/Refinitiv/refinitiv-ui/commit/244b44fba553e1f40e0a55ecda93e7d943b13994))
+* **tree:** reduce calculations for visible items ([c231f06](https://github.com/Refinitiv/refinitiv-ui/commit/c231f06a1a4a901bafefdee7dcc1e009a7902ac5))
+
+
+
+
+
+# [5.5.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.3.3...@refinitiv-ui/elements@5.5.0) (2021-10-25)
+
+
+### Bug Fixes
+
+* dev server should start with source maps and declaration maps ([3e81b33](https://github.com/Refinitiv/refinitiv-ui/commit/3e81b33d4fb2136af2b18eeaf1fc1d740bd38105))
+* **overlay-menu:** interactiveElements list is not reset in some scenarios ([6e17cce](https://github.com/Refinitiv/refinitiv-ui/commit/6e17cce224eafe3e54ee9c2fdfa7bf9bce5dcbfc))
+* **overlay-menu:** remove wrong super call ([0a63e1f](https://github.com/Refinitiv/refinitiv-ui/commit/0a63e1fc9c0bb8a161010fd15df47198a9101bfa))
+* **overlay:** incorrect change check for `interactiveElements` property ([d1da5b6](https://github.com/Refinitiv/refinitiv-ui/commit/d1da5b692df070f0bb8f08644dd30b43673ffb49))
+
+
+### Features
+
+* add browsers option to test command ([#27](https://github.com/Refinitiv/refinitiv-ui/issues/27)) ([64a1d46](https://github.com/Refinitiv/refinitiv-ui/commit/64a1d464fb3c4a1f1cf851c3ab070cd9f615fb6c))
+* **tree:** query attribute and property ([ce067c7](https://github.com/Refinitiv/refinitiv-ui/commit/ce067c723cf42a57545589dea4feb57ac1e08822))
+
+
+
+
+
 ## [5.3.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.3.2...@refinitiv-ui/elements@5.3.3) (2021-10-11)
 
 

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

@@ -0,0 +1,18 @@
+# ef-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.
+
+## Properties
+
+| Property               | Attribute                | Type      | Default | Description                                      |
+|------------------------|--------------------------|-----------|---------|--------------------------------------------------|
+| `autoCollapseDisabled` | `auto-collapse-disabled` | `boolean` | false   | Allow multiple sections expand at the same time  |
+| `spacing`              | `spacing`                | `boolean` | false   | Add spacing to content section in all collapse items |
+
+## Slots
+
+| Name           | Description                                      |
+|----------------|--------------------------------------------------|
+| `header-left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `header-right` | 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, CSSResultGroup } from '@refinitiv-ui/core';
+import { Collapse } from '../collapse/index.js';
+/**
+ * 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 `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;
+    /**
+     * 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,136 @@
+import { __decorate } from "tslib";
+import { html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { Collapse } from '../collapse/index.js';
+/**
+ * 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 `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: 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/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-appstate-bar
+
+Used to display at the top of application to provide a status or information.
+
+## Properties
+
+| Property  | Attribute | Type                            | Default | Description                                      |
+|-----------|-----------|---------------------------------|---------|--------------------------------------------------|
+| `heading` | `heading` | `string`                        | ""      | Text to display in heading section.              |
+| `state`   | `state`   | `"info" \| "highlight" \| null` | null    | (optional) Type of state bar. Supported value are `info`, `highlight`. |
+
+## Events
+
+| Event   | Description                        |
+|---------|------------------------------------|
+| `clear` | fired when clear button is clicked |
+
+## Slots
+
+| Name    | Description                               |
+|---------|-------------------------------------------|
+| `right` | 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, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
+/**
+ * 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 `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     *
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * 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,100 @@
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import '../icon/index.js';
+/**
+ * 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 `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     *
+     * @returns 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}');