{ "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\n\n\t\t{/*-- With selected date --*/}\n\t\t\n\n\t\t{/*-- With initial date --*/}\n\t\t\n\n\t\t{/*-- With disabled dates --*/}\n\t\t\n\n\t\t{/*-- With min and max --*/}\n\t\t\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\n\n\t\t{/*-- With selected date --*/}\n\t\t\n\n\t\t{/*-- With initial date --*/}\n\t\t\n\n\t\t{/*-- With disabled dates --*/}\n\t\t\n\n\t\t{/*-- With min and max --*/}\n\t\t\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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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; })[]; 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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial", "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; 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; 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", "bubbles": true, "complexType": { "original": "CustomEvent", "resolved": "CustomEvent", "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\n\n\t\t{/*-- With selected date --*/}\n\t\t\n\n\t\t{/*-- With initial date --*/}\n\t\t\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": "# __\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\tPrimary Button\n\n\t\t{/*--Secondary --*/}\n\t\tSecondary Button\n\n\t\t{/*-- Tertiary --*/}\n\t\tTertiary Button\n\n\t\t{/*-- Tertiary --*/}\n\t\tGhost Button\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\t\t\tDisabled Button\n\t\t\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" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "complexType": { "original": "EActionButtonType", "resolved": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "references": { "EActionButtonType": { "location": "import", "path": "./action-button.types", "id": "src/components/action-button/action-button.types.ts::EActionButtonType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(optional) Button's type", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EActionButtonType.Danger" }, { "type": "EActionButtonType.Ghost" }, { "type": "EActionButtonType.Primary" }, { "type": "EActionButtonType.Secondary" }, { "type": "EActionButtonType.Tertiary" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "blurButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is blur", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "focusButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is focused", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--background-color-active-danger", "annotation": "prop", "docs": "Background color when state is active and theme is danger." }, { "name": "--background-color-active-primary", "annotation": "prop", "docs": "Background color when state is active and theme is primary." }, { "name": "--background-color-active-secondary", "annotation": "prop", "docs": "Background color when state is active and theme is secondary." }, { "name": "--background-color-active-tertiary", "annotation": "prop", "docs": "Background color when state is active and theme is tertiary." }, { "name": "--background-color-default-danger", "annotation": "prop", "docs": "Background color when state is default and theme is danger." }, { "name": "--background-color-default-primary", "annotation": "prop", "docs": "Background color when state is default and theme is primary." }, { "name": "--background-color-default-secondary", "annotation": "prop", "docs": "Background color when state is default and theme is secondary." }, { "name": "--background-color-default-tertiary", "annotation": "prop", "docs": "Background color when state is default and theme is tertiary." }, { "name": "--background-color-disabled-danger", "annotation": "prop", "docs": "Background color when state is disabled and theme is danger." }, { "name": "--background-color-disabled-primary", "annotation": "prop", "docs": "Background color when state is disabled and theme is primary." }, { "name": "--background-color-disabled-secondary", "annotation": "prop", "docs": "Background color when state is disabled and theme is secondary." }, { "name": "--background-color-disabled-tertiary", "annotation": "prop", "docs": "Background color when state is disabled and theme is tertiary." }, { "name": "--background-color-focus-danger", "annotation": "prop", "docs": "Background color when state is focus and theme is danger." }, { "name": "--background-color-focus-primary", "annotation": "prop", "docs": "Background color when state is focus and theme is primary." }, { "name": "--background-color-focus-secondary", "annotation": "prop", "docs": "Background color when state is focus and theme is secondary." }, { "name": "--background-color-focus-tertiary", "annotation": "prop", "docs": "Background color when state is focus and theme is tertiary." }, { "name": "--background-color-hover-danger", "annotation": "prop", "docs": "Background color when state is hover and theme is danger." }, { "name": "--background-color-hover-primary", "annotation": "prop", "docs": "Background color when state is hover and theme is primary." }, { "name": "--background-color-hover-secondary", "annotation": "prop", "docs": "Background color when state is hover and theme is secondary." }, { "name": "--background-color-hover-tertiary", "annotation": "prop", "docs": "Background color when state is hover and theme is tertiary." }, { "name": "--border-color-active-danger", "annotation": "prop", "docs": "Border color when state is active and theme is danger." }, { "name": "--border-color-active-primary", "annotation": "prop", "docs": "Border color when state is active and theme is primary." }, { "name": "--border-color-active-secondary", "annotation": "prop", "docs": "Border color when state is active and theme is secondary." }, { "name": "--border-color-active-tertiary", "annotation": "prop", "docs": "Border color when state is active and theme is tertiary." }, { "name": "--border-color-default-danger", "annotation": "prop", "docs": "Border color when state is default and theme is danger." }, { "name": "--border-color-default-primary", "annotation": "prop", "docs": "Border color when state is default and theme is primary." }, { "name": "--border-color-default-secondary", "annotation": "prop", "docs": "Border color when state is default and theme is secondary." }, { "name": "--border-color-default-tertiary", "annotation": "prop", "docs": "Border color when state is default and theme is tertiary." }, { "name": "--border-color-disabled-danger", "annotation": "prop", "docs": "Border color when state is disabled and theme is danger." }, { "name": "--border-color-disabled-primary", "annotation": "prop", "docs": "Border color when state is disabled and theme is primary." }, { "name": "--border-color-disabled-secondary", "annotation": "prop", "docs": "Border color when state is disabled and theme is secondary." }, { "name": "--border-color-disabled-tertiary", "annotation": "prop", "docs": "Border color when state is disabled and theme is tertiary." }, { "name": "--border-color-focus-danger", "annotation": "prop", "docs": "Border color when state is focus and theme is danger." }, { "name": "--border-color-focus-primary", "annotation": "prop", "docs": "Border color when state is focus and theme is primary." }, { "name": "--border-color-focus-secondary", "annotation": "prop", "docs": "Border color when state is focus and theme is secondary." }, { "name": "--border-color-focus-tertiary", "annotation": "prop", "docs": "Border color when state is focus and theme is tertiary." }, { "name": "--border-color-hover-danger", "annotation": "prop", "docs": "Border color when state is hover and theme is danger." }, { "name": "--border-color-hover-primary", "annotation": "prop", "docs": "Border color when state is hover and theme is primary." }, { "name": "--border-color-hover-secondary", "annotation": "prop", "docs": "Border color when state is hover and theme is secondary." }, { "name": "--border-color-hover-tertiary", "annotation": "prop", "docs": "Border color when state is hover and theme is tertiary." }, { "name": "--button-height-large", "annotation": "prop", "docs": "Button's height when size large." }, { "name": "--button-height-small", "annotation": "prop", "docs": "Button's height when size small." }, { "name": "--button-padding-x-large", "annotation": "prop", "docs": "Button's horizontal padding when size is large." }, { "name": "--button-padding-x-small", "annotation": "prop", "docs": "Button's horizontal padding when size is small." }, { "name": "--text-color-active-danger", "annotation": "prop", "docs": "Text color when state is active and theme is danger." }, { "name": "--text-color-active-primary", "annotation": "prop", "docs": "Text color when state is active and theme is primary." }, { "name": "--text-color-active-secondary", "annotation": "prop", "docs": "Text color when state is active and theme is secondary." }, { "name": "--text-color-active-tertiary", "annotation": "prop", "docs": "Text color when state is active and theme is tertiary." }, { "name": "--text-color-default-danger", "annotation": "prop", "docs": "Text color when state is default and theme is danger." }, { "name": "--text-color-default-primary", "annotation": "prop", "docs": "Text color when state is default and theme is primary." }, { "name": "--text-color-default-secondary", "annotation": "prop", "docs": "Text color when state is default and theme is secondary." }, { "name": "--text-color-default-tertiary", "annotation": "prop", "docs": "Text color when state is default and theme is tertiary." }, { "name": "--text-color-disabled-danger", "annotation": "prop", "docs": "Text color when state is disabled and theme is danger." }, { "name": "--text-color-disabled-primary", "annotation": "prop", "docs": "Text color when state is disabled and theme is primary." }, { "name": "--text-color-disabled-secondary", "annotation": "prop", "docs": "Text color when state is disabled and theme is secondary." }, { "name": "--text-color-disabled-tertiary", "annotation": "prop", "docs": "Text color when state is disabled and theme is tertiary." }, { "name": "--text-color-focus-danger", "annotation": "prop", "docs": "Text color when state is focus and theme is danger." }, { "name": "--text-color-focus-primary", "annotation": "prop", "docs": "Text color when state is focus and theme is primary." }, { "name": "--text-color-focus-secondary", "annotation": "prop", "docs": "Text color when state is focus and theme is secondary." }, { "name": "--text-color-focus-tertiary", "annotation": "prop", "docs": "Text color when state is focus and theme is tertiary." }, { "name": "--text-color-hover-danger", "annotation": "prop", "docs": "Text color when state is hover and theme is danger." }, { "name": "--text-color-hover-primary", "annotation": "prop", "docs": "Text color when state is hover and theme is primary." }, { "name": "--text-color-hover-secondary", "annotation": "prop", "docs": "Text color when state is hover and theme is secondary." }, { "name": "--text-color-hover-tertiary", "annotation": "prop", "docs": "Text color when state is hover and theme is tertiary." } ], "slots": [], "parts": [ { "name": "button", "docs": "The action button." } ], "dependents": [ "kv-action-button-icon", "kv-action-button-split", "kv-action-button-text" ], "dependencies": [], "dependencyGraph": { "kv-action-button-icon": [ "kv-action-button" ], "kv-action-button-split": [ "kv-action-button" ], "kv-action-button-text": [ "kv-action-button" ] } }, { "filePath": "src/components/action-button-icon/action-button-icon.tsx", "encapsulation": "shadow", "tag": "kv-action-button-icon", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvActionButtonIcon, EIconName } from '@kelvininc/react-ui-components';\n\nexport const SwitchButtonExample: React.FC = () => (\n\t<>\n\t\t{/*-- Primary --*/}\n\t\t\n\n\t\t{/*--Secondary --*/}\n\t\t\n\n\t\t{/*-- Tertiary --*/}\n\t\t\n\n\t\t{/*-- Ghost --*/}\n\t\t\n\n\t\t{/*-- Danger --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- Badge --*/}\n\t\t\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": "badgeLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "badge-label", "reflectToAttr": true, "docs": "(optional) Defines button's badge label. If set, an badge will be displayed in the end of action icon button.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "badgeState", "type": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning", "complexType": { "original": "EBadgeState", "resolved": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning", "references": { "EBadgeState": { "location": "import", "path": "../badge/badge.types", "id": "src/components/badge/badge.types.ts::EBadgeState" } } }, "mutable": false, "attr": "badge-state", "reflectToAttr": true, "docs": "(optional) Defines button's badge type.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EBadgeState.Error" }, { "type": "EBadgeState.Info" }, { "type": "EBadgeState.None" }, { "type": "EBadgeState.Success" }, { "type": "EBadgeState.Warning" } ], "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 button is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(required) Button's icon symbol name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": false, "required": true, "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.Small", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "complexType": { "original": "EActionButtonType", "resolved": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "references": { "EActionButtonType": { "location": "import", "path": "../action-button/action-button.types", "id": "src/components/action-button/action-button.types.ts::EActionButtonType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(required) Button's type", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EActionButtonType.Danger" }, { "type": "EActionButtonType.Ghost" }, { "type": "EActionButtonType.Primary" }, { "type": "EActionButtonType.Secondary" }, { "type": "EActionButtonType.Tertiary" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "blurButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is blur", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "focusButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is focused", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--button-icon-large-height", "annotation": "prop", "docs": "Button's icon large height." }, { "name": "--button-icon-large-width", "annotation": "prop", "docs": "Button's icon large width." }, { "name": "--button-icon-small-height", "annotation": "prop", "docs": "Button's icon small height." }, { "name": "--button-icon-small-width", "annotation": "prop", "docs": "Button's icon small width." }, { "name": "--button-size-large", "annotation": "prop", "docs": "Button's height and width size when size is large." }, { "name": "--button-size-small", "annotation": "prop", "docs": "Button's height and width size when size is small." } ], "slots": [], "parts": [], "dependents": [ "kv-inline-editable-field", "kv-select-create-option", "kv-select-option" ], "dependencies": [ "kv-action-button", "kv-icon", "kv-badge" ], "dependencyGraph": { "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-inline-editable-field": [ "kv-action-button-icon" ], "kv-select-create-option": [ "kv-action-button-icon" ], "kv-select-option": [ "kv-action-button-icon" ] } }, { "filePath": "src/components/action-button-split/action-button-split.tsx", "encapsulation": "shadow", "tag": "kv-action-button-split", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvActionButtonText } from '@kelvininc/react-ui-components';\n\nexport const SwitchButtonExample: React.FC = () => (\n\t<>\n\t\t{/*-- Primary --*/}\n\t\t\n\n\t\t{/*--Secondary --*/}\n\t\t\n\n\t\t{/*-- Tertiary --*/}\n\t\t\n\n\t\t{/*-- Ghost --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\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": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) Button's left icon symbol name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "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" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "splitIcon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "split-icon", "reflectToAttr": true, "docs": "(required) Right button icon symbol name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(required) (required) Button's text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "type", "type": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "complexType": { "original": "EActionButtonType", "resolved": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "references": { "EActionButtonType": { "location": "import", "path": "../action-button/action-button.types", "id": "src/components/action-button/action-button.types.ts::EActionButtonType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(optional) Button's type", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EActionButtonType.Danger" }, { "type": "EActionButtonType.Ghost" }, { "type": "EActionButtonType.Primary" }, { "type": "EActionButtonType.Secondary" }, { "type": "EActionButtonType.Tertiary" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "blurLeftButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when left button is blur", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "blurRightButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when right button is blur", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickLeftButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when left button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickRightButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when right button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "focusLeftButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when left button is focused", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "focusRightButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when right button is focused", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--button-split-height-large", "annotation": "prop", "docs": "Split button height when size is large." }, { "name": "--button-split-height-small", "annotation": "prop", "docs": "Split button height when size is size." }, { "name": "--button-split-icon-height", "annotation": "prop", "docs": "Split button icon height." }, { "name": "--button-split-icon-width", "annotation": "prop", "docs": "Split button icon width." }, { "name": "--button-split-padding-x-large", "annotation": "prop", "docs": "Split button horizontal padding when size is large." }, { "name": "--button-split-padding-x-small", "annotation": "prop", "docs": "Split button horizontal padding when size is size." } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-action-button-text", "kv-action-button", "kv-icon" ], "dependencyGraph": { "kv-action-button-split": [ "kv-action-button-text", "kv-action-button", "kv-icon" ], "kv-action-button-text": [ "kv-action-button", "kv-icon" ] } }, { "filePath": "src/components/action-button-text/action-button-text.tsx", "encapsulation": "shadow", "tag": "kv-action-button-text", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "button-text - The text button." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvActionButtonText, EActionButtonType, EIconName } from '@kelvininc/react-ui-components';\n\nexport const SwitchButtonExample: React.FC = () => (\n\t<>\n\t\t{/*-- Primary --*/}\n\t\t\n\n\t\t{/*--Secondary --*/}\n\t\t\n\n\t\t{/*-- Tertiary --*/}\n\t\t\n\n\t\t{/*-- Ghost --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\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": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) Button's left icon symbol name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "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" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(required) (required) Button's text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "type", "type": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "complexType": { "original": "EActionButtonType", "resolved": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary", "references": { "EActionButtonType": { "location": "import", "path": "../action-button/action-button.types", "id": "src/components/action-button/action-button.types.ts::EActionButtonType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(optional) Button's type", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EActionButtonType.Danger" }, { "type": "EActionButtonType.Ghost" }, { "type": "EActionButtonType.Primary" }, { "type": "EActionButtonType.Secondary" }, { "type": "EActionButtonType.Tertiary" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "blurButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is blur", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "focusButton", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when action button is focused", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--button-icon-height", "annotation": "prop", "docs": "Button's icon height." }, { "name": "--button-icon-width", "annotation": "prop", "docs": "Button's icon width." } ], "slots": [], "parts": [ { "name": "button-text", "docs": "The text button." } ], "dependents": [ "kv-absolute-time-picker-dropdown", "kv-action-button-split", "kv-time-picker", "kv-wizard-footer" ], "dependencies": [ "kv-action-button", "kv-icon" ], "dependencyGraph": { "kv-action-button-text": [ "kv-action-button", "kv-icon" ], "kv-absolute-time-picker-dropdown": [ "kv-action-button-text" ], "kv-action-button-split": [ "kv-action-button-text" ], "kv-time-picker": [ "kv-action-button-text" ], "kv-wizard-footer": [ "kv-action-button-text" ] } }, { "filePath": "src/components/illustrations/kv-agree/kv-agree.tsx", "encapsulation": "shadow", "tag": "kv-agree", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/alert/alert.tsx", "encapsulation": "shadow", "tag": "kv-alert", "readme": "# __\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "container - The alert container." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvAlert, IAlertConfig, EAlertType, EComponentSize } from '@kelvininc/react-ui-components';\n\nexport const AlertExample: React.FC = () => (\n\t<>\n\t\t{/** Default info alert with required props */}\n\t\t\n\n\t\t{/** Error state */}\n\t\t\n\n\t\t{/** Success state */}\n\t\t\n\n\t\t{/** Warning state */}\n\t\t\n\n\t\t{/** With description */}\n\t\t\n\n\t\t{/** Hiding icon */}\n\t\t\n\n\t\t{/** Small size */}\n\t\t\n\t\n)\n\n```\n" }, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) Defines the description text to show", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) Defines the label (title) text to show", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "showIcon", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-icon", "reflectToAttr": true, "docs": "(optional) Defines if the icon should be shown, defaults to `true`", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Defines the size of the component, defaults to EComponentType.Large", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "EAlertType.Error | EAlertType.Info | EAlertType.Success | EAlertType.Warning", "complexType": { "original": "EAlertType", "resolved": "EAlertType.Error | EAlertType.Info | EAlertType.Success | EAlertType.Warning", "references": { "EAlertType": { "location": "import", "path": "./alert.types", "id": "src/components/alert/alert.types.ts::EAlertType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(required) Defines the type of alert to show, possible values are defined in `EAlertType`", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EAlertType.Error" }, { "type": "EAlertType.Info" }, { "type": "EAlertType.Success" }, { "type": "EAlertType.Warning" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "container", "docs": "The alert container." } ], "dependents": [], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-alert": [ "kv-icon" ] } }, { "filePath": "src/components/badge/badge.tsx", "encapsulation": "shadow", "tag": "kv-badge", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "badge - The badge." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvBadge, EBadgeState } from '@kelvininc/react-ui-components';\n\nexport const BadgeExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\tBadge\n\n\t\t{/*-- Info --*/}\n\t\tInfo Badge\n\n\t\t{/*-- Warning --*/}\n\t\tWarning Badge\n\n\t\t{/*-- Error --*/}\n\t\tError Badge\n\n\t\t{/*-- Success --*/}\n\t\tSuccess Badge\n\tx\n);\n```\n" }, "props": [ { "name": "state", "type": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning", "complexType": { "original": "EBadgeState", "resolved": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning", "references": { "EBadgeState": { "location": "import", "path": "./badge.types", "id": "src/components/badge/badge.types.ts::EBadgeState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(optional) Defines the badge state.", "docsTags": [], "default": "EBadgeState.None", "values": [ { "type": "EBadgeState.Error" }, { "type": "EBadgeState.Info" }, { "type": "EBadgeState.None" }, { "type": "EBadgeState.Success" }, { "type": "EBadgeState.Warning" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--badge-background-color-error", "annotation": "prop", "docs": "Badge's background color when state is error.", "mode": "light" }, { "name": "--badge-background-color-error", "annotation": "prop", "docs": "Badge's background color when state is error.", "mode": "night" }, { "name": "--badge-background-color-info", "annotation": "prop", "docs": "Badge's background color when state is info.", "mode": "light" }, { "name": "--badge-background-color-info", "annotation": "prop", "docs": "Badge's background color when state is info.", "mode": "night" }, { "name": "--badge-background-color-none", "annotation": "prop", "docs": "Badge's background color when state is none.", "mode": "light" }, { "name": "--badge-background-color-none", "annotation": "prop", "docs": "Badge's background color when state is none.", "mode": "night" }, { "name": "--badge-background-color-success", "annotation": "prop", "docs": "Badge's background color when state is success.", "mode": "light" }, { "name": "--badge-background-color-success", "annotation": "prop", "docs": "Badge's background color when state is success.", "mode": "night" }, { "name": "--badge-background-color-warning", "annotation": "prop", "docs": "Badge's background color when state is warning.", "mode": "light" }, { "name": "--badge-background-color-warning", "annotation": "prop", "docs": "Badge's background color when state is warning.", "mode": "night" }, { "name": "--badge-height", "annotation": "prop", "docs": "Badge's height.", "mode": "light" }, { "name": "--badge-height", "annotation": "prop", "docs": "Badge's height.", "mode": "night" }, { "name": "--badge-max-width", "annotation": "prop", "docs": "Badge's maximum width.", "mode": "light" }, { "name": "--badge-max-width", "annotation": "prop", "docs": "Badge's maximum width.", "mode": "night" }, { "name": "--badge-min-width", "annotation": "prop", "docs": "Badge's minimum width.", "mode": "light" }, { "name": "--badge-min-width", "annotation": "prop", "docs": "Badge's minimum width.", "mode": "night" }, { "name": "--badge-text-color-error", "annotation": "prop", "docs": "Badge's text color when state is error.", "mode": "light" }, { "name": "--badge-text-color-error", "annotation": "prop", "docs": "Badge's text color when state is error.", "mode": "night" }, { "name": "--badge-text-color-info", "annotation": "prop", "docs": "Badge's text color when state is info.", "mode": "light" }, { "name": "--badge-text-color-info", "annotation": "prop", "docs": "Badge's text color when state is info.", "mode": "night" }, { "name": "--badge-text-color-none", "annotation": "prop", "docs": "Badge's text color when state is none.", "mode": "light" }, { "name": "--badge-text-color-none", "annotation": "prop", "docs": "Badge's text color when state is none.", "mode": "night" }, { "name": "--badge-text-color-success", "annotation": "prop", "docs": "Badge's text color when state is success.", "mode": "light" }, { "name": "--badge-text-color-success", "annotation": "prop", "docs": "Badge's text color when state is success.", "mode": "night" }, { "name": "--badge-text-color-warning", "annotation": "prop", "docs": "Badge's text color when state is warning.", "mode": "light" }, { "name": "--badge-text-color-warning", "annotation": "prop", "docs": "Badge's text color when state is warning.", "mode": "night" }, { "name": "--badge-warning-text-color", "annotation": "prop", "docs": "Badge's text color when state is warning.", "mode": "light" }, { "name": "--badge-warning-text-color", "annotation": "prop", "docs": "Badge's text color when state is warning.", "mode": "night" }, { "name": "--badge-width", "annotation": "prop", "docs": "Badge's width.", "mode": "light" }, { "name": "--badge-width", "annotation": "prop", "docs": "Badge's width.", "mode": "night" } ], "slots": [], "parts": [ { "name": "badge", "docs": "The badge." } ], "dependents": [ "kv-action-button-icon", "kv-text-field", "kv-tree-item" ], "dependencies": [], "dependencyGraph": { "kv-action-button-icon": [ "kv-badge" ], "kv-text-field": [ "kv-badge" ], "kv-tree-item": [ "kv-badge" ] } }, { "filePath": "src/components/illustrations/kv-box-build/kv-box-build.tsx", "encapsulation": "shadow", "tag": "kv-box-build", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/breadcrumb/breadcrumb.tsx", "encapsulation": "shadow", "tag": "kv-breadcrumb", "readme": "# **\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "item - The breadcrumb item." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvBreadcrumb } from '@kelvininc/react-ui-components';\n\nexport const KvBreadcrumbExample: React.FC = (props) => (\n <>\n {/*-- With items --*/}\n \n \n);\n```" }, "props": [ { "name": "items", "type": "IBreadcrumbItem[]", "complexType": { "original": "IBreadcrumbItem[]", "resolved": "IBreadcrumbItem[]", "references": { "IBreadcrumbItem": { "location": "import", "path": "../breadcrumb-item/breadcrumb-item.types", "id": "src/components/breadcrumb-item/breadcrumb-item.types.ts::IBreadcrumbItem" } } }, "mutable": false, "attr": "items", "reflectToAttr": false, "docs": "(required) List of breadcrumbs", "docsTags": [], "default": "[]", "values": [ { "type": "IBreadcrumbItem[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "breadcrumbItemClick", "detail": "IBreadcrumbItem", "bubbles": true, "complexType": { "original": "IBreadcrumbItem", "resolved": "IBreadcrumbItem", "references": { "IBreadcrumbItem": { "location": "import", "path": "../breadcrumb-item/breadcrumb-item.types", "id": "src/components/breadcrumb-item/breadcrumb-item.types.ts::IBreadcrumbItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the breadcrumb", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "item", "docs": "The breadcrumb item." } ], "dependents": [], "dependencies": [ "kv-breadcrumb-list", "kv-breadcrumb-item" ], "dependencyGraph": { "kv-breadcrumb": [ "kv-breadcrumb-list", "kv-breadcrumb-item" ] } }, { "filePath": "src/components/breadcrumb-item/breadcrumb-item.tsx", "encapsulation": "shadow", "tag": "kv-breadcrumb-item", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvBreadcrumbItem } from '@kelvininc/react-ui-components';\nexport const KvBreadcrumbItemExample: React.FC = () => (\n\t<>\n\t\t{/*-- With all properties (only label is mandatory) --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "active", "reflectToAttr": true, "docs": "(optional) Sets this breadcrumb styling to be the active one (usually the last one)", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) The text to display on the breadcrumb", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "breadcrumbItemClick", "detail": "IBreadcrumbItem", "bubbles": true, "complexType": { "original": "IBreadcrumbItem", "resolved": "IBreadcrumbItem", "references": { "IBreadcrumbItem": { "location": "import", "path": "./breadcrumb-item.types", "id": "src/components/breadcrumb-item/breadcrumb-item.types.ts::IBreadcrumbItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the breadcrumb", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--breadcrumb-item-active-color", "annotation": "prop", "docs": "Breadcrumb's item active color." }, { "name": "--breadcrumb-item-default-color", "annotation": "prop", "docs": "Breadcrumb's item default color." }, { "name": "--breadcrumb-item-hover-color", "annotation": "prop", "docs": "Breadcrumb's item hover color." } ], "slots": [], "parts": [], "dependents": [ "kv-breadcrumb" ], "dependencies": [], "dependencyGraph": { "kv-breadcrumb": [ "kv-breadcrumb-item" ] } }, { "filePath": "src/components/breadcrumb-list/breadcrumb-list.tsx", "encapsulation": "shadow", "tag": "kv-breadcrumb-list", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "breadcrumb-list - The breadcrumb list element." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvBreadcrumbList } from '@kelvininc/react-ui-components';\n\nexport const KvBreadcrumbListExample: React.FC = () => (\n\t<>\n\t\t\n\t\t\t\n\t\t\n\t\n);\n```\n" }, "props": [], "methods": [], "events": [ { "event": "breadcrumbItemClick", "detail": "IBreadcrumbItem", "bubbles": true, "complexType": { "original": "IBreadcrumbItem", "resolved": "IBreadcrumbItem", "references": { "IBreadcrumbItem": { "location": "import", "path": "../breadcrumb-item/breadcrumb-item.types", "id": "src/components/breadcrumb-item/breadcrumb-item.types.ts::IBreadcrumbItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the breadcrumb", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--breadcrumb-seperator-color", "annotation": "prop", "docs": "Breadcrumb's seperator color." }, { "name": "--breadcrumb-seperator-content", "annotation": "prop", "docs": "Breadcrumb's seperator content." } ], "slots": [], "parts": [ { "name": "breadcrumb-list", "docs": "The breadcrumb list element." } ], "dependents": [ "kv-breadcrumb" ], "dependencies": [], "dependencyGraph": { "kv-breadcrumb": [ "kv-breadcrumb-list" ] } }, { "filePath": "src/components/calendar/calendar.tsx", "encapsulation": "shadow", "tag": "kv-calendar", "readme": "# kv-calendar\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvCalendar } from '@kelvininc/react-ui-components';\n\nexport const KvCalendarExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- With initial date --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "disableHoveringStyling", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disable-hovering-styling", "reflectToAttr": false, "docs": "(optional) Disables the hovering styling when the dates are being selected, and when start or end date is not defined", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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": "(options) The disabled dates array", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayNextMonthArrow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "display-next-month-arrow", "reflectToAttr": false, "docs": "(optional) Enables the next month click icon", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayPreviousMonthArrow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "display-previous-month-arrow", "reflectToAttr": false, "docs": "(optional) Enables the previous month click icon", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hoveredDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "hovered-date", "reflectToAttr": false, "docs": "(optional) Defines if a date is hovered", "docsTags": [ { "name": "inheritdoc" } ], "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": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "(optional) Maximum accepted date. Format: YYYY-MM-DD", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "(optional) Minimum accepted date. Format: YYYY-MM-DD", "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": "../../types", "id": "src/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": "selectedDates", "type": "string[]", "complexType": { "original": "string[]", "resolved": "string[]", "references": {} }, "mutable": false, "attr": "selected-dates", "reflectToAttr": false, "docs": "(optional) The currently selected dates", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "changeMonth", "detail": "IChangeMonthEvent", "bubbles": true, "complexType": { "original": "IChangeMonthEvent", "resolved": "IChangeMonthEvent", "references": { "IChangeMonthEvent": { "location": "import", "path": "./calendar.types", "id": "src/components/calendar/calendar.types.ts::IChangeMonthEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when a month changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "changeYear", "detail": "IChangeYearEvent", "bubbles": true, "complexType": { "original": "IChangeYearEvent", "resolved": "IChangeYearEvent", "references": { "IChangeYearEvent": { "location": "import", "path": "./calendar.types", "id": "src/components/calendar/calendar.types.ts::IChangeYearEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when a year changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickDate", "detail": "IClickDateEvent", "bubbles": true, "complexType": { "original": "IClickDateEvent", "resolved": "IClickDateEvent", "references": { "IClickDateEvent": { "location": "import", "path": "./calendar.types", "id": "src/components/calendar/calendar.types.ts::IClickDateEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when a date is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "hoveredDateChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the hovered date changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--calendar-background-color", "annotation": "prop", "docs": "The calendar background color." }, { "name": "--calendar-horizontal-padding", "annotation": "prop", "docs": "The calendar container horizontal padding." }, { "name": "--calendar-month-title-text-color", "annotation": "prop", "docs": "The calendar month text color." }, { "name": "--calendar-month-weekday-text-color", "annotation": "prop", "docs": "The calendar week day text color." }, { "name": "--calendar-vertical-padding", "annotation": "prop", "docs": "The calendar container vertical padding." }, { "name": "--calendar-width", "annotation": "prop", "docs": "The calendar container width." } ], "slots": [], "parts": [], "dependents": [ "kv-absolute-time-picker", "kv-absolute-time-picker-dropdown-input" ], "dependencies": [ "kv-icon", "kv-calendar-day" ], "dependencyGraph": { "kv-calendar": [ "kv-icon", "kv-calendar-day" ], "kv-absolute-time-picker": [ "kv-calendar" ], "kv-absolute-time-picker-dropdown-input": [ "kv-calendar" ] } }, { "filePath": "src/components/calendar-day/calendar-day.tsx", "encapsulation": "shadow", "tag": "kv-calendar-day", "readme": "# kv-calendar-day\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "day-container - The day button container." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvCalendarDay } from '@kelvininc/react-ui-components';\n\nexport const KvCalendarDayExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Active --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- In Range --*/}\n\t\t\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 day is with active", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "day", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "day", "reflectToAttr": true, "docs": "(required) Calendar day", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "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 day is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inRange", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "in-range", "reflectToAttr": false, "docs": "(optional) If `true`, the day is in range from a start date to the current hovered day", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isBetweenSelectedDates", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-between-selected-dates", "reflectToAttr": false, "docs": "(optional) If `true`, the day is between to selected dates", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isRangeEndDate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-range-end-date", "reflectToAttr": false, "docs": "(optional) If `true` the day is the end of the range", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isRangeStartDate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-range-start-date", "reflectToAttr": false, "docs": "(optional) If `true` the day is the start of the range", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isToday", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-today", "reflectToAttr": false, "docs": "(optional) If `true`, the day is the day of `today`date", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "clickDay", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when day button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "mouseEnterDay", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when day button is mouse enter", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "mouseLeaveDay", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when day button is mouse leave", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "day-container", "docs": "The day button container." } ], "dependents": [ "kv-calendar" ], "dependencies": [], "dependencyGraph": { "kv-calendar": [ "kv-calendar-day" ] } }, { "filePath": "src/components/checkbox/checkbox.tsx", "encapsulation": "shadow", "tag": "kv-checkbox", "readme": "# kv-checkbox\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "icon - The icon element." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvCheckbox } from '@kelvininc/react-ui-components';\n\nexport const RadioExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Checked --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- Inderterminated --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "checked", "reflectToAttr": true, "docs": "(optional) If `true` the checkbox is with checked state. Default: false", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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 checkbox is with disabled state. Default: false", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "indeterminate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "indeterminate", "reflectToAttr": true, "docs": "(optional) If `true` the checkbox is with indeterminate state. Default: false", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "clickCheckbox", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the checkbox checked state changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--checkbox-icon-size", "annotation": "prop", "docs": "Text checkbox height and width. Default: 16px." }, { "name": "--checkbox-size", "annotation": "prop", "docs": "Text checkbox height and width. Default: 16px." } ], "slots": [], "parts": [ { "name": "icon", "docs": "The icon element." } ], "dependents": [ "kv-select-option" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-checkbox": [ "kv-icon" ], "kv-select-option": [ "kv-checkbox" ] } }, { "filePath": "src/components/illustrations/kv-color-circle/kv-color-circle.tsx", "encapsulation": "shadow", "tag": "kv-color-circle", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/copy-to-clipboard/copy-to-clipboard.tsx", "encapsulation": "shadow", "tag": "kv-copy-to-clipboard", "readme": "# __\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "content - The container for the content" }, { "name": "part", "text": "icon - The copy icon" } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvCopyToClipboard } from '@kelvininc/react-ui-components';\n\nexport const KvCopyToClipboardExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- With custom copy tooltip suffix --*/}\n\t\t\n\n\t\t{/*-- With content projection --*/}\n\t\t\n\t\t\tKelvin Website Link\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "copiableText", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "copiable-text", "reflectToAttr": true, "docs": "(required) The text to copy to the clipboard when clicking", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltipConfig", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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": "tooltip-config", "reflectToAttr": false, "docs": "(optional) Object with tooltip position options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_TOOLTIP_CONFIG", "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; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipDelay", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "tooltip-delay", "reflectToAttr": true, "docs": "(optional) Delay to show tooltip in milliseconds.", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_TOOLTIP_DELAY", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipSuffix", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip-suffix", "reflectToAttr": true, "docs": "(optional) The suffix to show on the `Copy` tooltip before copying", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--container-gap", "annotation": "prop", "docs": "The gap between the container's elements" }, { "name": "--container-hover-background-color", "annotation": "prop", "docs": "The container's hover state background color" }, { "name": "--container-padding", "annotation": "prop", "docs": "The container's padding" }, { "name": "--container-width", "annotation": "prop", "docs": "Width of the container" }, { "name": "--icon-background-color-success", "annotation": "prop", "docs": "Success icon background color" }, { "name": "--icon-color-default", "annotation": "prop", "docs": "Start icon color" }, { "name": "--icon-color-success", "annotation": "prop", "docs": "Success icon color" }, { "name": "--icon-size", "annotation": "prop", "docs": "The copy icon size" }, { "name": "--icon-start-opacity", "annotation": "prop", "docs": "Start icon opacity" } ], "slots": [], "parts": [ { "name": "content", "docs": "The container for the content" }, { "name": "icon", "docs": "The copy icon" } ], "dependents": [], "dependencies": [ "kv-tooltip", "kv-icon" ], "dependencyGraph": { "kv-copy-to-clipboard": [ "kv-tooltip", "kv-icon" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ] } }, { "filePath": "src/components/date-time-input/date-time-input.tsx", "encapsulation": "none", "tag": "kv-date-time-input", "readme": "# kv-date-time-input\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvDateTimeInput } from '@kelvininc/react-ui-components';\n\nexport const DateTimeInputExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Labeled --*/}\n\t\t\n\t\n);\n```" }, "props": [ { "name": "dateFormat", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "date-format", "reflectToAttr": true, "docs": "(optional) Format of the provided date", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DATE_FORMAT", "values": [ { "type": "string" } ], "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) Date time input disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "forcedFocus", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "forced-focus", "reflectToAttr": true, "docs": "(optional) Date time focus state", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "helpText", "type": "string | string[]", "complexType": { "original": "string | string[]", "resolved": "string | string[]", "references": {} }, "mutable": false, "attr": "help-text", "reflectToAttr": true, "docs": "(optional) Date time input help text", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "highlighted", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "highlighted", "reflectToAttr": true, "docs": "(optional) Similar to forcedFocus but does not emmit events", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-name", "reflectToAttr": true, "docs": "(optional) Date time input name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputStyleType", "type": "EDateTimeInputTypeStyle.MergedLeft | EDateTimeInputTypeStyle.MergedRight | EDateTimeInputTypeStyle.Separated", "complexType": { "original": "EDateTimeInputTypeStyle", "resolved": "EDateTimeInputTypeStyle.MergedLeft | EDateTimeInputTypeStyle.MergedRight | EDateTimeInputTypeStyle.Separated", "references": { "EDateTimeInputTypeStyle": { "location": "import", "path": "./date-time-input.types", "id": "src/components/date-time-input/date-time-input.types.ts::EDateTimeInputTypeStyle" } } }, "mutable": false, "attr": "input-style-type", "reflectToAttr": true, "docs": "(optional) Specifies if the inputs should be joined together or separated", "docsTags": [ { "name": "inheritdoc" } ], "default": "EDateTimeInputTypeStyle.Separated", "values": [ { "type": "EDateTimeInputTypeStyle.MergedLeft" }, { "type": "EDateTimeInputTypeStyle.MergedRight" }, { "type": "EDateTimeInputTypeStyle.Separated" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Date time input label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "leftIcon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../../types", "id": "src/types.ts::EIconName" } } }, "mutable": false, "attr": "left-icon", "reflectToAttr": true, "docs": "(optional) Input left icon", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(optional) Date time place holder", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_PLACEHOLDER", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "(optional) Date time input required", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "rightIcon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../../types", "id": "src/types.ts::EIconName" } } }, "mutable": false, "attr": "right-icon", "reflectToAttr": true, "docs": "(optional) Input right icon", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "(optional) Sets this tab item to a different styling configuration", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "state", "type": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "complexType": { "original": "EValidationState", "resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "references": { "EValidationState": { "location": "import", "path": "../text-field/text-field.types", "id": "src/components/text-field/text-field.types.ts::EValidationState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(optional) Date time input state", "docsTags": [ { "name": "inheritdoc" } ], "default": "EValidationState.None", "values": [ { "type": "EValidationState.Invalid" }, { "type": "EValidationState.None" }, { "type": "EValidationState.Valid" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "useInputMask", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "use-input-mask", "reflectToAttr": true, "docs": "(optional) Use a input mask when the Date time type is a Datetime (default true)", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(optional) Date time value", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "dateTimeBlur", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when date time lost focus", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "inputFocus", "detail": "FocusEvent", "bubbles": true, "complexType": { "original": "FocusEvent", "resolved": "FocusEvent", "references": { "FocusEvent": { "location": "global", "id": "global::FocusEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the input is foccused", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "rightIconClick", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the right icon is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "textChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when a keyboard input occurred", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-absolute-time-picker", "kv-absolute-time-picker-dropdown-input" ], "dependencies": [ "kv-form-label", "kv-icon", "kv-form-help-text" ], "dependencyGraph": { "kv-date-time-input": [ "kv-form-label", "kv-icon", "kv-form-help-text" ], "kv-form-help-text": [ "kv-icon" ], "kv-absolute-time-picker": [ "kv-date-time-input" ], "kv-absolute-time-picker-dropdown-input": [ "kv-date-time-input" ] } }, { "filePath": "src/components/description-list/description-list.tsx", "encapsulation": "none", "tag": "kv-description-list", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvDescriptionList } from '@kelvininc/react-ui-components';\n\nconst defaultConfig: IDescriptionListItem[] = [\n\t{\n\t\ttitle: 'Name ID',\n\t\tdescription: 'cluster-a-brownie',\n\t\tpopoverInfo: {\n\t\t\ttext: `This name cannot be changed`,\n\t\t\ticon: EIconName.Info\n\t\t}\n\t},\n\t{\n\t\ttitle: 'Kubernetes Version',\n\t\tdescription: '1.20.5'\n\t},\n\t{\n\t\ttitle: 'Kelvin Version',\n\t\tdescription: '4.2.4'\n\t}\n];\n\nconst withTextTooltip: IDescriptionListItem[] = [\n\t{\n\t\ttitle: 'Name ID',\n\t\tdescription: 'cluster-a-brownie',\n\t\tpopoverInfo: {\n\t\t\ttext: `This name cannot be changed`\n\t\t}\n\t},\n\t{\n\t\ttitle: 'Kubernetes Version',\n\t\tdescription: '1.20.5'\n\t},\n\t{\n\t\ttitle: 'Kelvin Version',\n\t\tdescription: '4.2.4'\n\t}\n];\n\nconst withIconTooltip: IDescriptionListItem[] = [\n\t{\n\t\ttitle: 'Name ID',\n\t\tdescription: 'cluster-a-brownie',\n\t\tpopoverInfo: {\n\t\t\ttext: `This name cannot be changed`,\n\t\t\ticon: EIconName.Info\n\t\t}\n\t},\n\t{\n\t\ttitle: 'Kubernetes Version',\n\t\tdescription: '1.20.5'\n\t},\n\t{\n\t\ttitle: 'Kelvin Version',\n\t\tdescription: '4.2.4'\n\t}\n];\n\nexport const KvDescriptionListExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- With text tooltip --*/}\n\t\t\n\n\t\t{/*-- With icon tooltip --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "descriptionTooltipConfig", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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": "description-tooltip-config", "reflectToAttr": false, "docs": "(optional) The config to use on the tooltip that shows hovering the text", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_TEXT_TOOLTIP_CONFIG", "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; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "iconToggletipConfig", "type": "IDescriptionListItemToggletipConfig", "complexType": { "original": "IDescriptionListItemToggletipConfig", "resolved": "IDescriptionListItemToggletipConfig", "references": { "IDescriptionListItemToggletipConfig": { "location": "import", "path": "./description-list.types", "id": "src/components/description-list/description-list.types.ts::IDescriptionListItemToggletipConfig" } } }, "mutable": false, "attr": "icon-toggletip-config", "reflectToAttr": false, "docs": "(optional) The config to use on the icon toggletip", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_ICON_TOGGLETIP_CONFIG", "values": [ { "type": "IDescriptionListItemToggletipConfig" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "items", "type": "IDescriptionListItem[]", "complexType": { "original": "IDescriptionListItem[]", "resolved": "IDescriptionListItem[]", "references": { "IDescriptionListItem": { "location": "import", "path": "./description-list.types", "id": "src/components/description-list/description-list.types.ts::IDescriptionListItem" } } }, "mutable": false, "attr": "items", "reflectToAttr": false, "docs": "(required) The array of items to display in the list", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IDescriptionListItem[]" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-tooltip", "kv-toggle-tip", "kv-icon" ], "dependencyGraph": { "kv-description-list": [ "kv-tooltip", "kv-toggle-tip", "kv-icon" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ], "kv-toggle-tip": [ "kv-portal", "kv-tooltip-text" ] } }, { "filePath": "src/components/dirty-dot/dirty-dot.tsx", "encapsulation": "shadow", "tag": "kv-dirty-dot", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "dot - The dot container." } ], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--dot-background-color", "annotation": "prop", "docs": "DirtyDot's background color." }, { "name": "--dot-height", "annotation": "prop", "docs": "DirtyDot's height." }, { "name": "--dot-width", "annotation": "prop", "docs": "DirtyDot's width." } ], "slots": [], "parts": [ { "name": "dot", "docs": "The dot container." } ], "dependents": [ "kv-select-option", "kv-text-field" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-dirty-dot": [ "kv-icon" ], "kv-select-option": [ "kv-dirty-dot" ], "kv-text-field": [ "kv-dirty-dot" ] } }, { "filePath": "src/components/illustrations/kv-disagree/kv-disagree.tsx", "encapsulation": "shadow", "tag": "kv-disagree", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/dropdown/dropdown.tsx", "encapsulation": "none", "tag": "kv-dropdown", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "javascript": "```html\n\n\t\n\t\t\n\t\t\n\t\t...\n\t\t\n\t\t\n\t\n\n```\n", "react": "```tsx\nimport React from 'react';\nimport { KvDropdown } from '@kelvininc/react-ui-components';\n\nexport const KvDropdownExample: React.FC = () => (\n <>\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t...\n\t\t\t\n\t\t\t\n\t\t\n\t\n \n);\n```\n", "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n@Component({\n tag: 'kv-dropdown-example',\n styleUrl: 'kv-dropdown-example.css',\n shadow: true,\n})\nexport class KvDropdownExample {\n render() {\n return (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t...\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t)\n }\n}\n```\n" }, "props": [ { "name": "actionElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement | null", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "action-element", "reflectToAttr": false, "docs": "(optional) A reference to the dropdown action element", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clickOutsideClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "click-outside-close", "reflectToAttr": true, "docs": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "(optional) If `true` clicking on the action will not open the dropdown list. Default: false", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial", "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; 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) The text field options", "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-open", "reflectToAttr": true, "docs": "(optional) If `true` the list is opened", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "listElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement | null", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "list-element", "reflectToAttr": false, "docs": "(optional) A reference to the dropdown list element", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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": "options", "reflectToAttr": false, "docs": "(optional) The dropdown position config options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DROPDOWN_POSITION_CONFIG", "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; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "zIndex", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "z-index", "reflectToAttr": false, "docs": "(optional) the dropdown list z-index (default: 9004)", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DROPDOWN_Z_INDEX", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "onToggleOpenState", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "onToggleOpenState() => Promise", "parameters": [], "docs": "Toggles the dropdown open state", "docsTags": [] } ], "events": [ { "event": "clickOutside", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when there's a click outside the dropdown's bondaries", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "openStateChange", "detail": "boolean", "bubbles": false, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the dropdown opens state changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-absolute-time-picker-dropdown", "kv-multi-select-dropdown", "kv-single-select-dropdown", "kv-time-picker" ], "dependencies": [ "kv-dropdown-base", "kv-text-field" ], "dependencyGraph": { "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-dropdown": [ "kv-dropdown" ], "kv-multi-select-dropdown": [ "kv-dropdown" ], "kv-single-select-dropdown": [ "kv-dropdown" ], "kv-time-picker": [ "kv-dropdown" ] } }, { "filePath": "src/components/dropdown-base/dropdown-base.tsx", "encapsulation": "none", "tag": "kv-dropdown-base", "readme": "# **\n\n\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "actionElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "action-element", "reflectToAttr": false, "docs": "(optional) A reference to the dropdown action element", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clickOutsideClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "click-outside-close", "reflectToAttr": true, "docs": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-open", "reflectToAttr": true, "docs": "(optional) If `true` the list is opened", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "listElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "list-element", "reflectToAttr": false, "docs": "(optional) A reference to the dropdown list element", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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": "options", "reflectToAttr": false, "docs": "(optional) The dropdown position config options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_POSITION_CONFIG", "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; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "zIndex", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "z-index", "reflectToAttr": false, "docs": "(optional) the dropdown list z-index (default: 9004)", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DROPDOWN_Z_INDEX", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "clickOutside", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when there's a click outside the dropdown's bondaries", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "openStateChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the dropdown opens state changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [ { "event": "mousedown", "target": "window", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-absolute-time-picker-dropdown-input", "kv-dropdown" ], "dependencies": [ "kv-portal" ], "dependencyGraph": { "kv-dropdown-base": [ "kv-portal" ], "kv-absolute-time-picker-dropdown-input": [ "kv-dropdown-base" ], "kv-dropdown": [ "kv-dropdown-base" ] } }, { "filePath": "src/components/illustrations/kv-error-state/kv-error-state.tsx", "encapsulation": "shadow", "tag": "kv-error-state", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-error-state-404/kv-error-state-404.tsx", "encapsulation": "shadow", "tag": "kv-error-state-404", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-asset-placeholder/kv-es-asset-placeholder.tsx", "encapsulation": "shadow", "tag": "kv-es-asset-placeholder", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-checkbox/kv-es-checkbox.tsx", "encapsulation": "shadow", "tag": "kv-es-checkbox", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-component-placeholder/kv-es-component-placeholder.tsx", "encapsulation": "shadow", "tag": "kv-es-component-placeholder", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-error-404/kv-es-error-404.tsx", "encapsulation": "shadow", "tag": "kv-es-error-404", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-error-503/kv-es-error-503.tsx", "encapsulation": "shadow", "tag": "kv-es-error-503", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-kelvin-logotype/kv-es-kelvin-logotype.tsx", "encapsulation": "shadow", "tag": "kv-es-kelvin-logotype", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-lock/kv-es-lock.tsx", "encapsulation": "shadow", "tag": "kv-es-lock", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-metadata/kv-es-metadata.tsx", "encapsulation": "shadow", "tag": "kv-es-metadata", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-part-placeholder/kv-es-part-placeholder.tsx", "encapsulation": "shadow", "tag": "kv-es-part-placeholder", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-section-cell/kv-es-section-cell.tsx", "encapsulation": "shadow", "tag": "kv-es-section-cell", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-section-somethingwentwrong/kv-es-section-somethingwentwrong.tsx", "encapsulation": "shadow", "tag": "kv-es-section-somethingwentwrong", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-section-thresholds/kv-es-section-thresholds.tsx", "encapsulation": "shadow", "tag": "kv-es-section-thresholds", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-sensor-placeholder/kv-es-sensor-placeholder.tsx", "encapsulation": "shadow", "tag": "kv-es-sensor-placeholder", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-slowy/kv-es-slowy.tsx", "encapsulation": "shadow", "tag": "kv-es-slowy", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-somethingwentwrong/kv-es-somethingwentwrong.tsx", "encapsulation": "shadow", "tag": "kv-es-somethingwentwrong", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-table-build/kv-es-table-build.tsx", "encapsulation": "shadow", "tag": "kv-es-table-build", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-table-empty/kv-es-table-empty.tsx", "encapsulation": "shadow", "tag": "kv-es-table-empty", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-es-table-search/kv-es-table-search.tsx", "encapsulation": "shadow", "tag": "kv-es-table-search", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-feedback-form/kv-feedback-form.tsx", "encapsulation": "shadow", "tag": "kv-feedback-form", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/form-help-text/form-help-text.tsx", "encapsulation": "shadow", "tag": "kv-form-help-text", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvFormHelpText } from '@kelvininc/react-ui-components';\n\nexport const FormHelpTextExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Default with array of strings --*/}\n\t\t\n\n\t\t{/*-- Default with error state --*/}\n\t\t\n\t\n);\n\n```" }, "props": [ { "name": "helpText", "type": "string | string[]", "complexType": { "original": "string | string[]", "resolved": "string | string[]", "references": {} }, "mutable": false, "attr": "help-text", "reflectToAttr": true, "docs": "(optional) Form field help text", "docsTags": [], "default": "[]", "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "state", "type": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "complexType": { "original": "EValidationState", "resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "references": { "EValidationState": { "location": "import", "path": "../../types", "id": "src/types.ts::EValidationState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(optional) Form field state", "docsTags": [], "default": "EValidationState.None", "values": [ { "type": "EValidationState.Invalid" }, { "type": "EValidationState.None" }, { "type": "EValidationState.Valid" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--help-text-default-color", "annotation": "prop", "docs": "Help Text color when state is default." }, { "name": "--help-text-error-color", "annotation": "prop", "docs": "Help Text color when state is invalid." } ], "slots": [], "parts": [], "dependents": [ "kv-date-time-input", "kv-text-field" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-form-help-text": [ "kv-icon" ], "kv-date-time-input": [ "kv-form-help-text" ], "kv-text-field": [ "kv-form-help-text" ] } }, { "filePath": "src/components/form-label/form-label.tsx", "encapsulation": "shadow", "tag": "kv-form-label", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvFormLabel } from '@kelvininc/react-ui-components';\n\nexport const FormLabelExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Labeled --*/}\n\t\t\n\n\t\t{/*-- Labeled & Required --*/}\n\t\t\n\t\n);\n\n```\n" }, "props": [ { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) Form field label", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "(optional) Form field required", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--label-color", "annotation": "prop", "docs": "Label Text color.", "mode": "light" }, { "name": "--label-color", "annotation": "prop", "docs": "Label Text color.", "mode": "night" } ], "slots": [], "parts": [], "dependents": [ "kv-date-time-input", "kv-radio-list", "kv-text-field" ], "dependencies": [], "dependencyGraph": { "kv-date-time-input": [ "kv-form-label" ], "kv-radio-list": [ "kv-form-label" ], "kv-text-field": [ "kv-form-label" ] } }, { "filePath": "src/components/icon/icon.tsx", "encapsulation": "shadow", "tag": "kv-icon", "readme": "# kv-icon\n", "docs": "", "docsTags": [ { "name": "part", "text": "icon - The icon container." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvIcon } from '@kelvininc/react-ui-components';\n\nexport const SvgIconExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Custom CSS --*/}\n\t\t\n\n\t\t{/*-- Custom Color --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "customColor", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "custom-color", "reflectToAttr": true, "docs": "(optional) Icon custom color", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "./icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "(required) Icon symbol name", "docsTags": [], "values": [ { "type": "EIconName" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--icon-color", "annotation": "prop", "docs": "Color of the icon" }, { "name": "--icon-height", "annotation": "prop", "docs": "Height of icon" }, { "name": "--icon-rotation", "annotation": "prop", "docs": "Rotation of icon" }, { "name": "--icon-width", "annotation": "prop", "docs": "Width of icon" } ], "slots": [], "parts": [ { "name": "icon", "docs": "The icon container." } ], "dependents": [ "kv-absolute-time-picker", "kv-action-button-icon", "kv-action-button-split", "kv-action-button-text", "kv-alert", "kv-calendar", "kv-checkbox", "kv-copy-to-clipboard", "kv-date-time-input", "kv-description-list", "kv-dirty-dot", "kv-form-help-text", "kv-info-label", "kv-input-wrapper", "kv-modal", "kv-select-option", "kv-select-shortcuts-label", "kv-step-indicator", "kv-switch-button", "kv-tab-item", "kv-tag-alarm", "kv-tag-status", "kv-text-area", "kv-text-field", "kv-toaster", "kv-toggle-button", "kv-tree-item", "kv-wizard-header" ], "dependencies": [], "dependencyGraph": { "kv-absolute-time-picker": [ "kv-icon" ], "kv-action-button-icon": [ "kv-icon" ], "kv-action-button-split": [ "kv-icon" ], "kv-action-button-text": [ "kv-icon" ], "kv-alert": [ "kv-icon" ], "kv-calendar": [ "kv-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-copy-to-clipboard": [ "kv-icon" ], "kv-date-time-input": [ "kv-icon" ], "kv-description-list": [ "kv-icon" ], "kv-dirty-dot": [ "kv-icon" ], "kv-form-help-text": [ "kv-icon" ], "kv-info-label": [ "kv-icon" ], "kv-input-wrapper": [ "kv-icon" ], "kv-modal": [ "kv-icon" ], "kv-select-option": [ "kv-icon" ], "kv-select-shortcuts-label": [ "kv-icon" ], "kv-step-indicator": [ "kv-icon" ], "kv-switch-button": [ "kv-icon" ], "kv-tab-item": [ "kv-icon" ], "kv-tag-alarm": [ "kv-icon" ], "kv-tag-status": [ "kv-icon" ], "kv-text-area": [ "kv-icon" ], "kv-text-field": [ "kv-icon" ], "kv-toaster": [ "kv-icon" ], "kv-toggle-button": [ "kv-icon" ], "kv-tree-item": [ "kv-icon" ], "kv-wizard-header": [ "kv-icon" ] } }, { "filePath": "src/components/illustration/illustration.tsx", "encapsulation": "shadow", "tag": "kv-illustration", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvIllustration, EIllustrationName } from '@kelvininc/react-ui-components';\n\nexport const SvgIconExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Custom CSS --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "EIllustrationName", "complexType": { "original": "EIllustrationName", "resolved": "EIllustrationName", "references": { "EIllustrationName": { "location": "import", "path": "./illustration.types", "id": "src/components/illustration/illustration.types.ts::EIllustrationName" } } }, "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "(required) Illustration symbol name", "docsTags": [], "values": [ { "type": "EIllustrationName" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--illustration-color", "annotation": "prop", "docs": "Base color used in the illustration" }, { "name": "--illustration-color-dark-35", "annotation": "prop", "docs": "35% darker version of the illustration base color" }, { "name": "--illustration-color-dark-55", "annotation": "prop", "docs": "55% darker version of the illustration base color" }, { "name": "--illustration-color-light-80", "annotation": "prop", "docs": "80% lighter version of the illustration base color" }, { "name": "--illustration-color-light-90", "annotation": "prop", "docs": "90% lighter version of the illustration base color" }, { "name": "--illustration-height", "annotation": "prop", "docs": "Height of illustration" }, { "name": "--illustration-success-color", "annotation": "prop", "docs": "Success color used in the illustration" }, { "name": "--illustration-width", "annotation": "prop", "docs": "Width of illustration" } ], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [ "kv-illustration-message" ], "dependencies": [], "dependencyGraph": { "kv-illustration-message": [ "kv-illustration" ] } }, { "filePath": "src/components/illustration-message/illustration-message.tsx", "encapsulation": "shadow", "tag": "kv-illustration-message", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." }, { "name": "part", "text": "header - The header container." }, { "name": "part", "text": "description - The description container." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvIllustrationMessage } from '@kelvininc/react-ui-components';\n\nexport const IllustrationMessageExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) The message description to be displayed below the title.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "header", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "header", "reflectToAttr": true, "docs": "(required) The message header to be displayed below the illustration.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "illustration", "type": "EIllustrationName", "complexType": { "original": "EIllustrationName", "resolved": "EIllustrationName", "references": { "EIllustrationName": { "location": "import", "path": "../../types", "id": "src/types.ts::EIllustrationName" } } }, "mutable": false, "attr": "illustration", "reflectToAttr": true, "docs": "(required) The illustration that will be presented.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIllustrationName" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--description-color", "annotation": "prop", "docs": "The illustration description text color." }, { "name": "--header-color", "annotation": "prop", "docs": "The illustration header text color." }, { "name": "--image-height", "annotation": "prop", "docs": "The illustration image height." }, { "name": "--image-width", "annotation": "prop", "docs": "The illustration image width." } ], "slots": [], "parts": [ { "name": "description", "docs": "The description container." }, { "name": "header", "docs": "The header container." }, { "name": "illustration", "docs": "The illustration container." } ], "dependents": [ "kv-select-multi-options" ], "dependencies": [ "kv-illustration" ], "dependencyGraph": { "kv-illustration-message": [ "kv-illustration" ], "kv-select-multi-options": [ "kv-illustration-message" ] } }, { "filePath": "src/components/illustrations/kv-impact/kv-impact.tsx", "encapsulation": "shadow", "tag": "kv-impact", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-import/kv-import.tsx", "encapsulation": "shadow", "tag": "kv-import", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/info-label/info-label.tsx", "encapsulation": "shadow", "tag": "kv-info-label", "readme": "# **\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "title - Label title." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvInfoLabel, KvTagLetter } from '@kelvininc/react-ui-components';\n\nexport const InfoLabelExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Read more and read less --*/}\n\t\t\n\n\t\t{/*-- Copy values --*/}\n\t\t\n\n\t\t{/*-- With component --*/}\n\t\t\n\t\t\t\n\t\t\n\t\n);\n\n```\n" }, "props": [ { "name": "copyValue", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "copy-value", "reflectToAttr": true, "docs": "(optional) Info label copy value", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) Info label description", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "descriptionCollapsedText", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description-collapsed-text", "reflectToAttr": true, "docs": "(optional) Info label description collapse text", "docsTags": [], "default": "DEFAULT_DESCRIPTION_COLLAPSED_TEXT", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "descriptionHeight", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "description-height", "reflectToAttr": true, "docs": "(optional) Info label description height", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "descriptionOpenedText", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description-opened-text", "reflectToAttr": true, "docs": "(optional) Info label description opened text", "docsTags": [], "default": "DEFAULT_DESCRIPTION_OPENED_TEXT", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelTitle", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-title", "reflectToAttr": true, "docs": "(optional) Info label title", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showTextShadow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-text-shadow", "reflectToAttr": true, "docs": "(optional) Show text with a shadow", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--description-fade-height", "annotation": "prop", "docs": "Description fade height.", "mode": "light" }, { "name": "--description-fade-height", "annotation": "prop", "docs": "Description fade height.", "mode": "night" }, { "name": "--description-fade-shadow", "annotation": "prop", "docs": "Description fade shadow.", "mode": "light" }, { "name": "--description-fade-shadow", "annotation": "prop", "docs": "Description fade shadow.", "mode": "night" }, { "name": "--expanded-buttom-color", "annotation": "prop", "docs": "Expandded buttom's color.", "mode": "light" }, { "name": "--expanded-buttom-color", "annotation": "prop", "docs": "Expandded buttom's color.", "mode": "night" }, { "name": "--text-color-description", "annotation": "prop", "docs": "Info label's description color.", "mode": "light" }, { "name": "--text-color-description", "annotation": "prop", "docs": "Info label's description color.", "mode": "night" }, { "name": "--text-color-title", "annotation": "prop", "docs": "Info label's title color.", "mode": "light" }, { "name": "--text-color-title", "annotation": "prop", "docs": "Info label's title color.", "mode": "night" } ], "slots": [], "parts": [ { "name": "title", "docs": "Label title." } ], "dependents": [], "dependencies": [ "kv-tooltip", "kv-icon" ], "dependencyGraph": { "kv-info-label": [ "kv-tooltip", "kv-icon" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ] } }, { "filePath": "src/components/inline-editable-field/inline-editable-field.tsx", "encapsulation": "none", "tag": "kv-inline-editable-field", "readme": "# kv-inline-editable-field\n\n\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "Indicates whether the editable field is disabled.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxLength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "max-length", "reflectToAttr": true, "docs": "The maximum length of the editable field.", "docsTags": [], "default": "DEFAULT_MAX_LENGTH", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "The value of the field.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "resetContent", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "resetContent() => Promise", "parameters": [], "docs": "Resets the content of the editable field.", "docsTags": [] } ], "events": [ { "event": "contentBlured", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the content is blurred.", "docsTags": [] }, { "event": "contentEdited", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the content is edited.", "docsTags": [] }, { "event": "contentFocused", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the content is focused.", "docsTags": [] } ], "listeners": [ { "event": "mouseenter", "capture": false, "passive": true }, { "event": "mouseleave", "capture": false, "passive": true }, { "event": "keydown", "target": "document", "capture": false, "passive": false } ], "styles": [ { "name": "--margin-left-right", "annotation": "prop", "docs": "Margin left and right of the editable container." }, { "name": "--margin-top-bottom", "annotation": "prop", "docs": "Margin top and bottom of the editable container." } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-action-button-icon" ], "dependencyGraph": { "kv-inline-editable-field": [ "kv-action-button-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ] } }, { "filePath": "src/components/input-wrapper/input-wrapper.tsx", "encapsulation": "shadow", "tag": "kv-input-wrapper", "readme": "# kv-time-picker-timezone\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvInputWrapper, KvTextField } from '@kelvininc/react-ui-components';\n\nexport const KvInputWrapperExample: React.FC = () => (\n <>\n\t\n\t\t\n\t\n \n);\n```" }, "props": [ { "name": "contentHidden", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "content-hidden", "reflectToAttr": false, "docs": "Defines if the content can be seen", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "contentVisible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "content-visible", "reflectToAttr": false, "docs": "Defines the state of the component", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "Icon that is displayed when the component is hovered and is in default state", "docsTags": [ { "name": "inheritdoc" } ], "default": "EIconName.Edit", "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "Label that is shown when the component is in Default state", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "contentClick", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Event emitted when the component is clicked to display the wrapped content", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-relative-time-picker" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-input-wrapper": [ "kv-icon" ], "kv-relative-time-picker": [ "kv-input-wrapper" ] } }, { "filePath": "src/components/link/link.tsx", "encapsulation": "shadow", "tag": "kv-link", "readme": "# **\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "container - The link's container" } ], "usage": { "javascript": "```html\n\n\n\n\n\n\n\n\n```\n", "react": "```tsx\nimport React from 'react';\nimport { KvLink } from '@kelvininc/react-ui-components';\n\nexport const KvLinkExample: React.FC = () => (\n\t<>\n\t\t{/*-- Labeled --*/}\n\t\t\n\n\t\t{/*-- Labeled with subtitle --*/}\n\t\t\n\n\t\t{/*-- Labeled with subtitle and link --*/}\n\t\t\n\t\n);\n```\n", "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'kv-link-example',\n styleUrl: 'kv-link-example.css',\n shadow: true,\n})\nexport class SwichButtonExample {\n render() {\n return [\n\t\t// Labeled\n\t\t\n\n\t\t// Labeled with subtitle\n\t\t\n\n\t\t// Labeled with subtitle and link\n\t\t\n ];\n }\n}\n```\n" }, "props": [ { "name": "href", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "href", "reflectToAttr": true, "docs": "(optional) The link to open when clicking on the tag", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) Main component label", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "subtitle", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "subtitle", "reflectToAttr": true, "docs": "(optional) Description for the label", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "target", "type": "EAnchorTarget.BrowserDefault | EAnchorTarget.NewTab | EAnchorTarget.Parent | EAnchorTarget.Top", "complexType": { "original": "EAnchorTarget", "resolved": "EAnchorTarget.BrowserDefault | EAnchorTarget.NewTab | EAnchorTarget.Parent | EAnchorTarget.Top", "references": { "EAnchorTarget": { "location": "import", "path": "../../types", "id": "src/types.ts::EAnchorTarget" } } }, "mutable": false, "attr": "target", "reflectToAttr": true, "docs": "(optional) The link to open when clicking on the tag", "docsTags": [], "values": [ { "type": "EAnchorTarget.BrowserDefault" }, { "type": "EAnchorTarget.NewTab" }, { "type": "EAnchorTarget.Parent" }, { "type": "EAnchorTarget.Top" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "labelClick", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when clicking the label", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "container", "docs": "The link's container" } ], "dependents": [ "kv-radio-list-item" ], "dependencies": [], "dependencyGraph": { "kv-radio-list-item": [ "kv-link" ] } }, { "filePath": "src/components/loader/loader.tsx", "encapsulation": "shadow", "tag": "kv-loader", "readme": "# **\n\n\n", "docs": "", "docsTags": [], "usage": { "javascript": "```html\n\n\n\n\n\n```\n", "react": "```tsx\nimport React from 'react';\n\nimport { KvLoader } from '@kelvininc/react-ui-components';\n\nexport const LoaderExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n\n\t{/*-- Has Overlay --*/}\n\t\n \n);\n\n```\n", "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'loader-example',\n styleUrl: 'loader-example.css',\n shadow: true,\n})\nexport class LoaderExample {\n render() {\n return [\n \t// Default\n\t\t\n\n\t\t// Has Overlay\n\t\t\n ];\n }\n}\n```\n" }, "props": [ { "name": "hasOverlay", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-overlay", "reflectToAttr": true, "docs": "(optional) If `true` the loader is overlay", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "isLoading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-loading", "reflectToAttr": true, "docs": "(optional) If `true` the loader is enabled", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--loader-background-color", "annotation": "prop", "docs": "Loader background" }, { "name": "--loader-overlay-color", "annotation": "prop", "docs": "Overlay color" }, { "name": "--loader-overlay-opacity", "annotation": "prop", "docs": "Overlay opacity" }, { "name": "--loader-spinner-color", "annotation": "prop", "docs": "Loader color" }, { "name": "--loader-z-index", "annotation": "prop", "docs": "Loader z-index position." } ], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/modal/modal.tsx", "encapsulation": "shadow", "tag": "kv-modal", "readme": "# **\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "topbar - The modal's topbar section." }, { "name": "part", "text": "content - The modal's content section." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { ModalOverlay, useModal } from '@kelvininc/react-ui-components';\nimport type { ModalOverlayProps } from '@kelvininc/react-ui-components';\n\nexport const ModalOverlayExample: React.FC = (args: ModalOverlayProps) => {\n\tconst modalController = useModal(args.isOpen);\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n```\n" }, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "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) Defines the modal title label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showCloseButton", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-close-button", "reflectToAttr": false, "docs": "(optional) Defines if the modal shows the close button", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showOverlay", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-overlay", "reflectToAttr": false, "docs": "(optional) Defines if the modal has an overlay background", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "clickClose", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the close button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickOverlay", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the overlay container is clicked", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--modal-background-color", "annotation": "prop", "docs": "The modal's background color.", "mode": "light" }, { "name": "--modal-background-color", "annotation": "prop", "docs": "The modal's background color.", "mode": "night" }, { "name": "--modal-close-button-height", "annotation": "prop", "docs": "The modal's close button height", "mode": "light" }, { "name": "--modal-close-button-height", "annotation": "prop", "docs": "The modal's close button height", "mode": "night" }, { "name": "--modal-close-button-width", "annotation": "prop", "docs": "The modal's close button width", "mode": "light" }, { "name": "--modal-close-button-width", "annotation": "prop", "docs": "The modal's close button width", "mode": "night" }, { "name": "--modal-height", "annotation": "prop", "docs": "The modal's height in px.", "mode": "light" }, { "name": "--modal-height", "annotation": "prop", "docs": "The modal's height in px.", "mode": "night" }, { "name": "--modal-min-height", "annotation": "prop", "docs": "The modal's minimum height in px.", "mode": "light" }, { "name": "--modal-min-height", "annotation": "prop", "docs": "The modal's minimum height in px.", "mode": "night" }, { "name": "--modal-min-width", "annotation": "prop", "docs": "The modal's minimum width in px.", "mode": "light" }, { "name": "--modal-min-width", "annotation": "prop", "docs": "The modal's minimum width in px.", "mode": "night" }, { "name": "--modal-overlay-color", "annotation": "prop", "docs": "The modal's overlay color.", "mode": "light" }, { "name": "--modal-overlay-color", "annotation": "prop", "docs": "The modal's overlay color.", "mode": "night" }, { "name": "--modal-topbar-height", "annotation": "prop", "docs": "The modal's topbar height in px.", "mode": "light" }, { "name": "--modal-topbar-height", "annotation": "prop", "docs": "The modal's topbar height in px.", "mode": "night" }, { "name": "--modal-topbar-text-color", "annotation": "prop", "docs": "The modal's text topbar color.", "mode": "light" }, { "name": "--modal-topbar-text-color", "annotation": "prop", "docs": "The modal's text topbar color.", "mode": "night" }, { "name": "--modal-width", "annotation": "prop", "docs": "The modal's width in px.", "mode": "light" }, { "name": "--modal-width", "annotation": "prop", "docs": "The modal's width in px.", "mode": "night" }, { "name": "--modal-z-index", "annotation": "prop", "docs": "The modal's z-index", "mode": "light" }, { "name": "--modal-z-index", "annotation": "prop", "docs": "The modal's z-index", "mode": "night" } ], "slots": [], "parts": [ { "name": "content", "docs": "The modal's content section." }, { "name": "topbar", "docs": "The modal's topbar section." } ], "dependents": [], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-modal": [ "kv-icon" ] } }, { "filePath": "src/components/multi-select-dropdown/multi-select-dropdown.tsx", "encapsulation": "none", "tag": "kv-multi-select-dropdown", "readme": "# __\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvMultiSelectDropdown } from '@kelvininc/react-ui-components';\n\nexport const KvMultiSelectDropdownExample: React.FC = (props) => (\n <>\n \n\t\n \n);\n```" }, "props": [ { "name": "actionElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement | null", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "action-element", "reflectToAttr": false, "docs": "(optional) A reference to the dropdown action element", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "autoFocus", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "auto-focus", "reflectToAttr": true, "docs": "(optional) If `false` the search text field is not auto-focused. Default `true`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "badge", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "badge", "reflectToAttr": true, "docs": "(optional) Text to display inside a badge on the right side of the displayed value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clearSelectionLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "clear-selection-label", "reflectToAttr": true, "docs": "(optional) The clear selection action text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clickOutsideClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "click-outside-close", "reflectToAttr": true, "docs": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "counter", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "counter", "reflectToAttr": false, "docs": "(optional) If `true` a selection counter is displayed", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "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", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayPrefix", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "display-prefix", "reflectToAttr": true, "docs": "(optional) The text to display as a prefix to `displayValue`", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayValue", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "display-value", "reflectToAttr": true, "docs": "(optional) The text to display on the dropdown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "dropdownOptions", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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-options", "reflectToAttr": false, "docs": "(optional) The dropdown position config options", "docsTags": [ { "name": "inheritdoc" } ], "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; })[]; platform?: Platform; }" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "errorState", "type": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "complexType": { "original": "EValidationState", "resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "references": { "EValidationState": { "location": "import", "path": "../text-field/text-field.types", "id": "src/components/text-field/text-field.types.ts::EValidationState" } } }, "mutable": false, "attr": "error-state", "reflectToAttr": true, "docs": "(required) The error state for the dropdown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EValidationState.Invalid" }, { "type": "EValidationState.None" }, { "type": "EValidationState.Valid" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "filteredOptions", "type": "{ [x: string]: ISelectMultiOption; }", "complexType": { "original": "ISelectMultiOptions", "resolved": "{ [x: string]: ISelectMultiOption; }", "references": { "ISelectMultiOptions": { "location": "import", "path": "../select-multi-options/select-multi-options.types", "id": "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions" } } }, "mutable": false, "attr": "filtered-options", "reflectToAttr": false, "docs": "(optional) The object with the dropdown options filtered", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [x: string]: ISelectMultiOption; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "helpText", "type": "string | string[]", "complexType": { "original": "string | string[]", "resolved": "string | string[]", "references": {} }, "mutable": false, "attr": "help-text", "reflectToAttr": true, "docs": "(optional) The text to display as help text", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) The icon to display on the dropdown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial", "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; 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) The text field options", "docsTags": [ { "name": "inheritdoc" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputSize", "type": "EComponentSize.Large | EComponentSize.Small", "complexType": { "original": "EComponentSize", "resolved": "EComponentSize.Large | EComponentSize.Small", "references": { "EComponentSize": { "location": "import", "path": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "input-size", "reflectToAttr": true, "docs": "(optional) The size of the input", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) The text to display on the dropdown label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "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 dropdown is loading", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-height", "reflectToAttr": true, "docs": "(optional) The dropdown's max-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-width", "reflectToAttr": true, "docs": "(optional) The dropdown's max-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-height", "reflectToAttr": true, "docs": "(optional) The dropdown's min-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minSearchOptions", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min-search-options", "reflectToAttr": true, "docs": "(optional) The minimum amount of options required to display the search. Defaults to `15`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "MINIMUM_SEARCHABLE_OPTIONS", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-width", "reflectToAttr": true, "docs": "(optional) The dropdown's min-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "noDataAvailableConfig", "type": "IIllustrationMessage", "complexType": { "original": "IIllustrationMessage", "resolved": "IIllustrationMessage", "references": { "IIllustrationMessage": { "location": "import", "path": "../../types", "id": "src/types.ts::IIllustrationMessage" } } }, "mutable": false, "attr": "no-data-available-config", "reflectToAttr": false, "docs": "(optional) The configuration for the \"no data available\" empty state illustration", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IIllustrationMessage" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "noResultsFoundConfig", "type": "IIllustrationMessage", "complexType": { "original": "IIllustrationMessage", "resolved": "IIllustrationMessage", "references": { "IIllustrationMessage": { "location": "import", "path": "../../types", "id": "src/types.ts::IIllustrationMessage" } } }, "mutable": false, "attr": "no-results-found-config", "reflectToAttr": false, "docs": "(optional) The configuration for the \"no results found\" empty state illustration", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IIllustrationMessage" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "type": "{ [x: string]: ISelectMultiOption; }", "complexType": { "original": "ISelectMultiOptions", "resolved": "{ [x: string]: ISelectMultiOption; }", "references": { "ISelectMultiOptions": { "location": "import", "path": "../select-multi-options/select-multi-options.types", "id": "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions" } } }, "mutable": false, "attr": "options", "reflectToAttr": false, "docs": "(optional) The object with the dropdown options", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: ISelectMultiOption; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(required) The text to display as the dropdown placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "(optional) If `true` dropdown requires a value to be selected", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-placeholder", "reflectToAttr": true, "docs": "(optional) The list search text field placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "searchable", "reflectToAttr": true, "docs": "(optional) If `false` the dropdown is not searchable. Default `true`", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectAllLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "select-all-label", "reflectToAttr": false, "docs": "(optional) The selection all action text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "selectedOptions", "type": "{ [x: string]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "selected-options", "reflectToAttr": false, "docs": "(optional) The object with indexed by the dropdown labels and its selected value", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionAll", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-all", "reflectToAttr": false, "docs": "(optional) If `true` the list has an action to select all items", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "selectionClearable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-clearable", "reflectToAttr": true, "docs": "(optional) If `true` dropdown items can be cleared", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "shortcuts", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "shortcuts", "reflectToAttr": true, "docs": "(optional) If `true` the keyboard shortcuts can be used to navigate between the dropdown results. Default `false`", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "zIndex", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "z-index", "reflectToAttr": false, "docs": "(optional) the dropdown list z-index (default: 9004)", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DROPDOWN_Z_INDEX", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "focusSearch", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusSearch() => Promise", "parameters": [], "docs": "Focuses the search text field", "docsTags": [] } ], "events": [ { "event": "clearSelection", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clears the selected items", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickOutside", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when there's a click outside the dropdown's bondaries", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "dismiss", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the 'esc' key is pressed", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "openStateChange", "detail": "boolean", "bubbles": false, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the dropdown open state changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "optionsSelected", "detail": "{ [x: string]: boolean; }", "bubbles": true, "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the selected options change", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "searchChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user interacts with the search text field", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectAll", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the all items", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--dropdown-max-height", "annotation": "prop", "docs": "Dropdown list maximum height." }, { "name": "--dropdown-max-width", "annotation": "prop", "docs": "Dropdown list maximum width." }, { "name": "--dropdown-min-height", "annotation": "prop", "docs": "Dropdown list minimum height." }, { "name": "--dropdown-min-width", "annotation": "prop", "docs": "Dropdown list minimum width." } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-dropdown", "kv-select-multi-options" ], "dependencyGraph": { "kv-multi-select-dropdown": [ "kv-dropdown", "kv-select-multi-options" ], "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-select-multi-options": [ "kv-virtualized-list", "kv-select-option", "kv-select", "kv-tooltip", "kv-illustration-message", "kv-select-create-option", "kv-select-shortcuts-label" ], "kv-select-option": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-select": [ "kv-search" ], "kv-search": [ "kv-text-field" ], "kv-illustration-message": [ "kv-illustration" ], "kv-select-create-option": [ "kv-text-field", "kv-action-button-icon" ], "kv-select-shortcuts-label": [ "kv-icon" ] } }, { "filePath": "src/components/illustrations/kv-no-content-here/kv-no-content-here.tsx", "encapsulation": "shadow", "tag": "kv-no-content-here", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-no-data-available/kv-no-data-available.tsx", "encapsulation": "shadow", "tag": "kv-no-data-available", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-no-matching-results/kv-no-matching-results.tsx", "encapsulation": "shadow", "tag": "kv-no-matching-results", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-no-results-found-dark/kv-no-results-found-dark.tsx", "encapsulation": "shadow", "tag": "kv-no-results-found-dark", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-no-results-found-light/kv-no-results-found-light.tsx", "encapsulation": "shadow", "tag": "kv-no-results-found-light", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/illustrations/kv-party-dance/kv-party-dance.tsx", "encapsulation": "shadow", "tag": "kv-party-dance", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/portal/portal.tsx", "encapsulation": "shadow", "tag": "kv-portal", "readme": "# __\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "animated", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "animated", "reflectToAttr": false, "docs": "(optional) if true portal content will gradually appear (default false)", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "autoUpdate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "auto-update", "reflectToAttr": false, "docs": "(optional) enable position auto update (default true)", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "delay", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "delay", "reflectToAttr": false, "docs": "(optional) Delay to show portal in milliseconds. (default 0)", "docsTags": [ { "name": "inheritdoc" } ], "default": "0", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "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; })[]; platform?: Platform; }", "complexType": { "original": "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; })[]; platform?: Platform; }", "references": { "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": "options", "reflectToAttr": false, "docs": "(optional) options used to compute the portal position", "docsTags": [ { "name": "inheritdoc" } ], "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; })[]; platform?: Platform; }" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "portalId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "portal-id", "reflectToAttr": false, "docs": "(required) The portal id", "docsTags": [ { "name": "inheritdoc" } ], "default": "'kv-portal'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "reference", "type": "HTMLElement", "complexType": { "original": "HTMLElement", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "reference", "reflectToAttr": false, "docs": "(required) The reference element", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "HTMLElement" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "show", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show", "reflectToAttr": false, "docs": "(optional) toggles portal visibility", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "withArrow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "with-arrow", "reflectToAttr": false, "docs": "(optional) if true it will render an arrow pointing to the opening element (default false)", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "zIndex", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "z-index", "reflectToAttr": false, "docs": "(optional) the portal z-index (default: 9004)", "docsTags": [ { "name": "inheritdoc" } ], "default": "PORTAL_Z_INDEX.show", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "elementAppend", "detail": "HTMLElement", "bubbles": true, "complexType": { "original": "HTMLElement", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the element it's appended to the DOM", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--portal-arrow-color", "annotation": "prop", "docs": "arrow color." } ], "slots": [], "parts": [], "dependents": [ "kv-dropdown-base", "kv-toggle-tip", "kv-tooltip" ], "dependencies": [], "dependencyGraph": { "kv-dropdown-base": [ "kv-portal" ], "kv-toggle-tip": [ "kv-portal" ], "kv-tooltip": [ "kv-portal" ] } }, { "filePath": "src/components/radio/radio.tsx", "encapsulation": "shadow", "tag": "kv-radio", "readme": "# **\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvRadio } from '@kelvininc/react-ui-components';\n\nexport const RadioExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Labeled --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- Checked --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "checked", "reflectToAttr": true, "docs": "(optional) Sets the button as checked when initializing", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "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) Sets this button styling to be disabled and disables click events", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Adds a label aside the button", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "(optional) Sets this tab item to a different styling configuration", "docsTags": [], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "checkedChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emits when there's a change in state internally", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": true } ], "styles": [ { "name": "--input-height-large", "annotation": "prop", "docs": "Text Field's large height.", "mode": "light" }, { "name": "--input-height-large", "annotation": "prop", "docs": "Text Field's large height.", "mode": "night" }, { "name": "--input-height-small", "annotation": "prop", "docs": "Text Field's small height.", "mode": "light" }, { "name": "--input-height-small", "annotation": "prop", "docs": "Text Field's small height.", "mode": "night" }, { "name": "--radio-input-checked-color", "annotation": "prop", "docs": "Radio input color when state is checked.", "mode": "light" }, { "name": "--radio-input-checked-color", "annotation": "prop", "docs": "Radio input color when state is checked.", "mode": "night" }, { "name": "--radio-input-default-color", "annotation": "prop", "docs": "Radio input color when state is not checked.", "mode": "light" }, { "name": "--radio-input-default-color", "annotation": "prop", "docs": "Radio input color when state is not checked.", "mode": "night" }, { "name": "--radio-label-text-color", "annotation": "prop", "docs": "Radio label color.", "mode": "light" }, { "name": "--radio-label-text-color", "annotation": "prop", "docs": "Radio label color.", "mode": "night" } ], "slots": [], "parts": [], "dependents": [ "kv-radio-list-item", "kv-toggle-button" ], "dependencies": [], "dependencyGraph": { "kv-radio-list-item": [ "kv-radio" ], "kv-toggle-button": [ "kv-radio" ] } }, { "filePath": "src/components/radio-list/radio-list.tsx", "encapsulation": "shadow", "tag": "kv-radio-list", "readme": "# __\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "items-container - The container for the list items" } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvRadioList } from '@kelvininc/react-ui-components';\n\nconst RadioListExample: React.FC = () => {\n\treturn (\n\t\t<>\n\t\t\t{/* Default */}\n\t\t\t\n\n\t\t\t{/* With label */}\n\t\t\t\n\n\t\t\t{/* With disabled option */}\n\t\t\t\n\n\t\t\t{/* With selected option */}\n\t\t\t\n\t\t\n\t);\n};\n\n```\n" }, "props": [ { "name": "disabledOptions", "type": "{ [x: string]: boolean; [x: number]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; [x: number]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "disabled-options", "reflectToAttr": false, "docs": "(optional) The options to show up as disabled", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [x: string]: boolean; [x: number]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Form field label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "type": "IRadioListItem[]", "complexType": { "original": "IRadioListItem[]", "resolved": "IRadioListItem[]", "references": { "IRadioListItem": { "location": "import", "path": "../radio-list-item/radio-list-item.types", "id": "src/components/radio-list-item/radio-list-item.types.ts::IRadioListItem" } } }, "mutable": false, "attr": "options", "reflectToAttr": false, "docs": "(required) The configuration for the buttons to render", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IRadioListItem[]" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "(optional) Form field required", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedOption", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "selected-option", "reflectToAttr": true, "docs": "(optional) The desired selected option", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "optionSelected", "detail": "number | string", "bubbles": true, "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emits when an option is selected", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "items-container", "docs": "The container for the list items" } ], "dependents": [], "dependencies": [ "kv-form-label", "kv-radio-list-item" ], "dependencyGraph": { "kv-radio-list": [ "kv-form-label", "kv-radio-list-item" ], "kv-radio-list-item": [ "kv-radio", "kv-link" ] } }, { "filePath": "src/components/radio-list-item/radio-list-item.tsx", "encapsulation": "shadow", "tag": "kv-radio-list-item", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\n\nimport React from 'react';\n\nimport { KvRadioListItem } from '@kelvininc/react-ui-components';\n\nexport const RadioListItemExample: React.FC = () => (\n\t{/* Default state */}\n\t\n\n\t{/* Checked state */}\n\t\n\n\t{/* Disabled state */}\n\t\n\n\t{/* With description */}\n\t\n)\n```\n" }, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "checked", "reflectToAttr": true, "docs": "(optional) Defines if this option is checked", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) The description that can contain links in the [text](url) format", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "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) Defines if this option is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) The label to display", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "optionId", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "option-id", "reflectToAttr": true, "docs": "(required) The unique id that serves as a key for this item", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "optionClick", "detail": "number | string", "bubbles": true, "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emits when this option is clicked", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-radio-list" ], "dependencies": [ "kv-radio", "kv-link" ], "dependencyGraph": { "kv-radio-list-item": [ "kv-radio", "kv-link" ], "kv-radio-list": [ "kv-radio-list-item" ] } }, { "filePath": "src/components/range/range.tsx", "encapsulation": "shadow", "tag": "kv-range", "readme": "# _kv-range_\n", "docs": "", "docsTags": [], "usage": { "react": "import React from 'react';\nimport { KvRange } from '@kelvininc/react-ui-components';\n\nexport const KvRangeExample: React.FC = () => (\n <>\n\t\n \n);\n" }, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "(optional) Range input disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": true, "docs": "(optional) Hide value label", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hideMinMaxLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-min-max-label", "reflectToAttr": true, "docs": "(optional) Hide min and max labels", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "max", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "max", "reflectToAttr": true, "docs": "(required) Range maximum value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-label", "reflectToAttr": true, "docs": "(optional) Max label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "min", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min", "reflectToAttr": true, "docs": "(required) Range minimum value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-label", "reflectToAttr": true, "docs": "(optional) Min label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "step", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "step", "reflectToAttr": true, "docs": "(optional) Range value step", "docsTags": [ { "name": "inheritdoc" } ], "default": "1", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(optional) Range value", "docsTags": [ { "name": "inheritdoc" } ], "default": "0", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "valueFormatter", "type": "(value: number) => string", "complexType": { "original": "(value: number) => string", "resolved": "(value: number) => string", "references": {} }, "mutable": false, "attr": "value-formatter", "reflectToAttr": false, "docs": "(optional) Range value formatter", "docsTags": [ { "name": "inheritdoc" } ], "default": "identity", "values": [ { "type": "(value: number) => string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "valueChange", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the value changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--range-height", "annotation": "prop", "docs": "Height of the range slider", "mode": "light" }, { "name": "--range-height", "annotation": "prop", "docs": "Height of the range slider", "mode": "night" }, { "name": "--range-label-color", "annotation": "prop", "docs": "range labels color", "mode": "light" }, { "name": "--range-label-color", "annotation": "prop", "docs": "range labels color", "mode": "night" }, { "name": "--range-margin-top", "annotation": "prop", "docs": "Margin top of the range slider", "mode": "light" }, { "name": "--range-margin-top", "annotation": "prop", "docs": "Margin top of the range slider", "mode": "night" }, { "name": "--range-selector-border-radius", "annotation": "prop", "docs": "Border radius of the range thumb", "mode": "light" }, { "name": "--range-selector-border-radius", "annotation": "prop", "docs": "Border radius of the range thumb", "mode": "night" }, { "name": "--range-selector-radius", "annotation": "prop", "docs": "Radius of the range thumb", "mode": "light" }, { "name": "--range-selector-radius", "annotation": "prop", "docs": "Radius of the range thumb", "mode": "night" }, { "name": "--range-width", "annotation": "prop", "docs": "Width of the range slider", "mode": "light" }, { "name": "--range-width", "annotation": "prop", "docs": "Width of the range slider", "mode": "night" }, { "name": "--select-label-color", "annotation": "prop", "docs": "select labels color", "mode": "light" }, { "name": "--select-label-color", "annotation": "prop", "docs": "select labels color", "mode": "night" }, { "name": "--select-label-disabled-color", "annotation": "prop", "docs": "disabled select labels color", "mode": "light" }, { "name": "--select-label-disabled-color", "annotation": "prop", "docs": "disabled select labels color", "mode": "night" }, { "name": "--slider-background-empty", "annotation": "prop", "docs": "color of the slider when its empty", "mode": "light" }, { "name": "--slider-background-empty", "annotation": "prop", "docs": "color of the slider when its empty", "mode": "night" }, { "name": "--slider-background-filled", "annotation": "prop", "docs": "color of the slider when its full", "mode": "light" }, { "name": "--slider-background-filled", "annotation": "prop", "docs": "color of the slider when its full", "mode": "night" }, { "name": "--slider-background-filled-disabled", "annotation": "prop", "docs": "color of the slider when its disabled and full", "mode": "light" }, { "name": "--slider-background-filled-disabled", "annotation": "prop", "docs": "color of the slider when its disabled and full", "mode": "night" }, { "name": "--thumb-background-color", "annotation": "prop", "docs": "thumb background color", "mode": "light" }, { "name": "--thumb-background-color", "annotation": "prop", "docs": "thumb background color", "mode": "night" }, { "name": "--thumb-border-color", "annotation": "prop", "docs": "thumb border color", "mode": "light" }, { "name": "--thumb-border-color", "annotation": "prop", "docs": "thumb border color", "mode": "night" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/relative-time-picker/relative-time-picker.tsx", "encapsulation": "shadow", "tag": "kv-relative-time-picker", "readme": "# kv-relative-time-picker\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvRelativeTimePicker } from '@kelvininc/react-ui-components';\n\nexport const KvRelativeTimePickerExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- With selected relative time key --*/}\n\t\t\n\n\t\t{/*-- With selected timezone --*/}\n\t\t\n\t\n);\n```" }, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "customIntervalOptionEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "custom-interval-option-enabled", "reflectToAttr": false, "docs": "(optional) Defines if the customize interval select option is available", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disableTimezoneSelection", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disable-timezone-selection", "reflectToAttr": true, "docs": "(optional) Lets the timezone visible but doens't let the user change it", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "type": "IRelativeTimePickerOption[][]", "complexType": { "original": "IRelativeTimePickerOption[][]", "resolved": "IRelativeTimePickerOption[][]", "references": { "IRelativeTimePickerOption": { "location": "import", "path": "./relative-time-picker.types", "id": "src/components/relative-time-picker/relative-time-picker.types.ts::IRelativeTimePickerOption" } } }, "mutable": false, "attr": "options", "reflectToAttr": false, "docs": "(optional) Selectable relative time options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS", "values": [ { "type": "IRelativeTimePickerOption[][]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedTimeKey", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "selected-time-key", "reflectToAttr": true, "docs": "(optional) Selected time range key", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedTimezone", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "selected-timezone", "reflectToAttr": false, "docs": "(optional) Currently selected timezone name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "timezoneContentVisible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "timezone-content-visible", "reflectToAttr": true, "docs": "(optional) Determines if the input wrapper content containing the timezone is visible\nif true, the dropdown will be visible; if false, the content will display the timezone title", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "timezoneSelectionEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "timezone-selection-enabled", "reflectToAttr": false, "docs": "(optional) Defines if the timezone select option is available", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "timezones", "type": "ITimezoneOffset[]", "complexType": { "original": "ITimezoneOffset[]", "resolved": "ITimezoneOffset[]", "references": { "ITimezoneOffset": { "location": "import", "path": "../time-picker/time-picker.types", "id": "src/components/time-picker/time-picker.types.ts::ITimezoneOffset" } } }, "mutable": false, "attr": "timezones", "reflectToAttr": false, "docs": "(optional) List of all selectable timezones", "docsTags": [ { "name": "inheritdoc" } ], "default": "buildTimezoneByOffset(getTimezonesNames())", "values": [ { "type": "ITimezoneOffset[]" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "customizeIntervalClicked", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when customize interval is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectedRelativeTimeChange", "detail": "{ key: string; range: SelectedTimestamp; }", "bubbles": true, "complexType": { "original": "ITimePickerRelativeTime", "resolved": "{ key: string; range: SelectedTimestamp; }", "references": { "ITimePickerRelativeTime": { "location": "import", "path": "./relative-time-picker.types", "id": "src/components/relative-time-picker/relative-time-picker.types.ts::ITimePickerRelativeTime" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the selected time key changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "timezoneChange", "detail": "{ name: string; offset: number; }", "bubbles": true, "complexType": { "original": "ITimePickerTimezone", "resolved": "{ name: string; offset: number; }", "references": { "ITimePickerTimezone": { "location": "import", "path": "./relative-time-picker.types", "id": "src/components/relative-time-picker/relative-time-picker.types.ts::ITimePickerTimezone" } } }, "cancelable": true, "composed": true, "docs": "Emitted when selected timezone changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "timezoneDropdownStateChange", "detail": "boolean", "bubbles": false, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the timezone dropdown open state changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "timezoneInputClicked", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the input wrapper containing the timezone is clicked", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--background-color", "annotation": "prop", "docs": "Background color." } ], "slots": [], "parts": [], "dependents": [ "kv-time-picker" ], "dependencies": [ "kv-time-picker-select-option", "kv-select-option", "kv-input-wrapper", "kv-single-select-dropdown" ], "dependencyGraph": { "kv-relative-time-picker": [ "kv-time-picker-select-option", "kv-select-option", "kv-input-wrapper", "kv-single-select-dropdown" ], "kv-select-option": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-dirty-dot": [ "kv-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-input-wrapper": [ "kv-icon" ], "kv-single-select-dropdown": [ "kv-dropdown", "kv-select-multi-options" ], "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-form-help-text": [ "kv-icon" ], "kv-select-multi-options": [ "kv-virtualized-list", "kv-select-option", "kv-select", "kv-tooltip", "kv-illustration-message", "kv-select-create-option", "kv-select-shortcuts-label" ], "kv-select": [ "kv-search" ], "kv-search": [ "kv-text-field" ], "kv-illustration-message": [ "kv-illustration" ], "kv-select-create-option": [ "kv-text-field", "kv-action-button-icon" ], "kv-select-shortcuts-label": [ "kv-icon" ], "kv-time-picker": [ "kv-relative-time-picker" ] } }, { "filePath": "src/components/search/search.tsx", "encapsulation": "shadow", "tag": "kv-search", "readme": "# kv-search\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvSearch } from '@kelvininc/react-ui-components';\n\nexport const SearchExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- With Placeholder --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "examples", "type": "string[]", "complexType": { "original": "string[]", "resolved": "string[]", "references": {} }, "mutable": false, "attr": "examples", "reflectToAttr": false, "docs": "(optional) Text field example values", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "forcedFocus", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "forced-focus", "reflectToAttr": true, "docs": "(optional) Text field focus state", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "helpText", "type": "string | string[]", "complexType": { "original": "string | string[]", "resolved": "string | string[]", "references": {} }, "mutable": false, "attr": "help-text", "reflectToAttr": true, "docs": "(optional) Text field help text", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputDisabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "input-disabled", "reflectToAttr": true, "docs": "(optional) Text field disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputMaskRegex", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-mask-regex", "reflectToAttr": true, "docs": "(optional) Input mask regex", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-name", "reflectToAttr": true, "docs": "(optional) Text field input name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputReadonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "input-readonly", "reflectToAttr": true, "docs": "(optional) Text field is readonly", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputRequired", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "input-required", "reflectToAttr": true, "docs": "(optional) Text field required", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Text field label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "(optional) Text field loading state", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "max", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "max", "reflectToAttr": true, "docs": "(optional) Text field maximum value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxLength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "max-length", "reflectToAttr": true, "docs": "(optional) Text field maximum number of characters required", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "min", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "min", "reflectToAttr": true, "docs": "(optional) Text field minimum value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minLength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min-length", "reflectToAttr": true, "docs": "(optional) Text field minimum number of characters required", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(optional) Text field place holder", "docsTags": [ { "name": "inheritdoc" } ], "default": "'Search'", "values": [ { "type": "string" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "(optional) Sets this tab item to a different styling configuration", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "state", "type": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "complexType": { "original": "EValidationState", "resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "references": { "EValidationState": { "location": "import", "path": "../text-field/text-field.types", "id": "src/components/text-field/text-field.types.ts::EValidationState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(optional) Text field state", "docsTags": [ { "name": "inheritdoc" } ], "default": "EValidationState.None", "values": [ { "type": "EValidationState.Invalid" }, { "type": "EValidationState.None" }, { "type": "EValidationState.Valid" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "step", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "step", "reflectToAttr": true, "docs": "(optional) Text field interval between legal numbers", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipConfig", "type": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ 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; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }", "complexType": { "original": "Partial", "resolved": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ 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; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }", "references": { "Partial": { "location": "global", "id": "global::Partial" }, "ITooltip": { "location": "import", "path": "../../types", "id": "src/types.ts::ITooltip" } } }, "mutable": false, "attr": "tooltip-config", "reflectToAttr": false, "docs": "(optional) Text field tooltip configuration", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ 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; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "EInputFieldType.Date | EInputFieldType.DateTime | EInputFieldType.Email | EInputFieldType.Number | EInputFieldType.Password | EInputFieldType.Radio | EInputFieldType.Text", "complexType": { "original": "EInputFieldType", "resolved": "EInputFieldType.Date | EInputFieldType.DateTime | EInputFieldType.Email | EInputFieldType.Number | EInputFieldType.Password | EInputFieldType.Radio | EInputFieldType.Text", "references": { "EInputFieldType": { "location": "import", "path": "../text-field/text-field.types", "id": "src/components/text-field/text-field.types.ts::EInputFieldType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(optional) Text field type", "docsTags": [ { "name": "inheritdoc" } ], "default": "EInputFieldType.Text", "values": [ { "type": "EInputFieldType.Date" }, { "type": "EInputFieldType.DateTime" }, { "type": "EInputFieldType.Email" }, { "type": "EInputFieldType.Number" }, { "type": "EInputFieldType.Password" }, { "type": "EInputFieldType.Radio" }, { "type": "EInputFieldType.Text" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "useInputMask", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "use-input-mask", "reflectToAttr": true, "docs": "(optional) Use a input mask when the text field type is number (default true)", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "number | string", "complexType": { "original": "string | number | null", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(optional) Text field value", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "focusInput", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusInput() => Promise", "parameters": [], "docs": "Focus input", "docsTags": [] } ], "events": [ { "event": "clickResetButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the reset button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "fieldClick", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emmited when there's a click on this element", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "rightActionClick", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the right icon is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "textChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when a keyboard input occurred", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "textFieldBlur", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when text field lost focus", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-select" ], "dependencies": [ "kv-text-field" ], "dependencyGraph": { "kv-search": [ "kv-text-field" ], "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-select": [ "kv-search" ] } }, { "filePath": "src/components/select/select.tsx", "encapsulation": "shadow", "tag": "kv-select", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "select - The select container." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvSelect } from '@kelvininc/react-ui-components';\n\nexport const KvSelectExample: React.FC = () => (\n <>\n \n\t\t\n\t\t\n\t\t\n\t\t\n\t\n \n);\n```\n" }, "props": [ { "name": "clearSelectionLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "clear-selection-label", "reflectToAttr": true, "docs": "(optional) The clear search action text", "docsTags": [ { "name": "inheritdoc" } ], "default": "CLEAR_SELECTION_LABEL", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-height", "reflectToAttr": true, "docs": "(optional) The dropdown's max-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-width", "reflectToAttr": true, "docs": "(optional) The dropdown's max-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-height", "reflectToAttr": true, "docs": "(optional) The dropdown's min-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-width", "reflectToAttr": true, "docs": "(optional) The dropdown's min-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-placeholder", "reflectToAttr": true, "docs": "(optional) The list search text field placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchValue", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-value", "reflectToAttr": true, "docs": "(optional) The search value on the list", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "searchable", "reflectToAttr": true, "docs": "(optional) If `true` the list has a search text field", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectAllLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "select-all-label", "reflectToAttr": true, "docs": "(optional) The selection all action text", "docsTags": [ { "name": "inheritdoc" } ], "default": "SELECT_ALL_LABEL", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionAll", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-all", "reflectToAttr": true, "docs": "(optional) If `true` the list has an action to select all items", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionAllEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-all-enabled", "reflectToAttr": true, "docs": "(optional) If `true` the selection action is enabled", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionClearEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-clear-enabled", "reflectToAttr": true, "docs": "(optional) If `true` the list can be cleared", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionClearable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-clearable", "reflectToAttr": true, "docs": "(optional) If `true` the list has an action to unselect all items", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "focusSearch", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusSearch() => Promise", "parameters": [], "docs": "Focuses the search text field", "docsTags": [] } ], "events": [ { "event": "clearSelection", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clears the selected items", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "searchChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user interacts with the search text field", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectAll", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the all items", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--select-background-color", "annotation": "prop", "docs": "Select background color." }, { "name": "--select-border", "annotation": "prop", "docs": "Select border style." }, { "name": "--select-border-radius", "annotation": "prop", "docs": "Select border radius." }, { "name": "--select-inner-border", "annotation": "prop", "docs": "Select inner border style." }, { "name": "--select-max-height", "annotation": "prop", "docs": "Select maximum height." }, { "name": "--select-min-height", "annotation": "prop", "docs": "Select minimum height." } ], "slots": [], "parts": [ { "name": "select", "docs": "The select container." } ], "dependents": [ "kv-select-multi-options" ], "dependencies": [ "kv-search" ], "dependencyGraph": { "kv-select": [ "kv-search" ], "kv-search": [ "kv-text-field" ], "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-select-multi-options": [ "kv-select" ] } }, { "filePath": "src/components/select-create-option/select-create-option.tsx", "encapsulation": "none", "tag": "kv-select-create-option", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "create-button - The create action button element." }, { "name": "part", "text": "cancel-button - The cancel action button element." }, { "name": "part", "text": "text-field - The text field element." } ], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "(optional) If `true` the input and actions will be disabled. Default: `false`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial", "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "references": { "Partial": { "location": "global", "id": "global::Partial" }, "ITextField": { "location": "import", "path": "../../types", "id": "src/types.ts::ITextField" } } }, "mutable": false, "attr": "input-config", "reflectToAttr": false, "docs": "(optional) The text field custom 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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) The input and actions size. Default: `small´", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Small", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(optional) The new option value.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "blurInput", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "blurInput() => Promise", "parameters": [], "docs": "Blur the input", "docsTags": [] }, { "name": "focusInput", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusInput() => Promise", "parameters": [], "docs": "Focus the input", "docsTags": [] } ], "events": [ { "event": "clickCancel", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the cancel button is pressed", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickCreate", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the create button is pressed", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "valueChanged", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the value changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "cancel-button", "docs": "The cancel action button element." }, { "name": "create-button", "docs": "The create action button element." }, { "name": "text-field", "docs": "The text field element." } ], "dependents": [ "kv-select-multi-options" ], "dependencies": [ "kv-text-field", "kv-action-button-icon" ], "dependencyGraph": { "kv-select-create-option": [ "kv-text-field", "kv-action-button-icon" ], "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-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-select-multi-options": [ "kv-select-create-option" ] } }, { "filePath": "src/components/select-multi-options/select-multi-options.tsx", "encapsulation": "shadow", "tag": "kv-select-multi-options", "readme": "# kv-select-multi-options\n", "docs": "", "docsTags": [ { "name": "part", "text": "select - The select container." } ], "usage": {}, "props": [ { "name": "canAddItems", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "can-add-items", "reflectToAttr": true, "docs": "(optional) If `true` an add option will appear at the bottom of options list. Default: `false`", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clearSelectionLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "clear-selection-label", "reflectToAttr": true, "docs": "(optional) The clear selection action text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "counter", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "counter", "reflectToAttr": true, "docs": "(optional) If `true` a selection counter is displayed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "createInputPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "create-input-placeholder", "reflectToAttr": true, "docs": "(optional) The create form input placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "createOptionPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "create-option-placeholder", "reflectToAttr": true, "docs": "(optional) The create new option placeholder. Default: `Add a new option`", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_ADD_OPTION_PLACEHOLDER", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "filteredOptions", "type": "{ [x: string]: ISelectMultiOption; }", "complexType": { "original": "ISelectMultiOptions", "resolved": "{ [x: string]: ISelectMultiOption; }", "references": { "ISelectMultiOptions": { "location": "import", "path": "./select-multi-options.types", "id": "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions" } } }, "mutable": false, "attr": "filtered-options", "reflectToAttr": false, "docs": "(optional) The object with the dropdown options filtered", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [x: string]: ISelectMultiOption; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-height", "reflectToAttr": true, "docs": "(optional) The dropdown's max-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-width", "reflectToAttr": true, "docs": "(optional) The dropdown's max-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-height", "reflectToAttr": true, "docs": "(optional) The dropdown's min-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minSearchOptions", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min-search-options", "reflectToAttr": true, "docs": "(optional) The minimum amount of options required to display the search. Defaults to `15`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "MINIMUM_SEARCHABLE_OPTIONS", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-width", "reflectToAttr": true, "docs": "(optional) The dropdown's min-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "noDataAvailableConfig", "type": "IIllustrationMessage", "complexType": { "original": "IIllustrationMessage", "resolved": "IIllustrationMessage", "references": { "IIllustrationMessage": { "location": "import", "path": "../illustration-message/illustration-message.types", "id": "src/components/illustration-message/illustration-message.types.ts::IIllustrationMessage" } } }, "mutable": false, "attr": "no-data-available-config", "reflectToAttr": false, "docs": "(optional) The configuration for the \"no data available\" empty state illustration", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_NO_DATA_AVAILABLE_ILLUSTRATION_CONFIG", "values": [ { "type": "IIllustrationMessage" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "noResultsFoundConfig", "type": "IIllustrationMessage", "complexType": { "original": "IIllustrationMessage", "resolved": "IIllustrationMessage", "references": { "IIllustrationMessage": { "location": "import", "path": "../illustration-message/illustration-message.types", "id": "src/components/illustration-message/illustration-message.types.ts::IIllustrationMessage" } } }, "mutable": false, "attr": "no-results-found-config", "reflectToAttr": false, "docs": "(optional) The configuration for the \"no results found\" empty state illustration", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_NO_RESULTS_FOUND_ILLUSTRATION_CONFIG", "values": [ { "type": "IIllustrationMessage" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "type": "{ [x: string]: ISelectMultiOption; }", "complexType": { "original": "ISelectMultiOptions", "resolved": "{ [x: string]: ISelectMultiOption; }", "references": { "ISelectMultiOptions": { "location": "import", "path": "./select-multi-options.types", "id": "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions" } } }, "mutable": false, "attr": "options", "reflectToAttr": false, "docs": "(optional) The object with the dropdown options", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: ISelectMultiOption; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-placeholder", "reflectToAttr": true, "docs": "(optional) The list search text field placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchValue", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-value", "reflectToAttr": true, "docs": "(optional) The search value to display", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "searchable", "reflectToAttr": true, "docs": "(optional) If `false` the dropdown is not searchable. Default `true`", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectAllLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "select-all-label", "reflectToAttr": true, "docs": "(optional) The selection all action text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedOptions", "type": "{ [x: string]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "selected-options", "reflectToAttr": false, "docs": "(optional) The object with indexed by the dropdown labels and its selected value", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionAll", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-all", "reflectToAttr": true, "docs": "(optional) If `true` the list has an action to select all items", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionClearable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-clearable", "reflectToAttr": true, "docs": "(optional) If `true` dropdown items can be cleared", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "shortcuts", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "shortcuts", "reflectToAttr": true, "docs": "(optional) If `true` the keyboard shortcuts can be used to navigate between the dropdown results. Default `false`", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "clearHighlightedOption", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "clearHighlightedOption() => Promise", "parameters": [], "docs": "Clears the highlighted option state", "docsTags": [] }, { "name": "closeCreatePopup", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "closeCreatePopup() => Promise", "parameters": [], "docs": "Close create popup", "docsTags": [] }, { "name": "focusSearch", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusSearch() => Promise", "parameters": [], "docs": "Focuses the search text field", "docsTags": [] } ], "events": [ { "event": "clearSelection", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clears the selected items", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "dismiss", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the 'esc' key is pressed", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "optionCreated", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when a new option is created", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "optionSelected", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when an option is selected", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "optionsSelected", "detail": "{ [x: string]: boolean; }", "bubbles": true, "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the selected options change", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "searchChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user interacts with the search text field", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "selectAll", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the all items", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [ { "event": "valueChanged", "capture": false, "passive": false }, { "event": "clickCreate", "capture": false, "passive": false }, { "event": "clickCancel", "capture": false, "passive": false }, { "event": "keydown", "target": "document", "capture": false, "passive": false } ], "styles": [ { "name": "--select-list-max-height", "annotation": "prop", "docs": "Select list maximum height." }, { "name": "--select-list-max-width", "annotation": "prop", "docs": "Select list maximum width." }, { "name": "--select-list-min-height", "annotation": "prop", "docs": "Select list minimum height." }, { "name": "--select-list-min-width", "annotation": "prop", "docs": "Select list minimum width." } ], "slots": [], "parts": [ { "name": "select", "docs": "The select container." } ], "dependents": [ "kv-multi-select-dropdown", "kv-single-select-dropdown" ], "dependencies": [ "kv-virtualized-list", "kv-select-option", "kv-select", "kv-tooltip", "kv-illustration-message", "kv-select-create-option", "kv-select-shortcuts-label" ], "dependencyGraph": { "kv-select-multi-options": [ "kv-virtualized-list", "kv-select-option", "kv-select", "kv-tooltip", "kv-illustration-message", "kv-select-create-option", "kv-select-shortcuts-label" ], "kv-select-option": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-dirty-dot": [ "kv-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-select": [ "kv-search" ], "kv-search": [ "kv-text-field" ], "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-form-help-text": [ "kv-icon" ], "kv-illustration-message": [ "kv-illustration" ], "kv-select-create-option": [ "kv-text-field", "kv-action-button-icon" ], "kv-select-shortcuts-label": [ "kv-icon" ], "kv-multi-select-dropdown": [ "kv-select-multi-options" ], "kv-single-select-dropdown": [ "kv-select-multi-options" ] } }, { "filePath": "src/components/select-option/select-option.tsx", "encapsulation": "shadow", "tag": "kv-select-option", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "select-option-content - The option's content container" }, { "name": "part", "text": "option-container - The option's container" }, { "name": "part", "text": "checkbox - The option's checkbox" }, { "name": "part", "text": "label - The option's label" }, { "name": "part", "text": "icon - The option's icon" } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvSelectOption } from '@kelvininc/react-ui-components';\nexport const KvSelectOptionExample: React.FC = () => (\n <>\n\t{/*-- With all properties (only label and value are mandatory) --*/}\n\t\n\t\n \n);\n```\n" }, "props": [ { "name": "action", "type": "ISelectOptionAction", "complexType": { "original": "ISelectOptionAction", "resolved": "ISelectOptionAction", "references": { "ISelectOptionAction": { "location": "import", "path": "./select-option.types", "id": "src/components/select-option/select-option.types.ts::ISelectOptionAction" } } }, "mutable": false, "attr": "action", "reflectToAttr": false, "docs": "(optional) Action to display on the right side of the item", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "ISelectOptionAction" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Custom class to apply for custom styling.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customStyle", "type": "{ [key: string]: string; }", "complexType": { "original": "HostAttributes['style']", "resolved": "{ [key: string]: string; }", "references": { "HostAttributes": { "location": "import", "path": "@stencil/core/internal", "id": "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts::HostAttributes" } } }, "mutable": false, "attr": "custom-style", "reflectToAttr": false, "docs": "(optional) Additional style to apply for custom CSS.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [key: string]: string; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) Description of the item displayed on the right", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "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 item is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "heading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "heading", "reflectToAttr": true, "docs": "(optional) If `true` the item is presented as a list heading. Default: `false`", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "highlighted", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "highlighted", "reflectToAttr": true, "docs": "(optional) If `true` the item is highlighted", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) Icon of the item displayed on the left", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isDirty", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-dirty", "reflectToAttr": true, "docs": "(optional) If true, a dirty dot indicator will be added to left side of the option's text.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) The text to display on the item", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "level", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "level", "reflectToAttr": true, "docs": "(optional) The level depth at which the option is rendered", "docsTags": [ { "name": "inheritdoc" } ], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "selectable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selectable", "reflectToAttr": true, "docs": "(optional) If `false` the item is only for presenting and cannot be selected.", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selected", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selected", "reflectToAttr": true, "docs": "(optional) If `true` the item is selected", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "state", "type": "EToggleState.Indeterminate | EToggleState.None | EToggleState.Selected", "complexType": { "original": "EToggleState", "resolved": "EToggleState.Indeterminate | EToggleState.None | EToggleState.Selected", "references": { "EToggleState": { "location": "import", "path": "./select-option.types", "id": "src/components/select-option/select-option.types.ts::EToggleState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(optional) The toggle button state", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EToggleState.Indeterminate" }, { "type": "EToggleState.None" }, { "type": "EToggleState.Selected" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "togglable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "togglable", "reflectToAttr": true, "docs": "(optional) If `true` the item is togglable", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(required) The item value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "itemSelected", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the item", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--select-option-background-color", "annotation": "prop", "docs": "Select option background color." }, { "name": "--select-option-background-color-highlighted", "annotation": "prop", "docs": "Select option background color when highlighted." }, { "name": "--select-option-background-color-hover", "annotation": "prop", "docs": "Select option background color when hovered." }, { "name": "--select-option-background-color-selected", "annotation": "prop", "docs": "Select option background color when selected." }, { "name": "--select-option-description-color", "annotation": "prop", "docs": "Select option description color." }, { "name": "--select-option-description-color-highlighted", "annotation": "prop", "docs": "Select option description color when highlighted." }, { "name": "--select-option-description-color-hover", "annotation": "prop", "docs": "Select option description color when hover." }, { "name": "--select-option-description-color-selected", "annotation": "prop", "docs": "Select option description color when selected." }, { "name": "--select-option-height", "annotation": "prop", "docs": "Select option height." }, { "name": "--select-option-icon-size", "annotation": "prop", "docs": "Select option icon size in pixels." }, { "name": "--select-option-label-color", "annotation": "prop", "docs": "Select option label color." }, { "name": "--select-option-label-color-highlighted", "annotation": "prop", "docs": "Select option label color when highlighted." }, { "name": "--select-option-label-color-hover", "annotation": "prop", "docs": "Select option label color when hover." }, { "name": "--select-option-label-color-selected", "annotation": "prop", "docs": "Select option label color when selected." }, { "name": "--select-option-transition-duration", "annotation": "prop", "docs": "Select option transition time." } ], "slots": [], "parts": [ { "name": "checkbox", "docs": "The option's checkbox" }, { "name": "icon", "docs": "The option's icon" }, { "name": "label", "docs": "The option's label" }, { "name": "option-container", "docs": "The option's container" }, { "name": "select-option-content", "docs": "The option's content container" } ], "dependents": [ "kv-relative-time-picker", "kv-select-multi-options" ], "dependencies": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "dependencyGraph": { "kv-select-option": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-dirty-dot": [ "kv-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-relative-time-picker": [ "kv-select-option" ], "kv-select-multi-options": [ "kv-select-option" ] } }, { "filePath": "src/components/select-shortcuts-label/select-shortcuts-label.tsx", "encapsulation": "none", "tag": "kv-select-shortcuts-label", "readme": "# __\n", "docs": "", "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-select-multi-options" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-select-shortcuts-label": [ "kv-icon" ], "kv-select-multi-options": [ "kv-select-shortcuts-label" ] } }, { "filePath": "src/components/single-select-dropdown/single-select-dropdown.tsx", "encapsulation": "none", "tag": "kv-single-select-dropdown", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "select - The select container." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvSingleSelectDropdown } from '@kelvininc/react-ui-components';\n\nexport const KvSingleSelectDropdownExample: React.FC = (props) => (\n <>\n \n\t\n \n);\n```" }, "props": [ { "name": "actionElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement | null", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "action-element", "reflectToAttr": false, "docs": "(optional) A reference to the dropdown action element", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "autoFocus", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "auto-focus", "reflectToAttr": true, "docs": "(optional) If `false` the search text field is not auto-focused. Default `true`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "badge", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "badge", "reflectToAttr": true, "docs": "(optional) Text to display inside a badge on the right side of the displayed value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "canAddItems", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "can-add-items", "reflectToAttr": true, "docs": "(optional) If `true` an add option will appear at the bottom of options list. Default: `false`", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clearSelectionLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "clear-selection-label", "reflectToAttr": true, "docs": "(optional) The clear selection action text", "docsTags": [ { "name": "inheritdoc" } ], "default": "SINGLE_SELECT_CLEAR_SELECTION_LABEL", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "clickOutsideClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "click-outside-close", "reflectToAttr": true, "docs": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "counter", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "counter", "reflectToAttr": true, "docs": "(optional) If `true` a selection counter is displayed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "createInputPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "create-input-placeholder", "reflectToAttr": true, "docs": "(optional) The create form input placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "createOptionPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "create-option-placeholder", "reflectToAttr": true, "docs": "(optional) The create new option placeholder. Default: `Add a new option`", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "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", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayPrefix", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "display-prefix", "reflectToAttr": true, "docs": "(optional) The text to display as a prefix to `displayValue`", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayValue", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "display-value", "reflectToAttr": true, "docs": "(optional) The text to display on the dropdown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "dropdownOptions", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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-options", "reflectToAttr": false, "docs": "(optional) The dropdown position config options", "docsTags": [ { "name": "inheritdoc" } ], "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; })[]; platform?: Platform; }" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "errorState", "type": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "complexType": { "original": "EValidationState", "resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "references": { "EValidationState": { "location": "import", "path": "../text-field/text-field.types", "id": "src/components/text-field/text-field.types.ts::EValidationState" } } }, "mutable": false, "attr": "error-state", "reflectToAttr": true, "docs": "(required) The error state for the dropdown", "docsTags": [ { "name": "inheritdoc" } ], "default": "EValidationState.None", "values": [ { "type": "EValidationState.Invalid" }, { "type": "EValidationState.None" }, { "type": "EValidationState.Valid" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "filteredOptions", "type": "{ [x: string]: ISelectSingleOption; }", "complexType": { "original": "ISelectSingleOptions", "resolved": "{ [x: string]: ISelectSingleOption; }", "references": { "ISelectSingleOptions": { "location": "import", "path": "./single-select-dropdown.types", "id": "src/components/single-select-dropdown/single-select-dropdown.types.ts::ISelectSingleOptions" } } }, "mutable": false, "attr": "filtered-options", "reflectToAttr": false, "docs": "(optional) The object with the dropdown options filtered", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [x: string]: ISelectSingleOption; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "helpText", "type": "string | string[]", "complexType": { "original": "string | string[]", "resolved": "string | string[]", "references": {} }, "mutable": false, "attr": "help-text", "reflectToAttr": true, "docs": "(optional) The text to display as help text", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) The icon to display on the dropdown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial", "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; 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) The text field options", "docsTags": [ { "name": "inheritdoc" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputSize", "type": "EComponentSize.Large | EComponentSize.Small", "complexType": { "original": "EComponentSize", "resolved": "EComponentSize.Large | EComponentSize.Small", "references": { "EComponentSize": { "location": "import", "path": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "input-size", "reflectToAttr": true, "docs": "(optional) The size of the input", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "is-open", "reflectToAttr": true, "docs": "(optional) If `true` the dropdown is opened", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) The text to display on the dropdown label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "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 dropdown is loading", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-height", "reflectToAttr": true, "docs": "(optional) The dropdown's max-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-width", "reflectToAttr": true, "docs": "(optional) The dropdown's max-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minHeight", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-height", "reflectToAttr": true, "docs": "(optional) The dropdown's min-height", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minSearchOptions", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min-search-options", "reflectToAttr": true, "docs": "(optional) The minimum amount of options required to display the search. Defaults to `15`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "MINIMUM_SEARCHABLE_OPTIONS", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minWidth", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-width", "reflectToAttr": true, "docs": "(optional) The dropdown's min-width", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "noDataAvailableConfig", "type": "IIllustrationMessage", "complexType": { "original": "IIllustrationMessage", "resolved": "IIllustrationMessage", "references": { "IIllustrationMessage": { "location": "import", "path": "../../types", "id": "src/types.ts::IIllustrationMessage" } } }, "mutable": false, "attr": "no-data-available-config", "reflectToAttr": false, "docs": "(optional) The configuration for the \"no data available\" empty state illustration", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IIllustrationMessage" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "noResultsFoundConfig", "type": "IIllustrationMessage", "complexType": { "original": "IIllustrationMessage", "resolved": "IIllustrationMessage", "references": { "IIllustrationMessage": { "location": "import", "path": "../../types", "id": "src/types.ts::IIllustrationMessage" } } }, "mutable": false, "attr": "no-results-found-config", "reflectToAttr": false, "docs": "(optional) The configuration for the \"no results found\" empty state illustration", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IIllustrationMessage" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "type": "{ [x: string]: ISelectSingleOption; }", "complexType": { "original": "ISelectSingleOptions", "resolved": "{ [x: string]: ISelectSingleOption; }", "references": { "ISelectSingleOptions": { "location": "import", "path": "./single-select-dropdown.types", "id": "src/components/single-select-dropdown/single-select-dropdown.types.ts::ISelectSingleOptions" } } }, "mutable": false, "attr": "options", "reflectToAttr": false, "docs": "(optional) The object with the dropdown options", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: ISelectSingleOption; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(required) The text to display as the dropdown placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "(optional) If `true` dropdown requires a value to be selected", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchPlaceholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-placeholder", "reflectToAttr": true, "docs": "(optional) The list search text field placeholder", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "searchable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "searchable", "reflectToAttr": true, "docs": "(optional) If `false` the dropdown is not searchable. Default `true`", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectAllLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "select-all-label", "reflectToAttr": true, "docs": "(optional) The selection all action text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedOption", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "selected-option", "reflectToAttr": true, "docs": "(optional) The value of the selected option", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionAll", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-all", "reflectToAttr": true, "docs": "(optional) If `true` the list has an action to select all items", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectionClearable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selection-clearable", "reflectToAttr": true, "docs": "(optional) If `true` dropdown items can be cleared", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "shortcuts", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "shortcuts", "reflectToAttr": true, "docs": "(optional) If `true` the keyboard shortcuts can be used to navigate between the dropdown results. Default `false`", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "zIndex", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "z-index", "reflectToAttr": false, "docs": "(optional) the dropdown list z-index (default: 9004)", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DROPDOWN_Z_INDEX", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "focusSearch", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusSearch() => Promise", "parameters": [], "docs": "Focuses the search text field", "docsTags": [] } ], "events": [ { "event": "clearSelection", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clears the selected items", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickOutside", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when there's a click outside the dropdown's bondaries", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "dismiss", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the 'esc' key is pressed", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "openStateChange", "detail": "boolean", "bubbles": false, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the dropdown open state changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "optionCreated", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when a new option is created", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "optionSelected", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when an option is selected", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "searchChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user interacts with the search text field", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--dropdown-max-height", "annotation": "prop", "docs": "Dropdown list maximum height." }, { "name": "--dropdown-max-width", "annotation": "prop", "docs": "Dropdown list maximum width." }, { "name": "--dropdown-min-height", "annotation": "prop", "docs": "Dropdown list minimum height." }, { "name": "--dropdown-min-width", "annotation": "prop", "docs": "Dropdown list minimum width." } ], "slots": [], "parts": [ { "name": "select", "docs": "The select container." } ], "dependents": [ "kv-relative-time-picker" ], "dependencies": [ "kv-dropdown", "kv-select-multi-options" ], "dependencyGraph": { "kv-single-select-dropdown": [ "kv-dropdown", "kv-select-multi-options" ], "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-select-multi-options": [ "kv-virtualized-list", "kv-select-option", "kv-select", "kv-tooltip", "kv-illustration-message", "kv-select-create-option", "kv-select-shortcuts-label" ], "kv-select-option": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-select": [ "kv-search" ], "kv-search": [ "kv-text-field" ], "kv-illustration-message": [ "kv-illustration" ], "kv-select-create-option": [ "kv-text-field", "kv-action-button-icon" ], "kv-select-shortcuts-label": [ "kv-icon" ], "kv-relative-time-picker": [ "kv-single-select-dropdown" ] } }, { "filePath": "src/components/illustrations/kv-soft-agree/kv-soft-agree.tsx", "encapsulation": "shadow", "tag": "kv-soft-agree", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/state-indicator/state-indicator.tsx", "encapsulation": "shadow", "tag": "kv-state-indicator", "readme": "# **\n\n\n", "docs": "", "docsTags": [], "usage": { "javascript": "```html\n\n\n\n\n\n```\n", "react": "```tsx\nimport React from 'react';\n\nimport { KvStateIndicator } from '@kelvininc/react-ui-components';\n\nexport const StateIndicatorExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n\t\n\t{/*-- With Color --*/}\n\t\n \n);\n\n```\n", "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'state-indicator-example',\n styleUrl: 'state-indicator-example.css',\n shadow: true,\n})\nexport class StateIndicatorExample {\n render() {\n return [\n \t// Default\n\t\t\n\t\t\n\t\t// With Color\n\t\t\n ];\n }\n}\n```\n" }, "props": [ { "name": "color", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": true, "docs": "(optional) State indicator color", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(optional) State indicator text", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/step-bar/step-bar.tsx", "encapsulation": "shadow", "tag": "kv-step-bar", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvStepBar } from '@kelvininc/react-ui-components';\n\nexport const StepBarExample: React.FC = () => {\n\tconst stepsSuccess = [\n\t\t{\n\t\t\tenabled: true,\n\t\t\tactive: true\n\t\t},\n\t\t{\n\t\t\tenabled: true,\n\t\t\tactive: true\n\t\t},\n\t\t{\n\t\t\tenabled: false\n\t\t}\n\t];\n\n\tconst stepsError = [\n\t\t{\n\t\t\tenabled: true,\n\t\t\tactive: true,\n\t\t\thasError: true\n\t\t},\n\t\t{\n\t\t\tenabled: true,\n\t\t\tactive: true,\n\t\t\thasError: true\n\t\t},\n\t\t{\n\t\t\tenabled: false\n\t\t}\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{/*-- Default --*/}\n\t\t\t\n\t\t\t{/*-- Error state --*/}\n\t\t\t\n\t\t\n\t);\n};\n```\n" }, "props": [ { "name": "currentStep", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "current-step", "reflectToAttr": true, "docs": "(required) Defines the current step index", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "hasError", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-error", "reflectToAttr": true, "docs": "(optional) Defines if the progress bar should be in an error state", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Defines the label to display next to the step counter (defaults to: \"Progress: \")", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_LABEL", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "progressPercentage", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "progress-percentage", "reflectToAttr": true, "docs": "(required) Defines the percentage of steps completed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "steps", "type": "IStepBarStep[]", "complexType": { "original": "IStepBarStep[]", "resolved": "IStepBarStep[]", "references": { "IStepBarStep": { "location": "import", "path": "./step-bar.types", "id": "src/components/step-bar/step-bar.types.ts::IStepBarStep" } } }, "mutable": false, "attr": "steps", "reflectToAttr": false, "docs": "(required) Defines the steps array to render", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IStepBarStep[]" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "stepClicked", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when a step is clicked and emits the index", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--step-counter-color", "annotation": "prop", "docs": "The color of the step counter." }, { "name": "--step-label-color", "annotation": "prop", "docs": "The color of the label." } ], "slots": [], "parts": [], "dependents": [ "kv-wizard-footer" ], "dependencies": [ "kv-step-progress-bar", "kv-step-indicator" ], "dependencyGraph": { "kv-step-bar": [ "kv-step-progress-bar", "kv-step-indicator" ], "kv-step-indicator": [ "kv-icon" ], "kv-wizard-footer": [ "kv-step-bar" ] } }, { "filePath": "src/components/step-indicator/step-indicator.tsx", "encapsulation": "shadow", "tag": "kv-step-indicator", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvStepIndicator } from '@kelvininc/react-ui-components';\n\nexport const StepIndicatorExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\t\t{/*-- Enabled --*/}\n\t\t\n\t\t{/*-- Active --*/}\n\t\t\n\t\t{/*-- With Error --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "active", "reflectToAttr": true, "docs": "(optional) Defines if the step is active", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "enabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enabled", "reflectToAttr": true, "docs": "(optional) Defines if the step is interactable and emits clicks", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hasError", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-error", "reflectToAttr": true, "docs": "(optional) Defines if the step has an error and applies the border styling", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isCurrent", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-current", "reflectToAttr": false, "docs": "(optional) Defines if the step is the current step", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "indicatorClicked", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when the step is clicked", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--indicator-active-border-color", "annotation": "prop", "docs": "The border color to show when the indicator is active" }, { "name": "--indicator-active-color", "annotation": "prop", "docs": "The color to show when the indicator is active" }, { "name": "--indicator-default-border-color", "annotation": "prop", "docs": "The border color to show by default on the indicator" }, { "name": "--indicator-default-color", "annotation": "prop", "docs": "The color to show by default on the indicator" }, { "name": "--indicator-error-border-color", "annotation": "prop", "docs": "The color to show on the border that highlights the indicator when there's an error" }, { "name": "--indicator-radius", "annotation": "prop", "docs": "The size of the circle drawn" } ], "slots": [], "parts": [], "dependents": [ "kv-step-bar" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-step-indicator": [ "kv-icon" ], "kv-step-bar": [ "kv-step-indicator" ] } }, { "filePath": "src/components/step-progress-bar/step-progress-bar.tsx", "encapsulation": "shadow", "tag": "kv-step-progress-bar", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvStepProgressBar } from '@kelvininc/react-ui-components';\n\nexport const StepProgressBarExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t{/*-- Has errors --*/}\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "hasError", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-error", "reflectToAttr": true, "docs": "(optional) Defines if the bar should be in an error state, setting to `true` will change the background color to the defined error color", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "progressPercentage", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "progress-percentage", "reflectToAttr": true, "docs": "(required) Defines how much space the progress bar should fill", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--progress-bar-background-color", "annotation": "prop", "docs": "The color of the progress bar container", "mode": "night" }, { "name": "--progress-bar-filler-error-color", "annotation": "prop", "docs": "The color of the progress bar filler when in error", "mode": "night" }, { "name": "--progress-bar-filler-success-color", "annotation": "prop", "docs": "The color of the progress bar filler", "mode": "night" }, { "name": "--progress-bar-height", "annotation": "prop", "docs": "The height of the progress bar", "mode": "night" } ], "slots": [], "parts": [], "dependents": [ "kv-step-bar" ], "dependencies": [], "dependencyGraph": { "kv-step-bar": [ "kv-step-progress-bar" ] } }, { "filePath": "src/components/summary-card/summary-card.tsx", "encapsulation": "shadow", "tag": "kv-summary-card", "readme": "# **\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvSummaryCard, ESummaryCardType } from '@kelvininc/react-ui-components';\nexport const KvSummaryCardExample: React.FC = () => (\n\t<>\n\t\t{/*-- Required props only (Text Type) --*/}\n\t\t\n\n\t\t{/*-- Required props only (Number Type) --*/}\n\t\t\n\n\t\t{/*-- Required props loading --*/}\n\t\t\n\n\t\t{/*-- With all properties --*/}\n\t\t\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": false, "docs": "(optional) A brief description of the card's info", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "(optional) The label to use at the top of the card", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": false, "docs": "(optional) Defines loading styling for this card", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "subtitle", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "subtitle", "reflectToAttr": false, "docs": "(optional) The subtitle of the card", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "ESummaryCardType.Number | ESummaryCardType.Text", "complexType": { "original": "ESummaryCardType", "resolved": "ESummaryCardType.Number | ESummaryCardType.Text", "references": { "ESummaryCardType": { "location": "import", "path": "./summary-card.types", "id": "src/components/summary-card/summary-card.types.ts::ESummaryCardType" } } }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "(required) Used to define font styling according to the data type", "docsTags": [], "values": [ { "type": "ESummaryCardType.Number" }, { "type": "ESummaryCardType.Text" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/switch-button/switch-button.tsx", "encapsulation": "shadow", "tag": "kv-switch-button", "readme": "# **\n", "docs": "", "docsTags": [ { "name": "part", "text": "icon-svg - The switch icon." }, { "name": "part", "text": "icon-square - The switch icon square container." }, { "name": "part", "text": "button - The switch button." } ], "usage": { "javascript": "```html\n\n\n\n\n\n\n\n\n\n```\n", "react": "```tsx\nimport React from 'react';\n\nimport { KvSwitchButton } from '@kelvininc/react-ui-components';\n\nexport const SwitchButtonExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n \n\n\t{/*-- Disabled --*/}\n\t\n\n\t{/*-- ON/OFF --*/}\n\t\n\t\n \n);\n\n```\n", "stencil": "```tsx\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'switch-button-example',\n styleUrl: 'switch-button-example.css',\n shadow: true,\n})\nexport class SwichButtonExample {\n render() {\n return [\n \t// Default\n\t\t\n\n\t\t// Disabled\n\t\t\n\n\t\t// ON/OFF\n\t\t\n\t\t\n ];\n }\n}\n```\n" }, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "(optional) If `true` the button is ON. Default `false`", "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. Default `false`", "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": false, "docs": "(optional) Button's size. Default `EComponentSize.Large`", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "switchChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when switch's state changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--off-background-color", "annotation": "prop", "docs": "Button background color when's OFF." }, { "name": "--on-background-color", "annotation": "prop", "docs": "Button background color when's ON." }, { "name": "--sqr-background-color", "annotation": "prop", "docs": "Icon square container background color." } ], "slots": [], "parts": [ { "name": "button", "docs": "The switch button." }, { "name": "icon-square", "docs": "The switch icon square container." }, { "name": "icon-svg", "docs": "The switch icon." } ], "dependents": [ "kv-time-picker" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-switch-button": [ "kv-icon" ], "kv-time-picker": [ "kv-switch-button" ] } }, { "filePath": "src/components/tab-item/tab-item.tsx", "encapsulation": "shadow", "tag": "kv-tab-item", "readme": "# **\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "icon - The tab's item icon." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvTabItem } from '@kelvininc/react-ui-components';\n\nexport const TabItemExample: React.FC = () => (\n\t<>\n\t\t{/*-- With required props --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- Selected --*/}\n\t\t\n\n\t\t{/*-- With Notification --*/}\n\t\t\n\n\t\t{/*-- With Notification Color --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customStyle", "type": "{ [key: string]: string; }", "complexType": { "original": "HostAttributes['style']", "resolved": "{ [key: string]: string; }", "references": { "HostAttributes": { "location": "import", "path": "@stencil/core/internal", "id": "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts::HostAttributes" } } }, "mutable": false, "attr": "custom-style", "reflectToAttr": false, "docs": "(optional) Additional style to apply for custom CSS.", "docsTags": [], "values": [ { "type": "{ [key: string]: string; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "(optional) To disable this tab", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hasNotification", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-notification", "reflectToAttr": false, "docs": "(optional) To show/hide notification icon or not", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "(optional) The tab's icon", "docsTags": [], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "(required) Name to show in UI for this tab", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "notificationColor", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "notification-color", "reflectToAttr": false, "docs": "(optional) The tab's notification color (hex value, rgb or css var format)", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selected", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selected", "reflectToAttr": false, "docs": "(optional) To set this tab as the selected one", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "(optional) Sets this tab item to a different styling configuration", "docsTags": [], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tabKey", "type": "number | string", "complexType": { "original": "number | string", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "tab-key", "reflectToAttr": false, "docs": "(required) A unique identifier for this tab", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "tabSelected", "detail": "number | string", "bubbles": true, "complexType": { "original": "number | string", "resolved": "number | string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the tab is selected", "docsTags": [] } ], "listeners": [], "styles": [ { "name": "--tab-item-icon-color", "annotation": "prop", "docs": "The color of tab navigation icon;" }, { "name": "--tab-item-icon-size", "annotation": "prop", "docs": "The size of tab navigation icon;" } ], "slots": [], "parts": [ { "name": "icon", "docs": "The tab's item icon." } ], "dependents": [ "kv-tab-navigation" ], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-tab-item": [ "kv-icon" ], "kv-tab-navigation": [ "kv-tab-item" ] } }, { "filePath": "src/components/tab-navigation/tab-navigation.tsx", "encapsulation": "shadow", "tag": "kv-tab-navigation", "readme": "# kv-tab-navigation\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvTabNavigation } from '@kelvininc/react-ui-components';\n\nexport const TabNavigationExample: React.FC = () => (\n\t<>\n\t\t{/*-- With required props --*/}\n\t\t\n\n\t\t{/*-- With required props and notification --*/}\n\t\t\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "notifications", "type": "ITabsNotificationDict", "complexType": { "original": "ITabsNotificationDict", "resolved": "ITabsNotificationDict", "references": { "ITabsNotificationDict": { "location": "import", "path": "./tab-navigation.types", "id": "src/components/tab-navigation/tab-navigation.types.ts::ITabsNotificationDict" } } }, "mutable": false, "attr": "notifications", "reflectToAttr": false, "docs": "(optional) To add a notification dot and its respective color to a specific tab", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "ITabsNotificationDict" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedTabKey", "type": "number | string", "complexType": { "original": "number | string", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "selected-tab-key", "reflectToAttr": false, "docs": "(optional) The currently selected tab key", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "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": false, "docs": "(optional) Sets the items on this tab nav to use small styling configuration", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tabs", "type": "ITabNavigationItem[]", "complexType": { "original": "ITabNavigationItem[]", "resolved": "ITabNavigationItem[]", "references": { "ITabNavigationItem": { "location": "import", "path": "./tab-navigation.types", "id": "src/components/tab-navigation/tab-navigation.types.ts::ITabNavigationItem" } } }, "mutable": false, "attr": "tabs", "reflectToAttr": false, "docs": "(required) The tab items to render in this component", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "ITabNavigationItem[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "tabChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "When the tab selection changes, emit the requested tab's key", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [ { "event": "tabSelected", "capture": false, "passive": false } ], "styles": [ { "name": "--tab-list-bg-color", "annotation": "prop", "docs": "Background color of the list" }, { "name": "--tab-list-divider-color", "annotation": "prop", "docs": "Tab divider bar color" }, { "name": "--tab-list-indicator-color", "annotation": "prop", "docs": "Tab indicator bar color" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-tab-item" ], "dependencyGraph": { "kv-tab-navigation": [ "kv-tab-item" ], "kv-tab-item": [ "kv-icon" ] } }, { "filePath": "src/components/illustrations/kv-table-build/kv-table-build.tsx", "encapsulation": "shadow", "tag": "kv-table-build", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/tag/tag.tsx", "encapsulation": "shadow", "tag": "kv-tag", "readme": "# kv-tag\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTag } from '@kelvininc/react-ui-components';\n\nexport const TagExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n \n);\n\n```\n" }, "props": [ { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Tag label", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Sets the size of tag", "docsTags": [], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--tag-background-color", "annotation": "prop", "docs": "Tag Background Color." }, { "name": "--tag-border-color", "annotation": "prop", "docs": "Tag Border Color." }, { "name": "--tag-content-gap", "annotation": "prop", "docs": "Gap between text and slot." }, { "name": "--tag-content-padding", "annotation": "prop", "docs": "Padding insise content" }, { "name": "--tag-label-color", "annotation": "prop", "docs": "Tag Text Color." } ], "slots": [], "parts": [], "dependents": [ "kv-tag-alarm" ], "dependencies": [], "dependencyGraph": { "kv-tag-alarm": [ "kv-tag" ] } }, { "filePath": "src/components/tag-alarm/tag-alarm.tsx", "encapsulation": "shadow", "tag": "kv-tag-alarm", "readme": "# kv-tag-alarm\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTagAlarm } from '@kelvininc/react-ui-components';\n\nexport const TagLetterExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n\n\t{/*-- Custom Label --*/}\n\t\n\n\t{/*-- Only with icon --*/}\n\t\n \n);\n\n```\n" }, "props": [ { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": true, "docs": "(optional) Hide alarm label", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Alarm custom label", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "severity", "type": "EAlarmSeverity.Five | EAlarmSeverity.Four | EAlarmSeverity.One | EAlarmSeverity.Three | EAlarmSeverity.Two", "complexType": { "original": "EAlarmSeverity", "resolved": "EAlarmSeverity.Five | EAlarmSeverity.Four | EAlarmSeverity.One | EAlarmSeverity.Three | EAlarmSeverity.Two", "references": { "EAlarmSeverity": { "location": "import", "path": "../../utils/types/components", "id": "src/utils/types/components.ts::EAlarmSeverity" } } }, "mutable": false, "attr": "severity", "reflectToAttr": true, "docs": "(required) Alarm Severity", "docsTags": [], "values": [ { "type": "EAlarmSeverity.Five" }, { "type": "EAlarmSeverity.Four" }, { "type": "EAlarmSeverity.One" }, { "type": "EAlarmSeverity.Three" }, { "type": "EAlarmSeverity.Two" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "size", "type": "ETagAlarmSize.Large | ETagAlarmSize.Normal | ETagAlarmSize.Small | ETagAlarmSize.XSmall | ETagAlarmSize.XXSmall", "complexType": { "original": "ETagAlarmSize", "resolved": "ETagAlarmSize.Large | ETagAlarmSize.Normal | ETagAlarmSize.Small | ETagAlarmSize.XSmall | ETagAlarmSize.XXSmall", "references": { "ETagAlarmSize": { "location": "import", "path": "./tag-alarm.types", "id": "src/components/tag-alarm/tag-alarm.types.ts::ETagAlarmSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Tag Alarm Size", "docsTags": [], "default": "ETagAlarmSize.Normal", "values": [ { "type": "ETagAlarmSize.Large" }, { "type": "ETagAlarmSize.Normal" }, { "type": "ETagAlarmSize.Small" }, { "type": "ETagAlarmSize.XSmall" }, { "type": "ETagAlarmSize.XXSmall" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-tag", "kv-icon" ], "dependencyGraph": { "kv-tag-alarm": [ "kv-tag", "kv-icon" ] } }, { "filePath": "src/components/tag-letter/tag-letter.tsx", "encapsulation": "shadow", "tag": "kv-tag-letter", "readme": "# **\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTagLetter } from '@kelvininc/react-ui-components';\n\nexport const TagLetterExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n\t\n\t{/*-- With Color --*/}\n\t\n\n\t{/*-- With Tag Letter --*/}\n\t\n \n);\n\n```\n" }, "props": [ { "name": "color", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": true, "docs": "(optional) Tag letter's color", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) Tag letter's label", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "tagLetter", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "tag-letter", "reflectToAttr": true, "docs": "(optional) Tag letter's letter", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/tag-status/tag-status.tsx", "encapsulation": "shadow", "tag": "kv-tag-status", "readme": "# kv-tag-status\n", "docs": "", "docsTags": [ { "name": "part", "text": "label - The label element." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTagStatus, ETagStatusType } from '@kelvininc/react-ui-components';\n\nexport const TagStatusExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Without label --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(required) Defines the icon to be displayed.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Defines the content of the label.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "state", "type": "ETagState.Error | ETagState.Info | ETagState.Success | ETagState.Unknown | ETagState.Warning", "complexType": { "original": "ETagState", "resolved": "ETagState.Error | ETagState.Info | ETagState.Success | ETagState.Unknown | ETagState.Warning", "references": { "ETagState": { "location": "import", "path": "./tag-status.types", "id": "src/components/tag-status/tag-status.types.ts::ETagState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(required) Defines the color of the icon.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "ETagState.Error" }, { "type": "ETagState.Info" }, { "type": "ETagState.Success" }, { "type": "ETagState.Unknown" }, { "type": "ETagState.Warning" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--tag-status-gap", "annotation": "prop", "docs": "Tag status gap between label and icon in pixels." }, { "name": "--tag-status-icon-error-background-color", "annotation": "prop", "docs": "Tag status icon error background color." }, { "name": "--tag-status-icon-error-color", "annotation": "prop", "docs": "Tag status icon error color." }, { "name": "--tag-status-icon-info-background-color", "annotation": "prop", "docs": "Tag status icon info background color." }, { "name": "--tag-status-icon-info-color", "annotation": "prop", "docs": "Tag status icon info color." }, { "name": "--tag-status-icon-size", "annotation": "prop", "docs": "Tag status icon width and height in pixels." }, { "name": "--tag-status-icon-success-background-color", "annotation": "prop", "docs": "Tag status icon success background color." }, { "name": "--tag-status-icon-success-color", "annotation": "prop", "docs": "Tag status icon success color." }, { "name": "--tag-status-icon-unknown-background-color", "annotation": "prop", "docs": "Tag status icon unknown background color." }, { "name": "--tag-status-icon-unknown-color", "annotation": "prop", "docs": "Tag status icon unknown color." }, { "name": "--tag-status-icon-warning-background-color", "annotation": "prop", "docs": "Tag status icon warning background color." }, { "name": "--tag-status-icon-warning-color", "annotation": "prop", "docs": "Tag status icon warning color." }, { "name": "--tag-status-label-color", "annotation": "prop", "docs": "Tag status label text color." } ], "slots": [], "parts": [ { "name": "label", "docs": "The label element." } ], "dependents": [], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-tag-status": [ "kv-icon" ] } }, { "filePath": "src/components/illustrations/kv-take-actions/kv-take-actions.tsx", "encapsulation": "shadow", "tag": "kv-take-actions", "docs": "", "docsTags": [ { "name": "part", "text": "illustration - The illustration container." } ], "usage": {}, "props": [ { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "illustration", "docs": "The illustration container." } ], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/text-area/text-area.tsx", "encapsulation": "shadow", "tag": "kv-text-area", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\n\nimport React from 'react';\n\nimport { KvTextArea } from '@kelvininc/react-ui-components';\n\nexport const TextAreaExample: React.FC = () => (\n\t<>\n\t\t{/**-- Default --*/}\n\t\t\n\t\t{/**-- With Icon --*/}\n\t\t\n\t\t{/**-- With Text --*/}\n\t\t\n\t\t{/**-- With Text and Placeholder --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "counter", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "counter", "reflectToAttr": true, "docs": "(optional) If `true` the chars counter is displayed. Default: `true`", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "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 text area is disabled. Default: `false`.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) Icon to show to the left of the text field", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxCharLength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "max-char-length", "reflectToAttr": true, "docs": "(optional) The maximum number of characters allowed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(optional) The placeholder to show in the text area", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(optional) The text to show inside the text area", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "textChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emits the current text when there's a change", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": true } ], "styles": [ { "name": "--height-active", "annotation": "prop", "docs": "The height of the text are when is focused." }, { "name": "--height-default", "annotation": "prop", "docs": "The height of the text area when is not focused." } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-text-area": [ "kv-icon" ] } }, { "filePath": "src/components/text-field/text-field.tsx", "encapsulation": "shadow", "tag": "kv-text-field", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "input-container - container that includes the input, right and left slot" }, { "name": "part", "text": "badge - badge rendered at the right of the text field" } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTextField } from '@kelvininc/react-ui-components';\n\nexport const TextFieldExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Labeled --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "actionIcon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "action-icon", "reflectToAttr": true, "docs": "(optional) Icon that is added on the right of the input. Its clickable.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "badge", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "badge", "reflectToAttr": true, "docs": "(optional) Text to display inside a badge on the right side of the displayed value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customStyle", "type": "{ [key: string]: string; }", "complexType": { "original": "HostAttributes['style']", "resolved": "{ [key: string]: string; }", "references": { "HostAttributes": { "location": "import", "path": "@stencil/core/internal", "id": "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts::HostAttributes" } } }, "mutable": false, "attr": "custom-style", "reflectToAttr": false, "docs": "(optional) Additional style to apply for custom CSS.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [key: string]: string; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "examples", "type": "string[]", "complexType": { "original": "string[]", "resolved": "string[]", "references": {} }, "mutable": false, "attr": "examples", "reflectToAttr": false, "docs": "(optional) Text field example values", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "fitContent", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "fit-content", "reflectToAttr": true, "docs": "(optional) Enable/disable the resize of input (default: true)", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "forcedFocus", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "forced-focus", "reflectToAttr": true, "docs": "(optional) Text field focus state", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "helpText", "type": "string | string[]", "complexType": { "original": "string | string[]", "resolved": "string | string[]", "references": {} }, "mutable": false, "attr": "help-text", "reflectToAttr": true, "docs": "(optional) Text field help text", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) Text field's icon symbol name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputDisabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "input-disabled", "reflectToAttr": false, "docs": "(optional) Text field disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputMaskRegex", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-mask-regex", "reflectToAttr": true, "docs": "(optional) Input mask regex", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-name", "reflectToAttr": true, "docs": "(optional) Text field input name", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "inputReadonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "input-readonly", "reflectToAttr": false, "docs": "(optional) Text field is readonly", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputRequired", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "input-required", "reflectToAttr": true, "docs": "(optional) Text field required", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "isDirty", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-dirty", "reflectToAttr": true, "docs": "(optional) If true, a dirty dot indicator will be added to right side of the displayed value.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Text field label", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "(optional) Text field loading state", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "max", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "max", "reflectToAttr": true, "docs": "(optional) Text field maximum value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxLength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "max-length", "reflectToAttr": true, "docs": "(optional) Text field maximum number of characters required", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "min", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "min", "reflectToAttr": true, "docs": "(optional) Text field minimum value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "minLength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min-length", "reflectToAttr": true, "docs": "(optional) Text field minimum number of characters required", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(optional) Text field place holder", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "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": false, "docs": "(optional) Sets this tab item to a different styling configuration", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Large", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "state", "type": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "complexType": { "original": "EValidationState", "resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid", "references": { "EValidationState": { "location": "import", "path": "./text-field.types", "id": "src/components/text-field/text-field.types.ts::EValidationState" } } }, "mutable": false, "attr": "state", "reflectToAttr": true, "docs": "(optional) Text field state", "docsTags": [ { "name": "inheritdoc" } ], "default": "EValidationState.None", "values": [ { "type": "EValidationState.Invalid" }, { "type": "EValidationState.None" }, { "type": "EValidationState.Valid" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "step", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "step", "reflectToAttr": true, "docs": "(optional) Text field interval between legal numbers", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipConfig", "type": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ 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; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }", "complexType": { "original": "Partial", "resolved": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ 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; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }", "references": { "Partial": { "location": "global", "id": "global::Partial" }, "ITooltip": { "location": "import", "path": "../tooltip/tooltip.types", "id": "src/components/tooltip/tooltip.types.ts::ITooltip" } } }, "mutable": false, "attr": "tooltip-config", "reflectToAttr": false, "docs": "(optional) Text field tooltip configuration", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ 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; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "EInputFieldType.Date | EInputFieldType.DateTime | EInputFieldType.Email | EInputFieldType.Number | EInputFieldType.Password | EInputFieldType.Radio | EInputFieldType.Text", "complexType": { "original": "EInputFieldType", "resolved": "EInputFieldType.Date | EInputFieldType.DateTime | EInputFieldType.Email | EInputFieldType.Number | EInputFieldType.Password | EInputFieldType.Radio | EInputFieldType.Text", "references": { "EInputFieldType": { "location": "import", "path": "./text-field.types", "id": "src/components/text-field/text-field.types.ts::EInputFieldType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(optional) Text field type", "docsTags": [ { "name": "inheritdoc" } ], "default": "EInputFieldType.Text", "values": [ { "type": "EInputFieldType.Date" }, { "type": "EInputFieldType.DateTime" }, { "type": "EInputFieldType.Email" }, { "type": "EInputFieldType.Number" }, { "type": "EInputFieldType.Password" }, { "type": "EInputFieldType.Radio" }, { "type": "EInputFieldType.Text" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "useInputMask", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "use-input-mask", "reflectToAttr": true, "docs": "(optional) Use a input mask when the text field type is number (default true)", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "number | string", "complexType": { "original": "string | number | null", "resolved": "number | string", "references": {} }, "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "(optional) Text field value", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "valuePrefix", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value-prefix", "reflectToAttr": true, "docs": "(optional) Defines the prefix that adds context to displayed values", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "focusInput", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "focusInput() => Promise", "parameters": [], "docs": "Focuses the input", "docsTags": [] } ], "events": [ { "event": "fieldClick", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emmited when there's a click on this element", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "rightActionClick", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the right icon is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "textChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when a keyboard input occurred", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "textFieldBlur", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when text field lost focus", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--background-color-default", "annotation": "prop", "docs": "Background color when state is default.", "mode": "light" }, { "name": "--background-color-default", "annotation": "prop", "docs": "Background color when state is default.", "mode": "night" }, { "name": "--background-color-disabled", "annotation": "prop", "docs": "Background color when state is disabled.", "mode": "light" }, { "name": "--background-color-disabled", "annotation": "prop", "docs": "Background color when state is disabled.", "mode": "night" }, { "name": "--border-color-default", "annotation": "prop", "docs": "Border color when state is default.", "mode": "light" }, { "name": "--border-color-default", "annotation": "prop", "docs": "Border color when state is default.", "mode": "night" }, { "name": "--border-color-error", "annotation": "prop", "docs": "Border color when state is invalid.", "mode": "light" }, { "name": "--border-color-error", "annotation": "prop", "docs": "Border color when state is invalid.", "mode": "night" }, { "name": "--border-color-focused", "annotation": "prop", "docs": "Border color when state is focused.", "mode": "light" }, { "name": "--border-color-focused", "annotation": "prop", "docs": "Border color when state is focused.", "mode": "night" }, { "name": "--input-height-large", "annotation": "prop", "docs": "Text Field's large height.", "mode": "light" }, { "name": "--input-height-large", "annotation": "prop", "docs": "Text Field's large height.", "mode": "night" }, { "name": "--input-height-small", "annotation": "prop", "docs": "Text Field's small height.", "mode": "light" }, { "name": "--input-height-small", "annotation": "prop", "docs": "Text Field's small height.", "mode": "night" }, { "name": "--input-max-width", "annotation": "prop", "docs": "Text Field's max width.", "mode": "light" }, { "name": "--input-max-width", "annotation": "prop", "docs": "Text Field's max width.", "mode": "night" }, { "name": "--input-min-width", "annotation": "prop", "docs": "Text Field's min width.", "mode": "light" }, { "name": "--input-min-width", "annotation": "prop", "docs": "Text Field's min width.", "mode": "night" }, { "name": "--input-width", "annotation": "prop", "docs": "Text Field's width.", "mode": "light" }, { "name": "--input-width", "annotation": "prop", "docs": "Text Field's width.", "mode": "night" }, { "name": "--text-color-action-icon-default", "annotation": "prop", "docs": "Action icon color when state is default.", "mode": "light" }, { "name": "--text-color-action-icon-default", "annotation": "prop", "docs": "Action icon color when state is default.", "mode": "night" }, { "name": "--text-color-action-icon-disabled", "annotation": "prop", "docs": "Action icon color when state is disabled.", "mode": "light" }, { "name": "--text-color-action-icon-disabled", "annotation": "prop", "docs": "Action icon color when state is disabled.", "mode": "night" }, { "name": "--text-color-action-icon-focused", "annotation": "prop", "docs": "Action icon color when state is focused.", "mode": "light" }, { "name": "--text-color-action-icon-focused", "annotation": "prop", "docs": "Action icon color when state is focused.", "mode": "night" }, { "name": "--text-color-help-text-default", "annotation": "prop", "docs": "Help Text color when state is default.", "mode": "light" }, { "name": "--text-color-help-text-default", "annotation": "prop", "docs": "Help Text color when state is default.", "mode": "night" }, { "name": "--text-color-help-text-error", "annotation": "prop", "docs": "Help Text color when state is invalid.", "mode": "light" }, { "name": "--text-color-help-text-error", "annotation": "prop", "docs": "Help Text color when state is invalid.", "mode": "night" }, { "name": "--text-color-icon-default", "annotation": "prop", "docs": "Icon color when state is default.", "mode": "light" }, { "name": "--text-color-icon-default", "annotation": "prop", "docs": "Icon color when state is default.", "mode": "night" }, { "name": "--text-color-icon-disabled", "annotation": "prop", "docs": "Icon color when state is disabled.", "mode": "light" }, { "name": "--text-color-icon-disabled", "annotation": "prop", "docs": "Icon color when state is disabled.", "mode": "night" }, { "name": "--text-color-icon-focused", "annotation": "prop", "docs": "Icon color when state is focused.", "mode": "light" }, { "name": "--text-color-icon-focused", "annotation": "prop", "docs": "Icon color when state is focused.", "mode": "night" }, { "name": "--text-color-input-default", "annotation": "prop", "docs": "Input text color when state is default.", "mode": "light" }, { "name": "--text-color-input-default", "annotation": "prop", "docs": "Input text color when state is default.", "mode": "night" }, { "name": "--text-color-input-disabled", "annotation": "prop", "docs": "Input text color when state is disabled.", "mode": "light" }, { "name": "--text-color-input-disabled", "annotation": "prop", "docs": "Input text color when state is disabled.", "mode": "night" }, { "name": "--text-color-input-focused", "annotation": "prop", "docs": "Input Text color when state is focused.", "mode": "light" }, { "name": "--text-color-input-focused", "annotation": "prop", "docs": "Input Text color when state is focused.", "mode": "night" }, { "name": "--text-color-label", "annotation": "prop", "docs": "Label Text color.", "mode": "light" }, { "name": "--text-color-label", "annotation": "prop", "docs": "Label Text color.", "mode": "night" }, { "name": "--text-color-placeholder-default", "annotation": "prop", "docs": "Placeholder text color when state is default.", "mode": "light" }, { "name": "--text-color-placeholder-default", "annotation": "prop", "docs": "Placeholder text color when state is default.", "mode": "night" }, { "name": "--text-color-placeholder-disabled", "annotation": "prop", "docs": "Placeholder text color when state is disabled.", "mode": "light" }, { "name": "--text-color-placeholder-disabled", "annotation": "prop", "docs": "Placeholder text color when state is disabled.", "mode": "night" }, { "name": "--text-color-placeholder-focused", "annotation": "prop", "docs": "Placeholder text color when state is focused.", "mode": "light" }, { "name": "--text-color-placeholder-focused", "annotation": "prop", "docs": "Placeholder text color when state is focused.", "mode": "night" } ], "slots": [], "parts": [ { "name": "badge", "docs": "badge rendered at the right of the text field" }, { "name": "input-container", "docs": "container that includes the input, right and left slot" } ], "dependents": [ "kv-dropdown", "kv-search", "kv-select-create-option" ], "dependencies": [ "kv-tooltip", "kv-form-label", "kv-icon", "kv-dirty-dot", "kv-badge", "kv-form-help-text" ], "dependencyGraph": { "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-dropdown": [ "kv-text-field" ], "kv-search": [ "kv-text-field" ], "kv-select-create-option": [ "kv-text-field" ] } }, { "filePath": "src/components/time-picker/time-picker.tsx", "encapsulation": "none", "tag": "kv-time-picker", "readme": "# kv-time-range-picker\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTimePicker } from '@kelvininc/react-ui-components';\n\nexport const KvTimePickerExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\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", "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", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disableTimezoneSelection", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disable-timezone-selection", "reflectToAttr": true, "docs": "(optional) Lets the timezone visible but doens't let the user change it", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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) Defines if the dropdown is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayCustomizeInterval", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "display-customize-interval", "reflectToAttr": true, "docs": "(optional) Determines if the customize interval otion is visible", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "displayTimezoneDropdown", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "display-timezone-dropdown", "reflectToAttr": true, "docs": "(optional) Determines if the timezone dropdown is visible", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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 possible positions", "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; })[]; platform?: Platform; }" } ], "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }", "complexType": { "original": "Partial", "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; 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) Configuration of the dropdown input", "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; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "relativeTimePickerOptions", "type": "IRelativeTimePickerOption[][]", "complexType": { "original": "IRelativeTimePickerOption[][]", "resolved": "IRelativeTimePickerOption[][]", "references": { "IRelativeTimePickerOption": { "location": "import", "path": "../relative-time-picker/relative-time-picker.types", "id": "src/components/relative-time-picker/relative-time-picker.types.ts::IRelativeTimePickerOption" } } }, "mutable": false, "attr": "relative-time-picker-options", "reflectToAttr": false, "docs": "(optional) Relative time picker options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS", "values": [ { "type": "IRelativeTimePickerOption[][]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedTimeOption", "type": "ITimePickerTime | ITimePickerTimeState", "complexType": { "original": "ITimePickerTimeState | ITimePickerTime", "resolved": "ITimePickerTime | ITimePickerTimeState", "references": { "ITimePickerTimeState": { "location": "import", "path": "./time-picker.types", "id": "src/components/time-picker/time-picker.types.ts::ITimePickerTimeState" }, "ITimePickerTime": { "location": "import", "path": "./time-picker.types", "id": "src/components/time-picker/time-picker.types.ts::ITimePickerTime" } } }, "mutable": false, "attr": "selected-time-option", "reflectToAttr": false, "docs": "(optional) Selected time key", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "ITimePickerTime" }, { "type": "ITimePickerTimeState" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showCalendar", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-calendar", "reflectToAttr": true, "docs": "(optional) Determines if the show calendar toggle is enabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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) 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.TopStart", "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 }, { "name": "zIndex", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "z-index", "reflectToAttr": false, "docs": "(optional) The time picker's z-index (default: 9003)", "docsTags": [ { "name": "inheritdoc" } ], "default": "TIME_PICKER_PORTAL_Z_INDEX", "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "cancelClicked", "detail": "CustomEvent", "bubbles": true, "complexType": { "original": "CustomEvent", "resolved": "CustomEvent", "references": { "CustomEvent": { "location": "global", "id": "global::CustomEvent" }, "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when cancel button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "dropdownStateChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when dropdown state changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "showCalendarStateChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when show calendar button state changes", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "timeRangeChange", "detail": "ITimePickerTime", "bubbles": true, "complexType": { "original": "ITimePickerTime", "resolved": "ITimePickerTime", "references": { "ITimePickerTime": { "location": "import", "path": "./time-picker.types", "id": "src/components/time-picker/time-picker.types.ts::ITimePickerTime" } } }, "cancelable": true, "composed": true, "docs": "Emitted when time range changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-dropdown", "kv-relative-time-picker", "kv-absolute-time-picker", "kv-switch-button", "kv-action-button-text", "kv-tooltip" ], "dependencyGraph": { "kv-time-picker": [ "kv-dropdown", "kv-relative-time-picker", "kv-absolute-time-picker", "kv-switch-button", "kv-action-button-text", "kv-tooltip" ], "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-relative-time-picker": [ "kv-time-picker-select-option", "kv-select-option", "kv-input-wrapper", "kv-single-select-dropdown" ], "kv-select-option": [ "kv-checkbox", "kv-icon", "kv-dirty-dot", "kv-action-button-icon" ], "kv-checkbox": [ "kv-icon" ], "kv-action-button-icon": [ "kv-action-button", "kv-icon", "kv-badge" ], "kv-input-wrapper": [ "kv-icon" ], "kv-single-select-dropdown": [ "kv-dropdown", "kv-select-multi-options" ], "kv-select-multi-options": [ "kv-virtualized-list", "kv-select-option", "kv-select", "kv-tooltip", "kv-illustration-message", "kv-select-create-option", "kv-select-shortcuts-label" ], "kv-select": [ "kv-search" ], "kv-search": [ "kv-text-field" ], "kv-illustration-message": [ "kv-illustration" ], "kv-select-create-option": [ "kv-text-field", "kv-action-button-icon" ], "kv-select-shortcuts-label": [ "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-switch-button": [ "kv-icon" ], "kv-action-button-text": [ "kv-action-button", "kv-icon" ] } }, { "filePath": "src/components/time-picker-select-option/time-picker-select-option.tsx", "encapsulation": "shadow", "tag": "kv-time-picker-select-option", "readme": "# kv-relative-time-select-option\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvTimePickerSelectOption } from '@kelvininc/react-ui-components';\nexport const KvTimePickerSelectOptionExample: React.FC = () => (\n <>\n\t{/*-- With all properties (only label and value are mandatory) --*/}\n\t\n\t\n \n);\n```\n" }, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) The description of the text displayed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) The text to display on the item", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "selected", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selected", "reflectToAttr": true, "docs": "(optional) If `true` the item is selected", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(required) The item value", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "itemSelected", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the user clicks on the item", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--time-picker-select-option-background-color", "annotation": "prop", "docs": "Background color." }, { "name": "--time-picker-select-option-height", "annotation": "prop", "docs": "Select option height." }, { "name": "--time-picker-select-option-padding", "annotation": "prop", "docs": "Select padding." } ], "slots": [], "parts": [], "dependents": [ "kv-relative-time-picker" ], "dependencies": [], "dependencyGraph": { "kv-relative-time-picker": [ "kv-time-picker-select-option" ] } }, { "filePath": "src/components/toaster/toaster.tsx", "encapsulation": "shadow", "tag": "kv-toaster", "readme": "# kv-toaster\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvToaster, EToasterType } from '@kelvininc/react-ui-components';\n\nexport const ToasterExample: React.FC = () => (\n\t<>\n\t\t{/*-- Info --*/}\n\t\t\n\n\t\t{/*--Error --*/}\n\t\t\n\n\t\t{/*-- Success --*/}\n\t\t\n\t\t\n\t\t{/*-- Warning --*/}\n\t\t\n\t\n)\n```\n" }, "props": [ { "name": "closable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "closable", "reflectToAttr": true, "docs": "(optional) If true the toaster has a close button", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(optional) Secondary message to display", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "header", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "header", "reflectToAttr": true, "docs": "(required) Main message to display", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "ttl", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "ttl", "reflectToAttr": true, "docs": "(optional) Time to live of the toaster", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "EToasterType.Error | EToasterType.Info | EToasterType.Success | EToasterType.Warning", "complexType": { "original": "EToasterType", "resolved": "EToasterType.Error | EToasterType.Info | EToasterType.Success | EToasterType.Warning", "references": { "EToasterType": { "location": "import", "path": "./toaster.types", "id": "src/components/toaster/toaster.types.ts::EToasterType" } } }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "(required) Type of toaster", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EToasterType.Error" }, { "type": "EToasterType.Info" }, { "type": "EToasterType.Success" }, { "type": "EToasterType.Warning" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "afterClose", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emiited after the toaster has closed", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "afterOpen", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Emiited after the toaster has opened", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "clickCloseButton", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when close button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "ttlExpired", "detail": "CloseEvent", "bubbles": true, "complexType": { "original": "CloseEvent", "resolved": "CloseEvent", "references": { "CloseEvent": { "location": "global", "id": "global::CloseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when ttl is defined and expires", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--background-color-default", "annotation": "prop", "docs": "Toaster background color." }, { "name": "--reset-button-focused", "annotation": "prop", "docs": "Close button focused." }, { "name": "--toaster-icons-height", "annotation": "prop", "docs": "toaster icons height" }, { "name": "--toaster-icons-width", "annotation": "prop", "docs": "toaster icons width" }, { "name": "--toaster-large-height", "annotation": "prop", "docs": "Toaster with two messages." }, { "name": "--toaster-small-height", "annotation": "prop", "docs": "Toaster with one message." }, { "name": "--toaster-top-space", "annotation": "prop", "docs": "Space between Toaster and top of page." }, { "name": "--toaster-width", "annotation": "prop", "docs": "Toaster width." } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-icon" ], "dependencyGraph": { "kv-toaster": [ "kv-icon" ] } }, { "filePath": "src/components/toggle-button/toggle-button.tsx", "encapsulation": "shadow", "tag": "kv-toggle-button", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "toggle-button - The toggle action." }, { "name": "part", "text": "toggle-icon - The toggle button's icon container." }, { "name": "part", "text": "toggle-text - The toggle button's text container." }, { "name": "part", "text": "toggle-label - The toggle button's label container." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvToggleButton, EIconName } from '@kelvininc/react-ui-components';\n\nexport const ToggleButtonExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- Checked --*/}\n\t\t\n\n\t\t{/*-- With Icon --*/}\n\t\t\n\n\t\t{/*-- Only Icon --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "checked", "reflectToAttr": true, "docs": "(optional) Sets the button as checked", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "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) Sets the button's styling to be disabled and disables click events", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../../types", "id": "src/types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) The button's icon. Only valid for toggle button icon", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) The button's label. Only valid for toggle button text", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "preventDefault", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "prevent-default", "reflectToAttr": true, "docs": "(optional) Defines if the item click event should prevent default behaviour.", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Button's size", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Small", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "(required) The value to be emitted upon click events", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" }, { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "withRadio", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "with-radio", "reflectToAttr": true, "docs": "(optional) Sets if the button is a radio button", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "checkedChange", "detail": "number | string", "bubbles": true, "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "cancelable": true, "composed": true, "docs": "Emits when a button is clicked", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--background-color-active", "annotation": "prop", "docs": "toggle button component's background color active." }, { "name": "--background-color-default", "annotation": "prop", "docs": "toggle button component's background color default." }, { "name": "--background-color-disabled", "annotation": "prop", "docs": "toggle button component's background color disabled." }, { "name": "--border-color-active", "annotation": "prop", "docs": "toggle button component's border color active." }, { "name": "--border-color-default", "annotation": "prop", "docs": "toggle button component's border color default." }, { "name": "--border-color-disabled", "annotation": "prop", "docs": "toggle button component's border color disabled." }, { "name": "--button-height-large", "annotation": "prop", "docs": "toggle button component's height when size is large." }, { "name": "--button-height-small", "annotation": "prop", "docs": "toggle button component's height when size is small." }, { "name": "--button-icon-height-large", "annotation": "prop", "docs": "toggle button component's icon height when size is large." }, { "name": "--button-icon-height-small", "annotation": "prop", "docs": "toggle button component's icon height when size is small." }, { "name": "--button-icon-width-large", "annotation": "prop", "docs": "toggle button component's icon width when size is large." }, { "name": "--button-icon-width-small", "annotation": "prop", "docs": "toggle button component's icon width when size is small." }, { "name": "--button-padding-large", "annotation": "prop", "docs": "toggle button component's padding when size is large." }, { "name": "--button-padding-small", "annotation": "prop", "docs": "toggle button component's padding when size is small." }, { "name": "--text-color-active", "annotation": "prop", "docs": "toggle button component's text color active." }, { "name": "--text-color-default", "annotation": "prop", "docs": "toggle button component's text color default." }, { "name": "--text-color-disabled", "annotation": "prop", "docs": "toggle button component's text color disabled." } ], "slots": [], "parts": [ { "name": "toggle-button", "docs": "The toggle action." }, { "name": "toggle-icon", "docs": "The toggle button's icon container." }, { "name": "toggle-label", "docs": "The toggle button's label container." }, { "name": "toggle-text", "docs": "The toggle button's text container." } ], "dependents": [ "kv-toggle-button-group", "kv-toggle-switch" ], "dependencies": [ "kv-radio", "kv-icon" ], "dependencyGraph": { "kv-toggle-button": [ "kv-radio", "kv-icon" ], "kv-toggle-button-group": [ "kv-toggle-button" ], "kv-toggle-switch": [ "kv-toggle-button" ] } }, { "filePath": "src/components/toggle-button-group/toggle-button-group.tsx", "encapsulation": "shadow", "tag": "kv-toggle-button-group", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "toggle-button-container - Container of toggle button." } ], "usage": {}, "props": [ { "name": "buttons", "type": "IToggleButton[]", "complexType": { "original": "IToggleButton[]", "resolved": "IToggleButton[]", "references": { "IToggleButton": { "location": "import", "path": "../toggle-button/toggle-button.types", "id": "src/components/toggle-button/toggle-button.types.ts::IToggleButton" } } }, "mutable": false, "attr": "buttons", "reflectToAttr": false, "docs": "(optional) List of toggle buttons", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "IToggleButton[]" } ], "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) Sets styling to be disabled and disables click events for all buttons", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disabledButtons", "type": "{ [x: string]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "disabled-buttons", "reflectToAttr": false, "docs": "(optional) A record with the button's label/value and the if the respective button is disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "radioButtons", "type": "{ [x: string]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "radio-buttons", "reflectToAttr": false, "docs": "(optional) A record with the button's label/value and the if the respective button is a radio button", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selectedButtons", "type": "{ [x: string]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "selected-buttons", "reflectToAttr": false, "docs": "(optional) A record with the button's label/value and with if the selected value", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: boolean; }" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Sets the size for all toggle buttons", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Small", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "withRadio", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "with-radio", "reflectToAttr": true, "docs": "(optional) If `true` all toggle buttons will have a radio button", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "checkedChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "When the toggle button selection changes, emit the requested tab's key", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "toggle-button-container", "docs": "Container of toggle button." } ], "dependents": [], "dependencies": [ "kv-toggle-button" ], "dependencyGraph": { "kv-toggle-button-group": [ "kv-toggle-button" ], "kv-toggle-button": [ "kv-radio", "kv-icon" ] } }, { "filePath": "src/components/toggle-switch/toggle-switch.tsx", "encapsulation": "shadow", "tag": "kv-toggle-switch", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "toggle-switch-option-container - Container of toggle options." } ], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "(optional) If `true` all toggle buttons will be disabled", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "disabledButtons", "type": "{ [x: string]: boolean; }", "complexType": { "original": "Record", "resolved": "{ [x: string]: boolean; }", "references": { "Record": { "location": "global", "id": "global::Record" } } }, "mutable": false, "attr": "disabled-buttons", "reflectToAttr": false, "docs": "(optional) A record with the button's key and its individual disabled state", "docsTags": [ { "name": "inheritdoc" } ], "default": "{}", "values": [ { "type": "{ [x: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "type": "IToggleSwitchOption[]", "complexType": { "original": "IToggleSwitchOption[]", "resolved": "IToggleSwitchOption[]", "references": { "IToggleSwitchOption": { "location": "import", "path": "./toggle-switch.types", "id": "src/components/toggle-switch/toggle-switch.types.ts::IToggleSwitchOption" } } }, "mutable": false, "attr": "options", "reflectToAttr": false, "docs": "(optional) List of toggle switch options", "docsTags": [ { "name": "inheritdoc" } ], "default": "[]", "values": [ { "type": "IToggleSwitchOption[]" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "selectedOption", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "selected-option", "reflectToAttr": true, "docs": "(optional) Toggle switch selected option key", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "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": "../../types", "id": "src/types.ts::EComponentSize" } } }, "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "(optional) Sets the size for all toggle buttons", "docsTags": [ { "name": "inheritdoc" } ], "default": "EComponentSize.Small", "values": [ { "type": "EComponentSize.Large" }, { "type": "EComponentSize.Small" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "checkedChange", "detail": "string", "bubbles": true, "complexType": { "original": "string", "resolved": "string", "references": {} }, "cancelable": true, "composed": true, "docs": "When the toggle switch selection changes, emit the requested value", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "toggle-switch-option-container", "docs": "Container of toggle options." } ], "dependents": [], "dependencies": [ "kv-toggle-button" ], "dependencyGraph": { "kv-toggle-switch": [ "kv-toggle-button" ], "kv-toggle-button": [ "kv-radio", "kv-icon" ] } }, { "filePath": "src/components/toggle-tip/toggle-tip.tsx", "encapsulation": "none", "tag": "kv-toggle-tip", "readme": "# _kv-toggle-tip_\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvToggleTip, KvIcon, KvActionButton, EIconName, ETooltipPosition, EActionButtonType } from '@kelvininc/react-ui-components';\n\nexport const ToggleTipExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n\t\t\n\t\tLearn More\n\t\n\n\t{/*-- With Fixed Position --*/}\n\t\n\t\t\n\t\tLearn More\n\t\n\n\t{/*-- With Allowed Positions --*/}\n\t\n\t\t\n\t\tLearn More\n\t\n \n);\n```\n" }, "props": [ { "name": "allowedPositions", "type": "ETooltipPosition[]", "complexType": { "original": "ETooltipPosition[]", "resolved": "ETooltipPosition[]", "references": { "ETooltipPosition": { "location": "import", "path": "../../utils/types/components", "id": "src/utils/types/components.ts::ETooltipPosition" } } }, "mutable": false, "attr": "allowed-positions", "reflectToAttr": false, "docs": "(optional) Array of allowed positions of toggle tip (if defined the 'position' is ignored)", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "ETooltipPosition[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../utils/types/components", "id": "src/utils/types/components.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "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 it will disable clicks to open toggle tip", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isFixed", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-fixed", "reflectToAttr": true, "docs": "(optional) if true it will ignore outside clicks to close the toggle tip", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "isOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "is-open", "reflectToAttr": true, "docs": "(optional) Set open state of toggle tip, default false", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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": "options", "reflectToAttr": false, "docs": "(optional) Object with tooltip position options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_TOOLTIP_CONFIG", "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; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "position", "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": "../../utils/types/components", "id": "src/utils/types/components.ts::ETooltipPosition" } } }, "mutable": false, "attr": "position", "reflectToAttr": true, "docs": "(optional) Position of toggletip", "docsTags": [ { "name": "inheritdoc" } ], "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 }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(optional) Text of toggletip", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "withArrow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "with-arrow", "reflectToAttr": true, "docs": "(optional) if true it will render an arrow pointing to the opening element", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "openStateChange", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when the dropdown opens state changes", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [ { "event": "click", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "kv-description-list", "kv-wizard-header" ], "dependencies": [ "kv-portal", "kv-tooltip-text" ], "dependencyGraph": { "kv-toggle-tip": [ "kv-portal", "kv-tooltip-text" ], "kv-description-list": [ "kv-toggle-tip" ], "kv-wizard-header": [ "kv-toggle-tip" ] } }, { "filePath": "src/components/tooltip/tooltip.tsx", "encapsulation": "shadow", "tag": "kv-tooltip", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "content - The tooltip content." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTooltip, KvActionButton, ETooltipPosition, EActionButtonType } from '@kelvininc/react-ui-components';\n\nexport const TooltipExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n\t\tHover me!\n\t\n\n\t{/*-- With Fixed Position --*/}\n\t\n\t\tHover me!\n\t\n\n\t{/*-- With Allowed Positions --*/}\n\t\n\t\tHover me!\n\t\n \n);\n```\n" }, "props": [ { "name": "allowedPositions", "type": "ETooltipPosition[]", "complexType": { "original": "ETooltipPosition[]", "resolved": "ETooltipPosition[]", "references": { "ETooltipPosition": { "location": "import", "path": "../../types", "id": "src/types.ts::ETooltipPosition" } } }, "mutable": false, "attr": "allowed-positions", "reflectToAttr": false, "docs": "(optional) Array of allowed positions of toggle tip (if defined the 'position' is ignored)", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "ETooltipPosition[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "contentElement", "type": "HTMLElement", "complexType": { "original": "HTMLElement", "resolved": "HTMLElement", "references": { "HTMLElement": { "location": "global", "id": "global::HTMLElement" } } }, "mutable": false, "attr": "content-element", "reflectToAttr": false, "docs": "(optional) Content element reference", "docsTags": [ { "name": "inheritdoc" } ], "default": "null", "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customClass", "type": "CssClassMap | string | string[]", "complexType": { "original": "CustomCssClass", "resolved": "CssClassMap | string | string[]", "references": { "CustomCssClass": { "location": "import", "path": "../../types", "id": "src/types.ts::CustomCssClass" } } }, "mutable": false, "attr": "custom-class", "reflectToAttr": true, "docs": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic.", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "CssClassMap" }, { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "customStyle", "type": "{ [key: string]: string; }", "complexType": { "original": "HostAttributes['style']", "resolved": "{ [key: string]: string; }", "references": { "HostAttributes": { "location": "import", "path": "@stencil/core/internal", "id": "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts::HostAttributes" } } }, "mutable": false, "attr": "custom-style", "reflectToAttr": false, "docs": "(optional) Additional style to apply for custom CSS.", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ [key: string]: string; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "delay", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "delay", "reflectToAttr": true, "docs": "(optional) Delay to show tooltip in milliseconds.", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_DELAY_CONFIG", "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) Disables tooltip", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "options", "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; })[]; platform?: Platform; }", "complexType": { "original": "Partial", "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; })[]; 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": "options", "reflectToAttr": false, "docs": "(optional) Object with tooltip position options", "docsTags": [ { "name": "inheritdoc" } ], "default": "DEFAULT_POSITION_CONFIG", "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; })[]; platform?: Platform; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "position", "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": "position", "reflectToAttr": true, "docs": "(optional) Position of tooltip", "docsTags": [ { "name": "inheritdoc" } ], "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 }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(optional) Text of tooltip", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "truncate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "truncate", "reflectToAttr": false, "docs": "(optional) Set `true` to display tooltip only when the content is truncated", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "withArrow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "with-arrow", "reflectToAttr": true, "docs": "(optional) if true it will render an arrow pointing to the opening element (default false)", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "content", "docs": "The tooltip content." } ], "dependents": [ "kv-copy-to-clipboard", "kv-description-list", "kv-info-label", "kv-select-multi-options", "kv-text-field", "kv-time-picker", "kv-tree-item", "kv-wizard-footer" ], "dependencies": [ "kv-portal", "kv-tooltip-text" ], "dependencyGraph": { "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ], "kv-copy-to-clipboard": [ "kv-tooltip" ], "kv-description-list": [ "kv-tooltip" ], "kv-info-label": [ "kv-tooltip" ], "kv-select-multi-options": [ "kv-tooltip" ], "kv-text-field": [ "kv-tooltip" ], "kv-time-picker": [ "kv-tooltip" ], "kv-tree-item": [ "kv-tooltip" ], "kv-wizard-footer": [ "kv-tooltip" ] } }, { "filePath": "src/components/tooltip-text/tooltip-text.tsx", "encapsulation": "shadow", "tag": "kv-tooltip-text", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "part", "text": "tooltip-container - The tooltip container." }, { "name": "part", "text": "tooltip-slot-content - The tooltip slot content." } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvTooltipText } from '@kelvininc/react-ui-components';\n\nexport const TooltipTextExample: React.FC = () => (\n <>\n {/*-- Default --*/}\n\t\n \n);\n```\n" }, "props": [ { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "text", "reflectToAttr": true, "docs": "(optional) Text of tooltip", "docsTags": [ { "name": "inheritdoc" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--container-max-width", "annotation": "prop", "docs": "The max width for the tooltip container (default: 240px)." }, { "name": "--container-white-space", "annotation": "prop", "docs": "The white space strategy for the tooltip container (default: normal)." } ], "slots": [], "parts": [ { "name": "tooltip-container", "docs": "The tooltip container." }, { "name": "tooltip-slot-content", "docs": "The tooltip slot content." } ], "dependents": [ "kv-toggle-tip", "kv-tooltip" ], "dependencies": [], "dependencyGraph": { "kv-toggle-tip": [ "kv-tooltip-text" ], "kv-tooltip": [ "kv-tooltip-text" ] } }, { "filePath": "src/components/tree/tree.tsx", "encapsulation": "shadow", "tag": "kv-tree", "readme": "# **\n", "docs": "", "docsTags": [ { "name": "part", "text": "tree - The tree container." }, { "name": "part", "text": "tree-item - The tree item container." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvTree } from '@kelvininc/react-ui-components';\n\nexport const TreeExample: React.FC = () => (\n\t<>\n\t\t{/*-- With required props --*/}\n\t\t\n\t\t\n\t\t{/*-- With required props and all tree loading --*/}\n\t\t\n\t\t\n\t\t{/*-- With required props and selected node --*/}\n\t\t\n\n\t\t{/*-- With required props and hidden nodes dictionary --*/}\n\t\t\n\t\t\n\t\t\n\t\t{/*-- With required props and expanded nodes dictionary --*/}\n\t\t\n\t\t\n\t\t\n\t\t{/*-- With required props and disabled nodes dictionary --*/}\n\t\t\n\t\t\n\t\t\n\t\t{/*-- With required props and highlighted nodes dictionary --*/}\n\t\t\n\t\t\n\t\t\n\t\t{/*-- With required props and loading nodes dictionary --*/}\n\t\t\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "disabledNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "disabled-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is disabled.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "expandIcon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "expand-icon", "reflectToAttr": true, "docs": "(optional) Defines if icon to use for expanding, should be and arrow like icon pointing up.", "docsTags": [], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "expandedNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "expanded-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hiddenNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "hidden-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is hidden.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "highlightedNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "highlighted-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is highlighted.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "labelsSize", "type": "ETreeItemLabelSize.Regular | ETreeItemLabelSize.Small", "complexType": { "original": "ETreeItemLabelSize", "resolved": "ETreeItemLabelSize.Regular | ETreeItemLabelSize.Small", "references": { "ETreeItemLabelSize": { "location": "import", "path": "../../types", "id": "src/types.ts::ETreeItemLabelSize" } } }, "mutable": false, "attr": "labels-size", "reflectToAttr": true, "docs": "(optional) Defines the font size of title and subtitle labels.", "docsTags": [], "values": [ { "type": "ETreeItemLabelSize.Regular" }, { "type": "ETreeItemLabelSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "(optional) Defines whether the all tree nodes is loading.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loadingNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "loading-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is loading.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "nodes", "type": "ITreeNodeItem[]", "complexType": { "original": "ITreeNodeItem[]", "resolved": "ITreeNodeItem[]", "references": { "ITreeNodeItem": { "location": "import", "path": "./tree.types", "id": "src/components/tree/tree.types.ts::ITreeNodeItem" } } }, "mutable": false, "attr": "nodes", "reflectToAttr": false, "docs": "(required) The tree hierarchy items to render in this component", "docsTags": [], "values": [ { "type": "ITreeNodeItem[]" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "selectedNode", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "selected-node", "reflectToAttr": false, "docs": "(optional) The currently selected node id", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showTooltip", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-tooltip", "reflectToAttr": true, "docs": "(optional) Defines whether the label should be displayed as tooltip.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "spotlightedNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "spotlighted-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is spotlight. Only has visual effect for tree nodes with children and expanded.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipDelay", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "tooltip-delay", "reflectToAttr": true, "docs": "(optional) Delay to show tooltip in milliseconds.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "nodeClick", "detail": "ITreeNodeItem", "bubbles": true, "complexType": { "original": "ITreeNodeItem", "resolved": "ITreeNodeItem", "references": { "ITreeNodeItem": { "location": "import", "path": "./tree.types", "id": "src/components/tree/tree.types.ts::ITreeNodeItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the tree node item is clicked", "docsTags": [] }, { "event": "nodeToggleExpand", "detail": "ITreeNodeItem", "bubbles": true, "complexType": { "original": "ITreeNodeItem", "resolved": "ITreeNodeItem", "references": { "ITreeNodeItem": { "location": "import", "path": "./tree.types", "id": "src/components/tree/tree.types.ts::ITreeNodeItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the node expand toggle is clicked", "docsTags": [] } ], "listeners": [], "styles": [ { "name": "--tree-children-offset", "annotation": "prop", "docs": "Offset of the child nodes in px.", "mode": "light" }, { "name": "--tree-children-offset", "annotation": "prop", "docs": "Offset of the child nodes in px.", "mode": "night" }, { "name": "--tree-children-padding-left", "annotation": "prop", "docs": "Left padding for the child nodes in px.", "mode": "light" }, { "name": "--tree-children-padding-left", "annotation": "prop", "docs": "Left padding for the child nodes in px.", "mode": "night" }, { "name": "--tree-node-gap", "annotation": "prop", "docs": "Gap between child nodes in px.", "mode": "light" }, { "name": "--tree-node-gap", "annotation": "prop", "docs": "Gap between child nodes in px.", "mode": "night" }, { "name": "--tree-node-height", "annotation": "prop", "docs": "Tree Node height.", "mode": "light" }, { "name": "--tree-node-height", "annotation": "prop", "docs": "Tree Node height.", "mode": "night" }, { "name": "--tree-node-width", "annotation": "prop", "docs": "Tree Node height.", "mode": "light" }, { "name": "--tree-node-width", "annotation": "prop", "docs": "Tree Node height.", "mode": "night" } ], "slots": [], "parts": [ { "name": "tree", "docs": "The tree container." }, { "name": "tree-item", "docs": "The tree item container." } ], "dependents": [ "kv-tree-dropdown" ], "dependencies": [ "kv-tree-item" ], "dependencyGraph": { "kv-tree": [ "kv-tree-item" ], "kv-tree-item": [ "kv-icon", "kv-tooltip", "kv-badge" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ], "kv-tree-dropdown": [ "kv-tree" ] } }, { "filePath": "src/components/tree-dropdown/tree-dropdown.tsx", "encapsulation": "shadow", "tag": "kv-tree-dropdown", "readme": "# kv-dropdown-tree\n\n\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "disabledNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "disabled-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is disabled.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "expandedNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "expanded-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hiddenNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "hidden-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is hidden.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "(optional) Defines whether the all tree nodes is loading.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loadingNodes", "type": "{ [key: string]: boolean; }", "complexType": { "original": "{ [key: string]: boolean }", "resolved": "{ [key: string]: boolean; }", "references": {} }, "mutable": false, "attr": "loading-nodes", "reflectToAttr": false, "docs": "(optional) Dictionary that defines whether the tree node is loading.", "docsTags": [], "values": [ { "type": "{ [key: string]: boolean; }" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "nodes", "type": "ITreeNodeItem[]", "complexType": { "original": "ITreeNodeItem[]", "resolved": "ITreeNodeItem[]", "references": { "ITreeNodeItem": { "location": "import", "path": "../tree/tree.types", "id": "src/components/tree/tree.types.ts::ITreeNodeItem" } } }, "mutable": false, "attr": "nodes", "reflectToAttr": false, "docs": "(required) The tree hierarchy items to render in this component", "docsTags": [], "values": [ { "type": "ITreeNodeItem[]" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "selectedNode", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "selected-node", "reflectToAttr": false, "docs": "(optional) The currently selected node id", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showTooltip", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-tooltip", "reflectToAttr": true, "docs": "(optional) Defines whether the labels should be displayed as tooltip.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipDelay", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "tooltip-delay", "reflectToAttr": true, "docs": "(optional) Delay to show tooltip in milliseconds.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "nodeClick", "detail": "ITreeNodeItem", "bubbles": true, "complexType": { "original": "ITreeNodeItem", "resolved": "ITreeNodeItem", "references": { "ITreeNodeItem": { "location": "import", "path": "../tree/tree.types", "id": "src/components/tree/tree.types.ts::ITreeNodeItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the tree node item is clicked", "docsTags": [] }, { "event": "nodeToggleExpand", "detail": "ITreeNodeItem", "bubbles": true, "complexType": { "original": "ITreeNodeItem", "resolved": "ITreeNodeItem", "references": { "ITreeNodeItem": { "location": "import", "path": "../tree/tree.types", "id": "src/components/tree/tree.types.ts::ITreeNodeItem" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the node expand toggle is clicked", "docsTags": [] } ], "listeners": [], "styles": [ { "name": "--dropdown-children-offset", "annotation": "prop", "docs": "Offset of the child nodes in px." }, { "name": "--dropdown-node-gap", "annotation": "prop", "docs": "Gap between child nodes in px." }, { "name": "--dropdown-padding-left", "annotation": "prop", "docs": "Left padding of option text in px." }, { "name": "--dropdown-width", "annotation": "prop", "docs": "Container width in px;" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-tree" ], "dependencyGraph": { "kv-tree-dropdown": [ "kv-tree" ], "kv-tree": [ "kv-tree-item" ], "kv-tree-item": [ "kv-icon", "kv-tooltip", "kv-badge" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ] } }, { "filePath": "src/components/tree-item/tree-item.tsx", "encapsulation": "shadow", "tag": "kv-tree-item", "readme": "# __\n", "docs": "", "docsTags": [ { "name": "slot", "text": "child-slot - Content is placed in the child subgroup and can be expanded and collapsed." }, { "name": "part", "text": "children - The children container." } ], "usage": { "react": "```tsx\nimport React from 'react';\nimport { KvTreeItem, EIconName, EBadgeState } from '@kelvininc/react-ui-components';\n\nexport const TreeItemExample: React.FC = () => (\n\t<>\n\t\t{/*-- Default --*/}\n\t\t\n\n\t\t{/*-- Disabled --*/}\n\t\t\n\n\t\t{/*-- Selected --*/}\n\t\t\n\n\t\t{/*-- Highlighted --*/}\n\t\t\n\n\t\t{/*-- No Filled --*/}\n\t\t\n\n\t\t{/*-- With Icon --*/}\n\t\t\n\n\t\t{/*-- With Counter State --*/}\n\t\t\n\n\t\t{/*-- With Children --*/}\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "additionalLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "additional-label", "reflectToAttr": true, "docs": "(optional) Defines the sub-title of the tree item, displayed under the title.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "counter", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "counter", "reflectToAttr": true, "docs": "(optional) Defines the counter info of the tree item. If set, an badge will be displayed in the end of tree item.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "counterState", "type": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning", "complexType": { "original": "EBadgeState", "resolved": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning", "references": { "EBadgeState": { "location": "import", "path": "../badge/badge.types", "id": "src/components/badge/badge.types.ts::EBadgeState" } } }, "mutable": false, "attr": "counter-state", "reflectToAttr": true, "docs": "(optional) Defines the state of the counter.", "docsTags": [], "values": [ { "type": "EBadgeState.Error" }, { "type": "EBadgeState.Info" }, { "type": "EBadgeState.None" }, { "type": "EBadgeState.Success" }, { "type": "EBadgeState.Warning" } ], "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) Defines whether the tree node is disabled.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "expandIcon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "expand-icon", "reflectToAttr": true, "docs": "(optional) Defines if icon to use for expanding, should be and arrow like icon pointing up.", "docsTags": [], "default": "EIconName.ArrowDropUp", "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "expanded", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "expanded", "reflectToAttr": true, "docs": "(optional) Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hasChildren", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-children", "reflectToAttr": true, "docs": "(optional) Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\nThis property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to true for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "highlighted", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "highlighted", "reflectToAttr": true, "docs": "(optional) Defines whether the tree node is highlighted.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "EIconName", "complexType": { "original": "EIconName", "resolved": "EIconName", "references": { "EIconName": { "location": "import", "path": "../icon/icon.types", "id": "src/components/icon/icon.types.ts::EIconName" } } }, "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "(optional) Defines the icon of the tree item. If set, an icon will be displayed before the label.", "docsTags": [], "values": [ { "type": "EIconName" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "iconState", "type": "ETreeItemState.Error | ETreeItemState.Info | ETreeItemState.None | ETreeItemState.Success | ETreeItemState.Warning", "complexType": { "original": "ETreeItemState", "resolved": "ETreeItemState.Error | ETreeItemState.Info | ETreeItemState.None | ETreeItemState.Success | ETreeItemState.Warning", "references": { "ETreeItemState": { "location": "import", "path": "./tree-item.types", "id": "src/components/tree-item/tree-item.types.ts::ETreeItemState" } } }, "mutable": false, "attr": "icon-state", "reflectToAttr": true, "docs": "(optional) Defines the state of the icon.", "docsTags": [], "values": [ { "type": "ETreeItemState.Error" }, { "type": "ETreeItemState.Info" }, { "type": "ETreeItemState.None" }, { "type": "ETreeItemState.Success" }, { "type": "ETreeItemState.Warning" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Defines the title of the tree item.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "labelsSize", "type": "ETreeItemLabelSize.Regular | ETreeItemLabelSize.Small", "complexType": { "original": "ETreeItemLabelSize", "resolved": "ETreeItemLabelSize.Regular | ETreeItemLabelSize.Small", "references": { "ETreeItemLabelSize": { "location": "import", "path": "./tree-item.types", "id": "src/components/tree-item/tree-item.types.ts::ETreeItemLabelSize" } } }, "mutable": false, "attr": "labels-size", "reflectToAttr": true, "docs": "(optional) Defines the font size of title and subtitle labels.", "docsTags": [], "default": "ETreeItemLabelSize.Small", "values": [ { "type": "ETreeItemLabelSize.Regular" }, { "type": "ETreeItemLabelSize.Small" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "(optional) Defines whether the tree node is loading.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": true, "docs": "(optional) Defines the placeholder of the tree item, displayed when title is not filled.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "preventDefault", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "prevent-default", "reflectToAttr": true, "docs": "(optional) Defines if the item click event should prevent default behaviour.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "selected", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "selected", "reflectToAttr": true, "docs": "(optional) Defines whether the tree node is selected by the user.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "showTooltip", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-tooltip", "reflectToAttr": true, "docs": "(optional) Defines whether the label should be displayed as tooltip.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "spotlighted", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "spotlighted", "reflectToAttr": true, "docs": "(optional) Defines whether the tree node is spotlight.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltipDelay", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "tooltip-delay", "reflectToAttr": true, "docs": "(optional) Delay to show tooltip in milliseconds.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "itemClick", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the tree item is clicked", "docsTags": [] }, { "event": "toggleExpand", "detail": "MouseEvent", "bubbles": true, "complexType": { "original": "MouseEvent", "resolved": "MouseEvent", "references": { "MouseEvent": { "location": "global", "id": "global::MouseEvent" } } }, "cancelable": true, "composed": true, "docs": "Emitted when the expand toggle is clicked", "docsTags": [] } ], "listeners": [ { "event": "itemClick", "capture": false, "passive": false }, { "event": "toggleExpand", "capture": false, "passive": false } ], "styles": [ { "name": "--background-color-default", "annotation": "prop", "docs": "Background color when state is default.", "mode": "light" }, { "name": "--background-color-default", "annotation": "prop", "docs": "Background color when state is default.", "mode": "night" }, { "name": "--background-color-disabled", "annotation": "prop", "docs": "Background color when state is disabled.", "mode": "light" }, { "name": "--background-color-disabled", "annotation": "prop", "docs": "Background color when state is disabled.", "mode": "night" }, { "name": "--background-color-focused", "annotation": "prop", "docs": "Background color when state is focused.", "mode": "light" }, { "name": "--background-color-focused", "annotation": "prop", "docs": "Background color when state is focused.", "mode": "night" }, { "name": "--background-color-highlighted", "annotation": "prop", "docs": "Background color when state is highlighted.", "mode": "light" }, { "name": "--background-color-highlighted", "annotation": "prop", "docs": "Background color when state is highlighted.", "mode": "night" }, { "name": "--border-color-default", "annotation": "prop", "docs": "Border color when state is default.", "mode": "light" }, { "name": "--border-color-default", "annotation": "prop", "docs": "Border color when state is default.", "mode": "night" }, { "name": "--border-color-disabled", "annotation": "prop", "docs": "Border color when state is disabled.", "mode": "light" }, { "name": "--border-color-disabled", "annotation": "prop", "docs": "Border color when state is disabled.", "mode": "night" }, { "name": "--border-color-highlighted", "annotation": "prop", "docs": "Border color when state is highlighted.", "mode": "light" }, { "name": "--border-color-highlighted", "annotation": "prop", "docs": "Border color when state is highlighted.", "mode": "night" }, { "name": "--border-color-selected", "annotation": "prop", "docs": "Border color when state is selected.", "mode": "light" }, { "name": "--border-color-selected", "annotation": "prop", "docs": "Border color when state is selected.", "mode": "night" }, { "name": "--children-margin-left", "annotation": "prop", "docs": "Margin left of the children in px.", "mode": "light" }, { "name": "--children-margin-left", "annotation": "prop", "docs": "Margin left of the children in px.", "mode": "night" }, { "name": "--children-margin-top", "annotation": "prop", "docs": "Margin top of children in px.", "mode": "light" }, { "name": "--children-margin-top", "annotation": "prop", "docs": "Margin top of children in px.", "mode": "night" }, { "name": "--children-offset", "annotation": "prop", "docs": "Offset of the child nodes in px.", "mode": "light" }, { "name": "--children-offset", "annotation": "prop", "docs": "Offset of the child nodes in px.", "mode": "night" }, { "name": "--children-padding-left", "annotation": "prop", "docs": "Padding left of the children in px.", "mode": "light" }, { "name": "--children-padding-left", "annotation": "prop", "docs": "Padding left of the children in px.", "mode": "night" }, { "name": "--connector-lines-color", "annotation": "prop", "docs": "Line color of children's connectors.", "mode": "light" }, { "name": "--connector-lines-color", "annotation": "prop", "docs": "Line color of children's connectors.", "mode": "night" }, { "name": "--icon-color-default", "annotation": "prop", "docs": "Node icon color when node state is default.", "mode": "light" }, { "name": "--icon-color-default", "annotation": "prop", "docs": "Node icon color when node state is default.", "mode": "night" }, { "name": "--icon-color-disabled", "annotation": "prop", "docs": "Node icon color when node state is disabled.", "mode": "light" }, { "name": "--icon-color-disabled", "annotation": "prop", "docs": "Node icon color when node state is disabled.", "mode": "night" }, { "name": "--icon-color-no-filled", "annotation": "prop", "docs": "Node icon color when node state is no-filled.", "mode": "light" }, { "name": "--icon-color-no-filled", "annotation": "prop", "docs": "Node icon color when node state is no-filled.", "mode": "night" }, { "name": "--icon-color-selected", "annotation": "prop", "docs": "Node icon color when node state is selected.", "mode": "light" }, { "name": "--icon-color-selected", "annotation": "prop", "docs": "Node icon color when node state is selected.", "mode": "night" }, { "name": "--node-gap", "annotation": "prop", "docs": "Gap between child nodes in px.", "mode": "light" }, { "name": "--node-gap", "annotation": "prop", "docs": "Gap between child nodes in px.", "mode": "night" }, { "name": "--node-height", "annotation": "prop", "docs": "Tree Node height.", "mode": "light" }, { "name": "--node-height", "annotation": "prop", "docs": "Tree Node height.", "mode": "night" }, { "name": "--node-icon-height", "annotation": "prop", "docs": "Node icon height in px.", "mode": "light" }, { "name": "--node-icon-height", "annotation": "prop", "docs": "Node icon height in px.", "mode": "night" }, { "name": "--node-icon-width", "annotation": "prop", "docs": "Node icon width in px.", "mode": "light" }, { "name": "--node-icon-width", "annotation": "prop", "docs": "Node icon width in px.", "mode": "night" }, { "name": "--node-width", "annotation": "prop", "docs": "Tree Node height.", "mode": "light" }, { "name": "--node-width", "annotation": "prop", "docs": "Tree Node height.", "mode": "night" }, { "name": "--sub-title-color-default", "annotation": "prop", "docs": "Node sub-title color when node state is default.", "mode": "light" }, { "name": "--sub-title-color-default", "annotation": "prop", "docs": "Node sub-title color when node state is default.", "mode": "night" }, { "name": "--sub-title-color-disabled", "annotation": "prop", "docs": "Node sub-title color when node state is disabled.", "mode": "light" }, { "name": "--sub-title-color-disabled", "annotation": "prop", "docs": "Node sub-title color when node state is disabled.", "mode": "night" }, { "name": "--sub-title-color-no-filled", "annotation": "prop", "docs": "Node sub-title color when node state is not filled.", "mode": "light" }, { "name": "--sub-title-color-no-filled", "annotation": "prop", "docs": "Node sub-title color when node state is not filled.", "mode": "night" }, { "name": "--title-color-default", "annotation": "prop", "docs": "Node title color when node state is default.", "mode": "light" }, { "name": "--title-color-default", "annotation": "prop", "docs": "Node title color when node state is default.", "mode": "night" }, { "name": "--title-color-disabled", "annotation": "prop", "docs": "Node title color when node state is disabled.", "mode": "light" }, { "name": "--title-color-disabled", "annotation": "prop", "docs": "Node title color when node state is disabled.", "mode": "night" }, { "name": "--title-color-no-filled", "annotation": "prop", "docs": "Node title color when node state is not filled.", "mode": "light" }, { "name": "--title-color-no-filled", "annotation": "prop", "docs": "Node title color when node state is not filled.", "mode": "night" }, { "name": "--title-color-selected", "annotation": "prop", "docs": "Node title color when node state is selected.", "mode": "light" }, { "name": "--title-color-selected", "annotation": "prop", "docs": "Node title color when node state is selected.", "mode": "night" }, { "name": "--vertical-lines-height", "annotation": "prop", "docs": "Line height of children's connectors.", "mode": "light" }, { "name": "--vertical-lines-height", "annotation": "prop", "docs": "Line height of children's connectors.", "mode": "night" } ], "slots": [ { "name": "child-slot", "docs": "Content is placed in the child subgroup and can be expanded and collapsed." } ], "parts": [ { "name": "children", "docs": "The children container." } ], "dependents": [ "kv-tree" ], "dependencies": [ "kv-icon", "kv-tooltip", "kv-badge" ], "dependencyGraph": { "kv-tree-item": [ "kv-icon", "kv-tooltip", "kv-badge" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ], "kv-tree": [ "kv-tree-item" ] } }, { "filePath": "src/components/virtualized-list/virtualized-list.tsx", "encapsulation": "shadow", "tag": "kv-virtualized-list", "readme": "# __\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "getItemKey", "type": "(index: number) => string", "complexType": { "original": "(index: number) => string", "resolved": "(index: number) => string", "references": {} }, "mutable": false, "attr": "get-item-key", "reflectToAttr": false, "docs": "(required) Defines the given item key", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "(index: number) => string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "itemCount", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "item-count", "reflectToAttr": true, "docs": "(required) Defines the total number of items rendered in the list", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "itemHeight", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "item-height", "reflectToAttr": true, "docs": "(required) Defines the estimated height in pixels of an item", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "overscanCount", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "overscan-count", "reflectToAttr": true, "docs": "(optional) The number of items outside the viewport that are rendered. Default: `5`", "docsTags": [ { "name": "inheritdoc" } ], "default": "5", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "renderItem", "type": "(index: number) => ChildType | Promise | ChildType[] | Promise | Promise[]", "complexType": { "original": "RenderItemFunc", "resolved": "(index: number) => ChildType | Promise | ChildType[] | Promise | Promise[]", "references": { "RenderItemFunc": { "location": "import", "path": "./virtualized-list.types", "id": "src/components/virtualized-list/virtualized-list.types.ts::RenderItemFunc" } } }, "mutable": false, "attr": "render-item", "reflectToAttr": false, "docs": "(required) Defines the item render function", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "(index: number) => ChildType" }, { "type": "Promise" }, { "type": "ChildType[]" }, { "type": "Promise" }, { "type": "Promise[]" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--virtualized-list-max-height", "annotation": "prop", "docs": "Virtualized list maximum height." }, { "name": "--virtualized-list-min-height", "annotation": "prop", "docs": "Virtualized list list minimum height." } ], "slots": [], "parts": [], "dependents": [ "kv-select-multi-options" ], "dependencies": [], "dependencyGraph": { "kv-select-multi-options": [ "kv-virtualized-list" ] } }, { "filePath": "src/components/wizard/wizard.tsx", "encapsulation": "shadow", "tag": "kv-wizard", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { IWizardStep, KvWizard } from '@kelvininc/react-ui-components';\n\nexport const KvWizardExample: React.FC = () => {\n\tconst steps: IWizardStep[] = [\n\t\t{\n\t\t\ttitle: 'Info' ,\n\t\t\tallowGoBack: true\n\t\t},\n\t\t{\n\t\t\tenabled: 'Configuration',\n\t\t\tallowGoBack: true\n\t\t}\n\t];\n\n\tconst onGoToStep = ({ detail }: CustomEvent) => {};\n\tconst onSubmitClick = (ev: CustomEvent) => {};\n\tconst onCancelClick = (ev: CustomEvent) => {};\n\n\treturn (\n\t\t\n\t);\n};\n```\n" }, "props": [ { "name": "completeBtnLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "complete-btn-label", "reflectToAttr": true, "docs": "(optional) A label to show on the last step button. Default: 'Submit'", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "currentStep", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "current-step", "reflectToAttr": true, "docs": "(required) Defines the current step index", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "currentStepState", "type": "{ state: EStepState.Error; error?: string; } | { state: EStepState.Success; error?: never; }", "complexType": { "original": "StepState", "resolved": "{ state: EStepState.Error; error?: string; } | { state: EStepState.Success; error?: never; }", "references": { "StepState": { "location": "import", "path": "./wizard.types", "id": "src/components/wizard/wizard.types.ts::StepState" } } }, "mutable": false, "attr": "current-step-state", "reflectToAttr": false, "docs": "(optional) Defines the current step state. Only the success state allows to proceed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "{ state: EStepState.Error; error?: string; }" }, { "type": "{ state: EStepState.Success; error?: never; }" } ], "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) Defines if the wizard navigation is disabled. Default: false", "docsTags": [ { "name": "inheritdoc" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showHeader", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-header", "reflectToAttr": true, "docs": "(optional) Defines if the header should render. Default: true", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showStepBar", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-step-bar", "reflectToAttr": true, "docs": "(optional) Defines if the step bar should render. Default: true", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "steps", "type": "IWizardStep[]", "complexType": { "original": "IWizardStep[]", "resolved": "IWizardStep[]", "references": { "IWizardStep": { "location": "import", "path": "./wizard.types", "id": "src/components/wizard/wizard.types.ts::IWizardStep" } } }, "mutable": false, "attr": "steps", "reflectToAttr": false, "docs": "(required) Defines the wizard steps", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IWizardStep[]" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "cancelClick", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when a cancel button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "completeClick", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when a complete button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "goToStep", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when it's necessary to go to a different step", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--wizard-footer-height", "annotation": "prop", "docs": "defines how much space the footer should take up" }, { "name": "--wizard-header-height", "annotation": "prop", "docs": "defines how much space the header should take up" }, { "name": "--wizard-stepper-width", "annotation": "prop", "docs": "defines how much space the stepper should take up" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "kv-wizard-header", "kv-wizard-footer" ], "dependencyGraph": { "kv-wizard": [ "kv-wizard-header", "kv-wizard-footer" ], "kv-wizard-header": [ "kv-toggle-tip", "kv-icon" ], "kv-toggle-tip": [ "kv-portal", "kv-tooltip-text" ], "kv-wizard-footer": [ "kv-step-bar", "kv-action-button-text", "kv-tooltip" ], "kv-step-bar": [ "kv-step-progress-bar", "kv-step-indicator" ], "kv-step-indicator": [ "kv-icon" ], "kv-action-button-text": [ "kv-action-button", "kv-icon" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ] } }, { "filePath": "src/components/wizard-footer/wizard-footer.tsx", "encapsulation": "shadow", "tag": "kv-wizard-footer", "readme": "# __\n\n\n", "docs": "", "docsTags": [ { "name": "part", "text": "footer-actions-container - the container of footer stepper and additional actions" } ], "usage": { "react": "```tsx\nimport React from 'react';\n\nimport { KvWizardFooter } from '@kelvininc/react-ui-components';\nimport { BUTTONS_CONFIG } from './config';\n\nexport const KvWizardFooterExample: React.FC = () => {\n\tconst stepsSuccess = [\n\t\t{\n\t\t\tstepKey: 'step0',\n\t\t\tenabled: true,\n\t\t\tactive: true\n\t\t},\n\t\t{\n\t\t\tstepKey: 'step1',\n\t\t\tenabled: true,\n\t\t\tactive: true\n\t\t},\n\t\t{\n\t\t\tstepKey: 'step2',\n\t\t\tenabled: false\n\t\t}\n\t];\n\n\tconst stepsError = [\n\t\t{\n\t\t\tstepKey: 'step0',\n\t\t\tenabled: true,\n\t\t\tactive: true,\n\t\t\thasError: true\n\t\t},\n\t\t{\n\t\t\tstepKey: 'step1',\n\t\t\tenabled: true,\n\t\t\tactive: true,\n\t\t\thasError: true\n\t\t},\n\t\t{\n\t\t\tstepKey: 'step2',\n\t\t\tenabled: false\n\t\t}\n\t];\n\n\tconst onStepClick = ({ detail }: CustomEvent) => {};\n\tconst onPrevClick = (ev: CustomEvent) => {};\n\tconst onNextClick = (ev: CustomEvent) => {};\n\n\treturn (\n\t\t<>\n\t\t\t{/*-- Default --*/}\n\t\t\t\n\t\t\t{/*-- Has errors --*/}\n\t\t\t\n\t\t\n\t);\n};\n```\n" }, "props": [ { "name": "cancelEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "cancel-enabled", "reflectToAttr": true, "docs": "(optional) Defines if the `cancel` button should be enabled and interactable", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "completeBtnLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "complete-btn-label", "reflectToAttr": true, "docs": "(optional) The `complete` button label", "docsTags": [ { "name": "inheritdoc" } ], "default": "'Submit'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "completeEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "complete-enabled", "reflectToAttr": true, "docs": "(optional) Defines if the `complete` button should be enabled and interactable", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "completeTooltip", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "complete-tooltip", "reflectToAttr": true, "docs": "(optional) The `complete` button tooltip", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "currentStep", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "current-step", "reflectToAttr": true, "docs": "(required) Defines the current step index", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "hasError", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-error", "reflectToAttr": true, "docs": "(optional) Defines if the progress bar should be in an error state", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(optional) Defines the label to display next to the step counter (defaults to: \"Progress: \")", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "nextEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "next-enabled", "reflectToAttr": true, "docs": "(optional) Defines if the `next` button should be enabled and interactable", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "nextTooltip", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "next-tooltip", "reflectToAttr": true, "docs": "(optional) The `next` button tooltip", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "prevEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "prev-enabled", "reflectToAttr": true, "docs": "(optional) Defines if the `previous` button should be enabled and interactable", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "progressPercentage", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "progress-percentage", "reflectToAttr": true, "docs": "(required) Defines the percentage of steps completed", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "number" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "showCancelBtn", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-cancel-btn", "reflectToAttr": true, "docs": "(optional) A boolean that determines whether the `cancel` button should be shown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showCompleteBtn", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-complete-btn", "reflectToAttr": true, "docs": "(optional) A boolean that determines whether the `complete` button should be shown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showNextBtn", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-next-btn", "reflectToAttr": true, "docs": "(optional) A boolean that determines whether the `next` button should be shown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showPrevBtn", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-prev-btn", "reflectToAttr": true, "docs": "(optional) A boolean that determines whether the `previous` button should be shown", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showStepBar", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-step-bar", "reflectToAttr": true, "docs": "(optional) Defines if the step bar should render", "docsTags": [ { "name": "inheritdoc" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "steps", "type": "IStepBarStep[]", "complexType": { "original": "IStepBarStep[]", "resolved": "IStepBarStep[]", "references": { "IStepBarStep": { "location": "import", "path": "../../types", "id": "src/types.ts::IStepBarStep" } } }, "mutable": false, "attr": "steps", "reflectToAttr": false, "docs": "(required) Defines the steps array to render", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "IStepBarStep[]" } ], "optional": false, "required": true, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "cancelClick", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when the `cancel` button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "completeClick", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when the `complete` button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "nextClick", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when the `next` button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "prevClick", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when the `previous` button is clicked", "docsTags": [ { "name": "inheritdoc" } ] }, { "event": "stepClick", "detail": "number", "bubbles": true, "complexType": { "original": "number", "resolved": "number", "references": {} }, "cancelable": true, "composed": true, "docs": "Fires when a step on the step bar is clicked and emits the index", "docsTags": [ { "name": "inheritdoc" } ] } ], "listeners": [], "styles": [ { "name": "--stepper-width", "annotation": "prop", "docs": "defines in px how much space the stepper should take up" } ], "slots": [], "parts": [ { "name": "footer-actions-container", "docs": "the container of footer stepper and additional actions" } ], "dependents": [ "kv-wizard" ], "dependencies": [ "kv-step-bar", "kv-action-button-text", "kv-tooltip" ], "dependencyGraph": { "kv-wizard-footer": [ "kv-step-bar", "kv-action-button-text", "kv-tooltip" ], "kv-step-bar": [ "kv-step-progress-bar", "kv-step-indicator" ], "kv-step-indicator": [ "kv-icon" ], "kv-action-button-text": [ "kv-action-button", "kv-icon" ], "kv-tooltip": [ "kv-portal", "kv-tooltip-text" ], "kv-wizard": [ "kv-wizard-footer" ] } }, { "filePath": "src/components/wizard-header/wizard-header.tsx", "encapsulation": "shadow", "tag": "kv-wizard-header", "readme": "# __\n\n\n", "docs": "", "docsTags": [], "usage": { "react": "```jsx\nimport React from 'react';\n\nimport { KvWizardHeader } from '@kelvininc/react-ui-components';\n\nexport const WizardHeaderExamples = () => (\n\t<>\n\t\t{/*-- Required properties only --*/}\n\t\t\n\n\t\t{/*-- Custom separator --*/}\n\t\t\n\t\n);\n```\n" }, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "(required) A description of the state (e.g the description of a step)", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "(required) A title to describe a state (e.g step)", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": false, "required": true, "getter": false, "setter": false }, { "name": "tip", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "tip", "reflectToAttr": true, "docs": "(optional) An extra information for the step", "docsTags": [ { "name": "inheritdoc" } ], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--container-padding", "annotation": "prop", "docs": "The container to use for the container" }, { "name": "--separator-color", "annotation": "prop", "docs": "The color to use for the separator" }, { "name": "--text-color", "annotation": "prop", "docs": "The color to use for all text" } ], "slots": [], "parts": [], "dependents": [ "kv-wizard" ], "dependencies": [ "kv-toggle-tip", "kv-icon" ], "dependencyGraph": { "kv-wizard-header": [ "kv-toggle-tip", "kv-icon" ], "kv-toggle-tip": [ "kv-portal", "kv-tooltip-text" ], "kv-wizard": [ "kv-wizard-header" ] } } ], "typeLibrary": { "src/components/absolute-time-picker/absolute-time-picker.types.ts::EAbsoluteTimePickerMode": { "declaration": "export enum EAbsoluteTimePickerMode {\n\tSingle = 'single',\n\tRange = 'range'\n}", "docstring": "", "path": "src/components/absolute-time-picker/absolute-time-picker.types.ts" }, "src/components/absolute-time-picker/absolute-time-picker.types.ts::IRelativeTimeInput": { "declaration": "export interface IRelativeTimeInput {\n\tmode: ERelativeTimeInputMode;\n\tfrom: string;\n\tto: string;\n}", "docstring": "", "path": "src/components/absolute-time-picker/absolute-time-picker.types.ts" }, "src/types.ts::EAbsoluteTimeError": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/absolute-time-picker/absolute-time-picker.types.ts::IAbsoluteSelectedRangeDates": { "declaration": "export interface IAbsoluteSelectedRangeDates {\n\trange: SelectedRange;\n}", "docstring": "", "path": "src/components/absolute-time-picker/absolute-time-picker.types.ts" }, "src/components/text-field/text-field.types.ts::ITextField": { "declaration": "export interface ITextField {\n\t/** (optional) Text field type */\n\ttype?: EInputFieldType;\n\t/** (optional) Text field label */\n\tlabel?: string;\n\t/** (optional) Text field's icon symbol name */\n\ticon?: EIconName;\n\t/** (optional) Icon that is added on the right of the input. Its clickable. */\n\tactionIcon?: EIconName;\n\t/** (optional) Text field input name */\n\tinputName?: string;\n\t/** (optional) Text field example values */\n\texamples?: string[];\n\t/** (optional) Text field place holder */\n\tplaceholder?: string;\n\t/** (optional) Text field maximum number of characters required */\n\tmaxLength?: number;\n\t/** (optional) Text field minimum number of characters required */\n\tminLength?: number;\n\t/** (optional) Text field maximum value */\n\tmax?: string | number;\n\t/** (optional) Text field minimum value */\n\tmin?: string | number;\n\t/** (optional) Text field interval between legal numbers */\n\tstep?: string | number;\n\t/** (optional) Sets this tab item to a different styling configuration */\n\tsize?: EComponentSize;\n\t/** (optional) Text field disabled */\n\tinputDisabled?: boolean;\n\t/** (optional) Text field required */\n\tinputRequired?: boolean;\n\t/** (optional) Text field loading state */\n\tloading?: boolean;\n\t/** (optional) Text field state */\n\tstate?: EValidationState;\n\t/** (optional) Text field help text */\n\thelpText?: string | string[];\n\t/** (optional) Text field value */\n\tvalue?: string | number | null;\n\t/** (optional) Defines the prefix that adds context to displayed values */\n\tvaluePrefix?: string;\n\t/** (optional) Text to display inside a badge on the right side of the displayed value */\n\tbadge?: string;\n\t/** (optional) Text field is readonly */\n\tinputReadonly?: boolean;\n\t/** (optional) Text field focus state */\n\tforcedFocus?: boolean;\n\t/** (optional) Text field tooltip configuration */\n\ttooltipConfig?: Partial;\n\t/** (optional) Use a input mask when the text field type is number (default true) */\n\tuseInputMask?: boolean;\n\t/** (optional) Input mask regex */\n\tinputMaskRegex?: string;\n\t/** (optional) Enable/disable the resize of input (default: true) */\n\tfitContent?: boolean;\n\t/** (optional) Additional style to apply for custom CSS. */\n\tcustomStyle?: HostAttributes['style'];\n\t/** (optional) If true, a dirty dot indicator will be added to right side of the displayed value. */\n\tisDirty?: boolean;\n}", "docstring": "", "path": "src/components/text-field/text-field.types.ts" }, "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig": { "declaration": "{\r\n [K in keyof T]: T[K];\r\n}", "docstring": "", "path": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts" }, "src/types.ts::SelectedTimestamp": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::ITimePickerTimezone": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::ITimezoneOffset": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::ETooltipPosition": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts::SelectedTime": { "declaration": "export type SelectedTime = [number] | [number, number];", "docstring": "", "path": "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts" }, "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts::SelectedTimeState": { "declaration": "export type SelectedTimeState = [] | [number] | [number, number];", "docstring": "", "path": "src/components/absolute-time-picker-dropdown-input/absolute-time-picker-dropdown-input.types.ts" }, "src/types.ts::EAbsoluteTimePickerMode": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/action-button/action-button.types.ts::EActionButtonType": { "declaration": "export enum EActionButtonType {\n\tPrimary = 'primary',\n\tSecondary = 'secondary',\n\tTertiary = 'tertiary',\n\tGhost = 'ghost',\n\tDanger = 'danger'\n}", "docstring": "", "path": "src/components/action-button/action-button.types.ts" }, "src/utils/types/index.ts::EComponentSize": { "declaration": "any", "docstring": "", "path": "src/utils/types/index.ts" }, "src/components/icon/icon.types.ts::EIconName": { "declaration": "export enum EIconName {\n\tActivity = 'kv-activity',\n\tAdd = 'kv-add',\n\tAddCrossCircle = 'kv-add-cross-circle',\n\tAI = 'kv-ai',\n\tAlarmClass = 'kv-alarm-class',\n\tAlignBottom = 'kv-align-bottom',\n\tAlignTop = 'kv-align-top',\n\tApplication = 'kv-application',\n\tApplications = 'kv-applications',\n\tArchive = 'kv-archive',\n\tArray = 'kv-array',\n\tArrowDownload = 'kv-arrow-download',\n\tArrowDropDown = 'kv-arrow-drop-down',\n\tArrowDropUp = 'kv-arrow-drop-up',\n\tArrowLeft = 'kv-arrow-left',\n\tArrowRight = 'kv-arrow-right',\n\tAsset = 'kv-asset',\n\tAssetA = 'kv-asset-a',\n\tAssetAStatus = 'kv-asset-a-status',\n\tAssetC = 'kv-asset-c',\n\tAssetCStatus = 'kv-asset-c-status',\n\tAssetClass = 'kv-asset-class',\n\tAssetP = 'kv-asset-p',\n\tAssetPStatus = 'kv-asset-p-status',\n\tAssetS = 'kv-asset-s',\n\tAssetSStatus = 'kv-asset-s-status',\n\tAssetStatus = 'kv-asset-status',\n\tAssetType = 'kv-asset-type',\n\tAssetsManagement = 'kv-assets-management',\n\tAssistant = 'kv-assistant',\n\tAuditlogs = 'kv-auditlogs',\n\tAvatar = 'kv-avatar',\n\tBack = 'kv-back',\n\tBookmark = 'kv-bookmark',\n\tBubbleChart = 'kv-bubble-chart',\n\tBuilding = 'kv-building',\n\tBullet = 'kv-bullet',\n\tCalendar = 'kv-calendar',\n\tCalendarRange = 'kv-calendar-range',\n\tCalendarTime = 'kv-calendar-time',\n\tCalendarToday = 'kv-calendar-today',\n\tCalendarUpdate = 'kv-calendar-update',\n\tCard = 'kv-card',\n\tCatalog = 'kv-catalog',\n\tChat = 'kv-chat',\n\tCheckState = 'kv-check-state',\n\tCheckmark = 'kv-checkmark',\n\tCircle = 'kv-circle',\n\tClear = 'kv-clear',\n\tClose = 'kv-close',\n\tCloseCircle = 'kv-close-circle',\n\tCloud = 'kv-cloud',\n\tCloudDownload = 'kv-cloud-download',\n\tCloudUpload = 'kv-cloud-upload',\n\tCode = 'kv-code',\n\tCodeOff = 'kv-code-off',\n\tCollapse = 'kv-collapse',\n\tColumn = 'kv-column',\n\tConnection = 'kv-connection',\n\tConnections = 'kv-connections',\n\tContentExpand = 'kv-content-expand',\n\tControlChange = 'kv-control-change',\n\tCopy = 'kv-copy',\n\tCopyClipboard = 'kv-copy-clipboard',\n\tCpu = 'kv-cpu',\n\tDashboard = 'kv-dashboard',\n\tDashboardCustom = 'kv-dashboard-custom',\n\tDataExplorer = 'kv-data-explorer',\n\tDatalabel = 'kv-datalabel',\n\tDatastreams = 'kv-datastreams',\n\tDelete = 'kv-delete',\n\tDensityHigh = 'kv-density-high',\n\tDensityLow = 'kv-density-low',\n\tDensityMedium = 'kv-density-medium',\n\tDeployment = 'kv-deployment',\n\tDevice = 'kv-device',\n\tDeviceType = 'kv-device-type',\n\tDiamond = 'kv-diamond',\n\tDocs = 'kv-docs',\n\tDockerApp = 'kv-docker-app',\n\tDocumentation = 'kv-documentation',\n\tDoneAll = 'kv-done-all',\n\tDoNotDisturbOnCircle = 'kv-do-not-disturb-on-circle',\n\tDottedCircle = 'kv-dotted-circle',\n\tDoubleArrowDown = 'kv-double-arrow-down',\n\tDoubleArrowLeft = 'kv-double-arrow-left',\n\tDoubleArrowRight = 'kv-double-arrow-right',\n\tDoubleArrowUp = 'kv-double-arrow-up',\n\tDownload = 'kv-download',\n\tDragDrop = 'kv-drag-drop',\n\tEdit = 'kv-edit',\n\tError = 'kv-error',\n\tExit = 'kv-exit',\n\tExpand = 'kv-expand',\n\tExternalLink = 'kv-external-link',\n\tEye = 'kv-eye',\n\tEyeClosed = 'kv-eye-closed',\n\tFailure = 'kv-failure',\n\tFile = 'kv-file',\n\tFileAdd = 'kv-file-add',\n\tFileCheck = 'kv-file-check',\n\tFilter = 'kv-filter',\n\tFitContent = 'kv-fit-content',\n\tFive = 'kv-five',\n\tFixed = 'kv-fixed',\n\tFolder = 'kv-folder',\n\tFour = 'kv-four',\n\tFullscreen = 'kv-fullscreen',\n\tFullscreenExit = 'kv-fullscreen-exit',\n\tGateway = 'kv-gateway',\n\tGear = 'kv-gear',\n\tGuardrails = 'kv-guardrails',\n\tHelpCircle = 'kv-help-circle',\n\tIn = 'kv-in',\n\tIncluded = 'kv-included',\n\tIndeterminateState = 'kv-indeterminate-state',\n\tInfo = 'kv-info',\n\tLayer = 'kv-layer',\n\tLegoLetter = 'kv-lego-letter',\n\tLink = 'kv-link',\n\tLinkOff = 'kv-link-off',\n\tList = 'kv-list',\n\tLoad = 'kv-load',\n\tLocation = 'kv-location',\n\tLog = 'kv-log',\n\tLock = 'kv-lock',\n\tLogoKelvin = 'kv-logo-kelvin',\n\tMagictip = 'kv-magictip',\n\tManualControls = 'kv-manual-controls',\n\tMaps = 'kv-maps',\n\tMapsEditor = 'kv-maps-editor',\n\tMemory = 'kv-memory',\n\tMenuCollapse = 'kv-menu-collapse',\n\tMenuExpand = 'kv-menu-expand',\n\tMessage = 'kv-message',\n\tMinus = 'kv-minus',\n\tMonitoring = 'kv-monitoring',\n\tMore = 'kv-more',\n\tMultiline = 'kv-multiline',\n\tNabla = 'kv-nabla',\n\tNavClose = 'kv-nav-close',\n\tNavOpen = 'kv-nav-open',\n\tNotes = 'kv-notes',\n\tNotIncluded = 'kv-not-included',\n\tNotifications = 'kv-notifications',\n\tOne = 'kv-one',\n\tOrchestration = 'kv-orchestration',\n\tOut = 'kv-out',\n\tPause = 'kv-pause',\n\tPlace = 'kv-place',\n\tPlay = 'kv-play',\n\tProperties = 'kv-properties',\n\tProtip = 'kv-protip',\n\tPushPin = 'kv-push-pin',\n\tQuickReference = 'kv-quick-reference',\n\tRadioBtn = 'kv-radio-btn',\n\tRadioBtnSelected = 'kv-radio-btn-selected',\n\tRefresh = 'kv-refresh',\n\tRemove = 'kv-remove',\n\tReply = 'kv-reply',\n\tReset = 'kv-reset',\n\tResetZoom = 'kv-reset-zoom',\n\tRestart = 'kv-restart',\n\tRole = 'kv-role',\n\tRotate = 'kv-rotate',\n\tSave = 'kv-save',\n\tSchedule = 'kv-schedule',\n\tSearch = 'kv-search',\n\tSend = 'kv-send',\n\tSendMessage = 'kv-send-message',\n\tSettings = 'kv-settings',\n\tSettingsSuggest = 'kv-settings-suggest',\n\tShare = 'kv-share',\n\tShieldLock = 'kv-shield-lock',\n\tSlimRight = 'kv-slim-right',\n\tSmartApp = 'kv-smart-app',\n\tSortAz = 'kv-sort-az',\n\tSortHover = 'kv-sort-hover',\n\tSortZa = 'kv-sort-za',\n\tSquare = 'kv-square',\n\tStar = 'kv-star',\n\tStatus = 'kv-status',\n\tStatusMixed = 'kv-status-mixed',\n\tSuccess = 'kv-success',\n\tSuccessStar = 'kv-success-star',\n\tSupervisedUser = 'kv-supervised-user',\n\tSupport = 'kv-support',\n\tSwagger = 'kv-swagger',\n\tSync = 'kv-sync',\n\tSyncCircle = 'kv-sync-circle',\n\tSyncError = 'kv-sync-error',\n\tSystemSource = 'kv-system-source',\n\tTagAlarm = 'kv-tag-alarm',\n\tTagControlChange = 'kv-tag-control-change',\n\tTaskCheckmark = 'kv-task-checkmark',\n\tTelemetry = 'kv-telemetry',\n\tThree = 'kv-three',\n\tThumbsdown = 'kv-thumbsdown',\n\tThumbsdownFilled = 'kv-thumbsdown-filled',\n\tThumbsup = 'kv-thumbsup',\n\tThumbsupFilled = 'kv-thumbsup-filled',\n\tTime = 'kv-time',\n\tTimer = 'kv-timer',\n\tTodo = 'kv-todo',\n\tTrendingDown = 'kv-trending-down',\n\tTrendingUp = 'kv-trending-up',\n\tTree = 'kv-tree',\n\tTreeCollapse = 'kv-tree-collapse',\n\tTreeExpand = 'kv-tree-expand',\n\tTriangle = 'kv-triangle',\n\tTwo = 'kv-two',\n\tType = 'kv-type',\n\tUndo = 'kv-undo',\n\tUncheckState = 'kv-uncheck-state',\n\tUnfoldMore = 'kv-unfold-more',\n\tUpgrade = 'kv-upgrade',\n\tUptime = 'kv-uptime',\n\tUsers = 'kv-users',\n\tVerified = 'kv-verified',\n\tWarning = 'kv-warning',\n\tWorld = 'kv-world',\n\tZoomIn = 'kv-zoom-in',\n\tZoomOut = 'kv-zoom-out'\n}", "docstring": "", "path": "src/components/icon/icon.types.ts" }, "src/components/badge/badge.types.ts::EBadgeState": { "declaration": "export enum EBadgeState {\n\tNone = 'none',\n\tInfo = 'info',\n\tWarning = 'warning',\n\tError = 'error',\n\tSuccess = 'success'\n}", "docstring": "", "path": "src/components/badge/badge.types.ts" }, "src/components/alert/alert.types.ts::EAlertType": { "declaration": "export enum EAlertType {\n\tInfo = 'info',\n\tError = 'error',\n\tSuccess = 'success',\n\tWarning = 'warning'\n}", "docstring": "", "path": "src/components/alert/alert.types.ts" }, "src/types.ts::EComponentSize": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/breadcrumb-item/breadcrumb-item.types.ts::IBreadcrumbItem": { "declaration": "export interface IBreadcrumbItem {\n\t/** (required) The text to display on the breadcrumb */\n\tlabel: string;\n\t/** (optional) Sets this breadcrumb styling to be the active one (usually the last one) */\n\tactive?: boolean;\n}", "docstring": "", "path": "src/components/breadcrumb-item/breadcrumb-item.types.ts" }, "src/components/calendar/calendar.types.ts::IChangeMonthEvent": { "declaration": "export interface IChangeMonthEvent {\n\tmonth: number;\n}", "docstring": "", "path": "src/components/calendar/calendar.types.ts" }, "src/components/calendar/calendar.types.ts::IChangeYearEvent": { "declaration": "export interface IChangeYearEvent {\n\tyear: number;\n}", "docstring": "", "path": "src/components/calendar/calendar.types.ts" }, "src/components/calendar/calendar.types.ts::IClickDateEvent": { "declaration": "export interface IClickDateEvent {\n\tdate: string;\n}", "docstring": "", "path": "src/components/calendar/calendar.types.ts" }, "src/components/text-field/text-field.types.ts::EValidationState": { "declaration": "export enum EValidationState {\n\tNone = 'none',\n\tValid = 'valid',\n\tInvalid = 'invalid'\n}", "docstring": "", "path": "src/components/text-field/text-field.types.ts" }, "src/components/date-time-input/date-time-input.types.ts::EDateTimeInputTypeStyle": { "declaration": "export enum EDateTimeInputTypeStyle {\n\tSeparated = 'separated',\n\tMergedLeft = 'merged-left',\n\tMergedRight = 'merged-right'\n}", "docstring": "", "path": "src/components/date-time-input/date-time-input.types.ts" }, "src/types.ts::EIconName": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/description-list/description-list.types.ts::IDescriptionListItem": { "declaration": "export interface IDescriptionListItem {\n\ttitle: string;\n\tdescription: string;\n\tpopoverInfo?: IDescriptionListItemPopover;\n}", "docstring": "", "path": "src/components/description-list/description-list.types.ts" }, "src/components/description-list/description-list.types.ts::IDescriptionListItemToggletipConfig": { "declaration": "export interface IDescriptionListItemToggletipConfig {\n\tposition: ETooltipPosition;\n\tallowedPositions?: ETooltipPosition[];\n}", "docstring": "", "path": "src/components/description-list/description-list.types.ts" }, "src/types.ts::CustomCssClass": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::EValidationState": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/illustration/illustration.types.ts::EIllustrationName": { "declaration": "export enum EIllustrationName {\n\tEsAssetPlaceholder = 'kv-es-asset-placeholder',\n\tEsCheckbox = 'kv-es-checkbox',\n\tEsComponentPlaceholder = 'kv-es-component-placeholder',\n\tEsError404 = 'kv-es-error-404',\n\tEsError503 = 'kv-es-error-503',\n\tEsFeedbackForm = 'kv-feedback-form',\n\tEsLock = 'kv-es-lock',\n\tEsMetadata = 'kv-es-metadata',\n\tEsPartyDance = 'kv-party-dance',\n\tEsPartPlaceholder = 'kv-es-part-placeholder',\n\tEsSectionCell = 'kv-es-section-cell',\n\tEsSectionSomethingwentwrong = 'kv-es-section-somethingwentwrong',\n\tEsSectionThresholds = 'kv-es-section-thresholds',\n\tEsSensorPlaceholder = 'kv-es-sensor-placeholder',\n\tEsSlowy = 'kv-es-slowy',\n\tEsSomethingWentWrong = 'kv-es-somethingwentwrong',\n\tEsTableBuild = 'kv-es-table-build',\n\tEsTableEmpty = 'kv-es-table-empty',\n\tEsTableSearch = 'kv-es-table-search',\n\tEsKelvinLogotype = 'kv-es-kelvin-logotype',\n\tAgree = 'kv-agree',\n\tSoftAgree = 'kv-soft-agree',\n\tDisagree = 'kv-disagree',\n\t// -----------------------------------------\n\t// --- PEACOCK - NEW THEME ILLUSTRATIONS ---\n\t// -----------------------------------------\n\tBoxBuild = 'kv-box-build',\n\tTableBuild = 'kv-table-build', // TODO: Missing the gradients\n\t// -----------------------------------------\n\t// --- NEW EMPTY STATES ---\n\t// -----------------------------------------\n\tErrorState404 = 'kv-error-state-404',\n\tErrorState = 'kv-error-state',\n\tNoContentHere = 'kv-no-content-here',\n\tNoDataAvailable = 'kv-no-data-available',\n\tNoMatchingResults = 'kv-no-matching-results',\n\tNoResultsFoundDark = 'kv-no-results-found-dark',\n\tNoResultsFoundLight = 'kv-no-results-found-light',\n\tTakeActions = 'kv-take-actions',\n\tImport = 'kv-import',\n\tImpact = 'kv-impact'\n}", "docstring": "", "path": "src/components/illustration/illustration.types.ts" }, "src/types.ts::EIllustrationName": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::EAnchorTarget": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::IIllustrationMessage": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/select-multi-options/select-multi-options.types.ts::ISelectMultiOptions": { "declaration": "{\n [P in K]: T;\n}", "docstring": "", "path": "src/components/select-multi-options/select-multi-options.types.ts" }, "src/components/radio-list-item/radio-list-item.types.ts::IRadioListItem": { "declaration": "export interface IRadioListItem {\n\t/** (required) The unique id that serves as a key for this item */\n\toptionId: string | number;\n\t/** (required) The label to display */\n\tlabel: string;\n\t/** (optional) The description that can contain links in the [text](url) format */\n\tdescription?: string;\n\t/** (optional) Defines if this option is checked */\n\tchecked?: boolean;\n\t/** (optional) Defines if this option is disabled */\n\tdisabled?: boolean;\n}", "docstring": "", "path": "src/components/radio-list-item/radio-list-item.types.ts" }, "src/components/relative-time-picker/relative-time-picker.types.ts::IRelativeTimePickerOption": { "declaration": "export interface IRelativeTimePickerOption {\n\t/** (required) Option label ex: Last Week, Last 24h */\n\tlabel: string;\n\t/** (required) value of the option selected */\n\tvalue: string;\n\t/** (required) Specifies the type of relative time config to be considered for the time calculation */\n\tcomparisonConfig: ERelativeTimeComparisonConfig;\n\t/** (optional) used to format the time range label description ex: 14 Feb until 12:39 */\n\tlabelRangeFormatter?: IDateTimeRangeFormatter;\n\t/** (optional) start date (Date, Time or DateTime can be defined with the dateTimeFormatter) */\n\tstartDate?: DateTimeCalculation;\n\t/** (optional) end date (Date, Time or DateTime can be defined with the dateTimeFormatter) */\n\tendDate?: DateTimeCalculation;\n}", "docstring": "", "path": "src/components/relative-time-picker/relative-time-picker.types.ts" }, "src/components/time-picker/time-picker.types.ts::ITimezoneOffset": { "declaration": "export interface ITimezoneOffset {\n\tname: string;\n\toffset: number;\n\tlabel: string;\n}", "docstring": "", "path": "src/components/time-picker/time-picker.types.ts" }, "src/components/relative-time-picker/relative-time-picker.types.ts::ITimePickerRelativeTime": { "declaration": "{\n\tkey: string;\n\trange: SelectedTimestamp;\n}", "docstring": "", "path": "src/components/relative-time-picker/relative-time-picker.types.ts" }, "src/components/relative-time-picker/relative-time-picker.types.ts::ITimePickerTimezone": { "declaration": "{\n\tname: string;\n\toffset: number;\n}", "docstring": "", "path": "src/components/relative-time-picker/relative-time-picker.types.ts" }, "src/components/text-field/text-field.types.ts::EInputFieldType": { "declaration": "export enum EInputFieldType {\n\tText = 'text',\n\tNumber = 'number',\n\tPassword = 'password',\n\tDateTime = 'datetime-local',\n\tDate = 'date',\n\tRadio = 'radio',\n\tEmail = 'email'\n}", "docstring": "", "path": "src/components/text-field/text-field.types.ts" }, "src/types.ts::ITooltip": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/types.ts::ITextField": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/illustration-message/illustration-message.types.ts::IIllustrationMessage": { "declaration": "export interface IIllustrationMessage {\n\t/** (required) The illustration that will be presented. */\n\tillustration: EIllustrationName;\n\t/** (required) The message header to be displayed below the illustration. */\n\theader: string;\n\t/** (optional) The message description to be displayed below the title. */\n\tdescription?: string;\n}", "docstring": "", "path": "src/components/illustration-message/illustration-message.types.ts" }, "src/components/select-option/select-option.types.ts::EToggleState": { "declaration": "export enum EToggleState {\n\tSelected = 'selected',\n\tIndeterminate = 'indeterminate',\n\tNone = 'none'\n}", "docstring": "", "path": "src/components/select-option/select-option.types.ts" }, "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts::HostAttributes": { "declaration": "any", "docstring": "", "path": "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts" }, "src/components/select-option/select-option.types.ts::ISelectOptionAction": { "declaration": "export interface ISelectOptionAction {\n\t/** (required) The callback to call when the action is clicked */\n\tonClick: () => void;\n\t/** (required) The icon of the action */\n\ticon: EIconName;\n\t/** (optional) If `true` the action is active */\n\tactive?: boolean;\n}", "docstring": "", "path": "src/components/select-option/select-option.types.ts" }, "src/components/single-select-dropdown/single-select-dropdown.types.ts::ISelectSingleOptions": { "declaration": "{\n [P in K]: T;\n}", "docstring": "", "path": "src/components/single-select-dropdown/single-select-dropdown.types.ts" }, "src/components/step-bar/step-bar.types.ts::IStepBarStep": { "declaration": "export interface IStepBarStep extends IStepIndicator {\n\t/** (required) A unique identifier for the step */\n\tstepKey: number | string;\n}", "docstring": "", "path": "src/components/step-bar/step-bar.types.ts" }, "src/components/summary-card/summary-card.types.ts::ESummaryCardType": { "declaration": "export enum ESummaryCardType {\n\tText = 'string',\n\tNumber = 'number'\n}", "docstring": "", "path": "src/components/summary-card/summary-card.types.ts" }, "src/components/tab-navigation/tab-navigation.types.ts::ITabNavigationItem": { "declaration": "export interface ITabNavigationItem {\n\ttabKey: number | string;\n\tlabel: string;\n\ticon?: EIconName;\n\tdisabled?: boolean;\n}", "docstring": "", "path": "src/components/tab-navigation/tab-navigation.types.ts" }, "src/components/tab-navigation/tab-navigation.types.ts::ITabsNotificationDict": { "declaration": "export interface ITabsNotificationDict {\n\t[tabKey: string]: ITabNotification;\n\t[tabKey: number]: ITabNotification;\n}", "docstring": "", "path": "src/components/tab-navigation/tab-navigation.types.ts" }, "src/utils/types/components.ts::EAlarmSeverity": { "declaration": "export enum EAlarmSeverity {\n\tOne = '1',\n\tTwo = '2',\n\tThree = '3',\n\tFour = '4',\n\tFive = '5'\n}", "docstring": "", "path": "src/utils/types/components.ts" }, "src/components/tag-alarm/tag-alarm.types.ts::ETagAlarmSize": { "declaration": "export enum ETagAlarmSize {\n\tXXSmall = 'xxsmall',\n\tXSmall = 'xsmall',\n\tSmall = 'small',\n\tNormal = 'normal',\n\tLarge = 'large'\n}", "docstring": "", "path": "src/components/tag-alarm/tag-alarm.types.ts" }, "src/components/tag-status/tag-status.types.ts::ETagState": { "declaration": "export enum ETagState {\n\tUnknown = 'unknown',\n\tSuccess = 'success',\n\tWarning = 'warning',\n\tError = 'error',\n\tInfo = 'info'\n}", "docstring": "", "path": "src/components/tag-status/tag-status.types.ts" }, "src/components/tooltip/tooltip.types.ts::ITooltip": { "declaration": "export interface ITooltip extends ICustomCss {\n\t/** (optional) Text of tooltip */\n\ttext: string;\n\t/** (optional) Position of tooltip */\n\tposition?: ETooltipPosition;\n\t/** (optional) Array of allowed positions of toggle tip (if defined the 'position' is ignored) */\n\tallowedPositions?: ETooltipPosition[];\n\t/** (optional) Object with tooltip position options */\n\toptions?: Partial;\n\t/** (optional) Disables tooltip */\n\tdisabled?: boolean;\n\t/** (optional) Content element reference */\n\tcontentElement?: HTMLElement;\n\t/** (optional) Set `true` to display tooltip only when the content is truncated */\n\ttruncate?: boolean;\n\t/** (optional) Delay to show tooltip in milliseconds. */\n\tdelay?: number;\n\t/** (optional) if true it will render an arrow pointing to the opening element (default false) */\n\twithArrow?: boolean;\n\t/** (optional) Additional style to apply for custom CSS. */\n\tcustomStyle?: HostAttributes['style'];\n}", "docstring": "", "path": "src/components/tooltip/tooltip.types.ts" }, "src/components/time-picker/time-picker.types.ts::ITimePickerTimeState": { "declaration": "export interface ITimePickerTimeState {\n\tkey: string;\n\trange: SelectedTimestamp;\n\ttimezone?: ITimePickerTimezone;\n}", "docstring": "", "path": "src/components/time-picker/time-picker.types.ts" }, "src/components/time-picker/time-picker.types.ts::ITimePickerTime": { "declaration": "export interface ITimePickerTime {\n\tkey: string;\n\trange: [number] | [number, number];\n\ttimezone: ITimePickerTimezone;\n}", "docstring": "", "path": "src/components/time-picker/time-picker.types.ts" }, "src/components/toaster/toaster.types.ts::EToasterType": { "declaration": "export enum EToasterType {\n\tInfo = 'info',\n\tWarning = 'warning',\n\tError = 'error',\n\tSuccess = 'success'\n}", "docstring": "", "path": "src/components/toaster/toaster.types.ts" }, "src/components/toggle-button/toggle-button.types.ts::IToggleButton": { "declaration": "export interface IToggleButton {\n\t/** (required) The value to be emitted upon click events */\n\tvalue: T;\n\t/** (optional) The button's icon. Only valid for toggle button icon */\n\ticon?: EIconName;\n\t/** (optional) The button's label. Only valid for toggle button text */\n\tlabel?: string;\n\t/** (optional) Sets the button's styling to be disabled and disables click events */\n\tdisabled?: boolean;\n\t/** (optional) Sets the button as checked */\n\tchecked?: boolean;\n\t/** (optional) Defines if the item click event should prevent default behaviour. */\n\tpreventDefault?: boolean;\n\t/** (optional) Sets if the button is a radio button */\n\twithRadio?: boolean;\n\t/** (optional) Button's size */\n\tsize?: EComponentSize;\n}", "docstring": "", "path": "src/components/toggle-button/toggle-button.types.ts" }, "src/components/toggle-switch/toggle-switch.types.ts::IToggleSwitchOption": { "declaration": "{\n [P in K]: T[P];\n}", "docstring": "", "path": "src/components/toggle-switch/toggle-switch.types.ts" }, "src/utils/types/components.ts::ETooltipPosition": { "declaration": "export enum ETooltipPosition {\n\tTop = 'top',\n\tTopEnd = 'top-end',\n\tTopStart = 'top-start',\n\tRight = 'right',\n\tRightEnd = 'right-end',\n\tRightStart = 'right-start',\n\tBottom = 'bottom',\n\tBottomEnd = 'bottom-end',\n\tBottomStart = 'bottom-start',\n\tLeft = 'left',\n\tLeftEnd = 'left-end',\n\tLeftStart = 'left-start'\n}", "docstring": "", "path": "src/utils/types/components.ts" }, "src/utils/types/components.ts::CustomCssClass": { "declaration": "export type CustomCssClass = string | string[] | CssClassMap;", "docstring": "", "path": "src/utils/types/components.ts" }, "src/components/tree/tree.types.ts::ITreeNodeItem": { "declaration": "export interface ITreeNodeItem {\n\tid: string; // Should be unique\n\tlabel?: string;\n\tadditionalLabel?: string;\n\tplaceholder?: string;\n\ticon?: EIconName;\n\ticonState?: ETreeItemState; // Need to validate if it should be here because can change constantly\n\tcounter?: number; // Need to validate if it should be here because can change constantly\n\tcounterState?: EBadgeState; // Need to validate if it should be here because can change constantly\n\tlazyLoadChildren?: boolean;\n\tmetadata?: any;\n\tchildren?: ITreeNodeItem[];\n\tpreventDefault?: boolean;\n}", "docstring": "", "path": "src/components/tree/tree.types.ts" }, "src/types.ts::ETreeItemLabelSize": { "declaration": "any", "docstring": "", "path": "src/types.ts" }, "src/components/tree-item/tree-item.types.ts::ETreeItemLabelSize": { "declaration": "export enum ETreeItemLabelSize {\n\tRegular = 'regular',\n\tSmall = 'small'\n}", "docstring": "", "path": "src/components/tree-item/tree-item.types.ts" }, "src/components/tree-item/tree-item.types.ts::ETreeItemState": { "declaration": "export enum ETreeItemState {\n\tNone = 'none',\n\tInfo = 'info',\n\tWarning = 'warning',\n\tError = 'error',\n\tSuccess = 'success'\n}", "docstring": "", "path": "src/components/tree-item/tree-item.types.ts" }, "src/components/virtualized-list/virtualized-list.types.ts::RenderItemFunc": { "declaration": "(index: number) => ChildType | Promise | ChildType[] | Promise | Promise[]", "docstring": "", "path": "src/components/virtualized-list/virtualized-list.types.ts" }, "src/components/wizard/wizard.types.ts::IWizardStep": { "declaration": "export interface IWizardStep {\n\ttitle: string;\n\tcancelable?: boolean;\n\tallowGoBack?: boolean;\n\ttip?: string;\n}", "docstring": "", "path": "src/components/wizard/wizard.types.ts" }, "src/components/wizard/wizard.types.ts::StepState": { "declaration": "export type StepState =\n\t| {\n\t\t\tstate: EStepState.Success;\n\t\t\terror?: never;\n\t }\n\t| {\n\t\t\tstate: EStepState.Error;\n\t\t\terror?: string;\n\t };", "docstring": "", "path": "src/components/wizard/wizard.types.ts" }, "src/types.ts::IStepBarStep": { "declaration": "any", "docstring": "", "path": "src/types.ts" } } }