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

package/lib/multi-input/themes/solar/pearl/index.js

@@ -1,4 +0,0 @@
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/pill/themes/solar/pearl';
-
-elf.customStyles.define('ef-multi-input', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;display:flex;width:100%;height:auto;min-height:23px;justify-content:normal;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}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=search-holder]{align-items:center}::-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}:host{background-color:#fff;border:1px solid #a9afba;padding:0 0 3px 3px}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host [part=search]{height:17px;margin:3px 3px 0 0}');

package/lib/notification/elements/notification-tray.d.ts

@@ -1,97 +0,0 @@
-import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, ElementSize, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import type { Notification } from './notification';
-import type { TaskOptions } from '../helpers/types';
-export declare class NotificationTray extends ResponsiveElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    private queue;
-    private showing;
-    private resizeTask;
-    private nextToDismiss;
-    private defaultTimeout;
-    /**
-     * Maximum number to show notification limit
-     */
-    max: number;
-    /**
-     * Attach point for notification top|bottom
-     */
-    attach: string;
-    /**
-     * Does the tray has room to show another notification?
-     * @returns true if tray is ready to show
-     */
-    private get canShow();
-    /**
-     * Gets the next dismissable notification.
-     * @returns notification task
-     */
-    private get nextDismissable();
-    /**
-     * On first updated lifecycle
-     * @param changedProperties changed property
-     * @returns {void}
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    /**
-     * Validate attach value
-     * @param attach attach value
-     * @returns results
-     */
-    private isValidAttatchPoint;
-    /**
-     * Get the amount of padding to be applied to the document.
-     * @param size element dimensions
-     * @returns padding size
-     */
-    private getSizeFromAttachPoint;
-    /**
-     * Called when the element resizes
-     * @ignore
-     * @param size element dimensions
-     * @returns {void}
-     */
-    resizedCallback(size: ElementSize): void;
-    /**
-     * Schedules the dismissal of the current dismissable notification.
-     * @returns {void}
-     */
-    private dismissNext;
-    /**
-     * Process notifications
-     * @returns {void}
-     */
-    private tick;
-    /**
-     * Pushes a new notification into the tray.
-     * It will be shown when available to do so.
-     * @param el notification element to append.
-     * @param options notification options
-     * @returns {void}
-     */
-    push(el: Notification, options: TaskOptions): void;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @returns Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-notification-tray': NotificationTray;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-notification-tray': Partial<NotificationTray> | JSXInterface.HTMLAttributes<NotificationTray>;
-    }
-  }
-}
-
-export {};

package/lib/notification/elements/notification-tray.js

