@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/layout/index.js

@@ -0,0 +1,212 @@
+import { __decorate } from "tslib";
+import { ResponsiveElement, 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';
+/**
+ * Layout component for creating responsive applications and components
+ * @fires resize - Fired when the element's size changes.
+ */
+let Layout = class Layout extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Displays debug lines.
+         * @type {boolean}
+         */
+        this.debug = false;
+        /**
+         * Tells the element to display flex,
+         * displaying children in a row wrap layout.
+         */
+        this.flex = false;
+        /**
+         * Tells the element to display as a container,
+         * displaying children in a vertical nowrap layout.
+         */
+        this.container = false;
+        /**
+         * Prevents the element from being flexible,
+         * when inside of another flex layout.
+         */
+        this.noflex = false;
+        /**
+         * Prevents wrapping flex items,
+         * when the parent isn't a container.
+         */
+        this.nowrap = false;
+        /**
+         * Makes the element a scrollable viewport.
+         */
+        this.scrollable = false;
+        /**
+         * Sets the fixed size of the element.
+         * Value could be pixel, percents or auto.
+         */
+        this.size = null;
+        /**
+         * Sets the rough size of the element based on other siblings and content.
+         * Value could be pixel, percents or auto.
+         */
+        this.basis = null;
+        /**
+         * Allows the width to shrink below its contents.
+         * Also prevents the width from shrinking past a certain point.
+         * Value could be pixel, percents or _empty_.
+         */
+        this.minWidth = null;
+        /**
+         * Allows the height to shrink below its contents.
+         * Also prevents the height from shrinking past a certain point.
+         * Value could be pixel, percents or _empty_.
+         */
+        this.minHeight = null;
+        /**
+         * Prevents the width from expanding past a certain point.
+         * Value could be pixel, percents or _empty_.
+         */
+        this.maxWidth = null;
+        /**
+         * Prevents the height from expanding past a certain point.
+         * Value could be pixel, percents or _empty_.
+         */
+        this.maxHeight = null;
+    }
+    /**
+     * 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 {
+        box-sizing: border-box;
+        display: block;
+        position: relative;
+        overflow: hidden;
+        min-width: var(--min-width, 0);
+        min-height: var(--min-height, 0);
+        max-width: var(--max-width, none);
+        max-height: var(--max-height, none);
+        flex: var(--flex, 1 1 auto);
+        -webkit-flex: var(--flex, 1 1 auto);
+        -ms-flex: var(--flex, 1 1 auto);
+      }
+
+      :host([flex]) {
+        display: flex;
+        display: -webkit-flex;
+        display: flexbox;
+        display: -ms-flexbox;
+        flex-flow: row wrap;
+        align-items: stretch;
+        align-content: flex-start;
+      }
+
+      :host([flex][container]) {
+        flex-flow: column nowrap;
+        -ms-flex-flow: column nowrap;
+        -webkit-flex-flow: column nowrap;
+        -webkit-flex-flow: column none;
+      }
+
+      :host([scrollable]) {
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      :host([noflex]) {
+        flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        -webkit: 0 0 auto;
+      }
+
+      :host([flex][nowrap]) {
+        flex-wrap: nowrap;
+        -ms-flex-wrap: nowrap;
+        -webkit-flex-wrap: nowrap;
+        -webkit-flex-wrap: none;
+      }
+    `;
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param {PropertyValues} changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        if (changedProperties.has('minWidth')) {
+            this.updateVariable('--min-width', this.minWidth);
+        }
+        if (changedProperties.has('minHeight')) {
+            this.updateVariable('--min-height', this.minHeight);
+        }
+        if (changedProperties.has('maxWidth')) {
+            this.updateVariable('--max-width', this.maxWidth);
+        }
+        if (changedProperties.has('maxHeight')) {
+            this.updateVariable('--max-height', this.maxHeight);
+        }
+        if (changedProperties.has('size') || changedProperties.has('basis')) {
+            this.updateVariable('--flex', this.size ? '0 0 ' + this.size : '1 1 ' + (this.basis || 'auto'));
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+      */
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Layout.prototype, "debug", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Layout.prototype, "flex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Layout.prototype, "container", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Layout.prototype, "noflex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Layout.prototype, "nowrap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Layout.prototype, "scrollable", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Layout.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Layout.prototype, "basis", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-width' })
+], Layout.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'min-height' })
+], Layout.prototype, "minHeight", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-width' })
+], Layout.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'max-height' })
+], Layout.prototype, "maxHeight", void 0);
+Layout = __decorate([
+    customElement('ef-layout', {
+        alias: 'quartz-layout'
+    })
+], Layout);
+export { Layout };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-layout', ':host([debug]){outline:rgba(102,120,255,.33) solid 1px;outline-offset:-1px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-layout', ':host([debug]){outline:rgba(51,75,255,.33) solid 1px;outline-offset:-1px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-layout', ':host([debug]){outline:rgba(255,153,51,.33) solid 1px;outline-offset:-1px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-layout', ':host([debug]){outline:rgba(238,118,0,.33) solid 1px;outline-offset:-1px}');

package/lib/led-gauge/custom-elements.json

@@ -0,0 +1,113 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-led-gauge",
+      "description": "A component used to show data in a LED-like\nhorizontal bar visualization.",
+      "attributes": [
+        {
+          "name": "top-value",
+          "description": "Value of bar for top legend position\nValue can be -100 to 100",
+          "type": "number | null"
+        },
+        {
+          "name": "bottom-value",
+          "description": "Value of bar for bottom legend position\nValue can be -100 to 100",
+          "type": "number | null"
+        },
+        {
+          "name": "range",
+          "description": "Value of range. eg [-20, 70]",
+          "type": "object",
+          "default": "[]"
+        },
+        {
+          "name": "top-label",
+          "description": "Label to be displayed in the top legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "bottom-label",
+          "description": "Label to be displayed in the bottom legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "range-label",
+          "description": "Label to be displayed in the bottom legend\nwhen a range is displayed\nand no bottom text is already set.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "neutral-color",
+          "description": "Turn off background color and use grey",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "zero",
+          "description": "Sets the zero scale position. [center, left, right]",
+          "type": "string",
+          "default": "\"center\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "topValue",
+          "attribute": "top-value",
+          "description": "Value of bar for top legend position\nValue can be -100 to 100",
+          "type": "number | null"
+        },
+        {
+          "name": "bottomValue",
+          "attribute": "bottom-value",
+          "description": "Value of bar for bottom legend position\nValue can be -100 to 100",
+          "type": "number | null"
+        },
+        {
+          "name": "range",
+          "attribute": "range",
+          "description": "Value of range. eg [-20, 70]",
+          "type": "object",
+          "default": "[]"
+        },
+        {
+          "name": "topLabel",
+          "attribute": "top-label",
+          "description": "Label to be displayed in the top legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "bottomLabel",
+          "attribute": "bottom-label",
+          "description": "Label to be displayed in the bottom legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "rangeLabel",
+          "attribute": "range-label",
+          "description": "Label to be displayed in the bottom legend\nwhen a range is displayed\nand no bottom text is already set.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "neutralColor",
+          "attribute": "neutral-color",
+          "description": "Turn off background color and use grey",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "zero",
+          "attribute": "zero",
+          "description": "Sets the zero scale position. [center, left, right]",
+          "type": "string",
+          "default": "\"center\""
+        }
+      ]
+    }
+  ]
+}

