@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/layout/custom-elements.json

@@ -0,0 +1,163 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-layout",
+      "description": "Layout component for creating responsive applications and components",
+      "attributes": [
+        {
+          "name": "debug",
+          "description": "Displays debug lines.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "flex",
+          "description": "Tells the element to display flex,\ndisplaying children in a row wrap layout.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "container",
+          "description": "Tells the element to display as a container,\ndisplaying children in a vertical nowrap layout.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noflex",
+          "description": "Prevents the element from being flexible,\nwhen inside of another flex layout.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "nowrap",
+          "description": "Prevents wrapping flex items,\nwhen the parent isn't a container.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "scrollable",
+          "description": "Makes the element a scrollable viewport.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "size",
+          "description": "Sets the fixed size of the element.\nValue could be pixel, percents or auto.",
+          "type": "string | null"
+        },
+        {
+          "name": "basis",
+          "description": "Sets the rough size of the element based on other siblings and content.\nValue could be pixel, percents or auto.",
+          "type": "string | null"
+        },
+        {
+          "name": "min-width",
+          "description": "Allows the width to shrink below its contents.\nAlso prevents the width from shrinking past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        },
+        {
+          "name": "min-height",
+          "description": "Allows the height to shrink below its contents.\nAlso prevents the height from shrinking past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        },
+        {
+          "name": "max-width",
+          "description": "Prevents the width from expanding past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        },
+        {
+          "name": "max-height",
+          "description": "Prevents the height from expanding past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        }
+      ],
+      "properties": [
+        {
+          "name": "debug",
+          "attribute": "debug",
+          "description": "Displays debug lines.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "flex",
+          "attribute": "flex",
+          "description": "Tells the element to display flex,\ndisplaying children in a row wrap layout.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "container",
+          "attribute": "container",
+          "description": "Tells the element to display as a container,\ndisplaying children in a vertical nowrap layout.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noflex",
+          "attribute": "noflex",
+          "description": "Prevents the element from being flexible,\nwhen inside of another flex layout.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "nowrap",
+          "attribute": "nowrap",
+          "description": "Prevents wrapping flex items,\nwhen the parent isn't a container.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "scrollable",
+          "attribute": "scrollable",
+          "description": "Makes the element a scrollable viewport.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "Sets the fixed size of the element.\nValue could be pixel, percents or auto.",
+          "type": "string | null"
+        },
+        {
+          "name": "basis",
+          "attribute": "basis",
+          "description": "Sets the rough size of the element based on other siblings and content.\nValue could be pixel, percents or auto.",
+          "type": "string | null"
+        },
+        {
+          "name": "minWidth",
+          "attribute": "min-width",
+          "description": "Allows the width to shrink below its contents.\nAlso prevents the width from shrinking past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        },
+        {
+          "name": "minHeight",
+          "attribute": "min-height",
+          "description": "Allows the height to shrink below its contents.\nAlso prevents the height from shrinking past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        },
+        {
+          "name": "maxWidth",
+          "attribute": "max-width",
+          "description": "Prevents the width from expanding past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        },
+        {
+          "name": "maxHeight",
+          "attribute": "max-height",
+          "description": "Prevents the height from expanding past a certain point.\nValue could be pixel, percents or _empty_.",
+          "type": "string | null"
+        }
+      ],
+      "events": [
+        {
+          "name": "resize",
+          "description": "Fired when the element's size changes."
+        }
+      ]
+    }
+  ]
+}

package/lib/layout/index.d.ts

@@ -0,0 +1,107 @@
+import { JSXInterface } from '../jsx';
+import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+/**
+ * Layout component for creating responsive applications and components
+ * @fires resize - Fired when the element's size changes.
+ */
+export declare class Layout extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+   * A `CSSResult` that will be used
+   * to style the host, slotted children
+   * and the internal template of the element.
+   * @return CSS template
+   */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * Displays debug lines.
+     * @type {boolean}
+     */
+    debug: boolean;
+    /**
+     * Tells the element to display flex,
+     * displaying children in a row wrap layout.
+     */
+    flex: boolean;
+    /**
+     * Tells the element to display as a container,
+     * displaying children in a vertical nowrap layout.
+     */
+    container: boolean;
+    /**
+     * Prevents the element from being flexible,
+     * when inside of another flex layout.
+     */
+    noflex: boolean;
+    /**
+     * Prevents wrapping flex items,
+     * when the parent isn't a container.
+     */
+    nowrap: boolean;
+    /**
+     * Makes the element a scrollable viewport.
+     */
+    scrollable: boolean;
+    /**
+     * Sets the fixed size of the element.
+     * Value could be pixel, percents or auto.
+     */
+    size: string | null;
+    /**
+     * Sets the rough size of the element based on other siblings and content.
+     * Value could be pixel, percents or auto.
+     */
+    basis: string | 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_.
+     */
+    minWidth: string | 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_.
+     */
+    minHeight: string | null;
+    /**
+     * Prevents the width from expanding past a certain point.
+     * Value could be pixel, percents or _empty_.
+     */
+    maxWidth: string | null;
+    /**
+     * Prevents the height from expanding past a certain point.
+     * Value could be pixel, percents or _empty_.
+     */
+    maxHeight: string | null;
+    /**
+     * Invoked whenever the element is updated
+     * @param {PropertyValues} changedProperties Map of changed properties with old values
+     * @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-layout': Layout;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-layout': Partial<Layout> | JSXInterface.HTMLAttributes<Layout>;
+    }
+  }
+}
+
+export {};

package/lib/layout/index.js

@@ -0,0 +1,215 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+/**
+ * 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 `CSSResult` 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\""
+        }
+      ]
+    }
+  ]
+}