@kelvininc/ui-components

{ "timestamp": "2025-06-05T13:56:53", "compiler": { "name": "@stencil/core", "version": "4.29.2", "typescriptVersion": "5.5.4" }, "components": [ { "filePath": "src/components/absolute-time-picker/absolute-time-picker.tsx", "encapsulation": "none", "tag": "kv-absolute-time-picker", "readme": "# kv-absolute-time-picker\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvAbsoluteTimePicker } from '@kelvininc/react-ui-components';\n\nexport const KvAbsoluteTimePicker: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t<KvAbsoluteTimePicker />\n\n\t\t{/*-- With selected date --*/}\n\t\t<KvAbsoluteTimePicker selectedDates={['2022-08-04', '2022-09-01']} />\n\n\t\t{/*-- With initial date --*/}\n\t\t<KvAbsoluteTimePicker initialDate=\"2021-12-03\" />\n\n\t\t{/*-- With disabled dates --*/}\n\t\t<KvAbsoluteTimePicker disabledDates={['2021-12-01', '2021-12-04', '2021-12-05']} />\n\n\t\t{/*-- With min and max --*/}\n\t\t<KvAbsoluteTimePicker minDate=\"2021-12-04\" maxDate=\"2023-02-12\" />\n\t</>\n);\n```\n" }, "props": [ { "name": "calendarInputMaxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "calendar-input-max-date", "reflectToAttr": false, "docs": "(optional) calendar maximum date to be navigated format: DD-MM-YYYY HH:mm:ss", "docsTags": [ { "name": "inheritdoc" } ], "default": "CALENDAR_INPUT_MAX_DATE", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "calendarInputMinDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "calendar-input-min-date", "reflectToAttr": false, "docs": "(optional) calendar minimum date to be navigated format: DD-MM-YYYY HH:mm:ss", "docsTags": [ { "name": "inheritdoc" } ], "default": "CALENDAR_INPUT_MIN_DATE", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disabledDates", "type": "string[]", "complexType": { "original": "string[]", "resolved": "string[]", "references": {} }, "mutable": false, "attr": "disabled-dates", "reflectToAttr": false, "docs": "(optional) Disabled dates", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayBackButton", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "display-back-button", "reflectToAttr": false, "docs": "(optional) Enables the back button displayed on top", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "EAbsoluteTimeError.EndDateAfterMaximumDate | EAbsoluteTimeError.EndDateBeforeStartDate | EAbsoluteTimeError.StartDateBeforeMinimumDate", "complexType": { "original": "EAbsoluteTimeError", "resolved": "EAbsoluteTimeError.EndDateAfterMaximumDate | EAbsoluteTimeError.EndDateBeforeStartDate | EAbsoluteTimeError.StartDateBeforeMinimumDate", "references": { "EAbsoluteTimeError": { "location": "import", "path": "../../types", "id": "src/types.ts::EAbsoluteTimeError" } } }, "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "(optional) It is used to determine if the time picker as date time input error", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EAbsoluteTimeError.EndDateAfterMaximumDate" }, { "type": "EAbsoluteTimeError.EndDateBeforeStartDate" }, { "type": "EAbsoluteTimeError.StartDateBeforeMinimumDate" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "headerTitle", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "header-title", "reflectToAttr": false, "docs": "(optional) Title disaplayed on top of the component", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_HEADER_TITLE", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "initialDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "initial-date", "reflectToAttr": false, "docs": "(optional) Initial Date", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "mode", "type": "EAbsoluteTimePickerMode.Range | EAbsoluteTimePickerMode.Single", "complexType": { "original": "EAbsoluteTimePickerMode", "resolved": "EAbsoluteTimePickerMode.Range | EAbsoluteTimePickerMode.Single", "references": { "EAbsoluteTimePickerMode": { "location": "import", "path": "./absolute-time-picker.types", "id": "src/components/absolute-time-picker/absolute-time-picker.types.ts::EAbsoluteTimePickerMode" } } }, "mutable": false, "attr": "mode", "reflectToAttr": false, "docs": "(optional) Defines if the calendar is in single date or range mode", "docsTags": [ { "name": "inheritdoc" } ], "default": "EAbsoluteTimePickerMode.Range", "values": [ { "type": "EAbsoluteTimePickerMode.Range" }, { "type": "EAbsoluteTimePickerMode.Single" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "relativeTimeConfig", "type": "IRelativeTimeInput", "complexType": { "original": "IRelativeTimeInput", "resolved": "IRelativeTimeInput", "references": { "IRelativeTimeInput": { "location": "import", "path": "./absolute-time-picker.types", "id": "src/components/absolute-time-picker/absolute-time-picker.types.ts::IRelativeTimeInput" } } }, "mutable": false, "attr": "relative-time-config", "reflectToAttr": false, "docs": "(optional) use to determine if the chart inputs have custom strings", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IRelativeTimeInput" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedDates", "type": "string[]", "complexType": { "original": "string[]", "resolved": "string[]", "references": {} }, "mutable": false, "attr": "selected-dates", "reflectToAttr": false, "docs": "(optional) Selected dates", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "backButtonClicked", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the back button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "relativeTimeConfigChange", "detail": "IAbsoluteSelectedRangeDates", "bubbles": true, "complexType": { "original": "IAbsoluteSelectedRangeDates", "resolved": "IAbsoluteSelectedRangeDates", "references": { "IAbsoluteSelectedRangeDates": { "location": "import", "path": "./absolute-time-picker.types", "id": "src/components/absolute-time-picker/absolute-time-picker.types.ts::IAbsoluteSelectedRangeDates" } } }, "cancelable": true, "composed": true, "docs": "Emitted when there is a change in the relative config", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "relativeTimeConfigReset", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the input is clicked and it were displaying custom text", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectedDatesChange", "detail": "IAbsoluteSelectedRangeDates", "bubbles": true, "complexType": { "original": "IAbsoluteSelectedRangeDates", "resolved": "IAbsoluteSelectedRangeDates", "references": { "IAbsoluteSelectedRangeDates": { "location": "import", "path": "./absolute-time-picker.types", "id": "src/components/absolute-time-picker/absolute-time-picker.types.ts::IAbsoluteSelectedRangeDates" } } }, "cancelable": true, "composed": true, "docs": "Selected dates change", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-absolute-time-picker-dropdown", "kv-time-picker" ], "dependencies": [ "kv-icon", "kv-date-time-input", "kv-calendar" ], "dependencyGraph": { "kv-absolute-time-picker": [ "kv-icon", "kv-date-time-input", "kv-calendar" ], "kv-date-time-input": [ "kv-form-label", "kv-icon", "kv-form-help-text" ], "kv-form-help-text": [ "kv-icon" ], "kv-calendar": [ "kv-icon", "kv-calendar-day" ], "kv-absolute-time-picker-dropdown": [ "kv-absolute-time-picker" ], "kv-time-picker": [ "kv-absolute-time-picker" ] } }, { "filePath": "src/components/absolute-time-picker-dropdown/absolute-time-picker-dropdown.tsx", "encapsulation": "none", "tag": "kv-absolute-time-picker-dropdown", "readme": "# absolute-time-picker-dropdown\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvAbsoluteTimePickerDropdown } from '@kelvininc/react-ui-components';\n\nexport const KvAbsoluteTimePicker: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t<KvAbsoluteTimePickerDropdown />\n\n\t\t{/*-- With selected date --*/}\n\t\t<KvAbsoluteTimePickerDropdown selectedDates={['2022-08-04', '2022-09-01']} />\n\n\t\t{/*-- With initial date --*/}\n\t\t<KvAbsoluteTimePickerDropdown initialDate=\"2021-12-03\" />\n\n\t\t{/*-- With disabled dates --*/}\n\t\t<KvAbsoluteTimePickerDropdown disabledDates={['2021-12-01', '2021-12-04', '2021-12-05']} />\n\n\t\t{/*-- With min and max --*/}\n\t\t<KvAbsoluteTimePickerDropdown minDate=\"2021-12-04\" maxDate=\"2023-02-12\" />\n\t</>\n);\n```\n" }, "props": [ { "name": "calendarInputMaxDate", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "calendar-input-max-date", "reflectToAttr": false, "docs": "(optional) calendar maximum date to be navigated in timestamp", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "calendarInputMinDate", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "calendar-input-min-date", "reflectToAttr": false, "docs": "(optional) calendar minimum date to be navigated in timestamp", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "(optional) If `true` the dropdown is disabled. Default: `false`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabledDates", "type": "string[]", "complexType": { "original": "string[]", "resolved": "string[]", "references": {} }, "mutable": false, "attr": "disabled-dates", "reflectToAttr": false, "docs": "(optional) Disabled dates", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "dropdownPositionOptions", "type": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }", "complexType": { "original": "Partial<ComputePositionConfig>", "resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }", "references": { "Partial": { "location": "global", "id": "global::Partial" }, "ComputePositionConfig": { "location": "import", "path": "@floating-ui/dom", "id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig" } } }, "mutable": false, "attr": "dropdown-position-options", "reflectToAttr": false, "docs": "(optional) Dropdown positioning config", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS", "values": [ { "type": "{ strategy?: Strategy; placement?: Placement; middleware?: (false" }, { "type": "{ name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "headerTitle", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "header-title", "reflectToAttr": false, "docs": "(optional) Title displayed on top of the component", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "initialDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "initial-date", "reflectToAttr": false, "docs": "(optional) Initial Date", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputConfig", "type": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string | number; min?: string | number; step?: string | number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string | string[]; value?: string | number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial<ITextField>", "resolved": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string | number; min?: string | number; step?: string | number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string | string[]; value?: string | number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "references": { "Partial": { "location": "global", "id": "global::Partial" }, "ITextField": { "location": "import", "path": "../text-field/text-field.types", "id": "src/components/text-field/text-field.types.ts::ITextField" } } }, "mutable": false, "attr": "input-config", "reflectToAttr": false, "docs": "(optional) dropdown input config", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string" }, { "type": "number; min?: string" }, { "type": "number; step?: string" }, { "type": "number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string" }, { "type": "string[]; value?: string" }, { "type": "number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "mode", "type": "EAbsoluteTimePickerMode.Range | EAbsoluteTimePickerMode.Single", "complexType": { "original": "EAbsoluteTimePickerMode", "resolved": "EAbsoluteTimePickerMode.Range | EAbsoluteTimePickerMode.Single", "references": { "EAbsoluteTimePickerMode": { "location": "import", "path": "../absolute-time-picker/absolute-time-picker.types", "id": "src/components/absolute-time-picker/absolute-time-picker.types.ts::EAbsoluteTimePickerMode" } } }, "mutable": false, "attr": "mode", "reflectToAttr": false, "docs": "(optional) Defines if the calendar is in single date or range mode", "docsTags": [ { "name": "inheritdoc" } ], "default": "EAbsoluteTimePickerMode.Single", "values": [ { "type": "EAbsoluteTimePickerMode.Range" }, { "type": "EAbsoluteTimePickerMode.Single" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedDates", "type": "[] | [number, number] | [number]", "complexType": { "original": "SelectedTimestamp", "resolved": "[] | [number, number] | [number]", "references": { "SelectedTimestamp": { "location": "import", "path": "../../types", "id": "src/types.ts::SelectedTimestamp" } } }, "mutable": false, "attr": "selected-dates", "reflectToAttr": false, "docs": "(optional) Selected dates", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "[]" }, { "type": "[number, number]" }, { "type": "[number]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "timezone", "type": "{ name: string; offset: number; }", "complexType": { "original": "ITimePickerTimezone", "resolved": "{ name: string; offset: number; }", "references": { "ITimePickerTimezone": { "location": "import", "path": "../../types", "id": "src/types.ts::ITimePickerTimezone" } } }, "mutable": false, "attr": "timezone", "reflectToAttr": false, "docs": "(Optional) Timezone of the selected dates", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ name: string; offset: number; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "timezones", "type": "ITimezoneOffset[]", "complexType": { "original": "ITimezoneOffset[]", "resolved": "ITimezoneOffset[]", "references": { "ITimezoneOffset": { "location": "import", "path": "../../types", "id": "src/types.ts::ITimezoneOffset" } } }, "mutable": false, "attr": "timezones", "reflectToAttr": false, "docs": "(optional) Available Timezones", "docsTags": [ { "name": "inheritdoc" } ], "default": "buildTimezoneByOffset(getTimezonesNames())", "values": [ { "type": "ITimezoneOffset[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipPosition", "type": "ETooltipPosition.Bottom | ETooltipPosition.BottomEnd | ETooltipPosition.BottomStart | ETooltipPosition.Left | ETooltipPosition.LeftEnd | ETooltipPosition.LeftStart | ETooltipPosition.Right | ETooltipPosition.RightEnd | ETooltipPosition.RightStart | ETooltipPosition.Top | ETooltipPosition.TopEnd | ETooltipPosition.TopStart", "complexType": { "original": "ETooltipPosition", "resolved": "ETooltipPosition.Bottom | ETooltipPosition.BottomEnd | ETooltipPosition.BottomStart | ETooltipPosition.Left | ETooltipPosition.LeftEnd | ETooltipPosition.LeftStart | ETooltipPosition.Right | ETooltipPosition.RightEnd | ETooltipPosition.RightStart | ETooltipPosition.Top | ETooltipPosition.TopEnd | ETooltipPosition.TopStart", "references": { "ETooltipPosition": { "location": "import", "path": "../../types", "id": "src/types.ts::ETooltipPosition" } } }, "mutable": false, "attr": "tooltip-position", "reflectToAttr": false, "docs": "(optional) Positioning of the tooltip", "docsTags": [ { "name": "inheritdoc" } ], "default": "ETooltipPosition.BottomStart", "values": [ { "type": "ETooltipPosition.Bottom" }, { "type": "ETooltipPosition.BottomEnd" }, { "type": "ETooltipPosition.BottomStart" }, { "type": "ETooltipPosition.Left" }, { "type": "ETooltipPosition.LeftEnd" }, { "type": "ETooltipPosition.LeftStart" }, { "type": "ETooltipPosition.Right" }, { "type": "ETooltipPosition.RightEnd" }, { "type": "ETooltipPosition.RightStart" }, { "type": "ETooltipPosition.Top" }, { "type": "ETooltipPosition.TopEnd" }, { "type": "ETooltipPosition.TopStart" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "cancelClicked", "detail": "CustomEvent<MouseEvent>", "bubbles": true, "complexType": { "original": "CustomEvent<MouseEvent>", "resolved": "CustomEvent<MouseEvent>", "references": { "CustomEvent": { "location": "global", "id": "global::CustomEvent" }, "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Cancel button clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "dropdownStateChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Dropdown open state change", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectedDatesChange", "detail": "[number, number] | [number]", "bubbles": true, "complexType": { "original": "[number] | [number, number]", "resolved": "[number, number] | [number]", "references": {} }, "cancelable": true, "composed": true, "docs": "Selected dates change", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-dropdown", "kv-absolute-time-picker", "kv-action-button-text" ], "dependencyGraph": { "kv-absolute-time-picker-dropdown": [ "kv-dropdown", "kv-absolute-time-picker", "kv-action-button-text" ], "kv-dropdown": [ "kv-dropdown-base", "kv-text-field" ], "kv-dropdown-base": [ "kv-portal" ], "kv-text-field": [ "kv-tooltip", "kv-form-label", "kv-icon", "kv-dirty-dot", "kv-badge", "kv-form-help-text" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ], "kv-dirty-dot": [ "kv-icon" ], "kv-form-help-text": [ "kv-icon" ], "kv-absolute-time-picker": [ "kv-icon", "kv-date-time-input", "kv-calendar" ], "kv-date-time-input": [ "kv-form-label", "kv-icon", "kv-form-help-text" ], "kv-calendar": [ "kv-icon", "kv-calendar-day" ], "kv-action-button-text": [ "kv-action-button", "kv-icon" ] } }, { "filePath": "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.tsx", "encapsulation": "none", "tag": "kv-absolute-time-picker-dropdown-input", "readme": "# kv-absolute-time-picker-dropdown-input\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvAbsoluteTimePickerDropdownInput } from '@kelvininc/react-ui-components';\n\nexport const KvAbsoluteTimePickerDropdownInput: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t<KvAbsoluteTimePickerDropdownInput />\n\n\t\t{/*-- With selected date --*/}\n\t\t<KvAbsoluteTimePickerDropdownInput selectedTime={[1681319856833, 1681406272018]} />\n\n\t\t{/*-- With initial date --*/}\n\t\t<KvAbsoluteTimePickerDropdownInput initialDate={1681319856833} />\n\t</>\n);\n```\n" }, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "(optional) Defines if the inputs for inserting the dates are disabled.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "initialDate", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "initial-date", "reflectToAttr": false, "docs": "(optional) Initial date displayed on the calendars", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isDropdownOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "is-dropdown-open", "reflectToAttr": false, "docs": "(optional) Determines if the dropdown is open", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minimumFromInputDate", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "minimum-from-input-date", "reflectToAttr": false, "docs": "(optional) calendar from input minimum date", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minimumSingleInputDate", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "minimum-single-input-date", "reflectToAttr": false, "docs": "(optional) calendar single input minimum date", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minimumToInputDate", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "minimum-to-input-date", "reflectToAttr": false, "docs": "(optional) calendar to input minimum date", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "mode", "type": "EAbsoluteTimePickerMode.Range | EAbsoluteTimePickerMode.Single", "complexType": { "original": "EAbsoluteTimePickerMode", "resolved": "EAbsoluteTimePickerMode.Range | EAbsoluteTimePickerMode.Single", "references": { "EAbsoluteTimePickerMode": { "location": "import", "path": "../../types", "id": "src/types.ts::EAbsoluteTimePickerMode" } } }, "mutable": false, "attr": "mode", "reflectToAttr": false, "docs": "(optional) Mode of the input: single, range", "docsTags": [ { "name": "inheritdoc" } ], "default": "EAbsoluteTimePickerMode.Range", "values": [ { "type": "EAbsoluteTimePickerMode.Range" }, { "type": "EAbsoluteTimePickerMode.Single" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedTime", "type": "[] | [number, number] | [number]", "complexType": { "original": "SelectedTime | SelectedTimeState", "resolved": "[] | [number, number] | [number]", "references": { "SelectedTime": { "location": "import", "path": "./absolute-time-picker-dropdown-input.types", "id": "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts::SelectedTime" }, "SelectedTimeState": { "location": "import", "path": "./absolute-time-picker-dropdown-input.types", "id": "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts::SelectedTimeState" } } }, "mutable": false, "attr": "selected-time", "reflectToAttr": false, "docs": "(optional) Selected time in timestamp", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "[]" }, { "type": "[number, number]" }, { "type": "[number]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "timezone", "type": "{ name: string; offset: number; }", "complexType": { "original": "ITimePickerTimezone", "resolved": "{ name: string; offset: number; }", "references": { "ITimePickerTimezone": { "location": "import", "path": "../../types", "id": "src/types.ts::ITimePickerTimezone" } } }, "mutable": false, "attr": "timezone", "reflectToAttr": false, "docs": "(optional) Timezone of the provided timestamp", "docsTags": [ { "name": "inheritdoc" } ], "default": "getDefaultTimezoneSettings()", "values": [ { "type": "{ name: string; offset: number; }" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "dropdownStateChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Dropdown open state change", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectedTimeChange", "detail": "[number, number] | [number]", "bubbles": true, "complexType": { "original": "SelectedTime", "resolved": "[number, number] | [number]", "references": { "SelectedTime": { "location": "import", "path": "./absolute-time-picker-dropdown-input.types", "id": "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts::SelectedTime" } } }, "cancelable": true, "composed": true, "docs": "Selected time change", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-dropdown-base", "kv-date-time-input", "kv-calendar" ], "dependencyGraph": { "kv-absolute-time-picker-dropdown-input": [ "kv-dropdown-base", "kv-date-time-input", "kv-calendar" ], "kv-dropdown-base": [ "kv-portal" ], "kv-date-time-input": [ "kv-form-label", "kv-icon", "kv-form-help-text" ], "kv-form-help-text": [ "kv-icon" ], "kv-calendar": [ "kv-icon", "kv-calendar-day" ] } }, { "filePath": "src/components/action-button/action-button.tsx", "encapsulation": "shadow", "tag": "kv-action-button", "readme": "# _<kv-action-button>_\n", "docs": "", "docsTags": [ { "name": "part", "text": "button - The action button." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvActionButton } from '@kelvininc/react-ui-components';\n\nexport const SwitchButtonExample: React.FC = () => (\n\t<>\n\t\t{/*-- Primary --*/}\n\t\t<KvActionButton type={EActionButtonType.Primary}>Primary Button</KvActionButton>\n\n\t\t{/*--Secondary --*/}\n\t\t<KvActionButton type={EActionButtonType.Secondary}>Secondary Button</KvActionButton>\n\n\t\t{/*-- Tertiary --*/}\n\t\t<KvActionButton type={EActionButtonType.Tertiary}>Tertiary Button</KvActionButton>\n\n\t\t{/*-- Tertiary --*/}\n\t\t<KvActionButton type={EActionButtonType.Ghost}>Ghost Button</KvActionButton>\n\n\t\t{/*-- Disabled --*/}\n\t\t<KvActionButton disabled type={EActionButtonType.Primary}>\n\t\t\tDisabled Button\n\t\t</KvActionButton>\n\t</>\n);\n```\n" }, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "active", "reflectToAttr": true, "docs": "(optional) If `true` the button is active", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "(optional) If `true` the button is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "(optional) If `true` the button is of type loading", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "EComponentSize.Large | EComponentSize.Small", "complexType": { "original": "EComponentSize", "resolved": "EComponentSize.Large | EComponentSize.Small", "references": { "EComponentSize": { "location": "import", "path": "../../utils/types", "id": "src/utils/types/index.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Button's size", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" },