dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
75 lines (74 loc) • 4.74 kB
TypeScript
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 {
static tagName: string;
/** 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<any> | Map<PropertyKey, unknown>): void;
private detectCircularElement;
private isElementCircular;
private calculateCircularOffset;
private getAngleForPlacement;
updated(changedProperties: Map<string | number | symbol, unknown>): void;
private parseBadgeContent;
private handleMax;
private renderContent;
private get hide();
render(): import('lit-html').TemplateResult;
}
export {};