@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
1,617 lines • 227 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AutocompleteTypes, DaisySize, Density, IAutocompleteItem, IAutocompleteNoResults, IInputFeedbackProp, ModusSize, Orientation, PopoverPlacement, TextFieldTypes, WeekStartDay } 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 { LogoName } from "./components/modus-wc-logo/logo-constants";
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 { TypographyHierarchy, TypographySize, TypographyWeight } from "./components/modus-wc-typography/modus-wc-typography";
export { AutocompleteTypes, DaisySize, Density, IAutocompleteItem, IAutocompleteNoResults, IInputFeedbackProp, ModusSize, Orientation, PopoverPlacement, TextFieldTypes, WeekStartDay } 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 { LogoName } from "./components/modus-wc-logo/logo-constants";
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 { TypographyHierarchy, TypographySize, 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 `<slot>` for injecting `<modus-wc-collapse>` 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;
/**
* Time taken to dismiss the alert in milliseconds
*/
"delay"?: number;
/**
* Whether the alert has a dismiss button
*/
"dismissible"?: boolean;
/**
* The Modus icon to render.
*/
"icon"?: string;
/**
* 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;
/**
* Clear the input value and reset items
*/
"clearInput": () => Promise<void>;
/**
* Programmatically close the menu
*/
"closeMenu": () => Promise<void>;
/**
* Custom blur handler - if provided, overrides default blur behavior
*/
"customBlur"?: (event: FocusEvent) => void;
/**
* Custom CSS class to apply to host element.
*/
"customClass"?: string;
/**
* Custom input change handler - if provided, overrides default search filtering
*/
"customInputChange"?: (value: string) => void;
/**
* Custom item selection handler - if provided, overrides default selection logic
*/
"customItemSelect"?: (item: IAutocompleteItem) => void;
/**
* Custom key down handler - if provided, overrides default keyboard navigation
*/
"customKeyDown"?: (event: KeyboardEvent) => void;
/**
* The debounce timeout in milliseconds. Set to 0 to disable debouncing.
*/
"debounceMs"?: number;
/**
* Whether the form control is disabled.
*/
"disabled"?: boolean;
/**
* Programmatically set focus to input
*/
"focusInput": () => Promise<void>;
/**
* 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;
/**
* Maximum number of chips to display. When exceeded, shows expand/collapse button. Set to -1 to disable limit.
*/
"maxChips"?: number;
/**
* The minimum number of characters required to render the menu.
*/
"minChars": number;
/**
* Minimum width for the text input in pixels. When chips would make input smaller, container height increases instead.
*/
"minInputWidth"?: 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;
/**
* Programmatically open the menu
*/
"openMenu": () => Promise<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;
/**
* Programmatically select an item
*/
"selectItem": (item: IAutocompleteItem | null) => Promise<void>;
/**
* 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;
/**
* Programmatically toggle the menu open/closed
*/
"toggleMenu": () => Promise<void>;
/**
* The value of the control.
*/
"value": string;
}
/**
* A customizable avatar component used to create avatars with different images or user initials.
* When no image is provided, the component can display initials (up to 3 characters) from the initials prop.
* The component will extract the first letter of each word in the initials string.
*/
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 initials to display when no image is provided.
*/
"initials"?: 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 `<slot>` 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' | 'outlined' | '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 `<slot>` 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' | 'ellipse' | '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 buttongroup component that groups multiple Modus buttons together.
* The component supports a `<slot>` for injecting content within the buttongroup.
*/
interface ModusWcButtonGroup {
/**
* Color to apply to all buttons within the button group
*/
"color"?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
/**
* Disables all buttons within the button group
*/
"disabled"?: boolean;
/**
* Orientation of the button group: horizontal or vertical
*/
"orientation"?: Orientation;
/**
* Selection type for button group
*/
"selectionType"?: 'default' | 'single' | 'multiple';
/**
* Style variant to apply to all buttons within the button group
*/
"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 \<figure> 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 the interior padding size
*/
"padding"?: 'compact' | 'comfortable';
}
/**
* 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;
/**
* The shape of the chip: 'rectangle' (default) or 'circle'.
*/
"shape"?: 'rectangle' | 'circle';
/**
* 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' `<slot>` 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 date format for display and input.
*/
"format"?: | 'yyyy-mm-dd'
| 'dd-mm-yyyy'
| 'yyyy/mm/dd'
| 'dd/mm/yyyy'
| 'MMM DD, YYYY';
/**
* 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;
/**
* Displays ISO 8601 week numbers in the calendar.Week numbers are calculated with Monday as the first day of the week.
*/
"showWeekNumbers"?: boolean;
/**
* The size of the input.
*/
"size"?: ModusSize;
/**
* The value of the control.
*/
"value": string;
/**
* The first day of the week for the calendar display
*/
"weekStartDay"?: WeekStartDay;
}
/**
* 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' `<slot>` for injecting custom HTML content.
*/
interface ModusWcDropdownMenu {
/**
* The aria-label for the dropdown button.
*/
"buttonAriaLabel"?: string;
/**
* 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;
}
/**
* File dropzone component that allows users to drag and drop files for upload.
*/
interface ModusWcFileDropzone {
/**
* Accepted file types (e.g. '.jpg,.png' or 'image/*')
*/
"acceptFileTypes"?: string;
/**
* Custom CSS class to apply to the file dropzone element
*/
"customClass"?: string;
/**
* Disable the file input
*/
"disabled"?: boolean;
/**
* Custom instructions shown when files are dragged over the dropzone
*/
"fileDraggedOverInstructions"?: string;
/**
* Include state icon (upload, success, error)
*/
"includeStateIcon"?: boolean;
/**
* Custom instructions shown as the default dropzone message
*/
"instructions"?: string;
/**
* Custom error message displayed when an invalid file type is selected
*/
"invalidFileTypeMessage"?: string;
/**
* Maximum number of files allowed, will show error if exceeded
*/
"maxFileCount"?: number;
/**
* Maximum allowed length of filename, will show error if exceeded
*/
"maxFileNameLength"?: number;
/**
* Maximum total file size in bytes allowed, will show error if exceeded
*/
"maxTotalFileSizeBytes"?: number;
/**
* Allow multiple file selection
*/
"multiple"?: boolean;
/**
* Reset the dropzone to its initial state, clearing all error and success states
*/
"reset": () => Promise<void>;
/**
* Success message displayed when files are uploaded successfully
*/
"successMessage"?: string;
}
/**
* A customizable icon component used to render Modus icons.
* <b>This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps.</b>
*/
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;
/**
* The icon variant, can be "outlined" or "solid".
*/
"variant"?: 'outlined' | 'solid';
}
/**
* A customizable feedback component used to provide additional context related to form input interactions.
* <b>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.</b>
*/
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 `<slot>` 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 component for displaying Trimble product logos with support for both fixed and scalable sizing.
* Provides consistent branding across applications with various product logo options.
*/
interface ModusWcLogo {
/**
* The alt text for accessibility. If not provided, defaults to the logo name.
*/
"alt"?: string;
/**
* Custom CSS class to apply to the logo container.
*/
"customClass"?: string;
/**
* Show emblem version (icon only) instead of full logo
*/
"emblem"?: boolean;
/**
* The name of the logo to display. Accepts values like 'trimble', 'viewpoint_field_view', etc.
*/
"name": LogoName;
}
/**
* A customizable menu component used to display a list of li elements vertically or horizontally.
* The component supports a `<slot>` 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;
/**
* Indicates that this menu is a submenu (dropdown).
*/
"isSubMenu"?: boolean;
/**
* 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;
/**
* If true, renders a checkbox at the start of the menu item.
*/
"checkbox"?: boolean;
/**
* Public method to collapse the submenu if it's expanded
*/
"collapseSubmenu": () => Promise<void>;
/**
* 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;
/**
* Whether this menu item has a collapsible submenu. When true, the item will show a caret and handle toggle behavior.
*/
"hasSubmenu"?: 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 tooltip text to display when hovering over the menu item.
*/
"tooltipContent"?: string;
/**
* The position of the tooltip relative to the menu item.
*/
"tooltipPosition"?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
/**
* 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' <slot> 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' `<slot>` for injecting custom HTML menus.
* It also supports a 'start', 'center', and 'end' `<slot>` 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;
/**
* 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 panel component used to organize content in a structured layout.
*/
interface ModusWcPanel {
/**
* Custom CSS class to apply to the outer div.
*/
"customClass"?: string;
/**
* Enable floating mode with elevated shadow.
*/
"floating"?: boolean;
/**
* Height of the panel in pixels.
*/
"height"?: string;
/**
* Width of the panel in pixels.
*/
"width"?: string;
}
/**
* 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 button 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;
/**
* Mode to make side navigation either overlay or push the content for the selector specified in targetContent
*/
"mode": 'overlay' | 'push';
/**
* (optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the mode.
*/
"targetContent": 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 switch 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 {
/**
* Accessibility caption for the table (visually hidden but available to screen readers).
*/
"caption"?: string;
/**
* 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<string, unknown>[];
/**
* 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<string, unknown>) => 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 fo