dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
61 lines (60 loc) • 3.23 kB
TypeScript
import { default as DapDSCheckbox } from '../../checkbox/checkbox.component';
import { default as DapDSSwitch } from '../../switch/switch.component';
import { GenericFormElement } from '../../../internal/mixin/genericFormElement';
import { default as DapDSFeedback } from '../../feedback/feedback.component';
import { default as DapDSIcon } from '../../icon/icon.component';
import { default as DapDSIconButton } from '../../icon-button/icon-button.component';
import { default as DapDSTooltip } from '../../tooltip/tooltip.component';
import { default as DapDSTypography } from '../../typography/typography.component';
import { default as DapDSFormLabel } from '../form-label/form-label.component';
/**
* `dap-ds-input-group`
* @summary An input group is a container for inputs.
* @element dap-ds-input-group
* @title - Input group
* @group form
*
* @property {string} label - The label of the input group.
* @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
* @property {string} description - The description of the input group.
* @property {string} tooltip - The tooltip of the input group.
* @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input group.
* @property {string} tooltipAriaLabel - The aria label of the tooltip.
* @property {string} optionalLabel - The label of the input group when it is optional.
* @property {string} requiredLabel - The indicator of the input group when it is required. (default: '*')
* @property {boolean} disabled - Whether the input group is disabled.
* @property {'xs' | 'sm' | 'lg'} size - The size of the input group. Default is `sm`.
* @property {boolean} required - Whether the input group is required.
* @property {boolean} optional - Whether the input group is optional.
* @property {string} feedback - The feedback of the input.
* @property {string} feedbackType - The type of the feedback.
* @property {boolean} subtle - Whether the input group label is subtle.
*
* @slot - The content of the input group items.
* @slot feedback-icon - The custom icon of the feedback.
*
* @csspart base - The main input group container.
* @csspart label - The label of the input group.
* @csspart description - The description of the input group.
* @csspart tooltip - The tooltip of the input group.
* @csspart container - The container of the input group items.
*/
export default class DapDSInputGroup extends GenericFormElement {
static tagName: string;
static dependencies: {
'dap-ds-form-label': typeof DapDSFormLabel;
'dap-ds-tooltip': typeof DapDSTooltip;
'dap-ds-icon-button': typeof DapDSIconButton;
'dap-ds-icon': typeof DapDSIcon;
'dap-ds-typography': typeof DapDSTypography;
'dap-ds-feedback': typeof DapDSFeedback;
};
static readonly styles: import('lit').CSSResult;
allInputs: DapDSCheckbox[] | DapDSSwitch[];
handleLabelClick(): void;
private getItems;
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
render(): import('lit-html').TemplateResult;
private _handleSlotChange;
private _renderFeedback;
}