import { PropertyValueMap } from 'lit'; import { BadgeType, PopupPlacement } from '../../dap-design-system'; import { DdsElement } from '../../internal/dds-hu-element'; type BadgeVariant = 'round' | 'dot'; /** * `dap-ds-notification-badge` * @summary A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention. * @element dap-ds-notification-badge * @title - Notification badge * * @slot - The content of the notification badge. * * @csspart base - The main container of the notification badge. * @csspart noty - The notification badge container. * * @cssproperty --dds-notification-badge-size - Controls the overall size of the notification badge (default: var(--dds-spacing-500)) * @cssproperty --dds-notification-badge-min-width - Minimum width of the notification badge (default: var(--dds-spacing-500)) * @cssproperty --dds-notification-badge-height - Height of the notification badge (default: var(--dds-spacing-500)) * @cssproperty --dds-notification-badge-padding - Padding inside the notification badge (default: 0 var(--dds-spacing-150)) * @cssproperty --dds-notification-badge-border-radius - Border radius of the notification badge (default: var(--dds-radius-base)) * @cssproperty --dds-notification-badge-font-size - Font size of the notification badge text (default: var(--dds-font-xs)) * @cssproperty --dds-notification-badge-dot-size - Size of the dot variant (default: var(--dds-spacing-200)) * @cssproperty --dds-notification-badge-color - Text color of the notification badge (default: var(--dds-background-neutral-medium)) * @cssproperty --dds-notification-badge-neutral-bg - Background color for neutral type (default: var(--dds-text-neutral-subtle)) * @cssproperty --dds-notification-badge-brand-bg - Background color for brand type (default: var(--dds-text-brand-subtle)) * @cssproperty --dds-notification-badge-info-bg - Background color for info type (default: var(--dds-text-informative-subtle)) * @cssproperty --dds-notification-badge-positive-bg - Background color for positive type (default: var(--dds-text-positive-subtle)) * @cssproperty --dds-notification-badge-warning-bg - Background color for warning type (default: var(--dds-text-warning-subtle)) * @cssproperty --dds-notification-badge-negative-bg - Background color for negative type (default: var(--dds-text-negative-subtle)) * @cssproperty --dds-notification-badge-circular-offset-x - Horizontal offset for circular positioning (default: 20px) * @cssproperty --dds-notification-badge-circular-offset-y - Vertical offset for circular positioning (default: -20px) */ export default class DapDSNotificationBadge extends DdsElement { /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */ badgeContent: string | number; /** This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. */ visible: boolean; /** This switch decides whether to show a zero value or not. */ showZero: boolean; /** The color scheme of the badge * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' } */ type: BadgeType; /** The variant of the badge. * @type { 'round' | 'dot' } */ variant: BadgeVariant; /** The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap. */ max: number; /** The position of the badge content around the slot content. * @type { 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' } */ placement: PopupPlacement; /** Whether to automatically detect circular elements and adjust positioning accordingly */ circularAuto: boolean; /** Override circular positioning detection - forces circular positioning calculation */ forceCircular: boolean; private isCircularElement; private circularOffset; static readonly styles: import('lit').CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; private detectCircularElement; private isElementCircular; private calculateCircularOffset; private getAngleForPlacement; updated(changedProperties: Map): void; private parseBadgeContent; private handleMax; private renderContent; private get hide(); render(): import('lit-html').TemplateResult; } export {};