/* 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 { IAutocompleteItem, IAutocompleteNoResults } from "./components/modus-wc-autocomplete/modus-wc-autocomplete"; import { AutocompleteTypes, DaisySize, Density, IInputFeedbackProp, ModusSize, Orientation, PopoverPlacement, TextFieldTypes } from "./components/types"; import { IBreadcrumb } from "./components/modus-wc-breadcrumbs/modus-wc-breadcrumbs"; import { ICollapseOptions } from "./components/modus-wc-collapse/modus-wc-collapse"; import { IInputFeedbackLevel } from "./components/modus-wc-input-feedback/modus-wc-input-feedback"; import { LoaderColor, LoaderVariant } from "./components/modus-wc-loader/modus-wc-loader"; import { INavbarTextOverrides, INavbarUserCard, INavbarVisibility } from "./components/modus-wc-navbar/modus-wc-navbar"; import { IAriaLabelValues, IPageChange } from "./components/modus-wc-pagination/modus-wc-pagination"; import { IRatingChange, ModusWcRatingVariant } from "./components/modus-wc-rating/modus-wc-rating"; import { ISelectOption } from "./components/modus-wc-select/modus-wc-select"; import { IStepperItem } from "./components/modus-wc-stepper/modus-wc-stepper"; import { IPaginationChangeEventDetail, ITableColumn } from "./components/modus-wc-table/modus-wc-table"; import { SortingState } from "@tanstack/table-core"; import { ITab } from "./components/modus-wc-tabs/modus-wc-tabs"; import { IThemeConfig } from "./providers/theme/theme.types"; import { ToastPosition } from "./components/modus-wc-toast/modus-wc-toast"; import { TypographyVariant, TypographyWeight } from "./components/modus-wc-typography/modus-wc-typography"; export { IAutocompleteItem, IAutocompleteNoResults } from "./components/modus-wc-autocomplete/modus-wc-autocomplete"; export { AutocompleteTypes, DaisySize, Density, IInputFeedbackProp, ModusSize, Orientation, PopoverPlacement, TextFieldTypes } from "./components/types"; export { IBreadcrumb } from "./components/modus-wc-breadcrumbs/modus-wc-breadcrumbs"; export { ICollapseOptions } from "./components/modus-wc-collapse/modus-wc-collapse"; export { IInputFeedbackLevel } from "./components/modus-wc-input-feedback/modus-wc-input-feedback"; export { LoaderColor, LoaderVariant } from "./components/modus-wc-loader/modus-wc-loader"; export { INavbarTextOverrides, INavbarUserCard, INavbarVisibility } from "./components/modus-wc-navbar/modus-wc-navbar"; export { IAriaLabelValues, IPageChange } from "./components/modus-wc-pagination/modus-wc-pagination"; export { IRatingChange, ModusWcRatingVariant } from "./components/modus-wc-rating/modus-wc-rating"; export { ISelectOption } from "./components/modus-wc-select/modus-wc-select"; export { IStepperItem } from "./components/modus-wc-stepper/modus-wc-stepper"; export { IPaginationChangeEventDetail, ITableColumn } from "./components/modus-wc-table/modus-wc-table"; export { SortingState } from "@tanstack/table-core"; export { ITab } from "./components/modus-wc-tabs/modus-wc-tabs"; export { IThemeConfig } from "./providers/theme/theme.types"; export { ToastPosition } from "./components/modus-wc-toast/modus-wc-toast"; export { TypographyVariant, TypographyWeight } from "./components/modus-wc-typography/modus-wc-typography"; export namespace Components { /** * A customizable accordion component used for showing and hiding related groups of content. * The component supports a `` for injecting `` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info. */ interface ModusWcAccordion { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; } /** * A customizable alert component used to inform the user about important events */ interface ModusWcAlert { /** * The description of the alert. */ "alertDescription"?: string; /** * The title of the alert. */ "alertTitle": string; /** * Custom CSS class to apply to the outer div element. */ "customClass"?: string; /** * Whether the alert has a dismiss button */ "dismissible"?: boolean; /** * The Modus icon to render. */ "icon"?: string; /** * Role taken by the alert. Defaults to 'status' */ "role": 'alert' | 'log' | 'marquee' | 'status' | 'timer'; /** * The variant of the alert. */ "variant"?: 'error' | 'info' | 'success' | 'warning'; } /** * A customizable autocomplete component used to create searchable text inputs. */ interface ModusWcAutocomplete { /** * Indicates that the autocomplete should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to host element. */ "customClass"?: string; /** * The debounce timeout in milliseconds. Set to 0 to disable debouncing. */ "debounceMs"?: number; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Show the clear button within the input field. */ "includeClear"?: boolean; /** * Show the search icon within the input field. */ "includeSearch"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The items to display in the menu. Creating a new array of items will ensure proper component re-render. */ "items"?: IAutocompleteItem[]; /** * The text to display within the label. */ "label"?: string; /** * Whether the menu should remain open after an item is selected. */ "leaveMenuOpen"?: boolean; /** * The minimum number of characters required to render the menu. */ "minChars": number; /** * Whether the input allows multiple items to be selected. */ "multiSelect"?: boolean; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * The content to display when no results are found. */ "noResults"?: IAutocompleteNoResults; /** * Text that appears in the form control when it has no value set. */ "placeholder"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * Whether to show the menu whenever the input has focus, regardless of input value. */ "showMenuOnFocus"?: boolean; /** * A spinner that appears when set to true */ "showSpinner"?: boolean; /** * The size of the autocomplete (input and menu). */ "size"?: ModusSize; /** * The value of the control. */ "value": string; } /** * A customizable avatar component used to create avatars with different images. */ interface ModusWcAvatar { /** * The image alt attribute for accessibility. */ "alt": string; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The location of the image. */ "imgSrc": string; /** * The shape of the avatar. */ "shape"?: 'circle' | 'square'; /** * The size of the avatar. */ "size"?: DaisySize; } /** * A customizable badge component used to create badges with different sizes, types, and colors. * The component supports a `` for injecting content within the badge. */ interface ModusWcBadge { /** * The color variant of the badge. */ "color": | 'primary' | 'secondary' | 'tertiary' | 'high-contrast' | 'success' | 'warning' | 'danger'; /** * Custom CSS class to apply to the span element. */ "customClass": string; /** * The size of the badge. */ "size": ModusSize; /** * The variant of the badge. */ "variant": 'counter' | 'filled' | 'text'; } /** * A customizable breadcrumbs component used to help users navigate through a website. */ interface ModusWcBreadcrumbs { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The breadcrumbs to render. */ "items": IBreadcrumb[]; /** * The size of the breadcrumbs. */ "size"?: ModusSize; } /** * A customizable button component used to create buttons with different sizes, variants, and types. * The component supports a `` for injecting content within the button, similar to a native HTML button */ interface ModusWcButton { /** * The color variant of the button. */ "color": 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; /** * Custom CSS class to apply to the button element. */ "customClass"?: string; /** * If true, the button will be disabled. */ "disabled"?: boolean; /** * If true, the button will take the full width of its container. */ "fullWidth"?: boolean; /** * If true, the button will be in a pressed state (for toggle buttons). */ "pressed"?: boolean; /** * The shape of the button. */ "shape": 'circle' | 'rectangle' | 'square'; /** * The size of the button. */ "size": DaisySize; /** * The type of the button. */ "type": 'button' | 'submit' | 'reset'; /** * The variant of the button. */ "variant": 'borderless' | 'filled' | 'outlined'; } /** * A customizable card component used to group and display content in a way that is easily readable */ interface ModusWcCard { /** * Makes any \
in the 'header' slot cover the background */ "backgroundFigure"?: boolean; /** * Adds a hard border to the card */ "bordered"?: boolean; /** * Custom CSS class to apply */ "customClass"?: string; /** * Determines how the card is laid out */ "layout"?: 'vertical' | 'horizontal'; /** * Determines if the interior padding is compact or not */ "padding"?: 'normal' | 'compact'; } /** * A customizable checkbox component */ interface ModusWcCheckbox { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the checkbox. */ "disabled"?: boolean; /** * The indeterminate state of the checkbox. */ "indeterminate": boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the checkbox. */ "value": boolean; } /** * A customizable chip component used to display information in a compact area */ interface ModusWcChip { /** * Active state of chip. */ "active"?: boolean; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Whether the chip is disabled. */ "disabled"?: boolean; /** * Whether the chip has an error. */ "hasError"?: boolean; /** * The label to display in the chip. */ "label"?: string; /** * Whether to show the close icon on right side of the chip. */ "showRemove"?: boolean; /** * The size of the chip. */ "size"?: ModusSize; /** * The variant of the chip. */ "variant"?: 'filled' | 'outline'; } /** * A customizable collapse component used for showing and hiding content. * The component supports a 'header' and 'content' `` for injecting custom HTML. * Do not set */ interface ModusWcCollapse { /** * Indicates that the component should have a border. */ "bordered"?: boolean; /** * A unique identifier used to set the id attributes of various elements. */ "collapseId"?: string; /** * Custom CSS class to apply to the outer div. */ "customClass"?: string; /** * Controls whether the collapse is expanded or not. */ "expanded"?: boolean; /** * Configuration options for rendering the pre-laid out collapse component. Do not set this prop if you intend to use the 'header' slot. */ "options"?: ICollapseOptions; } /** * A customizable date picker component used to create date inputs. * Adheres to WCAG 2.2 standards. */ interface ModusWcDate { /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Maximum date value. */ "max"?: string; /** * Minimum date value. */ "min"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required or must be checked for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the control (yyyy-mm-dd). */ "value": string; } /** * A customizable divider component used to separate content horizontally or vertically */ interface ModusWcDivider { /** * The color of the divider line. */ "color"?: | 'primary' | 'secondary' | 'tertiary' | 'high-contrast' | 'success' | 'warning' | 'danger'; /** * The content to display in the divider. */ "content"?: string; /** * Custom CSS class to apply to the divider element. */ "customClass"?: string; /** * The orientation of the divider. This is in reference to how content will be rendered around the divider. */ "orientation"?: Orientation; /** * The position of the divider. */ "position"?: 'center' | 'end' | 'start'; /** * Whether the divider is responsive or not. */ "responsive"?: boolean; } /** * A customizable dropdown menu component used to render a button and toggleable menu. * The component supports a 'button' and 'menu' `` for injecting custom HTML content. */ interface ModusWcDropdownMenu { /** * The color variant of the button. */ "buttonColor"?: | 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; /** * The size of the button. */ "buttonSize"?: DaisySize; /** * The variant of the button. */ "buttonVariant"?: 'borderless' | 'filled' | 'outlined'; /** * Custom CSS class to apply to the host element. */ "customClass"?: string; /** * If true, the button will be disabled. */ "disabled"?: boolean; /** * Indicates that the menu should have a border. */ "menuBordered"?: boolean; /** * Distance between the button and menu in pixels. */ "menuOffset"?: number; /** * The placement of the menu relative to the button. */ "menuPlacement"?: PopoverPlacement; /** * The size of the menu. */ "menuSize"?: ModusSize; /** * Indicates that the menu is visible. */ "menuVisible": boolean; } /** * A customizable icon component used to render Modus icons. * This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ interface ModusWcIcon { /** * Custom CSS class to apply to the i element. */ "customClass"?: string; /** * Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers. */ "decorative"?: boolean; /** * The icon name, should match the CSS class in the icon font. */ "name": string; /** * The icon size, can be "sm", "md", "lg" (a custom size can be specified in CSS). This adjusts the font size for the icon. */ "size"?: DaisySize; } /** * A customizable feedback component used to provide additional context related to form input interactions. * To use a custom icon, this component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ interface ModusWcInputFeedback { /** * Custom CSS class to apply to the outer div element. */ "customClass"?: string; /** * The Modus icon to use instead of the pre-defined icons. */ "icon"?: string; /** * The level informs which icon and color that will be rendered. */ "level": IInputFeedbackLevel; /** * The message. */ "message"?: string; /** * The size of the feedback component. */ "size"?: ModusSize; } /** * A customizable input label component. * The component supports a `` for injecting additional custom content inside the label, such as icons or formatted text */ interface ModusWcInputLabel { /** * Additional classes for custom styling. */ "customClass"?: string; /** * The `for` attribute of the label, matching the `id` of the associated input. */ "forId"?: string; /** * The text to display within the label. */ "labelText"?: string; /** * Whether the label indicates a required field. */ "required"?: boolean; /** * The size of the label. */ "size"?: ModusSize; /** * The text rendered beneath the label. */ "subLabelText"?: string; } /** * A customizable loader component used to indicate the loading of content */ interface ModusWcLoader { /** * The color of the loader. */ "color": LoaderColor; /** * Custom CSS class to apply to the loader element. */ "customClass"?: string; /** * The size of the loader. */ "size": DaisySize; /** * The variant of the loader. */ "variant": LoaderVariant; } /** * A customizable menu component used to display a list of li elements vertically or horizontally. * The component supports a `` for injecting custom li elements inside the ul */ interface ModusWcMenu { /** * Indicates that the menu should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the ul element. */ "customClass"?: string; /** * The orientation of the menu. */ "orientation"?: Orientation; /** * The size of the menu. */ "size"?: ModusSize; } /** * A customizable menu item component used to display the item portion of a menu */ interface ModusWcMenuItem { "bordered"?: boolean; /** * Custom CSS class to apply to the li element. */ "customClass"?: string; /** * The disabled state of the menu item. */ "disabled"?: boolean; /** * The focused state of the menu item. */ "focused"?: boolean; /** * The text rendered in the menu item. */ "label": string; /** * The selected state of the menu item. */ "selected"?: boolean; /** * The size of the menu item. */ "size"?: ModusSize; /** * The modus icon name to render on the start of the menu item. */ "startIcon"?: string; /** * The text rendered beneath the label. */ "subLabel"?: string; /** * The unique identifying value of the menu item. */ "value": string; } /** * A customizable modal component used to display content in a dialog. * The component supports a 'header', 'content', and 'footer' for injecting custom HTML */ interface ModusWcModal { /** * The modal's backdrop. Specify 'static' for a backdrop that doesn't close the modal when clicked outside the modal content. */ "backdrop"?: 'default' | 'static'; /** * Custom CSS class to apply */ "customClass"?: string; /** * Specifies whether the modal should be displayed full-screen */ "fullscreen"?: boolean; /** * The ID of the inner dialog element */ "modalId": string; /** * Specifies the position of the modal */ "position"?: 'bottom' | 'center' | 'top'; /** * Specifies whether to show the close icon button at the top right of modal */ "showClose"?: boolean; /** * Specifies whether to show the fullscreen toggle icon button */ "showFullscreenToggle"?: boolean; } /** * A customizable navbar component used for top level navigation of all Trimble applications. * The component supports a 'main-menu', 'notifications', and 'apps' `` for injecting custom HTML menus. * It also supports a 'start', 'center', and 'end' `` for injecting additional custom HTML */ interface ModusWcNavbar { /** * The open state of the apps menu. */ "appsMenuOpen"?: boolean; /** * Applies condensed layout and styling. */ "condensed"?: boolean; /** * The open state of the condensed menu. */ "condensedMenuOpen"?: boolean; /** * Custom CSS class to apply to the host element. */ "customClass"?: string; /** * The open state of the main menu. */ "mainMenuOpen"?: boolean; /** * The open state of the notifications menu. */ "notificationsMenuOpen"?: boolean; /** * Debounce time in milliseconds for search input changes. Default is 300ms. */ "searchDebounceMs"?: number; /** * The open state of the search input. */ "searchInputOpen"?: boolean; /** * Text replacements for the navbar. */ "textOverrides"?: INavbarTextOverrides; /** * User information used to render the user card. */ "userCard": INavbarUserCard; /** * The open state of the user menu. */ "userMenuOpen"?: boolean; /** * The visibility of individual navbar buttons. Default is user profile visible, others hidden. */ "visibility"?: INavbarVisibility; } /** * A customizable input component used to create number inputs with types */ interface ModusWcNumberInput { /** * Hint for form autofill feature. */ "autoComplete"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * The currency symbol to display. */ "currencySymbol"?: string; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */ "inputMode": 'decimal' | 'none' | 'numeric'; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * The input's maximum value. */ "max"?: number; /** * The input's minimum value. */ "min"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Text that appears in the form control when it has no value set. */ "placeholder"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The granularity that the value adheres to. */ "step"?: number; /** * Type of form control. */ "type"?: 'number' | 'range'; /** * The value of the control. */ "value": string; } /** * Pagination component to navigate through pages of content */ interface ModusWcPagination { /** * Aria label values for pagination buttons */ "ariaLabelValues"?: IAriaLabelValues; /** * Total number of pages */ "count": number; /** * Custom CSS class to apply */ "customClass"?: string; /** * The next page button text. If not set, an icon control will be used. */ "nextButtonText"?: string; /** * The current page number */ "page": number; /** * The previous page button text. If not set, an icon control will be used. */ "prevButtonText"?: string; /** * Size of the pagination buttons */ "size": ModusSize; } /** * A customizable progress component used to show the progress of a task or show the passing of time. * The radial variant supports slotting in custom HTML to be displayed within the progress circle */ interface ModusWcProgress { /** * Custom CSS class to apply to the progress element. */ "customClass"?: string; /** * The indeterminate state of the progress component. */ "indeterminate": boolean; /** * A text label to render within the progress bar */ "label"?: string; /** * The progress component's maximum value. */ "max"?: number; /** * The value of the progress component. */ "value": number; /** * The variant of the progress component. */ "variant"?: 'default' | 'radial'; } /** * A customizable radio component */ interface ModusWcRadio { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the radio. */ "disabled"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the radio. */ "value": boolean; } /** * A rating component that allows users to choose a rating from predefined options */ interface ModusWcRating { /** * Whether to allow half-ratings. Only applies to star and heart variants. */ "allowHalf"?: boolean; /** * The number of rating items to display */ "count": number; /** * Custom CSS class to apply */ "customClass"?: string; /** * Whether the rating component is disabled */ "disabled"?: boolean; /** * Function to provide aria-label text for a given rating-item index */ "getAriaLabelText"?: (ratingValue: number) => string; /** * The size of the rating component */ "size"?: ModusSize; /** * The current value of the rating */ "value": number; /** * The variant of the rating scale */ "variant": ModusWcRatingVariant; } /** * A customizable select component used to pick a value from a list of options */ interface ModusWcSelect { /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * The options to display in the select dropdown. */ "options": ISelectOption[]; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the control. */ "value": string; } /** * A customizable side navigation component for organizing primary navigation and content areas in an application. */ interface ModusWcSideNavigation { /** * Whether the side navigation should collapse when clicking outside of it. */ "collapseOnClickOutside": boolean; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Whether the side navigation is expanded. */ "expanded": boolean; /** * Maximum width of the side navigation panel in an expanded state. */ "maxWidth": string; } /** * A customizable skeleton component used to create skeletons of various sizes and shapes */ interface ModusWcSkeleton { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The height of the skeleton. */ "height": string; /** * The shape of the skeleton. */ "shape"?: 'circle' | 'rectangle'; /** * The width of the skeleton. */ "width": string; } /** * A customizable slider component */ interface ModusWcSlider { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the slider. */ "disabled"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * The maximum slider value. */ "max"?: number; /** * The minimum slider value. */ "min"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The increment of the slider. */ "step"?: number; /** * The value of the slider. */ "value": number; } /** * Used to show a list of steps in a process. */ interface ModusWcStepper { /** * Custom CSS class to apply to the steps element. */ "customClass"?: string; /** * The orientation of the steps. */ "orientation"?: Orientation; /** * The steps to display. */ "steps": IStepperItem[]; } /** * A customizable checkbox component */ interface ModusWcSwitch { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the switch. */ "disabled"?: boolean; /** * The indeterminate state of the switch. */ "indeterminate": boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the switch. */ "value": boolean; } interface ModusWcTable { /** * An array of column definitions. */ "columns": ITableColumn[]; /** * The current page number in pagination (1-based index). */ "currentPage": number; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * An array of data objects. */ "data": Record[]; /** * The density of the table, used to save space or increase readability. */ "density"?: Density; /** * Enable cell editing. Either a boolean (all rows) or a predicate per row. */ "editable"?: boolean | ((row: Record) => boolean); /** * Enable hover effect on table rows. */ "hover"?: boolean; /** * Available options for the number of rows per page. */ "pageSizeOptions": number[]; /** * Enable pagination for the table. */ "paginated"?: boolean; /** * Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows. */ "selectable"?: 'none' | 'single' | 'multi'; /** * Array of selected row IDs. Used for controlled selection state. */ "selectedRowIds"?: string[]; /** * Show/hide the page size selector in pagination. */ "showPageSizeSelector"?: boolean; /** * Enable sorting functionality for sortable columns. */ "sortable"?: boolean; /** * Zebra striped tables differentiate rows by styling them in an alternating fashion. */ "zebra"?: boolean; } /** * A customizable tabs component used to create groups of tabs. */ interface ModusWcTabs { /** * The current active tab */ "activeTabIndex": number; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The size of the tabs. */ "size"?: ModusSize; /** * Additional styling for the tabs. */ "tabStyle"?: 'boxed' | 'bordered' | 'lifted' | 'none'; /** * The tabs to display. */ "tabs": ITab[]; } /** * A customizable input component used to create text inputs with types. */ interface ModusWcTextInput { /** * Controls automatic capitalization in inputted text. */ "autoCapitalize"?: | 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'; /** * Hint for form autofill feature. */ "autoComplete"?: AutocompleteTypes; /** * Controls automatic correction in inputted text. Support by browser varies. */ "autoCorrect"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Aria label for the clear icon button. */ "clearAriaLabel"?: string; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * A hint to the browser for which enter key to display. */ "enterkeyhint"?: | 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * Show the clear button within the input field. */ "includeClear"?: boolean; /** * Show the search icon within the input field. */ "includeSearch"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */ "inputMode": | 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Maximum length (number of characters) of value. */ "maxLength"?: number; /** * Minimum length (number of characters) of value. */ "minLength"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Pattern the value must match to be valid */ "pattern"?: string; /** * Text that appears in the form control when it has no value set. */ "placeholder"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * Type of form control. */ "type"?: TextFieldTypes; /** * The value of the control. */ "value": string; } /** * A customizable textarea component. */ interface ModusWcTextarea { /** * Controls automatic correction in inputted text. Support by browser varies. */ "autoCorrect"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the textarea (supports DaisyUI). */ "customClass"?: string; /** * The disabled state of the textarea. */ "disabled"?: boolean; /** * A hint to the browser for which enter key to display. */ "enterkeyhint"?: | 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * The maximum number of characters allowed in the textarea. */ "maxLength"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * The placeholder text for the textarea. */ "placeholder"?: string; /** * The readonly state of the textarea. */ "readonly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The number of visible text lines for the textarea. */ "rows"?: number; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the textarea. */ "value": string; } interface ModusWcThemeProvider { "initialTheme"?: Partial; } /** * A theme switcher component used to toggle the application theme and/or mode. * Allows consumers to set the initial theme (Modus Classic, Modus Modern, etc.) and end-users to toggle modes (Light, Dark). */ interface ModusWcThemeSwitcher { /** * Custom CSS class to apply to the theme switcher element. */ "customClass"?: string; } /** * A customizable input component used to create time inputs. */ interface ModusWcTimeInput { /** * Hint for form autofill feature. */ "autoComplete"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * ID of a `` element that contains pre-defined time options. The value must be the ID of a `` element in the same document. */ "datalistId"?: string; /** * The options to display in the time input dropdown. Options must be in `HH:mm` or `HH:mm:ss` format. */ "datalistOptions": string[]; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Maximum value. Format: `HH:mm`, `HH:mm:ss`. */ "max"?: string; /** * Minimum value. Format: `HH:mm`, `HH:mm:ss.` */ "min"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * Displays the time input format as `HH:mm:ss` if `true`. Internally sets the `step` to 1 second. If a `step` value is provided, it will override this attribute. */ "showSeconds"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * Specifies the granularity that the `value` must adhere to. Value of step given in seconds. Default value is 60 seconds. Overrides the `seconds` attribute if both are provided. */ "step"?: number; /** * The value of the time input. Always in 24-hour format that includes leading zeros: `HH:mm` or `HH:mm:ss`, regardless of input format which is likely to be selected based on user's locale (or by the user agent). If time includes seconds the format is always `HH:mm:ss`. */ "value": string; } /** * A customizable toast component used to stack elements, positioned on the corner of a page. * The component supports a `` for injecting additional custom content inside the toast. */ interface ModusWcToast { /** * Additional classes for custom styling. */ "customClass"?: string; /** * Time taken to dismiss the toast in milliseconds */ "delay"?: number; /** * The position of the toast in the parent container. */ "position"?: ToastPosition; } /** * A customizable toolbar component used to organize content across the entire page. */ interface ModusWcToolbar { /** * Custom CSS class to apply to the outer div. */ "customClass"?: string; } /** * A customizable tooltip component used to create tooltips with different content. */ interface ModusWcTooltip { /** * The text content of the tooltip. */ "content": string; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Disables displaying the tooltip on hover */ "disabled"?: boolean; /** * Use this attribute to force the tooltip to remain open. */ "forceOpen"?: boolean; /** * The position that the tooltip will render in relation to the element. */ "position"?: 'auto' | 'top' | 'right' | 'bottom' | 'left'; /** * The ID of the tooltip element, useful for setting the "aria-describedby" attribute of related elements. */ "tooltipId"?: string; } /** * A customizable typography component used to render text with different sizes, variants, and weights. */ interface ModusWcTypography { /** * Custom CSS class to apply to the typography element. */ "customClass"?: string; /** * The size of the font. */ "size"?: DaisySize; /** * The variant of the typography component. */ "variant": TypographyVariant; /** * The weight of the text. */ "weight"?: TypographyWeight; } } export interface ModusWcAccordionCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcAccordionElement; } export interface ModusWcAlertCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcAlertElement; } export interface ModusWcAutocompleteCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcAutocompleteElement; } export interface ModusWcBreadcrumbsCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcBreadcrumbsElement; } export interface ModusWcButtonCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcButtonElement; } export interface ModusWcCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcCheckboxElement; } export interface ModusWcChipCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcChipElement; } export interface ModusWcCollapseCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcCollapseElement; } export interface ModusWcDateCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcDateElement; } export interface ModusWcDropdownMenuCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcDropdownMenuElement; } export interface ModusWcMenuCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcMenuElement; } export interface ModusWcMenuItemCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcMenuItemElement; } export interface ModusWcNavbarCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcNavbarElement; } export interface ModusWcNumberInputCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcNumberInputElement; } export interface ModusWcPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcPaginationElement; } export interface ModusWcRadioCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcRadioElement; } export interface ModusWcRatingCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcRatingElement; } export interface ModusWcSelectCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcSelectElement; } export interface ModusWcSliderCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcSliderElement; } export interface ModusWcSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcSwitchElement; } export interface ModusWcTableCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcTableElement; } export interface ModusWcTabsCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcTabsElement; } export interface ModusWcTextInputCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcTextInputElement; } export interface ModusWcTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcTextareaElement; } export interface ModusWcThemeSwitcherCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcThemeSwitcherElement; } export interface ModusWcTimeInputCustomEvent extends CustomEvent { detail: T; target: HTMLModusWcTimeInputElement; } declare global { interface HTMLModusWcAccordionElementEventMap { "expandedChange": { expanded: boolean; index: number; }; } /** * A customizable accordion component used for showing and hiding related groups of content. * The component supports a `` for injecting `` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info. */ interface HTMLModusWcAccordionElement extends Components.ModusWcAccordion, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcAccordionElement, ev: ModusWcAccordionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcAccordionElement, ev: ModusWcAccordionCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcAccordionElement: { prototype: HTMLModusWcAccordionElement; new (): HTMLModusWcAccordionElement; }; interface HTMLModusWcAlertElementEventMap { "dismissClick": any; } /** * A customizable alert component used to inform the user about important events */ interface HTMLModusWcAlertElement extends Components.ModusWcAlert, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcAlertElement, ev: ModusWcAlertCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcAlertElement, ev: ModusWcAlertCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcAlertElement: { prototype: HTMLModusWcAlertElement; new (): HTMLModusWcAlertElement; }; interface HTMLModusWcAutocompleteElementEventMap { "chipRemove": IAutocompleteItem; "inputBlur": FocusEvent; "inputChange": Event; "inputFocus": FocusEvent; "itemSelect": IAutocompleteItem; } /** * A customizable autocomplete component used to create searchable text inputs. */ interface HTMLModusWcAutocompleteElement extends Components.ModusWcAutocomplete, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcAutocompleteElement, ev: ModusWcAutocompleteCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcAutocompleteElement, ev: ModusWcAutocompleteCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcAutocompleteElement: { prototype: HTMLModusWcAutocompleteElement; new (): HTMLModusWcAutocompleteElement; }; /** * A customizable avatar component used to create avatars with different images. */ interface HTMLModusWcAvatarElement extends Components.ModusWcAvatar, HTMLStencilElement { } var HTMLModusWcAvatarElement: { prototype: HTMLModusWcAvatarElement; new (): HTMLModusWcAvatarElement; }; /** * A customizable badge component used to create badges with different sizes, types, and colors. * The component supports a `` for injecting content within the badge. */ interface HTMLModusWcBadgeElement extends Components.ModusWcBadge, HTMLStencilElement { } var HTMLModusWcBadgeElement: { prototype: HTMLModusWcBadgeElement; new (): HTMLModusWcBadgeElement; }; interface HTMLModusWcBreadcrumbsElementEventMap { "breadcrumbClick": IBreadcrumb; } /** * A customizable breadcrumbs component used to help users navigate through a website. */ interface HTMLModusWcBreadcrumbsElement extends Components.ModusWcBreadcrumbs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcBreadcrumbsElement, ev: ModusWcBreadcrumbsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcBreadcrumbsElement, ev: ModusWcBreadcrumbsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcBreadcrumbsElement: { prototype: HTMLModusWcBreadcrumbsElement; new (): HTMLModusWcBreadcrumbsElement; }; interface HTMLModusWcButtonElementEventMap { "buttonClick": MouseEvent | KeyboardEvent; } /** * A customizable button component used to create buttons with different sizes, variants, and types. * The component supports a `` for injecting content within the button, similar to a native HTML button */ interface HTMLModusWcButtonElement extends Components.ModusWcButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcButtonElement, ev: ModusWcButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcButtonElement, ev: ModusWcButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcButtonElement: { prototype: HTMLModusWcButtonElement; new (): HTMLModusWcButtonElement; }; /** * A customizable card component used to group and display content in a way that is easily readable */ interface HTMLModusWcCardElement extends Components.ModusWcCard, HTMLStencilElement { } var HTMLModusWcCardElement: { prototype: HTMLModusWcCardElement; new (): HTMLModusWcCardElement; }; interface HTMLModusWcCheckboxElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable checkbox component */ interface HTMLModusWcCheckboxElement extends Components.ModusWcCheckbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcCheckboxElement, ev: ModusWcCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcCheckboxElement, ev: ModusWcCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcCheckboxElement: { prototype: HTMLModusWcCheckboxElement; new (): HTMLModusWcCheckboxElement; }; interface HTMLModusWcChipElementEventMap { "chipClick": MouseEvent | KeyboardEvent; "chipRemove": MouseEvent | KeyboardEvent; } /** * A customizable chip component used to display information in a compact area */ interface HTMLModusWcChipElement extends Components.ModusWcChip, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcChipElement, ev: ModusWcChipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcChipElement, ev: ModusWcChipCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcChipElement: { prototype: HTMLModusWcChipElement; new (): HTMLModusWcChipElement; }; interface HTMLModusWcCollapseElementEventMap { "expandedChange": { expanded: boolean }; } /** * A customizable collapse component used for showing and hiding content. * The component supports a 'header' and 'content' `` for injecting custom HTML. * Do not set */ interface HTMLModusWcCollapseElement extends Components.ModusWcCollapse, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcCollapseElement, ev: ModusWcCollapseCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcCollapseElement, ev: ModusWcCollapseCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcCollapseElement: { prototype: HTMLModusWcCollapseElement; new (): HTMLModusWcCollapseElement; }; interface HTMLModusWcDateElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable date picker component used to create date inputs. * Adheres to WCAG 2.2 standards. */ interface HTMLModusWcDateElement extends Components.ModusWcDate, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcDateElement, ev: ModusWcDateCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcDateElement, ev: ModusWcDateCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcDateElement: { prototype: HTMLModusWcDateElement; new (): HTMLModusWcDateElement; }; /** * A customizable divider component used to separate content horizontally or vertically */ interface HTMLModusWcDividerElement extends Components.ModusWcDivider, HTMLStencilElement { } var HTMLModusWcDividerElement: { prototype: HTMLModusWcDividerElement; new (): HTMLModusWcDividerElement; }; interface HTMLModusWcDropdownMenuElementEventMap { "menuVisibilityChange": { isVisible: boolean }; } /** * A customizable dropdown menu component used to render a button and toggleable menu. * The component supports a 'button' and 'menu' `` for injecting custom HTML content. */ interface HTMLModusWcDropdownMenuElement extends Components.ModusWcDropdownMenu, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcDropdownMenuElement, ev: ModusWcDropdownMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcDropdownMenuElement, ev: ModusWcDropdownMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcDropdownMenuElement: { prototype: HTMLModusWcDropdownMenuElement; new (): HTMLModusWcDropdownMenuElement; }; /** * A customizable icon component used to render Modus icons. * This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ interface HTMLModusWcIconElement extends Components.ModusWcIcon, HTMLStencilElement { } var HTMLModusWcIconElement: { prototype: HTMLModusWcIconElement; new (): HTMLModusWcIconElement; }; /** * A customizable feedback component used to provide additional context related to form input interactions. * To use a custom icon, this component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ interface HTMLModusWcInputFeedbackElement extends Components.ModusWcInputFeedback, HTMLStencilElement { } var HTMLModusWcInputFeedbackElement: { prototype: HTMLModusWcInputFeedbackElement; new (): HTMLModusWcInputFeedbackElement; }; /** * A customizable input label component. * The component supports a `` for injecting additional custom content inside the label, such as icons or formatted text */ interface HTMLModusWcInputLabelElement extends Components.ModusWcInputLabel, HTMLStencilElement { } var HTMLModusWcInputLabelElement: { prototype: HTMLModusWcInputLabelElement; new (): HTMLModusWcInputLabelElement; }; /** * A customizable loader component used to indicate the loading of content */ interface HTMLModusWcLoaderElement extends Components.ModusWcLoader, HTMLStencilElement { } var HTMLModusWcLoaderElement: { prototype: HTMLModusWcLoaderElement; new (): HTMLModusWcLoaderElement; }; interface HTMLModusWcMenuElementEventMap { "menuFocusout": FocusEvent; } /** * A customizable menu component used to display a list of li elements vertically or horizontally. * The component supports a `` for injecting custom li elements inside the ul */ interface HTMLModusWcMenuElement extends Components.ModusWcMenu, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcMenuElement, ev: ModusWcMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcMenuElement, ev: ModusWcMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcMenuElement: { prototype: HTMLModusWcMenuElement; new (): HTMLModusWcMenuElement; }; interface HTMLModusWcMenuItemElementEventMap { "itemSelect": { value: string }; } /** * A customizable menu item component used to display the item portion of a menu */ interface HTMLModusWcMenuItemElement extends Components.ModusWcMenuItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcMenuItemElement, ev: ModusWcMenuItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcMenuItemElement, ev: ModusWcMenuItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcMenuItemElement: { prototype: HTMLModusWcMenuItemElement; new (): HTMLModusWcMenuItemElement; }; /** * A customizable modal component used to display content in a dialog. * The component supports a 'header', 'content', and 'footer' for injecting custom HTML */ interface HTMLModusWcModalElement extends Components.ModusWcModal, HTMLStencilElement { } var HTMLModusWcModalElement: { prototype: HTMLModusWcModalElement; new (): HTMLModusWcModalElement; }; interface HTMLModusWcNavbarElementEventMap { "aiClick": MouseEvent | KeyboardEvent; "appsClick": MouseEvent | KeyboardEvent; "appsMenuOpenChange": boolean; "condensedMenuOpenChange": boolean; "helpClick": MouseEvent | KeyboardEvent; "mainMenuOpenChange": boolean; "myTrimbleClick": MouseEvent | KeyboardEvent; "notificationsClick": MouseEvent | KeyboardEvent; "notificationsMenuOpenChange": boolean; "searchChange": { value: string }; "searchClick": MouseEvent | KeyboardEvent; "searchInputOpenChange": boolean; "signOutClick": MouseEvent | KeyboardEvent; "trimbleLogoClick": MouseEvent | KeyboardEvent; "userMenuOpenChange": boolean; } /** * A customizable navbar component used for top level navigation of all Trimble applications. * The component supports a 'main-menu', 'notifications', and 'apps' `` for injecting custom HTML menus. * It also supports a 'start', 'center', and 'end' `` for injecting additional custom HTML */ interface HTMLModusWcNavbarElement extends Components.ModusWcNavbar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcNavbarElement, ev: ModusWcNavbarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcNavbarElement, ev: ModusWcNavbarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcNavbarElement: { prototype: HTMLModusWcNavbarElement; new (): HTMLModusWcNavbarElement; }; interface HTMLModusWcNumberInputElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable input component used to create number inputs with types */ interface HTMLModusWcNumberInputElement extends Components.ModusWcNumberInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcNumberInputElement, ev: ModusWcNumberInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcNumberInputElement, ev: ModusWcNumberInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcNumberInputElement: { prototype: HTMLModusWcNumberInputElement; new (): HTMLModusWcNumberInputElement; }; interface HTMLModusWcPaginationElementEventMap { "pageChange": IPageChange; } /** * Pagination component to navigate through pages of content */ interface HTMLModusWcPaginationElement extends Components.ModusWcPagination, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcPaginationElement, ev: ModusWcPaginationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcPaginationElement, ev: ModusWcPaginationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcPaginationElement: { prototype: HTMLModusWcPaginationElement; new (): HTMLModusWcPaginationElement; }; /** * A customizable progress component used to show the progress of a task or show the passing of time. * The radial variant supports slotting in custom HTML to be displayed within the progress circle */ interface HTMLModusWcProgressElement extends Components.ModusWcProgress, HTMLStencilElement { } var HTMLModusWcProgressElement: { prototype: HTMLModusWcProgressElement; new (): HTMLModusWcProgressElement; }; interface HTMLModusWcRadioElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable radio component */ interface HTMLModusWcRadioElement extends Components.ModusWcRadio, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcRadioElement, ev: ModusWcRadioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcRadioElement, ev: ModusWcRadioCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcRadioElement: { prototype: HTMLModusWcRadioElement; new (): HTMLModusWcRadioElement; }; interface HTMLModusWcRatingElementEventMap { "ratingChange": IRatingChange; } /** * A rating component that allows users to choose a rating from predefined options */ interface HTMLModusWcRatingElement extends Components.ModusWcRating, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcRatingElement, ev: ModusWcRatingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcRatingElement, ev: ModusWcRatingCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcRatingElement: { prototype: HTMLModusWcRatingElement; new (): HTMLModusWcRatingElement; }; interface HTMLModusWcSelectElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable select component used to pick a value from a list of options */ interface HTMLModusWcSelectElement extends Components.ModusWcSelect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcSelectElement, ev: ModusWcSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcSelectElement, ev: ModusWcSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcSelectElement: { prototype: HTMLModusWcSelectElement; new (): HTMLModusWcSelectElement; }; /** * A customizable side navigation component for organizing primary navigation and content areas in an application. */ interface HTMLModusWcSideNavigationElement extends Components.ModusWcSideNavigation, HTMLStencilElement { } var HTMLModusWcSideNavigationElement: { prototype: HTMLModusWcSideNavigationElement; new (): HTMLModusWcSideNavigationElement; }; /** * A customizable skeleton component used to create skeletons of various sizes and shapes */ interface HTMLModusWcSkeletonElement extends Components.ModusWcSkeleton, HTMLStencilElement { } var HTMLModusWcSkeletonElement: { prototype: HTMLModusWcSkeletonElement; new (): HTMLModusWcSkeletonElement; }; interface HTMLModusWcSliderElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable slider component */ interface HTMLModusWcSliderElement extends Components.ModusWcSlider, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcSliderElement, ev: ModusWcSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcSliderElement, ev: ModusWcSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcSliderElement: { prototype: HTMLModusWcSliderElement; new (): HTMLModusWcSliderElement; }; /** * Used to show a list of steps in a process. */ interface HTMLModusWcStepperElement extends Components.ModusWcStepper, HTMLStencilElement { } var HTMLModusWcStepperElement: { prototype: HTMLModusWcStepperElement; new (): HTMLModusWcStepperElement; }; interface HTMLModusWcSwitchElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable checkbox component */ interface HTMLModusWcSwitchElement extends Components.ModusWcSwitch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcSwitchElement, ev: ModusWcSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcSwitchElement, ev: ModusWcSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcSwitchElement: { prototype: HTMLModusWcSwitchElement; new (): HTMLModusWcSwitchElement; }; interface HTMLModusWcTableElementEventMap { "cellEditStart": { rowIndex: number; colId: string; }; "cellEditCommit": { rowIndex: number; colId: string; newValue: unknown; updatedRow: Record; }; "rowClick": { row: Record; index: number; }; "sortChange": SortingState; "paginationChange": IPaginationChangeEventDetail; "rowSelectionChange": { selectedRows: Record[]; selectedRowIds: string[]; }; } interface HTMLModusWcTableElement extends Components.ModusWcTable, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcTableElement, ev: ModusWcTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcTableElement, ev: ModusWcTableCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcTableElement: { prototype: HTMLModusWcTableElement; new (): HTMLModusWcTableElement; }; interface HTMLModusWcTabsElementEventMap { "tabChange": { previousTab: number; newTab: number; }; } /** * A customizable tabs component used to create groups of tabs. */ interface HTMLModusWcTabsElement extends Components.ModusWcTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcTabsElement, ev: ModusWcTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcTabsElement, ev: ModusWcTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcTabsElement: { prototype: HTMLModusWcTabsElement; new (): HTMLModusWcTabsElement; }; interface HTMLModusWcTextInputElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable input component used to create text inputs with types. */ interface HTMLModusWcTextInputElement extends Components.ModusWcTextInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcTextInputElement, ev: ModusWcTextInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcTextInputElement, ev: ModusWcTextInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcTextInputElement: { prototype: HTMLModusWcTextInputElement; new (): HTMLModusWcTextInputElement; }; interface HTMLModusWcTextareaElementEventMap { "inputBlur": FocusEvent; "inputChange": InputEvent; "inputFocus": FocusEvent; } /** * A customizable textarea component. */ interface HTMLModusWcTextareaElement extends Components.ModusWcTextarea, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcTextareaElement, ev: ModusWcTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcTextareaElement, ev: ModusWcTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcTextareaElement: { prototype: HTMLModusWcTextareaElement; new (): HTMLModusWcTextareaElement; }; interface HTMLModusWcThemeProviderElement extends Components.ModusWcThemeProvider, HTMLStencilElement { } var HTMLModusWcThemeProviderElement: { prototype: HTMLModusWcThemeProviderElement; new (): HTMLModusWcThemeProviderElement; }; interface HTMLModusWcThemeSwitcherElementEventMap { "themeChange": IThemeConfig; } /** * A theme switcher component used to toggle the application theme and/or mode. * Allows consumers to set the initial theme (Modus Classic, Modus Modern, etc.) and end-users to toggle modes (Light, Dark). */ interface HTMLModusWcThemeSwitcherElement extends Components.ModusWcThemeSwitcher, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcThemeSwitcherElement, ev: ModusWcThemeSwitcherCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcThemeSwitcherElement, ev: ModusWcThemeSwitcherCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcThemeSwitcherElement: { prototype: HTMLModusWcThemeSwitcherElement; new (): HTMLModusWcThemeSwitcherElement; }; interface HTMLModusWcTimeInputElementEventMap { "inputBlur": FocusEvent; "inputChange": Event; "inputFocus": FocusEvent; } /** * A customizable input component used to create time inputs. */ interface HTMLModusWcTimeInputElement extends Components.ModusWcTimeInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusWcTimeInputElement, ev: ModusWcTimeInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLModusWcTimeInputElement, ev: ModusWcTimeInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLModusWcTimeInputElement: { prototype: HTMLModusWcTimeInputElement; new (): HTMLModusWcTimeInputElement; }; /** * A customizable toast component used to stack elements, positioned on the corner of a page. * The component supports a `` for injecting additional custom content inside the toast. */ interface HTMLModusWcToastElement extends Components.ModusWcToast, HTMLStencilElement { } var HTMLModusWcToastElement: { prototype: HTMLModusWcToastElement; new (): HTMLModusWcToastElement; }; /** * A customizable toolbar component used to organize content across the entire page. */ interface HTMLModusWcToolbarElement extends Components.ModusWcToolbar, HTMLStencilElement { } var HTMLModusWcToolbarElement: { prototype: HTMLModusWcToolbarElement; new (): HTMLModusWcToolbarElement; }; /** * A customizable tooltip component used to create tooltips with different content. */ interface HTMLModusWcTooltipElement extends Components.ModusWcTooltip, HTMLStencilElement { } var HTMLModusWcTooltipElement: { prototype: HTMLModusWcTooltipElement; new (): HTMLModusWcTooltipElement; }; /** * A customizable typography component used to render text with different sizes, variants, and weights. */ interface HTMLModusWcTypographyElement extends Components.ModusWcTypography, HTMLStencilElement { } var HTMLModusWcTypographyElement: { prototype: HTMLModusWcTypographyElement; new (): HTMLModusWcTypographyElement; }; interface HTMLElementTagNameMap { "modus-wc-accordion": HTMLModusWcAccordionElement; "modus-wc-alert": HTMLModusWcAlertElement; "modus-wc-autocomplete": HTMLModusWcAutocompleteElement; "modus-wc-avatar": HTMLModusWcAvatarElement; "modus-wc-badge": HTMLModusWcBadgeElement; "modus-wc-breadcrumbs": HTMLModusWcBreadcrumbsElement; "modus-wc-button": HTMLModusWcButtonElement; "modus-wc-card": HTMLModusWcCardElement; "modus-wc-checkbox": HTMLModusWcCheckboxElement; "modus-wc-chip": HTMLModusWcChipElement; "modus-wc-collapse": HTMLModusWcCollapseElement; "modus-wc-date": HTMLModusWcDateElement; "modus-wc-divider": HTMLModusWcDividerElement; "modus-wc-dropdown-menu": HTMLModusWcDropdownMenuElement; "modus-wc-icon": HTMLModusWcIconElement; "modus-wc-input-feedback": HTMLModusWcInputFeedbackElement; "modus-wc-input-label": HTMLModusWcInputLabelElement; "modus-wc-loader": HTMLModusWcLoaderElement; "modus-wc-menu": HTMLModusWcMenuElement; "modus-wc-menu-item": HTMLModusWcMenuItemElement; "modus-wc-modal": HTMLModusWcModalElement; "modus-wc-navbar": HTMLModusWcNavbarElement; "modus-wc-number-input": HTMLModusWcNumberInputElement; "modus-wc-pagination": HTMLModusWcPaginationElement; "modus-wc-progress": HTMLModusWcProgressElement; "modus-wc-radio": HTMLModusWcRadioElement; "modus-wc-rating": HTMLModusWcRatingElement; "modus-wc-select": HTMLModusWcSelectElement; "modus-wc-side-navigation": HTMLModusWcSideNavigationElement; "modus-wc-skeleton": HTMLModusWcSkeletonElement; "modus-wc-slider": HTMLModusWcSliderElement; "modus-wc-stepper": HTMLModusWcStepperElement; "modus-wc-switch": HTMLModusWcSwitchElement; "modus-wc-table": HTMLModusWcTableElement; "modus-wc-tabs": HTMLModusWcTabsElement; "modus-wc-text-input": HTMLModusWcTextInputElement; "modus-wc-textarea": HTMLModusWcTextareaElement; "modus-wc-theme-provider": HTMLModusWcThemeProviderElement; "modus-wc-theme-switcher": HTMLModusWcThemeSwitcherElement; "modus-wc-time-input": HTMLModusWcTimeInputElement; "modus-wc-toast": HTMLModusWcToastElement; "modus-wc-toolbar": HTMLModusWcToolbarElement; "modus-wc-tooltip": HTMLModusWcTooltipElement; "modus-wc-typography": HTMLModusWcTypographyElement; } } declare namespace LocalJSX { /** * A customizable accordion component used for showing and hiding related groups of content. * The component supports a `` for injecting `` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info. */ interface ModusWcAccordion { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * When a collapse expanded state is changed, this event outputs the relevant index and state */ "onExpandedChange"?: (event: ModusWcAccordionCustomEvent<{ expanded: boolean; index: number; }>) => void; } /** * A customizable alert component used to inform the user about important events */ interface ModusWcAlert { /** * The description of the alert. */ "alertDescription"?: string; /** * The title of the alert. */ "alertTitle": string; /** * Custom CSS class to apply to the outer div element. */ "customClass"?: string; /** * Whether the alert has a dismiss button */ "dismissible"?: boolean; /** * The Modus icon to render. */ "icon"?: string; /** * An event that fires when the alert is dismissed */ "onDismissClick"?: (event: ModusWcAlertCustomEvent) => void; /** * Role taken by the alert. Defaults to 'status' */ "role"?: 'alert' | 'log' | 'marquee' | 'status' | 'timer'; /** * The variant of the alert. */ "variant"?: 'error' | 'info' | 'success' | 'warning'; } /** * A customizable autocomplete component used to create searchable text inputs. */ interface ModusWcAutocomplete { /** * Indicates that the autocomplete should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to host element. */ "customClass"?: string; /** * The debounce timeout in milliseconds. Set to 0 to disable debouncing. */ "debounceMs"?: number; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Show the clear button within the input field. */ "includeClear"?: boolean; /** * Show the search icon within the input field. */ "includeSearch"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The items to display in the menu. Creating a new array of items will ensure proper component re-render. */ "items"?: IAutocompleteItem[]; /** * The text to display within the label. */ "label"?: string; /** * Whether the menu should remain open after an item is selected. */ "leaveMenuOpen"?: boolean; /** * The minimum number of characters required to render the menu. */ "minChars"?: number; /** * Whether the input allows multiple items to be selected. */ "multiSelect"?: boolean; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * The content to display when no results are found. */ "noResults"?: IAutocompleteNoResults; /** * Event emitted when a selected item chip is removed. */ "onChipRemove"?: (event: ModusWcAutocompleteCustomEvent) => void; /** * Event emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcAutocompleteCustomEvent) => void; /** * Event emitted when the input value changes. This event is debounced based on the debounceMs prop. */ "onInputChange"?: (event: ModusWcAutocompleteCustomEvent) => void; /** * Event emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcAutocompleteCustomEvent) => void; /** * Event emitted when a menu item is selected. */ "onItemSelect"?: (event: ModusWcAutocompleteCustomEvent) => void; /** * Text that appears in the form control when it has no value set. */ "placeholder"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * Whether to show the menu whenever the input has focus, regardless of input value. */ "showMenuOnFocus"?: boolean; /** * A spinner that appears when set to true */ "showSpinner"?: boolean; /** * The size of the autocomplete (input and menu). */ "size"?: ModusSize; /** * The value of the control. */ "value"?: string; } /** * A customizable avatar component used to create avatars with different images. */ interface ModusWcAvatar { /** * The image alt attribute for accessibility. */ "alt": string; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The location of the image. */ "imgSrc"?: string; /** * The shape of the avatar. */ "shape"?: 'circle' | 'square'; /** * The size of the avatar. */ "size"?: DaisySize; } /** * A customizable badge component used to create badges with different sizes, types, and colors. * The component supports a `` for injecting content within the badge. */ interface ModusWcBadge { /** * The color variant of the badge. */ "color"?: | 'primary' | 'secondary' | 'tertiary' | 'high-contrast' | 'success' | 'warning' | 'danger'; /** * Custom CSS class to apply to the span element. */ "customClass"?: string; /** * The size of the badge. */ "size"?: ModusSize; /** * The variant of the badge. */ "variant"?: 'counter' | 'filled' | 'text'; } /** * A customizable breadcrumbs component used to help users navigate through a website. */ interface ModusWcBreadcrumbs { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The breadcrumbs to render. */ "items"?: IBreadcrumb[]; /** * Event emitted when a breadcrumb is clicked. */ "onBreadcrumbClick"?: (event: ModusWcBreadcrumbsCustomEvent) => void; /** * The size of the breadcrumbs. */ "size"?: ModusSize; } /** * A customizable button component used to create buttons with different sizes, variants, and types. * The component supports a `` for injecting content within the button, similar to a native HTML button */ interface ModusWcButton { /** * The color variant of the button. */ "color"?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; /** * Custom CSS class to apply to the button element. */ "customClass"?: string; /** * If true, the button will be disabled. */ "disabled"?: boolean; /** * If true, the button will take the full width of its container. */ "fullWidth"?: boolean; /** * Event emitted when the button is clicked or activated via keyboard. */ "onButtonClick"?: (event: ModusWcButtonCustomEvent) => void; /** * If true, the button will be in a pressed state (for toggle buttons). */ "pressed"?: boolean; /** * The shape of the button. */ "shape"?: 'circle' | 'rectangle' | 'square'; /** * The size of the button. */ "size"?: DaisySize; /** * The type of the button. */ "type"?: 'button' | 'submit' | 'reset'; /** * The variant of the button. */ "variant"?: 'borderless' | 'filled' | 'outlined'; } /** * A customizable card component used to group and display content in a way that is easily readable */ interface ModusWcCard { /** * Makes any \
in the 'header' slot cover the background */ "backgroundFigure"?: boolean; /** * Adds a hard border to the card */ "bordered"?: boolean; /** * Custom CSS class to apply */ "customClass"?: string; /** * Determines how the card is laid out */ "layout"?: 'vertical' | 'horizontal'; /** * Determines if the interior padding is compact or not */ "padding"?: 'normal' | 'compact'; } /** * A customizable checkbox component */ interface ModusWcCheckbox { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the checkbox. */ "disabled"?: boolean; /** * The indeterminate state of the checkbox. */ "indeterminate"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcCheckboxCustomEvent) => void; /** * Emitted when the input value changes. */ "onInputChange"?: (event: ModusWcCheckboxCustomEvent) => void; /** * Emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcCheckboxCustomEvent) => void; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the checkbox. */ "value"?: boolean; } /** * A customizable chip component used to display information in a compact area */ interface ModusWcChip { /** * Active state of chip. */ "active"?: boolean; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Whether the chip is disabled. */ "disabled"?: boolean; /** * Whether the chip has an error. */ "hasError"?: boolean; /** * The label to display in the chip. */ "label"?: string; /** * Event emitted when the chip is clicked or activated via keyboard. */ "onChipClick"?: (event: ModusWcChipCustomEvent) => void; /** * Event emitted when the close chip icon button is clicked. */ "onChipRemove"?: (event: ModusWcChipCustomEvent) => void; /** * Whether to show the close icon on right side of the chip. */ "showRemove"?: boolean; /** * The size of the chip. */ "size"?: ModusSize; /** * The variant of the chip. */ "variant"?: 'filled' | 'outline'; } /** * A customizable collapse component used for showing and hiding content. * The component supports a 'header' and 'content' `` for injecting custom HTML. * Do not set */ interface ModusWcCollapse { /** * Indicates that the component should have a border. */ "bordered"?: boolean; /** * A unique identifier used to set the id attributes of various elements. */ "collapseId"?: string; /** * Custom CSS class to apply to the outer div. */ "customClass"?: string; /** * Controls whether the collapse is expanded or not. */ "expanded"?: boolean; /** * Event emitted when the expanded prop is internally changed. */ "onExpandedChange"?: (event: ModusWcCollapseCustomEvent<{ expanded: boolean }>) => void; /** * Configuration options for rendering the pre-laid out collapse component. Do not set this prop if you intend to use the 'header' slot. */ "options"?: ICollapseOptions; } /** * A customizable date picker component used to create date inputs. * Adheres to WCAG 2.2 standards. */ interface ModusWcDate { /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Maximum date value. */ "max"?: string; /** * Minimum date value. */ "min"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Event emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcDateCustomEvent) => void; /** * Event emitted when the input value changes. */ "onInputChange"?: (event: ModusWcDateCustomEvent) => void; /** * Event emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcDateCustomEvent) => void; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required or must be checked for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the control (yyyy-mm-dd). */ "value"?: string; } /** * A customizable divider component used to separate content horizontally or vertically */ interface ModusWcDivider { /** * The color of the divider line. */ "color"?: | 'primary' | 'secondary' | 'tertiary' | 'high-contrast' | 'success' | 'warning' | 'danger'; /** * The content to display in the divider. */ "content"?: string; /** * Custom CSS class to apply to the divider element. */ "customClass"?: string; /** * The orientation of the divider. This is in reference to how content will be rendered around the divider. */ "orientation"?: Orientation; /** * The position of the divider. */ "position"?: 'center' | 'end' | 'start'; /** * Whether the divider is responsive or not. */ "responsive"?: boolean; } /** * A customizable dropdown menu component used to render a button and toggleable menu. * The component supports a 'button' and 'menu' `` for injecting custom HTML content. */ interface ModusWcDropdownMenu { /** * The color variant of the button. */ "buttonColor"?: | 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; /** * The size of the button. */ "buttonSize"?: DaisySize; /** * The variant of the button. */ "buttonVariant"?: 'borderless' | 'filled' | 'outlined'; /** * Custom CSS class to apply to the host element. */ "customClass"?: string; /** * If true, the button will be disabled. */ "disabled"?: boolean; /** * Indicates that the menu should have a border. */ "menuBordered"?: boolean; /** * Distance between the button and menu in pixels. */ "menuOffset"?: number; /** * The placement of the menu relative to the button. */ "menuPlacement"?: PopoverPlacement; /** * The size of the menu. */ "menuSize"?: ModusSize; /** * Indicates that the menu is visible. */ "menuVisible"?: boolean; /** * Event emitted when the menuVisible prop changes. */ "onMenuVisibilityChange"?: (event: ModusWcDropdownMenuCustomEvent<{ isVisible: boolean }>) => void; } /** * A customizable icon component used to render Modus icons. * This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ interface ModusWcIcon { /** * Custom CSS class to apply to the i element. */ "customClass"?: string; /** * Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers. */ "decorative"?: boolean; /** * The icon name, should match the CSS class in the icon font. */ "name": string; /** * The icon size, can be "sm", "md", "lg" (a custom size can be specified in CSS). This adjusts the font size for the icon. */ "size"?: DaisySize; } /** * A customizable feedback component used to provide additional context related to form input interactions. * To use a custom icon, this component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ interface ModusWcInputFeedback { /** * Custom CSS class to apply to the outer div element. */ "customClass"?: string; /** * The Modus icon to use instead of the pre-defined icons. */ "icon"?: string; /** * The level informs which icon and color that will be rendered. */ "level": IInputFeedbackLevel; /** * The message. */ "message"?: string; /** * The size of the feedback component. */ "size"?: ModusSize; } /** * A customizable input label component. * The component supports a `` for injecting additional custom content inside the label, such as icons or formatted text */ interface ModusWcInputLabel { /** * Additional classes for custom styling. */ "customClass"?: string; /** * The `for` attribute of the label, matching the `id` of the associated input. */ "forId"?: string; /** * The text to display within the label. */ "labelText"?: string; /** * Whether the label indicates a required field. */ "required"?: boolean; /** * The size of the label. */ "size"?: ModusSize; /** * The text rendered beneath the label. */ "subLabelText"?: string; } /** * A customizable loader component used to indicate the loading of content */ interface ModusWcLoader { /** * The color of the loader. */ "color"?: LoaderColor; /** * Custom CSS class to apply to the loader element. */ "customClass"?: string; /** * The size of the loader. */ "size"?: DaisySize; /** * The variant of the loader. */ "variant"?: LoaderVariant; } /** * A customizable menu component used to display a list of li elements vertically or horizontally. * The component supports a `` for injecting custom li elements inside the ul */ interface ModusWcMenu { /** * Indicates that the menu should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the ul element. */ "customClass"?: string; /** * Event emitted when the menu loses focus. */ "onMenuFocusout"?: (event: ModusWcMenuCustomEvent) => void; /** * The orientation of the menu. */ "orientation"?: Orientation; /** * The size of the menu. */ "size"?: ModusSize; } /** * A customizable menu item component used to display the item portion of a menu */ interface ModusWcMenuItem { "bordered"?: boolean; /** * Custom CSS class to apply to the li element. */ "customClass"?: string; /** * The disabled state of the menu item. */ "disabled"?: boolean; /** * The focused state of the menu item. */ "focused"?: boolean; /** * The text rendered in the menu item. */ "label"?: string; /** * Event emitted when a menu item is selected. */ "onItemSelect"?: (event: ModusWcMenuItemCustomEvent<{ value: string }>) => void; /** * The selected state of the menu item. */ "selected"?: boolean; /** * The size of the menu item. */ "size"?: ModusSize; /** * The modus icon name to render on the start of the menu item. */ "startIcon"?: string; /** * The text rendered beneath the label. */ "subLabel"?: string; /** * The unique identifying value of the menu item. */ "value"?: string; } /** * A customizable modal component used to display content in a dialog. * The component supports a 'header', 'content', and 'footer' for injecting custom HTML */ interface ModusWcModal { /** * The modal's backdrop. Specify 'static' for a backdrop that doesn't close the modal when clicked outside the modal content. */ "backdrop"?: 'default' | 'static'; /** * Custom CSS class to apply */ "customClass"?: string; /** * Specifies whether the modal should be displayed full-screen */ "fullscreen"?: boolean; /** * The ID of the inner dialog element */ "modalId": string; /** * Specifies the position of the modal */ "position"?: 'bottom' | 'center' | 'top'; /** * Specifies whether to show the close icon button at the top right of modal */ "showClose"?: boolean; /** * Specifies whether to show the fullscreen toggle icon button */ "showFullscreenToggle"?: boolean; } /** * A customizable navbar component used for top level navigation of all Trimble applications. * The component supports a 'main-menu', 'notifications', and 'apps' `` for injecting custom HTML menus. * It also supports a 'start', 'center', and 'end' `` for injecting additional custom HTML */ interface ModusWcNavbar { /** * The open state of the apps menu. */ "appsMenuOpen"?: boolean; /** * Applies condensed layout and styling. */ "condensed"?: boolean; /** * The open state of the condensed menu. */ "condensedMenuOpen"?: boolean; /** * Custom CSS class to apply to the host element. */ "customClass"?: string; /** * The open state of the main menu. */ "mainMenuOpen"?: boolean; /** * The open state of the notifications menu. */ "notificationsMenuOpen"?: boolean; /** * Event emitted when the AI button is clicked or activated via keyboard. */ "onAiClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the apps button is clicked or activated via keyboard. */ "onAppsClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the apps menu open state changes. */ "onAppsMenuOpenChange"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the condensed menu open state changes. */ "onCondensedMenuOpenChange"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the help button is clicked or activated via keyboard. */ "onHelpClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the main menu open state changes. */ "onMainMenuOpenChange"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the user profile Access MyTrimble button is clicked or activated via keyboard. */ "onMyTrimbleClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the notifications button is clicked or activated via keyboard. */ "onNotificationsClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the notifications menu open state changes. */ "onNotificationsMenuOpenChange"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the search input value is changed. */ "onSearchChange"?: (event: ModusWcNavbarCustomEvent<{ value: string }>) => void; /** * Event emitted when the search button is clicked or activated via keyboard. */ "onSearchClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the search input open state changes. */ "onSearchInputOpenChange"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the user profile sign out button is clicked or activated via keyboard. */ "onSignOutClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the Trimble logo is clicked or activated via keyboard. */ "onTrimbleLogoClick"?: (event: ModusWcNavbarCustomEvent) => void; /** * Event emitted when the user menu open state changes. */ "onUserMenuOpenChange"?: (event: ModusWcNavbarCustomEvent) => void; /** * Debounce time in milliseconds for search input changes. Default is 300ms. */ "searchDebounceMs"?: number; /** * The open state of the search input. */ "searchInputOpen"?: boolean; /** * Text replacements for the navbar. */ "textOverrides"?: INavbarTextOverrides; /** * User information used to render the user card. */ "userCard": INavbarUserCard; /** * The open state of the user menu. */ "userMenuOpen"?: boolean; /** * The visibility of individual navbar buttons. Default is user profile visible, others hidden. */ "visibility"?: INavbarVisibility; } /** * A customizable input component used to create number inputs with types */ interface ModusWcNumberInput { /** * Hint for form autofill feature. */ "autoComplete"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * The currency symbol to display. */ "currencySymbol"?: string; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */ "inputMode"?: 'decimal' | 'none' | 'numeric'; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * The input's maximum value. */ "max"?: number; /** * The input's minimum value. */ "min"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Event emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcNumberInputCustomEvent) => void; /** * Event emitted when the input value changes. */ "onInputChange"?: (event: ModusWcNumberInputCustomEvent) => void; /** * Event emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcNumberInputCustomEvent) => void; /** * Text that appears in the form control when it has no value set. */ "placeholder"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The granularity that the value adheres to. */ "step"?: number; /** * Type of form control. */ "type"?: 'number' | 'range'; /** * The value of the control. */ "value"?: string; } /** * Pagination component to navigate through pages of content */ interface ModusWcPagination { /** * Aria label values for pagination buttons */ "ariaLabelValues"?: IAriaLabelValues; /** * Total number of pages */ "count"?: number; /** * Custom CSS class to apply */ "customClass"?: string; /** * The next page button text. If not set, an icon control will be used. */ "nextButtonText"?: string; /** * Event emitted when page changes */ "onPageChange"?: (event: ModusWcPaginationCustomEvent) => void; /** * The current page number */ "page"?: number; /** * The previous page button text. If not set, an icon control will be used. */ "prevButtonText"?: string; /** * Size of the pagination buttons */ "size"?: ModusSize; } /** * A customizable progress component used to show the progress of a task or show the passing of time. * The radial variant supports slotting in custom HTML to be displayed within the progress circle */ interface ModusWcProgress { /** * Custom CSS class to apply to the progress element. */ "customClass"?: string; /** * The indeterminate state of the progress component. */ "indeterminate"?: boolean; /** * A text label to render within the progress bar */ "label"?: string; /** * The progress component's maximum value. */ "max"?: number; /** * The value of the progress component. */ "value"?: number; /** * The variant of the progress component. */ "variant"?: 'default' | 'radial'; } /** * A customizable radio component */ interface ModusWcRadio { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the radio. */ "disabled"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcRadioCustomEvent) => void; /** * Emitted when the input value changes. */ "onInputChange"?: (event: ModusWcRadioCustomEvent) => void; /** * Emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcRadioCustomEvent) => void; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the radio. */ "value"?: boolean; } /** * A rating component that allows users to choose a rating from predefined options */ interface ModusWcRating { /** * Whether to allow half-ratings. Only applies to star and heart variants. */ "allowHalf"?: boolean; /** * The number of rating items to display */ "count"?: number; /** * Custom CSS class to apply */ "customClass"?: string; /** * Whether the rating component is disabled */ "disabled"?: boolean; /** * Function to provide aria-label text for a given rating-item index */ "getAriaLabelText"?: (ratingValue: number) => string; /** * Event emitted when the rating changes */ "onRatingChange"?: (event: ModusWcRatingCustomEvent) => void; /** * The size of the rating component */ "size"?: ModusSize; /** * The current value of the rating */ "value"?: number; /** * The variant of the rating scale */ "variant"?: ModusWcRatingVariant; } /** * A customizable select component used to pick a value from a list of options */ interface ModusWcSelect { /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Event emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcSelectCustomEvent) => void; /** * Event emitted when the input value changes. */ "onInputChange"?: (event: ModusWcSelectCustomEvent) => void; /** * Event emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcSelectCustomEvent) => void; /** * The options to display in the select dropdown. */ "options"?: ISelectOption[]; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the control. */ "value"?: string; } /** * A customizable side navigation component for organizing primary navigation and content areas in an application. */ interface ModusWcSideNavigation { /** * Whether the side navigation should collapse when clicking outside of it. */ "collapseOnClickOutside"?: boolean; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Whether the side navigation is expanded. */ "expanded"?: boolean; /** * Maximum width of the side navigation panel in an expanded state. */ "maxWidth"?: string; } /** * A customizable skeleton component used to create skeletons of various sizes and shapes */ interface ModusWcSkeleton { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The height of the skeleton. */ "height"?: string; /** * The shape of the skeleton. */ "shape"?: 'circle' | 'rectangle'; /** * The width of the skeleton. */ "width"?: string; } /** * A customizable slider component */ interface ModusWcSlider { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the slider. */ "disabled"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * The maximum slider value. */ "max"?: number; /** * The minimum slider value. */ "min"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcSliderCustomEvent) => void; /** * Emitted when the input value changes. */ "onInputChange"?: (event: ModusWcSliderCustomEvent) => void; /** * Emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcSliderCustomEvent) => void; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The increment of the slider. */ "step"?: number; /** * The value of the slider. */ "value"?: number; } /** * Used to show a list of steps in a process. */ interface ModusWcStepper { /** * Custom CSS class to apply to the steps element. */ "customClass"?: string; /** * The orientation of the steps. */ "orientation"?: Orientation; /** * The steps to display. */ "steps"?: IStepperItem[]; } /** * A customizable checkbox component */ interface ModusWcSwitch { /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * The disabled state of the switch. */ "disabled"?: boolean; /** * The indeterminate state of the switch. */ "indeterminate"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcSwitchCustomEvent) => void; /** * Emitted when the input value changes. */ "onInputChange"?: (event: ModusWcSwitchCustomEvent) => void; /** * Emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcSwitchCustomEvent) => void; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the switch. */ "value"?: boolean; } interface ModusWcTable { /** * An array of column definitions. */ "columns": ITableColumn[]; /** * The current page number in pagination (1-based index). */ "currentPage"?: number; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * An array of data objects. */ "data": Record[]; /** * The density of the table, used to save space or increase readability. */ "density"?: Density; /** * Enable cell editing. Either a boolean (all rows) or a predicate per row. */ "editable"?: boolean | ((row: Record) => boolean); /** * Enable hover effect on table rows. */ "hover"?: boolean; /** * Emits when cell editing is committed with the new value. */ "onCellEditCommit"?: (event: ModusWcTableCustomEvent<{ rowIndex: number; colId: string; newValue: unknown; updatedRow: Record; }>) => void; /** * Emits when cell editing starts. */ "onCellEditStart"?: (event: ModusWcTableCustomEvent<{ rowIndex: number; colId: string; }>) => void; /** * Emits when pagination changes with the new pagination state. */ "onPaginationChange"?: (event: ModusWcTableCustomEvent) => void; /** * Emits when a row is clicked. */ "onRowClick"?: (event: ModusWcTableCustomEvent<{ row: Record; index: number; }>) => void; /** * Emits when row selection changes with the selected rows and their IDs. */ "onRowSelectionChange"?: (event: ModusWcTableCustomEvent<{ selectedRows: Record[]; selectedRowIds: string[]; }>) => void; /** * Emits when sorting changes with the new sorting state. */ "onSortChange"?: (event: ModusWcTableCustomEvent) => void; /** * Available options for the number of rows per page. */ "pageSizeOptions"?: number[]; /** * Enable pagination for the table. */ "paginated"?: boolean; /** * Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows. */ "selectable"?: 'none' | 'single' | 'multi'; /** * Array of selected row IDs. Used for controlled selection state. */ "selectedRowIds"?: string[]; /** * Show/hide the page size selector in pagination. */ "showPageSizeSelector"?: boolean; /** * Enable sorting functionality for sortable columns. */ "sortable"?: boolean; /** * Zebra striped tables differentiate rows by styling them in an alternating fashion. */ "zebra"?: boolean; } /** * A customizable tabs component used to create groups of tabs. */ interface ModusWcTabs { /** * The current active tab */ "activeTabIndex"?: number; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * When a tab is switched to, this event outputs the relevant indices */ "onTabChange"?: (event: ModusWcTabsCustomEvent<{ previousTab: number; newTab: number; }>) => void; /** * The size of the tabs. */ "size"?: ModusSize; /** * Additional styling for the tabs. */ "tabStyle"?: 'boxed' | 'bordered' | 'lifted' | 'none'; /** * The tabs to display. */ "tabs"?: ITab[]; } /** * A customizable input component used to create text inputs with types. */ interface ModusWcTextInput { /** * Controls automatic capitalization in inputted text. */ "autoCapitalize"?: | 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'; /** * Hint for form autofill feature. */ "autoComplete"?: AutocompleteTypes; /** * Controls automatic correction in inputted text. Support by browser varies. */ "autoCorrect"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Aria label for the clear icon button. */ "clearAriaLabel"?: string; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * A hint to the browser for which enter key to display. */ "enterkeyhint"?: | 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * Show the clear button within the input field. */ "includeClear"?: boolean; /** * Show the search icon within the input field. */ "includeSearch"?: boolean; /** * The ID of the input element. */ "inputId"?: string; /** * Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */ "inputMode"?: | 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Maximum length (number of characters) of value. */ "maxLength"?: number; /** * Minimum length (number of characters) of value. */ "minLength"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Event emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcTextInputCustomEvent) => void; /** * Event emitted when the input value changes. */ "onInputChange"?: (event: ModusWcTextInputCustomEvent) => void; /** * Event emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcTextInputCustomEvent) => void; /** * Pattern the value must match to be valid */ "pattern"?: string; /** * Text that appears in the form control when it has no value set. */ "placeholder"?: string; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * Type of form control. */ "type"?: TextFieldTypes; /** * The value of the control. */ "value"?: string; } /** * A customizable textarea component. */ interface ModusWcTextarea { /** * Controls automatic correction in inputted text. Support by browser varies. */ "autoCorrect"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the textarea (supports DaisyUI). */ "customClass"?: string; /** * The disabled state of the textarea. */ "disabled"?: boolean; /** * A hint to the browser for which enter key to display. */ "enterkeyhint"?: | 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * The tabindex of the input. */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * The maximum number of characters allowed in the textarea. */ "maxLength"?: number; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcTextareaCustomEvent) => void; /** * Emitted when the input value changes. */ "onInputChange"?: (event: ModusWcTextareaCustomEvent) => void; /** * Emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcTextareaCustomEvent) => void; /** * The placeholder text for the textarea. */ "placeholder"?: string; /** * The readonly state of the textarea. */ "readonly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * The number of visible text lines for the textarea. */ "rows"?: number; /** * The size of the input. */ "size"?: ModusSize; /** * The value of the textarea. */ "value"?: string; } interface ModusWcThemeProvider { "initialTheme"?: Partial; } /** * A theme switcher component used to toggle the application theme and/or mode. * Allows consumers to set the initial theme (Modus Classic, Modus Modern, etc.) and end-users to toggle modes (Light, Dark). */ interface ModusWcThemeSwitcher { /** * Custom CSS class to apply to the theme switcher element. */ "customClass"?: string; /** * An event that fires when the theme is changed. */ "onThemeChange"?: (event: ModusWcThemeSwitcherCustomEvent) => void; } /** * A customizable input component used to create time inputs. */ interface ModusWcTimeInput { /** * Hint for form autofill feature. */ "autoComplete"?: 'on' | 'off'; /** * Indicates that the input should have a border. */ "bordered"?: boolean; /** * Custom CSS class to apply to the input. */ "customClass"?: string; /** * ID of a `` element that contains pre-defined time options. The value must be the ID of a `` element in the same document. */ "datalistId"?: string; /** * The options to display in the time input dropdown. Options must be in `HH:mm` or `HH:mm:ss` format. */ "datalistOptions"?: string[]; /** * Whether the form control is disabled. */ "disabled"?: boolean; /** * Feedback to render below the input. */ "feedback"?: IInputFeedbackProp; /** * The ID of the input element. */ "inputId"?: string; /** * Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */ "inputTabIndex"?: number; /** * The text to display within the label. */ "label"?: string; /** * Maximum value. Format: `HH:mm`, `HH:mm:ss`. */ "max"?: string; /** * Minimum value. Format: `HH:mm`, `HH:mm:ss.` */ "min"?: string; /** * Name of the form control. Submitted with the form as part of a name/value pair. */ "name"?: string; /** * Event emitted when the input loses focus. */ "onInputBlur"?: (event: ModusWcTimeInputCustomEvent) => void; /** * Event emitted when the input value changes. */ "onInputChange"?: (event: ModusWcTimeInputCustomEvent) => void; /** * Event emitted when the input gains focus. */ "onInputFocus"?: (event: ModusWcTimeInputCustomEvent) => void; /** * Whether the value is editable. */ "readOnly"?: boolean; /** * A value is required for the form to be submittable. */ "required"?: boolean; /** * Displays the time input format as `HH:mm:ss` if `true`. Internally sets the `step` to 1 second. If a `step` value is provided, it will override this attribute. */ "showSeconds"?: boolean; /** * The size of the input. */ "size"?: ModusSize; /** * Specifies the granularity that the `value` must adhere to. Value of step given in seconds. Default value is 60 seconds. Overrides the `seconds` attribute if both are provided. */ "step"?: number; /** * The value of the time input. Always in 24-hour format that includes leading zeros: `HH:mm` or `HH:mm:ss`, regardless of input format which is likely to be selected based on user's locale (or by the user agent). If time includes seconds the format is always `HH:mm:ss`. */ "value"?: string; } /** * A customizable toast component used to stack elements, positioned on the corner of a page. * The component supports a `` for injecting additional custom content inside the toast. */ interface ModusWcToast { /** * Additional classes for custom styling. */ "customClass"?: string; /** * Time taken to dismiss the toast in milliseconds */ "delay"?: number; /** * The position of the toast in the parent container. */ "position"?: ToastPosition; } /** * A customizable toolbar component used to organize content across the entire page. */ interface ModusWcToolbar { /** * Custom CSS class to apply to the outer div. */ "customClass"?: string; } /** * A customizable tooltip component used to create tooltips with different content. */ interface ModusWcTooltip { /** * The text content of the tooltip. */ "content"?: string; /** * Custom CSS class to apply to the inner div. */ "customClass"?: string; /** * Disables displaying the tooltip on hover */ "disabled"?: boolean; /** * Use this attribute to force the tooltip to remain open. */ "forceOpen"?: boolean; /** * The position that the tooltip will render in relation to the element. */ "position"?: 'auto' | 'top' | 'right' | 'bottom' | 'left'; /** * The ID of the tooltip element, useful for setting the "aria-describedby" attribute of related elements. */ "tooltipId"?: string; } /** * A customizable typography component used to render text with different sizes, variants, and weights. */ interface ModusWcTypography { /** * Custom CSS class to apply to the typography element. */ "customClass"?: string; /** * The size of the font. */ "size"?: DaisySize; /** * The variant of the typography component. */ "variant"?: TypographyVariant; /** * The weight of the text. */ "weight"?: TypographyWeight; } interface IntrinsicElements { "modus-wc-accordion": ModusWcAccordion; "modus-wc-alert": ModusWcAlert; "modus-wc-autocomplete": ModusWcAutocomplete; "modus-wc-avatar": ModusWcAvatar; "modus-wc-badge": ModusWcBadge; "modus-wc-breadcrumbs": ModusWcBreadcrumbs; "modus-wc-button": ModusWcButton; "modus-wc-card": ModusWcCard; "modus-wc-checkbox": ModusWcCheckbox; "modus-wc-chip": ModusWcChip; "modus-wc-collapse": ModusWcCollapse; "modus-wc-date": ModusWcDate; "modus-wc-divider": ModusWcDivider; "modus-wc-dropdown-menu": ModusWcDropdownMenu; "modus-wc-icon": ModusWcIcon; "modus-wc-input-feedback": ModusWcInputFeedback; "modus-wc-input-label": ModusWcInputLabel; "modus-wc-loader": ModusWcLoader; "modus-wc-menu": ModusWcMenu; "modus-wc-menu-item": ModusWcMenuItem; "modus-wc-modal": ModusWcModal; "modus-wc-navbar": ModusWcNavbar; "modus-wc-number-input": ModusWcNumberInput; "modus-wc-pagination": ModusWcPagination; "modus-wc-progress": ModusWcProgress; "modus-wc-radio": ModusWcRadio; "modus-wc-rating": ModusWcRating; "modus-wc-select": ModusWcSelect; "modus-wc-side-navigation": ModusWcSideNavigation; "modus-wc-skeleton": ModusWcSkeleton; "modus-wc-slider": ModusWcSlider; "modus-wc-stepper": ModusWcStepper; "modus-wc-switch": ModusWcSwitch; "modus-wc-table": ModusWcTable; "modus-wc-tabs": ModusWcTabs; "modus-wc-text-input": ModusWcTextInput; "modus-wc-textarea": ModusWcTextarea; "modus-wc-theme-provider": ModusWcThemeProvider; "modus-wc-theme-switcher": ModusWcThemeSwitcher; "modus-wc-time-input": ModusWcTimeInput; "modus-wc-toast": ModusWcToast; "modus-wc-toolbar": ModusWcToolbar; "modus-wc-tooltip": ModusWcTooltip; "modus-wc-typography": ModusWcTypography; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * A customizable accordion component used for showing and hiding related groups of content. * The component supports a `` for injecting `` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info. */ "modus-wc-accordion": LocalJSX.ModusWcAccordion & JSXBase.HTMLAttributes; /** * A customizable alert component used to inform the user about important events */ "modus-wc-alert": LocalJSX.ModusWcAlert & JSXBase.HTMLAttributes; /** * A customizable autocomplete component used to create searchable text inputs. */ "modus-wc-autocomplete": LocalJSX.ModusWcAutocomplete & JSXBase.HTMLAttributes; /** * A customizable avatar component used to create avatars with different images. */ "modus-wc-avatar": LocalJSX.ModusWcAvatar & JSXBase.HTMLAttributes; /** * A customizable badge component used to create badges with different sizes, types, and colors. * The component supports a `` for injecting content within the badge. */ "modus-wc-badge": LocalJSX.ModusWcBadge & JSXBase.HTMLAttributes; /** * A customizable breadcrumbs component used to help users navigate through a website. */ "modus-wc-breadcrumbs": LocalJSX.ModusWcBreadcrumbs & JSXBase.HTMLAttributes; /** * A customizable button component used to create buttons with different sizes, variants, and types. * The component supports a `` for injecting content within the button, similar to a native HTML button */ "modus-wc-button": LocalJSX.ModusWcButton & JSXBase.HTMLAttributes; /** * A customizable card component used to group and display content in a way that is easily readable */ "modus-wc-card": LocalJSX.ModusWcCard & JSXBase.HTMLAttributes; /** * A customizable checkbox component */ "modus-wc-checkbox": LocalJSX.ModusWcCheckbox & JSXBase.HTMLAttributes; /** * A customizable chip component used to display information in a compact area */ "modus-wc-chip": LocalJSX.ModusWcChip & JSXBase.HTMLAttributes; /** * A customizable collapse component used for showing and hiding content. * The component supports a 'header' and 'content' `` for injecting custom HTML. * Do not set */ "modus-wc-collapse": LocalJSX.ModusWcCollapse & JSXBase.HTMLAttributes; /** * A customizable date picker component used to create date inputs. * Adheres to WCAG 2.2 standards. */ "modus-wc-date": LocalJSX.ModusWcDate & JSXBase.HTMLAttributes; /** * A customizable divider component used to separate content horizontally or vertically */ "modus-wc-divider": LocalJSX.ModusWcDivider & JSXBase.HTMLAttributes; /** * A customizable dropdown menu component used to render a button and toggleable menu. * The component supports a 'button' and 'menu' `` for injecting custom HTML content. */ "modus-wc-dropdown-menu": LocalJSX.ModusWcDropdownMenu & JSXBase.HTMLAttributes; /** * A customizable icon component used to render Modus icons. * This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ "modus-wc-icon": LocalJSX.ModusWcIcon & JSXBase.HTMLAttributes; /** * A customizable feedback component used to provide additional context related to form input interactions. * To use a custom icon, this component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps. */ "modus-wc-input-feedback": LocalJSX.ModusWcInputFeedback & JSXBase.HTMLAttributes; /** * A customizable input label component. * The component supports a `` for injecting additional custom content inside the label, such as icons or formatted text */ "modus-wc-input-label": LocalJSX.ModusWcInputLabel & JSXBase.HTMLAttributes; /** * A customizable loader component used to indicate the loading of content */ "modus-wc-loader": LocalJSX.ModusWcLoader & JSXBase.HTMLAttributes; /** * A customizable menu component used to display a list of li elements vertically or horizontally. * The component supports a `` for injecting custom li elements inside the ul */ "modus-wc-menu": LocalJSX.ModusWcMenu & JSXBase.HTMLAttributes; /** * A customizable menu item component used to display the item portion of a menu */ "modus-wc-menu-item": LocalJSX.ModusWcMenuItem & JSXBase.HTMLAttributes; /** * A customizable modal component used to display content in a dialog. * The component supports a 'header', 'content', and 'footer' for injecting custom HTML */ "modus-wc-modal": LocalJSX.ModusWcModal & JSXBase.HTMLAttributes; /** * A customizable navbar component used for top level navigation of all Trimble applications. * The component supports a 'main-menu', 'notifications', and 'apps' `` for injecting custom HTML menus. * It also supports a 'start', 'center', and 'end' `` for injecting additional custom HTML */ "modus-wc-navbar": LocalJSX.ModusWcNavbar & JSXBase.HTMLAttributes; /** * A customizable input component used to create number inputs with types */ "modus-wc-number-input": LocalJSX.ModusWcNumberInput & JSXBase.HTMLAttributes; /** * Pagination component to navigate through pages of content */ "modus-wc-pagination": LocalJSX.ModusWcPagination & JSXBase.HTMLAttributes; /** * A customizable progress component used to show the progress of a task or show the passing of time. * The radial variant supports slotting in custom HTML to be displayed within the progress circle */ "modus-wc-progress": LocalJSX.ModusWcProgress & JSXBase.HTMLAttributes; /** * A customizable radio component */ "modus-wc-radio": LocalJSX.ModusWcRadio & JSXBase.HTMLAttributes; /** * A rating component that allows users to choose a rating from predefined options */ "modus-wc-rating": LocalJSX.ModusWcRating & JSXBase.HTMLAttributes; /** * A customizable select component used to pick a value from a list of options */ "modus-wc-select": LocalJSX.ModusWcSelect & JSXBase.HTMLAttributes; /** * A customizable side navigation component for organizing primary navigation and content areas in an application. */ "modus-wc-side-navigation": LocalJSX.ModusWcSideNavigation & JSXBase.HTMLAttributes; /** * A customizable skeleton component used to create skeletons of various sizes and shapes */ "modus-wc-skeleton": LocalJSX.ModusWcSkeleton & JSXBase.HTMLAttributes; /** * A customizable slider component */ "modus-wc-slider": LocalJSX.ModusWcSlider & JSXBase.HTMLAttributes; /** * Used to show a list of steps in a process. */ "modus-wc-stepper": LocalJSX.ModusWcStepper & JSXBase.HTMLAttributes; /** * A customizable checkbox component */ "modus-wc-switch": LocalJSX.ModusWcSwitch & JSXBase.HTMLAttributes; "modus-wc-table": LocalJSX.ModusWcTable & JSXBase.HTMLAttributes; /** * A customizable tabs component used to create groups of tabs. */ "modus-wc-tabs": LocalJSX.ModusWcTabs & JSXBase.HTMLAttributes; /** * A customizable input component used to create text inputs with types. */ "modus-wc-text-input": LocalJSX.ModusWcTextInput & JSXBase.HTMLAttributes; /** * A customizable textarea component. */ "modus-wc-textarea": LocalJSX.ModusWcTextarea & JSXBase.HTMLAttributes; "modus-wc-theme-provider": LocalJSX.ModusWcThemeProvider & JSXBase.HTMLAttributes; /** * A theme switcher component used to toggle the application theme and/or mode. * Allows consumers to set the initial theme (Modus Classic, Modus Modern, etc.) and end-users to toggle modes (Light, Dark). */ "modus-wc-theme-switcher": LocalJSX.ModusWcThemeSwitcher & JSXBase.HTMLAttributes; /** * A customizable input component used to create time inputs. */ "modus-wc-time-input": LocalJSX.ModusWcTimeInput & JSXBase.HTMLAttributes; /** * A customizable toast component used to stack elements, positioned on the corner of a page. * The component supports a `` for injecting additional custom content inside the toast. */ "modus-wc-toast": LocalJSX.ModusWcToast & JSXBase.HTMLAttributes; /** * A customizable toolbar component used to organize content across the entire page. */ "modus-wc-toolbar": LocalJSX.ModusWcToolbar & JSXBase.HTMLAttributes; /** * A customizable tooltip component used to create tooltips with different content. */ "modus-wc-tooltip": LocalJSX.ModusWcTooltip & JSXBase.HTMLAttributes; /** * A customizable typography component used to render text with different sizes, variants, and weights. */ "modus-wc-typography": LocalJSX.ModusWcTypography & JSXBase.HTMLAttributes; } } }