import { LinkSize, LinkTarget, LinkVariant } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; /** * `dap-ds-link` * @summary A link is a reference to a web resource. * @element dap-ds-link * @title - Link * * @event {{ event: Event }} dds-click - Emitted when the link is clicked. * * @slot - The text of the link. * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation. * Rendered outside the visible link so it is always accessible to programmatic clicks. * * @csspart base - The main link container. * @csspart text - The text of the link. * * @cssproperty --dds-link-color - The color of the link text (default: var(--dds-link-enabled)). * @cssproperty --dds-link-hover-color - The color of the link text on hover (default: var(--dds-link-hover)). * @cssproperty --dds-link-active-color - The color of the link text when active (default: var(--dds-link-pressed)). * @cssproperty --dds-link-visited-color - The color of the visited link text (default: var(--dds-link-pressed)). * @cssproperty --dds-link-font-size - The font size of the link text (default: var(--dds-font-base)). * @cssproperty --dds-link-line-height - The line height of the link text (default: var(--dds-font-line-height-xlarge)). * @cssproperty --dds-link-font-weight - The font weight of the link text (default: var(--dds-font-weight-medium)). * @cssproperty --dds-link-text-decoration - The text decoration of the link (default: underline). * * @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)). * @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)). * @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)). * @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)). * * @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)). * @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)). * @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)). * @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)). * * @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)). * @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)). * @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)). * @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-visited)). * * @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). * @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)). * @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)). * @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)). * * @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)). * @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)). * @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)). * @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)). * * @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)). * @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)). * @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)). * @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)). * @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)). * @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)). * @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)). * @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)). * * @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)). * @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)). * * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none). */ export default class DapDSLink extends DdsElement { /** The size of the link * @type {'lg' | 'md' | 'sm' | 'xs'} */ size?: LinkSize; /** The theme of the link * @type {'neutral' | 'brand' | 'inverted' | 'warning'} */ variant: LinkVariant; /** The target of the link. * @type {'_blank' | '_self' | '_parent' | '_top'} */ target: LinkTarget; /** Bold link style */ bold: boolean; /** Removes underline style */ noUnderline: boolean; /** The href / URL of the link */ href: string; /** Disabled state of the link */ disabled: boolean; /** The rel of the link */ rel: string; /** The download attribute of the link */ download: boolean; /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */ targetBlankText: string; static readonly styles: import('lit').CSSResult; private hasLink; private _getLinkElement; private _handleLinkSlotChange; private handleClick; focus(): void; render(): import('lit-html').TemplateResult; }