dap-design-system/dist/components/callout/callout.component.d.ts

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

import { nothing } from 'lit';
import { Alignment, BackgroundShade, CalloutVariant } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSCard } from '../card/card.component';
import { default as DapDSCardContent } from '../card/card-content.component';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
import { default as SystemAlertFill } from '../icons/system/system-alert-fill/system-alert-fill.component';
import { default as SystemCheckboxCircleFill } from '../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component';
import { default as SystemErrorWarningFill } from '../icons/system/system-error-warning-fill/system-error-warning-fill.component';
import { default as SystemInformation2Fill } from '../icons/system/system-information-2-fill/system-information-2-fill.component';
/**
 * `dap-ds-callout` is a custom callout component.
 * @element dap-ds-callout
 * @title - Callout
 *
 * @event {{ void }} dds-close - Fired when the close button is clicked.
 *
 * @slot - The content of the callout.
 * @slot title - The title of the callout.
 * @slot icon - The icon of the callout.
 * @slot actions - The actions of the callout.
 * @slot close - The close button of the callout.
 *
 * @csspart base - The main callout container.
 * @csspart content - The content of the callout.
 * @csspart card-content - The content of the card.
 * @csspart icon - The icon of the callout.
 * @csspart title - The title of the callout.
 * @csspart description - The description of the callout.
 * @csspart actions - The actions of the callout.
 * @csspart close - The close button of the callout.
 *
 * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))
 * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))
 * @cssproperty --dds-callout-icon-size - Size of the icon. (default: var(--dds-spacing-600))
 * @cssproperty --dds-callout-title-color - Color of the title text. (default: var(--dds-text-neutral-strong))
 * @cssproperty --dds-callout-description-color - Color of the description text. (default: var(--dds-text-neutral-base))
 * @cssproperty --dds-callout-title-font-size - Font size of the title. (default: var(--dds-font-base))
 * @cssproperty --dds-callout-description-font-size - Font size of the description. (default: var(--dds-font-base))
 * @cssproperty --dds-callout-title-font-weight - Font weight of the title. (default: var(--dds-font-weight-bold))
 * @cssproperty --dds-callout-description-font-weight - Font weight of the description. (default: var(--dds-font-weight-medium))
 * @cssproperty --dds-callout-actions-font-weight - Font weight of the actions. (default: var(--dds-font-weight-bold))
 * @cssproperty --dds-callout-actions-gap - Gap between action items. (default: var(--dds-spacing-400))
 * @cssproperty --dds-callout-content-gap - Gap between content elements. (default: var(--dds-spacing-100))
 * @cssproperty --dds-callout-border-radius - Border radius of the callout. (default: var(--dds-radius-base))
 *
 * @cssproperty --dds-callout-brand-background - Brand variant background color. (default: var(--dds-background-brand-base))
 * @cssproperty --dds-callout-brand-background-subtle - Brand variant subtle background color. (default: var(--dds-background-brand-subtle))
 * @cssproperty --dds-callout-brand-background-medium - Brand variant medium background color. (default: var(--dds-background-brand-medium))
 * @cssproperty --dds-callout-brand-background-strong - Brand variant strong background color. (default: var(--dds-background-brand-strong))
 * @cssproperty --dds-callout-brand-icon - Brand variant icon color. (default: var(--dds-icon-brand-subtle))
 * @cssproperty --dds-callout-brand-border - Brand variant border color. (default: var(--dds-border-brand-subtle))
 *
 * @cssproperty --dds-callout-info-background - Info variant background color. (default: var(--dds-background-informative-base))
 * @cssproperty --dds-callout-info-background-subtle - Info variant subtle background color. (default: var(--dds-background-informative-subtle))
 * @cssproperty --dds-callout-info-background-medium - Info variant medium background color. (default: var(--dds-background-informative-medium))
 * @cssproperty --dds-callout-info-background-strong - Info variant strong background color. (default: var(--dds-background-informative-strong))
 * @cssproperty --dds-callout-info-icon - Info variant icon color. (default: var(--dds-icon-informative-subtle))
 * @cssproperty --dds-callout-info-border - Info variant border color. (default: var(--dds-border-informative-subtle))
 *
 * @cssproperty --dds-callout-positive-background - Positive variant background color. (default: var(--dds-background-positive-base))
 * @cssproperty --dds-callout-positive-background-subtle - Positive variant subtle background color. (default: var(--dds-background-positive-subtle))
 * @cssproperty --dds-callout-positive-background-medium - Positive variant medium background color. (default: var(--dds-background-positive-medium))
 * @cssproperty --dds-callout-positive-background-strong - Positive variant strong background color. (default: var(--dds-background-positive-strong))
 * @cssproperty --dds-callout-positive-icon - Positive variant icon color. (default: var(--dds-icon-positive-subtle))
 * @cssproperty --dds-callout-positive-border - Positive variant border color. (default: var(--dds-border-positive-subtle))
 *
 * @cssproperty --dds-callout-warning-background - Warning variant background color. (default: var(--dds-background-warning-base))
 * @cssproperty --dds-callout-warning-background-subtle - Warning variant subtle background color. (default: var(--dds-background-warning-subtle))
 * @cssproperty --dds-callout-warning-background-medium - Warning variant medium background color. (default: var(--dds-background-warning-medium))
 * @cssproperty --dds-callout-warning-background-strong - Warning variant strong background color. (default: var(--dds-background-warning-strong))
 * @cssproperty --dds-callout-warning-icon - Warning variant icon color. (default: var(--dds-icon-neutral-strong))
 * @cssproperty --dds-callout-warning-border - Warning variant border color. (default: var(--dds-border-warning-subtle))
 *
 * @cssproperty --dds-callout-negative-background - Negative variant background color. (default: var(--dds-background-negative-base))
 * @cssproperty --dds-callout-negative-background-subtle - Negative variant subtle background color. (default: var(--dds-background-negative-subtle))
 * @cssproperty --dds-callout-negative-background-medium - Negative variant medium background color. (default: var(--dds-background-negative-medium))
 * @cssproperty --dds-callout-negative-background-strong - Negative variant strong background color. (default: var(--dds-background-negative-strong))
 * @cssproperty --dds-callout-negative-icon - Negative variant icon color. (default: var(--dds-icon-negative-subtle))
 * @cssproperty --dds-callout-negative-border - Negative variant border color. (default: var(--dds-border-negative-subtle))
 */
