@refinitiv-ui/elements 5.12.2 → 6.0.0-next.0

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

@@ -0,0 +1,345 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-datetime-field",
+      "description": "A form control element for datetime input.",
+      "attributes": [
+        {
+          "name": "min",
+          "description": "Set minimum date.\nThis value must follow the `format` and be less\nthan or equal to the value of the `max` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "max",
+          "description": "Set maximum date.\nThis value must follow the `format` and be greater\nthan or equal to the value of the `min` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "timepicker",
+          "description": "Toggle to display the time picker",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "show-seconds",
+          "description": "Toggle to display the seconds",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "am-pm",
+          "description": "Overrides 12hr time display format",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Current date time value",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "description": "Specify icon to display in input. Value can be icon name",
+          "type": "string | null"
+        },
+        {
+          "name": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
+          "type": "boolean"
+        },
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "Set minimum date.\nThis value must follow the `format` and be less\nthan or equal to the value of the `max` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "Set maximum date.\nThis value must follow the `format` and be greater\nthan or equal to the value of the `min` attribute",
+          "type": "string | null"
+        },
+        {
+          "name": "timepicker",
+          "attribute": "timepicker",
+          "description": "Toggle to display the time picker",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "showSeconds",
+          "attribute": "show-seconds",
+          "description": "Toggle to display the seconds",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "amPm",
+          "attribute": "am-pm",
+          "description": "Overrides 12hr time display format",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "formatOptions",
+          "description": "Set the datetime format options based on\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat\n`formatOptions` overrides `timepicker` and `showSeconds` properties.\nNote: time-zone is not supported"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Current date time value",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "valueAsNumber",
+          "description": "Returns the value of the element, interpreted as double number",
+          "type": "number"
+        },
+        {
+          "name": "valueAsDate",
+          "description": "Returns the value of the element, interpreted as Date"
+        },
+        {
+          "name": "decorateInputMap (readonly)"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Specify icon to display in input. Value can be icon name",
+          "type": "string | null"
+        },
+        {
+          "name": "iconHasAction",
+          "attribute": "icon-has-action",
+          "description": "Specify when icon need to be clickable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "maxLength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Dispatched when value changes"
+        },
+        {
+          "name": "error-changed",
+          "description": "Dispatched when error state changes"
+        },
+        {
+          "name": "icon-click",
+          "description": "Dispatched when icon is clicked"
+        }
+      ],
+      "methods": [
+        {
+          "name": "willUpdate",
+          "description": "Updates the element",
+          "params": [
+            {
+              "name": "changedProperties",
+              "description": "Properties that has changed",
+              "type": "PropertyValues"
+            }
+          ]
+        },
+        {
+          "name": "shouldSyncInputValue",
+          "description": "",
+          "params": [
+            {
+              "name": "changedProperties",
+              "type": "PropertyValues"
+            }
+          ]
+        },
+        {
+          "name": "syncInputValue",
+          "description": "",
+          "params": [
+            {
+              "name": "changedProperties",
+              "type": "PropertyValues"
+            }
+          ]
+        },
+        {
+          "name": "shouldValidateInput",
+          "description": "",
+          "params": [
+            {
+              "name": "changedProperties",
+              "type": "PropertyValues"
+            }
+          ]
+        },
+        {
+          "name": "validateInput",
+          "description": "",
+          "params": []
+        },
+        {
+          "name": "isValidValue",
+          "description": "",
+          "params": [
+            {
+              "name": "value"
+            }
+          ]
+        },
+        {
+          "name": "warnInvalidValue",
+          "description": "",
+          "params": [
+            {
+              "name": "value"
+            }
+          ]
+        },
+        {
+          "name": "setValueAndNotify",
+          "description": "",
+          "params": [
+            {
+              "name": "value"
+            }
+          ]
+        },
+        {
+          "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": "onPossibleValueChange",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,61 @@
+# ef-datetime-field
+
+A form control element for datetime input.
+
+## Attributes
+
+| Attribute         | Type      | Description                            |
+|-------------------|-----------|----------------------------------------|
+| `icon-has-action` | `boolean` | Specify when icon need to be clickable |
+| `maxlength`       | `number`  | Set character max limit                |
+| `minlength`       | `number`  | Set character min limit                |
+
+## Properties
+
+| Property                      | Attribute         | Type             | Default | Description                                      |
+|-------------------------------|-------------------|------------------|---------|--------------------------------------------------|
+| `amPm`                        | `am-pm`           | `boolean`        | false   | Overrides 12hr time display format               |
+| `decorateInputMap (readonly)` |                   |                  |         |                                                  |
+| `disabled`                    | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`                       | `error`           | `boolean`        | false   | Set error state                                  |
+| `formatOptions`               |                   |                  | null    | Set the datetime format options based on<br />https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat<br />`formatOptions` overrides `timepicker` and `showSeconds` properties.<br />Note: time-zone is not supported |
+| `icon`                        | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
+| `iconHasAction`               | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `max`                         | `max`             | `string \| null` | null    | Set maximum date.<br />This value must follow the `format` and be greater<br />than or equal to the value of the `min` attribute |
+| `maxLength`                   |                   | `number \| null` | null    | Set character max limit                          |
+| `min`                         | `min`             | `string \| null` | null    | Set minimum date.<br />This value must follow the `format` and be less<br />than or equal to the value of the `max` attribute |
+| `minLength`                   |                   | `number \| null` | null    | Set character min limit                          |
+| `pattern`                     |                   | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder`                 | `placeholder`     | `string`         | ""      | Set placeholder text                             |
+| `readonly`                    | `readonly`        | `boolean`        | false   | Set readonly state                               |
+| `showSeconds`                 | `show-seconds`    | `boolean`        | false   | Toggle to display the seconds                    |
+| `timepicker`                  | `timepicker`      | `boolean`        | false   | Toggle to display the time picker                |
+| `transparent`                 | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
+| `value`                       | `value`           | `string`         | ""      | Current date time value                          |
+| `valueAsDate`                 |                   |                  |         | Returns the value of the element, interpreted as Date |
+| `valueAsNumber`               |                   | `number`         |         | Returns the value of the element, interpreted as double number |
+| `warning`                     | `warning`         | `boolean`        | false   | Set warning state                                |
+
+## Methods
+
+| Method                  | Type                                            | Description                                      |
+|-------------------------|-------------------------------------------------|--------------------------------------------------|
+| `checkValidity`         | `(): boolean`                                   | Returns true if an input element contains valid data. |
+| `isValidValue`          | `(value: string): boolean`                      |                                                  |
+| `onPossibleValueChange` | `(event: any): void`                            |                                                  |
+| `reportValidity`        | `(): boolean`                                   | Validate input. Mark as error if input is invalid |
+| `setValueAndNotify`     | `(value: string): void`                         |                                                  |
+| `shouldSyncInputValue`  | `(changedProperties: any): boolean`             |                                                  |
+| `shouldValidateInput`   | `(changedProperties: any): boolean`             |                                                  |
+| `syncInputValue`        | `{ (changedProperties: any): void; (): void; }` |                                                  |
+| `validateInput`         | `(): void`                                      |                                                  |
+| `warnInvalidValue`      | `(value: string): void`                         |                                                  |
+| `willUpdate`            | `(changedProperties: any): void`                | Updates the element<br /><br />**changedProperties**: Properties that has changed |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |