UNPKG

dap-design-system

Version:

Official design system for the DÁP (www.dap.gov.hu)

931 lines (891 loc) 363 kB
import type { DefineComponent } from "vue"; import type { DapDSAccordion } from "../../components/accordion/accordion.component.js"; import type { DapDSAccordionGroup } from "../../components/accordion-group/accordion-group.component.js"; import type { DapDSAvatarGroup } from "../../components/avatar-group/avatar-group.component.js"; import type { DapDSBadge } from "../../components/badge/badge.component.js"; import type { DapDSAnchorHeading } from "../../components/anchor-heading/anchor-heading.component.js"; import type { DapDSAvatar } from "../../components/avatar/avatar.component.js"; import type { DapDSBanner } from "../../components/banner/banner.component.js"; import type { DapDSBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js"; import type { DapDSBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js"; import type { DapDSButton } from "../../components/button/button.component.js"; import type { DapDSCalendarCell } from "../../components/calendar-cell/calendar-cell.component.js"; import type { DapDSCalendar } from "../../components/calendar/calendar.component.js"; import type { DapDSCallout } from "../../components/callout/callout.component.js"; import type { DapDSCheckbox } from "../../components/checkbox/checkbox.component.js"; import type { DapDSCardActions } from "../../components/card-actions/card-actions.component.js"; import type { DapDSCardContent } from "../../components/card-content/card-content.component.js"; import type { DapDSCardImage } from "../../components/card-image/card-image.component.js"; import type { DapDSCardSubtitle } from "../../components/card-subtitle/card-subtitle.component.js"; import type { DapDSCardTitle } from "../../components/card-title/card-title.component.js"; import type { DapDSCard } from "../../components/card/card.component.js"; import type { DapDSCombobox } from "../../components/combobox/combobox.component.js"; import type { DapDSCommandGroup } from "../../components/command-group/command-group.component.js"; import type { DapDSCommandItem } from "../../components/command-item/command-item.component.js"; import type { DapDSCommand } from "../../components/command/command.component.js"; import type { DapDSContentSwitcherItem } from "../../components/content-switcher-item/content-switcher-item.component.js"; import type { DapDSContentSwitcher } from "../../components/content-switcher/content-switcher.component.js"; import type { DapDSCopyBoxInput } from "../../components/copybox-input/copybox-input.component.js"; import type { DapDSDAPBadge } from "../../components/dap-badge/dap-badge.component.js"; import type { DapDSDataTable } from "../../components/datatable/datatable.component.js"; import type { DapDSDatePicker } from "../../components/datepicker/datepicker.component.js"; import type { DapDSDivider } from "../../components/divider/divider.component.js"; import type { DapDSFeedback } from "../../components/feedback/feedback.component.js"; import type { DapDSFileInputListItem } from "../../components/file-input-list-item/file-input-list-item.component.js"; import type { DapDSFileInputList } from "../../components/file-input-list/file-input-list.component.js"; import type { DapDSFileInput } from "../../components/file-input/file-input.component.js"; import type { DapDSIcon } from "../../components/icon/icon.component.js"; import type { DapDSIconButton } from "../../components/icon-button/icon-button.component.js"; import type { DapDSInput } from "../../components/input/input.component.js"; import type { DapDSLabel } from "../../components/label/label.component.js"; import type { DapDSLink } from "../../components/link/link.component.js"; import type { DapDSListItem } from "../../components/list-item/list-item.component.js"; import type { DapDSModal } from "../../components/modal/modal.component.js"; import type { DapDSNavigationMenuItem } from "../../components/navigation-menu-item/navigation-menu-item.component.js"; import type { DapDSNavigationMenu } from "../../components/navigation-menu/navigation-menu.component.js"; import type { DapDSNumberInput } from "../../components/number-input/number-input.component.js"; import type { DapDSOfficialWebsiteBanner } from "../../components/official-website-banner/official-website-banner.component.js"; import type { DapDSNotificationBadge } from "../../components/notification-badge/notification-badge.component.js"; import type { DapDSOptionItem } from "../../components/option-item/option-item.component.js"; import type { DapDSOptionList } from "../../components/option-list/option-list.component.js"; import type { DapDSOverlay } from "../../components/overlay/overlay.component.js"; import type { DapDSPager } from "../../components/pager/pager.component.js"; import type { DapDSPasswordInput } from "../../components/password-input/password-input.component.js"; import type { DapDSPopup } from "../../components/popup/popup.component.js"; import type { DapDSRadioButton } from "../../components/radio-button/radio-button.component.js"; import type { DapDSRating } from "../../components/rating/rating.component.js"; import type { DapDSScrollArea } from "../../components/scroll-area/scroll-area.component.js"; import type { DapDSSearch } from "../../components/search/search.component.js"; import type { DapDSSelect } from "../../components/select/select.component.js"; import type { DapDSSideNavGroup } from "../../components/sidenav-group/sidenav-group.component.js"; import type { DapDSSideNavItem } from "../../components/sidenav-item/sidenav-item.component.js"; import type { DapDSSideNav } from "../../components/sidenav/sidenav.component.js"; import type { DapDSSkeleton } from "../../components/skeleton/skeleton.component.js"; import type { DapDSSkipLink } from "../../components/skip-link/skip-link.component.js"; import type { DapDSSnackbarMessage } from "../../components/snackbar-message/snackbar-message.component.js"; import type { DapDSSnackbar } from "../../components/snackbar/snackbar.component.js"; import type { DapDSSpinner } from "../../components/spinner/spinner.component.js"; import type { DapDSStack } from "../../components/stack/stack.component.js"; import type { DapDSSwitch } from "../../components/switch/switch.component.js"; import type { DapDSTabGroup } from "../../components/tab-group/tab-group.component.js"; import type { DapDSTab } from "../../components/tab/tab.component.js"; import type { DapDSTableCell } from "../../components/table-cell/table-cell.component.js"; import type { DapDSTableHeader } from "../../components/table-header/table-header.component.js"; import type { DapDSTableRow } from "../../components/table-row/table-row.component.js"; import type { DapDSTable } from "../../components/table/table.component.js"; import type { DapDSTextarea } from "../../components/textarea/textarea.component.js"; import type { DapDSTimelineItem } from "../../components/timeline-item/timeline-item.component.js"; import type { DapDSTimeline } from "../../components/timeline/timeline.component.js"; import type { DapDSTOC } from "../../components/toc/toc.component.js"; import type { DapDSToggleButton } from "../../components/toggle-button/toggle-button.component.js"; import type { DapDSTooltip } from "../../components/tooltip/tooltip.component.js"; import type { DapDSTray } from "../../components/tray/tray.component.js"; import type { DapDSTypography } from "../../components/typography/typography.component.js"; import type { DapDSFormLabel } from "../../components/form-label/form-label.component.js"; import type { DapDSInputGroup } from "../../components/input-group/input-group.component.js"; import type { DapDSRadioGroup } from "../../components/radio-group/radio-group.component.js"; import type { ArrowsArrowDownLine } from "../../components/icon-arrow-down-line/icon-arrow-down-line.component.js"; import type { ArrowsArrowDownSFill } from "../../components/icon-arrow-down-s-fill/icon-arrow-down-s-fill.component.js"; import type { ArrowsArrowDownSLine } from "../../components/icon-arrow-down-s-line/icon-arrow-down-s-line.component.js"; import type { ArrowsArrowLeftDownLine } from "../../components/icon-arrow-left-down-line/icon-arrow-left-down-line.component.js"; import type { ArrowsArrowLeftLLine } from "../../components/icon-arrow-left-l-line/icon-arrow-left-l-line.component.js"; import type { ArrowsArrowLeftLine } from "../../components/icon-arrow-left-line/icon-arrow-left-line.component.js"; import type { ArrowsArrowLeftSFill } from "../../components/icon-arrow-left-s-fill/icon-arrow-left-s-fill.component.js"; import type { ArrowsArrowLeftSLine } from "../../components/icon-arrow-left-s-line/icon-arrow-left-s-line.component.js"; import type { ArrowsArrowLeftUpLine } from "../../components/icon-arrow-left-up-line/icon-arrow-left-up-line.component.js"; import type { ArrowsArrowRightDownLine } from "../../components/icon-arrow-right-down-line/icon-arrow-right-down-line.component.js"; import type { ArrowsArrowRightLLine } from "../../components/icon-arrow-right-l-line/icon-arrow-right-l-line.component.js"; import type { ArrowsArrowRightLine } from "../../components/icon-arrow-right-line/icon-arrow-right-line.component.js"; import type { ArrowsArrowRightSFill } from "../../components/icon-arrow-right-s-fill/icon-arrow-right-s-fill.component.js"; import type { ArrowsArrowRightSLine } from "../../components/icon-arrow-right-s-line/icon-arrow-right-s-line.component.js"; import type { ArrowsArrowRightUpLine } from "../../components/icon-arrow-right-up-line/icon-arrow-right-up-line.component.js"; import type { ArrowsArrowUpLine } from "../../components/icon-arrow-up-line/icon-arrow-up-line.component.js"; import type { ArrowsArrowUpSFill } from "../../components/icon-arrow-up-s-fill/icon-arrow-up-s-fill.component.js"; import type { ArrowsArrowUpSLine } from "../../components/icon-arrow-up-s-line/icon-arrow-up-s-line.component.js"; import type { ArrowsExpandUpDownFill } from "../../components/icon-expand-up-down-fill/icon-expand-up-down-fill.component.js"; import type { BuildingsHome6Line } from "../../components/icon-home-6-line/icon-home-6-line.component.js"; import type { BusinessCalendarLine } from "../../components/icon-calendar-line/icon-calendar-line.component.js"; import type { DesignEditLine } from "../../components/icon-edit-line/icon-edit-line.component.js"; import type { DesignToolsLine } from "../../components/icon-tools-line/icon-tools-line.component.js"; import type { DeviceComputerLine } from "../../components/icon-computer-line/icon-computer-line.component.js"; import type { DocumentClipboardLine } from "../../components/icon-clipboard-line/icon-clipboard-line.component.js"; import type { DocumentFileCopyLine } from "../../components/icon-file-copy-line/icon-file-copy-line.component.js"; import type { DocumentFileTextLine } from "../../components/icon-file-text-line/icon-file-text-line.component.js"; import type { DocumentFolderLine } from "../../components/icon-folder-line/icon-folder-line.component.js"; import type { DocumentFolderOpenLine } from "../../components/icon-folder-open-line/icon-folder-open-line.component.js"; import type { HealthHeartFill } from "../../components/icon-heart-fill/icon-heart-fill.component.js"; import type { HealthHeartLine } from "../../components/icon-heart-line/icon-heart-line.component.js"; import type { OthersCookieLine } from "../../components/icon-cookie-line/icon-cookie-line.component.js"; import type { UserUserFill } from "../../components/icon-user-fill/icon-user-fill.component.js"; import type { UserUserLine } from "../../components/icon-user-line/icon-user-line.component.js"; import type { SystemAddLine } from "../../components/icon-add-line/icon-add-line.component.js"; import type { SystemAlertFill } from "../../components/icon-alert-fill/icon-alert-fill.component.js"; import type { SystemAlertLine } from "../../components/icon-alert-line/icon-alert-line.component.js"; import type { SystemCheckLine } from "../../components/icon-check-line/icon-check-line.component.js"; import type { SystemCheckLine2 } from "../../components/icon-check-line2/icon-check-line2.component.js"; import type { SystemCheckboxBlankCircleFill } from "../../components/icon-checkbox-blank-circle-fill/icon-checkbox-blank-circle-fill.component.js"; import type { SystemCheckboxBlankCircleFillCheck } from "../../components/icon-checkbox-blank-circle-fill-check/icon-checkbox-blank-circle-fill-check.component.js"; import type { SystemCheckboxCircleFill } from "../../components/icon-checkbox-circle-fill/icon-checkbox-circle-fill.component.js"; import type { SystemCheckboxBlankCircleLine } from "../../components/icon-checkbox-blank-circle-line/icon-checkbox-blank-circle-line.component.js"; import type { SystemCheckboxCircleLine } from "../../components/icon-checkbox-circle-line/icon-checkbox-circle-line.component.js"; import type { SystemCloseCircleFill } from "../../components/icon-close-circle-fill/icon-close-circle-fill.component.js"; import type { SystemCloseCircleLine } from "../../components/icon-close-circle-line/icon-close-circle-line.component.js"; import type { SystemCloseFill } from "../../components/icon-close-fill/icon-close-fill.component.js"; import type { SystemCloseLine } from "../../components/icon-close-line/icon-close-line.component.js"; import type { SystemDeleteBinFill } from "../../components/icon-delete-bin-fill/icon-delete-bin-fill.component.js"; import type { SystemDeleteBinLine } from "../../components/icon-delete-bin-line/icon-delete-bin-line.component.js"; import type { SystemDownloadLine } from "../../components/icon-download-line/icon-download-line.component.js"; import type { SystemErrorWarningFill } from "../../components/icon-error-warning-fill/icon-error-warning-fill.component.js"; import type { SystemErrorWarningLine } from "../../components/icon-error-warning-line/icon-error-warning-line.component.js"; import type { SystemExternalLinkLine } from "../../components/icon-external-link-line/icon-external-link-line.component.js"; import type { SystemEyeLine } from "../../components/icon-eye-line/icon-eye-line.component.js"; import type { SystemEyeOffLine } from "../../components/icon-eye-off-line/icon-eye-off-line.component.js"; import type { SystemForbidFill } from "../../components/icon-forbid-fill/icon-forbid-fill.component.js"; import type { SystemInformation2Fill } from "../../components/icon-information-2-fill/icon-information-2-fill.component.js"; import type { SystemInformationFill } from "../../components/icon-information-fill/icon-information-fill.component.js"; import type { SystemInformationLine } from "../../components/icon-information-line/icon-information-line.component.js"; import type { SystemLightbulbFill } from "../../components/icon-lightbulb-fill/icon-lightbulb-fill.component.js"; import type { SystemLoadingSpinner } from "../../components/icon-loading-spinner/icon-loading-spinner.component.js"; import type { SystemLockFill } from "../../components/icon-lock-fill/icon-lock-fill.component.js"; import type { SystemLockLine } from "../../components/icon-lock-line/icon-lock-line.component.js"; import type { SystemMenuLine } from "../../components/icon-menu-line/icon-menu-line.component.js"; import type { SystemMenuLineS } from "../../components/icon-menu-line-s/icon-menu-line-s.component.js"; import type { SystemMore2Line } from "../../components/icon-more-2-line/icon-more-2-line.component.js"; import type { SystemMoreLine } from "../../components/icon-more-line/icon-more-line.component.js"; import type { SystemSearchLine } from "../../components/icon-search-line/icon-search-line.component.js"; import type { SystemShareLine } from "../../components/icon-share-line/icon-share-line.component.js"; import type { SystemShieldCheckFill } from "../../components/icon-shield-check-fill/icon-shield-check-fill.component.js"; import type { SystemShieldCheckLine } from "../../components/icon-shield-check-line/icon-shield-check-line.component.js"; import type { SystemStarFill } from "../../components/icon-star-fill/icon-star-fill.component.js"; import type { SystemSubtractLine } from "../../components/icon-subtract-line/icon-subtract-line.component.js"; import type { SystemSubtractLine2 } from "../../components/icon-subtract-line2/icon-subtract-line2.component.js"; import type { SystemUpload2Fill } from "../../components/icon-upload-2-fill/icon-upload-2-fill.component.js"; import type { SystemUpload2Line } from "../../components/icon-upload-2-line/icon-upload-2-line.component.js"; import type { SystemUploadLine } from "../../components/icon-upload-line/icon-upload-line.component.js"; type DapDSAccordionProps = { /** The size of the accordion. Default is `sm`. */ size?: DapDSAccordion["size"]; /** The heading level of the accordion. Default is `4`. */ headingLevel?: DapDSAccordion["headingLevel"]; /** Whether the accordion is opened. Default is `false`. */ opened?: DapDSAccordion["opened"]; /** The location of the icon. Default is `right`. */ iconLocation?: DapDSAccordion["iconLocation"]; /** The variant of the accordion. */ variant?: DapDSAccordion["variant"]; /** Whether the accordion is the last item. */ lastItem?: DapDSAccordion["lastItem"]; /** Whether the accordion is disabled. */ disabled?: DapDSAccordion["disabled"]; /** Whether the accordion is in loading state. */ loading?: DapDSAccordion["loading"]; /** Event fired when the accordion is opened. */ "ondds-opened"?: (e: CustomEvent<{ open: boolean; item: AccordionBaseElement }>) => void; /** Event fired when the accordion is closed. */ "ondds-closed"?: (e: CustomEvent<{ open: boolean; item: AccordionBaseElement }>) => void; }; type DapDSAccordionGroupProps = { /** Whether to close other accordions when one is opened. */ autoClose?: DapDSAccordionGroup["autoClose"]; /** The variant of the accordion */ variant?: DapDSAccordionGroup["variant"]; }; type DapDSAvatarGroupProps = { /** The size of avatars in the group */ size?: DapDSAvatarGroup["size"]; /** Layout type for the avatar group */ layout?: DapDSAvatarGroup["layout"]; /** Maximum number of avatars to show before showing overflow */ max?: DapDSAvatarGroup["max"]; /** Whether to show the total count in overflow indicator */ "show-total"?: DapDSAvatarGroup["showTotal"]; /** Interactive overflow indicator */ "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]; /** Accessible label for the avatar group */ label?: DapDSAvatarGroup["label"]; /** Accessible label for the overflow indicator */ "overflow-label"?: DapDSAvatarGroup["overflowLabel"]; /** Fired when the overflow indicator is clicked. */ "ondds-overflow-click"?: (e: CustomEvent<never>) => void; }; type DapDSBadgeProps = { /** The type of the badge */ type?: DapDSBadge["type"]; /** The size of the badge */ size?: DapDSBadge["size"]; /** The icon of the badge, this is a name of a built in icon */ icon?: DapDSBadge["icon"]; /** Whether the badge represents dynamic content that should announce changes */ live?: DapDSBadge["live"]; }; type DapDSAnchorHeadingProps = { /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */ variant?: DapDSAnchorHeading["variant"]; /** The label of the heading. */ label?: DapDSAnchorHeading["label"]; /** */ elementId?: DapDSAnchorHeading["elementId"]; /** */ anchorTitle?: DapDSAnchorHeading["anchorTitle"]; }; type DapDSAvatarProps = { /** The size of the avatar */ size?: DapDSAvatar["size"]; /** The shape of the avatar */ shape?: DapDSAvatar["shape"]; /** The variant type of the avatar */ variant?: DapDSAvatar["variant"]; /** The source of the avatar image */ src?: DapDSAvatar["src"]; /** The alt text of the avatar */ alt?: DapDSAvatar["alt"]; /** The initials to display when variant is 'initials' */ initials?: DapDSAvatar["initials"]; /** Accessible label for the avatar */ label?: DapDSAvatar["label"]; /** Loading state indicator */ loading?: DapDSAvatar["loading"]; /** Whether the avatar is interactive (clickable) */ interactive?: DapDSAvatar["interactive"]; /** The width of the avatar. This will override the size */ width?: DapDSAvatar["width"]; /** The height of the avatar. This will override the size */ height?: DapDSAvatar["height"]; /** Fired when the avatar is clicked (only when interactive). */ "ondds-click"?: (e: CustomEvent<never>) => void; /** Fired when the image loads successfully. */ "ondds-load"?: (e: CustomEvent<never>) => void; /** Fired when the image fails to load. */ "ondds-error"?: (e: CustomEvent<never>) => void; }; type DapDSBannerProps = { /** The variant of the banner */ variant?: DapDSBanner["variant"]; /** Whether the banner is closeable */ closeable?: DapDSBanner["closeable"]; /** State of the banner. If false banner is hidden */ opened?: DapDSBanner["opened"]; /** The aria-label for the close button */ closeButtonLabel?: DapDSBanner["closeButtonLabel"]; /** The icon of the banner, this is a name of a built icon icon */ icon?: DapDSBanner["icon"]; /** Event fired when the banner is closed. */ "ondds-close"?: (e: CustomEvent<{ void }>) => void; }; type DapDSBreadcrumbProps = { /** */ variant?: DapDSBreadcrumb["variant"]; /** Mobile version of the breadcrumb */ mobile?: DapDSBreadcrumb["mobile"]; /** The aria-labelledby of the breadcrumb */ "aria-labelledby"?: DapDSBreadcrumb["ariaLabelledBy"]; }; type DapDSBreadcrumbItemProps = { /** The URL of the breadcrumb item. */ href?: DapDSBreadcrumbItem["href"]; /** The target of the breadcrumb item. */ target?: DapDSBreadcrumbItem["target"]; /** The rel of the breadcrumb item link. */ rel?: DapDSBreadcrumbItem["rel"]; /** Whether the breadcrumb item is disabled. */ disabled?: DapDSBreadcrumbItem["disabled"]; /** The variant of the breadcrumb item. */ variant?: DapDSBreadcrumbItem["variant"]; }; type DapDSButtonProps = { /** The visual style variant of the button */ variant?: DapDSButton["variant"]; /** The size of the button affecting padding and font size */ size?: DapDSButton["size"]; /** Whether the button is in loading state, showing a spinner and disabling interaction */ loading?: DapDSButton["loading"]; /** Whether the button represents a destructive action (applies danger styling) */ danger?: DapDSButton["danger"]; /** The shape of the button - use 'circle' for icon-only buttons */ shape?: DapDSButton["shape"]; /** The HTML type attribute for form interaction */ htmlType?: DapDSButton["htmlType"]; /** The URL to navigate to. When present, the button renders as an anchor element */ href?: DapDSButton["href"]; /** The target attribute for link navigation */ target?: DapDSButton["target"]; /** The rel attribute for link security and behavior */ rel?: DapDSButton["rel"]; /** The ID of the element controlled by this button */ "aria-controls"?: DapDSButton["ariaControls"]; /** The ID of the element that describes the button */ "aria-describedby"?: DapDSButton["ariaDescribedBy"]; /** Controls loading timeout in milliseconds */ loadingTimeout?: DapDSButton["loadingTimeout"]; /** Whether the button is active */ active?: DapDSButton["active"]; /** Emitted when the loading timeout is reached */ "ondds-loading-timeout"?: (e: CustomEvent<never>) => void; }; type DapDSCalendarCellProps = { /** Whether the calendar cell is selected. */ selected?: DapDSCalendarCell["selected"]; /** Whether the calendar cell is disabled. */ disabledDay?: DapDSCalendarCell["disabledDay"]; /** Whether the calendar cell is today. */ today?: DapDSCalendarCell["today"]; /** Whether the calendar cell is out of range. */ outOfRange?: DapDSCalendarCell["outOfRange"]; /** Whether the calendar cell is a date header. */ header?: DapDSCalendarCell["header"]; /** Whether the calendar cell is focused. */ focused?: DapDSCalendarCell["focused"]; /** The value of the calendar cell. */ value?: DapDSCalendarCell["value"]; /** */ label?: DapDSCalendarCell["label"]; /** */ focusElement?: DapDSCalendarCell["focusElement"]; }; type DapDSCalendarProps = { /** The locale of the calendar. */ locale?: DapDSCalendar["locale"]; /** The value of the calendar. */ value?: DapDSCalendar["value"]; /** The current visible date of the calendar. Only the month and year are considered. */ currentDate?: DapDSCalendar["currentDate"]; /** The minimum date of the calendar. Only the month and year are considered. */ minDate?: DapDSCalendar["minDate"]; /** The maximum date of the calendar. Only the month and year are considered. */ maxDate?: DapDSCalendar["maxDate"]; /** The function to determine if the date is disabled. */ disabledDate?: DapDSCalendar["disabledDate"]; /** */ startDate?: DapDSCalendar["startDate"]; /** */ endDate?: DapDSCalendar["endDate"]; /** Fired when the calendar value changes. */ "ondds-change"?: (e: CustomEvent<{ value: Dayjs }>) => void; }; type DapDSCalloutProps = { /** The variant of the callout */ variant?: DapDSCallout["variant"]; /** The alignment of the callout. Can be `vertical` or `horizontal`. */ alignment?: DapDSCallout["alignment"]; /** The strongness of the callout. Can be `subtle`, `base`, `medium`, or `strong`. */ shade?: DapDSCallout["shade"]; /** The border of the callout */ noBorder?: DapDSCallout["noBorder"]; /** If the callout has a close button */ closeable?: DapDSCallout["closeable"]; /** The header of the callout */ title?: DapDSCallout["title"]; /** The label of the close button */ closeButtonLabel?: DapDSCallout["closeButtonLabel"]; /** If the callout is opened */ opened?: DapDSCallout["opened"]; /** Fired when the close button is clicked. */ "ondds-close"?: (e: CustomEvent<{ void }>) => void; }; type DapDSCheckboxProps = { /** Whether the checkbox is indeterminate */ indeterminate?: DapDSCheckbox["indeterminate"]; /** Whether the checkbox should prevent the default action */ preventDefault?: DapDSCheckbox["preventDefault"]; /** This sets up border around the checkbox, when true. */ border?: DapDSCheckbox["border"]; /** The type of the checkbox */ type?: DapDSCheckbox["type"]; /** */ focusElement?: DapDSCheckbox["focusElement"]; /** The name of the checkbox. */ name?: DapDSCheckbox["name"]; /** The value of the checkbox. */ value?: DapDSCheckbox["value"]; /** Whether the checkbox is checked. */ checked?: DapDSCheckbox["checked"]; /** The label of the checkbox. */ label?: DapDSCheckbox["label"]; /** The description of the checkbox. */ description?: DapDSCheckbox["description"]; /** Whether the checkbox is disabled. */ disabled?: DapDSCheckbox["disabled"]; /** Whether the checkbox is required. */ required?: DapDSCheckbox["required"]; /** The size of the checkbox. */ size?: DapDSCheckbox["size"]; /** The placement of the label. */ labelPlacement?: DapDSCheckbox["labelPlacement"]; /** The placement of the description. */ descriptionPlacement?: DapDSCheckbox["descriptionPlacement"]; /** The weight of the label. */ subtle?: DapDSCheckbox["subtle"]; /** The feedback of the checkbox. */ feedback?: DapDSCheckbox["feedback"]; /** The feedback type of the checkbox. */ feedbackType?: DapDSCheckbox["feedbackType"]; /** The invalid state of the checkbox. */ invalid?: DapDSCheckbox["invalid"]; /** The optional state of the checkbox. */ optional?: DapDSCheckbox["optional"]; /** The optional label of the checkbox. */ optionalLabel?: DapDSCheckbox["optionalLabel"]; /** Fired when the checkbox is checked or unchecked. */ "ondds-change"?: ( e: CustomEvent<{ checked: boolean; indeterminate: boolean; value: string; disabled: boolean; type: "checkbox" }>, ) => void; /** Emitted when the checkbox loses focus. */ "ondds-blur"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the checkbox gains focus. */ "ondds-focus"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the checkbox receives input. */ "ondds-input"?: ( e: CustomEvent<{ checked: boolean; indeterminate: boolean; value: string; disabled: boolean }>, ) => void; }; type DapDSCardActionsProps = { /** Whether the card actions should be sized from the parent. */ parentSized?: DapDSCardActions["parentSized"]; /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */ spacing?: DapDSCardActions["spacing"]; /** The size of the card actions. Default is `sm`. */ size?: DapDSCardActions["size"]; }; type DapDSCardContentProps = { /** The base rendered root tag of the card content. */ renderAs?: DapDSCardContent["renderAs"]; /** Whether the card content should be sized from the parent. */ parentSized?: DapDSCardContent["parentSized"]; /** The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`. */ spacing?: DapDSCardContent["spacing"]; /** The size of the card subtitle. Default is `sm`. */ size?: DapDSCardContent["size"]; }; type DapDSCardImageProps = { /** The source of the image. */ src?: DapDSCardImage["src"]; /** The alt text of the image. */ alt?: DapDSCardImage["alt"]; /** The width of the image. */ width?: DapDSCardImage["width"]; /** The height of the image. */ height?: DapDSCardImage["height"]; }; type DapDSCardSubtitleProps = { /** The base rendered root tag of the card subtitle. */ renderAs?: DapDSCardSubtitle["renderAs"]; /** Whether the card subtitle should be sized from the parent. */ parentSized?: DapDSCardSubtitle["parentSized"]; /** The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`. */ spacing?: DapDSCardSubtitle["spacing"]; /** The size of the card subtitle. Default is `sm`. */ size?: DapDSCardSubtitle["size"]; }; type DapDSCardTitleProps = { /** The base rendered root tag of the card title. */ renderAs?: DapDSCardTitle["renderAs"]; /** Whether the card title should be sized from the parent. */ parentSized?: DapDSCardTitle["parentSized"]; /** Whether the card title should have no padding. */ noPadding?: DapDSCardTitle["noPadding"]; /** The spacing of the card title. This adds a margin to the card title. Default is `top`. */ spacing?: DapDSCardTitle["spacing"]; /** The size of the card title. Default is `sm`. */ size?: DapDSCardTitle["size"]; }; type DapDSCardProps = { /** Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element. */ interactive?: DapDSCard["interactive"]; /** The render as type of the card, only applicable when interactive. */ renderAs?: DapDSCard["renderAs"]; /** Whether the card is disabled. */ disabled?: DapDSCard["disabled"]; /** Removes the border around the card */ noBorder?: DapDSCard["noBorder"]; /** Removes the padding around the card */ noPadding?: DapDSCard["noPadding"]; /** The link target of the card */ target?: DapDSCard["target"]; /** The URL of the card. */ href?: DapDSCard["href"]; /** The rel of the card link. */ rel?: DapDSCard["rel"]; /** The size of the card title. Default is `sm`. */ size?: DapDSCard["size"]; }; type DapDSComboboxProps = { /** The value of the select. */ value?: DapDSCombobox["value"]; /** The placeholder of the select. */ placeholder?: DapDSCombobox["placeholder"]; /** The placement of the select dropdown. Default is 'bottom-start'. */ placement?: DapDSCombobox["placement"]; /** Whether the select dropdown is opened. */ opened?: DapDSCombobox["opened"]; /** The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'. */ sync?: DapDSCombobox["sync"]; /** The label of the select. */ label?: DapDSCombobox["label"]; /** The description of the select. */ description?: DapDSCombobox["description"]; /** The tooltip of the select. */ tooltip?: DapDSCombobox["tooltip"]; /** The tooltip placement of the input. */ tooltipPlacement?: DapDSCombobox["tooltipPlacement"]; /** The size of the select. Default is 'md'. */ size?: DapDSCombobox["size"]; /** Whether the select is disabled. */ disabled?: DapDSCombobox["disabled"]; /** Whether the select is required. */ required?: DapDSCombobox["required"]; /** Whether the select is readonly. */ readonly?: DapDSCombobox["readonly"]; /** Whether the select is autofocus. */ autofocus?: DapDSCombobox["autofocus"]; /** The feedback content of the select. */ feedback?: DapDSCombobox["feedback"]; /** The feedback type of the select. */ feedbackType?: DapDSCombobox["feedbackType"]; /** The search mode of the select. */ searchMode?: DapDSCombobox["searchMode"]; /** Whether the combobox should open on empty results. */ openOnEmpty?: DapDSCombobox["openOnEmpty"]; /** Whether the combobox allows manual input, or free text. */ allowManualInput?: DapDSCombobox["allowManualInput"]; /** Whether the combobox should search for the selected item text. */ searchForText?: DapDSCombobox["searchForText"]; /** Whether the combobox should not complete the text. */ noTextComplete?: DapDSCombobox["noTextComplete"]; /** The aria label of the search button. */ searchButtonAriaLabel?: DapDSCombobox["searchButtonAriaLabel"]; /** Show the selected item check mark in the dropdown. 'true' or 'false' */ selectable?: DapDSCombobox["selectable"]; /** Whether the combobox open indicator should be animated. */ noAnimation?: DapDSCombobox["noAnimation"]; /** Fired when the select value changes. */ "ondds-change"?: (e: CustomEvent<{ value }>) => void; /** Emitted when the select loses focus. */ "ondds-blur"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the select gains focus. */ "ondds-focus"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the select is cleared. */ "ondds-clear"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the manual input value changes. */ "ondds-search"?: (e: CustomEvent<{ search: string }>) => void; /** Emitted when typing happens in the input. */ "ondds-input"?: (e: CustomEvent<{ input: string; originalEvent: Event }>) => void; }; type DapDSCommandGroupProps = { /** The label of the command group. */ label?: DapDSCommandGroup["label"]; /** Whether the command group is exclusive, only one item can be selected at a time. */ exclusive?: DapDSCommandGroup["exclusive"]; }; type DapDSCommandItemProps = { /** The value of the command item. */ value?: DapDSCommandItem["value"]; /** Whether the command item is disabled. */ disabled?: DapDSCommandItem["disabled"]; /** The name of the button */ name?: DapDSCommandItem["name"]; /** The Href of the button. If this present the button will be rendered as an anchor `<a></a>` element. */ href?: DapDSCommandItem["href"]; /** The target of the button */ target?: DapDSCommandItem["target"]; /** The rel of the button link. Default is `noreferrer noopener`. */ rel?: DapDSCommandItem["rel"]; /** Whether the command item is selectable. */ selectable?: DapDSCommandItem["selectable"]; /** Whether the command item is selected. */ selected?: DapDSCommandItem["selected"]; /** Whether the command item should close the command when selected. */ closeOnSelect?: DapDSCommandItem["closeOnSelect"]; /** Fired when the command item is clicked. */ "ondds-command-item-click"?: (e: CustomEvent<{ value: string; closeOnSelect: boolean }>) => void; }; type DapDSCommandProps = { /** The value of the command. */ value?: DapDSCommand["value"]; /** Whether the command popup should take full width of the screen. */ fullWidth?: DapDSCommand["fullWidth"]; /** ID of element that labels the command dropdown. */ "aria-labelledby"?: DapDSCommand["ariaLabelledBy"]; /** The placement of the popup. */ placement?: DapDSCommand["placement"]; /** Whether the popup should overflow. */ overflow?: DapDSCommand["overflow"]; /** The size of the popup. */ size?: DapDSCommand["size"]; /** The disabled state of the popup. */ disabled?: DapDSCommand["disabled"]; /** The open state of the popup. */ opened?: DapDSCommand["opened"]; /** The floating strategy of the popup. */ floatingStrategy?: DapDSCommand["floatingStrategy"]; /** The offset of the popup. */ offset?: DapDSCommand["offset"]; /** Whether the popup should sync its width with the trigger. */ sync?: DapDSCommand["sync"]; /** The maximum height of the popup. */ maxHeight?: DapDSCommand["maxHeight"]; /** The maximum width of the popup. */ maxWidth?: DapDSCommand["maxWidth"]; /** Whether the popup has an arrow. */ hasArrow?: DapDSCommand["hasArrow"]; /** Fired when the command value changes. */ "ondds-change"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when the popup is opened. */ "ondds-opened"?: (e: CustomEvent<{ void }>) => void; /** Fired when the popup is closed. */ "ondds-closed"?: (e: CustomEvent<{ void }>) => void; /** Fired when the popup should be closed. */ "ondds-close"?: (e: CustomEvent<{ void }>) => void; }; type DapDSContentSwitcherItemProps = { /** The value of the segmented control item. */ value?: DapDSContentSwitcherItem["value"]; /** The checked state of the segmented control item. */ checked?: DapDSContentSwitcherItem["checked"]; /** The disabled state of the segmented control item. */ disabled?: DapDSContentSwitcherItem["disabled"]; /** The name of the segmented control item. */ name?: DapDSContentSwitcherItem["name"]; }; type DapDSContentSwitcherProps = { /** Whether the content switcher allows multiple selections. */ multiSelect?: DapDSContentSwitcher["multiSelect"]; /** The value of the content switcher. A comma-separated list if `multiSelect` is `true`. */ value?: DapDSContentSwitcher["value"]; /** Fired when the content switcher is changed. */ "ondds-change"?: (e: CustomEvent<{ value: string; selected: boolean }>) => void; }; type DapDSCopyBoxInputProps = { /** The aria label of the copy button. */ copyButtonAriaLabel?: DapDSCopyBoxInput["copyButtonAriaLabel"]; /** */ type?: DapDSCopyBoxInput["type"]; /** The label of the input. */ label?: DapDSCopyBoxInput["label"]; /** The placeholder of the input. */ placeholder?: DapDSCopyBoxInput["placeholder"]; /** The description of the input. */ description?: DapDSCopyBoxInput["description"]; /** The tooltip of the input. */ tooltip?: DapDSCopyBoxInput["tooltip"]; /** The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`. */ tooltipPlacement?: DapDSCopyBoxInput["tooltipPlacement"]; /** The status of the input. Can be `success` or `error`. */ status?: DapDSCopyBoxInput["status"]; /** The size of the input. Default is `sm`. */ size?: DapDSCopyBoxInput["size"]; /** The name of the input. */ name?: DapDSCopyBoxInput["name"]; /** The value of the input. */ value?: DapDSCopyBoxInput["value"]; /** The disabled state of the input. Default is false. */ disabled?: DapDSCopyBoxInput["disabled"]; /** The required state of the input. Default is false. */ required?: DapDSCopyBoxInput["required"]; /** The readonly state of the input. Default is false. */ readonly?: DapDSCopyBoxInput["readonly"]; /** The autofocus state of the input. Default is false. */ autofocus?: DapDSCopyBoxInput["autofocus"]; /** The feedback of the input. */ feedback?: DapDSCopyBoxInput["feedback"]; /** The feedback type of the input. Can be `negative`, `positive`, or `warning`. */ feedbackType?: DapDSCopyBoxInput["feedbackType"]; /** The loading state of the input. Default is false. */ loading?: DapDSCopyBoxInput["loading"]; /** The optional state of the input. */ optional?: DapDSCopyBoxInput["optional"]; /** The optional label of the input. */ optionalLabel?: DapDSCopyBoxInput["optionalLabel"]; /** The weight of the label. Default is `false` */ subtle?: DapDSCopyBoxInput["subtle"]; /** Fired when the user clicks on the copy button. */ "ondds-copy"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when the input value changes. */ "ondds-change"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when the input value changes. */ "ondds-input"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when a key is pressed down. */ "ondds-keydown"?: (e: CustomEvent<{ value: string; originalEvent: Event }>) => void; /** Fired when the input loses focus. */ "ondds-blur"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the input gains focus. */ "ondds-focus"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the value cannot be copied. */ "ondds-not-allowed"?: (e: CustomEvent<{ void }>) => void; }; type DapDSDAPBadgeProps = { /** The variant of the DÁP badge */ variant?: DapDSDAPBadge["variant"]; /** The size of the DÁP badge */ size?: DapDSDAPBadge["size"]; }; type DapDSDataTableProps = { /** Row key to use for row selection, this should be a unique key for each row */ rowKey?: DapDSDataTable["rowKey"]; /** Enable row selection on the table, can be a boolean or a function that returns a boolean */ enableRowSelection?: DapDSDataTable["enableRowSelection"]; /** Enable sorting on the table */ enableSorting?: DapDSDataTable["enableSorting"]; /** Enable manual sorting on the table */ manualSorting?: DapDSDataTable["manualSorting"]; /** Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. */ manualPagination?: DapDSDataTable["manualPagination"]; /** If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. This behavior is automatically disabled when manualPagination is true but it can be overridden by explicitly assigning a boolean value to the autoResetPageIndex table option. */ autoResetPageIndex?: DapDSDataTable["autoResetPageIndex"]; /** Enable row click on the table */ enableRowClick?: DapDSDataTable["enableRowClick"]; /** Loading state of the table */ loading?: DapDSDataTable["loading"]; /** Whether to enable striped rows */ enableStripedRows?: DapDSDataTable["enableStripedRows"]; /** Number of rows in the table */ rowCount?: DapDSDataTable["rowCount"]; /** ID of element describing the table */ ariaDescribedBy?: DapDSDataTable["ariaDescribedBy"]; /** Caption text for the table */ caption?: DapDSDataTable["caption"]; /** Whether to show the pager component */ pager?: DapDSDataTable["pager"]; /** Show the page size options. */ showPageSizeOptions?: DapDSDataTable["showPageSizeOptions"]; /** Show the page index. */ showPageIndex?: DapDSDataTable["showPageIndex"]; /** Show the page count. */ showPageCount?: DapDSDataTable["showPageCount"]; /** Show the first button. */ showFirstButton?: DapDSDataTable["showFirstButton"]; /** Show the previous button. */ showPreviousButton?: DapDSDataTable["showPreviousButton"]; /** Show the next button. */ showNextButton?: DapDSDataTable["showNextButton"]; /** Show the last button. */ showLastButton?: DapDSDataTable["showLastButton"]; /** The label of the first button */ firstButtonLabel?: DapDSDataTable["firstButtonLabel"]; /** The label of the previous button */ previousButtonLabel?: DapDSDataTable["previousButtonLabel"]; /** The label of the next button */ nextButtonLabel?: DapDSDataTable["nextButtonLabel"]; /** The label of the last button */ lastButtonLabel?: DapDSDataTable["lastButtonLabel"]; /** Available page size options for the pager */ pageSizeOptions?: DapDSDataTable["pageSizeOptions"]; /** Sorting state of the table */ sorting?: DapDSDataTable["sorting"]; /** Selection state of the table */ rowSelection?: DapDSDataTable["rowSelection"]; /** Pagination state of the table */ pagination?: DapDSDataTable["pagination"]; /** Data to display in the table */ data?: DapDSDataTable["data"]; /** Columns to display in the table */ columns?: DapDSDataTable["columns"]; /** The function to determine the pager text */ pageStateText?: DapDSDataTable["pageStateText"]; /** Fired when the sorting of the table changes. */ "ondds-sorting-change"?: (e: CustomEvent<{ sorting: SortingState }>) => void; /** Fired when the selection of the table changes. */ "ondds-selection-change"?: (e: CustomEvent<{ selection: RowSelectionState }>) => void; /** Fired when the pagination of the table changes. */ "ondds-pagination-change"?: (e: CustomEvent<{ pagination: PaginationState }>) => void; /** Fired when a row is clicked. */ "ondds-row-click"?: (e: CustomEvent<{ row: Row<T> }>) => void; }; type DapDSDatePickerProps = { /** The disabled date of the datepicker. This function will be called for each date to determine if it is disabled. */ disabledDate?: DapDSDatePicker["disabledDate"]; /** The placement of the dropdown of the datepicker. */ placement?: DapDSDatePicker["placement"]; /** The open state of the datepicker. */ opened?: DapDSDatePicker["opened"]; /** Wheter the calendar should open on typing. */ openCalendarOnInput?: DapDSDatePicker["openCalendarOnInput"]; /** Wheter the calendar should send an empty event on typing. */ sendEmptyEventOnInput?: DapDSDatePicker["sendEmptyEventOnInput"]; /** The placeholder of the datepicker. */ placeholder?: DapDSDatePicker["placeholder"]; /** The loading state of the datepicker. */ loading?: DapDSDatePicker["loading"]; /** The format of the datepicker. This is a comma separated list of [formats](https://day.js.org/docs/en/display/format). */ format?: DapDSDatePicker["format"]; /** The format separator character in the format attribute. */ formatSeparator?: DapDSDatePicker["formatSeparator"]; /** Whether the clear button should be shown. */ clearButton?: DapDSDatePicker["clearButton"]; /** The aria label of the clear button. */ clearButtonAriaLabel?: DapDSDatePicker["clearButtonAriaLabel"]; /** The floating strategy of the datepicker. */ floatingStrategy?: DapDSDatePicker["floatingStrategy"]; /** The locale of the datepicker. By default it uses the global locale from dayjs. It is determined from the browser language. */ locale?: DapDSDatePicker["locale"]; /** The current visible date of the calendar. Only the month and year are considered. */ currentDate?: DapDSDatePicker["currentDate"]; /** The minimum date of the datepicker. This date will be the minimum selectable date. */ minDate?: DapDSDatePicker["minDate"]; /** The maximum date of the datepicker. This date will be the maximum selectable date. */ maxDate?: DapDSDatePicker["maxDate"]; /** */ focusElement?: DapDSDatePicker["focusElement"]; /** */ validity?: DapDSDatePicker["validity"]; /** The value of the datepicker. */ value?: DapDSDatePicker["value"]; /** The label of the datepicker. */ label?: DapDSDatePicker["label"]; /** The description of the datepicker. */ description?: DapDSDatePicker["description"]; /** The size of the datepicker. */ size?: DapDSDatePicker["size"]; /** The disabled state of the datepicker. */ disabled?: DapDSDatePicker["disabled"]; /** The required state of the datepicker. */ required?: DapDSDatePicker["required"]; /** The readonly state of the datepicker. */ readonly?: DapDSDatePicker["readonly"]; /** The autofocus of the datepicker. */ autofocus?: DapDSDatePicker["autofocus"]; /** The tooltip of the datepicker. */ tooltip?: DapDSDatePicker["tooltip"]; /** The tooltip placement of the datepicker. */ tooltipPlacement?: DapDSDatePicker["tooltipPlacement"]; /** The feedback of the datepicker. */ feedback?: DapDSDatePicker["feedback"]; /** The feedback type of the datepicker. */ feedbackType?: DapDSDatePicker["feedbackType"]; /** The optional state of the datepicker. */ optional?: DapDSDatePicker["optional"]; /** The optional label of the datepicker. */ optionalLabel?: DapDSDatePicker["optionalLabel"]; /** The weight of the label. Default is `false` */ subtle?: DapDSDatePicker["subtle"]; /** The autocomplete of the datepicker. */ autocomplete?: DapDSDatePicker["autocomplete"]; /** Fired when the datepicker value changes. */ "ondds-change"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when the datepicker input value changes. */ "ondds-input"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when the datepicker input value is valid. Happens on manual input typing. */ "ondds-valid-date"?: (e: CustomEvent<{ value: string }>) => void; /** Fired when the datepicker input value is invalid. Happens on manual input typing. */ "ondds-invalid-date"?: (e: CustomEvent<{ value: string; type: "invalid" | "out-of-range" }>) => void; /** Fired when the datepicker is cleared. */ "ondds-clear"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the datepicker gains focus. */ "ondds-focus"?: (e: CustomEvent<{ void }>) => void; /** Emitted when the datepicker loses focus. */ "ondds-blur"?: (e: CustomEvent<{ void }>) => void; }; type DapDSDividerProps = { /** Whether the divider is vertical */ vertical?: DapDSDivider["vertical"]; /** The spacing of the divider */ spacing?: DapDSDivider["spacing"]; /** The variant of the divider */ variant?: DapDSDivider["variant"]; }; type DapDSFeedbackProps = { /** The feedback message. */ feedback?: DapDSFeedback["feedback"]; /** The type of the feedback. */ feedbackSize?: DapDSFeedback["feedbackSize"]; /** The weight of the feedback. */ feedbackSubtle?: DapDSFeedback["feedba