@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/time-picker/themes/halo/dark/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');

package/lib/time-picker/themes/halo/light/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');

package/lib/time-picker/themes/solar/charcoal/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');

package/lib/time-picker/themes/solar/pearl/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');

package/lib/toggle/custom-elements.json

@@ -0,0 +1,82 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-toggle",
+      "description": "Form control that can toggle between 2 states",
+      "attributes": [
+        {
+          "name": "checked-label",
+          "description": "Label of toggle checked",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "label",
+          "description": "Label of toggle",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "checked",
+          "description": "Value of toggle",
+          "type": "boolean"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "checkedLabel",
+          "attribute": "checked-label",
+          "description": "Label of toggle checked",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label of toggle",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "checked",
+          "attribute": "checked",
+          "description": "Value of toggle",
+          "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/toggle/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-toggle
+
+Form control that can toggle between 2 states
+
+## Properties
+
+| Property       | Attribute       | Type      | Default | Description             |
+|----------------|-----------------|-----------|---------|-------------------------|
+| `checked`      | `checked`       | `boolean` |         | Value of toggle         |
+| `checkedLabel` | `checked-label` | `string`  | ""      | Label of toggle checked |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state      |
+| `label`        | `label`         | `string`  | ""      | Label of toggle         |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state      |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/toggle/index.d.ts

@@ -0,0 +1,86 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+/**
+ * Form control that can toggle between 2 states
+ *
+ * @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
+ *
+ * @fires checked-changed - Fired when the `checked` property changes.
+ */
+export declare class Toggle extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole = "switch";
+    /**
+     * Label of toggle checked
+     */
+    checkedLabel: string;
+    /**
+     * Label of toggle
+     */
+    label: string;
+    private _checked;
+    /**
+     * Value of toggle
+     * @param value new checked value
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * Aria indicating current state of toggle
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Invoked when the element is first updated. Implement to perform one time
+     * work on the element after update.
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Called when checked value changes and dispatch the event
+     * @returns {void}
+     */
+    private handleCheckedChange;
+    /**
+     * Handle keyboard event for toggle action
+     * @param event Keyboard event
+     * @returns {void}
+     */
+    private handleKeyDown;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-toggle': Toggle;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-toggle': Partial<Toggle> | JSXInterface.ControlHTMLAttributes<Toggle>;
+    }
+  }
+}
+
+export {};

package/lib/toggle/index.js