package/lib/led-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-led-gauge
+
+A component used to show data in a LED-like
+horizontal bar visualization.
+
+## Properties
+
+| Property       | Attribute       | Type             | Default  | Description                                      |
+|----------------|-----------------|------------------|----------|--------------------------------------------------|
+| `bottomLabel`  | `bottom-label`  | `string`         | ""       | Label to be displayed in the bottom legend       |
+| `bottomValue`  | `bottom-value`  | `number \| null` | null     | Value of bar for bottom legend position<br />Value can be -100 to 100 |
+| `neutralColor` | `neutral-color` | `boolean`        | "false"  | Turn off background color and use grey           |
+| `range`        | `range`         | `object`         | []       | Value of range. eg [-20, 70]                     |
+| `rangeLabel`   | `range-label`   | `string`         | ""       | Label to be displayed in the bottom legend<br />when a range is displayed<br />and no bottom text is already set. |
+| `topLabel`     | `top-label`     | `string`         | ""       | Label to be displayed in the top legend          |
+| `topValue`     | `top-value`     | `number \| null` | null     | Value of bar for top legend position<br />Value can be -100 to 100 |
+| `zero`         | `zero`          | `string`         | "center" | Sets the zero scale position. [center, left, right] |

package/lib/led-gauge/index.d.ts

@@ -0,0 +1,143 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../canvas/index.js';
+/**
+ * A component used to show data in a LED-like
+ * horizontal bar visualization.
+ */
+export declare class LedGauge extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    private _zero;
+    constructor();
+    /**
+     * 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;
+    /**
+     * Value of bar for top legend position
+     * Value can be -100 to 100
+     */
+    topValue: number | null;
+    /**
+     * Value of bar for bottom legend position
+     * Value can be -100 to 100
+     */
+    bottomValue: number | null;
+    /**
+     * Value of range. eg [-20, 70]
+     */
+    range: number[];
+    /**
+     * Label to be displayed in the top legend
+     */
+    topLabel: string;
+    /**
+     * Label to be displayed in the bottom legend
+     */
+    bottomLabel: string;
+    /**
+     * Label to be displayed in the bottom legend
+     * when a range is displayed
+     * and no bottom text is already set.
+     */
+    rangeLabel: string;
+    /**
+     * Turn off background color and use grey
+     * @default false
+     */
+    neutralColor: boolean;
+    /**
+     * Sets the zero scale position. [center, left, right]
+     * @default center
+     */
+    get zero(): string;
+    set zero(val: string);
+    private get _shadowRoot();
+    /**
+     * Canvas in ef-canvas
+     */
+    private get canvas();
+    /**
+     * The 2 dimensional context of the canvas, used for drawing
+     */
+    private get ctx();
+    /**
+     * Min value of gauge
+     * @default 0
+     */
+    private get min();
+    /**
+     * Max value of gauge
+     * @default 100
+     */
+    private get max();
+    /**
+     * Invoked whenever the element is update
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * @param barCount bar count for calculate positions
+     * @param val value for calculate positions
+     * @returns value bar index
+     */
+    private getValueBarIndex;
+    /**
+     * @param varName css variable name
+     * @returns {void}
+     */
+    private fillBarColor;
+    /**
+     * @param idx index of bar for find what section it belongs
+     * @param sectionLength length of section for find section color
+     * @param barAmount bar amount
+     * @returns color variable name
+     */
+    private getBarColor;
+    /**
+     * @param id id of the label can be top, bottom or range
+     * @param labelPos position of label in pixel
+     * @returns {void}
+     */
+    private updateLabelPosition;
+    /**
+     * Render a led-gauge bar in canvas
+     * @returns {void}
+     */
+    private renderBarGauge;
+    /**
+     * @param value value of gauge bar
+     * @param label user label
+     * @param id id of template
+     * @returns template to render
+     */
+    private createLabelTemplate;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-led-gauge': LedGauge;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-led-gauge': Partial<LedGauge> | JSXInterface.HTMLAttributes<LedGauge>;
+    }
+  }
+}
+
+export {};