@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/panel/index.d.ts

@@ -0,0 +1,48 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
+/**
+ * A container for components.
+ * It provides a standard background color and padding, depends on theme.
+ */
+export declare class Panel 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.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Apply default padding from theme
+     */
+    spacing: boolean;
+    /**
+     * Set panel background to transparent
+     */
+    transparent: boolean;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-panel': Panel;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-panel': Partial<Panel> | JSXInterface.HTMLAttributes<Panel>;
+    }
+  }
+}
+
+export {};

package/lib/panel/index.js

@@ -0,0 +1,74 @@
+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';
+/**
+ * A container for components.
+ * It provides a standard background color and padding, depends on theme.
+ */
+let Panel = class Panel extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Apply default padding from theme
+         */
+        this.spacing = false;
+        /**
+         * Set panel background to transparent
+         */
+        this.transparent = false;
+    }
+    /**
+     * 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.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        position: relative;
+        display: block;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      :host([transparent]) {
+        background: transparent;
+        border: 0;
+      }
+
+      :host([spacing]) {
+        padding: 10px; /* default padding - can be overridden by theme */
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Panel.prototype, "spacing", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Panel.prototype, "transparent", void 0);
+Panel = __decorate([
+    customElement('ef-panel', {
+        alias: 'coral-panel'
+    })
+], Panel);
+export { Panel };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#1a1a1a)}:host([spacing]){padding:12px 8px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#fafafa)}:host([spacing]){padding:12px 8px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#1a1a1c)}:host([spacing]){padding:6px 10px}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-panel', ':host{background-color:var(--panel-background-color,#fff)}:host([spacing]){padding:6px 10px}:host(:not([transparent])::after){content:\'\';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(255,255,255,.5);pointer-events:none}');

package/lib/password-field/custom-elements.json

@@ -0,0 +1,156 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-password-field",
+      "description": "A form control element for password",
+      "attributes": [
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character minimum limit",
+          "type": "number | null"
+        },
+        {
+          "name": "maxlength",
+          "description": "Set character maximum limit",
+          "type": "number | null"
+        },
+        {
+          "name": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "minLength",
+          "attribute": "minlength",
+          "description": "Set character minimum limit",
+          "type": "number | null"
+        },
+        {
+          "name": "maxLength",
+          "attribute": "maxlength",
+          "description": "Set character maximum limit",
+          "type": "number | null"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "0"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Dispatched when value changes"
+        },
+        {
+          "name": "error-changed",
+          "description": "Dispatched when error state changes"
+        }
+      ],
+      "methods": [
+        {
+          "name": "select",
+          "description": "Select the contents of input",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

package/lib/password-field/custom-elements.md

@@ -0,0 +1,31 @@
+# ef-password-field
+
+A form control element for password
+
+## Properties
+
+| Property      | Attribute     | Type             | Default | Description                                      |
+|---------------|---------------|------------------|---------|--------------------------------------------------|
+| `disabled`    | `disabled`    | `boolean`        | false   | Set disabled state                               |
+| `error`       | `error`       | `boolean`        | false   | Set state to error                               |
+| `maxLength`   | `maxlength`   | `number \| null` | null    | Set character maximum limit                      |
+| `minLength`   | `minlength`   | `number \| null` | null    | Set character minimum limit                      |
+| `pattern`     | `pattern`     | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder` | `placeholder` | `string`         | ""      | Set placeholder text                             |
+| `readonly`    | `readonly`    | `boolean`        | false   | Set readonly state                               |
+| `transparent` | `transparent` | `boolean`        | false   | Disables all other states and border/background styles.<br />Use with advanced composite elements requiring e.g. multi selection in<br />combo-box when parent container handles element states. |
+| `value`       | `value`       | `string`         | 0       | Input's value                                    |
+| `warning`     | `warning`     | `boolean`        | false   | Set state to warning                             |
+
+## Methods
+
+| Method   | Type       | Description                  |
+|----------|------------|------------------------------|
+| `select` | `(): void` | Select the contents of input |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `value-changed` | Dispatched when value changes       |

package/lib/password-field/index.d.ts

@@ -0,0 +1,141 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../icon/index.js';
+/**
+ * A form control element for password
+ *
+ * @fires value-changed - Dispatched when value changes
+ * @fires error-changed - Dispatched when error state changes
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=] - Input's value
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+export declare class PasswordField extends ControlElement {
+    /**
+     * 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.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Set regular expression for input validation
+     */
+    pattern: string;
+    /**
+     * Set placeholder text
+     */
+    placeholder: string;
+    /**
+     * Set state to error
+     */
+    error: boolean;
+    /**
+     * Set state to warning
+     */
+    warning: boolean;
+    /**
+     * Disables all other states and border/background styles.
+     * Use with advanced composite elements requiring e.g. multi selection in
+     * combo-box when parent container handles element states.
+     */
+    transparent: boolean;
+    /**
+     * Set character minimum limit
+     */
+    minLength: number | null;
+    /**
+     * Set character maximum limit
+     */
+    maxLength: number | null;
+    /**
+     * Get native input element from shadow roots
+     */
+    private inputElement;
+    /**
+     * Defines whether password is visible or not
+     */
+    private isPasswordVisible;
+    /**
+     * Select the contents of input
+     * @return void
+     */
+    select(): void;
+    /**
+     * Called when the element’s DOM has been updated and rendered for the first time
+     * @param changedProperties Properties that has changed
+     * @return shouldUpdate
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @return shouldUpdate
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+    /**
+     * Check if input should be re-validated
+     * True if value changed and pattern or minlength is present
+     * True if pattern or minlength changed
+     * @param changedProperties Properties that has changed
+     * @return True if input should be re-validated
+     */
+    private shouldValidateInput;
+    /**
+     * check if value is changed and fire event
+     * @return {void}
+     */
+    private onPossibleValueChange;
+    /**
+     * validate input according `pattern`, `min` and `max` properties
+     * change state of `error` property according pattern validation
+     * @return void
+     */
+    private validateInput;
+    /**
+     * @param error existing state of error
+     * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
+     */
+    private shouldValidateForMinLength;
+    /**
+     * Detect `enter` and `space` keydown and fire
+     * @param event keydown event
+     * @returns {void}
+     */
+    private handleKeyDown;
+    /**
+     * Toggles password visibility state
+     * @return void
+     */
+    private togglePasswordVisibility;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-password-field': PasswordField;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-password-field': Partial<PasswordField> | JSXInterface.ControlHTMLAttributes<PasswordField>;
+    }
+  }
+}
+
+export {};