import { nothing } from 'lit'; import { Alignment, BackgroundShade, CalloutVariant } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; /** * `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 { /** 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; /** 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): void; render(): typeof nothing | import('lit-html').TemplateResult; }