@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
+
+elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(51, 51, 51, 0.5);--zero-line-color:rgba(51, 51, 51, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;font-size:12rem;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/header/themes/halo/light';
+import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
+
+elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(224, 224, 224, 0.5);--zero-line-color:rgba(224, 224, 224, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FAFAFA;--tooltip-background-color:rgba(13, 13, 13, 0.9);--tooltip-title-color:#FFFFFF;--tooltip-body-color:#FFFFFF;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;font-size:12rem;--tooltip-background-color:#FFF4CC;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--chart-color-11:#147070;--chart-color-12:#AF583A;--chart-color-13:#0F1E8A;--chart-color-14:#737373;--chart-color-15:#4C3C00;--chart-color-16:#563F77;--chart-color-17:#004E4F;--chart-color-18:#993000;--chart-color-19:#00432F;--chart-color-20:#A3204C;--chart-color-21:#404040;--chart-color-22:#174A66;--chart-color-23:#116262;--chart-color-24:#88442D;--chart-color-25:#5D122B}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
+
+elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(10, 10, 10, 0.5);--zero-line-color:rgba(10, 10, 10, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1C;--tooltip-background-color:rgba(194, 194, 194, 0.9);--tooltip-title-color:#151516;--tooltip-body-color:#151516;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(194,194,194,.8);--legend-key-box-width:12;--grid-line-color:rgba(194, 194, 194, 0.1);--zero-line-color:rgba(194, 194, 194, 0.1);--animation-duration:500;--tooltip-background-color:rgba(74, 74, 82, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#C2C2C2;--doughnut-border-color:#ffffff;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
+
+elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(213, 216, 219, 0.5);--zero-line-color:rgba(213, 216, 219, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FFFFFF;--tooltip-background-color:rgba(72, 72, 72, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(72,72,72,.8);--legend-key-box-width:12;--grid-line-color:rgba(72, 72, 72, 0.1);--zero-line-color:rgba(72, 72, 72, 0.1);--animation-duration:500;--tooltip-background-color:rgba(190, 195, 204, 0.9);--tooltip-title-color:#484848;--tooltip-body-color:#484848;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#484848;--doughnut-border-color:#000000;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3}');

package/lib/checkbox/custom-elements.json

@@ -0,0 +1,67 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-checkbox",
+      "description": "Form control for selecting one or several options",
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Value of checkbox",
+          "type": "boolean"
+        },
+        {
+          "name": "indeterminate",
+          "description": "Set state to indeterminate",
+          "type": "boolean"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "checked",
+          "attribute": "checked",
+          "description": "Value of checkbox",
+          "type": "boolean"
+        },
+        {
+          "name": "indeterminate",
+          "attribute": "indeterminate",
+          "description": "Set state to indeterminate",
+          "type": "boolean"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "checked-changed",
+          "description": "Fired when the `checked` property changes."
+        }
+      ]
+    }
+  ]
+}

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` |         | Value of checkbox          |
+| `disabled`      | `disabled`      | `boolean` | false   | Set disabled state         |
+| `indeterminate` | `indeterminate` | `boolean` |         | 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

@@ -0,0 +1,95 @@
+import { JSXInterface } from '../jsx';
+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.
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+export declare class Checkbox extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole = "checkbox";
+    /**
+     * 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;
+    private _checked;
+    /**
+     * Value of checkbox
+     * @param value new checked value
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    private _indeterminate;
+    /**
+     * Set state to indeterminate
+     * @param value new indeterminate value
+     */
+    set indeterminate(value: boolean);
+    get indeterminate(): boolean;
+    /**
+     * Indicates current state of checkbox
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * Getter for label
+     */
+    private labelEl;
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Run when checkbox is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    private onTap;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Change checked state and fire
+     * checked-changed event
+     * @return {void}
+     */
+    private handleChangeChecked;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-checkbox': Checkbox;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-checkbox': Partial<Checkbox> | JSXInterface.ControlHTMLAttributes<Checkbox>;
+    }
+  }
+}
+
+export {};

package/lib/checkbox/index.js

@@ -0,0 +1,193 @@
+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.
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+let Checkbox = class Checkbox extends ControlElement {
+    constructor() {
+        super(...arguments);
+        this.defaultRole = 'checkbox';
+        this._checked = false;
+        this._indeterminate = false;
+        /**
+         * Indicates current state of checkbox
+         * @ignore
+         */
+        this.ariaChecked = String(this.checked);
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * 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 {
+        display: inline-block;
+      }
+      [part=check] {
+        visibility: hidden;
+      }
+      :host([checked]) [part=check],
+      :host([indeterminate]) [part=check] {
+        visibility: inherit;
+      }
+      [part=label],
+      [part=container] {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      [part=label] {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      :host(:empty) [part=label], [part=label]:empty {
+        display: none;
+      }
+    `;
+    }
+    /**
+     * Value of checkbox
+     * @param value new checked value
+     */
+    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);
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * Set state to indeterminate
+     * @param value new indeterminate value
+     */
+    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);
+        }
+    }
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
+        registerOverflowTooltip(this.labelEl, () => this.textContent);
+    }
+    /**
+     * Run when checkbox is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    onTap(event) {
+        if (this.disabled || this.readonly || event.defaultPrevented) {
+            return;
+        }
+        this.handleChangeChecked();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (this.disabled || this.readonly || event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                this.handleChangeChecked();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Change checked state and fire
+     * checked-changed event
+     * @return {void}
+     */
+    handleChangeChecked() {
+        this.checked = !this.checked;
+        this.notifyPropertyChange('checked', this.checked);
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <div part="container">
+        <div part="check">
+          ${!this.indeterminate ? html `<ef-icon icon="tick"></ef-icon>` : null}
+        </div>
+      </div>
+      <div part="label"><slot></slot></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], 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);
+Checkbox = __decorate([
+    customElement('ef-checkbox', {
+        alias: 'coral-checkbox'
+    })
+], Checkbox);
+export { Checkbox };

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])){cursor:pointer}:host(:hover:not([checked]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])){cursor:pointer}:host(:hover:not([checked]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');

package/lib/clock/custom-elements.json

@@ -0,0 +1,121 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-clock",
+      "description": "Display hours, minutes and seconds as clock interface",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Get time value in format `hh:mm:ss`",
+          "type": "string"
+        },
+        {
+          "name": "offset",
+          "description": "Get offset value",
+          "type": "number"
+        },
+        {
+          "name": "tick",
+          "description": "Toggles clock ticking function.",
+          "type": "boolean"
+        },
+        {
+          "name": "am-pm",
+          "description": "Display the digital clock in 12hr format.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "show-seconds",
+          "description": "Display the seconds segment.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "interactive",
+          "description": "Enabled interactive mode. Allowing the user to offset the value.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "analogue",
+          "description": "Display clock in analogue style.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Get time value in format `hh:mm:ss`",
+          "type": "string"
+        },
+        {
+          "name": "offset",
+          "attribute": "offset",
+          "description": "Get offset value",
+          "type": "number"
+        },
+        {
+          "name": "tick",
+          "attribute": "tick",
+          "description": "Toggles clock ticking function.",
+          "type": "boolean"
+        },
+        {
+          "name": "amPm",
+          "attribute": "am-pm",
+          "description": "Display the digital clock in 12hr format.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "showSeconds",
+          "attribute": "show-seconds",
+          "description": "Display the seconds segment.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "interactive",
+          "attribute": "interactive",
+          "description": "Enabled interactive mode. Allowing the user to offset the value.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "analogue",
+          "attribute": "analogue",
+          "description": "Display clock in analogue style.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Fired when the value property changes while ticking."
+        },
+        {
+          "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` |         | Toggles clock ticking function.                  |
+| `value`       | `value`        | `string`  |         | 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. |