import { PropertyValueMap } from 'lit'; import { GenericFormElement } from '../../internal/mixin/genericFormElement'; /** * `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 {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} 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 { 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): 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; }