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

package/lib/card/custom-elements.json

@@ -8,12 +8,14 @@
         {
           "name": "header",
           "description": "Set text on the header",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "footer",
           "description": "Set text on the footer",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -21,21 +23,21 @@
           "name": "header",
           "attribute": "header",
           "description": "Set text on the header",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "footer",
           "attribute": "footer",
           "description": "Set text on the footer",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "config",
-          "description": "Set card configurations"
-        },
-        {
-          "name": "menu",
-          "description": "Card's overlay menu element"
+          "description": "Set card configurations",
+          "type": "CardConfig",
+          "default": "{}"
         }
       ],
       "events": [
@@ -43,6 +45,16 @@
           "name": "item-trigger",
           "description": "Fired when card menu is selected."
         }
+      ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Adds slotted content into the header of the card."
+        },
+        {
+          "name": "footer",
+          "description": "Adds slotted content into the footer of the card."
+        }
       ]
     }
   ]

package/lib/card/custom-elements.md

@@ -0,0 +1,24 @@
+# ef-card
+
+A card frame component.
+
+## Properties
+
+| Property | Attribute | Type         | Default | Description             |
+|----------|-----------|--------------|---------|-------------------------|
+| `config` |           | `CardConfig` | {}      | Set card configurations |
+| `footer` | `footer`  | `string`     | ""      | Set text on the footer  |
+| `header` | `header`  | `string`     | ""      | Set text on the header  |
+
+## Events
+
+| Event          | Description                       |
+|----------------|-----------------------------------|
+| `item-trigger` | Fired when card menu is selected. |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the card. |
+| `header` | Adds slotted content into the header of the card. |

