@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/flag/index.d.ts

@@ -0,0 +1,94 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+export { preload } from './utils/FlagLoader.js';
+/**
+ * Provides a collection of flags.
+ *
+ * @attr {string | null} src - Src location of a svg flag.
+ * @prop {string | null} src - Src location of a svg flag
+ *
+ */
+export declare class Flag extends BasicElement {
+    /**
+     * 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(): CSSResultGroup;
+    private _flag;
+    /**
+     * Name of a known flag to render.
+     * @example gb
+     */
+    get flag(): string | null;
+    set flag(value: string | null);
+    private _src;
+    /**
+     * Src location of an svg flag.
+     * @example https://cdn.io/flags/gb.svg
+     */
+    get src(): string | null;
+    set src(value: string | null);
+    private _template;
+    /**
+     * The flag template to render
+     */
+    private get template();
+    private set template(value);
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Helper method, used to set the flag src.
+     * @returns {void}
+     */
+    private setFlagSrc;
+    /**
+     * Tries to load an flag from the url provided
+     * and the renders this into the flag template.
+     * @param src Source location of the svg flag.
+     * @returns {void}
+     */
+    private loadAndRenderFlag;
+    /**
+     * Get and cache CDN prefix
+     * This is a private URL which is set in the theme
+     * and should not be configured again via the variable.
+     * @returns {void}
+     */
+    private setPrefix;
+    /**
+     * Clears SVG body from the flag template
+     * @returns {void}
+     */
+    private clearFlag;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult} Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-flag': Flag;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-flag': Partial<Flag> | JSXInterface.HTMLAttributes<Flag>;
+    }
+  }
+}
+
+export {};

package/lib/flag/index.js

