dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
47 lines (46 loc) • 2.89 kB
TypeScript
import { default as PopupBaseElement } from './popup-base-element';
/**
* `dap-ds-popup`
* @summary A popup is a container for popup content.
* @element dap-ds-popup
* @title - Popup
*
* @property {'xs' | 'sm' | 'lg'} size - The size of the popup.
* @property {boolean} disabled - The disabled state of the popup.
* @property {boolean} opened - The open state of the popup.
* @property {'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'} placement - The placement of the popup.
* @property {'absolute' | 'fixed'} floatingStrategy - The floating strategy of the popup.
* @property {number} offset - The offset of the popup.
* @property {boolean} sync - Whether the popup should sync its width with the trigger.
* @property {number | 'auto'} maxHeight - The maximum height of the popup.
* @property {number | 'auto'} maxWidth - The maximum width of the popup.
* @property {boolean} hasArrow - Whether the popup has an arrow.
* @property {boolean} overflow - Whether the popup should overflow.
* @property {boolean} fullWidth - Whether the popup should take full width of the screen.
* @property {boolean} disableViewportAutoClose - Keep popup open when trigger leaves viewport.
*
* @event {{ void }} dds-opened - Fired when the popup is opened.
* @event {{ void }} dds-closed - Fired when the popup is closed.
* @event {{ void }} dds-close - Fired when the popup should be closed.
*
* @slot trigger - The trigger of the popup.
* @slot - The content of the popup.
*
* @csspart popup - The main popup container.
* @csspart arrow - The arrow of the popup.
*
* @cssproperty --dds-popup-z-index - Z-index of the popup (default: var(--dds-z-index-20))
* @cssproperty --dds-popup-padding - Default padding of the popup (default: var(--dds-spacing-400))
* @cssproperty --dds-popup-padding-xs - Padding of the popup when size is xs (default: var(--dds-spacing-200))
* @cssproperty --dds-popup-padding-lg - Padding of the popup when size is lg (default: var(--dds-spacing-500))
* @cssproperty --dds-popup-border-width - Border width of the popup (default: var(--dds-border-width-base))
* @cssproperty --dds-popup-border-radius - Border radius of the popup (default: var(--dds-radius-base))
* @cssproperty --dds-popup-border-color - Border color of the popup (default: var(--dds-border-neutral-subtle))
* @cssproperty --dds-popup-background - Background color of the popup (default: var(--dds-background-neutral-base))
* @cssproperty --dds-popup-color - Text color of the popup (default: var(--dds-text-neutral-base))
* @cssproperty --dds-popup-arrow-size - Size of the popup arrow (default: var(--dds-tooltip-arrow-size))
*/
export default class DapDSPopup extends PopupBaseElement {
static tagName: string;
render(): import('lit-html').TemplateResult;
}