@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/chart/index.js

@@ -1,18 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, query, customElement, property } from '@refinitiv-ui/core';
-import { color as parseColor } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
 import 'chart.js/dist/Chart.bundle.min.js';
-import '../header';
-import '../layout';
-import { legendHelper, merge } from './helpers';
+import { legendHelper, merge } from './helpers/index.js';
+import '../header/index.js';
+import '../layout/index.js';
 // Register plugins
-import doughnutCenterPlugin from './plugins/doughnut-center-label';
-import { VERSION } from '../';
+import doughnutCenterPlugin from './plugins/doughnut-center-label.js';
 window.Chart.pluginService.register(doughnutCenterPlugin);
 const CSS_COLOR_PREFIX = '--chart-color-';
 const CHART_TYPE_OPAQUE = ['line', 'bubble', 'radar', 'polarArea'];
@@ -415,7 +413,7 @@ let Chart = class Chart extends BasicElement {
         this.renderChart(config);
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/checkbox/custom-elements.json

@@ -21,13 +21,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -50,14 +50,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/checkbox/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-checkbox
+
+Form control for selecting one or several options
+
+## Properties
+
+| Property        | Attribute       | Type      | Default | Description                |
+|-----------------|-----------------|-----------|---------|----------------------------|
+| `checked`       | `checked`       | `boolean` | false   | Value of checkbox          |
+| `disabled`      | `disabled`      | `boolean` | false   | Set disabled state         |
+| `indeterminate` | `indeterminate` | `boolean` | false   | Set state to indeterminate |
+| `readonly`      | `readonly`      | `boolean` | false   | Set readonly state         |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/checkbox/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../icon';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
 /**
  * Form control for selecting one or several options
  * @fires checked-changed - Fired when the `checked` property changes.
@@ -17,31 +17,39 @@ export declare class Checkbox extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
+    private _checked;
     /**
      * Value of checkbox
+     * @param value new checked value
+     * @default false
      */
-    checked: boolean;
+    set checked(value: boolean);
+    get checked(): boolean;
+    private _indeterminate;
     /**
      * Set state to indeterminate
+     * @param value new indeterminate value
+     * @default false
      */
-    indeterminate: boolean;
+    set indeterminate(value: boolean);
+    get indeterminate(): boolean;
     /**
-     * Getter for label
+     * Indicates current state of checkbox
+     * @ignore
      */
-    private labelEl;
+    ariaChecked: string;
     /**
-     * Updates the element
-     * @param changedProperties Properties that has changed
-     * @returns {void}
+     * Getter for label
      */
-    protected update(changedProperties: PropertyValues): void;
+    private labelEl;
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values

package/lib/checkbox/index.js

@@ -1,13 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, customElement, property, query } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../icon';
-import { registerOverflowTooltip } from '../tooltip';
+import { __decorate } from "tslib";
+import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import '../icon/index.js';
 /**
  * Form control for selecting one or several options
  * @fires checked-changed - Fired when the `checked` property changes.
@@ -21,14 +19,14 @@ import { registerOverflowTooltip } from '../tooltip';
 let Checkbox = class Checkbox extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'checkbox';
+        this._checked = false;
+        this._indeterminate = false;
         /**
-         * Value of checkbox
-         */
-        this.checked = false;
-        /**
-         * Set state to indeterminate
+         * Indicates current state of checkbox
+         * @ignore
          */
-        this.indeterminate = false;
+        this.ariaChecked = String(this.checked);
     }
     /**
      * Element version number
@@ -38,10 +36,10 @@ let Checkbox = class Checkbox extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `
@@ -71,20 +69,44 @@ let Checkbox = class Checkbox extends ControlElement {
     `;
     }
     /**
-     * Updates the element
-     * @param changedProperties Properties that has changed
-     * @returns {void}
+     * Value of checkbox
+     * @param value new checked value
+     * @default false
      */
