@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#fafafa;border-radius:10px;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;height:20px;line-height:20px;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#334bff;border-color:#334bff}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}:host [part=close]{touch-action:manipulation;cursor:pointer;color:#595959;display:flex;position:relative;margin-left:4px;min-width:12px;width:12px;height:12px;box-sizing:border-box;opacity:.4}:host [part=close]:active{border:1px solid transparent}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#c2c2c2;background-color:#000}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host{background:#c2c2c2;border-radius:2px;padding:0 4px;color:#000;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#c2c2c2}:host([toggles][active]){background:#f93;color:#000}:host([toggles][active]) [part=close]{color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#fff}:host([toggles][active]:hover){background:#ffb366}}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#a9afba;background-color:#fff}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host{background:#a9afba;border-radius:2px;padding:0 4px;color:#fff;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#a9afba}:host([toggles][active]){background:#ee7600;color:#fff}:host([toggles][active]) [part=close]{color:#ee7600}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#8a8a96}:host([toggles][active]:hover){background:#ee7600}}');

package/lib/progress-bar/custom-elements.json

@@ -0,0 +1,58 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-progress-bar",
+      "description": "Data visualisation component,\nshowing a simple percentage bar.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current value of the bar.\nThis can range from `0-100` and\nwill be represented as a percentage bar",
+          "type": "string",
+          "default": "\"100\""
+        },
+        {
+          "name": "alignment",
+          "description": "The alignment of the bar.\nThe bar can either start from the `left` or `right`.",
+          "type": "string",
+          "default": "\"left\""
+        },
+        {
+          "name": "label",
+          "description": "The current label to be displayed next to the bar.\nThis is affixed to the end of the bar, so make sure to cater for this.",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The current value of the bar.\nThis can range from `0-100` and\nwill be represented as a percentage bar",
+          "type": "string",
+          "default": "\"100\""
+        },
+        {
+          "name": "alignment",
+          "attribute": "alignment",
+          "description": "The alignment of the bar.\nThe bar can either start from the `left` or `right`.",
+          "type": "string",
+          "default": "\"left\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "The current label to be displayed next to the bar.\nThis is affixed to the end of the bar, so make sure to cater for this.",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "label",
+          "description": "Overrides the label property and places custom content. Useful for modifying the color, or, adding icons."
+        }
+      ]
+    }
+  ]
+}

package/lib/progress-bar/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-progress-bar
+
+Data visualisation component,
+showing a simple percentage bar.
+
+## Properties
+
+| Property    | Attribute   | Type     | Default | Description                                      |
+|-------------|-------------|----------|---------|--------------------------------------------------|
+| `alignment` | `alignment` | `string` | "left"  | The alignment of the bar.<br />The bar can either start from the `left` or `right`. |
+| `label`     | `label`     | `string` | ""      | The current label to be displayed next to the bar.<br />This is affixed to the end of the bar, so make sure to cater for this. |
+| `value`     | `value`     | `string` | "100"   | The current value of the bar.<br />This can range from `0-100` and<br />will be represented as a percentage bar |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `label` | Overrides the label property and places custom content. Useful for modifying the color, or, adding icons. |

package/lib/progress-bar/index.d.ts

