@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/notification/helpers/status.js

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

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

@@ -0,0 +1,10 @@
+import type { Notification } from '../elements/notification';
+export declare type Task = {
+    el: Notification;
+    options: TaskOptions;
+};
+export declare type TaskOptions = {
+    message: string;
+    type: string;
+    duration: number;
+};

package/lib/notification/helpers/types.js

@@ -0,0 +1 @@
+export {};

package/lib/notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from './elements/notification.js';
+export { info, confirm, warn, error } from './helpers/status.js';

package/lib/notification/index.js

@@ -0,0 +1,2 @@
+export * from './elements/notification.js';
+export { info, confirm, warn, error } from './helpers/status.js';

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

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#ccc);-webkit-animation:.2s forwards notification-open;animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--background-color,#007678);-webkit-animation:.2s notification-container-open;animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#227542}:host([warning]){--background-color:#7F6400}:host([error]){--background-color:#A01C2B}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

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

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#0d0d0d);-webkit-animation:.2s forwards notification-open;animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--background-color,#007678);-webkit-animation:.2s notification-container-open;animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#246B3E}:host([warning]){--background-color:#CCA000;color:#0d0d0d}:host([error]){--background-color:#B63243}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

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

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#c2c2c2);-webkit-animation:.4s forwards notification-open;animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);-webkit-animation:.4s notification-container-open;animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#F5475B;--background-color:#a8313f}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

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

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#505050);-webkit-animation:.4s forwards notification-open;animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);-webkit-animation:.4s notification-container-open;animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#D94255;--background-color:#a8313f}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

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

@@ -0,0 +1,200 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-number-field",
+      "description": "Form control element for numbers",
+      "attributes": [
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string | null"
+        },
+        {
+          "name": "no-spinner",
+          "description": "Set spinner's visibility",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "step",
+          "description": "Set step value",
+          "type": "string | null"
+        },
+        {
+          "name": "min",
+          "description": "Set minimum value.\nThis value must be less than or equal to the value of the `max` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "max",
+          "description": "Set maximum value.\nThis value must be greater than or equal to the value of the `min` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "transparent",
+          "description": "Set state to transparent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "The value of the number entered into the input.",
+          "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": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string | null"
+        },
+        {
+          "name": "noSpinner",
+          "attribute": "no-spinner",
+          "description": "Set spinner's visibility",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "step",
+          "attribute": "step",
+          "description": "Set step value",
+          "type": "string | null"
+        },
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "Set minimum value.\nThis value must be less than or equal to the value of the `max` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "Set maximum value.\nThis value must be greater than or equal to the value of the `min` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Set state to transparent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "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": "valueAsNumber",
+          "description": "Returns the value of the element, interpreted as double number",
+          "type": "number"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value of the number entered into the input.",
+          "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": "stepUp",
+          "description": "Increases the input value by amount of step",
+          "params": [
+            {
+              "name": "stepIncrement",
+              "description": "The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1."
+            }
+          ]
+        },
+        {
+          "name": "stepDown",
+          "description": "Decreases the input value by amount of step",
+          "params": [
+            {
+              "name": "stepIncrement",
+              "description": "The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1."
+            }
+          ]
+        },
+        {
+          "name": "checkValidity",
+          "description": "Returns true if an input element contains valid data.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate input. Mark as error if input is invalid",
+          "params": []
+        },
+        {
+          "name": "select",
+          "description": "Select the contents of input",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,37 @@
+# ef-number-field
+
+Form control element for numbers
+
+## Properties
+
+| Property        | Attribute     | Modifiers | Type             | Default | Description                                      |
+|-----------------|---------------|-----------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`    |           | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`       |           | `boolean`        | false   | Set state to error                               |
+| `max`           | `max`         |           | `string \| null` | null    | Set maximum value.<br />This value must be greater than or equal to the value of the `min` attribute |
+| `min`           | `min`         |           | `string \| null` | null    | Set minimum value.<br />This value must be less than or equal to the value of the `max` attribute |
+| `noSpinner`     | `no-spinner`  |           | `boolean`        | false   | Set spinner's visibility                         |
+| `placeholder`   | `placeholder` |           | `string \| null` | null    | Set placeholder text                             |
+| `readonly`      | `readonly`    |           | `boolean`        | false   | Set readonly state                               |
+| `step`          | `step`        |           | `string \| null` | null    | Set step value                                   |
+| `transparent`   | `transparent` |           | `boolean`        | false   | Set state to transparent                         |
+| `value`         | `value`       |           | `string`         | 0       | The value of the number entered into the input.  |
+| `valueAsNumber` |               | readonly  | `number`         |         | Returns the value of the element, interpreted as double number |
+| `warning`       | `warning`     |           | `boolean`        | false   | Set state to warning                             |
+
+## Methods
+
+| Method           | Type                                          | Description                                      |
+|------------------|-----------------------------------------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean`                                 | Returns true if an input element contains valid data. |
+| `reportValidity` | `(): boolean`                                 | Validate input. Mark as error if input is invalid |
+| `select`         | `(): void`                                    | Select the contents of input                     |
+| `stepDown`       | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+| `stepUp`         | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `value-changed` | Dispatched when value changes       |