export default class DapDSCallout extends DdsElement {
    static tagName: string;
    static dependencies: {
        'dap-ds-icon-information-2-fill': typeof SystemInformation2Fill;
        'dap-ds-icon-checkbox-circle-fill': typeof SystemCheckboxCircleFill;
        'dap-ds-icon-alert-fill': typeof SystemAlertFill;
        'dap-ds-icon-error-warning-fill': typeof SystemErrorWarningFill;
        'dap-ds-card': typeof DapDSCard;
        'dap-ds-card-content': typeof DapDSCardContent;
        'dap-ds-icon-button': typeof DapDSIconButton;
        'dap-ds-icon': typeof DapDSIcon;
    };
    /** The variant of the callout
     * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }
     */
    variant: CalloutVariant;
    /** The alignment of the callout. Can be `vertical` or `horizontal`.
     * @type { 'vertical' | 'horizontal' }
     */
    alignment: Alignment;
    /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.
     * @type { 'subtle' | 'base' | 'medium' | 'strong' }
     */
    shade: BackgroundShade;
    /** If the callout has a border */
    noBorder: string;
    /** If the callout has a close button */
    closeable: boolean;
    /** The header of the callout */
    title: string;
    /** The label of the close button */
    closeButtonLabel: string;
    /** `data-testid` for the default close button. */
    closeButtonTestId: string;
    /** If the callout is opened */
    opened: string;
    static readonly styles: import('lit').CSSResult;
    private _hasActions;
    private get hasActions();
    private handleActionsSlotChange;
    private static readonly defaultIcons;
    getDefaultIcon(variant: CalloutVariant): import('lit-html').TemplateResult;
    handleClose(): void;
    private handleKeyDown;
    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
    render(): typeof nothing | import('lit-html').TemplateResult;
}