@@ -0,0 +1,152 @@
+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 { VERSION } from '../version.js';
+/**
+ * Return the attribute that converted from the property
+ * Prevent empty string that reflected to attribute
+ * @private
+ * @param value value from the property
+ * @returns string converted to attribute
+ */
+const emptyStringToNull = function (value) {
+    return value || null;
+};
+/**
+ * Form control that can toggle between 2 states
+ *
+ * @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
+ *
+ * @fires checked-changed - Fired when the `checked` property changes.
+ */
+let Toggle = class Toggle extends ControlElement {
+    constructor() {
+        super(...arguments);
+        this.defaultRole = 'switch';
+        /**
+         * Label of toggle checked
+         */
+        this.checkedLabel = '';
+        /**
+         * Label of toggle
+         */
+        this.label = '';
+        this._checked = false;
+        /**
+         * Aria indicating current state of toggle
+         * @ignore
+         */
+        this.ariaChecked = String(this.checked);
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Value of toggle
+     * @param value new checked value
+     */
+    set checked(value) {
+        const oldValue = this._checked;
+        if (oldValue !== value) {
+            this._checked = value;
+            this.ariaChecked = String(value);
+            void this.requestUpdate('checked', oldValue);
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+    `;
+    }
+    /**
+     * Invoked when the element is first updated. Implement to perform one time
+     * work on the element after update.
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('tap', this.handleCheckedChange);
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    /**
+     * Called when checked value changes and dispatch the event
+     * @returns {void}
+     */
+    handleCheckedChange() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.checked = !this.checked;
+        this.notifyPropertyChange('checked', this.checked);
+    }
+    /**
+     * Handle keyboard event for toggle action
+     * @param event Keyboard event
+     * @returns {void}
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            this.handleCheckedChange();
+        }
+        else if (event.keyCode && event.keyCode === 13 || event.keyCode === 32) { // For older browsers
+            this.handleCheckedChange();
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+    <div part="toggle">${this.checked && this.checkedLabel ? this.checkedLabel : this.label}</div>`;
+    }
+};
+__decorate([
+    property({
+        type: String,
+        attribute: 'checked-label',
+        reflect: true,
+        converter: { toAttribute: emptyStringToNull }
+    })
+], Toggle.prototype, "checkedLabel", void 0);
+__decorate([
+    property({
+        type: String,
+        reflect: true,
+        converter: { toAttribute: emptyStringToNull }
+    })
+], Toggle.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Toggle.prototype, "checked", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' })
+], Toggle.prototype, "ariaChecked", void 0);
+Toggle = __decorate([
+    customElement('ef-toggle', {
+        alias: 'coral-toggle'
+    })
+], Toggle);
+export { Toggle };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:12rem;background-color:#0d0d0d;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.5);transition:box-shadow .1s,border-color .1s;width:44px;height:24px;font-weight:400;color:#ccc;line-height:18px;text-transform:uppercase}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #4d4d4d;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;box-sizing:border-box;border-radius:inherit;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#ccc}:host([checked-label]),:host([label]){min-width:52px;width:54px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{left:auto;border-color:#334bff;background-color:#334bff;right:1px}:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #334bff}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#334bff}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host(:hover:not([readonly])){color:#fff}:host(:hover:not([readonly])) [part=toggle]{border-color:#334bff}:host(:hover:not([readonly])) [part=toggle]::after{background-color:#334bff;border-color:#334bff}:host([checked]){color:#fff}:host([disabled]) [part=toggle]::after{opacity:.2}:host [part=toggle]::after,:host([checked]) [part=toggle]::after{border:1px solid #0d0d0d}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:12rem;background-color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.25);transition:box-shadow .1s,border-color .1s;width:44px;height:24px;font-weight:600;color:#0d0d0d;line-height:18px;text-transform:uppercase}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #ccc;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;box-sizing:border-box;border-radius:inherit;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#0d0d0d}:host([checked-label]),:host([label]){min-width:52px;width:54px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{left:auto;border-color:#334bff;background-color:#334bff;right:1px}:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #334bff}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#334bff}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host(:hover:not([readonly])){color:#0d0d0d}:host(:hover:not([readonly])) [part=toggle]{border-color:#334bff}:host(:hover:not([readonly])) [part=toggle]::after{background-color:#334bff;border-color:#334bff}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:13rem;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.6);transition:box-shadow .2s,border-color .2s;width:44px;height:24px;color:#e2e2e2;background-color:#000;line-height:18px}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #4a4a52;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#555d6c;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#f93;background-color:#f93}:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #f93}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#f93;border-style:dotted}:host [part=toggle] ::after{top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host([checked]) [part=toggle] ::after{right:1px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:13rem;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:0;box-shadow:inset 0 0 0 rgba(0,0,0,.3);transition:box-shadow .2s,border-color .2s;width:44px;height:24px;color:#484848;background-color:#fff;line-height:18px}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #a9afba;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#d4d7dd;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px;min-width:44px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#f93;background-color:#f93}:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 0 #ffb266}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#ffb266;border-style:dotted}:host [part=toggle] ::after{top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:24px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 24px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:20px}:host([checked]) [part=toggle] ::after{right:1px}');

package/lib/tooltip/custom-elements.json

@@ -0,0 +1,62 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-tooltip",
+      "description": "Tooltip displays extra information when the\nuser hovers the pointer over an item.",
+      "attributes": [
+        {
+          "name": "selector",
+          "description": "CSS selector to match the tooltip",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "position",
+          "description": "The position of the tooltip. Use the following values:\n`auto` (default) - display based on mouse enter coordinates\n`above` - display above the element\n`right` - display to the right of the element\n`below` - display beneath the element\n`left` - display to the left of the element",
+          "type": "\"auto\" | \"above\" | \"right\" | \"below\" | \"left\"",
+          "default": "\"auto\""
+        },
+        {
+          "name": "transition-style",
+          "description": "Set the transition style.\nValue can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,\n`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition",
+          "type": "TooltipTransitionStyle",
+          "default": "\"fade\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "selector",
+          "attribute": "selector",
+          "description": "CSS selector to match the tooltip",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "condition",
+          "description": "Provide a function to test against the target.\nReturn `true` if the target matches",
+          "type": "TooltipCondition"
+        },
+        {
+          "name": "renderer",
+          "description": "A renderer to define tooltip internal content.\nReturn undefined, `String`, `HTMLElement` or `DocumentFragment`.\nIf the content is not present, tooltip will not be displayed",
+          "type": "TooltipRenderer"
+        },
+        {
+          "name": "position",
+          "attribute": "position",
+          "description": "The position of the tooltip. Use the following values:\n`auto` (default) - display based on mouse enter coordinates\n`above` - display above the element\n`right` - display to the right of the element\n`below` - display beneath the element\n`left` - display to the left of the element",
+          "type": "\"auto\" | \"above\" | \"right\" | \"below\" | \"left\"",
+          "default": "\"auto\""
+        },
+        {
+          "name": "transitionStyle",
+          "attribute": "transition-style",
+          "description": "Set the transition style.\nValue can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,\n`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition",
+          "type": "TooltipTransitionStyle",
+          "default": "\"fade\""
+        }
+      ]
+    }
+  ]
+}

