@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/overlay/managers/interaction-lock-manager.js

@@ -1,11 +1,11 @@
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { getOverlays } from './zindex-manager.js';
 /**
-* Check if two arrays are shallow equal
-* @param left Left side array
-* @param right Right side array
-* @returns true if arrays are equal
-*/
+ * Check if two arrays are shallow equal
+ * @param left Left side array
+ * @param right Right side array
+ * @returns true if arrays are equal
+ */
 const equal = (left, right) => {
     const length = left.length;
     if (length !== right.length) {
@@ -61,6 +61,7 @@ export class ScrollLockManager {
          */
         this.removeScrollLock = () => {
             this.scrollThrottler.schedule(() => {
+                /* must be the delayed task, otherwise scroll might happen in rare scenarios after mouseup */
                 this.lockScroll = false;
             });
         };
@@ -82,7 +83,8 @@ export class ScrollLockManager {
          * @returns {void}
          */
         this.onTouchScroll = (event) => {
-            if (event.cancelable && this.shouldCancelTouch(event)) { /* Not all touch events can be cancelled */
+            if (event.cancelable && this.shouldCancelTouch(event)) {
+                /* Not all touch events can be cancelled */
                 event.preventDefault();
             }
         };
@@ -111,7 +113,7 @@ export class ScrollLockManager {
      * in lock management
      */
     get overlays() {
-        return getOverlays().filter(overlay => !overlay.noInteractionLock);
+        return getOverlays().filter((overlay) => !overlay.noInteractionLock);
     }
     /**
      * Lock the screen and make top most overlay
@@ -337,21 +339,27 @@ export class ScrollLockManager {
             return true;
         }
         const checkSlice = path.slice(0, idx + 1);
-        const canScroll = isVerticalScroll ? (element) => {
-            const style = window.getComputedStyle(element);
-            if (style.overflowY === 'scroll' || style.overflowY === 'auto') {
-                // delta < 0 is scroll up, delta > 0 is scroll down.
-                return deltaY < 0 ? element.scrollTop > 0 : element.scrollTop < element.scrollHeight - element.clientHeight;
-            }
-            return false;
-        } : (element) => {
-            const style = window.getComputedStyle(element);
-            if (style.overflowX === 'scroll' || style.overflowX === 'auto') {
-                // delta < 0 is scroll left, delta > 0 is scroll right.
-                return deltaX < 0 ? element.scrollLeft > 0 : element.scrollLeft < element.scrollWidth - element.clientWidth;
+        const canScroll = isVerticalScroll
+            ? (element) => {
+                const style = window.getComputedStyle(element);
+                if (style.overflowY === 'scroll' || style.overflowY === 'auto') {
+                    // delta < 0 is scroll up, delta > 0 is scroll down.
+                    return deltaY < 0
+                        ? element.scrollTop > 0
+                        : element.scrollTop < element.scrollHeight - element.clientHeight;
+                }
+                return false;
             }
-            return false;
-        };
+            : (element) => {
+                const style = window.getComputedStyle(element);
+                if (style.overflowX === 'scroll' || style.overflowX === 'auto') {
+                    // delta < 0 is scroll left, delta > 0 is scroll right.
+                    return deltaX < 0
+                        ? element.scrollLeft > 0
+                        : element.scrollLeft < element.scrollWidth - element.clientWidth;
+                }
+                return false;
+            };
         while (checkSlice.length) {
             const node = checkSlice.shift();
             if (node && node.nodeType !== Node.ELEMENT_NODE) {
@@ -366,10 +374,10 @@ export class ScrollLockManager {
 }
 const locker = new ScrollLockManager(); /* Locker is a singleton */
 /**
-* Lock the screen and make top most overlay
-* and its position target interactive
-* @returns {void}
-*/
+ * Lock the screen and make top most overlay
+ * and its position target interactive
+ * @returns {void}
+ */
 export const applyLock = () => {
     locker.applyLock();
 };

package/lib/overlay/managers/viewport-manager.d.ts

@@ -1,6 +1,6 @@
-import type { ViewAreaInfo } from '../helpers/types';
-import type { Overlay } from '../elements/overlay';
 import '../elements/overlay-viewport.js';
+import type { Overlay } from '../elements/overlay';
+import type { ViewAreaInfo } from '../helpers/types';
 /**
  * Viewport manager singleton is responsible for getting
  * viewport sizes and reacting on viewport changes

package/lib/overlay/managers/viewport-manager.js

@@ -1,8 +1,8 @@
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import '../elements/overlay-viewport.js';
 /**
-  * Default values for area info
-*/
+ * Default values for area info
+ */
 const viewAreaInfo = {
     viewHeight: 0,
     viewWidth: 0,
@@ -32,6 +32,7 @@ export class ViewportManager {
          */
         this.callRefit = () => {
             this.refitFrame.schedule(() => {
+                /* must be in animation frame because of weird mobile behaviour */
                 this.registry.forEach((viewport, overlay) => {
                     this.resetViewportSizing(viewport);
                     overlay.fit();

package/lib/overlay/managers/zindex-manager.js

@@ -76,7 +76,8 @@ export class ZIndexManager {
         if (!topOverlay) {
             return ZIndex;
         }
-        if (topOverlay.overlay === overlay) { /* do not increase z-index for self */
+        if (topOverlay.overlay === overlay) {
+            /* do not increase z-index for self */
             return topOverlay.zIndex;
         }
         return topOverlay.zIndex + 2; /* give space for backdrop z-index */
@@ -103,7 +104,8 @@ export class ZIndexManager {
             this.setZIndex(overlay, zIndex);
             overlay.addEventListener('focus', this.onFocus);
         }
-        else if (typeof overlay.zIndex === 'number') { /* z-index has set manually. If it is removed, do nothing */
+        else if (typeof overlay.zIndex === 'number') {
+            /* z-index has set manually. If it is removed, do nothing */
             this.setZIndex(overlay, overlay.zIndex);
         }
     }

package/lib/overlay-menu/helpers/types.d.ts

@@ -1,6 +1,6 @@
-import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
-import type { OverlayMenu } from '../index';
 import type { Item, ItemData } from '../../item';
+import type { OverlayMenu } from '../index';
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 export type NestedMenu = {
     menu: OverlayMenu;
     item: Item;

package/lib/overlay-menu/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import '../item/index.js';
 import { Overlay } from '../overlay/index.js';

package/lib/overlay-menu/index.js

@@ -1,9 +1,8 @@
 var OverlayMenu_1;
 import { __decorate } from "tslib";
-import { html, css, nothing, WarningNotice } from '@refinitiv-ui/core';
+import { WarningNotice, 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 { VERSION } from '../version.js';
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
@@ -12,8 +11,9 @@ import '../item/index.js';
 import { Item } from '../item/index.js';
 import { Overlay } from '../overlay/index.js';
 import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
-import { OpenedMenusManager } from './managers/menu-manager.js';
+import { VERSION } from '../version.js';
 import { Navigation } from './helpers/constants.js';
+import { OpenedMenusManager } from './managers/menu-manager.js';
 /**
  * Overlay that supports single-level and multi-level menus
  * @fires item-trigger - Fired when the user taps on item.
@@ -81,7 +81,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
           overflow-y: auto;
           overflow-x: hidden;
         }
-        :host([compact]:not([active])) { /* active is set in menu-manager */
+        :host([compact]:not([active])) {
+          /* active is set in menu-manager */
           opacity: 0;
         }
       `
@@ -108,28 +109,28 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
          */
         this.nested = false;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.withShadow = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.lockPositionTarget = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.focusBoundary = null;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.position = ['bottom-start', 'top-start'];
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.toItem = this.toItem.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.modificationUpdate = this.modificationUpdate.bind(this);
     }
     /**
@@ -198,8 +199,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     getDataValues() {
         const items = this.getDataDescendants();
-        const selected = items.filter(item => this.composer.getItemPropertyValue(item, 'selected') === true);
-        return selected.map(item => this.composer.getItemPropertyValue(item, 'value') || '');
+        const selected = items.filter((item) => this.composer.getItemPropertyValue(item, 'selected') === true);
+        return selected.map((item) => this.composer.getItemPropertyValue(item, 'value') || '');
     }
     /**
      * Set values to data collection
@@ -208,9 +209,9 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     setDataValues(values) {
         const items = this.getDataDescendants();
-        items.forEach(item => {
+        items.forEach((item) => {
             const value = this.composer.getItemPropertyValue(item, 'value') || '';
-            const found = values.some(userValue => String(userValue) === value);
+            const found = values.some((userValue) => String(userValue) === value);
             this.composer.setItemPropertyValue(item, 'selected', found);
         });
     }
@@ -220,8 +221,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     getSlottedValues() {
         const items = this.getSlottedDescendants();
-        const selected = items.filter(item => item.selected === true);
-        return selected.map(item => item.value);
+        const selected = items.filter((item) => item.selected === true);
+        return selected.map((item) => item.value);
     }
     /**
      * Set values to slotted elements
@@ -230,7 +231,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     setSlottedValues(values) {
         const items = this.getSlottedDescendants();
-        items.forEach(item => {
+        items.forEach((item) => {
             item.selected = values.includes(item.value);
         });
     }
@@ -310,12 +311,12 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     shouldUpdate(changedProperties) {
         const shouldUpdate = super.shouldUpdate(changedProperties);
-        return shouldUpdate
-            || changedProperties.size === 0 /* this is to support empty requestUpdate() */
-            || changedProperties.has('values')
-            || changedProperties.has('data')
-            || (this.opened && changedProperties.has('compact'))
-            || (this.opened && changedProperties.has('modification'));
+        return (shouldUpdate ||
+            changedProperties.size === 0 /* this is to support empty requestUpdate() */ ||
+            changedProperties.has('values') ||
+            changedProperties.has('data') ||
+            (this.opened && changedProperties.has('compact')) ||
+            (this.opened && changedProperties.has('modification')));
     }
     /**
      * Compute property values that depend on other properties
@@ -739,7 +740,9 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      * @return {void}
      */
     setOpenedMenu(menuItem) {
-        const menu = menuItem && menuItem.for && this.menuIndex[menuItem.for] ? this.menuIndex[menuItem.for].menu : undefined;
+        const menu = menuItem && menuItem.for && this.menuIndex[menuItem.for]
+            ? this.menuIndex[menuItem.for].menu
+            : undefined;
         menu && this.insertNestedMenu(menu);
         OpenedMenusManager.toggleNestedMenuFor(this, menuItem);
     }
@@ -868,7 +871,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         type="header"
         title=${tooltip || nothing}
         .label=${label}
-        .icon=${icon}></ef-item>`;
+        .icon=${icon}
+      ></ef-item>`;
         }
         const disabled = composer.getItemPropertyValue(item, 'disabled');
         const selected = composer.getItemPropertyValue(item, 'selected');
@@ -891,7 +895,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
       .subLabel=${subLabel}
       .icon=${icon}
       .value=${value || nothing}
-      .for=${forMenu || nothing}>
+      .for=${forMenu || nothing}
+    >
     </ef-item>`;
     }
     /**
@@ -913,7 +918,13 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             return undefined;
         }
         return html `
-      <ef-item part="menu-back" id="back" label="Back" @tap=${this.onBackItemTap} @mousemove=${this.onBackItemMouseMove}>
+      <ef-item
+        part="menu-back"
+        id="back"
+        label="Back"
+        @tap=${this.onBackItemTap}
+        @mousemove=${this.onBackItemMouseMove}
+      >
         <ef-icon slot="left" icon="left"></ef-icon>
       </ef-item>
     `;

package/lib/overlay-menu/managers/menu-manager.d.ts

@@ -1,5 +1,5 @@
-import type { Item } from '../../item';
 import { OverlayMenu } from '../index.js';
+import type { Item } from '../../item';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened
@@ -45,17 +45,17 @@ declare abstract class OpenedMenusManager {
      */
     private static setOpened;
     /**
-    * Register the menu
-    * Can be called multiple times if menu items collection has changed
-    * @param menu Menu
-    * @returns {void}
-    */
+     * Register the menu
+     * Can be called multiple times if menu items collection has changed
+     * @param menu Menu
+     * @returns {void}
+     */
     static register(menu: OverlayMenu): void;
     /**
-    * Deregister the menu
-    * @param menu Menu
-    * @returns {void}
-    */
+     * Deregister the menu
+     * @param menu Menu
+     * @returns {void}
+     */
     static deregister(menu: OverlayMenu): void;
     /**
      * Try to open nested menu for provided item. If no item provided, close nested menu

package/lib/overlay-menu/managers/menu-manager.js

@@ -1,5 +1,5 @@
-import { OverlayMenu } from '../index.js';
 import { getOverlays } from '../../overlay/managers/zindex-manager.js';
+import { OverlayMenu } from '../index.js';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened
@@ -11,7 +11,7 @@ class OpenedMenusManager {
     static get overlays() {
         const openedMenus = [];
         const overlayLayers = getOverlays();
-        overlayLayers.forEach(overlay => {
+        overlayLayers.forEach((overlay) => {
             if (overlay instanceof OverlayMenu && this.registry.has(overlay)) {
                 openedMenus.push(overlay);
             }
@@ -106,11 +106,11 @@ class OpenedMenusManager {
         return true;
     }
     /**
-    * Register the menu
-    * Can be called multiple times if menu items collection has changed
-    * @param menu Menu
-    * @returns {void}
-    */
+     * Register the menu
+     * Can be called multiple times if menu items collection has changed
+     * @param menu Menu
+     * @returns {void}
+     */
     static register(menu) {
         if (!this.registry.size) {
             document.addEventListener('tapstart', this.closeOnOutsideOfMenuTap, {
@@ -123,10 +123,10 @@ class OpenedMenusManager {
         this.setActiveMenu();
     }
     /**
-    * Deregister the menu
-    * @param menu Menu
-    * @returns {void}
-    */
+     * Deregister the menu
+     * @param menu Menu
+     * @returns {void}
+     */
     static deregister(menu) {
         const parentMenu = this.getParentMenu(menu);
         if (!this.closeMenuFor(parentMenu || menu)) {
@@ -153,7 +153,8 @@ class OpenedMenusManager {
     static toggleNestedMenuFor(parentMenu, item) {
         const crossMenu = this.crossMenu.get(parentMenu);
         if (crossMenu) {
-            if (crossMenu.item === item) { /* same menu */
+            if (crossMenu.item === item) {
+                /* same menu */
                 return;
             }
             if (!this.closeMenuFor(parentMenu)) {
@@ -228,7 +229,7 @@ class OpenedMenusManager {
      * @returns {void}
      */
     static clear() {
-        this.registry.forEach(menu => this.deregister(menu));
+        this.registry.forEach((menu) => this.deregister(menu));
     }
 }
 OpenedMenusManager.registry = new Set();

package/lib/pagination/index.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { Ref } from '@refinitiv-ui/core/directives/ref.js';
-import '../button/index.js';
-import '../button-bar/index.js';
-import '../layout/index.js';
 import '@refinitiv-ui/phrasebook/locale/en/pagination.js';
 import { Translate, TranslateDirectiveResult } from '@refinitiv-ui/translate';
+import '../button-bar/index.js';
+import '../button/index.js';
+import '../layout/index.js';
 declare enum Direction {
     increment = "increment",
     decrement = "decrement"

package/lib/pagination/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, nothing, WarningNotice } from '@refinitiv-ui/core';
+import { BasicElement, WarningNotice, 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 { state } from '@refinitiv-ui/core/decorators/state.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
-import { VERSION } from '../version.js';
-import '../button/index.js';
-import '../button-bar/index.js';
-import '../layout/index.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import '@refinitiv-ui/phrasebook/locale/en/pagination.js';
 import { translate } from '@refinitiv-ui/translate';
+import '../button-bar/index.js';
+import '../button/index.js';
+import '../layout/index.js';
+import { VERSION } from '../version.js';
 var Direction;
 (function (Direction) {
     Direction["increment"] = "increment";
@@ -195,7 +195,7 @@ let Pagination = class Pagination extends BasicElement {
      * @returns result of validation
      */
     validatePage(value, warning = false, propName = '') {
-        if ((/^[1-9]([0-9]+)?$/).test(value)) {
+        if (/^[1-9]([0-9]+)?$/.test(value)) {
             return true;
         }
         else {
@@ -400,7 +400,8 @@ let Pagination = class Pagination extends BasicElement {
         if (inputValue.startsWith('0')) {
             this.inputElement.value = inputValue.substring(1);
         }
-        else if (currentInput !== inputValue) { // update if found new value
+        else if (currentInput !== inputValue) {
+            // update if found new value
             this.inputElement.value = inputValue;
         }
     }
@@ -420,12 +421,16 @@ let Pagination = class Pagination extends BasicElement {
                 event.preventDefault();
                 break;
             case 'ArrowUp':
-                this.inputElement && this.hasNextPage(Number(this.inputElement.value || 1)) && this.updateInputValue(1, Direction.increment);
+                this.inputElement &&
+                    this.hasNextPage(Number(this.inputElement.value || 1)) &&
+                    this.updateInputValue(1, Direction.increment);
                 this.inputElement?.select();
                 event.preventDefault();
                 break;
             case 'ArrowDown':
-                this.inputElement && this.hasPreviousPage(Number(this.inputElement.value || 1)) && this.updateInputValue(1, Direction.decrement);
+                this.inputElement &&
+                    this.hasPreviousPage(Number(this.inputElement.value || 1)) &&
+                    this.updateInputValue(1, Direction.decrement);
                 this.inputElement?.select();
                 event.preventDefault();
                 break;
@@ -464,8 +469,18 @@ let Pagination = class Pagination extends BasicElement {
         return html `
       <ef-layout part="container" flex nowrap>
         <ef-button-bar part="buttons" aria-hidden="true" tabindex="-1">
-          <ef-button id="first" icon="skip-to-start" @tap="${this.onFirstTap}" .disabled=${!this.useFirstButton}></ef-button>
-          <ef-button id="previous" icon="left" @tap="${this.onPreviousTap}" .disabled=${!this.usePreviousButton}></ef-button>
+          <ef-button
+            id="first"
+            icon="skip-to-start"
+            @tap="${this.onFirstTap}"
+            .disabled=${!this.useFirstButton}
+          ></ef-button>
+          <ef-button
+            id="previous"
+            icon="left"
+            @tap="${this.onPreviousTap}"
+            .disabled=${!this.usePreviousButton}
+          ></ef-button>
         </ef-button-bar>
         <label part="label" for="input">${this.inputTextFormat}</label>
         <input
@@ -484,8 +499,18 @@ let Pagination = class Pagination extends BasicElement {
           ${ref(this.inputRef)}
         />
         <ef-button-bar part="buttons" aria-hidden="true" tabindex="-1">
-          <ef-button id="next" icon="right" @tap="${this.onNextTap}" .disabled=${!this.useNextButton}></ef-button>
-          <ef-button id="last" icon="skip-to-end" @tap="${this.onLastTap}" .disabled=${!this.useLastButton}></ef-button>
+          <ef-button
+            id="next"
+            icon="right"
+            @tap="${this.onNextTap}"
+            .disabled=${!this.useNextButton}
+          ></ef-button>
+          <ef-button
+            id="last"
+            icon="skip-to-end"
+            @tap="${this.onLastTap}"
+            .disabled=${!this.useLastButton}
+          ></ef-button>
         </ef-button-bar>
       </ef-layout>
     `;

package/lib/panel/index.js

@@ -1,5 +1,5 @@
 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';

package/lib/password-field/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
 import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
-import { TextField } from '../text-field/index.js';
-import '../icon/index.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { Translate } from '@refinitiv-ui/translate';
+import '../icon/index.js';
+import { TextField } from '../text-field/index.js';
 /**
  * A form control element for password.
  *

package/lib/password-field/index.js

@@ -2,10 +2,10 @@ import { __decorate } from "tslib";
 import { html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { TextField } from '../text-field/index.js';
-import '../icon/index.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
+import '../icon/index.js';
+import { TextField } from '../text-field/index.js';
 import { deregisterOverflowTooltip } from '../tooltip/index.js';
 /**
  * A form control element for password.
@@ -68,7 +68,7 @@ let PasswordField = class PasswordField extends TextField {
     get decorateInputMap() {
         return {
             ...super.decorateInputMap,
-            'type': this.isPasswordVisible ? 'text' : 'password'
+            type: this.isPasswordVisible ? 'text' : 'password'
         };
     }
     /**

package/lib/pill/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 /**
  * A small button style component