@@ -1,167 +0,0 @@
-import { __decorate } from "tslib";
-import { ResponsiveElement, html } 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';
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-let NotificationTray = class NotificationTray extends ResponsiveElement {
-    constructor() {
-        super(...arguments);
-        this.queue = [];
-        this.showing = [];
-        this.resizeTask = new TimeoutTaskRunner();
-        this.nextToDismiss = null;
-        this.defaultTimeout = 10000;
-        /**
-         * Maximum number to show notification limit
-         */
-        this.max = 1;
-        /**
-         * Attach point for notification top|bottom
-         */
-        this.attach = '';
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * Does the tray has room to show another notification?
-     * @returns true if tray is ready to show
-     */
-    get canShow() {
-        return this.queue.length >= 0 && this.showing.length < this.max;
-    }
-    /**
-     * Gets the next dismissable notification.
-     * @returns notification task
-     */
-    get nextDismissable() {
-        return this.showing.filter(item => item.options.duration !== Infinity)[0];
-    }
-    /**
-     * On first updated lifecycle
-     * @param changedProperties changed property
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.addEventListener('collapsed', (event) => this.removeChild(event.target), true);
-        this.max = parseInt(this.getComputedVariable('--max'), 10) || 1;
-        this.defaultTimeout = parseInt(this.getComputedVariable('--default-timeout'), 10) || 10000;
-    }
-    /**
-     * Validate attach value
-     * @param attach attach value
-     * @returns results
-     */
-    isValidAttatchPoint(attach) {
-        return (/^(top|bottom)$/).test(attach);
-    }
-    /**
-     * Get the amount of padding to be applied to the document.
-     * @param size element dimensions
-     * @returns padding size
-     */
-    getSizeFromAttachPoint(size) {
-        // Only push the app if the tray is top or bottom.
-        if (this.isValidAttatchPoint(this.attach)) {
-            return size.height;
-        }
-        return 0;
-    }
-    /**
-     * Called when the element resizes
-     * @ignore
-     * @param size element dimensions
-     * @returns {void}
-     */
-    resizedCallback(size) {
-        // Defer the root padding to prevent a resize loop error
-        // when this causes other elements to resize.
-        this.resizeTask.schedule(() => {
-            const root = document.documentElement;
-            const padding = this.getSizeFromAttachPoint(size);
-            const paddingPoint = `padding-${this.isValidAttatchPoint(this.attach) ? this.attach : 'top'}`;
-            if (padding) {
-                root.style.setProperty('box-sizing', 'border-box');
-                root.style.setProperty(paddingPoint, `${padding}px`);
-            }
-            else {
-                root.style.removeProperty('border-sizing');
-                root.style.removeProperty(paddingPoint);
-            }
-        });
-    }
-    /**
-     * Schedules the dismissal of the current dismissable notification.
-     * @returns {void}
-     */
-    dismissNext() {
-        const next = this.nextDismissable;
-        if (next && next !== this.nextToDismiss) {
-            const duration = next.options.duration;
-            this.nextToDismiss = next;
-            const timeout = setTimeout(() => {
-                next.el.dismiss();
-            }, typeof duration === 'number' ? duration : this.defaultTimeout);
-            next.el.addEventListener('dismiss', () => {
-                clearTimeout(timeout);
-            }, { once: true });
-        }
-    }
-    /**
-     * Process notifications
-     * @returns {void}
-     */
-    tick() {
-        if (this.canShow) {
-            const showing = this.showing;
-            const item = this.queue.shift();
-            if (item) {
-                showing.push(item);
-                this.appendChild(item.el);
-                item.el.addEventListener('dismiss', () => {
-                    showing.splice(showing.indexOf(item), 1);
-                    this.dismissNext();
-                    this.tick();
-                }, { once: true });
-                this.dismissNext();
-            }
-        }
-    }
-    /**
-     * Pushes a new notification into the tray.
-     * It will be shown when available to do so.
-     * @param el notification element to append.
-     * @param options notification options
-     * @returns {void}
-     */
-    push(el, options) {
-        this.queue.push({ el, options });
-        this.tick();
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @returns Render template
-     */
-    render() {
-        return html `<slot></slot>`;
-    }
-};
-__decorate([
-    property({ type: Number })
-], NotificationTray.prototype, "max", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], NotificationTray.prototype, "attach", void 0);
-NotificationTray = __decorate([
-    customElement('ef-notification-tray', {
-        alias: 'amber-notification-tray'
-    })
-], NotificationTray);
-export { NotificationTray };

package/lib/notification/elements/notification.d.ts

@@ -1,90 +0,0 @@
-import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import '../../icon/index.js';
-/**
- * Used to show informative content when something happens in the application
- *
- * @fires collapsed - Dispatched when notification is collapsed
- * @fires dismiss - Dispatched when notification is dismissed
- *
- */
-export declare class Notification extends BasicElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * The message to show in the notification.
-     */
-    message: string;
-    /**
-     * Notification style: Confirm
-     */
-    confirm: boolean;
-    /**
-     * Notification style: Warning
-     */
-    warning: boolean;
-    /**
-     * Notification style: Error
-     */
-    error: boolean;
-    /**
-     * Toggles the collapsed state.
-     */
-    collapsed: boolean;
-    /**
-     * On first updated lifecycle
-     * @param changedProperties changed property
-     * @returns {void}
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    protected update(changedProperties: PropertyValues): void;
-    /**
-     * Dismisses the notification, firing a `dismiss` event and collapsing the notification.
-     * @returns {void}
-     */
-    dismiss(): void;
-    /**
-     * Event handler for the clear button.
-     * @param event event object
-     * @returns {void}
-     * @private
-     */
-    private onClearClick;
-    /**
-     * Event handler for when animation end.
-     * @returns {void}
-     */
-    private onAnimationEnd;
-    /**
-     * 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;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     *
-     * @returns {TemplateResult} Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-notification': Notification;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-notification': Partial<Notification> | JSXInterface.HTMLAttributes<Notification>;
-    }
-  }
-}
-
-export {};

package/lib/notification/elements/notification.js

@@ -1,154 +0,0 @@
-import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { VERSION } from '../../version.js';
-import '../../icon/index.js';
-/**
- * Used to show informative content when something happens in the application
- *
- * @fires collapsed - Dispatched when notification is collapsed
- * @fires dismiss - Dispatched when notification is dismissed
- *
- */
-let Notification = class Notification extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The message to show in the notification.
-         */
-        this.message = '';
-        /**
-         * Notification style: Confirm
-         */
-        this.confirm = false;
-        /**
-         * Notification style: Warning
-         */
-        this.warning = false;
-        /**
-         * Notification style: Error
-         */
-        this.error = false;
-        /**
-         * Toggles the collapsed state.
-         */
-        this.collapsed = false;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * On first updated lifecycle
-     * @param changedProperties changed property
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.addEventListener('animationend', this.onAnimationEnd);
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        // Fix bg doesn't work on IE 11
-        if (changedProperties.has('confirm') || changedProperties.has('warning') || changedProperties.has('error')) {
-            this.updateStyles();
-        }
-    }
-    /**
-     * Dismisses the notification, firing a `dismiss` event and collapsing the notification.
-     * @returns {void}
-     */
-    dismiss() {
-        const event = new CustomEvent('dismiss', {
-            bubbles: false,
-            cancelable: true
-        });
-        // do action only if it was not prevented by a handler
-        if (this.dispatchEvent(event)) {
-            this.collapsed = true;
-        }
-    }
-    /**
-     * Event handler for the clear button.
-     * @param event event object
-     * @returns {void}
-     * @private
-     */
-    onClearClick(event) {
-        event.stopPropagation();
-        this.dismiss();
-    }
-    /**
-     * Event handler for when animation end.
-     * @returns {void}
-     */
-    onAnimationEnd() {
-        if (this.collapsed) {
-            this.dispatchEvent(new CustomEvent('collapsed', {
-                bubbles: false,
-                cancelable: false
-            }));
-        }
-    }
-    /**
-     * 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: block;
-      }
-      [part=label] {
-        color: red;
-      }
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     *
-     * @returns {TemplateResult} Render template
-     */
-    render() {
-        return html `
-    <style>
-    :host {
-      display: block;
-    }
-    </style>
-    <div part="container">
-      <div part="content"><slot>${this.message}</slot></div>
-      <ef-icon part="clear" icon="cross" @click="${this.onClearClick.bind(this)}"></ef-icon>
-    </div>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], Notification.prototype, "message", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Notification.prototype, "confirm", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Notification.prototype, "warning", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Notification.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Notification.prototype, "collapsed", void 0);
-Notification = __decorate([
-    customElement('ef-notification', {
-        alias: 'amber-notification'
-    })
-], Notification);
-export { Notification };

package/lib/notification/helpers/status.d.ts

@@ -1,30 +0,0 @@
-import type { Notification } from '../elements/notification';
-/**
- * Show an info notification (default)
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-declare const info: (message: string, duration: number) => Notification;
-/**
- * Show a confirmation notification
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-declare const confirm: (message: string, duration: number) => Notification;
-/**
- * Show a warning notification
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-declare const warn: (message: string, duration: number) => Notification;
-/**
- * Show an error notification
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-declare const error: (message: string, duration: number) => Notification;
-export { info, confirm, warn, error };

package/lib/notification/helpers/status.js

@@ -1,130 +0,0 @@
-import { NotificationTray } from '../elements/notification-tray.js';
-// TODO: Add to utils?
-const DEV_ENV = (/^(localhost|127\.0\.0\.1)$/).test(location.hostname);
-const NotificationType = {
-    INFO: 'INFO',
-    CONFIRM: 'CONFIRM',
-    WARN: 'WARN',
-    ERROR: 'ERROR'
-};
-// Default notification tray to use
-let tray = null;
-/**
- * Tries to reuse a tray, if one is already available.
- * Otherwise, it will create a new tray to use.
- *
- * @param name tag name of the tray
- * @param forName notification tag name
- * @returns {void} notification tray
- */
-const getTray = (name, forName) => {
-    const existTray = document.querySelector(name + '[for="' + forName + '"]');
-    if (existTray) {
-        tray = existTray;
-    }
-    else {
-        tray = new NotificationTray();
-        tray.setAttribute('for', forName);
-        tray.attach = 'top'; // attach to top
-    }
-};
-/**
- * Connects the default tray to the document.
- * @returns {void}
- */
-const connect = () => {
-    if (document.body && tray) {
-        document.body.appendChild(tray);
-    }
-    else {
-        document.addEventListener('DOMContentLoaded', function () {
-            connect();
-        });
-    }
-};
-/**
- * Prepares the default tray making sure it is available in the DOM.
- * @returns {void}
- */
-const prepareTray = () => {
-    getTray('ef-notification-tray', 'ef-notification');
-    if (document.body && tray && tray.parentElement !== document.body) {
-        connect();
-    }
-};
-/**
- * Creates a notification and pushes it into the default tray.
- *
- * @param options notification task options
- * @returns instance of the `Notification`.
- */
-const notify = (options) => {
-    prepareTray();
-    const el = document.createElement('ef-notification');
-    el.message = options.message;
-    el.confirm = options.type === NotificationType.CONFIRM;
-    el.warning = options.type === NotificationType.WARN;
-    el.error = options.type === NotificationType.ERROR;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    tray.push(el, options);
-    return el;
-};
-/**
- * Show an info notification (default)
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-const info = (message, duration) => {
-    return notify({
-        message: message,
-        duration: duration,
-        type: NotificationType.INFO
-    });
-};
-/**
- * Show a confirmation notification
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-const confirm = (message, duration) => {
-    return notify({
-        message: message,
-        duration: duration,
-        type: NotificationType.CONFIRM
-    });
-};
-/**
- * Show a warning notification
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-const warn = (message, duration) => {
-    return notify({
-        message: message,
-        duration: duration,
-        type: NotificationType.WARN
-    });
-};
-/**
- * Show an error notification
- * @param message Message to show in the notification.
- * @param duration Duration the notification should be displayed for.
- * @returns instance of the `Notification`.
- */
-const error = (message, duration) => {
-    return notify({
-        message: message,
-        duration: duration,
-        type: NotificationType.ERROR
-    });
-};
-if (DEV_ENV) {
-    // Show application errors, in development mode
-    window.addEventListener('error', (e) => {
-        error(e.message, 1000);
-    });
-}
-export { info, confirm, warn, error };