@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/label/index.js

@@ -0,0 +1,244 @@
+import { __decorate } from "tslib";
+import { BasicElement, 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { addTooltipCondition, removeTooltipCondition } from '../tooltip/index.js';
+/**
+ * Configuration object
+ * for mutations observers
+ */
+const observerOptions = {
+    subtree: true,
+    childList: true,
+    characterData: true
+};
+/**
+ * Reusable SPACE
+ */
+const _ = ' ';
+/**
+ * Determines if the browser is legacy or modern.
+ */
+/* istanbul ignore next */
+const browserType = isIE ? 'legacy' : 'modern';
+/**
+ * Displays a text with alternative truncation
+ */
+let Label = class Label extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Limit the number of lines before truncating
+         */
+        this.lineClamp = 0;
+        /**
+         * Set state to error
+         */
+        this.error = false;
+        /**
+         * Set state to warning
+         */
+        this.warning = false;
+        /**
+         * Trimmed chunks of textual content
+         */
+        this.chunks = [];
+        /**
+         * Mutation Observer used to detect changes in the Light DOM
+         */
+        this.mutationObserver = new MutationObserver(() => this.recalculate(true));
+        /**
+         * Render used to display the tooltip
+         * @returns Tooltip text
+         */
+        this.tooltipRenderer = () => this.text;
+        /**
+         * Condition used to display the tooltip
+         * @param target Tooltip target
+         * @returns Whether the tooltip should be shown or not.
+         */
+        this.tooltipCondition = (target) => this.shouldShowTooltip(target);
+    }
+    /**
+     * 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.
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+      }
+      .split {
+        height: 1.2em;
+        line-height: 1.2em;
+        margin-top: -0.1em;
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .left.modern {
+        word-break: break-all;
+        white-space: normal;
+      }
+      .left.legacy {
+        text-overflow: ellipsis;
+      }
+      .center {
+        flex: 0 100 auto;
+      }
+      .right.modern {
+        direction: rtl;
+        text-overflow: ellipsis;
+      }
+      .right.legacy span {
+        float: right;
+      }
+      .clamp {
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        display: -webkit-inline-box;
+        text-overflow: ellipsis;
+        position: relative;
+        overflow-wrap: break-word;
+      }
+    `;
+    }
+    /**
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        addTooltipCondition(this.tooltipCondition, this.tooltipRenderer);
+        this.mutationObserver.observe(this, observerOptions);
+        !isIE && this.recalculate(); // In IE the mutation will trigger
+    }
+    /**
+     * @override
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        removeTooltipCondition(this.tooltipCondition);
+        this.mutationObserver.disconnect();
+    }
+    /**
+     * Decides whether the tooltip should b shown
+     * @param tooltipTarget Target element passed by the tooltip condition
+     * @returns True if the tooltip should be shown
+     */
+    shouldShowTooltip(tooltipTarget) {
+        const targetMatches = tooltipTarget === this;
+        const part = this.renderRoot.firstElementChild;
+        if (targetMatches && part) {
+            return part.clientHeight !== part.scrollHeight || part.clientWidth !== part.scrollWidth;
+        }
+        return false;
+    }
+    /**
+     * Handles any modifications to the internal HTML
+     * @param [mutation=false] is the request from a mutation event?
+     * @returns {void}
+     */
+    recalculate(mutation = false) {
+        mutation; // keeping here for future use
+        const oldValue = this.text;
+        const raw = this.textContent || '';
+        this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);
+        const newValue = this.text;
+        if (oldValue !== newValue) {
+            this.requestUpdate('text', oldValue);
+        }
+    }
+    /**
+     * Returns cleaned version of `this.textContent`.
+     */
+    get text() {
+        return this.chunks.join(_);
+    }
+    /**
+     * Default template
+     */
+    get truncateTemplate() {
+        const words = this.chunks;
+        const left = [];
+        const right = [];
+        const isSingleWord = words.length === 1;
+        if (isSingleWord) {
+            const word = words[0];
+            const split = Math.round(word.length / 2);
+            left.push(word.substr(0, split));
+            right.push(word.substr(split));
+        }
+        else {
+            const split = Math.round(words.length / 2);
+            for (let i = 0; i < words.length; i += 1) {
+                (i < split ? left : right).push(words[i]);
+            }
+        }
+        const leftPart = html `<div class="split left ${browserType}">${left.join(_)}</div>`;
+        const centerPart = isSingleWord ? undefined : html `<div class="split center">&nbsp;</div>`;
+        const rightPart = right.length ? html `<div class="split right ${browserType}"><span dir="ltr">${right.join(_)}</span></div>` : undefined;
+        return html `${leftPart}${centerPart}${rightPart}`;
+    }
+    /**
+     * Template for when line clamp is set
+     */
+    get clampTemplate() {
+        const styles = {
+            lineClamp: `${this.lineClamp}`,
+            '-webkit-line-clamp': `${this.lineClamp}`
+        };
+        /* istanbul ignore if */
+        if (browserType === 'legacy') {
+            const cs = getComputedStyle(this);
+            const lineHeight = parseFloat(cs.lineHeight) || 1.2 /* css default */;
+            styles.maxHeight = `calc(1em * ${lineHeight} * ${this.lineClamp})`; // faux clamp in legacy browsers
+            styles.whiteSpace = this.lineClamp === 1 ? 'nowrap' : ''; // show ellipsis in legacy browsers
+        }
+        return html `
+      <span class="clamp ${browserType}" style="${styleMap(styles)}">${this.text}</span>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        const template = this.lineClamp ? this.clampTemplate : this.truncateTemplate;
+        /* istanbul ignore if */
+        if (browserType === 'legacy') {
+            // Mutation observer does not fire in IE11 if slot is not present
+            return html `${template}<span style="display: none !important;"><slot></slot></span>`;
+        }
+        return template;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'line-clamp' })
+], Label.prototype, "lineClamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Label.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Label.prototype, "warning", void 0);
+Label = __decorate([
+    customElement('ef-label', {
+        alias: 'quartz-label'
+    })
+], Label);
+export { Label };

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#ffc800}:host([error]),:host([error][warning]){color:#f5475b}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#cca000}:host([error]),:host([error][warning]){color:#d94255}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#f5475b}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#d94255}');

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/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-layout
+
+Layout component for creating responsive applications and components
+
+## Properties
+
+| Property     | Attribute    | Type             | Default | Description                                      |
+|--------------|--------------|------------------|---------|--------------------------------------------------|
+| `basis`      | `basis`      | `string \| null` | null    | Sets the rough size of the element based on other siblings and content.<br />Value could be pixel, percents or auto. |
+| `container`  | `container`  | `boolean`        | false   | Tells the element to display as a container,<br />displaying children in a vertical nowrap layout. |
+| `debug`      | `debug`      | `boolean`        | false   | Displays debug lines.                            |
+| `flex`       | `flex`       | `boolean`        | false   | Tells the element to display flex,<br />displaying children in a row wrap layout. |
+| `maxHeight`  | `max-height` | `string \| null` | null    | Prevents the height from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `maxWidth`   | `max-width`  | `string \| null` | null    | Prevents the width from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minHeight`  | `min-height` | `string \| null` | null    | Allows the height to shrink below its contents.<br />Also prevents the height from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minWidth`   | `min-width`  | `string \| null` | null    | Allows the width to shrink below its contents.<br />Also prevents the width from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `noflex`     | `noflex`     | `boolean`        | false   | Prevents the element from being flexible,<br />when inside of another flex layout. |
+| `nowrap`     | `nowrap`     | `boolean`        | false   | Prevents wrapping flex items,<br />when the parent isn't a container. |
+| `scrollable` | `scrollable` | `boolean`        | false   | Makes the element a scrollable viewport.         |
+| `size`       | `size`       | `string \| null` | null    | Sets the fixed size of the element.<br />Value could be pixel, percents or auto. |
+
+## Events
+
+| Event    | Description                            |
+|----------|----------------------------------------|
+| `resize` | Fired when the element's size changes. |

package/lib/layout/index.d.ts

@@ -0,0 +1,107 @@
+import { JSXInterface } from '../jsx';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, 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 `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;
+    /**
+     * 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 {};