diff --git a/.gitignore b/.gitignore index cc33092b72..f68aa6235a 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ docsDist/ coverage/ temp/ .scannerwork +src/components.d.ts .npmrc diff --git a/src/components.d.ts b/src/components.d.ts deleted file mode 100644 index 27633a13cd..0000000000 --- a/src/components.d.ts +++ /dev/null @@ -1,23356 +0,0 @@ -/* 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/core/internal"; -import { ActionBarItem } from "./components/action-bar/action-bar.types"; -import { ListItem as ListItem1, ListSeparator } from "./components/list/list-item.types"; -import { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types"; -import { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types"; -import { Button } from "./components/button/button.types"; -import { CalloutType } from "./components/callout/callout.types"; -import { DateType, Languages } from "./components/date-picker/date.types"; -import { Label, LabelValue } from "./components/dynamic-label/label.types"; -import { Icon } from "./global/shared-types/icon.types"; -import { Image } from "./global/shared-types/image.types"; -import { Link } from "./global/shared-types/link.types"; -import { Chip, ChipType } from "./components/chip-set/chip.types"; -import { MenuItem as MenuItem1 } from "./components"; -import { CircularProgressSize } from "./components/circular-progress/circular-progress.types"; -import { ColorScheme, Language } from "./components/code-editor/code-editor.types"; -import { Action } from "./components/collapsible-section/action"; -import { Config } from "./global/config"; -import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types"; -import { DockItem } from "./components/dock/dock.types"; -import { FormSchema, ListItem, Tab } from "@limetech/lime-elements"; -import { Bird } from "./components/table/examples/birds"; -import { FileInfo } from "./global/shared-types/file.types"; -import { OfficeViewer } from "./components/file-viewer/file-viewer.types"; -import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from "./components/flex-container/flex-container.types"; -import { FormError, FormSchema as FormSchema1, ValidationError, ValidationStatus } from "./components/form/form.types"; -import { IconSize } from "./components/icon/icon.types"; -import { InfoTileProgress } from "./components/info-tile/info-tile.types"; -import { InputType } from "./components/input-field/input-field.types"; -import { ListType } from "./components/list/list.types"; -import { MenuListType } from "./components/menu-list/menu-list.types"; -import { PickerValue } from "./components/picker/value.types"; -import { Searcher } from "./components/picker/searcher.types"; -import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types"; -import { FlowItem } from "./components/progress-flow/progress-flow.types"; -import { Option } from "./components/select/option.types"; -import { SpinnerSize } from "./components/spinner/spinner.types"; -import { Tab as Tab1 } from "./components/tab-bar/tab.types"; -import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types"; -import { Layout } from "./components/table/layout"; -import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types"; -export { ActionBarItem } from "./components/action-bar/action-bar.types"; -export { ListItem as ListItem1, ListSeparator } from "./components/list/list-item.types"; -export { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types"; -export { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types"; -export { Button } from "./components/button/button.types"; -export { CalloutType } from "./components/callout/callout.types"; -export { DateType, Languages } from "./components/date-picker/date.types"; -export { Label, LabelValue } from "./components/dynamic-label/label.types"; -export { Icon } from "./global/shared-types/icon.types"; -export { Image } from "./global/shared-types/image.types"; -export { Link } from "./global/shared-types/link.types"; -export { Chip, ChipType } from "./components/chip-set/chip.types"; -export { MenuItem as MenuItem1 } from "./components"; -export { CircularProgressSize } from "./components/circular-progress/circular-progress.types"; -export { ColorScheme, Language } from "./components/code-editor/code-editor.types"; -export { Action } from "./components/collapsible-section/action"; -export { Config } from "./global/config"; -export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types"; -export { DockItem } from "./components/dock/dock.types"; -export { FormSchema, ListItem, Tab } from "@limetech/lime-elements"; -export { Bird } from "./components/table/examples/birds"; -export { FileInfo } from "./global/shared-types/file.types"; -export { OfficeViewer } from "./components/file-viewer/file-viewer.types"; -export { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from "./components/flex-container/flex-container.types"; -export { FormError, FormSchema as FormSchema1, ValidationError, ValidationStatus } from "./components/form/form.types"; -export { IconSize } from "./components/icon/icon.types"; -export { InfoTileProgress } from "./components/info-tile/info-tile.types"; -export { InputType } from "./components/input-field/input-field.types"; -export { ListType } from "./components/list/list.types"; -export { MenuListType } from "./components/menu-list/menu-list.types"; -export { PickerValue } from "./components/picker/value.types"; -export { Searcher } from "./components/picker/searcher.types"; -export { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types"; -export { FlowItem } from "./components/progress-flow/progress-flow.types"; -export { Option } from "./components/select/option.types"; -export { SpinnerSize } from "./components/spinner/spinner.types"; -export { Tab as Tab1 } from "./components/tab-bar/tab.types"; -export { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types"; -export { Layout } from "./components/table/layout"; -export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types"; -export namespace Components { - /** - * An action bar is a user interface element commonly found in software applications and websites. - * It typically appears at the top of the screen or within a specific section - * and serves as a centralized hub for accessing various actions and commands - * relevant to the current context or page. - * The action bar often contains a set of clickable icons or buttons (icons + labels) - * that represent specific actions, such as saving, deleting, editing, sharing, - * or bulk operations for selected items. - * The purpose of an action bar is to provide quick and convenient access to - * frequently used functionalities, enabling users to perform common tasks efficiently. - * It enhances usability by organizing important actions in a visually prominent and easily accessible location. - * The action bar's design and layout can vary based on the platform or application, - * but its primary goal remains consistent—to - * empower users to interact with the software and perform desired actions effortlessly. - * @exampleComponent limel-example-action-bar - * @exampleComponent limel-example-action-bar-overflow-menu - * @exampleComponent limel-example-action-bar-selected-item - * @exampleComponent limel-example-action-bar-colors - * @exampleComponent limel-example-action-bar-floating - * @exampleComponent limel-example-action-bar-styling - * @exampleComponent limel-example-action-bar-as-primary-component - */ - interface LimelActionBar { - /** - * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar" - */ - "accessibleLabel"?: string; - /** - * Items that are placed in the action bar. These represent primary actions. - */ - "actions": Array; - /** - * - When set to `fullWidth`, the component will take the entire width of its container. - When set to `floating`, the component will get basic stylings to visualize the floating state. :::note You should still properly position the component according to the structure of your user interface. For example, use an `absolute` or `fixed` position. ::: - */ - "layout"?: 'fullWidth' | 'floating'; - /** - * Defines the location that the content of the overflow menu appears, in relation to its trigger. - */ - "openDirection": OpenDirection; - } - /** - * @private - */ - interface LimelActionBarItem { - /** - * When the item is displayed in the available width, this will be `false`. - */ - "isVisible": boolean; - /** - * Item that is placed in the action bar. - */ - "item": ActionBarItem | ListSeparator; - /** - * When the item is selected, this will be `true`. - */ - "selected": boolean; - } - /** - * @private - */ - interface LimelActionBarOverflowMenu { - /** - * List of the items that should be rendered in the overflow menu. - */ - "items": Array; - /** - * Defines the location that the content of the overflow menu appears, in relation to its trigger. It defaults to `bottom-end`, since in normal scenarios (for example when the action bar is not floating at the bottom of the screen) this menu is the right-most item in the user interface of the component. - */ - "openDirection": OpenDirection; - } - /** - * The Badge component can be used to display a notification badge, - * optionally with a number or a text label. - * @exampleComponent limel-example-badge - * @exampleComponent limel-example-badge-number - * @exampleComponent limel-example-badge-string - */ - interface LimelBadge { - /** - * Label to display in the badge. Numeric labels larger than 999 will be rounded and abbreviated. String labels get truncated if their length is longer than six characters. - */ - "label"?: number | string; - } - /** - * @exampleComponent limel-example-banner - */ - interface LimelBanner { - /** - * Close the banner - */ - "close": () => Promise; - /** - * Set icon for the banner - */ - "icon": string; - /** - * The text to show on the banner. - */ - "message": string; - /** - * Open the banner - */ - "open": () => Promise; - } - /** - * A Breadcrumb consists of a list of distinct "places" that a user has gone through, - * before ending up where they are right now, in a website or an application. - * These "places" can be for example _pages_ of a website, which are hierarchically - * laid out before the current page that the user is looking at. - * They could also be _steps_ which the user has gone through, which perhaps have no - * hierarchical relation with each other, but has eventually led the user "here". - * :::note - * - Where the user currently is, is always the last step of the breadcrumb. - * - A breadcrumbs never shows where users can go after this place. - * It only illustrates where user has been before ending up here. - * If the path that a user can take is not changing and if next steps are clear, - * you can use the [Progress flow component](#/component/limel-progress-flow) instead. - * ::: - * Breadcrumbs are often placed horizontally before the main content of the current screen. - * @exampleComponent limel-example-breadcrumbs-links - * @exampleComponent limel-example-breadcrumbs-buttons - * @exampleComponent limel-example-breadcrumbs-icons - * @exampleComponent limel-example-breadcrumbs-divider - * @exampleComponent limel-example-breadcrumbs-icon-color - * @exampleComponent limel-example-breadcrumbs-styling - */ - interface LimelBreadcrumbs { - /** - * The visual divider that separates items. It must be a single character such as `-` or `,`. - */ - "divider": string; - /** - * List of items in the breadcrumbs, each representing a step or a page. - */ - "items": BreadcrumbsItem[]; - } - /** - * @exampleComponent limel-example-button-basic - * @exampleComponent limel-example-button-primary - * @exampleComponent limel-example-button-outlined - * @exampleComponent limel-example-button-disabled - * @exampleComponent limel-example-button-icon - * @exampleComponent limel-example-button-loading - * @exampleComponent limel-example-button-click-success - * @exampleComponent limel-example-button-click-fail - * @exampleComponent limel-example-button-reduce-presence - * @exampleComponent limel-example-button-colors - * @exampleComponent limel-example-button-composite - */ - interface LimelButton { - /** - * Set to `true` to disable the button. - */ - "disabled": boolean; - /** - * Set icon for the button - */ - "icon": string; - /** - * The text to show on the button. - */ - "label": string; - /** - * Set to `true` to put the button in the `loading` state. This also disables the button. - */ - "loading": boolean; - /** - * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state. - */ - "loadingFailed": boolean; - /** - * Set to `true` to make the button outlined. - */ - "outlined": boolean; - /** - * Set to `true` to make the button primary. - */ - "primary": boolean; - } - /** - * A button group control is a linear set of two or more buttons. - * ## Usage - * Button groups are often used to display different views of the same thing. A - * common example of this component is when you switch between [ Map | Transit - * | Satellite ] views to look at an area on the map. - * In some cases, button groups may serve as quick filters as well. For example - * a list of contacts, in which the user can switch to [ All | Favorites - * | Frequently contacted ] can incorporate a button group to quickly filter out - * items and display subsets of them. - * ## Layout - * The button groups are usually placed in top headers and action bars, - * sometimes with other elements. Since the group items will always be rendered - * in a row, you must make sure not to have too many buttons in the group. - * Because if the container of your button group does not get enough space to - * fit in all its buttons, they will have to truncate their text and may appear - * very cramped together. Always think about how your button group will appear - * on a small screen such as phones. - * :::note - * Button can contain text or icons, but not both simultaneously! - * ::: - * Within the group, icon buttons will all have the same width, while each text button - * inherits its width from its content. - * @exampleComponent limel-example-button-group-icons - * @exampleComponent limel-example-button-group - * @exampleComponent limel-example-button-group-mix - * @exampleComponent limel-example-button-group-badges - * @exampleComponent limel-example-button-group-composite - */ - interface LimelButtonGroup { - /** - * True if the button-group should be disabled - */ - "disabled": boolean; - /** - * List of buttons for the group - */ - "value": Button[]; - } - /** - * Callouts—also known as Admonitions—are useful for including supportive or - * special content within a large piece of text, or even inside a user - * interface. - * When used in a document or text based user interface, the callout attracts - * the reader's attention to a particular piece of information, without - * significantly interrupting their flow of reading the document. - * In a user interface, a callout is more intrusive to the end-user. Still, it - * could be a good choice when you intend to slightly disturb the user's - * attention, and challenge them to pay extra attention to the information - * presented. In such cases, a callout should not be used as a static and - * constantly present element of the UI. Rather, it should be displayed when - * something unusual or remarkable demands the user's attention. - * @exampleComponent limel-example-callout-note - * @exampleComponent limel-example-callout-important - * @exampleComponent limel-example-callout-tip - * @exampleComponent limel-example-callout-caution - * @exampleComponent limel-example-callout-warning - * @exampleComponent limel-example-callout-rich-content - * @exampleComponent limel-example-callout-custom-heading - * @exampleComponent limel-example-callout-custom-icon - * @exampleComponent limel-example-callout-styles - * @exampleComponent limel-example-custom-type - * @exampleComponent limel-example-callout-composite - */ - interface LimelCallout { - /** - * Heading of the callout, which can be used to override the default heading which is displayed based on the chosen `type`. - */ - "heading"?: string; - /** - * Icon of the callout, which can be used to override the default icon which is displayed based on the chosen `type`. - */ - "icon"?: string; - /** - * Defines the language for translations. Will translate the default headings for supported languages. - */ - "language": Languages; - /** - * Defines how the component is visualized, for example which heading, color or icon is used in its user interface. - */ - "type"?: CalloutType; - } - /** - * The Checkbox component is a classic and essential element in UI design that allows - * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to - * select one or more items from a list of choices. - * ## States of a Checkbox - * When a user clicks or taps on the box, it toggles between two states: - * Checked and Unchecked. - * However, a Checkbox can visualize a third state called the "Indeterminate" state. - * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it. - * The Indeterminate state is typically used when dealing with checkbox groups - * that have hierarchical relationships or when the group contains sub-items. - * This state is used to indicate that that some, but not all, of the items in a group are selected. - * :::important - * Checkboxes are sometimes used interchangeably with switches in user interfaces. - * But there is an important difference between the two! Please read our guidelines about - * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/). - * @exampleComponent limel-example-checkbox - * @exampleComponent limel-example-checkbox-helper-text - * @exampleComponent limel-example-checkbox-readonly - */ - interface LimelCheckbox { - /** - * The value of the checkbox. Set to `true` to make the checkbox checked. - */ - "checked": boolean; - /** - * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled. - */ - "disabled": boolean; - /** - * Optional helper text to display below the checkbox - */ - "helperText": string; - /** - * Enables indeterminate state. Set to `true` to signal indeterminate check. - */ - "indeterminate": boolean; - /** - * Set to `true` to indicate that the current value is invalid. - */ - "invalid": boolean; - /** - * The checkbox label. - */ - "label": string; - /** - * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable. - */ - "readonly": boolean; - /** - * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`. - * @beta - */ - "readonlyLabels"?: Array>; - /** - * Set to `true` to indicate that the checkbox must be checked. - */ - "required": boolean; - } - /** - * Chips and buttons are both interactive elements in UI design, - * but they serve different purposes and are used in different contexts. - * :::warning - * Do not use the chip component carelessly, as an alternative for - * [`limel-button`](#/component/limel-button/) in the UI design! - * **Buttons:** - * Buttons are used to trigger actions. They are typically used to - * submit forms, open dialogs, initiate a process, or perform any action - * that changes the state of the application. - * Buttons' labels usually contain action words, in other words, the labels is - * a _verb in imperative mood_ such as "Submit" or "Delete". - * Buttons are placed in areas where it's clear they will initiate - * an action when clicked. - * **Chips:** - * Chips however are elements which may look like buttons, but they are - * representing choices, filters, or tags, in a small block - * or clearly bundled into a group. Chips are rarely used alone in the - * user interface. - * They are often used in a so called "chip-set", or placed together in - * a section of the UI, where the user can expect more than one chip to be present. - * For example, a chip may represent a filter in a filter bar, or a tag in a tag list, - * or an item in a shopping list. - * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF, - * or opening a page with all posts tagged with the tag represented by the chip, - * or navigating to a page with more information about the item in the shopping list. - * ::: - * @beta - * @exampleComponent limel-example-chip-button - * @exampleComponent limel-example-chip-link - * @exampleComponent limel-example-chip-icon-colors - * @exampleComponent limel-example-chip-image - * @exampleComponent limel-example-chip-badge - * @exampleComponent limel-example-chip-filter - * @exampleComponent limel-example-chip-removable - * @exampleComponent limel-example-chip-menu - * @exampleComponent limel-example-chip-loading - * @exampleComponent limel-example-chip-progress - * @exampleComponent limel-example-chip-aria-role - */ - interface LimelChip { - /** - * The value of the badge, displayed on the chip. - */ - "badge"?: string | number; - /** - * Set to `true` to disable the chip. - */ - "disabled": boolean; - /** - * Icon of the chip. - */ - "icon"?: string | Icon; - /** - * Identifier for the chip. Must be unique. - */ - "identifier"?: number | string; - /** - * A picture to be displayed instead of the icon on the chip. - */ - "image"?: Image; - /** - * Set to `true` to visualize the chip in an "invalid" or "error" state. - */ - "invalid": boolean; - /** - * Defines the language for translations. Will translate the translatable strings on the components. - */ - "language": Languages; - /** - * If supplied, the chip will become a clickable link. - */ - "link"?: Omit; - /** - * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside the chip. This does _not_ disable the interactivity of the chip! - */ - "loading"?: boolean; - /** - * When provided, the chip will render an ellipsis menu with the supplied items. Also, this will hide the "remove button" when `removable={true}`, as the remove button will automatically become the last item in the menu. - */ - "menuItems"?: Array; - /** - * Reflects the current value of a progress bar on the chip, visualizing the percentage of an ongoing process. Must be a number between `0` and `100`. - */ - "progress"?: number; - /** - * Set to `true` to render the chip as a static UI element. Useful when the parent component has a `readonly` state. - */ - "readonly": boolean; - /** - * Set to `true` to render a remove button on the chip. - */ - "removable": boolean; - /** - * Set to `true` to visualize the chip in a "selected" state. This is typically used when the chip is used in a chip-set along with other chips. - */ - "selected": boolean; - /** - * Label displayed on the chip - */ - "text": string; - /** - * Set to `filter` to render the chip with a distinct style suitable for visualizing filters. - * @beta - */ - "type"?: ChipType; - } - /** - * :::note - * **Regarding `click` and `interact` events:** - * The `interact` event is emitted when a chip is interacted with, and is - * the recommended way to listen for chip interactions. - * However, if you need to handle clicks differently depending on which chip - * was clicked, or whether the click was on a chip or elsewhere, you need to - * listen to the native `click` event instead. - * Native `click` events are passed through, and if the click came from - * a chip, the chip object is available in the event object under - * `.Lime.chip`. - * Example usage: - * ```ts - * private handleClick(event: Event) { - * if (event && 'Lime' in event && (event.Lime as any).chip) { - * if ((event.Lime as { chip: Chip }).chip.href) { - * // Chip has href, so let the browser open the link. - * return; - * } - * // handle click on chip without href - * } else { - * // handle click elsewhere - * } - * } - * ``` - * ::: - * @exampleComponent limel-example-chip-set - * @exampleComponent limel-example-chip-set-choice - * @exampleComponent limel-example-chip-set-filter - * @exampleComponent limel-example-chip-set-filter-badge - * @exampleComponent limel-example-chip-set-input - * @exampleComponent limel-example-chip-set-input-type-with-menu-items - * @exampleComponent limel-example-chip-set-input-type-text - * @exampleComponent limel-example-chip-set-input-type-search - * @exampleComponent limel-example-chip-icon-color - * @exampleComponent limel-example-chip-set-image - * @exampleComponent limel-example-chip-set-composite - */ - interface LimelChipSet { - /** - * Whether the "Clear all" buttons should be shown - */ - "clearAllButton": boolean; - /** - * For chip-set of type `input`. Sets delimiters between chips. - */ - "delimiter": string; - /** - * True if the chip set should be disabled - */ - "disabled": boolean; - /** - * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the consumer control when the input is emptied. - * @returns does not return anything, but methods have to be async - */ - "emptyInput": () => Promise; - /** - * Whether the input field should be emptied when the chip-set loses focus. - */ - "emptyInputOnBlur": boolean; - /** - * Used to find out whether the chip-set is in edit mode. - * @returns `true` if the chip-set is in edit mode, `false` otherwise. - */ - "getEditMode": () => Promise; - /** - * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation. - */ - "helperText": string; - /** - * For chip-sets of type `input`. Value to use for the `type` attribute on the input field inside the chip-set. - */ - "inputType": 'search' | 'text'; - /** - * Set to `true` to indicate that the current value of the input field is invalid. - */ - "invalid": boolean; - /** - * Label for the chip-set - */ - "label": string; - /** - * Defines the language for translations. Will translate the translatable strings on the components. For example, the clear all chips label. - */ - "language": Languages; - /** - * For chip-sets of type `input`. When the value is null, no leading icon is used. Leading icon to show to the far left in the text field - */ - "leadingIcon": string; - /** - * For chip-sets of type `input`. Limits the maximum number of chips. When the value is `0` or not set, no limit is applied. - */ - "maxItems": number; - /** - * For chip-sets of type `input`, set to `true` to disable adding and removing chips, but allow interaction with existing chips in the set. For any other types, setting either `readonly` or `disabled` disables the chip-set. - */ - "readonly": boolean; - /** - * True if the control requires a value - */ - "required": boolean; - /** - * Search label to display when type is `input` and component is in search mode - */ - "searchLabel": string; - /** - * Used to set focus to the chip-set input field. - * @param emptyInput - if `true`, any text in the input is discarded - * @returns does not return anything, but methods have to be async - */ - "setFocus": (emptyInput?: boolean) => Promise; - /** - * Type of chip set - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field If no type is set, a basic set of chips without additional functionality will be rendered - */ - "type"?: 'choice' | 'filter' | 'input'; - /** - * List of chips for the set - */ - "value": Chip[]; - } - /** - * The circular progress component can be used to visualize the curent state of - * a progress in a scale; for example percentage of completion of a task. - * Its compact UI makes the component suitable when there is not enough screen - * space available to visualise such information. - * This component allows you to define your scale, from `0` to a desired - * `maxValue`; and also lets you chose a proper `suffix` for your scale. - * :::note - * The component will round up the value when it is displayed, and only shows - * one decimal digit. - * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k. - * Of course such numbers, if bigger than `maxValue` will be visualized as a - * full progress. - * ::: - * @exampleComponent limel-example-circular-progress - * @exampleComponent limel-example-circular-progress-sizes - * @exampleComponent limel-example-circular-progress-props - * @exampleComponent limel-example-circular-progress-css-variables - * @exampleComponent limel-example-circular-progress-percentage-colors - */ - interface LimelCircularProgress { - /** - * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%. - */ - "displayPercentageColors": boolean; - /** - * The maximum value within the scale that the progress bar should visualize. Defaults to `100`. - */ - "maxValue": number; - /** - * The prefix which is displayed before the `value`, must be a few characters characters long. - */ - "prefix"?: string; - /** - * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified. - */ - "size": CircularProgressSize; - /** - * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%` - */ - "suffix": string; - /** - * The value of the progress bar. - */ - "value": number; - } - /** - * @exampleComponent limel-example-code-editor - * @exampleComponent limel-example-code-editor-readonly-with-line-numbers - * @exampleComponent limel-example-code-editor-fold-lint - */ - interface LimelCodeEditor { - /** - * Select color scheme for the editor - */ - "colorScheme": ColorScheme; - /** - * Allows the user to fold code - */ - "fold": boolean; - /** - * The language of the code - */ - "language": Language; - /** - * Displays line numbers in the editor - */ - "lineNumbers": boolean; - /** - * Enables linting of JSON content - */ - "lint": boolean; - /** - * Disables editing of the editor content - */ - "readonly": boolean; - /** - * The code to be rendered - */ - "value": string; - } - /** - * @exampleComponent limel-example-collapsible-section - * @exampleComponent limel-example-collapsible-section-actions - * @exampleComponent limel-example-collapsible-section-css-props - * @exampleComponent limel-example-collapsible-section-external-control - * @exampleComponent limel-example-collapsible-section-with-slider - */ - interface LimelCollapsibleSection { - /** - * Actions to place to the far right inside the header - */ - "actions": Action[]; - /** - * Text to display in the header of the section - */ - "header": string; - /** - * `true` if the section is expanded, `false` if collapsed. - */ - "isOpen": boolean; - } - /** - * This component enables you to select a swatch from out color palette, simply - * by clicking on it. You can then copy the css variable name of the chosen color - * and use it where desired. - * The color picker can also show you a preview of any valid color name or color value. - * :::note - * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette. - * ::: - * @exampleComponent limel-example-color-picker - * @exampleComponent limel-example-color-picker-readonly - */ - interface LimelColorPicker { - /** - * Helper text of the input field - */ - "helperText": string; - /** - * The label of the input field - */ - "label": string; - /** - * Set to `true` if a value is readonly. This makes the component un-interactive. - */ - "readonly": boolean; - /** - * Set to `true` if a value is required - */ - "required": boolean; - /** - * Displayed as tooltips when picker is hovered. - */ - "tooltipLabel": string; - /** - * Name or code of the chosen color - */ - "value": string; - } - /** - * @private - */ - interface LimelColorPickerPalette { - /** - * Helper text of the input field - */ - "helperText": string; - /** - * Label of the input field - */ - "label": string; - /** - * Set to `true` if a value is required - */ - "required": boolean; - /** - * Color value that is manually typed by the user - */ - "value": string; - } - /** - * Component used to set global configuration for Lime Elements. - * :::warning - * **Building something for Lime CRM?** Then you should _NOT_ use this component. - * Lime CRM already uses this component to set the global configuration for - * Lime Elements. No matter what problem you are facing at the moment, using - * this component will not help, and might cause other problems. - * ::: - * Building your own software, which is using Lime Elements? - * Then you _might_ need to use this component. - * @private - */ - interface LimelConfig { - /** - * Global configuration for Lime Elements. - */ - "config": Config; - } - /** - * @exampleComponent limel-example-date-picker-datetime - * @exampleComponent limel-example-date-picker-date - * @exampleComponent limel-example-date-picker-time - * @exampleComponent limel-example-date-picker-week - * @exampleComponent limel-example-date-picker-month - * @exampleComponent limel-example-date-picker-quarter - * @exampleComponent limel-example-date-picker-year - * @exampleComponent limel-example-date-picker-formatted - * @exampleComponent limel-example-date-picker-programmatic-change - * @exampleComponent limel-example-date-picker-composite - * @exampleComponent limel-example-date-picker-custom-formatter - */ - interface LimelDatePicker { - /** - * Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again. - */ - "disabled": boolean; - /** - * Format to display the selected date in. - */ - "format": string; - /** - * Custom formatting function. Will be used for date formatting. :::note overrides `format` and `language` ::: - */ - "formatter"?: (date: Date) => string; - /** - * Optional helper text to display below the input field when it has focus - */ - "helperText": string; - /** - * Set to `true` to indicate that the current value of the date picker is invalid. - */ - "invalid": boolean; - /** - * Text to display next to the date picker - */ - "label": string; - /** - * Defines the localisation for translations and date formatting. Property `format` customizes the localized date format. - */ - "language": Languages; - /** - * The placeholder text shown inside the input field, when the field is focused and empty - */ - "placeholder": string; - /** - * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit. - */ - "readonly": boolean; - /** - * Set to `true` to indicate that the field is required. - */ - "required": boolean; - /** - * Type of date picker. - */ - "type": DateType; - /** - * The value of the field. - */ - "value": Date; - } - /** - * :::note - * Regarding the `close` event: When putting other elements that emit `close` - * events inside a dialog, those events must be caught and stopped inside the - * dialog. If not, they will bubble to the event handler listening for `close` - * events on the dialog, which will close the dialog too. - * See the example _Nested `close` events_. - * ::: - * :::important - * Are you developing for - * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that - * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html) - * from Lime Web Components to open dialogs in Lime CRM. - * ::: - * @exampleComponent limel-example-dialog - * @exampleComponent limel-example-dialog-nested-close-events - * @exampleComponent limel-example-dialog-heading - * @exampleComponent limel-example-dialog-heading-actions - * @exampleComponent limel-example-dialog-form - * @exampleComponent limel-example-dialog-size - * @exampleComponent limel-example-dialog-fullscreen - * @exampleComponent limel-example-dialog-closing-actions - * @exampleComponent limel-example-dialog-action-buttons - */ - interface LimelDialog { - /** - * Defines which action triggers a close-event. - */ - "closingActions": ClosingActions; - /** - * Set to `true` to make the dialog "fullscreen". - */ - "fullscreen": boolean; - /** - * The heading for the dialog, if any. - */ - "heading": string | DialogHeading; - /** - * `true` if the dialog is open, `false` otherwise. - */ - "open": boolean; - } - /** - * @exampleComponent limel-example-dock-basic - * @exampleComponent limel-example-dock-custom-component - * @exampleComponent limel-example-dock-notification - * @exampleComponent limel-example-dock-mobile - * @exampleComponent limel-example-dock-expanded - * @exampleComponent limel-example-dock-colors-css - */ - interface LimelDock { - /** - * A label used to describe the purpose of the navigation element to users of assistive technologies, like screen readers. Especially useful when there are multiple navigation elements in the user interface. Example value: "Primary navigation" - */ - "accessibleLabel"?: string; - /** - * Set to `false` if you do not want to allow end-users to exapnd or shrink the Dock. This will hide the expand/shrink button, and the only things that defines the layout will be the `expanded` property, and the `mobileBreakPoint`. - */ - "allowResize"?: boolean; - /** - * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.) - */ - "dockFooterItems"?: DockItem[]; - /** - * Items that are placed in the dock. - */ - "dockItems": DockItem[]; - /** - * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip. Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below… - */ - "expanded"?: boolean; - /** - * Defines the breakpoint in pixles, at which the component will be rendered in a hoizontal layout. Default breakpoint is `700` pixels, which means when the screen size is smaller than `700px`, the component will automatically switch to a horizontal layout. - */ - "mobileBreakPoint"?: number; - } - /** - * @private - */ - interface LimelDockButton { - /** - * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout. - */ - "expanded"?: boolean; - /** - * Item that is placed in the dock. - */ - "item": DockItem; - /** - * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout. - */ - "useMobileLayout"?: boolean; - } - /** - * This components displays a different label depending on the current given - * value. A label can consist of a text and an optional icon. If no matching - * label is found among the given `labels`, the `defaultLabel` will be displayed. - * One use case of the component is to enhance the visualization of a `boolean` - * field like a checkbox or switch in a `readonly` state. - * The reason we offer this component is that the default styling - * of the Checkbox or Toggle switch in the `readonly` state may not always - * provide the best way of _visualizing information_, potentially leading to - * confusion and negatively affecting the end-users' experience. - * @exampleComponent limel-example-dynamic-label - * @exampleComponent limel-example-dynamic-label-readonly-boolean - * @beta - */ - interface LimelDynamicLabel { - /** - * The label to display when no matching value is found in the `labels` array. This is a fallback label that ensures there's always a label displayed for the component. - */ - "defaultLabel": Omit; - /** - * A list of available labels. Each label has a corresponding value that will be matched with the current `value` of the component to determine what label to display. - */ - "labels": Label[]; - /** - * The current value of the component which is used to match with the given `labels` to determine what label to display. If not matching label is found, the `defaultLabel` is displayed. - */ - "value": LabelValue; - } - /** - * Basic Example - * An action bar is typically placed on top of a page or section, - * displaying multiple buttons in a row. - * Separators can be added to visually group related actions. - * :::tip - * By default, when `layout="fullWidth"`, all actions will be placed on - * the left side of the action bar, - * but you can override this default behavior by - * adding `justify-content: flex-end;`. - * ::: - */ - interface LimelExampleActionBar { - } - /** - * Creative usage - * Since the action bar can automatically overflow actions which do not - * fit into the available width, it makes the component a good candidate - * for providing contextual actions within small sections of a user interface. - * :::important - * For this specific usage (`limel-action-bar` as a primary component in `limel-list`) - * the certain styles are required for the overflow menu to properly work. - * See the linked CSS file! - * There should be a `min-width` and `max-width` on the component in order to prevent - * the overflow menu to cause infinite rendering loops. - * ::: - * @sourceFile action-bar-in-list.tsx - * @sourceFile action-bar-in-list.scss - */ - interface LimelExampleActionBarAsPrimaryComponent { - } - /** - * Using colors - * You can specify colors for single actions, by setting `color` on the `icon`. - * :::note - * Make sure not to overuse colors! - * It is perfectly fine that most of the actions in the bar use the default color. - * Colors should be used to add an extra layer of meaning for the actions. - * ::: - */ - interface LimelExampleActionBarColors { - } - /** - * Floating Example - * For some designs, it may make sense to display the action bar as - * a floating element on top of the page's content. - * Set the `layout` prop to `floating` to get the basics styles of - * a floating bar. - * :::note - * 1. In this case, the action bar gets some elevation effect - * using a `box-shadow`. This is to properly separate the action bar - * form its surrounding context. You can override this by setting another - * `box-shadow`. - * 2. Make sure to use a proper `openDirection` for the - * overflow menu. - * 3. Make sure there is space on the sides of the action bar, - * so that it doesn't stretch out completely from left edge to the right - * edge. The component is already doing so using a `max-width`, - * but you can override it by providing another `max-width`. - * ::: - */ - interface LimelExampleActionBarFloating { - } - interface LimelExampleActionBarInList { - } - /** - * Overflow menu - * When the action bar items don't fit in the available space, - * an overflow button is automatically added as the last item on the action bar. - * The menu indicates the quantity of the actions which are currently invisible for the users. - * Clicking on the overflow button opens a menu with the remaining actions that didn't fit - * in the available space. - */ - interface LimelExampleActionBarOverflowMenu { - } - /** - * Selected item - * For some use cases, one or more items in the action bar could - * get a `selected` state. This is useful for example when you want to - * highlight a currently active item in a list of items. - */ - interface LimelExampleActionBarSelectedItem { - } - /** - * Styling - * Using provided custom CSS properties, - * it is possible to style the action bar. - * :::note - * The `--action-bar-item-icon-color` affects all icons. - * However, the `color` specified for `icon` for individual items - * will override that. - * ::: - */ - interface LimelExampleActionBarStyling { - } - interface LimelExampleActionButtonsChoosingExplicitLabels { - } - interface LimelExampleActionButtonsChoosingLabels { - } - interface LimelExampleActionButtonsColorsDoDont { - } - interface LimelExampleActionButtonsIconColor { - } - interface LimelExampleActionButtonsPlacement { - } - interface LimelExampleActionButtonsPrimarySecondary { - } - interface LimelExampleActionButtonsPrimarySecondaryReversed { - } - interface LimelExampleActionButtonsPrimarySecondaryReversedColors { - } - interface LimelExampleActionButtonsThirdAlternative { - } - interface LimelExampleAuditionForm { - } - interface LimelExampleAuditionFormReadonly { - } - /** - * Badge without a `label` - * When no `label` is provided, the badge will only render as a circle. - * This is a convention which is used in many applications to attract the - * user's attention to a certain element on the user interface; typically to - * menus or buttons that navigate the user to another pane or screen. - * In such cases, the idea is to provide the users with a "red thread" - * and help them find something that requires their attention, but is located - * on another place in the app, and not directly visible. - * :::tip - * Make sure that the dot is noticeable, by providing an - * eye-catching background color, as shown in this example. - * ::: - */ - interface LimelExampleBadge { - } - /** - * Number badges - * Numeric labels larger than 999 will get both rounded and abbreviated. - * For example, if the label is `1090` the badge will display `1.1K`. - * Abbreviation units used are `k` (Kilo) that stands for Thousands, - * `M` for Millions, `B` for Billions, and `T` for Trillions. - * When users hover the abbreviated badge, the complete - * `label` will be displayed in a tooltip. - */ - interface LimelExampleBadgeNumber { - } - /** - * String badges - * String labels get truncated if their visual length is longer than - * six characters placed side by side (six `0`s to be exact). - * When users hover the truncated badge, the complete - * `label` will be displayed in a tooltip. - */ - interface LimelExampleBadgeString { - } - interface LimelExampleBanner { - } - interface LimelExampleBooleanCheckboxes { - } - interface LimelExampleBooleanRadioButtons { - } - interface LimelExampleBrandColorPalette { - } - /** - * Items as buttons - * The Breadcrumbs can also be used to navigate between different - * steps of a process, such as steps of a form or survey, or - * moving through steps of a wizard. - * In this case, you will not provide any `link`s and instead will - * handle the clicks. When no links are provided, the component - * will automatically generate a list of `button`s. - * Keep in mind that the last item will not be rendered as an - * HTML button and and therefore won't be clickable. - */ - interface LimelExampleBreadcrumbsButtons { - } - /** - * Changing the divider - * By default a **›** character is used to visually divide the - * items from each other. This visual divider indicates the - * order and depths of steps which are taken to reach the current - * step. - * However, in certain contexts, other characters could be - * more suitable to visualize this hierarchy, - * such as a **·**, **-** or similar. - * :::warning - * Avoid using ellipsis motifs like **···**, **…** or **⋮**, - * since they look like universally prevalent icons which - * communicate other meanings. - */ - interface LimelExampleBreadcrumbsDivider { - } - /** - * Using colors - * You can specify colors for single item, by setting `color` on the `icon`. - * :::note - * Make sure not to overuse colors! - * It is perfectly fine that items in the bar use the default color. - * Colors should be used to add an extra layer of meaning for the actions. - * An icon can either adopt the color of the default text or receive a color - * if the `--breadcrumbs-item-text-color` has been set. - * Nevertheless, if the `color` is explicitly defined, - * it will take precedence over the default icon's color. - * ::: - */ - interface LimelExampleBreadcrumbsIconColor { - } - /** - * Using icons - * For an improved accessibility, you are required to - * provide a `text` for each item in the breadcrumbs. - * But each item can have an optional icon too. - * However, in some UIs, the design might require - * hiding the text and relying on an icon to visualize - * an item in the path. - * In this case you can set the `type` to - * `icon-only` on the desired items. - * :::note - * The last item (current step) will always - * display both an icon and the text, even if you - * set the `type` to `icon-only` - * ::: - */ - interface LimelExampleBreadcrumbsIcons { - } - /** - * Items as hyperlinks - * When the Breadcrumbs are used to navigate between different webpages, - * for example navigating a website, you will need to provide a `link` - * for each webpage. - * This way, the component will automatically generate a list of - * hyperlinks. This gives the users the possibility of interacting with links - * in a natural way, for instance they can open any of the previous - * pages in a new browser tab. This also has other accessibility benefits. - * :::note - * Clicking links will open in current window by default, - * and this reloads the entire webpage. - * To avoid reloading the whole application (in the context of a single-page apps), - * you might want to handle the navigation with your application's router, - * ::: - * Keep in mind that the last item will not be rendered as an HTML link and - * is not clickable. - */ - interface LimelExampleBreadcrumbsLinks { - } - /** - * Styling - * Using provided custom CSS properties, - * it is possible to style the breadcrumbs. - */ - interface LimelExampleBreadcrumbsStyling { - } - /** - * Basic Example - * Just a label and a click-handler. - * Open the dev-tools console to see logged clicks. - */ - interface LimelExampleButtonBasic { - } - /** - * With click handler, and failed feedback - * This example works just like the "With click handler" example, except that, - * when the `loading` attribute changes from `true` to `false`, the button - * automatically indicates that the previously ongoing process just failed. - */ - interface LimelExampleButtonClickFail { - } - /** - * With click handler - * The click handler in this example simulates saving some changed values in a - * form. When the button is clicked, the `loading` attribute is set to `true`. - * After a short while, we pretend that the saving was successful, and set - * `loading` to `false`. We also set `disabled` to `true`, because we just - * successfully saved, so until the user updates our imaginary form again, there - * is nothing to save. - * When the `loading` attribute changes from `true` to `false`, the button - * automatically displays a checkmark icon for 2 seconds. Note that our click - * handler isn't actually involved in this. - * A short while after the checkmark has disappeared, we enable the button - * again. This is just so that you can try the functionality again. Normally, - * the button would stay disabled until the user made some changes, so there's - * something new to save! - */ - interface LimelExampleButtonClickSuccess { - } - /** - * How to color button text and background - * When a button is a "primary" button (`primary={true}`), the color value you specify - * for `--lime-primary-color` will apply to its background. By default, text color - * of primary buttons is white. To change their text color you must send a color - * value with the `--lime-on-primary-color` variable. - * When a button is not a "primary" button, the value of `--lime-primary-color` - * will be applied to its text, and `--lime-on-primary-color` will have no effect. - * Keep in mind that `disabled` buttons don't care about your specified colors at all. - */ - interface LimelExampleButtonColors { - } - /** - * Composite - * A place to try different combinations of states. - */ - interface LimelExampleButtonComposite { - "schema": FormSchema; - } - /** - * Disabled - * :::note - * Discover when to utilize the disabled state and when it is preferable to hide a button by reading our guidelines [Disabled vs. Hidden](#/DesignGuidelines/disabled-hidden.md/). - * ::: - */ - interface LimelExampleButtonDisabled { - } - interface LimelExampleButtonDisabledVsHidden { - } - /** - * Text only - * This layout is good when you do not have access to icons which are - * descriptive enough. - */ - interface LimelExampleButtonGroup { - } - /** - * Button group with badges - * Badges can be used to add further contextual information. - * For example, if the component is used to filter a set of data - * the badges could visualize the number of entries - * for each filter option. - * The badge can either - * have a `number` or `string` label. - * Read more about how the badge truncates or abbreviates the - * provided label [here](#/component/limel-badge/). - */ - interface LimelExampleButtonGroupBadges { - } - /** - * Composite - * A place to try different combinations of states. - */ - interface LimelExampleButtonGroupComposite { - "schema": FormSchema; - } - /** - * Icon only - * If you pick well descriptive icons, this layout will usually suffice. When - * you specify an `icon`, it will automatically be shown instead of the `title`. - * :::important - * Adding titles for buttons is compulsory. The reason is that when - * only icons are shown, titles will appear as `aria-label` for screen readers, - * as well as `title` attribute when users hover and hold their cursors on the - * buttons. - * ::: - * This makes it easier for them to know what the button actually does - * or what the icon tries to indicate. - * So, make sure to label your icons properly and descriptively. - */ - interface LimelExampleButtonGroupIcons { - } - /** - * Mixed text and icon within the same group - * Generally, you should avoid mixing text and images in button group. Although - * individual buttons can contain text or images, mixing the two in a single - * group can lead to an inconsistent and confusing interface. - * However, in some case your design may benefit from having only one button in - * a different format. - */ - interface LimelExampleButtonGroupMix { - } - /** - * Icon - */ - interface LimelExampleButtonIcon { - } - /** - * Loading - * Note that the example is also using `disabled`, because a button that is - * loading should normally also be disabled. - */ - interface LimelExampleButtonLoading { - } - /** - * Outlined - * By setting `outlined={true}`, you can create a style - * of buttons which could be used to indicate an action - * with medium emphasis. - * :::note - * This style is useful to indicate the "secondariness" of an action. - * Therefore, only use this style, if there is another related - * `primary` button present on the same view or screen, - * along with another normal button. - * Also, give such a choice a second thought by reading - * [our guidelines for Split button](#/component/limel-split-button/). - * ::: - */ - interface LimelExampleButtonOutlined { - } - /** - * Primary - * Each screen (modal, or section with action buttons) - * should contain a single prominent button like this one, - * to emphasize the primary action. - * :::note - * Think twice before setting `primary={true}` on buttons. - * The arrangement of buttons and their colors should clearly - * communicate their importance and primariness or secondariness. - * See some examples at [our design guidelines for - * Action buttons](#/DesignGuidelines/action-buttons.md/). - * ::: - */ - interface LimelExampleButtonPrimary { - } - /** - * Reduce Presence - * This example is identical to the "With click handler" example, except that - * here, the `has-reduced-presence` class has been set to `true`. This will hide - * the button when it is disabled. However, it will also make sure that the - * button remains visible while the loading animation is ongoing. When the - * animation is done and the checkmark has been shown, the button will hide. - * Read more in the [Design Guidelines](#/DesignGuidelines/decluttering.md/) - */ - interface LimelExampleButtonReducePresence { - } - interface LimelExampleButtonShadows { - } - /** - * Type: `caution` - */ - interface LimelExampleCalloutCaution { - } - /** - * Composite - */ - interface LimelExampleCalloutComposite { - "schema": FormSchema; - } - /** - * With custom `heading` - * By default, the title will equal the `type` qualifier. - * However, it is possible to use a `type` just to get the desired visualisation - * (icon and color), but override the default heading, using the `heading` prop. - */ - interface LimelExampleCalloutCustomHeading { - } - /** - * With custom `icon` - * By default, the icon will be defined by the `type` qualifier. - * However, it is possible to use a `type` just to get the desired visualisation - * (color and heading), but override the default icon, using the `icon` prop. - */ - interface LimelExampleCalloutCustomIcon { - } - /** - * Type: `important` - */ - interface LimelExampleCalloutImportant { - } - /** - * Type: `note` - * This is the default type. - */ - interface LimelExampleCalloutNote { - } - /** - * Adding rich content - * Sometimes, you need to display more than just a string of text. - * You may want to display richer content with pictures, links, or - * bullet point lists; or use a more advanced component inside - * the callout. - * To do so, simply wrap the content you want to display in this component. - */ - interface LimelExampleCalloutRichContent { - } - /** - * Styling - * It is possible to change the default colors using the provided CSS - * variables. Just make sure to have good contrast between the text and - * background color, to provide good readability. - */ - interface LimelExampleCalloutStyles { - } - /** - * Type: `tip` - * This type is useful for displaying tips & tricks, and How-Tos. - */ - interface LimelExampleCalloutTip { - } - /** - * Type: `warning` - */ - interface LimelExampleCalloutWarning { - } - interface LimelExampleCheckbox { - } - /** - * With `helperText` - * Checkboxes can have a helper text, which is useful when providing additional information - * can clarify functionality of the checkbox for the user. - * The helper text is displayed when user hovers the checkbox, or focuses on it using keyboard - * navigation. However, on touchscreen devices, the helper text is always displayed. - */ - interface LimelExampleCheckboxHelperText { - } - /** - * Customizing the visualization of the `readonly` state - * It is possible and recommended that you enhance the visualization of a `boolean` field - * in a `readonly` state. - * Because depending on the context, the default UI of the `readonly` state may not always - * provide the best way of _visualizing information_, potentially leading to - * confusion and negatively affecting the end-users' experience. - * :::important - * Before reading the documentations below, make sure to read - * 1. our guides about the difference between - * [Disabled vs. Readonly](/#/DesignGuidelines/disabled-vs-readonly.md/) in our components. - * 2. our guidelines about [Labeling boolean fields](/#/DesignGuidelines/labeling-boolean-fields.md/). - * ::: - * Using the `readonlyLabels` optional prop, you can override the `label` and - * customize it accordingly. Additionally, by using the `icon` prop, you can - * override the default icons and their colors. - */ - interface LimelExampleCheckboxReadonly { - } - /** - * Correct usage of ARIA roles - * Chips represent choices, filters, or tags, organized in a block or bundled into a group. - * While sighted users see the visually bundled group of chips in a well-designed UI, - * screen reader users only hear the chip text, one at a time. - * This can make it difficult for users of assistive technologies to understand - * the context of the chip. - * To provide an accessible experience, it's important to place the chips in - * a semantically correct structure, such as a list or a table, - * or properly use ARIA roles on the chip and its container. - * In this example, we demonstrate how to use ARIA roles to improve accessibility for chips. - * However, it's recommended to read up on the subject to fully understand the - * implications of ARIA roles. - * For more information on ARIA roles, refer to the - * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). - */ - interface LimelExampleChipAriaRole { - } - /** - * Chip with a badge - * Chips can display a badge with a number or a short text. - */ - interface LimelExampleChipBadge { - } - /** - * Chip as button - * Typically, a chip is used to trigger an action or act as an input element. - * This is why the component generates a `