package/lib/tooltip/custom-elements.md

@@ -0,0 +1,14 @@
+# ef-tooltip
+
+Tooltip displays extra information when the
+user hovers the pointer over an item.
+
+## Properties
+
+| Property          | Attribute          | Type                                             | Default | Description                                      |
+|-------------------|--------------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `condition`       |                    | `TooltipCondition`                               |         | Provide a function to test against the target.<br />Return `true` if the target matches |
+| `position`        | `position`         | `"auto" \| "above" \| "right" \| "below" \| "left"` | "auto"  | The position of the tooltip. Use the following values:<br />`auto` (default) - display based on mouse enter coordinates<br />`above` - display above the element<br />`right` - display to the right of the element<br />`below` - display beneath the element<br />`left` - display to the left of the element |
+| `renderer`        |                    | `TooltipRenderer`                                |         | A renderer to define tooltip internal content.<br />Return undefined, `String`, `HTMLElement` or `DocumentFragment`.<br />If the content is not present, tooltip will not be displayed |
+| `selector`        | `selector`         | `string`                                         | ""      | CSS selector to match the tooltip                |
+| `transitionStyle` | `transition-style` | `TooltipTransitionStyle`                         | "fade"  | Set the transition style.<br />Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,<br />`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition |

package/lib/tooltip/elements/title-tooltip.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tooltip/elements/title-tooltip.js

@@ -0,0 +1,18 @@
+import { matches } from '@refinitiv-ui/core';
+import { addTooltipCondition } from './tooltip-element.js';
+import { tooltipRenderer } from '../helpers/renderer.js';
+// Support title attribute
+Object.defineProperty(HTMLElement.prototype, 'title', {
+    get: function () {
+        const title = this.getAttribute('title');
+        if (title) {
+            this.title = title;
+        }
+        return this.getAttribute('tooltip');
+    },
+    set: function (value) {
+        this.setAttribute('title', '');
+        this.setAttribute('tooltip', value);
+    }
+});
+addTooltipCondition(element => matches(element, '[title]'), tooltipRenderer);

package/lib/tooltip/elements/tooltip-element.d.ts

@@ -0,0 +1,21 @@
+import type { Tooltip } from '../index';
+import type { TooltipCondition, TooltipRenderer } from '../helpers/types';
+/**
+ * Add the new condition to the default tooltip
+ * @param condition Condition to add
+ * @param renderer Renderer for condition
+ * @returns {void}
+ */
+declare const addTooltipCondition: (condition: TooltipCondition, renderer: TooltipRenderer) => void;
+/**
+ * Remove the existing condition from default tooltip
+ * @param condition Condition to remove
+ * @returns {void}
+ */
+declare const removeTooltipCondition: (condition: TooltipCondition) => void;
+/**
+ * The default tooltip, which is used to replicate `title` attribute
+ * and to show tooltips for EF elements
+ */
+declare const tooltipElement: Tooltip;
+export { tooltipElement, addTooltipCondition, removeTooltipCondition };

package/lib/tooltip/elements/tooltip-element.js

@@ -0,0 +1,54 @@
+const defaultTooltipMap = new Map();
+const rendererElementMap = new WeakMap();
+/**
+ * Add the new condition to the default tooltip
+ * @param condition Condition to add
+ * @param renderer Renderer for condition
+ * @returns {void}
+ */
+const addTooltipCondition = (condition, renderer) => {
+    defaultTooltipMap.set(condition, renderer);
+};
+/**
+ * Remove the existing condition from default tooltip
+ * @param condition Condition to remove
+ * @returns {void}
+ */
+const removeTooltipCondition = (condition) => {
+    defaultTooltipMap.delete(condition);
+};
+const condition = (target, paths) => {
+    let res = false;
+    for (const [condition, renderer] of defaultTooltipMap.entries()) {
+        res = condition(target, paths);
+        if (res) {
+            // first by order condition only. It must not be possible to show multiple tooltips
+            rendererElementMap.set(target, renderer);
+            break;
+        }
+    }
+    return res;
+};
+const renderer = (target) => {
+    const render = rendererElementMap.get(target);
+    return render ? render(target) : undefined;
+};
+/**
+ * The default tooltip, which is used to replicate `title` attribute
+ * and to show tooltips for EF elements
+ */
+const tooltipElement = document.createElement('ef-tooltip');
+tooltipElement.setAttribute('ref', 'title-override');
+tooltipElement.condition = condition;
+tooltipElement.renderer = renderer;
+const appendTitleTooltip = () => {
+    document.body.appendChild(tooltipElement);
+};
+if (document.body) {
+    appendTitleTooltip();
+}
+else {
+    /* istanbul ignore next */
+    document.addEventListener('DOMContentLoaded', appendTitleTooltip, { once: true });
+}
+export { tooltipElement, addTooltipCondition, removeTooltipCondition };

package/lib/tooltip/helpers/overflow-tooltip.d.ts

@@ -0,0 +1,9 @@
+import type { TooltipRenderer } from './types';
+/**
+ * Register the element to show a tooltip for overflow content
+ * @param target Target element
+ * @param [render] Optional renderer. By default target `textContent` is returned
+ * @returns {void}
+ */
+declare const register: (target: HTMLElement, render?: TooltipRenderer) => void;
+export { register };

package/lib/tooltip/helpers/overflow-tooltip.js

@@ -0,0 +1,19 @@
+import { addTooltipCondition } from '../elements/tooltip-element.js';
+const registry = new WeakMap();
+const overflowCondition = (target) => registry.has(target) && (target.scrollWidth - target.offsetWidth) > 1;
+const overflowRenderer = (target) => target.textContent;
+const tooltipRenderer = (target) => {
+    const renderer = registry.get(target);
+    return renderer ? renderer(target) : undefined;
+};
+addTooltipCondition(overflowCondition, tooltipRenderer);
+/**
+ * Register the element to show a tooltip for overflow content
+ * @param target Target element
+ * @param [render] Optional renderer. By default target `textContent` is returned
+ * @returns {void}
+ */
+const register = (target, render = overflowRenderer) => {
+    registry.set(target, render);
+};
+export { register };

package/lib/tooltip/helpers/renderer.d.ts

@@ -0,0 +1,8 @@
+import type { TooltipRenderer } from './types';
+/**
+ * A default renderer that renders `tooltip` attribute
+ * @param target Target to check
+ * @returns tooltip or null or undefined
+ */
+declare const tooltipRenderer: TooltipRenderer;
+export { tooltipRenderer };

package/lib/tooltip/helpers/renderer.js

@@ -0,0 +1,11 @@
+/**
+ * A default renderer that renders `tooltip` attribute
+ * @param target Target to check
+ * @returns tooltip or null or undefined
+ */
+const tooltipRenderer = (target) => {
+    if (target.hasAttribute('tooltip')) {
+        return target.getAttribute('tooltip');
+    }
+};
+export { tooltipRenderer };