@@ -0,0 +1,82 @@
+import { JSXInterface } from '../jsx';
+import { CSSResultGroup, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
+/**
+ * Data visualisation component,
+ * showing a simple percentage bar.
+ * @slot label - Overrides the label property and places custom content. Useful for modifying the color, or, adding icons.
+ */
+export declare class ProgressBar extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    private valuePrevious;
+    /**
+     * 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;
+    /**
+     * The current value of the bar.
+     * This can range from `0-100` and
+     * will be represented as a percentage bar
+     */
+    value: string;
+    /**
+     * The alignment of the bar.
+     * The bar can either start from the `left` or `right`.
+     */
+    alignment: string;
+    /**
+     * The current label to be displayed next to the bar.
+     * This is affixed to the end of the bar, so make sure to cater for this.
+     */
+    label: string;
+    /**
+     * Converts value from string to number for calculations
+     * @returns value of bar as a number
+     */
+    private get valueNumber();
+    /**
+     * Gets the current part names for the internal bar
+     */
+    private get barParts();
+    /**
+     * Calculates the bar's percentage width
+     */
+    private get barFill();
+    /**
+     * Returns CSS styles for showing
+     * the bar's fill percentage.
+     */
+    private get barStyle();
+    /**
+     * Called after an update has occurred
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-progress-bar': ProgressBar;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-progress-bar': Partial<ProgressBar> | JSXInterface.HTMLAttributes<ProgressBar>;
+    }
+  }
+}
+
+export {};

package/lib/progress-bar/index.js

@@ -0,0 +1,157 @@
+import { __decorate } from "tslib";
+import { css, html, BasicElement } 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+/**
+ * Data visualisation component,
+ * showing a simple percentage bar.
+ * @slot label - Overrides the label property and places custom content. Useful for modifying the color, or, adding icons.
+ */
+let ProgressBar = class ProgressBar extends BasicElement {
+    constructor() {
+        super(...arguments);
+        this.valuePrevious = '';
+        /**
+         * The current value of the bar.
+         * This can range from `0-100` and
+         * will be represented as a percentage bar
+         */
+        this.value = '100';
+        /**
+         * The alignment of the bar.
+         * The bar can either start from the `left` or `right`.
+         */
+        this.alignment = 'left';
+        /**
+         * The current label to be displayed next to the bar.
+         * This is affixed to the end of the bar, so make sure to cater for this.
+         */
+        this.label = '';
+    }
+    /**
+     * 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 {
+      height: 10px;
+      display: flex;
+      position: relative;
+    }
+    [part~=bar] {
+      height: 100%;
+      position: relative;
+    }
+    [part=label] {
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      height: 0;
+      line-height: 0;
+      white-space: nowrap;
+      margin-left: 10px;
+    }
+    :host([alignment=right]) {
+      justify-content: flex-end;
+    }
+    :host([alignment=right]) [part=label] {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 10px;
+    }
+    :host [part~=bar-zero] [part=label] {
+      margin: 0;
+    }
+    `;
+    }
+    /**
+     * Converts value from string to number for calculations
+     * @returns value of bar as a number
+     */
+    get valueNumber() {
+        const value = parseFloat(this.value);
+        if (!this.value || isNaN(value)) { // check value is invalid
+            const valuePrevious = parseFloat(this.valuePrevious);
+            // if valuePrevious is invalid return default value 100
+            return !valuePrevious || isNaN(valuePrevious) ? 100 : valuePrevious;
+        }
+        return value;
+    }
+    /**
+     * Gets the current part names for the internal bar
+     */
+    get barParts() {
+        return this.barFill ? 'bar' : 'bar bar-zero';
+    }
+    /**
+     * Calculates the bar's percentage width
+     */
+    get barFill() {
+        return Math.min(100, Math.max(0, this.valueNumber));
+    }
+    /**
+     * Returns CSS styles for showing
+     * the bar's fill percentage.
+     */
+    get barStyle() {
+        return {
+            width: `${this.barFill}%`,
+            minWidth: `${this.barFill ? 1 : 0}px`
+        };
+    }
+    /**
+     * Called after an update has occurred
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === 'value') {
+                this.valuePrevious = oldValue;
+                this.value = this.valueNumber.toString();
+            }
+        });
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+    <div part="${this.barParts}" style="${styleMap(this.barStyle)}">
+      <span part="label">
+        <slot name="label">${this.label}</slot>
+      </span>
+    </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ProgressBar.prototype, "alignment", void 0);
+__decorate([
+    property({ type: String })
+], ProgressBar.prototype, "label", void 0);
+ProgressBar = __decorate([
+    customElement('ef-progress-bar', {
+        alias: 'sapphire-bar'
+    })
+], ProgressBar);
+export { ProgressBar };

package/lib/progress-bar/themes/halo/dark/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#6678ff;height:8px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .1s}:host [part=label]{color:#ccc;transition:margin .1s}');

package/lib/progress-bar/themes/halo/light/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#334bff;height:8px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .1s}:host [part=label]{color:#0d0d0d;transition:margin .1s}');

package/lib/progress-bar/themes/solar/charcoal/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#f93;height:5px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .2s}:host [part=label]{color:#c2c2c2;transition:margin .2s}');

package/lib/progress-bar/themes/solar/pearl/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#ee7600;height:5px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .2s}:host [part=label]{color:#484848;transition:margin .2s}');

package/lib/radio-button/custom-elements.json

@@ -0,0 +1,82 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-radio-button",
+      "description": "Basic radio button",
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Radio button checked state",
+          "type": "boolean"
+        },
+        {
+          "name": "value",
+          "description": "Value of the radio button",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "name": "name",
+          "description": "Group multiple radio buttons by assigning the same name",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "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": "Radio button checked state",
+          "type": "boolean"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of the radio button",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Group multiple radio buttons by assigning the same name",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "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/radio-button/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-radio-button
+
+Basic radio button
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| `checked`  | `checked`  | `boolean` |         | Radio button checked state                       |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state                               |
+| `name`     | `name`     | `string`  | 0       | Group multiple radio buttons by assigning the same name |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state                               |
+| `value`    | `value`    | `string`  | 0       | Value of the radio button                        |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/radio-button/index.d.ts

@@ -0,0 +1,122 @@
+import { JSXInterface } from '../jsx';
+import { CSSResultGroup, ControlElement, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+/**
+ * Basic radio button
+ *
+ * @fires checked-changed - Fired when the `checked` property changes.
+ *
+ * @attr {string} [value=] - Value of the radio button
+ * @prop {string} [value=] - Value of the radio button
+*
+ * @attr {string} [name=] - Group multiple radio buttons by assigning the same name
+ * @prop {string} [name=] - Group multiple radio buttons by assigning the same name
+ *
+ * @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 RadioButton extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole = "radio";
+    /**
+     * 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;
+    /**
+     * Radio button checked state
+     * @param value checked state
+     * @returns {void}
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * Aria indicating checked state
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * Getter for label
+     */
+    private labelEl;
+    /**
+     * Called when connected to DOM
+     * @returns {void}
+     */
+    connectedCallback(): void;
+    /**
+     * Called when disconnected from DOM
+     * @returns {void}
+     */
+    disconnectedCallback(): void;
+    /**
+     * Invoked whenever the element is update
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * Invoked when the element is first updated
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Manage group members state, when either one is being checked
+     * @returns {void}
+     */
+    private manageGroupState;
+    /**
+     * Run when radio button 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;
+    /**
+     * Navigate to next or previous checkable sibling in the same group if present
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-radio-button': RadioButton;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-radio-button': Partial<RadioButton> | JSXInterface.ControlHTMLAttributes<RadioButton>;
+    }
+  }
+}
+
+export {};