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

package/lib/chart/plugins/doughnut-center-label.js

@@ -1,196 +0,0 @@
-const CHART = window.Chart;
-const getPluginConfig = (chart) => {
-    var _a, _b;
-    return (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b.centerLabel;
-};
-/**
- * Draw line
- * @param {DoughnutChart} chart doughnut chart
- * @param {MetaData[]} active active data
- * @returns {void}
- */
-const drawItemBorder = function (chart, active) {
-    var _a, _b, _c;
-    if (!chart.data.datasets) {
-        return;
-    }
-    if (active === null || active === void 0 ? void 0 : active.length) {
-        const ctx = chart.ctx;
-        const chartItem = active[0];
-        const vm = chartItem._view;
-        const datasets = chart.data.datasets[chartItem._datasetIndex];
-        vm.backgroundColor = datasets.backgroundColor[chartItem._index];
-        vm.backgroundColor = CHART.helpers.getHoverColor(vm.backgroundColor); // we need to make color bolder
-        vm.borderWidth = (datasets.borderWidth || ((_c = (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.arc) === null || _c === void 0 ? void 0 : _c.borderWidth));
-        vm.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || CHART.defaults.global.defaultFontColor);
-        const sA = vm.startAngle;
-        const eA = vm.endAngle;
-        if (ctx) {
-            ctx.beginPath();
-            ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
-            ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
-            ctx.closePath();
-            ctx.strokeStyle = vm.borderColor;
-            ctx.lineWidth = vm.borderWidth;
-            ctx.fillStyle = vm.backgroundColor;
-            ctx.fill();
-            ctx.lineJoin = 'bevel';
-            if (vm.borderWidth) {
-                ctx.stroke();
-            }
-        }
-    }
-};
-const plugins = {
-    beforeEvent: function (chart, event) {
-        if (!getPluginConfig(chart)) {
-            return;
-        }
-        switch (event.type) {
-            case 'click':
-                // chart._select stores a segment that is clicked
-                if (!chart._select) {
-                    chart._select = [];
-                }
-                if (chart.active.length) {
-                    if (chart._select.length && chart._select[0]._datasetIndex === chart.active[0]._datasetIndex
-                        && chart._select[0]._index === chart.active[0]._index) {
-                        // reset value if user clicked on selected segment
-                        chart._select = [];
-                    }
-                    else {
-                        // set segment that user clicked
-                        chart._select = chart.active.slice(0);
-                    }
-                }
-                else {
-                    chart._select = [];
-                }
-                chart.draw();
-                break;
-            default:
-                break;
-        }
-    },
-    beforeDraw: function (chart) {
-        var _a;
-        const config = getPluginConfig(chart);
-        if (!config) {
-            return;
-        }
-        // Set render hook function
-        let active = [];
-        if (chart._select) {
-            active = chart._select;
-        }
-        if ((_a = chart.active) === null || _a === void 0 ? void 0 : _a.length) {
-            active = chart.active;
-        }
-        const renderText = config.onRenderLabel(chart, active);
-        // Get Texts
-        const centerConfig = config;
-        const texts = renderText || centerConfig.defaultText;
-        if (!texts) {
-            return;
-        }
-        // Get ctx from param
-        const ctx = chart.ctx;
-        // Get options from config
-        const canvas = chart.canvas;
-        const style = window.getComputedStyle(canvas);
-        const globalConfig = CHART.defaults.global;
-        const defaultFontStyle = globalConfig.defaultFontFamily;
-        const defaultColor = style.getPropertyValue('--doughnut-center-text-color') || globalConfig.defaultFontColor;
-        const backgroundColor = style.getPropertyValue('--doughnut-center-background-color');
-        const customFontSizePercent = parseInt(style.getPropertyValue('--doughnut-center-font-size'), 10) / 100; // font size in percentage
-        const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
-        const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
-        // Render center background color
-        if (backgroundColor) {
-            ctx.arc(centerX, centerY, chart.innerRadius, 0, 2 * Math.PI);
-            ctx.fillStyle = backgroundColor;
-            ctx.fill();
-        }
-        const textAreaWidth = chart.innerRadius;
-        // Base font size is 30% and minus 4% per text lines ( if text has multiple lines ) of text area
-        const baseFontSize = textAreaWidth * (0.3 - (0.04 * (texts.length - 1)));
-        // Keep minimum font size equal 5% of text area
-        const computedFontSize = Math.max(textAreaWidth * 0.05, baseFontSize);
-        // Use font size ratio from user if --doughnut-center-font-size CSS variable is provided
-        const fontRatio = customFontSizePercent || computedFontSize / textAreaWidth;
-        const fontSizeToUse = textAreaWidth * fontRatio;
-        // Set font settings to draw it correctly.
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillStyle = defaultColor;
-        // Render texts
-        const fontLineHeight = fontSizeToUse * 1.5;
-        const fontSizeHeaderRatio = 1.15;
-        // Move Y position of text up according to text length
-        const offsetY = centerY - (texts.length - 1) * 0.5 * fontLineHeight;
-        const containerWidth = chart.innerRadius * 2;
-        const circlePadding = containerWidth * (texts.length <= 1 ? 0.4 : 0.5);
-        for (let i = 0; i < texts.length; i++) {
-            let targetFont;
-            if (texts[i].bold) {
-                targetFont = `bold ${fontSizeToUse * fontSizeHeaderRatio}px ${defaultFontStyle || ''}`;
-            }
-            else {
-                targetFont = `${fontSizeToUse}px ${defaultFontStyle || ''}`;
-            }
-            ctx.font = targetFont;
-            let targetText = texts[i].label;
-            if (ctx.measureText(targetText).width > containerWidth - circlePadding) {
-                const numText = targetText.length;
-                const numRatio = targetText.length / ctx.measureText(targetText).width;
-                const difSize = ctx.measureText(targetText).width - containerWidth + circlePadding;
-                let numCharacter = numText - Math.ceil(difSize * numRatio);
-                numCharacter = Math.max(1, numCharacter);
-                if (numCharacter) {
-                    targetText = targetText.slice(0, numCharacter);
-                    targetText += '...';
-                }
-            }
-            ctx.fillText(targetText, centerX, offsetY + (i * fontLineHeight));
-        }
-    },
-    afterDatasetUpdate: function (chart) {
-        var _a;
-        // Check chart already init selected.
-        if (chart.selected !== undefined) {
-            return;
-        }
-        // Check configs are ready to init selected
-        const config = getPluginConfig(chart);
-        if (!config || !config.selected || !chart.data.datasets) {
-            return;
-        }
-        const selectedIndex = Number((_a = config.selected) === null || _a === void 0 ? void 0 : _a.index);
-        const datasetIndex = Number(config.selected.datasetIndex || 0);
-        const visibleIndexes = chart.getVisibleDatasetCount() - 1;
-        // Validate index and datasetIndex
-        if (isNaN(selectedIndex) || (isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndexes)) {
-            return;
-        }
-        // Set selected item to the chart
-        const items = chart.getDatasetMeta(datasetIndex).data[selectedIndex];
-        chart.selected = items ? [items] : [];
-    },
-    afterDraw: function (chart) {
-        var _a;
-        if (getPluginConfig(chart)) {
-            // Draw active element
-            // Note: use logic from chart.js - chart.js/src/elements/element.arc.js :draw()
-            // hover
-            drawItemBorder(chart, chart.active);
-            // selected
-            if ((_a = chart.selected) === null || _a === void 0 ? void 0 : _a.length) {
-                chart._select = chart.selected;
-                chart.selected = [];
-            }
-            // active
-            drawItemBorder(chart, chart._select);
-        }
-    }
-};
-export default plugins;

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
-
-elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(51, 51, 51, 0.5);--zero-line-color:rgba(51, 51, 51, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;font-size:12rem;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/header/themes/halo/light';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
-
-elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(224, 224, 224, 0.5);--zero-line-color:rgba(224, 224, 224, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FAFAFA;--tooltip-background-color:rgba(13, 13, 13, 0.9);--tooltip-title-color:#FFFFFF;--tooltip-body-color:#FFFFFF;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;font-size:12rem;--tooltip-background-color:#FFF4CC;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--chart-color-11:#147070;--chart-color-12:#AF583A;--chart-color-13:#0F1E8A;--chart-color-14:#737373;--chart-color-15:#4C3C00;--chart-color-16:#563F77;--chart-color-17:#004E4F;--chart-color-18:#993000;--chart-color-19:#00432F;--chart-color-20:#A3204C;--chart-color-21:#404040;--chart-color-22:#174A66;--chart-color-23:#116262;--chart-color-24:#88442D;--chart-color-25:#5D122B}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
-
-elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(10, 10, 10, 0.5);--zero-line-color:rgba(10, 10, 10, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1C;--tooltip-background-color:rgba(194, 194, 194, 0.9);--tooltip-title-color:#151516;--tooltip-body-color:#151516;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(194,194,194,.8);--legend-key-box-width:12;--grid-line-color:rgba(194, 194, 194, 0.1);--zero-line-color:rgba(194, 194, 194, 0.1);--animation-duration:500;--tooltip-background-color:rgba(74, 74, 82, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#C2C2C2;--doughnut-border-color:#ffffff;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
-
-elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(213, 216, 219, 0.5);--zero-line-color:rgba(213, 216, 219, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FFFFFF;--tooltip-background-color:rgba(72, 72, 72, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(72,72,72,.8);--legend-key-box-width:12;--grid-line-color:rgba(72, 72, 72, 0.1);--zero-line-color:rgba(72, 72, 72, 0.1);--animation-duration:500;--tooltip-background-color:rgba(190, 195, 204, 0.9);--tooltip-title-color:#484848;--tooltip-body-color:#484848;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#484848;--doughnut-border-color:#000000;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3}');

package/lib/checkbox/index.d.ts

@@ -1,97 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import '../icon/index.js';
-/**
- * Form control for selecting one or several options
- * @fires checked-changed - Fired when the `checked` property changes.
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- */
-export declare class Checkbox extends ControlElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    protected readonly defaultRole: string | null;
-    /**
-     * 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;
-    private _checked;
-    /**
-     * Value of checkbox
-     * @param value new checked value
-     * @default false
-     */
-    set checked(value: boolean);
-    get checked(): boolean;
-    private _indeterminate;
-    /**
-     * Set state to indeterminate
-     * @param value new indeterminate value
-     * @default false
-     */
-    set indeterminate(value: boolean);
-    get indeterminate(): boolean;
-    /**
-     * Indicates current state of checkbox
-     * @ignore
-     */
-    ariaChecked: string;
-    /**
-     * Getter for label
-     */
-    private labelEl;
-    /**
-     * Called once after the component is first rendered
-     * @param changedProperties map of changed properties with old values
-     * @returns {void}
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    /**
-     * Run when checkbox is tapped
-     * @param event Tap event
-     * @returns {void}
-     */
-    private onTap;
-    /**
-     * Handles key down event
-     * @param event Key down event object
-     * @returns {void}
-     */
-    private onKeyDown;
-    /**
-     * Change checked state and fire
-     * checked-changed event
-     * @return {void}
-     */
-    private handleChangeChecked;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-checkbox': Checkbox;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-checkbox': Partial<Checkbox> | JSXInterface.ControlHTMLAttributes<Checkbox>;
-    }
-  }
-}
-
-export {};

package/lib/checkbox/index.js

@@ -1,194 +0,0 @@
-import { __decorate } from "tslib";
-import { ControlElement, 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { VERSION } from '../version.js';
-import { registerOverflowTooltip } from '../tooltip/index.js';
-import '../icon/index.js';
-/**
- * Form control for selecting one or several options
- * @fires checked-changed - Fired when the `checked` property changes.
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- */
-let Checkbox = class Checkbox extends ControlElement {
-    constructor() {
-        super(...arguments);
-        this.defaultRole = 'checkbox';
-        this._checked = false;
-        this._indeterminate = false;
-        /**
-         * Indicates current state of checkbox
-         * @ignore
-         */
-        this.ariaChecked = String(this.checked);
-    }
-    /**
-     * 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 {
-        display: inline-block;
-      }
-      [part=check] {
-        visibility: hidden;
-      }
-      :host([checked]) [part=check],
-      :host([indeterminate]) [part=check] {
-        visibility: inherit;
-      }
-      [part=label],
-      [part=container] {
-        display: inline-block;
-        vertical-align: middle;
-      }
-      [part=label] {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      :host(:empty) [part=label], [part=label]:empty {
-        display: none;
-      }
-    `;
-    }
-    /**
-     * Value of checkbox
-     * @param value new checked value
-     * @default false
-     */
-    set checked(value) {
-        const oldValue = this._checked;
-        if (oldValue !== value) {
-            this._checked = value;
-            // remove indeterminate if change state to checked
-            if (this._checked) {
-                this.indeterminate = false;
-            }
-            this.ariaChecked = String(value);
-            void this.requestUpdate('checked', oldValue);
-        }
-    }
-    get checked() {
-        return this._checked;
-    }
-    /**
-     * Set state to indeterminate
-     * @param value new indeterminate value
-     * @default false
-     */
-    set indeterminate(value) {
-        const oldValue = this._indeterminate;
-        if (oldValue !== value) {
-            this._indeterminate = value;
-            // remove checked if change state to indeterminate
-            if (value) {
-                this.checked = false;
-            }
-            this.ariaChecked = value ? 'mixed' : String(this.checked);
-            void this.requestUpdate('indeterminate', oldValue);
-        }
-    }
-    get indeterminate() {
-        return this._indeterminate;
-    }
-    /**
-     * Called once after the component is first rendered
-     * @param changedProperties map of changed properties with old values
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.addEventListener('tap', this.onTap);
-        this.addEventListener('keydown', this.onKeyDown);
-        registerOverflowTooltip(this.labelEl, () => this.textContent);
-    }
-    /**
-     * Run when checkbox is tapped
-     * @param event Tap event
-     * @returns {void}
-     */
-    onTap(event) {
-        if (this.disabled || this.readonly || event.defaultPrevented) {
-            return;
-        }
-        this.handleChangeChecked();
-    }
-    /**
-     * Handles key down event
-     * @param event Key down event object
-     * @returns {void}
-     */
-    onKeyDown(event) {
-        if (this.disabled || this.readonly || event.defaultPrevented) {
-            return;
-        }
-        switch (event.key) {
-            case ' ':
-            case 'Spacebar':
-                this.handleChangeChecked();
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-    }
-    /**
-     * Change checked state and fire
-     * checked-changed event
-     * @return {void}
-     */
-    handleChangeChecked() {
-        this.checked = !this.checked;
-        this.notifyPropertyChange('checked', this.checked);
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult}  Render template
-     */
-    render() {
-        return html `
-      <div part="container">
-        <div part="check">
-          ${!this.indeterminate ? html `<ef-icon icon="tick"></ef-icon>` : null}
-        </div>
-      </div>
-      <div part="label"><slot></slot></div>
-    `;
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "checked", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "indeterminate", null);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'aria-checked' })
-], Checkbox.prototype, "ariaChecked", void 0);
-__decorate([
-    query('[part=label]', true)
-], Checkbox.prototype, "labelEl", void 0);
-Checkbox = __decorate([
-    customElement('ef-checkbox', {
-        alias: 'coral-checkbox'
-    })
-], Checkbox);
-export { Checkbox };

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
-
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
-
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
-
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');

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

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
-
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');