-    update(changedProperties) {
-        // remove indeterminate if change state to checked
-        if (changedProperties.get('checked') === false && this.checked && this.indeterminate) {
-            this.indeterminate = false;
+    set checked(value) {
+        const oldValue = this._checked;
+        if (oldValue !== value) {
+            this._checked = value;
+            // remove indeterminate if change state to checked
+            if (this._checked) {
+                this.indeterminate = false;
+            }
+            this.ariaChecked = String(value);
+            void this.requestUpdate('checked', oldValue);
         }
-        // remove checked if change state to indeterminate
-        if (changedProperties.get('indeterminate') === false && this.indeterminate && this.checked) {
-            this.checked = false;
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * Set state to indeterminate
+     * @param value new indeterminate value
+     * @default false
+     */
+    set indeterminate(value) {
+        const oldValue = this._indeterminate;
+        if (oldValue !== value) {
+            this._indeterminate = value;
+            // remove checked if change state to indeterminate
+            if (value) {
+                this.checked = false;
+            }
+            this.ariaChecked = value ? 'mixed' : String(this.checked);
+            void this.requestUpdate('indeterminate', oldValue);
         }
-        super.update(changedProperties);
+    }
+    get indeterminate() {
+        return this._indeterminate;
     }
     /**
      * Called once after the component is first rendered
@@ -155,10 +177,13 @@ let Checkbox = class Checkbox extends ControlElement {
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "checked", void 0);
+], Checkbox.prototype, "checked", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "indeterminate", void 0);
+], Checkbox.prototype, "indeterminate", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' })
+], Checkbox.prototype, "ariaChecked", void 0);
 __decorate([
     query('[part=label]', true)
 ], Checkbox.prototype, "labelEl", void 0);

package/lib/clock/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "value",
           "description": "Get time value in format `hh:mm:ss`",
-          "type": "string"
+          "type": "string",
+          "default": "\"00:00:00\""
         },
         {
           "name": "offset",
@@ -18,7 +19,8 @@
         {
           "name": "tick",
           "description": "Toggles clock ticking function.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "am-pm",
@@ -50,7 +52,8 @@
           "name": "value",
           "attribute": "value",
           "description": "Get time value in format `hh:mm:ss`",
-          "type": "string"
+          "type": "string",
+          "default": "\"00:00:00\""
         },
         {
           "name": "offset",
@@ -62,7 +65,8 @@
           "name": "tick",
           "attribute": "tick",
           "description": "Toggles clock ticking function.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "amPm",
@@ -102,6 +106,19 @@
           "name": "offset-changed",
           "description": "Fired when the the user offsets the clock in `interactive` mode."
         }
+      ],
+      "methods": [
+        {
+          "name": "resizedCallback",
+          "description": "Called when the element's dimension have changed",
+          "params": [
+            {
+              "name": "size",
+              "description": "Element size",
+              "type": "ElementSize"
+            }
+          ]
+        }
       ]
     }
   ]

package/lib/clock/custom-elements.md

@@ -0,0 +1,28 @@
+# ef-clock
+
+Display hours, minutes and seconds as clock interface
+
+## Properties
+
+| Property      | Attribute      | Type      | Default    | Description                                      |
+|---------------|----------------|-----------|------------|--------------------------------------------------|
+| `amPm`        | `am-pm`        | `boolean` | false      | Display the digital clock in 12hr format.        |
+| `analogue`    | `analogue`     | `boolean` | false      | Display clock in analogue style.                 |
+| `interactive` | `interactive`  | `boolean` | false      | Enabled interactive mode. Allowing the user to offset the value. |
+| `offset`      | `offset`       | `number`  |            | Get offset value                                 |
+| `showSeconds` | `show-seconds` | `boolean` | false      | Display the seconds segment.                     |
+| `tick`        | `tick`         | `boolean` | false      | Toggles clock ticking function.                  |
+| `value`       | `value`        | `string`  | "00:00:00" | Get time value in format `hh:mm:ss`              |
+
+## Methods
+
+| Method            | Type                | Description                                      |
+|-------------------|---------------------|--------------------------------------------------|
+| `resizedCallback` | `(size: any): void` | Called when the element's dimension have changed<br /><br />**size**: Element size |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `offset-changed` | Fired when the the user offsets the clock in `interactive` mode. |
+| `value-changed`  | Fired when the value property changes while ticking. |

package/lib/clock/index.d.ts

@@ -1,23 +1,23 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues, BasicElement } from '@refinitiv-ui/core';
+import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
 /**
  * Display hours, minutes and seconds as clock interface
  * @fires value-changed - Fired when the value property changes while ticking.
  * @fires offset-changed - Fired when the the user offsets the clock in `interactive` mode.
  */
-export declare class Clock extends BasicElement {
+export declare class Clock extends ResponsiveElement {
     /**
      * Element version number
      * @returns version number
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Shared internal function,
      * used for handling notifications from tick manager.
@@ -44,6 +44,7 @@ export declare class Clock extends BasicElement {
     private tickTimestamp;
     /**
      * Get time value in format `hh:mm:ss`
+     * @default 00:00:00
      * @returns value
      */
     get value(): string;
@@ -68,6 +69,7 @@ export declare class Clock extends BasicElement {
     private _tick;
     /**
      * Toggles clock ticking function.
+     * @default false
      */
     get tick(): boolean;
     set tick(value: boolean);
@@ -99,6 +101,10 @@ export declare class Clock extends BasicElement {
     * Getter for seconds part.
     */
     private secondsPart;
+    /**
+    * Size of the clock.
+    */
+    private size;
     /**
      * Get the display time in seconds.
      * This value includes any offsets applied.
@@ -260,6 +266,12 @@ export declare class Clock extends BasicElement {
     * @returns {TemplateResult} template
     */
     private get secondsSegmentTemplate();
+    /**
+     * Called when the element's dimension have changed
+     * @param size Element size
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
     /**
      * Called when the element has been appended to the DOM
      * @returns {void}

package/lib/clock/index.js

@@ -1,22 +1,23 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, customElement, property, BasicElement, ifDefined, WarningNotice, query, state } from '@refinitiv-ui/core';
-import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils';
-import { HOURS_IN_DAY, MINUTES_IN_HOUR, SECONDS_IN_DAY, SECONDS_IN_HOUR, SECONDS_IN_MINUTE } from './utils/timestamps';
-import { register, deRegister } from './utils/TickManager';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { html, css, WarningNotice, ResponsiveElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils/lib/date.js';
+import { HOURS_IN_DAY, MINUTES_IN_HOUR, SECONDS_IN_DAY, SECONDS_IN_HOUR, SECONDS_IN_MINUTE } from './utils/timestamps.js';
+import { register, deRegister } from './utils/TickManager.js';
 const UP = 'Up';
 const DOWN = 'Down';
+const SMALL_SIZE = 130; // Break point for small size clock face.
 /**
  * Display hours, minutes and seconds as clock interface
  * @fires value-changed - Fired when the value property changes while ticking.
  * @fires offset-changed - Fired when the the user offsets the clock in `interactive` mode.
  */
-let Clock = class Clock extends BasicElement {
+let Clock = class Clock extends ResponsiveElement {
     constructor() {
         super(...arguments);
         /**
@@ -60,6 +61,10 @@ let Clock = class Clock extends BasicElement {
         * Display clock in analogue style.
         */
         this.analogue = false;
+        /**
+        * Size of the clock.
+        */
+        this.size = null;
     }
     /**
      * Element version number
@@ -69,10 +74,10 @@ let Clock = class Clock extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `
@@ -105,6 +110,7 @@ let Clock = class Clock extends BasicElement {
     }
     /**
      * Get time value in format `hh:mm:ss`
+     * @default 00:00:00
      * @returns value
      */
     get value() {
@@ -130,7 +136,7 @@ let Clock = class Clock extends BasicElement {
             this.synchronise(); // Required to reset any tick session
             const { hours, minutes, seconds } = toTimeSegment(value);
             this.baseTime = hours * SECONDS_IN_HOUR + minutes * SECONDS_IN_MINUTE + seconds;
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     /**
@@ -154,11 +160,12 @@ let Clock = class Clock extends BasicElement {
         const newOffset = Math.round(offset % SECONDS_IN_DAY) || 0;
         if (oldOffset !== newOffset) {
             this._offset = newOffset;
-            void this.requestUpdate('offset', oldOffset);
+            this.requestUpdate('offset', oldOffset);
         }
     }
     /**
      * Toggles clock ticking function.
+     * @default false
      */
     get tick() {
         return this._tick;
@@ -170,7 +177,7 @@ let Clock = class Clock extends BasicElement {
             this._tick = newValue;
             this.synchronise();
             this.configureTickManager();
-            void this.requestUpdate('tick', oldValue);
+            this.requestUpdate('tick', oldValue);
         }
     }
     /**
@@ -446,6 +453,15 @@ let Clock = class Clock extends BasicElement {
     get secondsSegmentTemplate() {
         return this.generateSegmentTemplate('seconds', this.displaySeconds);
     }
+    /**
+     * Called when the element's dimension have changed
+     * @param size Element size
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        // size should be set to small only if it's analog clock and it's smaller than defined break point
+        this.size = this.analogue && Math.min(size.width, size.height) < SMALL_SIZE ? 'small' : null;
+    }
     /**
      * Called when the element has been appended to the DOM
      * @returns {void}
@@ -498,7 +514,7 @@ let Clock = class Clock extends BasicElement {
         const hourAngle = Number((30 * (this.displayHours24 + (1 / 60) * this.displayMinutes)).toFixed(2));
         return html `
       <div part="hands">
-        <div part="digital">${this.digitalClockTemplate}</div>
+        ${this.size === 'small' ? html `${this.amPm ? this.amPmTemplate : undefined}` : html `<div part="digital">${this.digitalClockTemplate}</div>`}
         <div part="hand hour" style="transform: rotate(${hourAngle}deg)"></div>
         <div part="hand minute" style="transform: rotate(${minAngle}deg)"></div>
         ${this.showSeconds ? html `<div part="hand second" style="transform: rotate(${secAngle}deg)"></div>` : undefined}
@@ -556,6 +572,9 @@ __decorate([
 __decorate([
     query('[part~=seconds]', true)
 ], Clock.prototype, "secondsPart", void 0);
+__decorate([
+    property({ type: String, attribute: 'size', reflect: true })
+], Clock.prototype, "size", void 0);
 Clock = __decorate([
     customElement('ef-clock', {
         alias: 'sapphire-clock'