@refinitiv-ui/elements 5.3.3 → 5.3.4

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

@@ -0,0 +1,4 @@
+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):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):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):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):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):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):hover){border:1px solid #a7a45a}:host [part=search]{height:17px;margin:3px 3px 0 0}');

package/lib/notification/custom-elements.json

@@ -0,0 +1,95 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-notification",
+      "description": "Used to show informative content when something happens in the application",
+      "attributes": [
+        {
+          "name": "message",
+          "description": "The message to show in the notification.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "confirm",
+          "description": "Notification style: Confirm",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Notification style: Warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Notification style: Error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "collapsed",
+          "description": "Toggles the collapsed state.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "message",
+          "attribute": "message",
+          "description": "The message to show in the notification.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "confirm",
+          "attribute": "confirm",
+          "description": "Notification style: Confirm",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Notification style: Warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Notification style: Error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "collapsed",
+          "attribute": "collapsed",
+          "description": "Toggles the collapsed state.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "collapsed",
+          "description": "Dispatched when notification is collapsed"
+        },
+        {
+          "name": "dismiss",
+          "description": "Dispatched when notification is dismissed"
+        }
+      ],
+      "methods": [
+        {
+          "name": "dismiss",
+          "description": "Dismisses the notification, firing a `dismiss` event and collapsing the notification.",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,97 @@
+import { JSXInterface } from '../../jsx';
+import { ResponsiveElement, ElementSize, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { Notification } from './notification';
+import { 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

@@ -0,0 +1,170 @@
+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 { ResponsiveElement, html, customElement, property } from '@refinitiv-ui/core';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils';
+import { VERSION } from '../../';
+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

@@ -0,0 +1,90 @@
+import { JSXInterface } from '../../jsx';
+import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import '../../icon';
+/**
+ * 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 `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     *
+     * @returns {(CSSResult|CSSResult[])} CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * 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

@@ -0,0 +1,157 @@
+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 } from '@refinitiv-ui/core';
+import { VERSION } from '../../';
+import '../../icon';
+/**
+ * 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 `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     *
+     * @returns {(CSSResult|CSSResult[])} 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

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