package/lib/card/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { OverlayMenuData } from '../../overlay-menu';
+import type { OverlayMenuData } from '../../overlay-menu';
 export declare type CardConfig = {
     /**
     * Configuration for side menu

package/lib/card/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/lib/card/index.d.ts

@@ -1,41 +1,47 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../label';
-import '../button';
-import '../overlay-menu';
-import { OverlayMenu } from '../overlay-menu';
-import { CardConfig } from './helpers/types';
-export { CardConfig };
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import type { CardConfig } from './helpers/types';
+import '../label/index.js';
+import '../button/index.js';
+import '../overlay-menu/index.js';
+export type { CardConfig };
 /**
  * A card frame component.
+ *
  * @fires item-trigger - Fired when card menu is selected.
+ *
+ * @slot header - Adds slotted content into the header of the card.
+ * @slot footer - Adds slotted content into the footer of the card.
  */
 export declare class Card 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[];
+    static get styles(): CSSResultGroup;
     private _config;
     /**
      * Set text on the header
      */
-    header: string | null;
+    header: string;
     /**
      * Set text on the footer
      */
-    footer: string | null;
+    footer: string;
     /**
      * Set card configurations
+     * @type {CardConfig}
+     * @default {}
      */
-    get config(): CardConfig | undefined;
-    set config(config: CardConfig | undefined);
-    /**
-     * Card's overlay menu element
-    */
-    get menu(): OverlayMenu | undefined;
+    get config(): CardConfig;
+    set config(config: CardConfig);
     /**
      * Get menu element from shadow root
      */
@@ -43,22 +49,61 @@ export declare class Card extends BasicElement {
     /**
      * Get button element from shadow root
      */
-    private buttonElement?;
+    private openMenuElement?;
     /**
      * Menu data for creating overlay-menu
      */
-    private menuData;
+    private menuData?;
+    /**
+     * True if header has slotted content
+     */
+    private headerHasContent;
+    /**
+     * True if footer has slotted content
+     */
+    private footerHasContent;
     /**
      * Open menu
      * @returns {void}
      */
     private openMenu;
+    /**
+     * Close menu
+     * @returns {void}
+     */
+    private closeMenu;
+    /**
+     * Run on header slot slotchange
+     * @param event Footer slotchange event
+     * @returns {void}
+     */
+    private onHeaderSlotChange;
+    /**
+     * Run on footer slot slotchange
+     * @param event Header slotchange event
+     * @returns {void}
+     */
+    private onFooterSlotChange;
+    /**
+     * True if card has header
+     */
+    private get withHeader();
+    /**
+     * True if card has footer
+     */
+    private get withFooter();
     /**
      * Called after render life-cycle finished
      * @param changedProperties Properties which have changed
      * @return {void}
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * Template of menu
      * @return menu template
@@ -92,4 +137,6 @@ declare global {
       'ef-card': Partial<Card> | JSXInterface.HTMLAttributes<Card>;
     }
   }
-}
+}
+
+export {};

package/lib/card/index.js

@@ -1,31 +1,52 @@
-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 { BasicElement, html, css, customElement, property, query, state } from '@refinitiv-ui/core';
-import '../label';
-import '../button';
-import '../overlay-menu';
+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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { VERSION } from '../version.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import '../label/index.js';
+import '../button/index.js';
+import '../overlay-menu/index.js';
 /**
  * A card frame component.
+ *
  * @fires item-trigger - Fired when card menu is selected.
+ *
+ * @slot header - Adds slotted content into the header of the card.
+ * @slot footer - Adds slotted content into the footer of the card.
  */
 let Card = class Card extends BasicElement {
     constructor() {
         super(...arguments);
+        this._config = {};
         /**
          * Set text on the header
          */
-        this.header = null;
+        this.header = '';
         /**
          * Set text on the footer
          */
-        this.footer = null;
+        this.footer = '';
+        /**
+         * True if header has slotted content
+         */
+        this.headerHasContent = false;
+        /**
+         * True if footer has slotted content
+         */
+        this.footerHasContent = false;
+    }
+    /**
+     * 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
@@ -34,12 +55,24 @@ let Card = class Card extends BasicElement {
         return css `
       :host {
         display: flex;
-        flex-direction: column;
+        flex-flow: column nowrap;
+      }
+      [part~=header] {
+        display: flex;
+      }
+      [part~=header-body] {
+        flex: 1;
+        min-width: 0px;
+      }
+      [part~=footer]:not([part~="has-content"]), [part~=header]:not([part~="has-content"]) {
+        display: none;
       }
     `;
     }
     /**
      * Set card configurations
+     * @type {CardConfig}
+     * @default {}
      */
     get config() {
         return this._config;
@@ -52,21 +85,52 @@ let Card = class Card extends BasicElement {
         }
         this._config = config;
     }
-    /**
-     * Card's overlay menu element
-    */
-    get menu() {
-        return this.menuElement;
-    }
     /**
      * Open menu
      * @returns {void}
      */
     openMenu() {
-        if (this.menu && !(this.menu.fullyOpened || this.menu.transitioning)) {
-            this.menu.opened = true;
+        if (this.menuElement && !(this.menuElement.fullyOpened || this.menuElement.transitioning)) {
+            this.menuElement.opened = true;
+        }
+    }
+    /**
+     * Close menu
+     * @returns {void}
+     */
+    closeMenu() {
+        if (this.menuElement) {
+            this.menuElement.opened = false;
         }
     }
+    /**
+     * Run on header slot slotchange
+     * @param event Footer slotchange event
+     * @returns {void}
+     */
+    onHeaderSlotChange(event) {
+        this.headerHasContent = isSlotEmpty(event.target);
+    }
+    /**
+     * Run on footer slot slotchange
+     * @param event Header slotchange event
+     * @returns {void}
+     */
+    onFooterSlotChange(event) {
+        this.footerHasContent = isSlotEmpty(event.target);
+    }
+    /**
+     * True if card has header
+     */
+    get withHeader() {
+        return this.headerHasContent || !!this.header || !!this.menuData;
+    }
+    /**
+     * True if card has footer
+     */
+    get withFooter() {
+        return this.footerHasContent || !!this.footer;
+    }
     /**
      * Called after render life-cycle finished
      * @param changedProperties Properties which have changed
@@ -74,18 +138,35 @@ let Card = class Card extends BasicElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('menuData') && this.menu) {
-            this.menu.positionTarget = this.buttonElement;
+        if (changedProperties.has('menuData') && this.menuElement) {
+            this.menuElement.positionTarget = this.openMenuElement;
         }
     }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('item-trigger', this.closeMenu); // Here to cover nested menus
+    }
     /**
      * Template of menu
      * @return menu template
      */
     get menuTemplate() {
         return html `${this.menuData ? html `
-      <ef-button part="menu-button" @tap="${this.openMenu}" icon="more" transparent></ef-button>
-      <ef-overlay-menu part="menu-popup" .data=${this.menuData} position="bottom-end"></ef-overlay-menu>` : null}
+      <ef-button
+        @tap="${this.openMenu}"
+        part="menu-button"
+        icon="more-vertical"
+        transparent
+      ></ef-button>
+      <ef-overlay-menu
+        part="menu-popup"
+        .data=${this.menuData}
+        position="bottom-end"></ef-overlay-menu>` : undefined}
     `;
     }
     /**
@@ -94,10 +175,13 @@ let Card = class Card extends BasicElement {
      */
     get headerTemplate() {
         return html `
-      ${this.header || this.menuData ? html `<div part="header">
-        ${this.header ? html `<ef-label max-line="3" part="header-text">${this.header}</ef-label>` : null}
+      <div part="header${this.withHeader ? ' has-content' : ''}">
+        <div part="header-body">
+          <slot name="header" @slotchange="${this.onHeaderSlotChange}"></slot>
+          ${!this.headerHasContent && this.header ? html `<ef-label line-clamp="3" part="header-text">${this.header}</ef-label>` : null}
+        </div>
         ${this.menuTemplate}
-      </div>` : null}
+      </div>
     `;
     }
     /**
@@ -106,7 +190,12 @@ let Card = class Card extends BasicElement {
      */
     get footerTemplate() {
         return html `
-      ${this.footer ? html `<ef-label max-line="3" part="footer">${this.footer}</ef-label>` : null}
+      <div part="footer${this.withFooter ? ' has-content' : ''}">
+        <div part="footer-body">
+          <slot name="footer" @slotchange="${this.onFooterSlotChange}"></slot>
+          ${!this.footerHasContent && this.footer ? html `<ef-label line-clamp="3">${this.footer}</ef-label>` : undefined}
+        </div>
+      </div>
     `;
     }
     /**
@@ -117,9 +206,7 @@ let Card = class Card extends BasicElement {
     render() {
         return html `
       ${this.headerTemplate}
-      <div part="body">
-        <slot></slot>
-      </div>
+      <div part="body"><slot></slot></div>
       ${this.footerTemplate}
     `;
     }
@@ -138,14 +225,24 @@ __decorate([
 ], Card.prototype, "menuElement", void 0);
 __decorate([
     query('[part=menu-button]')
-], Card.prototype, "buttonElement", void 0);
+], Card.prototype, "openMenuElement", void 0);
 __decorate([
     state()
+    /**
+     * Menu data for creating emerald-popup-menu
+     */
+    ,
+    state()
 ], Card.prototype, "menuData", void 0);
+__decorate([
+    state()
+], Card.prototype, "headerHasContent", void 0);
+__decorate([
+    state()
+], Card.prototype, "footerHasContent", void 0);
 Card = __decorate([
     customElement('ef-card', {
         alias: 'coral-card'
     })
 ], Card);
 export { Card };
-//# sourceMappingURL=index.js.map

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/overlay-menu/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/label/themes/halo/dark';
 
-elf.customStyles.define('ef-card', ':host{width:400px;box-shadow:0 2px 8px 0 rgba(0,0,0,.5);padding:16px;background-color:#1a1a1a;box-shadow:0 0 4px 0 rgba(0,0,0,.08)}:host [part=body]{flex:1 0 auto}:host [part=header]{display:flex;position:relative;margin-bottom:16px}:host [part=menu-button]{transform:rotate(90deg);font-size:16px;margin:0;height:20px}:host [part=header-text]{font-size:16px;font-weight:700;width:100%}:host [part=footer]{border-top:1px solid #404040;margin-top:16px;padding-top:8px;width:100%}:host(:not([header])) [part=header]{justify-content:flex-end}');
+elf.customStyles.define('ef-card', ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 12px rgba(0,0,0,.5);background-color:#1a1a1a;overflow:hidden;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#999;border-top:1px solid #404040}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/button/themes/halo/light';
 import '@refinitiv-ui/elements/lib/overlay-menu/themes/halo/light';
 import '@refinitiv-ui/elements/lib/label/themes/halo/light';
 
-elf.customStyles.define('ef-card', ':host{width:400px;box-shadow:0 2px 8px 0 rgba(0,0,0,.25);padding:16px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(0,0,0,.25)}:host [part=body]{flex:1 0 auto}:host [part=header]{display:flex;position:relative;margin-bottom:16px}:host [part=menu-button]{transform:rotate(90deg);font-size:16px;margin:0;height:20px}:host [part=header-text]{font-size:16px;font-weight:700;width:100%}:host [part=footer]{border-top:1px solid #d9d9d9;margin-top:16px;padding-top:8px;width:100%}:host(:not([header])) [part=header]{justify-content:flex-end}');
+elf.customStyles.define('ef-card', ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 8px rgba(0,0,0,.25);background-color:#fafafa;overflow:hidden;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#737373;border-top:1px solid #d9d9d9}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/overlay-menu/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/label/themes/solar/charcoal';
 
-elf.customStyles.define('ef-card', ':host{width:400px;box-shadow:0 2px 8px 0 rgba(0,0,0,.6);padding:16px;background-color:#1a1a1c}:host [part=body]{flex:1 0 auto}:host [part=header]{display:flex;position:relative;margin-bottom:16px}:host [part=menu-button]{transform:rotate(90deg);font-size:15px;margin:0;height:20px}:host [part=header-text]{font-size:15px;font-weight:700;width:100%}:host [part=footer]{border-top:1px solid #0a0a0a;margin-top:16px;padding-top:8px;width:100%}:host(:not([header])) [part=header]{justify-content:flex-end}');
+elf.customStyles.define('ef-card', ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.6);overflow:hidden;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;background-color:#1a1a1c}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#c2c2c2;border-top:1px solid #0a0a0a}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/overlay-menu/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/label/themes/solar/pearl';
 
-elf.customStyles.define('ef-card', ':host{width:400px;box-shadow:0 2px 8px 0 rgba(0,0,0,.3);padding:16px;background-color:#fff}:host [part=body]{flex:1 0 auto}:host [part=header]{display:flex;position:relative;margin-bottom:16px}:host [part=menu-button]{transform:rotate(90deg);font-size:15px;margin:0;height:20px}:host [part=header-text]{font-size:15px;font-weight:700;width:100%}:host [part=footer]{border-top:1px solid #d5d8db;margin-top:16px;padding-top:8px;width:100%}:host(:not([header])) [part=header]{justify-content:flex-end}');
+elf.customStyles.define('ef-card', ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.3);overflow:hidden;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;background-color:#fff}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#484848;border-top:1px solid #d5d8db}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

package/lib/chart/custom-elements.json

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "ef-chart",
-      "description": "Charting component that use chartjs library",
+      "description": "Charting component that use ChartJS library",
       "attributes": [
         {
           "name": "config",
@@ -19,8 +19,8 @@
           "type": "ChartConfig"
         },
         {
-          "name": "colors",
-          "description": "List of avalaible chart colors",
+          "name": "colors (readonly)",
+          "description": "List of available chart colors",
           "type": "string[]"
         }
       ],

package/lib/chart/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-chart
+
+Charting component that use ChartJS library
+
+## Properties
+
+| Property            | Attribute | Type          | Default | Description                                      |
+|---------------------|-----------|---------------|---------|--------------------------------------------------|
+| `colors (readonly)` |           | `string[]`    |         | List of available chart colors                   |
+| `config`            | `config`  | `ChartConfig` | null    | Chart configurations. Same configuration as ChartJS |
+
+## Methods
+
+| Method        | Type                                 | Description                                      |
+|---------------|--------------------------------------|--------------------------------------------------|
+| `updateChart` | `(config?: ChartUpdateProps=): void` | Update all data, title, scales, legends and re-render the chart based on its config<br /><br />**config**: Additional configuration for control an animation in the update process. |

package/lib/chart/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './legend.js';
+export * from './merge.js';

package/lib/chart/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './legend.js';
+export * from './merge.js';

package/lib/chart/helpers/legend.d.ts

@@ -1,5 +1,5 @@
-declare const helpers: {
+declare const legendHelper: {
     getLegendFillStyle: (dataset: Chart.ChartDataSets, usePointStyle: boolean, solidFill?: boolean) => string | undefined;
     getLegendStrokeStyle: (dataset: Chart.ChartDataSets, usePointStyle: boolean) => string | undefined;
 };
-export { helpers };
+export { legendHelper };