dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
94 lines (93 loc) • 4.21 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { GenericFormElement } from '../../internal/mixin/genericFormElement';
import { default as DapDSFeedback } from '../feedback/feedback.component';
import { default as DapDSFormLabel } from '../form/form-label/form-label.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';
/**
* `dap-ds-code-puncher`
* @summary A composable PIN/OTP input component for entering verification codes.
* @element dap-ds-code-puncher
* @title - Code Puncher
* @group code-puncher
*
* @property {string} value - The complete code value.
* @property {boolean} mask - Mask input like password. Default is false.
* @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.
* @property {string} placeholder - Placeholder character for empty slots.
* @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.
* @property {string} label - The label of the component.
* @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
* @property {string} description - The description of the component.
* @property {string} tooltip - The tooltip of the component.
* @property {string} feedback - The feedback message.
* @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.
* @property {'success' | 'error'} status - The status of the component.
* @property {boolean} disabled - Disable all slots. Default is false.
* @property {boolean} readonly - Read-only state. Default is false.
* @property {boolean} required - Required for form validation. Default is false.
* @property {string} requiredLabel - Indicator of required text. (default: '*')
* @property {string} name - Form element name.
* @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.
*
* @event {{ value: string, index: number }} dds-input - Fires on each digit input.
* @event {{ value: string }} dds-change - Fires when value changes.
* @event {{ value: string }} dds-complete - Fires when all slots are filled.
* @event dds-focus - Fires when component gains focus.
* @event dds-blur - Fires when component loses focus.
*
* @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.
*
* @csspart base - The main container.
* @csspart slots - The slots container.
* @csspart label - The label element.
* @csspart description - The description element.
* @csspart feedback - The feedback element.
*/
export default class DapDSCodePuncher 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;
};
mask: boolean;
pattern: string;
placeholder: string;
autocomplete: string;
private _slots;
private _activeIndex;
private _chars;
private _hasFocus;
private _rawValue;
static readonly styles: import('lit').CSSResult;
private _patternRegex;
private _provider;
private _getContextValue;
connectedCallback(): void;
private _updateContext;
get value(): string;
set value(v: string);
protected willUpdate(changedProperties: PropertyValueMap<any>): void;
private _registerSlot;
private _unregisterSlot;
private _getCharAt;
private _setCharAt;
private _focusSlot;
private _handleKeydown;
private _handlePaste;
private _handleFocusIn;
private _handleFocusOut;
setActiveIndex(index: number): void;
get focusElement(): HTMLElement;
focus(): void;
setValidity(): void;
render(): import('lit-html').TemplateResult<1>;
private _renderFeedback;
private _handleSlotChange;
}