dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
83 lines (82 loc) • 3.68 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSIcon } from '../icon/icon.component';
declare const SpinnerBaseWithSized: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
export type SpinnerVariant = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
export type SpinnerOrientation = 'vertical' | 'horizontal';
/**
* `dap-ds-spinner`
* @summary Loading spinner component.
* @element dap-ds-spinner
* @title - Spinner
*
* @csspart base - The main spinner container.
* @csspart icon - The loading icon element.
* @csspart icon-base - The base of the loading icon.
* @csspart icon-content - The content of the loading icon.
* @csspart text - The loading text element.
*
* @slot - The loading text content.
* @slot icon - The loading icon content.
*
* @cssprop --dds-spinner-icon-color-neutral - Color for neutral spinner icons (default: var(--dds-icon-neutral-base))
* @cssprop --dds-spinner-icon-color-brand - Color for brand spinner icons (default: var(--dds-icon-brand-subtle))
* @cssprop --dds-spinner-icon-color-negative - Color for negative spinner icons (default: var(--dds-icon-negative-subtle))
* @cssprop --dds-spinner-icon-color-positive - Color for positive spinner icons (default: var(--dds-icon-positive-subtle))
* @cssprop --dds-spinner-icon-color-inverted - Color for inverted spinner icons (default: var(--dds-icon-neutral-inverted))
* @cssprop --dds-spinner-text-spacing - Spacing between spinner and text (default: var(--dds-spacing-400))
* @cssprop --dds-spinner-animation-duration - Duration of the spinner animation (default: 1s)
*
* @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the spinner. Default is `lg`. See SizedMixin.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
*/
export default class DapDSSpinner extends SpinnerBaseWithSized {
static tagName: string;
static dependencies: {
'dap-ds-icon': typeof DapDSIcon;
};
constructor();
/**
* The variant of the spinner.
* @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
*/
variant: SpinnerVariant;
/** The size of the spinner in pixels. This overrides the size attribute */
staticSize?: number;
/** The loading text. */
text: string;
/** Removes the text color */
noColor: boolean;
/**
* The orientation of the spinner (icon and text layout).
* @type {"vertical" | "horizontal"}
*/
orientation: SpinnerOrientation;
/**
* The aria-live politeness level for screen readers.
* @type {"polite" | "assertive" | "off"}
*/
ariaLive: 'polite' | 'assertive' | 'off';
/**
* Delay in milliseconds before showing the spinner.
* Prevents flash for quick operations.
*/
delay: number;
/** @internal */
private _visible;
private _delayTimeout?;
static readonly styles: import('lit').CSSResult;
/** Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */
private get spinnerSize();
connectedCallback(): void;
disconnectedCallback(): void;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
private _setupIconSlot;
private _updateSlottedIcons;
render(): import('lit-html').TemplateResult<1> | null;
}
export {};