@oslokommune/punkt-elements/dist/base-elements/input-element.d.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { PropertyValues } from 'lit';
import { Booleanish } from '../shared-types';
import { ElementProps } from '../types/typeUtils';
import { PktOptionsSlotController } from '../controllers/pkt-options-controller';
import { PktElementWithSlot } from './element-with-slot';
/**
 * Base interface for input options used in select, combobox, etc.
 */
export interface PktInputOption {
    value: string;
    label?: string;
    selected?: boolean;
    disabled?: boolean;
    hidden?: boolean;
}
type Props = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'hasFieldset' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
/**
 * Base class for all Punkt input elements
 * @extends PktElementWithSlot
 */
export declare class PktInputElement<T = {}, TOption extends PktInputOption = PktInputOption> extends PktElementWithSlot<Props & T> {
    static get formAssociated(): boolean;
    internals: any;
    form: HTMLFormElement | null;
    checked?: boolean | string | null;
    defaultChecked?: boolean;
    multiple?: boolean;
    range?: boolean;
    type?: string;
    optionsController?: PktOptionsSlotController;
    _options?: TOption[];
    defaultValue: string | string[] | null;
    disabled: boolean;
    readonly: boolean;
    required: boolean;
    max: string | number | null;
    maxlength: number | null;
    min: string | number | null;
    minlength: number | null;
    step: number | null;
    ariaDescribedBy: string | null;
    ariaLabelledby: string | null;
    name: string;
    pattern: string | null;
    placeholder: string | null;
    id: string;
    counter: boolean;
    hasError: boolean;
    inline: boolean;
    hasFieldset: boolean;
    optionalTag: boolean;
    requiredTag: boolean;
    skipForwardTestid: boolean;
    useWrapper: Booleanish;
    fullwidth: boolean;
    counterMaxLength: number;
    errorMessage: string;
    helptext: string;
    helptextDropdown: string;
    helptextDropdownButton: string | null;
    label: string | null;
    optionalText: string;
    requiredText: string;
    tagText: string | null;
    dataTestid: string;
    touched: boolean;
    constructor();
    /**
     * Manages form validation state based on input validity
     * Called automatically by onChange, but can be called manually if needed
     *
     * @param input - The input element to validate (optional)
     * @protected
     */
    protected manageValidity(input?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
    /**
     * Updates the form value for this input
     * Handles both single values and arrays (for multi-select)
     *
     * @param value - The value(s) to set in the form
     * @protected
     */
    protected setFormValue(value: string | string[]): void;
    /**
     * Coordinates radio button group by unchecking other radios with the same name
     * Only affects radio inputs within the same form
     *
     * @protected
     */
    protected coordinateRadioGroup(): void;
    /**
     * Updates checked state and form value for checkbox and radio inputs
     * Triggers this when you want to set the value of the radio or checkbox input to the form
     * Do not use valueChanged or onChange for radios and checkboxes!
     *
     * @param value - The checked state (string 'true'/'false', or boolean)
     * @protected
     */
    protected valueChecked(value: string | boolean | null): void;
    /**
     * Called when value changes (text inputs, select, etc.)
     * Subclasses can override to add custom value transformation logic
     *
     * @param value - The new value
     * @param _old - The previous value
     * @protected
     * @example
     * ```typescript
     * protected valueChanged(value: string, old: string): void {
     *   const transformed = this.transformValue(value)
     *   super.valueChanged(transformed, old)
     * }
     * ```
     */
    protected valueChanged(value: string | string[] | null, _old: string | string[] | null): void;
    /**
     * Dispatches change and value-change events
     *
     * @param value - The value to include in the event detail
     * @protected
     */
    protected dispatchChangeEvents(value: unknown): void;
    /**
     * When input goes from content to no content
     * @protected
     */
    protected clearInputValue(): void;
    /**
     * When user enters the input, dispatch focus event
     * @protected
     */
    protected onFocus(): void;
    /**
     * When user leaves the input, dispatch blur event
     * @protected
     */
    protected onBlur(): void;
    /**
     * Trigger this when user types in the input
     * @protected
     */
    protected onInput(): void;
    /**
     * Normalizes value format based on multiple/range settings
     *
     * @param value - The value to normalize
     * @returns Normalized value (array if multiple/range, string otherwise)
     * @private
     */
    private normalizeValue;
    /**
     * Validates the input element(s)
     * @private
     */
    private validate;
    /**
     * Trigger this when you want to set the value of the input out to the form
     * Handles value normalization, form updates, validation, and event dispatching
     *
     * @param value - The value to set
     * @protected
     */
    protected onChange(value: string | string[]): void;
    /**
     * Called when the form is reset
     * Resets the input to its default state
     * @protected
     */
    protected formResetCallback(): void;
    protected updated(_changedProperties: PropertyValues): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
}
export {};