@freshworks/crayons
Version:
Crayons Web Components library
1,435 lines • 154 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AccordionToggleEvent } from "./components/accordion/accordion";
import { DataTableAction, DataTableColumn, DataTableRow, DropdownVariant, PopoverPlacementType, PopoverTriggerType, TagVariant } from "./utils/types";
import { FormErrors, FormSubmit, FormValues } from "./components/form/form-declaration";
import { ToastOptions } from "./components/toast/toast-util";
export namespace Components {
interface FwAccordion {
/**
* To manage accordion expanded or collapsed state
*/
"expanded": boolean;
/**
* Method available from the component to toggle expanded or collapsed state of accordion
* @returns promise that resolves to true
*/
"toggle": () => Promise<boolean>;
/**
* The type of accordion to be displayed. default => Accordion with all borders no_bounding_box => Accordion with top and bottom borders only
*/
"type": 'default' | 'no_bounding_box';
}
interface FwAccordionBody {
"expanded": boolean;
"type": 'default' | 'no_bounding_box';
}
interface FwAccordionTitle {
"expanded": boolean;
/**
* The size of the default icon
*/
"iconSize": 'small' | 'medium' | 'large';
"toggleState": any;
/**
* Truncate title on text overflow
*/
"truncateOnOverflow": boolean;
"type": 'default' | 'no_bounding_box';
}
interface FwAvatar {
"alt": string;
"image": string;
"initials": string;
"mode": 'dark' | 'light';
"name": string;
"shape": 'circle' | 'square' | 'rounded';
"size": | 'xxlarge'
| 'xlarge'
| 'large'
| 'medium'
| 'small'
| 'xsmall'
| 'xxsmall';
}
interface FwButton {
/**
* Identifier of the theme based on which the button is styled.
*/
"color": 'primary' | 'secondary' | 'danger' | 'link' | 'text';
/**
* Disables the button on the interface. Default value is false.
*/
"disabled": boolean;
/**
* Accepts the id of the fw-file-uploader component to upload the file.
*/
"fileUploaderId": string;
/**
* Loading state for the button, Default value is false.
*/
"loading": boolean;
/**
* Accepts the id of the fw-modal component to open it on click.
*/
"modalTriggerId": string;
"setFocus": () => Promise<any>;
/**
* Caret indicator for the button, Default value is false.
*/
"showCaretIcon": boolean;
/**
* Size of the button.
*/
"size": 'normal' | 'small' | 'icon' | 'icon-small';
/**
* Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
*/
"throttleDelay": number;
/**
* Button type based on which actions are performed when the button is clicked.
*/
"type": 'button' | 'submit';
}
interface FwButtonGroup {
"label": string;
}
interface FwCheckbox {
/**
* Sets the state of the check box to selected. If the attribute’s value is undefined, the value is set to false.
*/
"checked": boolean;
/**
* Description to be displayed for the checkbox.
*/
"description": string;
/**
* Disables the check box on the interface. If the attribute’s value is undefined, the value is set to false.
*/
"disabled": boolean;
/**
* Error text displayed below the radio group.
*/
"errorText": string;
/**
* /** Hint text displayed below the radio group.
*/
"hintText": string;
/**
* @deprecated Use `description` instead. Label displayed on the interface, for the check box.
*/
"label": string;
/**
* Name of the component, saved as part of form data.
*/
"name": string;
/**
* Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
*/
"required": boolean;
/**
* Sets focus on a `fw-checkbox`.
*/
"setFocus": () => Promise<void>;
/**
* Theme based on which the checkbox is styled.
*/
"state": 'normal' | 'warning' | 'error';
/**
* Identifier corresponding to the component, that is saved when the form data is saved.
*/
"value": string;
/**
* Warning text displayed below the radio group.
*/
"warningText": string;
}
interface FwCustomCellAnchor {
"href": string;
"text": string;
}
interface FwCustomCellIcon {
"color": string;
"library": string;
"name": string;
"size": number;
"src": any;
}
interface FwCustomCellParagraph {
/**
* text to display inside the cell
*/
"text": string;
}
interface FwCustomCellUser {
"alt": string;
"email": string;
"image": any;
"name": string;
}
interface FwDataTable {
/**
* autoSaveSettings to enable auto saving of table settings to `localstorage`. If set to `true`, make sure `id` attribute is also set to the `data-table`
*/
"autoSaveSettings": boolean;
/**
* Columns Array of objects that provides information regarding the columns in the table.
*/
"columns": DataTableColumn[];
/**
* getSelectedIds
* @returns an array of selected row IDs
*/
"getSelectedIds": () => Promise<string[]>;
/**
* getSelectedRows
* @returns selected rows from the data table
*/
"getSelectedRows": () => Promise<DataTableRow[]>;
/**
* getTableSettings
* @returns columnConfig object
*/
"getTableSettings": () => Promise<{}>;
/**
* isAllSelectable Boolean based on which select all option appears in the table header
*/
"isAllSelectable": boolean;
/**
* To disable table during async operations
*/
"isLoading": boolean;
/**
* isSelectable Boolean based on which selectable options appears for rows in the table.
*/
"isSelectable": boolean;
/**
* Label attribute is not visible on screen. There for accessibility purposes.
*/
"label": string;
/**
* loadTable - Method to call when we want to change table loading state
* @param state to load table or not
* @returns isLoading current state
*/
"loadTable": (state?: boolean) => Promise<boolean>;
/**
* To enable bulk actions on the table.
*/
"rowActions": DataTableAction[];
/**
* Rows Array of objects to be displayed in the table.
*/
"rows": DataTableRow[];
/**
* selectAllRows method we can use to select/unselect rows in the table
* @param checked denotes if we want to check or uncheck the rows
*/
"selectAllRows": (checked?: boolean) => Promise<string[]>;
/**
* setTableSettings
* @param columnConfig columnConfig object
*/
"setTableSettings": (columnConfig: any) => Promise<DataTableColumn[]>;
/**
* shimmerCount number of shimmer rows to show during initial loading
*/
"shimmerCount": number;
/**
* showSettings is used to show the settings button on the table.
*/
"showSettings": boolean;
}
interface FwDatepicker {
"cancelText": string;
/**
* Displays a clear icon in the text box. Clicking the icon clears the value. Default `false`
*/
"clearInput": boolean;
/**
* Clears the input value and unselects selected date.
*/
"clearValue": () => Promise<void>;
/**
* Format in which the date values selected in the calendar are populated in the input box. Defaults to the locale specific display format.
*/
"displayFormat": string;
/**
* Error text displayed below the text box.
*/
"errorText": string;
/**
* Starting date of the date range that is preselected in the calendar, if mode is range. Must be a date later than the min-date value and valid ISO date format.
*/
"fromDate": string;
/**
* Returns the date value in ISO format.
*/
"getValue": () => Promise<string | { fromDate: string; toDate: string; }>;
/**
* Hint text displayed below the text box.
*/
"hintText": string;
/**
* Label displayed on the interface, for the component.
*/
"label": string;
/**
* Locale for which datepicker needs to be shown. Defaults to browser's current locale.
*/
"locale": string;
/**
* Latest date a user can select in the calendar, if mode is range. Must be a valid ISO date format if set.
*/
"maxDate": string;
/**
* Maximum year that needs to be displayed in the year dropdown.
*/
"maxYear": number;
/**
* Earliest date a user can select in the calendar, if mode is range. Must be a valid ISO date format if set.
*/
"minDate": string;
/**
* Minimum year that needs to be displayed in the year dropdown.
*/
"minYear": number;
/**
* Type of date selection enabled for the calendar. If the value is range, a user can select a date range in the calendar.
*/
"mode": 'single date' | 'range';
/**
* Name of the component, saved as part of form data.
*/
"name": string;
/**
* Text displayed in the input box before a user selects a date or date range.
*/
"placeholder": string;
/**
* Make the input box as readonly. Default `false`
*/
"readonly": boolean;
/**
* Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
*/
"required": boolean;
/**
* Sets focus on a specific `fw-datepicker`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise<void>;
/**
* Indicates if footer needs to be shown. Default `true`.
*/
"showFooter": boolean;
/**
* Theme based on which the input of the datepicker is styled.
*/
"state": 'normal' | 'warning' | 'error';
/**
* Ending date of the date range that is preselected in the calendar, if mode is range. Must be a date earlier than the max-date value and valid ISO date format.
*/
"toDate": string;
"updateText": string;
/**
* Date that is preselected in the calendar, if mode is single date or undefined. If set this must be valid ISO date format.
*/
"value": string;
/**
* Warning text displayed below the text box.
*/
"warningText": string;
}
interface FwDragContainer {
/**
* Id of the fw-sortable element from which draggable content can be accepted. Add comma separated id's for multiple containers.
*/
"acceptFrom": string;
/**
* Whether the drag element should be added to the container on drop. If set to false, the placeholder will be retained.
*/
"addOnDrop": boolean;
/**
* Whether the drag element should be moved or copied.
*/
"copy": boolean;
/**
* The class name for the drag/drop placeholder. Add space separated class names for multiple classes
*/
"placeholderClass": string;
/**
* Whether the list should be sortable.
*/
"sortable": boolean;
}
interface FwDragItem {
/**
* Whether the drag is disabled or not.
*/
"disabled": boolean;
/**
* Pinned position of the drag item, other drag item cannot be placed above or below it.
*/
"pinned": 'top' | 'bottom';
/**
* Whether the drag icon should be visible.
*/
"showDragIcon": boolean;
}
interface FwFileUploader {
/**
* accept - comma separated string. tells us what file formats file uploader should accept.
*/
"accept": string;
/**
* acceptError - Error message to display when format is invalid.
*/
"acceptError": any;
/**
* actionParams - additional information to send to server other than the file.
*/
"actionParams": any;
/**
* actionURL - URL to make server call.
*/
"actionURL": string;
/**
* description - file uploader description.
*/
"description": any;
/**
* fileUploadError - Error message when a file upload fails.
*/
"fileUploadError": any;
/**
* Max files allowed to upload.
*/
"filesLimit": number;
/**
* hint - file uploader hint text.
*/
"hint": string;
/**
* maxFileSize - maximum file size the file uploader must accept.
*/
"maxFileSize": number;
/**
* maxFileSizeError - Error message to display when file size exceeds limit
*/
"maxFileSizeError": any;
/**
* maxFilesLimitError - Error message when going beyond files limit.
*/
"maxFilesLimitError": any;
/**
* modify request
* @param xhr
* @returns xhr
*/
"modifyRequest": (xhr: any) => any;
/**
* multiple - upload multiple files.
*/
"multiple": boolean;
/**
* text - file uploader text.
*/
"text": any;
/**
* uploadFiles - uploads the files to the server. emits an after file is uploaded.
*/
"uploadFiles": () => Promise<void>;
}
interface FwFileUploaderFile {
/**
* file Id
*/
"fileId": number;
/**
* file name
*/
"name": string;
}
interface FwFileUploaderProgress {
/**
* error text for the file upload
*/
"error": string;
/**
* file Id
*/
"fileId": number;
/**
* file name
*/
"fileName": string;
/**
* file upload progress
*/
"progress": number;
}
interface FwForm {
"doReset": (e: any) => Promise<void>;
"doSubmit": (e: any) => Promise<FormSubmit>;
/**
* Id to uniquely identify the Form. If not set, a random Id will be generated.
*/
"formId": any;
/**
* Schema to render Dynamic Form. Contains an array of fields pointing to each form control. Please see the usage reference for examples.
*/
"formSchema"?: any;
/**
* Initial field values of the form. It is an object with keys pointing to field name
*/
"initialValues"?: any;
"setFieldErrors": (errorObj: FormErrors<FormValues>) => Promise<void>;
"setFieldValue": (field: string, value: any, shouldValidate?: boolean) => Promise<void>;
/**
* Validate the form's values with an async function. Should return a Promise which resolves to an errors object. The keys in the errors object must match with the field names.
*/
"validate"?: any;
/**
* Tells Form to validate the form on each input's onBlur event
*/
"validateOnBlur"?: boolean;
/**
* Tells Form to validate the form on each input's onInput event
*/
"validateOnInput"?: boolean;
/**
* YUP based validation schema for handling validation
*/
"validationSchema"?: any;
/**
* The number of milliseconds to delay before doing validation on Input
*/
"wait": number;
}
interface FwFormControl {
"choices": any;
/**
* Contains values for crayons components. Useful when rendering crayons components implicitly via form-control. Not required when using controls via slots.
*/
"controlProps"?: any;
"error": string;
/**
* Additional props can be passed here for crayons components. Useful when rendering crayons components implicitly via form-control.
*/
"fieldProps"?: any;
"hint": string;
"label": any;
"name": any;
"placeholder": string;
"required": boolean;
/**
* Set Focus on the child
*/
"setFocus": () => Promise<void>;
"touched": boolean;
"type": | 'TEXT'
| 'NUMBER'
| 'DECIMAL'
| 'DROPDOWN'
| 'MULTI_SELECT'
| 'RADIO'
| 'CHECKBOX'
| 'DATE'
| 'PARAGRAPH'
| 'EMAIL'
| 'URL'
| 'TEL'
| 'TIME'
| 'RELATIONSHIP';
}
interface FwFormatDate {
/**
* The date/time to format. If not set, the current date and time will be used.
*/
"date": Date | string | number;
/**
* The format for displaying the day.
*/
"day": 'numeric' | '2-digit';
/**
* The format for displaying the hour.
*/
"hour": 'numeric' | '2-digit';
/**
* When set, 24 hour time will always be used.
*/
"hourFormat": 'auto' | '12' | '24';
/**
* The locale to use when formatting the date/time.
*/
"locale": string;
/**
* The format for displaying the minute.
*/
"minute": 'numeric' | '2-digit';
/**
* The format for displaying the month.
*/
"month": 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
/**
* The format for displaying the second.
*/
"second": 'numeric' | '2-digit';
/**
* The time zone to express the time in.
*/
"timeZone": string;
/**
* The format for displaying the time.
*/
"timeZoneName": 'short' | 'long';
/**
* The format for displaying the weekday.
*/
"weekday": 'narrow' | 'short' | 'long';
/**
* The format for displaying the year.
*/
"year": 'numeric' | '2-digit';
}
interface FwFormatNumber {
/**
* The currency to use in currency formatting. Possible values are the `ISO 4217` currency codes, such as `USD` for the US dollar, `EUR` for the euro. If the style is "currency", the currency property must be provided.
*/
"currency": string;
/**
* Currency display formatting.
*/
"currencyDisplay": 'symbol' | 'narrowSymbol' | 'code' | 'name';
/**
* In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable the above by setting the currencySign option to `accounting`. The default value is `standard`
*/
"currencySign": 'accounting' | 'standard';
/**
* `Locale` used for formatting the number
*/
"locale": string;
/**
* The maximum number of fraction digits to use. Possible values are 0 - 20.
*/
"maximumFractionDigits": number;
/**
* The maximum number of significant digits to use,. Possible values are 1 - 21. Default is 21
*/
"maximumSignificantDigits": number;
/**
* The minimum number of fraction digits to use. Possible values are 0 - 20.
*/
"minimumFractionDigits": number;
/**
* The minimum number of integer digits to use. Possible values are 1 - 21. Default is 1
*/
"minimumIntegerDigits": number;
/**
* The minimum number of significant digits to use. Possible values are 1 - 21. Default is 1
*/
"minimumSignificantDigits": number;
/**
* Formatting style
*/
"type": 'currency' | 'decimal' | 'percent';
/**
* Turns on/off grouping separators.
*/
"useGrouping": boolean;
/**
* Number to format.
*/
"value": number;
}
interface FwIcon {
/**
* Color in which the icon is displayed, specified as a standard CSS color or as a HEX code.
*/
"color": string;
/**
* Identifier of the icon. The attribute’s value must be a valid JS Import Name of the svg in the named export from @freshworks/crayons-icon.
*/
"dataSvg": string;
/**
* Height of the icon, specified in number of pixels.
*/
"height": number;
/**
* An alternate description to use for accessibility. If omitted, the icon will be ignored by assistive devices.
*/
"label": string;
/**
* Enable Intersection Observer. Default is false.
*/
"lazy": boolean;
/**
* Name of External Library to be used
*/
"library": string;
/**
* Identifier of the icon. The attribute’s value must be a valid svg Name in the Crayons-Icon set.
*/
"name": string;
/**
* Size of the icon, specified in number of pixels. This will be square coordinates of (w X h) = size X size
*/
"size": number;
/**
* Identifier of the icon. The attribute’s value must be a valid path to svg file.
*/
"src": string;
/**
* Width of the icon, specified in number of pixels.
*/
"width": number;
/**
* Root Margin in px or percentage for Intersection-Observer. This means from ref to bottom of loaded view , the item loads when it crosses above the negative y margin.
*/
"xRootMargin": string;
}
interface FwInlineMessage {
/**
* Makes the inline message closable.
*/
"closable": boolean;
/**
* The duration in milliseconds for which inline message will be shown.
*/
"duration": number;
"hide": () => Promise<void>;
/**
* Indicates whether the inline message is open or not.
*/
"open": boolean;
"show": () => Promise<void>;
/**
* The type of inline message to be displayed. Defaults to info.
*/
"type": 'success' | 'warning' | 'info' | 'error';
}
interface FwInput {
/**
* Specifies whether the browser can display suggestions to autocomplete the text value.
*/
"autocomplete": 'on' | 'off';
/**
* Displays a right-justified clear icon in the text box. Clicking the icon clears the input text. If the attribute’s value is undefined, the value is set to false. For a read-only input box, the clear icon is not displayed unless a default value is specified for the input box.
*/
"clearInput": boolean;
/**
* Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
*/
"disabled": boolean;
/**
* Error text displayed below the text box.
*/
"errorText": string;
/**
* Hint text displayed below the text box.
*/
"hintText": string;
/**
* Identifier of the icon that is displayed in the left side of the text box. The attribute’s value must be a valid svg file in the repo of icons (assets/icons).
*/
"iconLeft": string;
/**
* Identifier of the icon that is displayed in the right side of the text box. The attribute’s value must be a valid svg file in the repo of icons (assets/icons).
*/
"iconRight": string;
/**
* Label displayed on the interface, for the component.
*/
"label": string;
/**
* Specifies a maximum value that can be entered for the number/decimal input.
*/
"max"?: number;
/**
* Maximum number of characters a user can enter in the text box.
*/
"maxlength"?: number;
/**
* Specifies a minimum value that can be entered for the number/decimal input.
*/
"min"?: number;
/**
* Minimum number of characters a user must enter in the text box for the value to be valid.
*/
"minlength"?: number;
/**
* Name of the component, saved as part of form data.
*/
"name": string;
/**
* Text displayed in the text box before a user enters a value.
*/
"placeholder"?: string | null;
/**
* If true, the user cannot enter a value in the input box. If the attribute’s value is undefined, the value is set to false.
*/
"readonly": boolean;
/**
* Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
*/
"required": boolean;
/**
* Sets focus on a specific `fw-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise<void>;
/**
* Theme based on which the text box is styled.
*/
"state": 'normal' | 'warning' | 'error';
/**
* The step attribute is used when the type is `number`. It specifies the interval between legal numbers in a number/decimal input element. Works with the min and max attributes to limit the increments at which a value can be set. Possible values are `any` or a positive floating point number. Default value is `any`
*/
"step": string;
/**
* Type of value accepted as the input value. If a user enters a value other than the specified type, the input box is not populated.
*/
"type": 'text' | 'number' | 'email' | 'url';
/**
* Default value displayed in the input box.
*/
"value"?: string | null;
/**
* Warning text displayed below the text box.
*/
"warningText": string;
}
interface FwLabel {
/**
* Theme based on which the label is styled.
*/
"color": 'blue' | 'red' | 'green' | 'yellow' | 'grey' | 'normal';
/**
* Display text in the label.
*/
"value": string;
}
interface FwListOptions {
/**
* Whether clicking on the already selected option disables it.
*/
"allowDeselect": boolean;
/**
* Place a checkbox.
*/
"checkbox": boolean;
"clearFilter": () => Promise<void>;
/**
* Debounce timer for the search promise function.
*/
"debounceTimer": number;
/**
* Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
*/
"disabled": boolean;
/**
* The text to filter the options.
*/
"filterText": any;
"getSelectedOptions": () => Promise<any>;
/**
* Works with `multiple` enabled. Configures the maximum number of options that can be selected with a multi-select component.
*/
"max": number;
/**
* Enables selection of multiple options. If the attribute’s value is undefined, the value is set to false.
*/
"multiple": boolean;
/**
* Text to be displayed when there is no data available in the select.
*/
"noDataText": string;
/**
* Default option to be shown if the option doesn't match the filterText.
*/
"notFoundText": string;
/**
* Value corresponding to the option, that is saved when the form data is saved.
*/
"options": any[];
"scrollToLastSelected": () => Promise<void>;
/**
* Filter function which takes in filterText and dataSource and return a Promise. Where filter text is the text to filter the value in dataSource array. The returned promise should contain the array of options to be displayed.
*/
"search": (text: string, dataSource: any[]) => Promise<any[]>;
/**
* Placeholder to placed on the search text box.
*/
"searchText": string;
/**
* Enables the input with in the popup for filtering the options.
*/
"searchable": boolean;
/**
* The option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
"selectedOptions": any[];
"setFocus": () => Promise<any>;
"setSelectedOptions": (options: any[]) => Promise<any>;
/**
* Pass an array of string in case of multi-select or string for single-select.
*/
"setSelectedValues": (values: any) => Promise<any>;
/**
* Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
"value": any;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
"variant": DropdownVariant;
}
interface FwMenu {
}
interface FwMenuItem {
/**
* Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
*/
"selectable": boolean;
/**
* Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
*/
"selected": boolean;
}
interface FwModal {
/**
* The text for the cancel button
*/
"cancelText": string;
/**
* Method available from the component to perform close action on the modal
* @returns promise that resolves to true
*/
"close": () => Promise<boolean>;
/**
* The description text to be displayed on the modal
*/
"description": string;
/**
* Property to add or remove the top right close icon button
*/
"hasCloseIconButton": boolean;
/**
* Hide footer for the modal
*/
"hideFooter": boolean;
/**
* The icon to be displayed with the title
*/
"icon": string;
/**
* Toggle the visibility of the modal
*/
"isOpen": boolean;
/**
* Method available from the component to perform open action on the modal
* @returns promise that resolves to true
*/
"open": () => Promise<boolean>;
/**
* Size of the modal
*/
"size": 'standard' | 'small' | 'large';
/**
* Convert modal to slider
*/
"slider": boolean;
/**
* The color of submit button
*/
"submitColor": 'primary' | 'secondary' | 'danger' | 'link' | 'text';
/**
* Default state of submit button
*/
"submitDisabled": boolean;
/**
* The text for the submit button
*/
"submitText": string;
/**
* The title text to be displayed on the modal
*/
"titleText": string;
}
interface FwModalContent {
}
interface FwModalFooter {
/**
* The text for the cancel button
*/
"cancelText": string;
/**
* Function to call on close of modal
*/
"close": any;
/**
* Function to call on submit of modal
*/
"submit": any;
/**
* The color of submit button
*/
"submitColor": 'primary' | 'secondary' | 'danger' | 'link' | 'text';
/**
* Default state of submit button
*/
"submitDisabled": boolean;
/**
* The text for the submit button
*/
"submitText": string;
}
interface FwModalTitle {
/**
* The title text to be displayed on the modal
*/
"description": string;
/**
* The icon to be displayed with the title
*/
"icon": string;
/**
* The title text to be displayed on the modal
*/
"titleText": string;
}
interface FwPagination {
/**
* Aria Label to be used for the button group.
*/
"buttonGroupLabel": string;
/**
* Indicates if the records in current page are being fetched.
*/
"isLoading": boolean;
/**
* Aria Label to be used for next button.
*/
"nextButtonLabel": string;
/**
* Navigates to next set of records if available.
*/
"nextPage": () => Promise<void>;
/**
* The current page number.
*/
"page": number;
/**
* The number of records to be shown per page. Defaults to 10.
*/
"perPage": number;
/**
* Aria Label to be used for previous button.
*/
"previousButtonLabel": string;
/**
* Navigates to previous set of records if available.
*/
"previousPage": () => Promise<void>;
/**
* The total number of records. This is a mandatory parameter.
*/
"total": number;
}
interface FwPill {
/**
* Theme based on which the pill is styled.
*/
"color": 'blue' | 'red' | 'green' | 'yellow' | 'grey';
}
interface FwPopover {
/**
* Whether to focus on the element in popover-content slot on opening the dropdown.
*/
"autoFocusOnContent": boolean;
/**
* The area that the popup will be checked for overflow relative to.
*/
"boundary": HTMLElement;
/**
* Option to disable the popover animation on hide and show.
*/
"disableTransition": boolean;
/**
* Distance defines the distance between the popover trigger and the popover content along y-axis.
*/
"distance": string;
/**
* Alternative placement for popover if the default placement is not possible.
*/
"fallbackPlacements": [PopoverPlacementType];
/**
* Option to determine if popover-content has a border.
*/
"hasBorder": boolean;
"hide": () => Promise<void>;
/**
* Indicates whether popover contents should be hidden on pressing Tab.
*/
"hideOnTab": boolean;
/**
* Option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`.
*/
"hoist": boolean;
/**
* Placement of the popover content with respect to the popover trigger.
*/
"placement": PopoverPlacementType;
/**
* Whether the popover-content width to be same as that of the popover-trigger.
*/
"sameWidth": boolean;
"show": () => Promise<void>;
/**
* Skidding defines the distance between the popover trigger and the popover content along x-axis.
*/
"skidding": string;
/**
* The trigger event on which the popover-content is displayed. The available options are 'click' | 'manual' | 'hover', in case of 'manual' no trigger event will be set.
*/
"trigger": PopoverTriggerType;
/**
* Variant defines the style of the popover-content.
*/
"variant": 'select' | 'date-picker';
}
interface FwProgressLoader {
/**
* Method to end the progress. This hides the progress loader
*/
"done": () => Promise<void>;
/**
* Adjust animation settings using easing (a CSS easing string). Default is `ease`
*/
"easing": string;
/**
* Increments the progress status by a random amount.
*/
"inc": () => Promise<void>;
/**
* Changes the minimum percentage used upon starting. Default is `0.08`
*/
"minimum": number;
/**
* Specify a selector to change the parent container. Default is `body` Selector is accessed internally via document.querySelector method
*/
"parent": string;
/**
* Sets the progress loader status, where `n` is a number from `0.0` to `1.0`.
*/
"set": (n: number) => Promise<void>;
/**
* Show progress loader. Default `false`
*/
"show": boolean;
/**
* Add speed (in ms). Default is `200`
*/
"speed": number;
/**
* Method to start showing the progress loader
*/
"start": () => Promise<void>;
/**
* Use Custom markup. To keep the progress bar working, keep an element with class='bar' in there
*/
"template": string;
/**
* Turn on/off the automatic incrementing behavior by setting this to false. Default is `true`
*/
"trickle": boolean;
/**
* Adjust how often to trickle/increment, in ms. Default is `200`
*/
"trickleSpeed": number;
}
interface FwRadio {
/**
* Sets the state to selected. If the attribute’s value is undefined, the value is set to false.
*/
"checked": boolean;
/**
* Description to be displayed for the checkbox.
*/
"description": string;
/**
* Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
*/
"disabled": boolean;
/**
* @deprecated Use `description` instead. Label displayed on the interface, for the check box.
*/
"label": string;
/**
* Name of the component, saved as part of form data.
*/
"name": string;
/**
* Sets focus on a specific `fw-radio`.
*/
"setFocus": () => Promise<void>;
/**
* Theme based on which the radio button is styled.
*/
"state": 'normal' | 'error';
/**
* Identifier corresponding to the component, that is saved when the form data is saved.
*/
"value": string;
}
interface FwRadioGroup {
/**
* If true, a radio group can be saved without selecting any option. If an option is selected, the selection can be cleared. If the attribute’s value is undefined, the value is set to false.
*/
"allowEmpty": boolean;
/**
* Error text displayed below the radio group.
*/
"errorText": string;
/**
* Hint text displayed below the radio group.
*/
"hintText": string;
/**
* Label for the component
*/
"label": string;
/**
* Name of the component, saved as part of form data.
*/
"name": string;
/**
* Indicates the direction of the radio buttons alignment, defaults to vertical alignment.
*/
"orientation": 'row' | 'column';
/**
* Specifies the input radio group as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
*/
"required": boolean;
/**
* Sets focus on a specific `fw-radio`.
*/
"setFocus": () => Promise<void>;
/**
* Theme based on which the radio group is styled.
*/
"state": 'normal' | 'warning' | 'error';
/**
* Default option that is selected when the radio group is displayed on the interface. Must be a valid value corresponding to the fw-radio components used in the Radio Group.
*/
"value"?: any | null;
/**
* Warning text displayed below the radio group.
*/
"warningText": string;
}
interface FwSelect {
/**
* Whether clicking on the already selected option disables it.
*/
"allowDeselect": boolean;
/**
* Describes the select's boundary HTMLElement
*/
"boundary": HTMLElement;
/**
* Whether the arrow/caret should be shown in the select.
*/
"caret": boolean;
/**
* Place a checkbox.
*/
"checkbox": boolean;
/**
* Debounce timer for the search promise function.
*/
"debounceTimer": number;
/**
* Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
*/
"disabled": boolean;
/**
* Error text displayed below the text box.
*/
"errorText": string;
/**
* If true, the user must select a value. The default value is not displayed.
*/
"forceSelect": boolean;
"getSelectedItem": () => Promise<any>;
/**
* Hint text displayed below the text box.
*/
"hintText": string;
/**
* Label displayed on the interface, for the component.
*/
"label": string;
/**
* If the default label prop is not used, then use this prop to pass the id of the label.
*/
"labelledBy": string;
/**
* Works with `multiple` enabled. Configures the maximum number of options that can be selected with a multi-select component.
*/
"max": number;
/**
* Enables selection of multiple options. If the attribute’s value is undefined, the value is set to false.
*/
"multiple": boolean;
/**
* Name of the component, saved as part of form data.
*/
"name": string;
/**
* Text to be displayed when there is no data available in the select.
*/
"noDataText": string;
/**
* Default option to be shown if the option doesn't match the filterText.
*/
"notFoundText": string;
/**
* The data for the select component, the options will be of type array of fw-select-options.
*/
"options": any;
/**
* Placement of the options list with respect to select.
*/
"optionsPlacement": PopoverPlacementType;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
"optionsVariant": DropdownVariant;
/**
* Text displayed in the list box before an option is selected.
*/
"placeholder"?: string | null;
/**
* If true, the user cannot modify the default value selected. If the attribute's value is undefined, the value is set to true.
*/
"readonly": boolean;
/**
* Specifies the select field as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
*/
"required": boolean;
/**
* Whether the select width to be same as that of the options.
*/
"sameWidth": boolean;
/**
* Filter function which takes in filterText and dataSource and return a Promise. Where filter text is the text to filter the value in dataSource array. The returned promise should contain the array of options to be displayed.
*/
"search": any;
/**
* Allow to search for value. Default is true.
*/
"searchable": boolean;
/**
* Array of the options that is displayed as the default selection, in the list box. Must be a valid option corresponding to the fw-select-option components used in Select.
*/
"selectedOptions": any[];
"setFocus": () => Promise<any>;
"setSelectedOptions": (options: any[]) => Promise<any>;
"setSelectedValues": (values: string | string[]) => Promise<any>;
/**
* Theme based on which the list box is styled.
*/
"state": 'normal' | 'warning' | 'error';
/**
* The variant of tag to be used.
*/
"tagVariant": TagVariant;
/**
* Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated.
*/
"type": 'text' | 'number';
/**
* Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
"value": any;
/**
* The UI variant of the select to be used.
*/
"variant": 'button' | 'standard' | 'mail';
/**
* Warning text displayed below the text box.
*/
"warningText": string;
}
interface FwSelectOption {
/**
* Whether clicking on the already selected option disables it.
*/
"allowDeselect": boolean;
/**
* Place a checkbox.
*/
"checkbox": boolean;
/**
* Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false.
*/
"disabled": boolean;
/**
* The props for the graphics variant. ex., icon props in case of graphicsType = 'icon'
*/
"graphicsProps": any;
/**
* Used in grouped list, provides the group in which the option belongs
*/
"groupName": string;
/**
* States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.
*/
"html": boolean;
/**
* HTML content that is displayed as the option.
*/
"htmlContent"?: string;
/**
* Alternate text displayed on the interface, in place of the actual HTML content.
*/
"optionText": string;
/**
* Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
*/
"selected": boolean;
"setFocus": () => Promise<any>;
/**
* Second line text can be description etc.
*/
"subText": string;
/**
* The text to be displayed in the option.
*/
"text": string;
/**
* Value corresponding to the option, that is saved when the form data is saved.
*/
"value": string | number;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
"variant": DropdownVariant;
}
interface FwSkeleton {
/**
* Number of rows of current skeleton type
*/
"count": number;
/**
* Custom css styles (background/margins/width/height etc.)
* @type {({[k: string]: string} | string)}
*/
"customStyles": { [key: string]: string } | string;
/**
* Effect the ske