@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/layout/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -11,11 +11,11 @@ export declare class Layout extends ResponsiveElement {
      */
     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
-   */
+     * 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;
     /**
      * Displays debug lines.
@@ -88,7 +88,7 @@ export declare class Layout extends ResponsiveElement {
      * A `TemplateResult` that will be used
      * to render the updated internal template.
      * @return Render template
-      */
+     */
     protected render(): TemplateResult;
 }
 declare global {

package/lib/layout/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
@@ -80,11 +80,11 @@ let Layout = class Layout extends ResponsiveElement {
         return VERSION;
     }
     /**
-   * A `CSSResultGroup` that will be used
-   * to style the host, slotted children
-   * and the internal template of the element.
-   * @return CSS template
-   */
+     * 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 {
@@ -150,7 +150,7 @@ let Layout = class Layout extends ResponsiveElement {
      * A `TemplateResult` that will be used
      * to render the updated internal template.
      * @return Render template
-      */
+     */
     render() {
         return html `<slot></slot>`;
     }

package/lib/led-gauge/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../canvas/index.js';
 /**
  * A component used to show data in a LED-like

package/lib/led-gauge/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../version.js';
 import '../canvas/index.js';
+import { VERSION } from '../version.js';
 const ZERO_MAP = {
     LEFT: 'left',
     CENTER: 'center',
@@ -69,7 +69,6 @@ let LedGauge = class LedGauge extends BasicElement {
      */
     static get styles() {
         return css `
-
       :host {
         display: block;
         position: relative;
@@ -78,7 +77,7 @@ let LedGauge = class LedGauge extends BasicElement {
         box-sizing: border-box;
       }
 
-      [part=label] {
+      [part='label'] {
         display: block;
         position: absolute;
         left: 0;
@@ -98,7 +97,8 @@ let LedGauge = class LedGauge extends BasicElement {
         color: var(--top-selected-color, transparent);
       }
 
-      #bottom, #range {
+      #bottom,
+      #range {
         top: 100%;
         bottom: auto;
         color: var(--bottom-selected-color, transparent);
@@ -202,14 +202,14 @@ let LedGauge = class LedGauge extends BasicElement {
         else if (val > this.max) {
             val = this.max;
         }
-        const positions = (barCount - 1);
+        const positions = barCount - 1;
         if (this.zero === ZERO_MAP.LEFT) {
-            return Math.round(positions * val / this.max);
+            return Math.round((positions * val) / this.max);
         }
         if (this.zero === ZERO_MAP.RIGHT) {
-            return Math.round(positions - positions * val / this.max);
+            return Math.round(positions - (positions * val) / this.max);
         }
-        return Math.round(positions * (val / 2 + this.max / 2) / this.max);
+        return Math.round((positions * (val / 2 + this.max / 2)) / this.max);
     }
     /**
      * @param varName css variable name
@@ -287,7 +287,7 @@ let LedGauge = class LedGauge extends BasicElement {
         const bottomValueBarIndex = this.getValueBarIndex(barAmount, this.bottomValue);
         const sectionLength = barAmount / SECTION_DIVIDER; // devided gauge to 5 sections
         const spacingOffset = barSpacing / 2;
-        const basePos = width / 2 - barAmount / 2 * barTotalWidth + spacingOffset; // starter point
+        const basePos = width / 2 - (barAmount / 2) * barTotalWidth + spacingOffset; // starter point
         const rangeValueBarIndexes = [];
         let rangeMidIndex = 0;
         // Find value bar indexes and mid position of bar gauge

package/lib/list/elements/list.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, WarningNotice } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TapEvent, TemplateResult, WarningNotice } from '@refinitiv-ui/core';
 import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
-import type { ItemData } from '../../item';
-import type { ListData } from '../helpers/types';
 import { ListRenderer } from '../helpers/renderer.js';
 import './list-item.js';
+import type { ItemData } from '../../item';
+import type { ListData } from '../helpers/types';
 /**
  * Key direction
  */

package/lib/list/elements/list.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { ControlElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, WarningNotice, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../../version.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { VERSION } from '../../version.js';
 import { ListRenderer } from '../helpers/renderer.js';
 import './list-item.js';
 /**
@@ -14,7 +14,7 @@ var Direction;
     Direction[Direction["UP"] = -1] = "UP";
     Direction[Direction["DOWN"] = 1] = "DOWN";
 })(Direction || (Direction = {}));
-export const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
+export const valueFormatWarning = new WarningNotice("The specified 'values' format does not conform to the required format.");
 /**
  * Provides listing and immutable selection
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
@@ -130,8 +130,7 @@ let List = class List extends ControlElement {
      * @default []
      */
     get values() {
-        return this.queryItemsByPropertyValue('selected', true)
-            .map((item) => this.composer.getItemPropertyValue(item, 'value'));
+        return this.queryItemsByPropertyValue('selected', true).map((item) => this.composer.getItemPropertyValue(item, 'value'));
     }
     set values(values) {
         if (!Array.isArray(values)) {
@@ -276,7 +275,8 @@ let List = class List extends ControlElement {
      */
     getNextHighlightItem(direction) {
         const highlightItem = this.queryItemsByPropertyValue('highlighted', true)[0];
-        const nextElement = this.getNextFocusableItem(direction) || this.getNextFocusableItem(direction, this.elementFromItem(highlightItem));
+        const nextElement = this.getNextFocusableItem(direction) ||
+            this.getNextFocusableItem(direction, this.elementFromItem(highlightItem));
         const backupElement = this.tabbableItems[0];
         if (nextElement) {
             return this.itemFromElement(nextElement);
@@ -291,8 +291,7 @@ let List = class List extends ControlElement {
      * @returns {void}
      */
     clearHighlighted() {
-        this.queryItemsByPropertyValue('highlighted', true)
-            .forEach(item => this.composer.setItemPropertyValue(item, 'highlighted', false));
+        this.queryItemsByPropertyValue('highlighted', true).forEach((item) => this.composer.setItemPropertyValue(item, 'highlighted', false));
     }
     /**
      * Highlights a single item.
@@ -452,8 +451,7 @@ let List = class List extends ControlElement {
      * @returns {void}
      */
     clearSelection() {
-        this.queryItemsByPropertyValue('selected', true)
-            .forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
+        this.queryItemsByPropertyValue('selected', true).forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
         this.requestUpdate();
     }
     /**
@@ -540,8 +538,8 @@ let List = class List extends ControlElement {
         const currentChildren = Array.from(this.children);
         const recyclableElements = this.calculateRecyclableElements(renderItems);
         const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
-        const deletions = currentChildren.filter(element => !renderChildren.includes(element));
-        deletions.forEach(element => this.removeChild(element));
+        const deletions = currentChildren.filter((element) => !renderChildren.includes(element));
+        deletions.forEach((element) => this.removeChild(element));
         renderChildren.forEach((element, index) => {
             if (this.children.length === index) {
                 this.appendChild(element);

package/lib/list/helpers/renderer.js

@@ -1,6 +1,6 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
-import { getItemId } from './item-id.js';
 import { Renderer } from '../renderer.js';
+import { getItemId } from './item-id.js';
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.
@@ -18,7 +18,7 @@ export class ListRenderer extends Renderer {
             /**
              * Element to render
              */
-            const el = (element || document.createElement('ef-list-item'));
+            const el = element || document.createElement('ef-list-item');
             /**
              * Tooltip value to be used, if any.
              */

package/lib/list/helpers/types.d.ts

@@ -1,3 +1,3 @@
-import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 export type ListData<T extends DataItem = ItemData> = T[] | CollectionComposer<T> | null;

package/lib/list/index.d.ts

@@ -1,5 +1,5 @@
+import type { ListData } from './helpers/types';
 export * from './elements/list.js';
 export * from './elements/list-item.js';
 export { ListRenderer } from './helpers/renderer.js';
-import type { ListData } from './helpers/types';
 export type { ListData };

package/lib/list/renderer.d.ts

@@ -1,5 +1,5 @@
 import { ExtensibleFunction } from './extensible-function.js';
-import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 /**
  * Render function interface
  * TODO: Move this to @refinitiv-ui/utils
@@ -7,12 +7,12 @@ import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/collectio
  */
 export interface RenderFunction {
     /**
-       * Renders data items into elements
-       * @param item Data item context
-       * @param composer Composer context
-       * @param element Reusable element. This element tries to be the same as was used before.
-       * @returns List item element
-   */
+     * Renders data items into elements
+     * @param item Data item context
+     * @param composer Composer context
+     * @param element Reusable element. This element tries to be the same as was used before.
+     * @returns List item element
+     */
     (item: DataItem, composer: CollectionComposer, element?: HTMLElement): HTMLElement;
 }
 /**

package/lib/loader/index.js

@@ -28,8 +28,11 @@ let Loader = class Loader extends BasicElement {
      * used to create and theme different loader styles
      */
     get templateParts() {
-        const parts = cachedParts || this.getComputedVariable('--parts')
-            .split(',').map(part => part.trim()).filter(part => part);
+        const parts = cachedParts ||
+            this.getComputedVariable('--parts')
+                .split(',')
+                .map((part) => part.trim())
+                .filter((part) => part);
         if (cachedParts !== parts && parts.length) {
             cachedParts = parts;
         }
@@ -48,13 +51,9 @@ let Loader = class Loader extends BasicElement {
     render() {
         const dots = [];
         for (const part of this.templateParts) {
-            dots.push(html `
-        <i part="${part}"></i>
-      `);
+            dots.push(html ` <i part="${part}"></i> `);
         }
-        return html `
-      <div part="wrapper">${dots}</div>
-    `;
+        return html ` <div part="wrapper">${dots}</div> `;
     }
 };
 Loader = __decorate([

package/lib/multi-input/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
+import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../pill/index.js';
 import '../text-field/index.js';
+import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
 export type { MultiInputData, MultiInputDataItem };
 /**
  * An input control component to display a selection of pills
@@ -159,10 +159,10 @@ export declare class MultiInput extends ControlElement implements MultiValue {
     /** Old value for handle reset value */
     private oldValue;
     /**
-    * Current value of text field
-    * @default -
-    * @param value Element value
-    */
+     * Current value of text field
+     * @default -
+     * @param value Element value
+     */
     set value(value: string);
     get value(): string;
     /**

package/lib/multi-input/index.js

@@ -3,10 +3,10 @@ import { ControlElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-import { VERSION } from '../version.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../pill/index.js';
 import '../text-field/index.js';
+import { VERSION } from '../version.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * An input control component to display a selection of pills
@@ -85,7 +85,8 @@ let MultiInput = class MultiInput extends ControlElement {
         ?readonly="${item.readonly || this.readonly}"
         ?disabled="${item.disabled || this.disabled}"
         value="${item.value}"
-        @clear="${this.onPillClearsHandler}">
+        @clear="${this.onPillClearsHandler}"
+      >
         ${item.label}
       </ef-pill>
     `;
@@ -109,21 +110,21 @@ let MultiInput = class MultiInput extends ControlElement {
       :host {
         display: block;
       }
-      [part=list] {
-       flex-flow: row wrap;
-       max-height: 100%;
-       display: flex;
-       align-items: center;
-       align-content: flex-start;
-       flex: 1 1 auto;
-       flex-direction: row;
-       overflow-y: auto;
-       margin: auto;
+      [part='list'] {
+        flex-flow: row wrap;
+        max-height: 100%;
+        display: flex;
+        align-items: center;
+        align-content: flex-start;
+        flex: 1 1 auto;
+        flex-direction: row;
+        overflow-y: auto;
+        margin: auto;
       }
-      [part=pill] {
+      [part='pill'] {
         display: inline-flex;
       }
-      [part=search] {
+      [part='search'] {
         flex: 1;
         min-width: 170px;
       }
@@ -307,15 +308,15 @@ let MultiInput = class MultiInput extends ControlElement {
     shouldValidateForMinLength(value) {
         let error = false;
         if (value) {
-            error = !!this.minLength && (this.minLength > value.length);
+            error = !!this.minLength && this.minLength > value.length;
         }
         return error;
     }
     /**
-    * Current value of text field
-    * @default -
-    * @param value Element value
-    */
+     * Current value of text field
+     * @default -
+     * @param value Element value
+     */
     set value(value) {
         const oldValue = this.oldValue;
         value = this.castValue(value);
@@ -358,7 +359,7 @@ let MultiInput = class MultiInput extends ControlElement {
      * @returns True if input should be re-validated
      */
     shouldValidateInput(changedProperties) {
-        return (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')));
+        return changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value'));
     }
     /**
      * Set the selection range
@@ -385,12 +386,7 @@ let MultiInput = class MultiInput extends ControlElement {
      * @returns the main template
      */
     render() {
-        return html `
-      <div id="list" part="list">
-        ${this.pillsTemplate()}
-        ${this.textFieldTemplate}
-      </div>
-    `;
+        return html ` <div id="list" part="list">${this.pillsTemplate()} ${this.textFieldTemplate}</div> `;
     }
     /**
      * render the search element
@@ -401,22 +397,22 @@ let MultiInput = class MultiInput extends ControlElement {
             return null;
         }
         return html `
-        <ef-text-field
-          ${ref(this.searchRef)}
-          tabindex="1"
-          part="search"
-          transparent
-          ?disabled="${this.disabled}"
-          @keydown="${this.handleKeyDown}"
-          @change="${this.onInputChange}"
-          @input="${this.onInputChange}"
-          maxlength="${this.maxLength || nothing}"
-          minlength="${this.minLength || nothing}"
-          ?error="${this.error}"
-          .value="${this.value}"
-          .icon="${this.icon || null}"
-          .placeholder="${this.placeholder}"
-          ></ef-text-field>
+      <ef-text-field
+        ${ref(this.searchRef)}
+        tabindex="1"
+        part="search"
+        transparent
+        ?disabled="${this.disabled}"
+        @keydown="${this.handleKeyDown}"
+        @change="${this.onInputChange}"
+        @input="${this.onInputChange}"
+        maxlength="${this.maxLength || nothing}"
+        minlength="${this.minLength || nothing}"
+        ?error="${this.error}"
+        .value="${this.value}"
+        .icon="${this.icon || null}"
+        .placeholder="${this.placeholder}"
+      ></ef-text-field>
     `;
     }
     /**
@@ -424,9 +420,7 @@ let MultiInput = class MultiInput extends ControlElement {
      * @returns the template of pill components
      */
     pillsTemplate() {
-        return html `
-      ${this.composer.queryItems(() => true).map(this.pillTemplate)}
-    `;
+        return html ` ${this.composer.queryItems(() => true).map(this.pillTemplate)} `;
     }
     /**
      * handle the clear event of pill

package/lib/notification/elements/notification-tray.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, ElementSize, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import type { Notification } from './notification';
+import { ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import type { TaskOptions } from '../helpers/types';
+import type { Notification } from './notification';
 export declare class NotificationTray extends ResponsiveElement {
     /**
      * Element version number

package/lib/notification/elements/notification-tray.js

@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
 import { ResponsiveElement, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../../version.js';
 import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { VERSION } from '../../version.js';
 let NotificationTray = class NotificationTray extends ResponsiveElement {
     constructor() {
         super(...arguments);
@@ -40,7 +40,7 @@ let NotificationTray = class NotificationTray extends ResponsiveElement {
      * @returns notification task
      */
     get nextDismissable() {
-        return this.showing.filter(item => item.options.duration !== Infinity)[0];
+        return this.showing.filter((item) => item.options.duration !== Infinity)[0];
     }
     /**
      * On first updated lifecycle
@@ -59,7 +59,7 @@ let NotificationTray = class NotificationTray extends ResponsiveElement {
      * @returns results
      */
     isValidAttatchPoint(attach) {
-        return (/^(top|bottom)$/).test(attach);
+        return /^(top|bottom)$/.test(attach);
     }
     /**
      * Get the amount of padding to be applied to the document.

package/lib/notification/elements/notification.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import { Translate } from '@refinitiv-ui/translate';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/notification.js';
+import { Translate } from '@refinitiv-ui/translate';
 import '../../icon/index.js';
 /**
  * Used to show informative content when something happens in the application

package/lib/notification/elements/notification.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { translate } from '@refinitiv-ui/translate';
-import { VERSION } from '../../version.js';
 import '@refinitiv-ui/phrasebook/locale/en/notification.js';
+import { translate } from '@refinitiv-ui/translate';
 import '../../icon/index.js';
+import { VERSION } from '../../version.js';
 /**
  * Used to show informative content when something happens in the application
  *
@@ -105,7 +105,7 @@ let Notification = class Notification extends BasicElement {
       :host {
         display: block;
       }
-      [part=label] {
+      [part='label'] {
         color: red;
       }
     `;
@@ -118,15 +118,16 @@ let Notification = class Notification extends BasicElement {
      */
     render() {
         return html `
-    <style>
-    :host {
-      display: block;
-    }
-    </style>
-    <div part="container">
-      <div part="content"><slot>${this.message}</slot></div>
-      <ef-icon part="clear" icon="cross" role="button" aria-description="${this.t('CLOSE')}" @click="${this.onClearClick.bind(this)}"></ef-icon>
-    </div>
+      <div part="container">
+        <div part="content"><slot>${this.message}</slot></div>
+        <ef-icon
+          part="clear"
+          icon="cross"
+          role="button"
+          aria-description="${this.t('CLOSE')}"
+          @click="${this.onClearClick.bind(this)}"
+        ></ef-icon>
+      </div>
     `;
     }
 };

package/lib/notification/helpers/status.js

@@ -1,6 +1,6 @@
 import { NotificationTray } from '../elements/notification-tray.js';
 // TODO: Add to utils?
-const DEV_ENV = (/^(localhost|127\.0\.0\.1)$/).test(location.hostname);
+const DEV_ENV = /^(localhost|127\.0\.0\.1)$/.test(location.hostname);
 const NotificationType = {
     INFO: 'INFO',
     CONFIRM: 'CONFIRM',

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification-tray', styles: ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}' }}));
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#ccc);animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--background-color,#007678);animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#227542}:host([warning]){--background-color:#7F6400}:host([error]){--background-color:#A01C2B}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#ccc);animation:.2s forwards notification-open;-webkit-user-select:none;-moz-user-select:none;user-select:none;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background-color:var(--background-color,#007678);animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#227542}:host([warning]){--background-color:#7F6400}:host([error]){--background-color:#A01C2B}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification-tray', styles: ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}' }}));
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#0d0d0d);animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--background-color,#007678);animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#246B3E}:host([warning]){--background-color:#CCA000;color:#0d0d0d}:host([error]){--background-color:#B63243}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#0d0d0d);animation:.2s forwards notification-open;-webkit-user-select:none;-moz-user-select:none;user-select:none;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background-color:var(--background-color,#007678);animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#246B3E}:host([warning]){--background-color:#CCA000;color:#0d0d0d}:host([error]){--background-color:#B63243}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));