/* 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 { AriaAttributeName } from "./utils/mutable-aria-attribute"; import { WcsAlertConfig, WcsAlertIntent } from "./components/alert/alert-interface"; import { WcsAlertDrawerPosition } from "./components/alert-drawer/alert-drawer-interface"; import { BadgeColor, BadgeShape, BadgeSize } from "./components/badge/badge-interface"; import { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface"; import { CardMode, CardOrientation } from "./components/card/card-interface"; import { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface"; import { WcsChipMode, WcsChipVariant } from "./components/chip/chip-interface"; import { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface"; import { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface"; import { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface"; import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn, WcsEditableFieldSize } from "./components/editable-field/editable-field-interface"; import { RowCssPartsFn, WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridSelectionConfig, WcsGridSelectionEventDetails, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface"; import { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface"; import { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputAutocorrect, WcsInputEnterKeyHint, WcsInputInputMode, WcsInputSize, WcsInputState } from "./components/input/input-interface"; import { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface"; import { ModalSize } from "./components/modal/modal-interface"; import { WcsNativeSelectSize } from "./components/native-select/native-select-interface"; import { CssTypes, WcsSize } from "./shared-types"; import { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface"; import { RadioChosedEvent } from "./components/radio/radio-interface"; import { SelectChangeEventDetail, SelectFilterChangeEventDetail, WcsSelectFilterFn, WcsSelectSize } from "./components/select/select-interface"; import { SelectOptionChosedEvent } from "./components/select-option/select-option-interface"; import { WcsSkeletonAnimation } from "./components/skeleton/skeleton-interface"; import { WcsSpinnerMode } from "./components/spinner/spinner-interface"; import { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface"; import { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-interface"; import { TextareaChangeEventDetail, WcsTextareaEnterKeyHint, WcsTextareaInputMode, WcsTextareaInputState, WcsTextareaResize, WcsTextareaWrap } from "./components/textarea/textarea-interface"; import { WcsTooltipAppendTo, WcsTooltipPosition } from "./components/tooltip/tooltip-interface"; export { AriaAttributeName } from "./utils/mutable-aria-attribute"; export { WcsAlertConfig, WcsAlertIntent } from "./components/alert/alert-interface"; export { WcsAlertDrawerPosition } from "./components/alert-drawer/alert-drawer-interface"; export { BadgeColor, BadgeShape, BadgeSize } from "./components/badge/badge-interface"; export { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface"; export { CardMode, CardOrientation } from "./components/card/card-interface"; export { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface"; export { WcsChipMode, WcsChipVariant } from "./components/chip/chip-interface"; export { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface"; export { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface"; export { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface"; export { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn, WcsEditableFieldSize } from "./components/editable-field/editable-field-interface"; export { RowCssPartsFn, WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridSelectionConfig, WcsGridSelectionEventDetails, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface"; export { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface"; export { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputAutocorrect, WcsInputEnterKeyHint, WcsInputInputMode, WcsInputSize, WcsInputState } from "./components/input/input-interface"; export { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface"; export { ModalSize } from "./components/modal/modal-interface"; export { WcsNativeSelectSize } from "./components/native-select/native-select-interface"; export { CssTypes, WcsSize } from "./shared-types"; export { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface"; export { RadioChosedEvent } from "./components/radio/radio-interface"; export { SelectChangeEventDetail, SelectFilterChangeEventDetail, WcsSelectFilterFn, WcsSelectSize } from "./components/select/select-interface"; export { SelectOptionChosedEvent } from "./components/select-option/select-option-interface"; export { WcsSkeletonAnimation } from "./components/skeleton/skeleton-interface"; export { WcsSpinnerMode } from "./components/spinner/spinner-interface"; export { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface"; export { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-interface"; export { TextareaChangeEventDetail, WcsTextareaEnterKeyHint, WcsTextareaInputMode, WcsTextareaInputState, WcsTextareaResize, WcsTextareaWrap } from "./components/textarea/textarea-interface"; export { WcsTooltipAppendTo, WcsTooltipPosition } from "./components/tooltip/tooltip-interface"; export namespace Components { /** * The accordion component is a vertical stack of interactive headings used to toggle the display of further information. * @cssprop --wcs-accordion-gap - Gap between accordion panels */ interface WcsAccordion { /** * @deprecated **The content is now always grouped with the panel header** ~~Specifies whether accordion-panel components should group the content with header in one card~~ ~~if true, there will be only one card with the header and the content~~ ~~Nothing change when the panel is close~~ */ "groupContentWithHeader": boolean; /** * Specifies whether accordion-panel components should display the open/close text. if false, it won't show the open/close text in all accordion-panel. */ "hideActionText": boolean; /** * Specifies whether accordion-panel components should highlight when open with primary color. if true, the background color of the accordion-panel will be the primary color. if false, the background color of the accordion-panel will be wcs-light. */ "highlight": boolean; /** * Specifies whether multiple wcs-accordion-panel can be expanded at the same time. Default to false, meaning only one panel can be expanded at a time */ "multiExpandable": boolean; } /** * The accordion-content is a subcomponent of `wcs-accordion`. It represents the text / content below an expanded accordion. * @cssprop --wcs-accordion-content-padding - Padding of the content * @cssprop --wcs-accordion-content-text-color - Text color of the content */ interface WcsAccordionContent { } /** * The accordion-header is a subcomponent of `wcs-accordion`. It represents the heading text inside the accordion panel. */ interface WcsAccordionHeader { } /** * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded. * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel */ interface WcsAccordionPanel { "close": () => Promise; /** * Specifies wether the component should group the content with header in one card if true, there will be only one card with the header and the content Nothing change when the panel is close */ "groupContentWithHeader": boolean; /** * Specifies whether the component should display the open/close text. if false, it won't show the open/close text. */ "hideActionText": boolean; /** * Specifies whether the component should highlight when open with primary color. if true, the background color will be the primary color. if false, the background color will be wcs-light. */ "highlight": boolean; "open": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The action-bar component is a group of elements appearing across the top of all pages on a business application. * @cssprop --wcs-action-bar-background-color - Background color of the action bar * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted * @cssprop --wcs-action-bar-title-font-size - Font size of the title * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title * @cssprop --wcs-action-bar-title-color - Color of the title * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter */ interface WcsActionBar { /** * Determines if the action bar should have a border at the bottom. You should not use this property if a gutter is already present on tabs */ "gutter": boolean; } /** * Alerts are used to communicate a state or an action that has been performed. * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of * the alert visibility * @cssprop --wcs-alert-background-color - Background color of the alert * @cssprop --wcs-alert-icon-background-color - Background color of the icon * @cssprop --wcs-alert-title-color - Color of the title * @cssprop --wcs-alert-subtitle-color - Color of the subtitle * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button * @cssprop --wcs-alert-title-font-weight - Font weight of the title * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle * @cssprop --wcs-alert-title-font-size - Font size of the title * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle * @cssprop --wcs-alert-border-width - Border width of the alert * @cssprop --wcs-alert-border-color - Border color of the alert * @cssprop --wcs-alert-border-radius - Border radius of the alert * @cssprop --wcs-alert-padding - Padding of the alert * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar */ interface WcsAlert { "intent": WcsAlertIntent; /** * Controls the visibility state of the alert. This property is exposed to allow control of the alert's display state and animation timing: - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended) - When set to false, it triggers the exit animation if implemented Note: While direct usage is possible for custom implementations, it's recommended to use wcs-alert-drawer for consistent alert management and animations. */ "show": boolean; "showProgressBar": boolean; /** * Time duration of the alert visibility 5000ms by default If 0, the alert will not emit `wcsAlertDismiss` event automatically */ "timeout": number; } /** * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications. * ## Usage * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts. * You need to set `position` property to define where the alert drawer will be displayed on the screen. * About alerts order: * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom` * ## Accessibility guidelines πŸ’‘ * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers * ## Configuration (on the web component) * Per default, the `wcs-alert-drawer` is configured with: * - `position: 'top-right'` * - `showProgressBar: false` * - `timeout: 5000` * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by * overriding it through the argument. * You can also set them in the `wcs-alert-drawer` component directly as attributes * ```html * * ``` * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds. * @cssprop --wcs-alert-drawer-gap - Gap between alerts * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts */ interface WcsAlertDrawer { /** * Position of the alert drawer on the screen */ "position": WcsAlertDrawerPosition; /** * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API * @example Plain javascript (example inside a script tag): ```javascript document.querySelector('wcs-alert-drawer').show({ title: 'Alert title', subtitle: 'Alert subtitle', intent: 'info', showProgressBar: true, timeout: 5000 }); * @param alert The alert to show */ "show": (alert: WcsAlertConfig) => Promise; /** * Whether to show the progress bar or not */ "showProgressBar": boolean; /** * Timeout for the alert to be dismissed automatically */ "timeout": number; } interface WcsApp { } /** * The badge component is a small label, generally appearing inside or in proximity to another larger interface component, * representing a status, property, or some other metadata. * @cssprop --wcs-badge-font-weight - Define the font weight of the badge * @cssprop --wcs-badge-height-l - Large height of the badge * @cssprop --wcs-badge-font-size-l - Large font size of the badge * @cssprop --wcs-badge-height-m - Medium height of the badge * @cssprop --wcs-badge-font-size-m - Font size of the badge * @cssprop --wcs-badge-height-s - Small height of the badge * @cssprop --wcs-badge-font-size-s - Small font size of the badge * @cssprop --wcs-badge-border-radius-default - Default border radius of the badge * @cssprop --wcs-badge-border-radius-circular - Circular border radius of the badge * @cssprop --wcs-badge-background-color - Background color of the badge * @cssprop --wcs-badge-background-color-lighter - Background color of the lighter badge * @cssprop --wcs-badge-color - Text color of the badge * @cssprop --wcs-badge-color-lighter - Text color of the lighter badge * @cssporp --wcs-badge-gap - The gap inside the badge * @cssprop --wcs-badge-padding-horizontal-l - Horizontal padding of the size L badge * @cssprop --wcs-badge-padding-horizontal-m - Horizontal padding of the size M badge * @cssprop --wcs-badge-padding-horizontal-s - Horizontal padding of the size S badge */ interface WcsBadge { /** * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class). */ "color": BadgeColor; /** * Define the shape of the badge */ "shape": BadgeShape; /** * Specify the size of the badge. */ "size": BadgeSize; } /** * A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content. * ## Accessibility guidelines πŸ’‘ * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`. * > - If the element representing the current page is not a link, `aria-current` is optional. * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. * > You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`. * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value * > in the table below too. * > - If you need to **dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render**, you can use the * > `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`. * > Note: we're working on updating the component automatically when attributes change. * > ```javascript * > const wcsButton = document.querySelector('wcs-button'); * > await wcsButton.setAriaAttribute('aria-label', 'new label'); * > ``` * @cssprop --wcs-breadcrumb-icon-color - Icon color * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items */ interface WcsBreadcrumb { /** * Set `aria-label` for the expand button when the breadcrumb is collapsed. */ "ariaLabelExpandButton"?: string; /** * The number of breadcrumb items to show after the expand button. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumb will not be collapsed. */ "itemsAfterCollapse": number; /** * The number of breadcrumb items to show before the expand button. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumb will not be collapsed. */ "itemsBeforeCollapse": number; /** * If the number of breadcrumb items exceeds this maximum, the breadcrumb will collapse and show an expand button. If this prop is `undefined`, breadcrumb items will never collapse. */ "maxItems"?: number; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The breadcrumb item represents a link inside a breadcrumb. * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active */ interface WcsBreadcrumbItem { /** * Automatically set by the parent breadcrumb. True if it is the last breadcrumb item. (You shouldn't set this prop by yourself) * @ignore */ "last": boolean; } /** * The button component is used to trigger an action. It can also be a link when specifying href. * ## Accessibility guidelines πŸ’‘ * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon πŸ‘‰ [see "Square" story below](#square) * ## Click event * The WCS button relies on the native click event to pass a user click to your app. * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true. * This means you'll receive click events on a disabled wcs button. * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called. * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks. * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear * @cssprop --wcs-button-plain-background-color-default background color of a plain button * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button * @cssprop --wcs-button-clear-background-color-default background color of a clear button * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button * @cssprop --wcs-button-border-radius-default - border radius for a default button * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button * @cssprop --wcs-button-stroked-border-width - border width of a stroked button * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button * @cssprop --wcs-button-height-s - height for a size s button * @cssprop --wcs-button-font-size-s - font-size for a size s button * @cssprop --wcs-button-padding-size-s - padding for a size s button * @cssprop --wcs-button-height-m - height for a size m button * @cssprop --wcs-button-font-size-m - font-size for a size m button * @cssprop --wcs-button-padding-size-m - padding for a size m button * @cssprop --wcs-button-height-l - height for a size l button * @cssprop --wcs-button-font-size-l - font-size for a size l button * @cssprop --wcs-button-padding-size-l - padding for a size l button * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button */ interface WcsButton { /** * Specify whether the button is disabled or not. */ "disabled": boolean; /** * Set a URL to point to.
If specified use a `a` tag instead of `btn`. */ "href"?: string; /** * Flag to display spinner until the end of action */ "loading": boolean; /** * This attribute specify the appearance of the button. */ "mode": WcsButtonMode; /** * Specify whether the button should have a ripple effect or not. */ "ripple": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Specify the shape of the button. */ "shape": WcsButtonShape; /** * Specify the size of the button. */ "size": WcsButtonSize; /** * Specifies where to open the linked document when using href (see prop above)
Default '_self' will open the linked document in the same frame as it was clicked */ "target"?: '_blank' | '_self'; /** * Specify the button type. */ "type": WcsButtonType; } /** * The card component is a container that displays content such as text, images, buttons, and lists. * A card can be a single component, but is often made up of a header, title, subtitle, and content. * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body` * to keep the card structure clear and well-designed. * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`. * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a * direct child `wcs-card-body` when you need to host structured content. * @cssprop --wcs-card-border-color - Border color of the card * @cssprop --wcs-card-border-radius - Border radius of the card * @cssprop --wcs-card-border-width - Border width of the card * @cssprop --wcs-card-background-color - Background color of the card * @cssprop --wcs-card-text-color - Text color of the card * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal */ interface WcsCard { "mode": CardMode; /** * The orientation of the card, can be horizontal or vertical */ "orientation": CardOrientation; } /** * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around. * @cssprop --wcs-card-body-padding - Padding of the card body * @cssprop --wcs-card-body-gap - Gap between each element in the card body */ interface WcsCardBody { "setOrientation": (orientation: CardOrientation) => Promise; } /** * A text content container for a card inside `wcs-card-body`. * Commonly used to provide additional details about the card content. * The information provided should be concise and easy to read. * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior. * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside * `wcs-card-content`. * By default, the margin is removed from the top and bottom of the card description. * @cssprop --wcs-card-content-color - The color of the card description. * @cssprop --wcs-card-content-font-size - The font size of the card description. */ interface WcsCardContent { } /** * The card footer component is a container that display content at the bottom of the card. * It uses a flex layout to organize actions the user can take with a card * @cssprop --wcs-card-footer-gap - Gap of the card footer */ interface WcsCardFooter { } /** * The card header component is a container that display a title and an action, it can also display a label as a `` component. * The default slotted element is displayed as a `

` element * @cssprop --wcs-card-header-title-color - Color of the title * @cssprop --wcs-card-header-title-font-size - Font size of the title * @cssprop --wcs-card-header-title-font-weight - Font weight of the title * @cssprop --wcs-card-header-gap - Gap between the title and the badge */ interface WcsCardHeader { } /** * The card media component is a container that display an image/icon inside a card. * On horizontal orientation, the image/icon has an aspect ratio of 1/1 * On vertical orientation, the image/icon has an aspect ratio of 16/9. * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal */ interface WcsCardMedia { "setOrientation": (orientation: CardOrientation) => Promise; } /** * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it. * @cssprop --wcs-checkbox-border-color-default - Default color of the border * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox * @cssprop --wcs-checkbox-size - Size of the checkbox * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected * @cssprop --wcs-checkbox-text-font-size - Font size of the text * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label * @cssprop --wcs-checkmark-color - Color of the checkmark * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark) * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark) * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar * @cssprop --wcs-checkbox-transition-duration - Duration of the transition */ interface WcsCheckbox { /** * If `true`, the checkbox is selected. */ "checked": boolean; /** * Specify whether the checkbox is disabled or not. */ "disabled": boolean; /** * Get the label text */ "getLabel": () => Promise; /** * If `true` the checkbox is in indeterminate state. */ "indeterminate": boolean; /** * Specifie the alignment of the checkbox with the label content */ "labelAlignment": CheckboxLabelAlignment; "name": string; /** * If `true`, the user must fill in a value before submitting a form. */ "required": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The chip component is a small, interactive element that can be used to represent an input, filter, or tag. * It can be in one of two modes: 'selectable' or 'dismissible'. * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked. * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked. * @cssprop --wcs-chip-height - Height of the chip * @cssprop --wcs-chip-font-size - Font size of the chip text * @cssprop --wcs-chip-font-weight - Font weight of the chip text * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed * @cssprop --wcs-chip-border-radius - Border radius of the chip * @cssprop --wcs-chip-border-line-width - Border line width of the chip * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled */ interface WcsChip { /** * If `true`, the chip is disabled. The chip will not respond to click events and will not emit any events. This property is used in both 'selectable' and 'dismissible' modes. */ "disabled": boolean; /** * Text label displayed on the chip. */ "label": string; /** * Defines the mode of the chip. Can be 'selectable' or 'dismissible'. - 'selectable': The chip can be selected and emits an event when clicked. - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked. */ "mode": WcsChipMode; /** * If `true`, the chip is open. This property is used to control the visibility of the chip in the dismissible mode. When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip. */ "open": boolean; /** * If `true`, the chip is selected. This property is only used in 'selectable' mode. */ "selected": boolean; /** * Unique value representing the chip identifier in events. */ "value": string; /** * Defines the visual style of the chip for the dismissible mode. */ "variant": WcsChipVariant; } /** * *Part of communication design system* * The com-nav component is a container for navigation links to external or internal pages of the website. * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav * @cssprop --wcs-com-nav-background-color - Background color of the com-nav; * @cssprop --wcs-com-nav-app-name-color - App name color * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section */ interface WcsComNav { /** * Name of the application to be displayed in the menu bar */ "appName": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The com-nav-category is a subcomponent of `wcs-com-nav`. It represents a category nested inside a `wcs-com-nav-submenu`. * @cssprop --wcs-com-nav-category-label-font-size - Label font-size * @cssprop --wcs-com-nav-category-label-mobile-font-weight - Label font-weight on mobile * @cssprop --wcs-com-nav-category-label-mobile-color - Label color on mobile * @cssprop --wcs-com-nav-category-label-desktop-font-weight - Label font-weight on desktop * @cssprop --wcs-com-nav-category-label-desktop-color - Label color on mobile * @cssprop --wcs-com-nav-category-item-mobile-color - Color of category item (mobile) * @cssprop --wcs-com-nav-category-item-mobile-font-weight - Font weight of category item (mobile) * @cssprop --wcs-com-nav-category-item-mobile-spacing-top - Spacing top around items group (mobile) * @cssprop --wcs-com-nav-category-item-mobile-spacing-left - Spacing left around items group (mobile) * @cssprop --wcs-com-nav-category-item-mobile-gap - Gap between each category item (mobile) * @cssprop --wcs-com-nav-category-label-desktop-gap - Gap inside category label, between text and arrow * @cssprop --wcs-com-nav-category-label-desktop-focus-outline-color - Focus outline of the label (desktop) * @cssprop --wcs-com-nav-category-desktop-menu-background-color - Background color of the category menu (desktop) * @cssprop --wcs-com-nav-category-desktop-menu--border-left-width - Border left width of the category menu * @cssprop --wcs-com-nav-category-desktop-menu--border-left-color - Border left color of the category menu * @cssprop --wcs-com-nav-category-desktop-menu-background-indicator-color - Indicator color on top of menu * @cssprop --wcs-com-nav-category-desktop-menu-padding-top - Padding top of menu * @cssprop --wcs-com-nav-category-desktop-menu-padding-bottom - Padding bottom of menu * @cssprop --wcs-com-nav-category-desktop-menu-padding-left - Padding left of menu * @cssprop --wcs-com-nav-category-desktop-menu-padding-right - Padding right of menu * @cssprop --wcs-com-nav-category-desktop-menu-gap - Gap between each item (desktop) * @cssprop --wcs-com-nav-category-item-desktop-color - Color of category item (desktop) * @cssprop --wcs-com-nav-category-item-desktop-font-weight - Font weight of category item (desktop) */ interface WcsComNavCategory { /** * Close the category */ "close": () => Promise; "label": string; /** * Opens the category */ "open": () => Promise; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link. * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color */ interface WcsComNavItem { } /** * The com-nav-submenu is a subcomponent of `wcs-com-nav`. It represents an expandable menu containing more items or categories. * @cssprop --wcs-com-nav-submenu-button-color - Color of the menu label * @cssprop --wcs-com-nav-submenu-button-font-weight - Font-weight of the menu label * @cssprop --wcs-com-nav-submenu-button-focus-outline-color - Focus outline color of the menu label * @cssprop --wcs-com-nav-submenu-button-gap - Gap inside menu label between text and arrow indicator * @cssprop --wcs-com-nav-submenu-desktop-menu-background-color - Background color of the menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-text-color - Text color inside menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-link-font-weight - Link font-weight color inside menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-heading-font-weight - Heading font-weight of the menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-description-font-weight - Description font-weight of the menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-description-gap - Gap between heading and description in the description section of the menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-padding - Padding of the menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-items-padding-left - Padding left around link items group in menu (desktop) * @cssprop --wcs-com-nav-submenu-desktop-menu-items-padding-right - Padding right around link items group in menu (desktop) * @cssprop --wcs-com-nav-submenu-mobile-text-color - Text color for each text (mobile) * @cssprop --wcs-com-nav-submenu-mobile-link-font-weight - Link font-weight for each link (mobile) * @cssprop --wcs-com-nav-submenu-mobile-spacing-top - Spacing around top of the submenu (mobile) * @cssprop --wcs-com-nav-submenu-mobile-spacing-bottom - Spacing around bottom of the submenu (mobile) * @cssprop --wcs-com-nav-submenu-mobile-spacing-left - Spacing around left of the submenu (mobile) * @cssprop --wcs-com-nav-submenu-mobile-gap - Gap between each item in submenu (mobile) */ interface WcsComNavSubmenu { /** * Close the menu */ "close": () => Promise; "label": string; /** * Opens the menu */ "open": () => Promise; "panelDescription": string; "panelTitle": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * Counter component, meant to be used for small range of values (e.g : 0 - 5).
* For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation) * @cssprop --wcs-counter-border-radius - Border radius of the counter * @cssprop --wcs-counter-value-color-default - Default color of the value * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled * @cssprop --wcs-counter-font-weight - Font weight of the value * @cssprop --wcs-counter-height-m - Height medium of the counter * @cssprop --wcs-counter-height-l - Height large of the counter * @cssprop --wcs-counter-font-size-m - Font size medium of the counter * @cssprop --wcs-counter-font-size-l - Font size large of the counter * @cssprop --wcs-counter-padding-m - Padding medium of the counter * @cssprop --wcs-counter-padding-l - Padding large of the counter * @cssprop --wcs-counter-background-color - Background color of the counter * @cssprop --wcs-counter-gap - Gap between the buttons and the label * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline * @cssprop --wcs-counter-transition-duration - Duration of the animation */ interface WcsCounter { /** * Specify whether the counter is disabled or not. */ "disabled": boolean; /** * The label of the counter.
e.g. Number of passengers, train carriages, railroad tracks... */ "label": string; /** * The maximum value of the counter. If the value of the max attribute isn't set, then the element has no maximum value. */ "max"?: number; /** * The minimum value of the counter. If the value of the min attribute isn't set, then the element has no minimum value. */ "min"?: number; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Specify the size (height) of the counter. */ "size": WcsCounterSize; /** * Defines by how much the counter will be incremented or decremented. */ "step": number; /** * The current value of the counter. */ "value": number; } /** * The divider is a separator between two elements, consisting of a horizontal line. * @cssprop --wcs-divider-color - Color of the divider * @cssprop --wcs-divider-height - Height (border-width) of the divider */ interface WcsDivider { } /** * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the * dropdown. * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay */ interface WcsDropdown { /** * Specifies whether the dropdown button is clickable or not */ "disabled": boolean; /** * Dropdown's button mode */ "mode": WcsButtonMode; /** * Hides the arrow in the button */ "noArrow": boolean; /** * placement of the dropdown's popover */ "placement": WcsDropdownPlacement; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Dropdown's button shape */ "shape": WcsButtonShape; /** * Dropdown's button size */ "size": WcsButtonSize; } /** * You can add a divider between groups of items * @cssprop --wcs-dropdown-divider-margin - Margin of the divider * @cssprop --wcs-dropdown-divider-color - Color of the divider */ interface WcsDropdownDivider { } /** * You can add `wcs-dropdown-header` before a group of items to describe it * @cssprop --wcs-dropdown-header-color - Text color of the header * @cssprop --wcs-dropdown-header-padding-vertical - Vertical padding of the header * @cssprop --wcs-dropdown-header-padding-horizontal - Horizontal padding of the header * @cssprop --wcs-dropdown-header-font-size - Font size of the header * @cssprop --wcs-dropdown-header-font-weight - Font weight of the header */ interface WcsDropdownHeader { } /** * You must add `wcs-dropdown-item` to `wcs-dropdown` * @cssprop --wcs-dropdown-item-height - Height of the dropdown item * @cssprop --wcs-dropdown-item-padding-horizontal - Padding horizontal * @cssprop --wcs-dropdown-item-padding-vertical - Padding vertical * @cssprop --wcs-dropdown-item-text-font-weight - Font weight of the dropdown item * @cssprop --wcs-dropdown-item-text-color-default - Default text color of the dropdown item * @cssprop --wcs-dropdown-item-text-color-hover - Text color of the dropdown item when hovered * @cssprop --wcs-dropdown-item-text-color-press - Text color of the dropdown item when pressed * @cssprop --wcs-dropdown-item-background-color-default - Default background color of the dropdown item * @cssprop --wcs-dropdown-item-background-color-hover - Background color of the dropdown item when hovered * @cssprop --wcs-dropdown-item-background-color-press - Background color of the dropdown item when pressed * @cssprop --wcs-dropdown-item-border-width-focus - Border width of the dropdown item when focused * @cssprop --wcs-dropdown-item-border-color-focus - Border color of the dropdown item when focused * @cssprop --wcs-dropdown-item-border-radius - Border radius of the dropdown item * @cssprop --wcs-dropdown-item-transition-duration - Transition duration of the dropdown item */ interface WcsDropdownItem { } /** * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. * This component is not present in the SNCF design system specifications, so we tried to build it in the most * "discoverable" way possible (for users who interact with), but it's a first version. * **How to use ❓** * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event. * It has 3 internal states : * - DISPLAY = the default state of the editable-field * - EDIT = the editable-field is editable, the user should input the data * - LOADING = the data is submitted and the editable-field is waiting for a **response** * A **response** is needed to get the component out of the LOADING state. You can either : * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx)) * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx)) * **Accessibility guidelines πŸ’‘** * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided * > - Additional aria attributes put on `` won't inherit onto the native component : you must use the `setAriaAttribute` method. * @cssprop --wcs-editable-field-label-color - Color of the label text * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field * @cssprop --wcs-editable-field-label-font-size - Font size of the label text * @cssprop --wcs-editable-field-background-color - Background color of the editable field * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field * @cssprop --wcs-editable-field-border-width - Border width of the editable field * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus * @cssprop --wcs-editable-field-border-style - Border style of the editable field * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly */ interface WcsEditableField { /** * Error message displayed under the field if validation failed. */ "errorMsg": string; /** * Function used to format the value */ "formatFn": FormatFn; /** * Label of the field. Will also be part of the edit button `aria-label`. */ "label": string; /** * Specify whether the field is editable or not */ "readonly": boolean; /** * Specify the size (height) of the editable field. */ "size": WcsEditableFieldSize; /** * Specifies which component is used for editing */ "type": EditableFieldType; /** * Function to customize the validation of the data during the update */ "validateFn": ValidateFn; /** * Initial value of the field */ "value": any; } /** * The `wcs-error` should always be wrapped in a `wcs-form-field`. * It is used to display a red message under the field indicating an incorrect user input. * ## Accessibility guidelines πŸ’‘ * - Provide a relevant error message to inform the users what they should change to make the field valid * - Always add the error icon, to ensure the visual indication of the error state other than the color * - `aria-description` will be automatically added to the field for screen readers * - `aria-invalid="true"` will be automatically added to the field for screen readers * @cssprop --wcs-error-color - Color of the text * @cssprop --wcs-error-font-size - Font size * @cssprop --wcs-error-font-weight - Font weight */ interface WcsError { } /** * This field component can be used to display the details of an entity. It is built around the label and the content of the field. * @cssprop --wcs-field-label-color - The color of the label * @cssprop --wcs-field-label-font-weight - The font weight of the label * @cssprop --wcs-field-label-font-size - The font size of the label * @cssprop --wcs-field-label-line-height - The line height of the label * @cssprop --wcs-field-content-color - The color of the content * @cssprop --wcs-field-content-font-weight - The font weight of the content * @cssprop --wcs-field-content-font-size - The font size of the content * @cssprop --wcs-field-margin-top - The margin top of the field * @cssprop --wcs-field-margin-bottom - The margin bottom of the field * @cssprop --wcs-field-gap - The gap between the label and the content */ interface WcsField { } /** * The field-content is a subcomponent of `wcs-field`. It represents the text content of the field. * @cssprop --wcs-field-content-color - Color of the content * @cssprop --wcs-field-content-font-weight - Font weight of the content * @cssprop --wcs-field-content-font-size - Font size of the content * @cssprop --wcs-field-content-line-height - Line height of the content */ interface WcsFieldContent { } /** * The field-label is a subcomponent of `wcs-field`. It represents the label or title of the field. * @cssprop --wcs-field-label-color - Color of the label * @cssprop --wcs-field-label-font-weight - Font weight of the label * @cssprop --wcs-field-label-font-size - Font size of the label * @cssprop --wcs-field-label-line-height - Line height of the label */ interface WcsFieldLabel { } /** * The footer component has been designed to leave as much customization as possible to the developer. The footers are often specific to the application developed. * @cssprop --wcs-footer-background-color - Background color of the footer * @cssprop --wcs-footer-text-color - Text color of the footer * @cssprop --wcs-footer-link-text-color - Text color of the links in the footer * @cssprop --wcs-footer-link-text-color-hover - Text color of the links in the footer when hovered * @cssprop --wcs-footer-link-font-size - Font size of the links in the footer * @cssprop --wcs-footer-link-font-weight - Font weight of the links in the footer * @cssprop --wcs-footer-link-gap - Gap between the links in the footer * @cssprop --wcs-footer-gap - Vertical gap between the content and the two end slots * @cssprop --wcs-footer-end-gap - Horizontal gap between the right and left end slots * @cssprop --wcs-footer-max-width - Max width of the footer for responsive purposes * @cssprop --wcs-footer-padding - Padding all around the content of the footer */ interface WcsFooter { } /** * Form field component wraps the native input element and add some more functionality on top of it. * You can use the `wcs-form-field` to wrap any of these components : * - `wcs-input` * - `wcs-textarea` * - `wcs-radio-group` * - `wcs-switch` * - `wcs-checkbox` * - `wcs-native-select` * - `wcs-select` * - `wcs-counter` * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the * form-field that it is required. It will add a red star after the label of the form field. * ## Accessibility guidelines πŸ’‘ * - Each form control should be identified with a unique `wcs-label` * - Don't forget to add form validation to make sure the data is correctly formatted * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set) * - The form should not be submittable if at least one required form control is not filled * - Hints are optional and should only be used to add extra information * - Additional aria attributes put on `` won't inherit onto the native component : you must use the `setAriaAttribute` method. * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages. * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements. * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused. * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled. * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements. * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements. * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements. * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled. */ interface WcsFormField { /** * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component */ "isError": boolean; } /** * *Part of communication design system* * This component replaces the vertical navbar for sites and applications that use the communication design system * @cssprop --wcs-galactic-background-color - Background color of the bar * @cssprop --wcs-galactic-height - Height of the bar * @cssprop --wcs-galactic-text-color - Text color of the bar * @cssprop --wcs-galactic-font-size - Font size of the text in the bar * @cssprop --wcs-galactic-font-weight - Font weight of the text in the bar * @cssprop --wcs-galactic-max-width - Maximum width of the bar * @cssprop --wcs-galactic-padding-horizontal - Horizontal padding of the bar * @cssprop --wcs-galactic-logo-height - Height of the SNCF logo * @cssprop --wcs-galactic-logo-margin-right - Margin right of the SNCF logo */ interface WcsGalactic { /** * Text to display in the bar */ "text": string; } /** * *Part of communication design system* * You can put a wcs-galactic-menu inside a wcs-galactic component to add an extra menu * @cssprop --wcs-galactic-menu-background-color - Background color of the menu * @cssprop --wcs-galactic-menu-padding-horizontal - Horizontal padding of the menu * @cssprop --wcs-galactic-menu-gap - Gap between items in the menu * @cssprop --wcs-galactic-menu-height - Height of the menu * @cssprop --wcs-galactic-menu-icon-focus-outline-color - Color of the focus outline on the icon * @cssprop --wcs-galactic-menu-overlay-background-color - Background color of the overlay * @cssprop --wcs-galactic-menu-overlay-padding - Padding of the overlay * @cssprop --wcs-galactic-menu-overlay-color - Color of the overlay */ interface WcsGalacticMenu { "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Text to be displayed in the galactic bar */ "text": string; } /** * The grid component is a complex component used as an HTML table to display collections of data. * @cssprop --wcs-grid-gap - Gap between grid cells (horizontal, vertical using `border-spacing` property) * @cssprop --wcs-grid-vertical-align - Vertical alignment of grid cells * @cssprop --wcs-grid-outline-color - Outline color for grid cells * @cssprop --wcs-grid-cell-text-color - Text color of all grid cells * @cssprop --wcs-grid-cell-padding-horizontal - Horizontal padding of grid cells * @cssprop --wcs-grid-cell-padding-vertical - Vertical padding of grid cells * @cssprop --wcs-grid-cell-border-bottom - Bottom border of grid cells * @cssprop --wcs-grid-cell-separator-border - Separator border between grid cells * @cssprop --wcs-grid-first-cell-border-radius - Border radius of the first cell in a row * @cssprop --wcs-grid-last-cell-border-radius - Border radius of the last cell in a row * @cssprop --wcs-grid-highlight-color - Background color for selected rows * @cssprop --wcs-grid-row-background-color - Background color of all rows * @cssprop --wcs-grid-row-odd-background-color - Background color of odd rows * @cssprop --wcs-grid-row-even-background-color - Background color of even rows * @cssprop --wcs-grid-header-background-color-default - Default background color of the header * @cssprop --wcs-grid-header-background-color-hover - Background color of the header on hover * @cssprop --wcs-grid-header-background-color-press - Background color of the header on press * @cssprop --wcs-grid-header-text-color - Text color of the header * @cssprop --wcs-grid-header-font-weight - Font weight of the header * @cssprop --wcs-grid-header-font-size - Font size of the header * @cssprop --wcs-grid-header-line-height - Line height of the header * @cssprop --wcs-grid-header-padding-vertical - Vertical padding of the header * @cssprop --wcs-grid-header-padding-horizontal - Horizontal padding of the header * @cssprop --wcs-grid-header-border-left - Left border between header cells (default is none * @cssprop --wcs-grid-header-border-radius - Border radius of the header * @cssprop --wcs-grid-header-border-bottom - Bottom border of the header * @cssprop --wcs-grid-header-transition-duration - Transition duration of the header * @cssprop --wcs-grid-first-header-background-color - Background color of the first header cell * @cssprop --wcs-grid-first-header-border-radius - Border radius of the first header cell * @cssprop --wcs-grid-last-header-border-radius - Border radius of the last header cell * @cssprop --wcs-grid-column-selection-width - Width of the selection column (when selectionConfig is defined) * @cssprop --wcs-grid-header-sort-arrow-color-default - Color of the sort arrow in the header * @cssprop --wcs-grid-header-sort-arrow-color-hover - Color of the sort arrow in the header when hovered * @csspart all-rows-checkbox - CSS part for the checkbox in the selection column that selects all rows * @csspart row-checkbox - CSS part for the checkbox of each row in the selection column */ interface WcsGrid { /** * Contains the data to display in the table from a js object */ "data": any[]; /** * Set focus on the first cell of the grid */ "focusFirstCell": () => Promise; /** * Flag to display a spinner during data loading */ "loading": boolean; /** * Function to add css parts to the grid rows, this allows you to customize the rows with css parts directly in you're application stylesheet. */ "rowCssPartsFn": RowCssPartsFn; /** * Name of the object's key that will be used to display the cells whose `keyValue` attribute matches to the object's value for this key. Useful for custom cells. */ "rowIdPath": string; /** * Set the selected items (rows) */ "selectedItems": any | any[]; /** * Used to manage grid's row selection. "none": no row can be selected. "multiple": several rows can be selected. "single": one row only can be selected. */ "selectionConfig": WcsGridSelectionConfig; /** * Manage sort and pagination with a backend server when set to `true` */ "serverMode": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Automatically set by the component to reference the wcs-grid-pagination HTML element by its id. */ "wcsGridPaginationId": string; } /** * The grid column is a subcomponent of `wcs-grid` that represents a column of the table. * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column */ interface WcsGridColumn { /** * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a grid in order to move the focus between the grid columns. */ "columnPosition": number; /** * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns using keyboard. */ "cursorPosition": {col: number, row: number}; /** * Set to true if using a `wcs-custom-cell` linked to it. */ "customCells": boolean; /** * Customizable formatter function to render the cell differently. */ "formatter": WcsCellFormatter; /** * Flag to hide the column. */ "hidden": boolean; /** * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...) */ "name": string; /** * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...) */ "path": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Make the column sortable. */ "sort": boolean; /** * Customizable sort function to change the comparison of values. */ "sortFn": WcsSortFn; /** * Defines if the column sort is ascending or descending. `none` = the column is not sorted. */ "sortOrder": WcsSortOrder; /** * Set the column `` element width. */ "width": string; } /** * The grid custom cell is a subcomponent of `wcs-grid`. */ interface WcsGridCustomCell { /** * ID of the column for which to render the cell */ "columnId": string; /** * Key value of the object rendered for the cell's row */ "rowId": any; } /** * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `` element. * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow */ interface WcsGridPagination { /** * Set the available page sizes in the pagination dropdown on the left. */ "availablePageSizes": number[]; /** * The current page of the pagination. First page starts at index 0. */ "currentPage": number; /** * Total elements in the grid. - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length. - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh. */ "itemsCount": number; /** * Max number of pages. - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`. - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh. */ "pageCount": number; /** * Maximum number of elements shown per page. Default is the first value of `availablePageSizes`. */ "pageSize": number; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The header component is an element that appears across the top of all pages on a website or application; it contains the logo, the site name and main actions. * @cssprop --wcs-header-background-color - Background color of the header * @cssprop --wcs-header-gap - Gap between elements in the header * @cssprop --wcs-header-height - Height of the header * @cssprop --wcs-header-logo-height - Height of the logo * @cssprop --wcs-header-padding-horizontal - Horizontal padding of the header * @cssprop --wcs-header-title-color - Color of the title * @cssprop --wcs-header-title-font-weight - Font weight of the title * @cssprop --wcs-header-title-font-size - Font size of the title */ interface WcsHeader { "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The `wcs-hint` should always be wrapped in a `wcs-form-field`. * It is used to display an informative message under the field indicating an incorrect user input. * ## Accessibility guidelines πŸ’‘ * - Provide a relevant hint message to inform the users about the format, how the data should be filled in, or what is the purpose of the field * - `aria-description` will be automatically added to the field for screen readers * @cssprop --wcs-hint-color - Color of the text * @cssprop --wcs-hint-font-weight - Font weight of the text * @cssprop --wcs-hint-font-size-default - Font size default of the text * @cssprop --wcs-hint-font-size-small - Font size small of the text */ interface WcsHint { /** * Whether the component should display the small version of the hint */ "small": boolean; } /** * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps. * ## Accessibility guidelines πŸ’‘ * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers. * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number). * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled */ interface WcsHorizontalStepper { /** * Specifies whether a check should be displayed when a step is passed. */ "checkOnComplete": boolean; /** * index of the active step. The index corresponds to the index of the step in the 'steps' list */ "currentStep": number; /** * Specifies if the stepper is in linear mode (the user can only click on the next step) or non-linear (the user can click on any step) */ "mode": HorizontalStepperMode; "next": () => Promise; "previous": () => Promise; /** * steps to display */ "steps": HorizontalStepConfig[]; } /** * The icon component is a graphic symbol designed to visually indicate the purpose of an interface element. */ interface WcsIcon { "icon": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; "size": 'x5' | 'x75' | '1x' | '1x2' | '1x5' | '1x7' | '2x' | '3x' | '30px' | '50px' | '66px' | '90px' | '96px' | '140px'; } /** * The input component is a form control that accepts a single line of text. * Implementation mainly inspired from Ionic Input Component. * ## Accessibility guidelines πŸ’‘ * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself. * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label. * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled * @cssprop --wcs-input-background-color - background color of the input * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input * @cssprop --wcs-input-border-width - border width of the input * @cssprop --wcs-input-border-width-focus - border width of the input when focused * @cssprop --wcs-input-height-l - large height of the input * @cssprop --wcs-input-height-m - medium height of the input * @cssprop --wcs-input-height-s - small height of the input * @cssprop --wcs-input-font-size-l - large font size of the input * @cssprop --wcs-input-font-size-m - medium font size of the input * @cssprop --wcs-input-font-size-s - small font size of the input * @cssprop --wcs-input-border-style-default - default border style of the input * @cssprop --wcs-input-border-style-focus - border style of the input when focused * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix * @cssprop --wcs-input-border-color-default - default border color of the input when not focused * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled * @cssprop --wcs-input-border-color-focus - border color of the input when focused * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused * @cssprop --wcs-input-border-color-error - border color of the input when in error state * @cssprop --wcs-input-value-color - color of the input value * @cssprop --wcs-input-value-font-weight - font weight of the input value * @cssprop --wcs-input-placeholder-color - color of the input placeholder * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder * @cssprop --wcs-input-text-color-disabled - color of the input when disabled * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size * @cssprop --wcs-input-gap - gap between text input and icon */ interface WcsInput { /** * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. */ "accept"?: string; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. */ "autocapitalize": string; /** * Indicates whether the value of the control can be automatically completed by the browser. */ "autocomplete": AutocompleteTypes; /** * Whether auto correction should be enabled when the user is entering/editing the text value. */ "autocorrect": WcsInputAutocorrect; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ "autofocus": boolean; /** * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. */ "debounce": number; /** * If `true`, the user cannot interact with the input. */ "disabled": boolean; /** * A hint to the browser for which enter key to display. */ "enterkeyhint"?: WcsInputEnterKeyHint; /** * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14. */ "fireFocusEvents": boolean; /** * Returns the native `` element used under the hood. */ "getInputElement": () => Promise; "hidePasswordButtonAriaLabel": string; /** * Name of the material icon to add to the input */ "icon": string; /** * A hint to the browser for which keyboard to display. */ "inputmode"?: WcsInputInputMode; /** * The maximum value, which must not be less than its minimum (min attribute) value. */ "max"?: string; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. */ "maxlength"?: number; /** * The minimum value, which must not be greater than its maximum (max attribute) value. */ "min"?: string; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. */ "minlength"?: number; /** * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. */ "multiple"?: boolean; /** * The name of the control, which is submitted with the form data. */ "name": string; /** * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. */ "pattern"?: string; /** * Instructional text that shows before the input has a value. */ "placeholder"?: string | null; /** * Prefix displayed before the text field contents. This is not included in the value. */ "prefixLabel": string; /** * If `true`, the user cannot modify the value. */ "readonly": boolean; /** * If `true`, the user must fill in a value before submitting a form. */ "required": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global `input.blur()`. */ "setBlur": () => Promise; "showPasswordButtonAriaLabel": string; /** * Specify the size (height) of the input. */ "size": WcsInputSize; /** * If `true`, the element will have its spelling and grammar checked. */ "spellcheck": boolean; /** * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid. */ "state": WcsInputState; /** * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. */ "step"?: string; /** * Suffix displayed after the text field contents. This is not included in the value. */ "suffixLabel": string; /** * The type of control to display. The default type is text. */ "type": TextFieldTypes; /** * The value of the input. */ "value"?: string | number | null; } /** * The `wcs-label` should always be wrapped in a `wcs-form-field`. * It is used to caption a form control component. * ## Accessibility guidelines πŸ’‘ * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint` * - Use the required flag only as an indication to inform users that the form control is required * @cssprop --wcs-label-color - Color of the text * @cssprop --wcs-label-font-weight - Font weight of the text * @cssprop --wcs-label-required-marker-color - Color of the required marker * @cssprop --wcs-label-gap - Gap between text and required marker */ interface WcsLabel { /** * If `true`, marks the label with a red star. Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. */ "required": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * Lists are used for grouping a collection of related items. * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. * ## Accessibility guidelines πŸ’‘ * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, * you should set a `role` attribute to `listitem`. See the code below. * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. * @cssprop --wcs-list-item-padding - Padding of the list item * @cssprop --wcs-list-item-border-width - Border width of the list item * @cssprop --wcs-list-item-border-color - Border color of the list item * @cssprop --wcs-list-item-background-color-default - Background color of the list item * @cssprop --wcs-list-item-background-color-hover - Background color of the list item when hovered * @cssprop --wcs-list-item-background-color-active - Background color of the list item when active * @cssprop --wcs-list-item-transition-duration - Transition duration of the list item * @cssprop --wcs-list-item-title-color - Color of the title of the list item * @cssprop --wcs-list-item-title-font-weight - Font weight of the title of the list item * @cssprop --wcs-list-item-title-line-height - Line height of the title of the list item * @cssprop --wcs-list-item-title-margin-bottom - Margin bottom of the title of the list item * @cssprop --wcs-list-item-icon-color - Color of the icon of the list item * @cssprop --wcs-list-item-icon-margin-right - Margin right of the icon of the list item * @cssprop --wcs-list-item-actions-margin-left - Margin left of the actions of the list item */ interface WcsListItem { /** * True if the item is active. Adds a background color that highlights it. */ "activated": boolean; } /** * The list-item-properties is a subcomponent of `wcs-list-item`. It represents a wrapper for a list of several `wcs-property`. * @cssprop --wcs-list-item-properties-margin-bottom - Margin bottom of the properties * @cssprop --wcs-list-item-properties-gap - Gap between all list item properties * @cssprop --wcs-list-item-properties-separator-width - Separator width between all list item properties * @cssprop --wcs-list-item-properties-separator-color - Separator color between all list item properties */ interface WcsListItemProperties { } /** * The list-item-property is a subcomponent of `wcs-list-item`. * Wrapped in a `wcs-list-item-properties`, it represents a property to describe an item. * @cssprop --wcs-list-item-property-font-weight - Font weight of the property * @cssprop --wcs-list-item-property-color - Color of the property */ interface WcsListItemProperty { } /** * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button. */ interface WcsMatIcon { /** * Family of the icon */ "family": MaterialIconFamily; /** * Use the icon name from Material Icons */ "icon": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Size of the icon */ "size": MaterialIconSize; } /** * The modal component (also named dialog or popup) is an interface element that appears on top of the page content. * Use it to show a message, a confirmation dialog, or any other content like forms. * ## Accessibility guidelines πŸ’‘ * > - Modal element has `role="dialog"` and `aria-modal="true"` * > - Keyboard navigation is trapped inside the modal * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order * > to focus it upon dialog dismissal. * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you * > want to focus. You will see a story as example below * > - The modal can be closed at any time by pressing the Escape key. * > * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ * @cssprop --wcs-modal-max-height - Max height of the main container * @cssprop --wcs-modal-overflow-y - Overflow-y of the content * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal * @cssprop --wcs-modal-max-height - Max height of the main container * @cssprop --wcs-modal-background-color - Background color of the modal * @cssprop --wcs-modal-border-radius - Border radius of the modal * @cssprop --wcs-modal-padding - Padding inside the modal * @cssprop --wcs-modal-border-width - Border width of the modal * @cssprop --wcs-modal-border-color - Border color of the modal * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title * @cssprop --wcs-modal-title-font-size - Font size of the modal title * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title * @cssprop --wcs-modal-title-line-height - Line height of the modal title * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions * @cssprop --wcs-modal-width-s - Width of the modal for size small * @cssprop --wcs-modal-width-m - Width of the modal for size medium * @cssprop --wcs-modal-width-l - Width of the modal for size large * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large */ interface WcsModal { /** * Specifies the aria-label present on the close button when the modal is opened. Only use when `showCloseButton` is `true`. */ "closeButtonAriaLabel": string; /** * Disables automatic focus behavior when the modal opens. When set to true, the modal will not automatically focus any element upon opening. Use this property with caution, as managing focus is important for accessibility. Consider providing an alternative focus management strategy if disabling the default behavior. */ "disableAutoFocus": boolean; /** * Specifies whether the component should hide the actions slot or not */ "hideActions": boolean; /** * The ID of the element to automatically focus when the modal opens. If this property is not set and `disableAutoFocus` is false, the modal will automatically focus the first focusable element within its content. This follows accessibility best practices by ensuring keyboard navigation starts from a logical point when the modal opens. * @example */ "initialFocusElementId"?: string; /** * Specifies which element id controls the modal * @private */ "modalTriggerControlsId": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Displays the modal */ "show": boolean; /** * Specifies whether the component should display a close button. if false, it won't close the modal when the escape key is pressed. */ "showCloseButton": boolean; /** * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the size best suited for the content and screen size displaying the modal. Remember to test responsiveness. */ "size": ModalSize; /** * Specifies whether the component should display a backdrop on the entire page */ "withoutBackdrop": boolean; } /** * The `wcs-native-select` component is designed to accept a native `` element using the framework of their choice, without the need to re-expose all the * properties of the `` element and provides custom styles and behavior, while preserving the native * functionality and accessibility. * ### βœ… Guidance * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled` * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay. * ### Example usage * ```html * * * * ``` * ### Note * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the * select is reset, you have to call the `updateStyles()` method manually. * - It is strongly recommended to use native-select when you don't have to support the multi-selection feature * - Use a native-select instead of a wcs-select if your application is mainly on mobile / tablet. The native behavior of the device will be used. * @cssprop --wcs-native-select-line-height - Line height of the select * @cssprop --wcs-native-select-size-m - Height of the select when size is 'm' * @cssprop --wcs-native-select-font-size-m - Font size of the select when size is 'm' * @cssprop --wcs-native-select-size-l - Height of the select when size is 'l' * @cssprop --wcs-native-select-font-size-l - Font size of the select when size is 'l' * @cssprop --wcs-native-select-border-radius - Border radius of the select * @cssprop --wcs-native-select-background-color - Background color of the select * @cssprop --wcs-native-select-border-color-default - Border color of the select when not focused * @cssprop --wcs-native-select-border-color-disabled - Border color of the select when disabled * @cssprop --wcs-native-select-border-color-focus - Border color of the select when focused * @cssprop --wcs-native-select-border-color-error - Border color of the select when in error state * @cssprop --wcs-native-select-border-style-default - Border style of the select when not focused * @cssprop --wcs-native-select-border-style-focus - Border style of the select when focused * @cssprop --wcs-native-select-border-width - Border width of the select when not focused * @cssprop --wcs-native-select-border-width-focus - Border width of the select when focused * @cssprop --wcs-native-select-value-color - Color of the selected value * @cssprop --wcs-native-select-value-font-weight - Font weight of the selected value * @cssprop --wcs-native-select-value-font-style - Font style of the selected value * @cssprop --wcs-native-select-padding-horizontal-m - Padding horizontal of the select when size is 'm' * @cssprop --wcs-native-select-padding-horizontal-l - Padding horizontal of the select when size is 'l' * @cssprop --wcs-native-select-arrow-color - Color of the select arrow * @cssprop --wcs-native-select-arrow-color-disabled - Color of the select arrow when the select is disabled * @cssprop --wcs-native-select-text-color-disabled - Color of the text when the select is disabled * @cssprop --wcs-native-select-placeholder-color - Color of the placeholder * @cssprop --wcs-native-select-placeholder-font-weight - Font weight of the placeholder * @cssprop --wcs-native-select-placeholder-font-style - Font style of the placeholder * @cssprop --wcs-native-select-option-color - Text color of the options * @cssprop --wcs-native-select-option-font-style - Font style of the options * @cssprop --wcs-native-select-option-selected-color - Text color of the selected option */ interface WcsNativeSelect { /** * If `true`, the user must fill in a value before submitting a form. It is propagated to the slotted select element */ "required": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * The `size` property controls the size of the slotted `select` element by adjusting its padding. There are two possible size options: - 'm': medium size - 'l': large size The default value is 'm'. */ "size": WcsNativeSelectSize; /** * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder). */ "updateStyles": () => Promise; } /** * The nav component is a container for navigation links to other pages of the website. * @cssprop --wcs-nav-background-color - Background color of the nav * @cssprop --wcs-nav-width-desktop - Width of the nav on desktop * @cssprop --wcs-nav-height-mobile - Height of the nav on mobile */ interface WcsNav { "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * The nav-item component is a subcomponent of `wcs-nav` and should always be used inside it. * They contain links to navigate to other pages of the website. * @cssprop --wcs-nav-item-font-weight - Font weight of the nav item * @cssprop --wcs-nav-item-height-desktop - Height of the nav item on desktop * @cssprop --wcs-nav-item-height-mobile - Height of the nav item on mobile * @cssprop --wcs-nav-item-gap-desktop - Gap between items in nav-item on desktop (e.g. icon and label) * @cssprop --wcs-nav-item-gap-mobile - Gap between items in nav-item on mobile (e.g. icon and label) * @cssprop --wcs-nav-item-font-size-desktop - Font size of the nav item on desktop * @cssprop --wcs-nav-item-font-size-mobile - Font size of the nav item on mobile * @cssprop --wcs-nav-item-background-color-default - Default background color of the nav item * @cssprop --wcs-nav-item-background-color-hover - Background color of the nav item when hovered * @cssprop --wcs-nav-item-background-color-press - Background color of the nav item when pressed * @cssprop --wcs-nav-item-background-color-active - Background color of the nav item when active * @cssprop --wcs-nav-item-color-default - Color of the nav item when default * @cssprop --wcs-nav-item-color-active - Color of the nav item when active * @cssprop --wcs-nav-item-color-hover - Color of the nav item when hovered * @cssprop --wcs-nav-item-color-press - Color of the nav item when pressed * @cssprop --wcs-nav-item-border-color-focus - Border color of the nav item when focused * @cssprop --wcs-nav-item-border-width-focus - Border width of the nav item when focused * @cssprop --wcs-nav-item-indicator-background-color - Background color of the nav item indicator * @cssprop --wcs-nav-item-indicator-width-desktop - Width of the nav item indicator on desktop * @cssprop --wcs-nav-item-indicator-width-mobile - Width of the nav item indicator on mobile * @cssprop --wcs-nav-item-indicator-height-desktop - Height of the nav item indicator on desktop * @cssprop --wcs-nav-item-indicator-height-mobile - Height of the nav item indicator on mobile * @cssprop --wcs-nav-item-indicator-border-radius-desktop - Border radius of the nav item indicator on desktop * @cssprop --wcs-nav-item-indicator-border-radius-mobile - Border radius of the nav item indicator on mobile * @cssprop --wcs-nav-item-transition-duration - Transition duration of the nav item */ interface WcsNavItem { } /** * The progress-bar component is a horizontal bar that indicates the current completion of a task. * ## Accessibility guidelines πŸ’‘ * > Aria attributes and how to display the progress-bar depend on the use case in your application : * > * > - **Case 1 : decorative** * > If the progress-bar is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the * > context of another component _(such as progress-bar in a card, stepper, ...)_ => **you don't need to show the label nor add an aria-label**. * > * > - **Case 2 : informative** * > If the progress-bar is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to : * > - **Provide a visible label** that describes the purpose of the progress-bar. * > - **Set the `showLabel` property to `true`** to show the percentage above the progress-bar. * > - Optionally, use aria-label to provide an accessible name if a visible label is not present. * @cssprop --wcs-progress-bar-border-radius - Border radius * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small * @cssprop --wcs-progress-bar-animation-duration - Animation duration * @cssprop --wcs-progress-bar-height-m - Height for size medium * @cssprop --wcs-progress-bar-height-s - Height for size small * @cssprop --wcs-progress-bar-background-color - Background color of the progress bar * @cssprop --wcs-progress-bar-rail-color - Rail color (dashed line) * @cssprop --wcs-progress-bar-rail-spacing - Space between the rail dashes * @cssprop --wcs-progress-bar-gap-s - Gap between the progress bar and the label for size small * @cssprop --wcs-progress-bar-gap-m - Gap between the progress bar and the label for size medium * @cssprop --wcs-progress-bar-indicator-color - Color of the progress bar indicator (bar on top of the rail) * @cssprop --wcs-progress-bar-label-color - Color of the label * @cssprop --wcs-progress-bar-label-font-size-s - Font size of the label for size small * @cssprop --wcs-progress-bar-label-font-size-m - Font size of the label for size medium * @cssprop --wcs-progress-bar-label-font-weight - Font weight of the label * @cssprop --wcs-progress-bar-label-percentage-font-size-s - Font size of the percentage for size small * @cssprop --wcs-progress-bar-label-percentage-font-size-m - Font size of the percentage for size medium * @cssprop --wcs-progress-bar-label-top-space - Space on top of the progress bar when label is displayed */ interface WcsProgressBar { "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Whether it displays a label indicating the percentage of progress above the bar. */ "showLabel": boolean; /** * Specify the size of the progress bar. m = default, s = smaller */ "size": Extract; /** * The actual value of the progress. Ranging from 0 to 100. */ "value": number; } /** * The progress-radial component is a circular progress bar that indicates the current completion of a task. * ## Accessibility guidelines πŸ’‘ * > Aria attributes and how to display the progress-radial depend on the use case in your application : * > * > - **Case 1 : decorative** * > If the progress-radial is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the * > context of another component _(such as progress-radial in a card)_ => **you don't need to show the label nor add an aria-label**. * > * > - **Case 2 : informative** * > If the progress-radial is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to : * > - **Provide a visible label** that describes the purpose of the progress-radial. * > - **Set the `showLabel` property to `true`** to show the percentage inside the progress-radial. * > - Optionally, use aria-label to provide an accessible name if a visible label is not present. * @cssprop --wcs-progress-radial-rail-width - The width of the line that represents the rail of the progress radial * @cssprop --wcs-progress-radial-rail-spacing - The space between each rail of the progress radial * @cssprop --wcs-progress-radial-rail-color - The color of the rail of the progress radial * @cssprop --wcs-progress-radial-value-background-color - The background color of the bar on top of the rail * @cssprop --wcs-progress-radial-label-color - The color of the label inside the progress radial * @cssprop --wcs-progress-radial-label-font-size - The font size of the label inside the progress radial * @cssprop --wcs-progress-radial-label-font-weight - The font weight of the label inside the progress radial * @cssprop --wcs-progress-radial-label-percentage-font-size - The font size of the percentage inside the progress radial * @cssprop --wcs-progress-radial-animation-duration - The duration of the animation of the progress radial */ interface WcsProgressRadial { "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Whether the component should display the % label inside */ "showLabel": boolean; /** * The size of the progress radial (in px) */ "size": number; /** * The value of the progress radial. Prefer values between 0 and 100. */ "value": number; } /** * The radio component should always be wrapped in a `wcs-radio-group`. * @cssprop --wcs-radio-transition-duration - Duration of the transition * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background) * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background) * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background) * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode) * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option */ interface WcsRadio { /** * If `true`, the user cannot interact with the radio. */ "disabled": boolean; /** * The label text displayed for the user */ "label": string; /** * The display mode of the control, automatically set by the radio group. (You shouldn't set this prop by yourself) */ "mode": RadioGroupMode; /** * The name of the control, automatically set by the radio group. (You shouldn't set this prop by yourself) */ "name": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; "setTabIndex": (value: number) => Promise; "updateState": () => Promise; /** * Sets a unique value for each radio, used to identify which radio button in a group is selected */ "value": any | any[] | undefined | null; } /** * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option * @cssprop --wcs-radio-group-option-height - Height of the radio group option * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option * @cssprop --wcs-radio-group-option-gap - Gap between each radio option */ interface WcsRadioGroup { /** * The display mode of the control to be set on all radio button children */ "mode": RadioGroupMode; /** * The name of the control to be set on all radio button children */ "name": any; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * The value of the radio-group. Automatically reflects which radio button is selected. */ "value": any | any[] | undefined | null; } /** * The select component (also named combobox) is a form component that allows users to select one or more options * from a list. * Use it with several slotted `wcs-select-option` inside. * @cssprop --wcs-select-control-arrow-color - Color of the select arrow * @cssprop --wcs-select-control-arrow-color-disabled - Color of the select arrow when disabled * @cssprop --wcs-select-control-background-color - Background color of the select control * @cssprop --wcs-select-control-line-height - Line height of the select control * @cssprop --wcs-select-options-padding - Padding of the select options container * @cssprop --wcs-select-control-border-radius - Border radius of the select control * @cssprop --wcs-select-control-border-width-default - Border width of the select control when not focused * @cssprop --wcs-select-control-border-width-focus - Border width of the select control when focused * @cssprop --wcs-select-control-border-color-default - Border color of the select control when not focused * @cssprop --wcs-select-control-border-color-disabled - Border color of the select control when disabled * @cssprop --wcs-select-control-border-color-error - Border color of the select control when error * @cssprop --wcs-select-control-border-color-focus - Border color of the select control when focused (not opened, but the control is focused) * @cssprop --wcs-select-value-color - Text color of the select value when not focused * @cssprop --wcs-select-value-font-weight - Font weight of the select value * @cssprop --wcs-select-placeholder-color - Text color of the select placeholder * @cssprop --wcs-select-placeholder-font-weight - Font weight of the select placeholder * @cssprop --wcs-select-placeholder-font-style - Font style of the select placeholder * @cssprop --wcs-select-text-color-disabled - Text color of the select when disabled * @cssprop --wcs-select-control-border-style-default - Border style of the select control when not focused * @cssprop --wcs-select-control-border-style-focus - Border style of the select control when focused * @cssprop --wcs-select-control-border-style-error - Border style of the select control when error * @cssprop --wcs-select-control-chips-gap - Gap between chips (only in multiple mode) * @cssprop --wcs-select-control-height-m - Height of the select control in medium size * @cssprop --wcs-select-control-height-l - Height of the select control in large size * @cssprop --wcs-select-control-autocomplete-padding-vertical-m - Padding vertical (top - bottom) of the select control in size m * @cssprop --wcs-select-control-autocomplete-padding-vertical-l - Padding vertical (top - bottom) of the select control in size l * @cssprop --wcs-select-control-padding-horizontal-m - Padding horizontal (left - right) in medium size * @cssprop --wcs-select-control-padding-horizontal-l - Padding horizontal (left - right) in large size * @cssprop --wcs-select-control-font-size-m - Font size of the select in size m * @cssprop --wcs-select-control-font-size-l - Font size of the select in size m * @cssprop --wcs-select-control-chip-color-default - Color default of the select chip * @cssprop --wcs-select-control-chip-color-disabled - Color disabled of the select chip * @cssprop --wcs-select-control-chip-background-color-default - Background color default of the select chip * @cssprop --wcs-select-control-chip-background-color-disabled - Disabled background color of the select chip * @cssprop --wcs-select-control-chip-padding-vertical - Padding vertical (top - bottom) of the select chip * @cssprop --wcs-select-control-chip-padding-horizontal - Padding horizontal (left - right) of the select chip * @cssprop --wcs-select-control-chip-line-height - Line height of the select chip * @cssprop --wcs-select-control-chip-border-radius - Border radius of the select chip * @cssprop --wcs-select-overlay-max-height - Max height of the select overlay * @cssprop --wcs-select-overlay-background-color - Background color of the select overlay * @cssprop --wcs-select-overlay-border-width - Border width of the select overlay * @cssprop --wcs-select-overlay-border-color - Border color of the select overlay * @cssprop --wcs-select-overlay-border-radius - Border radius of the overlay */ interface WcsSelect { /** * If `true`, the select acts as an autocomplete field to filter your results. */ "autocomplete": boolean; /** * If `true`, selected items are shown in chips mode. */ "chips": boolean; /** * Close the component. */ "close": () => Promise; /** * Function used to compare options, default : deep comparison. */ "compareWith"?: (optionValue: any, selectedValue: any) => boolean; /** * If `true`, the user cannot interact with the select. */ "disabled": boolean; /** * **Only works with `autocomplete` mode.** Customizable sort function to change the comparison of values. If not provided, uses the default behavior : `option.textContent.toLowerCase().startsWith(filter.toLowerCase())` */ "filterFn": WcsSelectFilterFn; /** * If `true`, the user can select multiple values at once. */ "multiple": boolean; /** * The name of the control, which is submitted with the form data. */ "name"?: string; /** * Open the component. */ "open": () => Promise; /** * The text to display when the select is empty. */ "placeholder"?: string | null; /** * If `true`, the user must fill in a value before submitting a form. */ "required": boolean; /** * **Only works with `autocomplete` mode.** If `true`, the server mode disables the client-side filtering on your select and allows you to handle which options should be present in your DOM. */ "serverMode": boolean; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; /** * Specify the size (height) of the select. */ "size": WcsSelectSize; /** * The currently selected value. */ "value"?: any | null; } /** * The select option is a subcomponent of `wcs-select` that represents a single option in a select list. * @cssprop --wcs-select-option-background-color-default - Default background color of the option * @cssprop --wcs-select-option-background-color-hover - Background color of the option when hovered * @cssprop --wcs-select-option-background-color-press - Background color of the option when pressed * @cssprop --wcs-select-option-background-color-selected - Background color of the option when selected * @cssprop --wcs-select-option-background-color-selected-hover - Background color of the option when selected and hovered * @cssprop --wcs-select-option-background-color-selected-press - Background color of the option when selected and pressed * @cssprop --wcs-select-option-background-color-selected-disabled - Background color of the option when selected and disabled * @cssprop --wcs-select-option-background-color-focus - Background color of the option when focused * @cssprop --wcs-select-option-border-color-focus - Border color for autocomplete mode * @cssprop --wcs-select-option-border-width-focus - Border width for autocomplete mode * @cssprop --wcs-select-option-border-style-focus - Border style of the option when focused * @cssprop --wcs-select-option-height - Height of the option * @cssprop --wcs-select-option-padding-horizontal - Horizontal padding of the option * @cssprop --wcs-select-option-padding-vertical - Vertical padding of the option * @cssprop --wcs-select-option-text-font-size - Font size of the option text * @cssprop --wcs-select-option-text-font-weight - Font weight of the option text * @cssprop --wcs-select-option-text-color-default - Default color of the option text * @cssprop --wcs-select-option-text-color-focus - Color of the option text when focused * @cssprop --wcs-select-option-text-color-hover - Color of the option text when hovered * @cssprop --wcs-select-option-text-color-selected - Color of the option text when selected * @cssprop --wcs-select-option-text-color-disabled - Color of the option text when disabled * @cssprop --wcs-select-option-checkbox-color - Color of the checkbox * @cssprop --wcs-select-option-gap - Gap between the checkbox and the text * @cssprop --wcs-select-option-transition-duration - Duration of the transition */ interface WcsSelectOption { /** * Chip's background color. */ "chipBackgroundColor"?: string; /** * Chip's displayed text color. */ "chipColor"?: string; /** * Whether this option can be selected. */ "disabled": boolean; /** * This property mustn't be set by hand, it is used by the `wcs-select` component. Applies a highlight design on the option for autocomplete mode. * @ignore */ "highlighted": boolean; /** * This property mustn't be set by hand, it is used by the `wcs-select` component. If you want a multiple select, set `multiple` attribute on the parent select instead. * @ignore */ "multiple": boolean; /** * Whether this option is selected. */ "selected": boolean; /** * The option value, not what's displayed, use inner text instead. */ "value"?: any; } /** * Use a skeleton circle as a placeholder round images, illustrations or components * @cssprop --wcs-skeleton-circle-border-radius - Border radius of the circle * @cssprop --wcs-skeleton-height - _(Shared among all skeleton types)_
Height of the skeleton * @cssprop --wcs-skeleton-min-height - _(Shared among all skeleton types)_
Minimum height of the skeleton * @cssprop --wcs-skeleton-width - _(Shared among all skeleton types)_
Width of the skeleton * @cssprop --wcs-skeleton-background-color - _(Shared among all skeleton types)_
Background color of the skeleton (default is a gradient) * @cssprop --wcs-skeleton-animation-duration - _(Shared among all skeleton types)_
Duration of the skeleton animation, if applicable */ interface WcsSkeletonCircle { /** * Specifies the animation of the skeleton */ "animation": WcsSkeletonAnimation; /** * Specifies the radius of the circle in px */ "radius": number; } /** * Use a skeleton rectangle as a placeholder for large images or square-shaped components * @cssprop --wcs-skeleton-border-radius - Border-radius of the skeleton. If not overridden, depends on the `rounded` attribute. * @cssprop --wcs-skeleton-height - _(Shared among all skeleton types)_
Height of the skeleton * @cssprop --wcs-skeleton-min-height - _(Shared among all skeleton types)_
Minimum height of the skeleton * @cssprop --wcs-skeleton-width - _(Shared among all skeleton types)_
Width of the skeleton * @cssprop --wcs-skeleton-background-color - _(Shared among all skeleton types)_
Background color of the skeleton (default is a gradient) * @cssprop --wcs-skeleton-animation-duration - _(Shared among all skeleton types)_
Duration of the skeleton animation, if applicable */ interface WcsSkeletonRectangle { /** * Specifies the animation of the skeleton */ "animation": WcsSkeletonAnimation; /** * Specifies the height of the skeleton (can be any valid CSS value) */ "height": CssTypes.Height; /** * Adds a border radius on the skeleton if true */ "rounded": boolean; /** * Specifies the width of the skeleton (can be any valid CSS value) */ "width": CssTypes.Width; } /** * Use a skeleton text as a placeholder for titles or paragraphs. * @cssprop --wcs-skeleton-text-height - Height of the skeleton text * @cssprop --wcs-skeleton-text-height-h1 - Height of the skeleton text for heading 1 * @cssprop --wcs-skeleton-text-height-h2 - Height of the skeleton text for heading 2 * @cssprop --wcs-skeleton-text-height-h3 - Height of the skeleton text for heading 3 * @cssprop --wcs-skeleton-text-height-body - Height of the skeleton text for body * @cssprop --wcs-skeleton-text-height-caption - Height of the skeleton text for caption * @cssprop --wcs-skeleton-height - _(Shared among all skeleton types)_
Height of the skeleton * @cssprop --wcs-skeleton-min-height - _(Shared among all skeleton types)_
Minimum height of the skeleton * @cssprop --wcs-skeleton-width - _(Shared among all skeleton types)_
Width of the skeleton * @cssprop --wcs-skeleton-background-color - _(Shared among all skeleton types)_
Background color of the skeleton (default is a gradient) * @cssprop --wcs-skeleton-animation-duration - _(Shared among all skeleton types)_
Duration of the skeleton animation, if applicable */ interface WcsSkeletonText { /** * Specifies the animation of the skeleton */ "animation": WcsSkeletonAnimation; /** * Specifies the line height of the text skeleton */ "height": 'h1' | 'h2' | 'h3' | 'caption' | 'body'; } /** * The spinner component is visual indicator that showing a process is happening in the background but the interface is * not yet ready for interaction. * If your page structure is simple or the loading time is long (> 300ms), use [wcs-skeleton](.?path=/docs/components-skeleton--documentation) instead. * @cssprop --wcs-spinner-dashed-background-circle - The color of the dashed circle in the background * @cssprop --wcs-spinner-rotating-circle-color - The color of the rotating circle * @cssprop --wcs-spinner-rotate-animation-duration - The duration of the rotation animation * @cssprop --wcs-spinner-dashed-animation-duration - The duration of the dash animation * @cssprop --wcs-spinner-growing-animation-duration - The duration of the growing animation */ interface WcsSpinner { /** * Indicates the spinner display mode. Accepted values: `border` or `growing` */ "mode": WcsSpinnerMode; } /** * The switch component is a control used to switch between on and off state. * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected * @cssprop --wcs-switch-height - Height of the switch * @cssprop --wcs-switch-width - Width of the switch * @cssprop --wcs-switch-border-radius - Border radius of the switch * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left) * @cssprop --wcs-switch-dot-size - Size of the dot * @cssprop --wcs-switch-gap - Gap between the switch and the text */ interface WcsSwitch { /** * If `true`, the switch is selected. */ "checked": boolean; /** * Specify whether the switch is disabled or not. */ "disabled": boolean; /** * Get the label text */ "getLabel": () => Promise; /** * Specifie the alignment of the switch with the label content */ "labelAlignment": SwitchLabelAlignment; "name": string; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * Tab content component. * Use this component to specify the content of a component. */ interface WcsTab { /** * The header you want to be displayed for this tab. */ "header": string; /** * The id of the tab. It should be unique. */ "itemKey": any; } /** * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`. * ## Accessibility guidelines πŸ’‘ * > - Mobile display should be used for narrower screens (automatically set by default). * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator * @cssprop --wcs-tabs-color-default - Text color of the tabs * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed * @cssprop --wcs-tabs-border-radius - Border radius of the tabs * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected * @cssprop --wcs-tabs-padding-top - Padding top of the tabs * @cssprop --wcs-tabs-padding-right - Padding right of the tabs * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs * @cssprop --wcs-tabs-padding-left - Padding left of the tabs * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px) * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay */ interface WcsTabs { /** * Tab headers alignment. */ "align": WcsTabsAlignment; /** * Description is used to provide aria-label for the tabs container which has `role="tablist"`. */ "description": string; /** * Determines if tabs header should have a border at the bottom */ "gutter": boolean; /** * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to separately render the tab content. */ "headersOnly": boolean; /** * Current selected tab index. Starts at 0. */ "selectedIndex": number; "selectedKey": any; "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise; } /** * Mainly inspired from Ionic Textarea Component. * ## Accessibility guidelines πŸ’‘ * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself. * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label. * @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled * @cssprop --wcs-textarea-background-color - Background color of the textarea * @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state * @cssprop --wcs-textarea-border-color-focus - Border color of the textarea when focused * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused * @cssprop --wcs-textarea-min-height - Min height of the textarea component * @cssprop --wcs-textarea-max-height - Max height of the textarea component * @cssprop --wcs-textarea-padding-top - Padding top of the textarea * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea * @cssprop --wcs-textarea-padding-left - Padding left of the textarea * @cssprop --wcs-textarea-padding-right - Padding right of the textarea * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix) */ interface WcsTextarea { /** * If `true`, the element height will increase based on the value. */ "autoGrow": boolean; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ "autocapitalize": string; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ "autofocus": boolean; /** * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. Note : at the moment, modifying the width is only possible if you add some custom CSS to the component, for example by overriding the `width` CSS property. See the Resize section for an example on how to do it. */ "cols"?: number; /** * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. */ "debounce": number; /** * If `true`, the user cannot interact with the textarea. */ "disabled": boolean; /** * A hint to the browser for which enter key to display. */ "enterkeyhint"?: WcsTextareaEnterKeyHint; /** * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14. */ "fireFocusEvents": boolean; /** * This method make the textarea automatically adopt the size of the content without a scroll bar */ "fitContent": () => Promise; /** * Returns the native `