dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
78 lines (77 loc) • 5.33 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/tray/tray.js';
import { DdsBeforeOpenEvent, DdsOpenedEvent, DdsBeforeCloseEvent, DdsClosedEvent, DdsCloseEvent } from '../../events/events';
export type { DdsBeforeOpenEvent } from '../../events/events';
export type { DdsOpenedEvent } from '../../events/events';
export type { DdsBeforeCloseEvent } from '../../events/events';
export type { DdsClosedEvent } from '../../events/events';
export type { DdsCloseEvent } from '../../events/events';
/**
* `dap-ds-tray`
* @summary A tray is a container for slide in content.
* @element dap-ds-tray
* @title - Tray
*
* @property {boolean} open - The open state of the tray.
* @property {boolean} noModal - Whether the tray should have a modal overlay. Default is false. If true the tray will use the .show() method, if false the tray will use the .showModal() method.
* @property {boolean} closeOnEsc - Whether the tray should close on pressing the escape key. Default is true.
* @property {boolean} closeOnOverlayClick - Whether the tray should close on clicking the overlay. Default is true.
* @property {string} closeButton - Whether the tray should have a close button. Default is true.
* @property {string} title - The title of the tray.
* @property {string} description - The description of the tray.
* @property {string} okButtonLabel - The label of the OK button.
* @property {string} cancelButtonLabel - The label of the Cancel button.
* @property { 'sm' | 'lg' } size - The size of the tray. Default is 'sm'.
* @property {string} footer - Whether the tray should have a footer. Default is false.
* @property {string} header - Whether the tray should have a header. Default is false.
*
* @event {{ void }} dds-before-open - Fires before the tray opens.
* @event {{ void }} dds-opened - Fires after the tray opens.
* @event {{ void }} dds-before-close - Fires before the tray closes.
* @event {{ void }} dds-closed - Fires after the tray closed.
* @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.
*
* @slot - The content of the tray.
* @slot header - The header of the tray.
* @slot footer - The footer of the tray.
*
* @cssproperty --dds-modal-max-block-size - Maximum height of the modal. (default: 80vh)
* @cssproperty --dds-modal-max-inline-size - Maximum width of the modal. (default: 600px)
* @cssproperty --dds-modal-padding-sm - Padding inside the modal. (default: var(--dds-spacing-600))
* @cssproperty --dds-modal-padding-lg - Padding inside the modal. (default: var(--dds-spacing-1200))
* @cssproperty --dds-modal-transform-amount - Amount to transform for entrance animation. (default: 2rem)
* @cssproperty --dds-modal-transition-speed - Speed of transition animations. (default: var(--dds-transition-fast))
* @cssproperty --dds-modal-transition-timing - Timing function for transitions. (default: var(--dds-easing-ease-in-out))
* @cssproperty --dds-modal-border-width - Border width of the modal. (default: var(--dds-border-width-base))
* @cssproperty --dds-modal-border-color - Border color of the modal. (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-modal-border-radius - Border radius of the modal. (default: var(--dds-radius-large, 16px))
* @cssproperty --dds-modal-background - Background color of the modal. (default: var(--dds-background-neutral-subtle))
* @cssproperty --dds-modal-header-margin-sm - Margin below the header. (default: var(--dds-spacing-400))
* @cssproperty --dds-modal-header-margin-lg - Margin below the header. (default: var(--dds-spacing-600))
* @cssproperty --dds-modal-footer-margin-sm - Margin above the footer. (default: var(--dds-spacing-400))
* @cssproperty --dds-modal-footer-margin-lg - Margin above the footer. (default: var(--dds-spacing-600))
* @cssproperty --dds-modal-footer-gap - Gap between footer elements. (default: var(--dds-spacing-400))
* @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300))
* @cssproperty --dds-tray-width-side - Width of the side (left/right) trays. (default: 250px)
* @cssproperty --dds-tray-min-width-horizontal - Minimum width of the horizontal (top/bottom) trays. (default: 400px)
* @cssproperty --dds-tray-min-height-horizontal - Minimum height of the horizontal (top/bottom) trays. (default: 300px)
* @cssproperty --dds-tray-min-height-vertical - Minimum height of the vertical (left/right) trays. (default: 100%)
* @cssproperty --dds-tray-transform-duration - Duration of the transform animation. (default: 0.3s)
* @cssproperty --dds-tray-transform-timing - Timing function for the transform animation. (default: ease-in-out)
*
* @csspart base - The main tray container.
* @csspart panel - The panel of the tray.
* @csspart header - The header of the tray.
* @csspart footer - The footer of the tray.
* @csspart content - The content of the tray.
* @csspart body - The body of the tray.
*
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsBeforeOpen: EventName<DdsBeforeOpenEvent>;
onDdsOpened: EventName<DdsOpenedEvent>;
onDdsBeforeClose: EventName<DdsBeforeCloseEvent>;
onDdsClosed: EventName<DdsClosedEvent>;
onDdsClose: EventName<DdsCloseEvent>;
}>;
export default reactWrapper;