@oslokommune/punkt-elements 14.2.0 → 14.4.0

package/dist/index.d.ts

@@ -15,12 +15,17 @@ import { TAriaLive } from '../../../../../shared-types';
 import { TCardSkin } from '../../../../../shared-types';
 import { TemplateResult } from 'lit-html';
 import { TemplateResult as TemplateResult_2 } from 'lit';
+import { THeaderMenu } from '../../../../../shared-types';
+import { THeaderPosition } from '../../../../../shared-types';
+import { THeaderScrollBehavior } from '../../../../../shared-types';
 import { THeadingLevel } from '../../../../../shared-types';
 import { THeadingSize } from '../../../../../shared-types';
 import { THeadingWeight } from '../../../../../shared-types';
 import { THTMLButtonType } from '../../../../../shared-types';
 import { TLayout } from '../../../../../shared-types';
 import { TMessageboxSkin } from '../../../../../shared-types';
+import { TLogOutButtonPlacement as TPktHeaderLogOutButtonPlacement } from '../../../../../shared-types';
+import { TSlotMenuVariant } from '../../../../../shared-types';
 import { User } from '../../../../../shared-types';
 import { UserMenuItem } from '../../../../../shared-types';
 
@@ -251,7 +256,11 @@ export declare interface IPktHeader {
     /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
     tabletBreakpoint?: number;
     /** Which menu is initially open */
-    openedMenu?: TPktHeaderMenu;
+    openedMenu?: THeaderMenu;
+    /** Variant for the slot menu button. Default: 'icon-only' */
+    slotMenuVariant?: TSlotMenuVariant;
+    /** Text for the slot menu button. Default: 'Meny' */
+    slotMenuText?: string;
 }
 
 export declare type IPktHeaderRepresenting = Representing;
@@ -612,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;
@@ -653,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;
@@ -976,10 +985,12 @@ export declare class PktHeader extends PktElement<IPktHeader> implements IPktHea
     searchValue: string;
     mobileBreakpoint: number;
     tabletBreakpoint: number;
-    openedMenu: TPktHeaderMenu;
+    openedMenu: THeaderMenu;
     logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
     position: THeaderPosition;
     scrollBehavior: THeaderScrollBehavior;
+    slotMenuVariant: TSlotMenuVariant;
+    slotMenuText: string;
     hideLogo: Booleanish;
     compact: Booleanish;
     showSearch: Booleanish;
@@ -1008,10 +1019,12 @@ export declare class PktHeaderService extends PktElement<IPktHeader> implements
     searchValue: string;
     mobileBreakpoint: number;
     tabletBreakpoint: number;
-    openedMenu: TPktHeaderMenu;
+    openedMenu: THeaderMenu;
     logOutButtonPlacement: TPktHeaderLogOutButtonPlacement;
     position: THeaderPosition;
     scrollBehavior: THeaderScrollBehavior;
+    slotMenuVariant: TSlotMenuVariant;
+    slotMenuText: string;
     hideLogo: Booleanish;
     compact: Booleanish;
     showSearch: Booleanish;
@@ -1142,8 +1155,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;
@@ -1179,22 +1202,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>;
@@ -1358,6 +1483,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;
@@ -1389,7 +1596,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;
@@ -1410,16 +1617,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;
@@ -1545,7 +1748,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;
@@ -1558,7 +1761,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;
@@ -1577,6 +1780,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'>;
@@ -1622,15 +1827,11 @@ declare type TCounterPosition = 'top' | 'bottom';
 
 declare type TDay = `${number}${number}`;
 
-/**
- * Position options for header
- */
-declare type THeaderPosition = 'fixed' | 'relative';
+export { THeaderMenu }
 
-/**
- * Scroll behavior options for header
- */
-declare type THeaderScrollBehavior = 'hide' | 'none';
+export { THeaderPosition }
+
+export { THeaderScrollBehavior }
 
 declare type TISODate = `${TYear}-${TMonth}-${TDay}`;
 
@@ -1638,6 +1839,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';
@@ -1656,15 +1864,7 @@ export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right
 
 export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
 
-/**
- * Type for logout button placement
- */
-export declare type TPktHeaderLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
-
-/**
- * Type for which menu is currently open
- */
-export declare type TPktHeaderMenu = 'none' | 'slot' | 'search' | 'user';
+export { TPktHeaderLogOutButtonPlacement }
 
 export declare type TPktHeadingLevel = THeadingLevel;
 
@@ -1694,6 +1894,8 @@ export declare type TSelectOption = {
     hidden?: boolean;
 };
 
+export { TSlotMenuVariant }
+
 export declare type TTabItemSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
 
 export declare type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';