@@ -0,0 +1,166 @@
+import { __decorate } from "tslib";
+import { BasicElement, svg, 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 { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { VERSION } from '../version.js';
+import { FlagLoader } from './utils/FlagLoader.js';
+export { preload } from './utils/FlagLoader.js';
+const EmptyTemplate = svg ``;
+/**
+ * Provides a collection of flags.
+ *
+ * @attr {string | null} src - Src location of a svg flag.
+ * @prop {string | null} src - Src location of a svg flag
+ *
+ */
+let Flag = class Flag extends BasicElement {
+    constructor() {
+        super(...arguments);
+        this._flag = null;
+        this._src = null;
+        this._template = EmptyTemplate;
+    }
+    /**
+     * 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-block;
+        box-sizing: border-box;
+        width: 1.33em;
+        height: 1em;
+      }
+      svg {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+      }
+    `;
+    }
+    /**
+     * Name of a known flag to render.
+     * @example gb
+     */
+    get flag() {
+        return this._flag;
+    }
+    set flag(value) {
+        if (this.flag !== value) {
+            this._flag = value;
+            void this.setFlagSrc();
+        }
+    }
+    /**
+     * Src location of an svg flag.
+     * @example https://cdn.io/flags/gb.svg
+     */
+    get src() {
+        return this._src;
+    }
+    set src(value) {
+        if (this.src !== value) {
+            this._src = value;
+            this.clearFlag();
+            if (value) {
+                void this.loadAndRenderFlag(value);
+            }
+        }
+    }
+    /**
+     * The flag template to render
+     */
+    get template() {
+        return this._template;
+    }
+    set template(value) {
+        if (this._template !== value) {
+            this._template = value;
+            this.requestUpdate();
+        }
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        /**
+         * We have to call this here because
+         * polyfilled browsers only get variables at this point.
+         */
+        this.setPrefix();
+    }
+    /**
+     * Helper method, used to set the flag src.
+     * @returns {void}
+     */
+    async setFlagSrc() {
+        this.src = this.flag ? await FlagLoader.getSrc(this.flag) : null;
+    }
+    /**
+     * Tries to load an flag from the url provided
+     * and the renders this into the flag template.
+     * @param src Source location of the svg flag.
+     * @returns {void}
+     */
+    async loadAndRenderFlag(src) {
+        const svgBody = await FlagLoader.loadSVG(src);
+        if (svgBody) {
+            this.template = svg `${unsafeHTML(svgBody)}`;
+        }
+    }
+    /**
+     * Get and cache CDN prefix
+     * This is a private URL which is set in the theme
+     * and should not be configured again via the variable.
+     * @returns {void}
+     */
+    setPrefix() {
+        if (!FlagLoader.isPrefixSet) {
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix')
+                .replace(/^('|")|('|")$/g, '');
+            FlagLoader.setCdnPrefix(CDNPrefix);
+        }
+    }
+    /**
+     * Clears SVG body from the flag template
+     * @returns {void}
+     */
+    clearFlag() {
+        this.template = EmptyTemplate;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult} Render template
+     */
+    render() {
+        return this.template;
+    }
+};
+__decorate([
+    property({ type: String })
+], Flag.prototype, "flag", null);
+__decorate([
+    property({ type: String })
+], Flag.prototype, "src", null);
+Flag = __decorate([
+    customElement('ef-flag', {
+        alias: 'coral-flag'
+    })
+], Flag);
+export { Flag };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-flag', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/flags/\'}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-flag', ':host([flag=ar]),:host([flag=as]),:host([flag=at]),:host([flag=bg]),:host([flag=bh]),:host([flag=bi]),:host([flag=bl]),:host([flag=bq]),:host([flag=ca]),:host([flag=ci]),:host([flag=cl]),:host([flag=cy]),:host([flag=cz]),:host([flag=dj]),:host([flag=do]),:host([flag=dz]),:host([flag=ee]),:host([flag=eg]),:host([flag=es-ga]),:host([flag=fi]),:host([flag=fo]),:host([flag=fr]),:host([flag=gb-eng]),:host([flag=gb-nir]),:host([flag=gb-sct]),:host([flag=gb-wls]),:host([flag=ge]),:host([flag=gf]),:host([flag=gg]),:host([flag=gi]),:host([flag=gl]),:host([flag=gp]),:host([flag=gt]),:host([flag=hn]),:host([flag=hr]),:host([flag=hu]),:host([flag=id]),:host([flag=ie]),:host([flag=il]),:host([flag=in]),:host([flag=iq]),:host([flag=ir]),:host([flag=it]),:host([flag=je]),:host([flag=jp]),:host([flag=kr]),:host([flag=lb]),:host([flag=ls]),:host([flag=lu]),:host([flag=mc]),:host([flag=mf]),:host([flag=mg]),:host([flag=mq]),:host([flag=mt]),:host([flag=mx]),:host([flag=ne]),:host([flag=nf]),:host([flag=ng]),:host([flag=ni]),:host([flag=nl]),:host([flag=np]),:host([flag=om]),:host([flag=pa]),:host([flag=pe]),:host([flag=pf]),:host([flag=ph]),:host([flag=pk]),:host([flag=pl]),:host([flag=pm]),:host([flag=py]),:host([flag=qa]),:host([flag=re]),:host([flag=rs]),:host([flag=ru]),:host([flag=sg]),:host([flag=si]),:host([flag=sk]),:host([flag=sl]),:host([flag=sm]),:host([flag=sv]),:host([flag=sx]),:host([flag=sy]),:host([flag=tj]),:host([flag=uy]),:host([flag=uz]),:host([flag=va]),:host([flag=vi]),:host([flag=wf]),:host([flag=ye]),:host([flag=yt]),:host([flag=zw]){border:1px solid #595959}:host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/flags/\'}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-flag', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/flags/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/flags/\'}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-flag', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/flags/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/flags/\'}:host([flag=ar]),:host([flag=as]),:host([flag=at]),:host([flag=bg]),:host([flag=bh]),:host([flag=bi]),:host([flag=bl]),:host([flag=bq]),:host([flag=ca]),:host([flag=ci]),:host([flag=cl]),:host([flag=cy]),:host([flag=cz]),:host([flag=dj]),:host([flag=do]),:host([flag=dz]),:host([flag=ee]),:host([flag=eg]),:host([flag=es-ga]),:host([flag=fi]),:host([flag=fo]),:host([flag=fr]),:host([flag=gb-eng]),:host([flag=gb-nir]),:host([flag=gb-sct]),:host([flag=gb-wls]),:host([flag=ge]),:host([flag=gf]),:host([flag=gg]),:host([flag=gi]),:host([flag=gl]),:host([flag=gp]),:host([flag=gt]),:host([flag=hn]),:host([flag=hr]),:host([flag=hu]),:host([flag=id]),:host([flag=ie]),:host([flag=il]),:host([flag=in]),:host([flag=iq]),:host([flag=ir]),:host([flag=it]),:host([flag=je]),:host([flag=jp]),:host([flag=kr]),:host([flag=lb]),:host([flag=ls]),:host([flag=lu]),:host([flag=mc]),:host([flag=mf]),:host([flag=mg]),:host([flag=mq]),:host([flag=mt]),:host([flag=mx]),:host([flag=ne]),:host([flag=nf]),:host([flag=ng]),:host([flag=ni]),:host([flag=nl]),:host([flag=np]),:host([flag=om]),:host([flag=pa]),:host([flag=pe]),:host([flag=pf]),:host([flag=ph]),:host([flag=pk]),:host([flag=pl]),:host([flag=pm]),:host([flag=py]),:host([flag=qa]),:host([flag=re]),:host([flag=rs]),:host([flag=ru]),:host([flag=sg]),:host([flag=si]),:host([flag=sk]),:host([flag=sl]),:host([flag=sm]),:host([flag=sv]),:host([flag=sx]),:host([flag=sy]),:host([flag=tj]),:host([flag=uy]),:host([flag=uz]),:host([flag=va]),:host([flag=vi]),:host([flag=wf]),:host([flag=ye]),:host([flag=yt]),:host([flag=zw]){border:1px solid #a9afba}');

package/lib/flag/utils/FlagLoader.d.ts

@@ -0,0 +1,47 @@
+import { CdnLoader } from '@refinitiv-ui/utils/lib/loader.js';
+/**
+ * Caches and provides flag SVGs, Loaded either by name from CDN or directly by URL.
+ * Uses singleton pattern
+ */
+declare class FlagLoader extends CdnLoader {
+    private cdnPrefix;
+    private _isPrefixSet;
+    /**
+     * @returns {boolean} clarify whether prefix has been set or not.
+     */
+    get isPrefixSet(): boolean;
+    /**
+     * Sets clarify whether prefix has been set or not
+     * @param value - new value that is going to set.
+     */
+    set isPrefixSet(value: boolean);
+    /**
+     * @returns promise, which will be resolved with CDN prefix, once set.
+     */
+    getCdnPrefix(): Promise<string>;
+    /**
+     * Sets CDN prefix to load source.
+     * Resolves deferred promise with CDN prefix and sets src used to check whether prefix is already set or not.
+     * @param prefix - CDN prefix.
+     * @returns {void}
+     */
+    setCdnPrefix(prefix: string): void;
+    /**
+     * Creates complete source using CDN prefix and src.
+     * Waits for CDN prefix to be set.
+     * @param flagName - resource path for download
+     * @returns Promise, which will be resolved with complete source.
+     */
+    getSrc(flagName: string): Promise<string>;
+    loadSVG(flag: string): Promise<string | undefined>;
+}
+declare const flagLoaderInstance: FlagLoader;
+export { flagLoaderInstance as FlagLoader };
+/**
+ * Helper function to preload set of flags.
+ * It could help to reduce flag loading delay when flag has a known set of flags that it can use.
+ * @param attrs - list of arguments, representing flags.
+ * Could be flag names, complete flag URLs or mix of both.
+ * @returns Array of promises, which will be resolved with SVG bodies.
+ */
+export declare const preload: (...attrs: string[]) => Promise<string | undefined>[];

package/lib/flag/utils/FlagLoader.js

@@ -0,0 +1,86 @@
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
+const isUrl = (str) => (/^https?:\/\//i).test(str);
+/**
+ * Caches and provides flag SVGs, Loaded either by name from CDN or directly by URL.
+ * Uses singleton pattern
+ */
+class FlagLoader extends CdnLoader {
+    constructor() {
+        super(...arguments);
+        this.cdnPrefix = new Deferred();
+        this._isPrefixSet = false;
+    }
+    /**
+     * @returns {boolean} clarify whether prefix has been set or not.
+     */
+    get isPrefixSet() {
+        return this._isPrefixSet;
+    }
+    /**
+     * Sets clarify whether prefix has been set or not
+     * @param value - new value that is going to set.
+     */
+    set isPrefixSet(value) {
+        if (this._isPrefixSet !== value) {
+            this._isPrefixSet = value;
+        }
+    }
+    /**
+     * @returns promise, which will be resolved with CDN prefix, once set.
+     */
+    getCdnPrefix() {
+        return this.cdnPrefix.promise;
+    }
+    /**
+     * Sets CDN prefix to load source.
+     * Resolves deferred promise with CDN prefix and sets src used to check whether prefix is already set or not.
+     * @param prefix - CDN prefix.
+     * @returns {void}
+     */
+    setCdnPrefix(prefix) {
+        if (prefix) {
+            this.cdnPrefix.resolve(prefix);
+            this.isPrefixSet = true;
+        }
+    }
+    /**
+     * Creates complete source using CDN prefix and src.
+     * Waits for CDN prefix to be set.
+     * @param flagName - resource path for download
+     * @returns Promise, which will be resolved with complete source.
+     */
+    async getSrc(flagName) {
+        return flagName ? `${await this.getCdnPrefix()}${flagName}.svg` : '';
+    }
+    async loadSVG(flag) {
+        if (flag) {
+            if (!isUrl(flag)) {
+                flag = await this.getSrc(flag);
+            }
+            const response = await this.load(flag);
+            if (response && response.status === 200 && response.getResponseHeader('content-type') === 'image/svg+xml') {
+                const container = document.createElement('svg');
+                container.innerHTML = response.responseText;
+                this.stripUnsafeNodes(...container.children);
+                const svgRoot = container.firstElementChild;
+                if (svgRoot) {
+                    svgRoot.setAttribute('focusable', 'false'); /* disable IE11 focus on SVG root element */
+                }
+                return Promise.resolve(container.innerHTML);
+            }
+            return Promise.resolve('');
+        }
+    }
+}
+const flagLoaderInstance = new FlagLoader();
+export { flagLoaderInstance as FlagLoader };
+/**
+ * Helper function to preload set of flags.
+ * It could help to reduce flag loading delay when flag has a known set of flags that it can use.
+ * @param attrs - list of arguments, representing flags.
+ * Could be flag names, complete flag URLs or mix of both.
+ * @returns Array of promises, which will be resolved with SVG bodies.
+ */
+export const preload = (...attrs) => {
+    return attrs.map(flag => flagLoaderInstance.loadSVG(flag));
+};

package/lib/header/custom-elements.json

@@ -0,0 +1,36 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-header",
+      "description": "Use to identify and separate different sections of a page.\nHeaders helps to organize the page layout content into\na sensible hierarchy and improve the user experience.",
+      "attributes": [
+        {
+          "name": "level",
+          "description": "Use level styling from theme",
+          "type": "\"1\" | \"2\" | \"3\"",
+          "default": "\"2\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "level",
+          "attribute": "level",
+          "description": "Use level styling from theme",
+          "type": "\"1\" | \"2\" | \"3\"",
+          "default": "\"2\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "left",
+          "description": "Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox"
+        },
+        {
+          "name": "right",
+          "description": "Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox"
+        }
+      ]
+    }
+  ]
+}

package/lib/header/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-header
+
+Use to identify and separate different sections of a page.
+Headers helps to organize the page layout content into
+a sensible hierarchy and improve the user experience.
+
+## Properties
+
+| Property | Attribute | Type                | Default | Description                  |
+|----------|-----------|---------------------|---------|------------------------------|
+| `level`  | `level`   | `"1" \| "2" \| "3"` | "2"     | Use level styling from theme |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |

package/lib/header/index.d.ts

@@ -0,0 +1,46 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+/**
+ * Use to identify and separate different sections of a page.
+ * Headers helps to organize the page layout content into
+ * a sensible hierarchy and improve the user experience.
+ *
+ * @slot left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ */
+export declare class Header extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Style definition
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Use level styling from theme
+     */
+    level: '1' | '2' | '3';
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-header': Header;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-header': Partial<Header> | JSXInterface.HTMLAttributes<Header>;
+    }
+  }
+}
+
+export {};

