@oslokommune/punkt-elements 14.3.0 → 14.5.2

package/dist/index.d.ts

@@ -621,7 +621,7 @@ export declare class PktCard extends PktElement implements IPktCard {
 }
 
 export declare class PktCheckbox extends PktInputElement<Props_3> {
-    private inputRef;
+    inputRef: Ref<HTMLInputElement>;
     value: string;
     checkHelptext: string | null;
     defaultChecked: boolean;
@@ -662,8 +662,8 @@ export declare class PktCombobox extends PktInputElement implements IPktCombobox
     displayValueAs: string;
     tagPlacement: TPktComboboxTagPlacement | null;
     _options: IPktComboboxOption[];
+    _value: string[];
     private _isOptionsOpen;
-    private _value;
     private _userInfoMessage;
     private _addValueText;
     private _maxIsReached;
@@ -710,47 +710,6 @@ export declare class PktCombobox extends PktInputElement implements IPktCombobox
     private removeLastValue;
 }
 
-export declare class PktComponent extends PktElement {
-    /**
-     * Element attributes => props
-     * Example:
-     * <pkt-component string="hei" strings="hei,og,hallo" darkmode>
-     *  Hei!
-     * </pkt-component>
-     */
-    string: string;
-    strings: string[];
-    darkmode: boolean;
-    /**
-     * Private properties, for internal use only
-     */
-    private _list;
-    /**
-     * Runs on mount, used to set up various values and whatever you need to run
-     */
-    connectedCallback(): void;
-    /**
-     * Set up slot support for Light DOM
-     */
-    slotController: PktSlotController;
-    defaultSlot: Ref<HTMLElement>;
-    namedSlot: Ref<HTMLElement>;
-    constructor();
-    /**
-     * Render functions
-     */
-    render(): TemplateResult<1>;
-    private renderList;
-    /**
-     * Add other functionality under here
-     */
-    private doStuff;
-    /**
-     * Handlers for returning data from the component
-     */
-    private handleGreeting;
-}
-
 export declare class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
     private _cookieEventHandler?;
     devMode: boolean;
