@refinitiv-ui/elements 5.3.3 → 5.7.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/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-notification
+
+Used to show informative content when something happens in the application
+
+## Properties
+
+| Property    | Attribute   | Type      | Default | Description                              |
+|-------------|-------------|-----------|---------|------------------------------------------|
+| `collapsed` | `collapsed` | `boolean` | false   | Toggles the collapsed state.             |
+| `confirm`   | `confirm`   | `boolean` | false   | Notification style: Confirm              |
+| `error`     | `error`     | `boolean` | false   | Notification style: Error                |
+| `message`   | `message`   | `string`  | ""      | The message to show in the notification. |
+| `warning`   | `warning`   | `boolean` | false   | Notification style: Warning              |
+
+## Methods
+
+| Method    | Type       | Description                                      |
+|-----------|------------|--------------------------------------------------|
+| `dismiss` | `(): void` | Dismisses the notification, firing a `dismiss` event and collapsing the notification. |
+
+## Events
+
+| Event       | Description                               |
+|-------------|-------------------------------------------|
+| `collapsed` | Dispatched when notification is collapsed |
+| `dismiss`   | Dispatched when notification is dismissed |

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 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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,154 @@
+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

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