@refinitiv-ui/elements 5.11.0 → 5.12.0-alpha.0

package/lib/label/index.js

@@ -1,245 +0,0 @@
-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}`,
-            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 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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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/index.d.ts

@@ -1,107 +0,0 @@
-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 {};

package/lib/layout/index.js

@@ -1,212 +0,0 @@
-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

@@ -1,2 +0,0 @@
-
-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

@@ -1,2 +0,0 @@
-
-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

@@ -1,2 +0,0 @@
-
-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

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