dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
94 lines (93 loc) • 6.01 kB
TypeScript
import { default as ModalBaseElement } from './modal-base-element';
/**
* `dap-ds-modal`
* @summary A modal is a container for modal content.
* @element dap-ds-modal
* @title - Modal
*
* @property {boolean} open - The open state of the modal.
* @property {string} title - Title of the modal.
* @property {string} description - Description of the modal.
* @property {boolean} fullScreen - Full screen version of the modal.
* @property {boolean} noModal - If true, uses `.show()` (no overlay); if false, uses `.showModal()`. Default is false.
* @property {'sm'|'lg'} size - Size of the modal. Default is 'sm'.
* @property {string} sizeMap - Breakpoint→size map for the modal (e.g. "md:lg").
*
* @property {string} header - Whether to show the header. Default is 'true'.
* @property {string} footer - Whether to show the footer. Default is 'true'.
*
* @property {boolean} wideFooter - Wide layout mode for footer.
* @property {boolean} bottomFooter - Pushes the footer to the bottom.
* @property {boolean} fixedHeader - Fixes the header to the top.
* @property {boolean} fixedFooter - Fixes the footer to the bottom.
*
* @property {string} closeOnEsc - Whether to close on Escape key. Default is 'true'.
* @property {string} closeOnOverlayClick - Whether to close on overlay click. Default is 'true'.
* @property {string} closeButton - Whether to show the close button. Default is 'true'.
*
* @property {string} okButtonLabel - Label of the OK button.
* @property {boolean} okButtonDisabled - Whether the OK button is disabled.
* @property {boolean} okButtonDanger - Whether the OK button uses danger style.
* @property {boolean} hideOkButton - Whether to hide the OK button.
* @property {string} okButtonSize - Override size for the OK button; empty uses modal size.
* @property {string} okButtonSizeMap - Override sizeMap for the OK button.
*
* @property {string} cancelButtonLabel - Label of the Cancel button.
* @property {boolean} cancelButtonDisabled - Whether the Cancel button is disabled.
* @property {boolean} cancelButtonDanger - Whether the Cancel button uses danger style.
* @property {boolean} hideCancelButton - Whether to hide the Cancel button.
* @property {string} cancelButtonSize - Override size for the Cancel button; empty uses modal size.
* @property {string} cancelButtonSizeMap - Override sizeMap for the Cancel button.
*
* @property {string} closeButtonSize - Override size for the close icon button; empty uses modal size.
* @property {string} closeButtonSizeMap - Override sizeMap for the close icon button.
*
* @property {boolean} useNativeFocus - Use native browser focus handling. Default is false.
*
* @event {{ void }} dds-before-open - Fires before the modal opens.
* @event {{ void }} dds-opened - Fires after the modal opens.
* @event {{ void }} dds-before-close - Fires before the modal closes.
* @event {{ void }} dds-closed - Fires after the modal closed.
* @event {{ void }} dds-close - Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.
* @event {{ void }} dds-ok - Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
* @event {{ void }} dds-cancel - Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
*
* @slot - The content of the modal.
* @slot title - The title of the modal.
* @slot description - The description of the modal.
* @slot footer - The footer of the modal.
*
* @csspart base - The main modal container.
* @csspart panel - The panel of the modal.
* @csspart header - The header of the modal.
* @csspart header-container - The container of the header.
* @csspart title - The title of the modal.
* @csspart description - The description of the modal.
* @csspart footer - The footer of the modal.
* @csspart content - The body of the modal.
* @csspart closebutton - The close button of the modal.
*
* @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-200)).
* @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300)).
*
*/
export default class DapDSModal extends ModalBaseElement {
static tagName: string;
constructor();
render(): import('lit-html').TemplateResult<1>;
}