@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/jsx.d.ts

@@ -48,9 +48,11 @@ export declare namespace JSXInterface {
     innerHTML?: string;
     key?: string | number;
     accessKey?: string;
-    class?: string | {
-      [className: string]: boolean;
-    };
+    class?:
+      | string
+      | {
+          [className: string]: boolean;
+        };
     contentEditable?: boolean | string;
     contenteditable?: boolean | string;
     contextMenu?: string;
@@ -220,4 +222,4 @@ export declare namespace JSXInterface {
     onTransitionEnd?: (event: TransitionEvent) => void;
     onTransitionEndCapture?: (event: TransitionEvent) => void;
   }
-}
+}

package/lib/label/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Displays a text with alternative truncation
  */

package/lib/label/index.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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { VERSION } from '../version.js';
 import { isIE } from '@refinitiv-ui/utils/browser.js';
 import { addTooltipCondition, removeTooltipCondition } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 /**
  * Configuration object
  * for mutations observers
@@ -156,7 +156,10 @@ let Label = class Label extends BasicElement {
     recalculate(mutation = false) {
         const oldValue = this.text;
         const raw = this.textContent || '';
-        this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);
+        this.chunks = raw
+            .split(_)
+            .map((chunk) => chunk.trim())
+            .filter((chunk) => chunk);
         const newValue = this.text;
         if (oldValue !== newValue) {
             this.requestUpdate('text', oldValue);
@@ -190,7 +193,9 @@ let Label = class Label extends BasicElement {
         }
         const leftPart = html `<div class="split left ${browserType}">${left.join(_)}</div>`;
         const centerPart = isSingleWord ? undefined : html `<div class="split center">&nbsp;</div>`;
-        const rightPart = right.length ? html `<div class="split right ${browserType}"><span dir="ltr">${right.join(_)}</span></div>` : undefined;
+        const rightPart = right.length
+            ? html `<div class="split right ${browserType}"><span dir="ltr">${right.join(_)}</span></div>`
+            : undefined;
         return html `${leftPart}${centerPart}${rightPart}`;
     }
     /**
@@ -205,13 +210,11 @@ let Label = class Label extends BasicElement {
         /* istanbul ignore if */
         if (browserType === 'legacy') {
             const cs = getComputedStyle(this);
-            const lineHeight = parseFloat(cs.lineHeight) || 1.2 /* css default */;
+            const lineHeight = parseFloat(cs.lineHeight) || 1.2; /* css default */
             styles.maxHeight = `calc(1em * ${lineHeight} * ${this.lineClamp})`; // faux clamp in legacy browsers
             styles.whiteSpace = this.lineClamp === 1 ? 'nowrap' : ''; // show ellipsis in legacy browsers
         }
-        return html `
-      <span class="clamp ${browserType}" style="${styleMap(styles)}">${this.text}</span>
-    `;
+        return html ` <span class="clamp ${browserType}" style="${styleMap(styles)}">${this.text}</span> `;
     }
     /**
      * A `TemplateResult` that will be used

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 {
@@ -163,7 +163,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.
@@ -455,8 +454,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();
     }
     /**
@@ -543,8 +541,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