@kelvininc/ui-components

## Usage ### React ```tsx import React from 'react'; import { KvRelativeTimePicker } from '@kelvininc/react-ui-components/client'; export const KvRelativeTimePickerExample: React.FC = () => ( <> {/*-- Default --*/} <KvRelativeTimePicker /> {/*-- With selected relative time key --*/} <KvRelativeTimePicker selectedTimeKey="last-24-h"/> {/*-- With selected timezone --*/} <KvRelativeTimePicker selectedTimezone="Europe/Lisbon" /> </> ); ``` ## Properties | Property | Attribute | Description | Type | Default | | ----------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------------- | | `customClass` | `custom-class` | (optional) Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. It is also valid to provide CssClassMap with boolean logic. | `CssClassMap \| string \| string[]` | `''` | | `customIntervalOptionEnabled` | `custom-interval-option-enabled` | (optional) Defines if the customize interval select option is available | `boolean` | `true` | | `disableTimezoneSelection` | `disable-timezone-selection` | (optional) Lets the timezone visible but doens't let the user change it | `boolean` | `false` | | `options` | `options` | (optional) Selectable relative time options | `IRelativeTimePickerOption[][]` | `DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS` | | `selectedTimeKey` | `selected-time-key` | (optional) Selected time range key | `string` | `undefined` | | `selectedTimezone` | `selected-timezone` | (optional) Currently selected timezone name | `string` | `undefined` | | `timezoneContentVisible` | `timezone-content-visible` | (optional) Determines if the input wrapper content containing the timezone is visible if true, the dropdown will be visible; if false, the content will display the timezone title | `boolean` | `false` | | `timezoneSelectionEnabled` | `timezone-selection-enabled` | (optional) Defines if the timezone select option is available | `boolean` | `true` | | `timezones` | `timezones` | (optional) List of all selectable timezones | `ITimezoneOffset[]` | `buildTimezoneByOffset(getTimezonesNames())` | ## Events | Event | Description | Type | | ----------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------- | | `customizeIntervalClicked` | Emitted when customize interval is clicked | `CustomEvent<string>` | | `selectedRelativeTimeChange` | Emitted when the selected time key changes | `CustomEvent<{ key: string; range: SelectedTimestamp; }>` | | `timezoneChange` | Emitted when selected timezone changes | `CustomEvent<{ name: string; offset: number; }>` | | `timezoneDropdownStateChange` | Emitted when the timezone dropdown open state changes | `CustomEvent<boolean>` | | `timezoneInputClicked` | Emitted when the input wrapper containing the timezone is clicked | `CustomEvent<boolean>` | ## CSS Custom Properties | Name | Description | | -------------------- | ------------------------------------------- | | `--background-color` | Background color. | | `--min-height` | Minimum height of the relative time picker. | ## Dependencies ### Used by - [kv-time-picker](../time-picker) ### Depends on - [kv-time-picker-select-option](../time-picker-select-option) - [kv-select-option](../select-option) - [kv-input-wrapper](../input-wrapper) - [kv-single-select-dropdown](../single-select-dropdown) ### Graph ```mermaid graph TD; kv-relative-time-picker --> kv-time-picker-select-option kv-relative-time-picker --> kv-select-option kv-relative-time-picker --> kv-input-wrapper kv-relative-time-picker --> kv-single-select-dropdown kv-select-option --> kv-checkbox kv-select-option --> kv-tooltip kv-select-option --> kv-icon kv-select-option --> kv-dirty-dot kv-select-option --> kv-action-button-icon kv-checkbox --> kv-radio kv-checkbox --> kv-icon kv-radio --> kv-icon kv-tooltip --> kv-portal kv-tooltip --> kv-tooltip-text kv-dirty-dot --> kv-icon kv-action-button-icon --> kv-action-button kv-action-button-icon --> kv-icon kv-input-wrapper --> kv-icon kv-single-select-dropdown --> kv-dropdown kv-single-select-dropdown --> kv-select-multi-options kv-dropdown --> kv-dropdown-base kv-dropdown --> kv-text-field kv-dropdown-base --> kv-portal kv-text-field --> kv-tooltip kv-text-field --> kv-form-label kv-text-field --> kv-icon kv-text-field --> kv-dirty-dot kv-text-field --> kv-badge kv-text-field --> kv-form-help-text kv-form-help-text --> kv-icon kv-select-multi-options --> kv-virtualized-list kv-select-multi-options --> kv-select-option kv-select-multi-options --> kv-select kv-select-multi-options --> kv-tooltip kv-select-multi-options --> kv-illustration-message kv-select-multi-options --> kv-select-create-option kv-select-multi-options --> kv-select-shortcuts-label kv-select --> kv-search kv-select --> kv-action-button-text kv-search --> kv-text-field kv-action-button-text --> kv-action-button kv-action-button-text --> kv-icon kv-illustration-message --> kv-illustration kv-select-create-option --> kv-text-field kv-select-create-option --> kv-action-button-icon kv-select-shortcuts-label --> kv-icon kv-time-picker --> kv-relative-time-picker style kv-relative-time-picker fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------