@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/label/index.d.ts

@@ -1,25 +1,25 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../tooltip';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
 /**
  * Displays a text with alternative truncation
  */
-export declare class Label extends ResponsiveElement {
+export declare class Label extends BasicElement {
     /**
-     * A `CSSResult` that will be used
+     * 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.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
-    /**
-     * Enable shortening the slot content
-     */
-    truncate: 'center' | '' | null | undefined;
+    static get styles(): CSSResultGroup;
     /**
      * Limit the number of lines before truncating
      */
-    maxLine: null;
+    lineClamp: number;
     /**
      * Set state to error
      */
@@ -29,90 +29,56 @@ export declare class Label extends ResponsiveElement {
      */
     warning: boolean;
     /**
-     * Use to set title attribute for tooltip
-     */
-    private span;
-    /**
-     * Use to prevent resizes observer in certain use cases
+     * Trimmed chunks of textual content
      */
-    private updateTimer;
+    private chunks;
     /**
-     * Store trimmed text content
+     * Mutation Observer used to detect changes in the Light DOM
      */
-    private rawText;
+    private mutationObserver;
     /**
-     * Tooltip state when truncate = center
+     * Render used to display the tooltip
+     * @returns Tooltip text
      */
-    private enableTooltip;
-    private mutationObserver?;
+    protected tooltipRenderer: () => string;
     /**
-     * The lifecycle method called when properties changed first time
-     * @param changedProperties properties it's the Map object which has the updated properties
-     * @returns {void}
+     * Condition used to display the tooltip
+     * @param target Tooltip target
+     * @returns Whether the tooltip should be shown or not.
      */
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected tooltipCondition: (target: HTMLElement) => boolean;
     /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns shouldUpdate
+     * @override
      */
-    protected updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
     /**
-     * Used to prevent handler fired when previous content are the same as last content
+     * @override
      */
-    private previousContent;
+    disconnectedCallback(): void;
     /**
-     * Handle statement after slot or innerHTML has been changed
-     * @returns void
+     * Decides whether the tooltip should b shown
+     * @param tooltipTarget Target element passed by the tooltip condition
+     * @returns True if the tooltip should be shown
      */
-    private handleSlotChange;
+    protected shouldShowTooltip(tooltipTarget: HTMLElement): boolean;
     /**
-     * Restore text content
+     * Handles any modifications to the internal HTML
+     * @param [mutation=false] is the request from a mutation event?
      * @returns {void}
      */
-    private restoreTextContent;
+    protected recalculate(mutation?: boolean): void;
     /**
-     * concatenating all of text content in the slots
-     * @returns trimmed text content
+     * Returns cleaned version of `this.textContent`.
      */
-    private retrieveSlotContent;
+    protected get text(): string;
     /**
-     * Get element width minus padding
-     * @param node parent node that wrapper text node
-     * @returns {number} width minus padding
-     */
-    private getElementWidthMinusPadding;
-    /**
-     * Truncate a long string in the middle and add an ellipsis.
-     * @param parentNode parent node
-     * @param textNode text node
-     * @param fullText string
-     * @returns {void}
+     * Default template
      */
-    private middleEllipsis;
+    protected get truncateTemplate(): TemplateResult;
     /**
-     * Handle text ellipsis and tooltip state when element has been resized
-     * @returns void
+     * Template for when line clamp is set
      */
-    private onResize;
-    /**
-     * Handle tooltip statement when properties changed
-     * @returns void
-     */
-    private updateTooltip;
-    /**
-     * private method but can't override
-     * access modifiers in typescript.
-     * @ignore
-     * @param size element dimensions
-     * @returns {void}
-     */
-    resizedCallback(): void;
-    /**
-     * Determine show/hide tooltip state
-     * @returns {boolean} true if center truncate or the element is smaller than a parent
-     */
-    private isShowTooltip;
+    protected get clampTemplate(): TemplateResult;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -131,4 +97,6 @@ declare global {
       'ef-label': Partial<Label> | JSXInterface.HTMLAttributes<Label>;
     }
   }
-}
+}
+
+export {};

package/lib/label/index.js

@@ -1,32 +1,39 @@
-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, query } from '@refinitiv-ui/core';
-import '../tooltip';
-import { TextHelpers } from './helpers/text';
-// Observer config for items
+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 ResponsiveElement {
+let Label = class Label extends BasicElement {
     constructor() {
         super(...arguments);
-        /**
-         * Enable shortening the slot content
-         */
-        this.truncate = null;
         /**
          * Limit the number of lines before truncating
          */
-        this.maxLine = null;
+        this.lineClamp = 0;
         /**
          * Set state to error
          */
@@ -36,20 +43,34 @@ let Label = class Label extends ResponsiveElement {
          */
         this.warning = false;
         /**
-         * Store trimmed text content
+         * Trimmed chunks of textual content
          */
-        this.rawText = '';
+        this.chunks = [];
         /**
-         * Tooltip state when truncate = center
+         * Mutation Observer used to detect changes in the Light DOM
          */
-        this.enableTooltip = false;
+        this.mutationObserver = new MutationObserver(() => this.recalculate(true));
         /**
-         * Used to prevent handler fired when previous content are the same as last content
+         * Render used to display the tooltip
+         * @returns Tooltip text
          */
-        this.previousContent = '';
+        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 `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -57,192 +78,140 @@ let Label = class Label extends ResponsiveElement {
     static get styles() {
         return css `
       :host {
-        display: inline-block;
+        display: inline-flex;
         max-width: 100%;
-        box-sizing: border-box;
       }
-      :host([truncate]) {
-        white-space: nowrap;
-        text-overflow: ellipsis;
+      .split {
+        height: 1.2em;
+        line-height: 1.2em;
+        margin-top: -0.1em;
+        flex: 0 1 auto;
+        min-width: 0;
         overflow: hidden;
+        white-space: nowrap;
       }
-      :host([max-line]) {
-        display: -webkit-inline-box;
-        -webkit-line-clamp: var(--max-line);
+      .left.modern {
+        word-break: break-all;
         white-space: normal;
-        -webkit-box-orient: vertical;
+      }
+      .left.legacy {
         text-overflow: ellipsis;
-        overflow: hidden;
       }
-      :host([truncate=center]) {
-        white-space: nowrap;
-        text-overflow: clip;
+      .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;
       }
     `;
     }
     /**
-     * The lifecycle method called when properties changed first time
-     * @param changedProperties properties it's the Map object which has the updated properties
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.rawText = this.retrieveSlotContent();
-    }
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns shouldUpdate
+     * @override
      */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('truncate')) {
-            if (this.truncate === 'center') {
-                this.restoreTextContent();
-                this.middleEllipsis(this, this.span, this.rawText);
-            }
-            else {
-                this.restoreTextContent();
-                if (this.maxLine) {
-                    this.style.setProperty('--max-line', this.maxLine);
-                }
-            }
-            this.updateTooltip();
-        }
-        else if (changedProperties.has('maxLine')) {
-            this.style.setProperty('--max-line', this.maxLine);
-            this.updateTooltip();
-        }
-        // we must wait while all elements in the tree are updated before starting the mutation observer
-        void this.updateComplete.then(() => {
-            if (!this.mutationObserver) {
-                // Start watching for any child mutations
-                this.mutationObserver = new MutationObserver(this.handleSlotChange.bind(this));
-                this.mutationObserver.observe(this, observerOptions);
-            }
-        });
+    connectedCallback() {
+        super.connectedCallback();
+        addTooltipCondition(this.tooltipCondition, this.tooltipRenderer);
+        this.mutationObserver.observe(this, observerOptions);
+        !isIE && this.recalculate(); // In IE the mutation will trigger
     }
     /**
-     * Handle statement after slot or innerHTML has been changed
-     * @returns void
+     * @override
      */
-    handleSlotChange() {
-        // get new text content when label changed
-        this.rawText = this.retrieveSlotContent();
-        if (this.previousContent !== this.rawText) {
-            this.previousContent = this.rawText;
-            this.restoreTextContent();
-            if (this.truncate === 'center') {
-                this.middleEllipsis(this, this.span, this.rawText);
-            }
-            this.updateTooltip();
-        }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        removeTooltipCondition(this.tooltipCondition);
+        this.mutationObserver.disconnect();
     }
     /**
-     * Restore text content
-     * @returns {void}
+     * Decides whether the tooltip should b shown
+     * @param tooltipTarget Target element passed by the tooltip condition
+     * @returns True if the tooltip should be shown
      */
-    restoreTextContent() {
-        this.span.innerHTML = this.rawText;
-    }
-    /**
-     * concatenating all of text content in the slots
-     * @returns trimmed text content
-     */
-    retrieveSlotContent() {
-        let text = this.textContent || '';
-        const slot = this.querySelector('slot');
-        if (slot) {
-            const slotContent = slot.assignedNodes({ flatten: true });
-            for (let i = 0; i < slotContent.length; i++) {
-                text += slotContent[i].textContent;
-            }
+    shouldShowTooltip(tooltipTarget) {
+        const targetMatches = tooltipTarget === this;
+        const part = this.renderRoot.firstElementChild;
+        if (targetMatches && part) {
+            return part.clientHeight !== part.scrollHeight || part.clientWidth !== part.scrollWidth;
         }
-        return TextHelpers.trim(text);
-    }
-    /**
-     * Get element width minus padding
-     * @param node parent node that wrapper text node
-     * @returns {number} width minus padding
-     */
-    getElementWidthMinusPadding(node) {
-        const paddingLeft = getComputedStyle(node).paddingLeft;
-        const paddingRight = getComputedStyle(node).paddingRight;
-        return node.offsetWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        return false;
     }
     /**
-     * Truncate a long string in the middle and add an ellipsis.
-     * @param parentNode parent node
-     * @param textNode text node
-     * @param fullText string
+     * Handles any modifications to the internal HTML
+     * @param [mutation=false] is the request from a mutation event?
      * @returns {void}
      */
-    middleEllipsis(parentNode, textNode, fullText) {
-        const parentWidth = this.getElementWidthMinusPadding(parentNode);
-        const textWidth = textNode.offsetWidth;
-        this.enableTooltip = false;
-        if (textWidth <= parentWidth) {
-            return;
+    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);
         }
-        TextHelpers.middleEllipsis(textNode, parentWidth, fullText);
-        this.enableTooltip = true;
-        void this.requestUpdate();
     }
     /**
-     * Handle text ellipsis and tooltip state when element has been resized
-     * @returns void
+     * Returns cleaned version of `this.textContent`.
      */
-    onResize() {
-        if (this.truncate === 'center') {
-            this.restoreTextContent(); // TODO: find a way to remove this to improve performance
-            this.middleEllipsis(this, this.span, TextHelpers.trim(this.span.textContent || ''));
-        }
-        this.updateTooltip();
+    get text() {
+        return this.chunks.join(_);
     }
     /**
-     * Handle tooltip statement when properties changed
-     * @returns void
+     * Default template
      */
-    updateTooltip() {
-        // determine tooltip state
-        if (this.isShowTooltip()) {
-            this.span.setAttribute('title', this.rawText);
+    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 {
-            this.span.removeAttribute('tooltip');
-            this.span.removeAttribute('title');
+            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}`;
     }
     /**
-     * private method but can't override
-     * access modifiers in typescript.
-     * @ignore
-     * @param size element dimensions
-     * @returns {void}
-     */
-    resizedCallback() {
-        clearTimeout(this.updateTimer);
-        // split layout updating to another execution-loop
-        // to prevents resizeObserver triggers resize-loop-error
-        this.updateTimer = setTimeout(() => this.onResize(), 0);
-    }
-    /**
-     * Determine show/hide tooltip state
-     * @returns {boolean} true if center truncate or the element is smaller than a parent
+     * Template for when line clamp is set
      */
-    isShowTooltip() {
-        if (this.offsetWidth !== this.scrollWidth) {
-            return true;
-        }
-        // truncate is center and text is overflow
-        if (this.truncate === 'center' && this.enableTooltip) {
-            return true;
-        }
-        // maxLine is provided and text is overflow
-        else if (this.maxLine && this.offsetHeight !== this.scrollHeight) {
-            return true;
+    get clampTemplate() {
+        const styles = {
+            lineClamp: `${this.lineClamp}`,
+            '-webkit-line-clamp': `${this.lineClamp}`,
+            wordBreak: this.lineClamp === 1 ? 'break-all' : ''
+        };
+        /* 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 false;
+        return html `
+      <span class="clamp ${browserType}" style="${styleMap(styles)}">${this.text}</span>
+    `;
     }
     /**
      * A `TemplateResult` that will be used
@@ -250,33 +219,27 @@ let Label = class Label extends ResponsiveElement {
      * @return Render template
      */
     render() {
-        return html `
-      <div style="display: none;">
-        <slot></slot>
-      </div>
-      <span .title=${this.isShowTooltip() ? this.rawText : ''}></span>
-    `;
+        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: String, reflect: true })
-], Label.prototype, "truncate", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'max-line' })
-], Label.prototype, "maxLine", void 0);
+    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);
-__decorate([
-    query('span', true)
-], Label.prototype, "span", void 0);
 Label = __decorate([
     customElement('ef-label', {
         alias: 'quartz-label'
     })
 ], Label);
 export { Label };
-//# sourceMappingURL=index.js.map

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

@@ -1,17 +1,22 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+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 {
     /**
-   * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Displays debug lines.
      * @type {boolean}
@@ -97,4 +102,6 @@ declare global {
       'ef-layout': Partial<Layout> | JSXInterface.HTMLAttributes<Layout>;
     }
   }
-}
+}
+
+export {};