@refinitiv-ui/elements 5.12.0-alpha.2 → 5.12.2

package/lib/collapse/custom-elements.md

@@ -9,7 +9,7 @@ for their primary displays.
 | Property   | Attribute  | Type                | Default | Description                                      |
 |------------|------------|---------------------|---------|--------------------------------------------------|
 | `expanded` | `expanded` | `boolean`           | false   | Set to expand the item                           |
-| `header`   | `header`   | `string \| null`    | null    | Set text on the header                           |
+| `header`   | `header`   | `string`            | ""      | Set text on the header                           |
 | `level`    | `level`    | `"1" \| "2" \| "3"` | "3"     | Use level styling from theme                     |
 | `spacing`  | `spacing`  | `boolean`           | false   | Set to apply padding from theme to content section |
 

package/lib/collapse/index.d.ts

@@ -26,10 +26,14 @@ export declare class Collapse extends BasicElement {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
+    /**
+     * Observes attribute change for `attributeChangedCallback`
+     */
+    static get observedAttributes(): string[];
     /**
      * Set text on the header
      */
-    header: string | null;
+    header: string;
     /**
      * Use level styling from theme
      */
@@ -45,11 +49,23 @@ export declare class Collapse extends BasicElement {
     /**
      * An ef-panel wrapper
      */
-    private panelHolder;
+    private panelHolderRef;
     /**
      * A panel used to display content
      */
-    private panel;
+    private panelRef;
+    /**
+     * Used to control aria-level for heading
+     */
+    private headingLevel;
+    /**
+     * Run when observed attributes change value
+     * @param name attribute name
+     * @param oldValue old attribute value
+     * @param newValue new attribute value
+     * @returns {void}
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values
@@ -67,18 +83,6 @@ export declare class Collapse extends BasicElement {
      * @returns {void}
      */
     private toggle;
-    /**
-     * Check if target is a header
-     * @param element for checking
-     * @returns {boolean} true if target is ef-header
-     */
-    private static isHeader;
-    /**
-     * Handle tap on the item header, will toggle the expanded state
-     * @param event Event object
-     * @returns {void}
-     */
-    private handleTap;
     /**
      * Show or Hide the item depending on the expanded state
      * @returns {void}
@@ -99,7 +103,7 @@ export declare class Collapse extends BasicElement {
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
-     * @return {TemplateResult}  Render template
+     * @return Render template
      */
     protected render(): TemplateResult;
 }

package/lib/collapse/index.js

@@ -1,13 +1,16 @@
-var Collapse_1;
 import { __decorate } from "tslib";
 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 { query } from '@refinitiv-ui/core/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 import { VERSION } from '../version.js';
+import { preload } from '../icon/index.js';
 import '../header/index.js';
 import '../panel/index.js';
 import '../icon/index.js';
+preload('right'); /* preload calendar icons for faster loading */
 /**
  * Allows users to hide non-critical information
  * or areas of the screen, maximizing the amount of real estate
@@ -18,13 +21,13 @@ import '../icon/index.js';
  * @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 Collapse = Collapse_1 = class Collapse extends BasicElement {
+let Collapse = class Collapse extends BasicElement {
     constructor() {
         super(...arguments);
         /**
          * Set text on the header
          */
-        this.header = null;
+        this.header = '';
         /**
          * Use level styling from theme
          */
@@ -38,17 +41,17 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
          */
         this.spacing = false;
         /**
-         * Handle tap on the item header, will toggle the expanded state
-         * @param event Event object
-         * @returns {void}
+         * An ef-panel wrapper
          */
-        this.handleTap = (event) => {
-            const target = event.target;
-            // This is to prevent toggling when elements on slots are tap
-            if (Collapse_1.isHeader(target)) {
-                this.toggle();
-            }
-        };
+        this.panelHolderRef = createRef();
+        /**
+         * A panel used to display content
+         */
+        this.panelRef = createRef();
+        /**
+         * Used to control aria-level for heading
+         */
+        this.headingLevel = null;
     }
     /**
      * Element version number
@@ -68,14 +71,24 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
       :host {
         display: block;
       }
-      [part="header"] {
-        cursor: default;
+      :host(:not([expanded])) [part~=content] {
+        visibility: hidden;
+      }
+      [part~=header] {
+        position: relative;
+        z-index: 0;
       }
-      [part="toggle"] {
-        display: inline-block;
-        margin: 0 5px;
+      [part~=header-toggle]::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
       }
-      [part="content"]  {
+      [part~=content]  {
         overflow: hidden;
         box-sizing: border-box;
       }
@@ -84,14 +97,35 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
       }
     `;
     }
+    /**
+     * Observes attribute change for `attributeChangedCallback`
+     */
+    static get observedAttributes() {
+        const observed = super.observedAttributes;
+        return ['aria-level'].concat(observed);
+    }
+    /**
+     * Run when observed attributes change value
+     * @param name attribute name
+     * @param oldValue old attribute value
+     * @param newValue new attribute value
+     * @returns {void}
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'aria-level') {
+            this.headingLevel = newValue;
+        }
+    }
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values
      * @returns {void}
      */
     firstUpdated(changedProperties) {
+        var _a;
         super.firstUpdated(changedProperties);
-        this.panelHolder && this.panelHolder.setAttribute('no-animation', '');
+        (_a = this.panelHolderRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('no-animation', '');
     }
     /**
      * Invoked whenever the element is updated
@@ -115,23 +149,13 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
             this.expanded = !this.expanded;
         }
     }
-    /**
-     * Check if target is a header
-     * @param element for checking
-     * @returns {boolean} true if target is ef-header
-     */
-    static isHeader(element) {
-        return element.localName === 'ef-header' || element.getAttribute('part') === 'toggle';
-    }
     /**
      * Show or Hide the item depending on the expanded state
      * @returns {void}
      */
     showHide() {
-        if (!this.panelHolder) {
-            return;
-        }
-        this.panelHolder.removeAttribute(('no-animation'));
+        var _a;
+        (_a = this.panelHolderRef.value) === null || _a === void 0 ? void 0 : _a.removeAttribute(('no-animation'));
         this.setAnimationTargetHeight(this.getContentHeight());
     }
     /**
@@ -148,23 +172,32 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
      * @returns clientHeight of the panel so that the panel holder max-height can be set
      */
     getContentHeight() {
-        return this.panel && this.panel.clientHeight || 0;
+        const panelEl = this.panelRef.value;
+        return panelEl ? panelEl.clientHeight : 0;
     }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
-     * @return {TemplateResult}  Render template
+     * @return Render template
      */
     render() {
         return html `
-      <ef-header part="header" level="${this.level}" @tap="${this.handleTap}">
-        <ef-icon icon="right" slot="left" part="toggle"></ef-icon>
-        <slot slot="left" name="header-left"></slot>
-        <slot slot="right" name="header-right"></slot>
-        ${this.header}
+      <ef-header part="header" level="${this.level}">
+        <div part="heading" role="heading" aria-level="${ifDefined(this.headingLevel || undefined)}">
+          <div id="header-toggle"
+               part="header-toggle"
+               role="button"
+               tabindex="0"
+               aria-expanded="${this.expanded}"
+               aria-controls="content"
+               @tap=${this.toggle}>${this.header}</div>
+        </div>
+        <ef-icon icon="right" part="toggle" slot="left" aria-hidden="true"></ef-icon>
+        <slot name="header-left" slot="left"></slot>
+        <slot name="header-right" slot="right"></slot>
       </ef-header>
-      <div part="content">
-        <ef-panel ?spacing="${this.spacing}" transparent>
+      <div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-toggle">
+        <ef-panel ${ref(this.panelRef)} part="content-data" ?spacing="${this.spacing}" transparent>
           <slot></slot>
         </ef-panel>
       </div>
@@ -184,12 +217,9 @@ __decorate([
     property({ type: Boolean })
 ], Collapse.prototype, "spacing", void 0);
 __decorate([
-    query('[part="content"]', true)
-], Collapse.prototype, "panelHolder", void 0);
-__decorate([
-    query('ef-panel', true)
-], Collapse.prototype, "panel", void 0);
-Collapse = Collapse_1 = __decorate([
+    state()
+], Collapse.prototype, "headingLevel", void 0);
+Collapse = __decorate([
     customElement('ef-collapse', {
         alias: 'coral-collapse'
     })

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 
-elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;flex-shrink:0;margin:0 4px;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation;text-transform:inherit}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]:hover,:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}');
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#334bff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/halo/light';
 import '@refinitiv-ui/elements/lib/header/themes/halo/light';
 import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
 
-elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;flex-shrink:0;margin:0 4px;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation;text-transform:inherit}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]:hover,:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}');
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#334bff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
 
-elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;flex-shrink:0;margin:0 7px 0 5px}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
 
-elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;flex-shrink:0;margin:0 7px 0 5px}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/color-dialog/elements/color-palettes.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, css, svg } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
 import { VERSION } from '../../version.js';
 import { Palettes } from './palettes.js';
 import { COLOR_ITEMS } from '../helpers/color-helpers.js';

package/lib/color-dialog/elements/grayscale-palettes.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, svg } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+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 { Palettes } from './palettes.js';
 import { GRAYSCALE_ITEMS, NOCOLOR_POINTS } from '../helpers/color-helpers.js';

package/lib/color-dialog/elements/palettes.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { BasicElement, svg } from '@refinitiv-ui/core';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { VERSION } from '../../version.js';
-import { rgb } from '@refinitiv-ui/utils/color.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
 import { isHex } from '../helpers/color-helpers.js';
 /**
  * Element base class usually used

package/lib/color-dialog/helpers/value-model.js

@@ -1,4 +1,4 @@
-import { rgb } from '@refinitiv-ui/utils/color.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
 import { isHex } from './color-helpers.js';
 const rgbNumberToString = (value) => isNaN(value) ? '' : `${value}`; // replace NaN with empty string
 /**

package/lib/color-dialog/index.d.ts

@@ -7,7 +7,7 @@ import { Dialog } from '../dialog/index.js';
 import './elements/color-palettes.js';
 import './elements/grayscale-palettes.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.

package/lib/color-dialog/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { rgb } from '@refinitiv-ui/utils/color.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
 import { VERSION } from '../version.js';
 import { ValueModel } from './helpers/value-model.js';
 import { isHex, removeHashSign } from './helpers/color-helpers.js';
@@ -15,7 +15,7 @@ import { Dialog } from '../dialog/index.js';
 import './elements/color-palettes.js';
 import './elements/grayscale-palettes.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.

package/lib/combo-box/helpers/filter.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
 import type { ComboBox } from '../index';
 import type { ComboBoxFilter } from './types';
 import type { ItemData } from '../../item';

package/lib/combo-box/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
 import type { ItemData } from '../../item';
 /**
  * Predicate callback

package/lib/combo-box/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
 import { FormFieldElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 import { ItemData } from '../item';
 import { ComboBoxData, ComboBoxFilter } from './helpers/types';
 import type { List } from '../list/index.js';
@@ -13,7 +13,7 @@ import '../overlay/index.js';
 import '../list/index.js';
 import '../counter/index.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
 export type { ComboBoxFilter, ComboBoxData };
 export { ComboBoxRenderer };
 /**

package/lib/combo-box/index.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
 import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { eventOptions } from '@refinitiv-ui/core/decorators/event-options.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { eventOptions } from '@refinitiv-ui/core/lib/decorators/event-options.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
-import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 import { ComboBoxRenderer } from './helpers/renderer.js';
 import { defaultFilter } from './helpers/filter.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
@@ -17,7 +17,7 @@ import '../overlay/index.js';
 import '../list/index.js';
 import '../counter/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
 export { ComboBoxRenderer };
 const QUERY_DEBOUNCE_RATE = 0;
 // Maximum number of characters to display in multiple mode

package/lib/counter/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+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 { truncateDecimal, convertToCompactNotation } from './utils.js';
 /**

package/lib/datetime-picker/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../calendar/index.js';
 import '../icon/index.js';
@@ -15,7 +15,7 @@ import { getDateFNSLocale } from './locales.js';
 import inputFormat from 'date-fns/esm/format/index.js';
 import inputParse from 'date-fns/esm/parse/index.js';
 import isValid from 'date-fns/esm/isValid/index.js';
-import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils/date.js';
+import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils/lib/date.js';
 import { DateTimeSegment, formatToView, getCurrentTime } from './utils.js';
 import { preload } from '../icon/index.js';
 preload('calendar', 'down', 'left', 'right'); /* preload calendar icons for faster loading */

package/lib/datetime-picker/utils.js

@@ -1,4 +1,4 @@
-import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils/date.js';
+import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils/lib/date.js';
 /**
  * A helper class to split date time string into date and time segments
  */

package/lib/dialog/custom-elements.json

@@ -151,6 +151,17 @@
           "name": "refit",
           "description": "Clear all cached values and fit the popup.\nUse this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed",
           "params": []
+        },
+        {
+          "name": "willUpdate",
+          "description": "Compute property values that depend on other properties\nand are used in the rest of the update process.",
+          "params": [
+            {
+              "name": "changedProperties",
+              "description": "Properties that has changed",
+              "type": "PropertyValues"
+            }
+          ]
         }
       ]
     }

package/lib/dialog/custom-elements.md

@@ -28,9 +28,10 @@ and also allows custom footers and control buttons to be used.
 
 ## Methods
 
-| Method  | Type       | Description                                      |
-|---------|------------|--------------------------------------------------|
-| `refit` | `(): void` | Clear all cached values and fit the popup.<br />Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed |
+| Method       | Type                             | Description                                      |
+|--------------|----------------------------------|--------------------------------------------------|
+| `refit`      | `(): void`                       | Clear all cached values and fit the popup.<br />Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed |
+| `willUpdate` | `(changedProperties: any): void` | Compute property values that depend on other properties<br />and are used in the rest of the update process.<br /><br />**changedProperties**: Properties that has changed |
 
 ## Events
 

package/lib/dialog/index.d.ts

@@ -6,7 +6,7 @@ import '../panel/index.js';
 import '../header/index.js';
 import '../button/index.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,
@@ -44,6 +44,10 @@ export declare class Dialog extends Overlay {
      * @returns version number
      */
     static get version(): string;
+    /**
+     * Default role of the element
+     */
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -108,6 +112,19 @@ export declare class Dialog extends Overlay {
      * @returns boolean should component update
      */
     protected shouldUpdate(changedProperties: PropertyValues): boolean;
+    /**
+     * Compute property values that depend on other properties
+     * and are used in the rest of the update process.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * Called after the element’s properties has been updated
      * @param changedProperties Properties that has changed