dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
73 lines (72 loc) • 4.94 kB
TypeScript
import { default as ModalBaseElement } from '../modal/modal-base-element';
/**
* `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.
*
*/
export default class DapDSTray extends ModalBaseElement {
static tagName: string;
/** The placement of the tray.
* @type { 'left' | 'right' | 'top' | 'bottom' }
*/
placement: 'left' | 'right' | 'top' | 'bottom';
constructor();
static readonly styles: import('lit').CSSResult;
render(): import('lit-html').TemplateResult<1>;
}