@@ -1155,8 +1114,18 @@ export declare class PktIcon extends PktElement<Props_5> {
  * Base class for all Punkt input elements
  * @extends PktElement
  */
-declare class PktInputElement<T = {}> extends PktElement<Props_2 & T> {
+declare class PktInputElement<T = {}, TOption extends PktInputOption = PktInputOption> extends PktElement<Props_2 & T> {
     static get formAssociated(): boolean;
+    internals: any;
+    form: HTMLFormElement | null;
+    checked?: boolean | string | null;
+    defaultChecked?: boolean;
+    multiple?: boolean;
+    range?: boolean;
+    type?: string;
+    slotController?: PktSlotController;
+    optionsController?: PktOptionsSlotController;
+    _options?: TOption[];
     defaultValue: string | string[] | null;
     disabled: boolean;
     readonly: boolean;
@@ -1192,22 +1161,124 @@ declare class PktInputElement<T = {}> extends PktElement<Props_2 & T> {
     tagText: string | null;
     dataTestid: string;
     touched: boolean;
-    _options?: any[];
     constructor();
-    protected manageValidity(input: HTMLInputElement): void;
+    /**
+     * 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;
 }
 
+/**
+ * Base interface for input options used in select, combobox, etc.
+ */
+declare interface PktInputOption {
+    value: string;
+    label?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+
 export declare class PktInputWrapper extends PktElement<Props_6> {
     defaultSlot: Ref<HTMLElement>;
     helptextSlot: Ref<HTMLElement>;
@@ -1371,6 +1442,88 @@ export declare class PktModal extends PktElement implements IPktModal {
     render(): TemplateResult<1>;
 }
 
+/**
+ * Base class for input elements that have options (select, combobox, etc.)
+ * Provides common functionality for managing options from props or slots
+ * @extends PktInputElement
+ */
+declare abstract class PktOptionsInputElement<T = {}, TOption extends PktInputOption = PktInputOption> extends PktInputElement<Props_10 & T, TOption> {
+    /**
+     * Options passed as a prop
+     * @private
+     */
+    protected _optionsProp: TOption[];
+    /**
+     * Internal state for parsed options
+     * @protected
+     */
+    _options: TOption[];
+    /**
+     * Controller for managing options from slots
+     */
+    optionsController: PktOptionsSlotController;
+    /**
+     * Public getter for options that includes selected state
+     * Override this in subclasses to customize the selected state logic
+     */
+    get options(): TOption[];
+    /**
+     * Public setter for options
+     */
+    set options(value: TOption[]);
+    /**
+     * Determines if an option is selected
+     * Subclasses should override this to implement their selection logic
+     *
+     * @param option - The option to check
+     * @returns True if the option is selected
+     * @protected
+     */
+    protected isOptionSelected(option: TOption): boolean;
+    /**
+     * Finds an option by its value
+     *
+     * @param value - The value to search for
+     * @returns The option if found, undefined otherwise
+     * @protected
+     */
+    protected findOptionByValue(value: string): TOption | undefined;
+    /**
+     * Gets all currently selected options
+     *
+     * @returns Array of selected options
+     * @protected
+     */
+    protected getSelectedOptions(): TOption[];
+    /**
+     * Parses options from either props or slot controller
+     * Call this in connectedCallback to initialize options
+     *
+     * @protected
+     */
+    protected parseOptions(): void;
+    /**
+     * Re-parse options when the component updates
+     * This ensures options stay in sync when they change dynamically
+     *
+     * @protected
+     */
+    protected willUpdate(_changedProperties: Map<PropertyKey, unknown>): void;
+}
+
+declare class PktOptionsSlotController implements ReactiveController {
+    host: LitElement & ReactiveControllerHost;
+    nodes: Element[];
+    options: TOption[];
+    observer: MutationObserver;
+    constructor(host: LitElement & ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private addNode;
+    private createOptions;
+    private handleMutations;
+}
+
 export declare class PktProgressbar extends PktElement implements IPktProgressbar {
     constructor();
     ariaLabel: string | null;
@@ -1402,7 +1555,7 @@ export declare class PktProgressbar extends PktElement implements IPktProgressba
 }
 
 declare class PktRadioButton extends PktInputElement<Props_7> {
-    private inputRef;
+    inputRef: Ref<HTMLInputElement>;
     value: string;
     checkHelptext: string | null;
     defaultChecked: boolean;
@@ -1423,16 +1576,12 @@ declare class PktRadioButton extends PktInputElement<Props_7> {
 export { PktRadioButton }
 export { PktRadioButton as PktRadiobutton }
 
-export declare class PktSelect extends PktInputElement implements IPktSelect {
-    private inputRef;
+export declare class PktSelect extends PktOptionsInputElement<{}, TSelectOption> implements IPktSelect {
+    inputRef: Ref<HTMLSelectElement>;
     private helptextSlot;
-    private _optionsProp;
     value: string;
-    _options: TSelectOption[];
     selectedIndex: number | null;
     selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined;
-    get options(): TSelectOption[];
-    set options(value: TSelectOption[]);
     constructor();
     connectedCallback(): void;
     add(item: HTMLOptionElement, before?: HTMLOptionElement | number): void;
@@ -1558,7 +1707,7 @@ export declare class PktTag extends PktElement<IPktTag> implements IPktTag {
 }
 
 export declare class PktTextarea extends PktInputElement<Props_8> {
-    private inputRef;
+    inputRef: Ref<HTMLTextAreaElement>;
     private helptextSlot;
     value: string;
     autocomplete: string;
@@ -1571,7 +1720,7 @@ export declare class PktTextarea extends PktInputElement<Props_8> {
 }
 
 export declare class PktTextinput extends PktInputElement<Props_9> {
-    private inputRef;
+    inputRef: Ref<HTMLTextAreaElement>;
     private helptextSlot;
     value: string;
     type: string;
@@ -1590,6 +1739,8 @@ export declare class PktTextinput extends PktInputElement<Props_9> {
 
 declare type Props = ElementProps<PktElement, 'strings' | 'role'>;
 
+declare type Props_10 = ElementProps<PktOptionsInputElement, 'options'>;
+
 declare type Props_2 = 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'>;
 
 declare type Props_3 = ElementProps<PktCheckbox, 'checkHelptext' | 'defaultChecked' | 'hasTile' | 'isSwitch' | 'labelPosition' | 'hideLabel' | 'tagText' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText'>;
@@ -1647,6 +1798,13 @@ declare type TLinkCardSkin = 'normal' | 'no-padding' | 'blue' | 'beige' | 'green
 
 declare type TMonth = `${number}${number}`;
 
+declare type TOption = {
+    value: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+};
+
 export declare type TPktAccordionSkin = TAccordionSkin;
 
 export declare type TPktButtonColor = 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';