dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
95 lines (94 loc) • 5.83 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSStack } from '../stack/stack.component';
declare const BadgeBaseWithSized: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
export type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
export type BadgeSize = 'sm' | 'lg';
/**
* `dap-ds-badge`
* @summary A badge is a small status descriptor for UI elements.
* @element dap-ds-badge
* @title - Badge
*
* @property { 'sm' | 'lg' } size - The size of the badge. Default is `sm`.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg").
*
* @slot - The content of the badge.
* @slot icon - The icon of the badge.
*
* @csspart base - The main container of the badge.
* @csspart icon - The icon of the badge.
* @csspart content - The content of the badge.
* @csspart icon-base - The base of the icon.
*
* @cssproperty --dds-badge-border-width - The width of the badge's border (default: var(--dds-border-width-base))
* @cssproperty --dds-badge-border-style - The style of the badge's border (default: solid)
* @cssproperty --dds-badge-border-radius - The border radius of the badge (default: var(--dds-radius-base))
* @cssproperty --dds-badge-font-weight - The font weight of the badge text (default: var(--dds-font-weight-bold))
* @cssproperty --dds-badge-line-height - The line height of the badge text (default: 1.2)
* @cssproperty --dds-badge-transition - The transition property for the badge (default: all 0.2s ease-in-out)
*
* @cssproperty --dds-badge-padding-sm - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200))
* @cssproperty --dds-badge-padding-lg - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300))
* @cssproperty --dds-badge-font-size-sm - The font size of the small badge (default: var(--dds-font-xs))
* @cssproperty --dds-badge-font-size-lg - The font size of the large badge (default: var(--dds-font-sm))
*
* @cssproperty --dds-badge-neutral-border-color - The border color of the neutral badge (default: var(--dds-border-neutral-base))
* @cssproperty --dds-badge-neutral-background - The background color of the neutral badge (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-badge-neutral-color - The text color of the neutral badge (default: var(--dds-text-neutral-subtle))
*
* @cssproperty --dds-badge-brand-border-color - The border color of the brand badge (default: var(--dds-border-brand-base))
* @cssproperty --dds-badge-brand-background - The background color of the brand badge (default: var(--dds-background-brand-medium))
* @cssproperty --dds-badge-brand-color - The text color of the brand badge (default: var(--dds-text-brand-subtle))
*
* @cssproperty --dds-badge-info-border-color - The border color of the info badge (default: var(--dds-border-informative-base))
* @cssproperty --dds-badge-info-background - The background color of the info badge (default: var(--dds-background-informative-medium))
* @cssproperty --dds-badge-info-color - The text color of the info badge (default: var(--dds-text-informative-subtle))
*
* @cssproperty --dds-badge-positive-border-color - The border color of the positive badge (default: var(--dds-border-positive-base))
* @cssproperty --dds-badge-positive-background - The background color of the positive badge (default: var(--dds-background-positive-medium))
* @cssproperty --dds-badge-positive-color - The text color of the positive badge (default: var(--dds-text-positive-subtle))
*
* @cssproperty --dds-badge-warning-border-color - The border color of the warning badge (default: var(--dds-border-warning-subtle))
* @cssproperty --dds-badge-warning-background - The background color of the warning badge (default: var(--dds-background-warning-medium))
* @cssproperty --dds-badge-warning-color - The text color of the warning badge (default: var(--dds-text-warning-subtle))
*
* @cssproperty --dds-badge-negative-border-color - The border color of the negative badge (default: var(--dds-border-negative-base))
* @cssproperty --dds-badge-negative-background - The background color of the negative badge (default: var(--dds-background-negative-medium))
* @cssproperty --dds-badge-negative-color - The text color of the negative badge (default: var(--dds-text-negative-subtle))
*
*/
export default class DapDSBadge extends BadgeBaseWithSized {
static tagName: string;
static dependencies: {
'dap-ds-icon': typeof DapDSIcon;
'dap-ds-stack': typeof DapDSStack;
};
/** The type of the badge
* @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }
*/
type: BadgeType;
/** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */
private get badgeSize();
/** The icon of the badge, this is a name of a built in icon */
icon?: string;
/** Whether the badge represents dynamic content that should announce changes */
live: boolean;
private _hasSlottedIcon;
private _cachedIconSize;
static readonly styles: import('lit').CSSResult;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
private setAccessibilityAttributes;
private validateIcon;
private setupSlotListeners;
private updateIconSlot;
private getIconSize;
private renderIcon;
render(): import('lit-html').TemplateResult;
}
export {};