dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
36 lines (35 loc) • 2.06 kB
TypeScript
import { PropertyValues } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
/**
* `dap-ds-content-switcher`
* @summary A content switcher is a set of two or more segments, each of which functions as a mutually exclusive button.
* @element dap-ds-content-switcher
* @title - Content switcher
*
* @slot - The content switcher items.
*
* @event {{ value: string, selected: boolean }} dds-change - Fired when the content switcher is changed.
*
* @csspart base - The main content switcher container.
*
* @cssproperty --dds-content-switcher-min-width - The minimum width of the content switcher (default: var(--dds-spacing-4000, 160px))
* @cssproperty --dds-content-switcher-padding - The padding of the content switcher (default: var(--dds-spacing-100, 4px))
* @cssproperty --dds-content-switcher-border-width - The border width of the content switcher (default: var(--dds-border-width-base))
* @cssproperty --dds-content-switcher-border-color - The border color of the content switcher (default: var(--dds-border-neutral-transparent))
* @cssproperty --dds-content-switcher-border-radius - The border radius of the content switcher (default: var(--dds-radius-rounded, 1000px))
* @cssproperty --dds-content-switcher-background - The background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%)))
* @cssproperty --dds-content-switcher-gap - The gap between content switcher items (default: var(--dds-spacing-100, 4px))
*/
export default class DapDSContentSwitcher extends DdsElement {
static tagName: string;
/** Whether the content switcher allows multiple selections. */
multiSelect: boolean;
/** The value of the content switcher. A comma-separated list if `multiSelect` is `true`. */
value: string;
static readonly styles: import('lit').CSSResult;
private getAllInputs;
private syncInputElements;
private handleInputClick;
protected updated(_changedProperties: PropertyValues): void;
render(): import('lit-html').TemplateResult;
}