package/lib/header/index.js

@@ -0,0 +1,73 @@
+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 { VERSION } from '../version.js';
+/**
+ * Use to identify and separate different sections of a page.
+ * Headers helps to organize the page layout content into
+ * a sensible hierarchy and improve the user experience.
+ *
+ * @slot left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ */
+let Header = class Header extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Use level styling from theme
+         */
+        this.level = '2';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Style definition
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      :host ::slotted(*) {
+        margin-top: 0;
+        margin-bottom: 0;
+        vertical-align: middle;
+      }
+      [part="label"] {
+        text-align: inherit;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <slot name="left">
+        <div part="spacer"></div>
+      </slot>
+      <div part="label">
+        <slot></slot>
+      </div>
+      <slot name="right"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], Header.prototype, "level", void 0);
+Header = __decorate([
+    customElement('ef-header', {
+        alias: 'coral-header'
+    })
+], Header);
+export { Header };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-header', ':host{color:#ccc;padding:0 0 0 4px;height:28px;font-size:12rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#333;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#404040}:host([level="3"]){background-color:#262626}:host([level="4"]){background-color:#1a1a1a}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-header', ':host{color:#0d0d0d;padding:0 0 0 4px;height:28px;font-size:12rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#e6e6e6;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#d9d9d9}:host([level="3"]){background-color:#f2f2f2}:host([level="4"]){background-color:#fafafa}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-header', ':host{padding:0 0 0 5px;height:27px;font-size:14rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#c2c2c2;background-color:#2e2e33}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#e2e2e2;background-color:#4a4a52;background-image:linear-gradient(rgba(255,255,255,.03) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#8c8c8c;background-color:#212124}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-header', ':host{padding:0 0 0 5px;height:27px;font-size:14rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#505050;background-color:#d0d4db}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#484848;background-color:#bec3cc;background-image:linear-gradient(rgba(255,255,255,.18) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#6e6e78;background-color:#e4e8ed}');