@oslokommune/punkt-elements 16.8.2 → 16.9.1

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,97 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { PktElement } from '../../base-elements/element';
+export declare class PktCalendar extends PktElement {
+    selected: string | string[];
+    multiple: boolean;
+    maxMultiple: number;
+    range: boolean;
+    earliest: string | null;
+    latest: string | null;
+    excludedates: Date[];
+    excludeweekdays: string[];
+    weeknumbers: boolean;
+    withcontrols: boolean;
+    currentmonth: Date | null;
+    today: string | null;
+    dayStrings: string[];
+    dayStringsLong: string[];
+    monthStrings: string[];
+    weekString: string;
+    prevMonthString: string;
+    nextMonthString: string;
+    private _selected;
+    private inRange;
+    private rangeHovered;
+    private get todayDate();
+    private year;
+    private month;
+    private week;
+    private currentmonthtouched;
+    private focusedDate;
+    private selectableDates;
+    private tabIndexSet;
+    /**
+     * Lifecycle methods
+     */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Date and selection management
+     */
+    private convertSelected;
+    private setCurrentMonth;
+    /**
+     * Keyboard navigation
+     */
+    private handleKeydown;
+    private handleArrowKey;
+    /**
+     * Rendering methods
+     */
+    render(): TemplateResult<1>;
+    private renderMonthNavButton;
+    private renderDayNames;
+    private renderMonthNav;
+    private getDayViewData;
+    private getDateConstraints;
+    private isDayDisabled;
+    private calculateTabIndex;
+    private getDayCellClasses;
+    private getDayButtonClasses;
+    private handleDayFocus;
+    private renderDayView;
+    private renderEmptyDayCell;
+    private renderWeekRow;
+    private renderCalendarBody;
+    /**
+     * Date validation
+     */
+    private isExcluded;
+    /**
+     * Month navigation
+     */
+    isPrevMonthAllowed(): boolean;
+    private prevMonth;
+    isNextMonthAllowed(): boolean;
+    private nextMonth;
+    private changeMonth;
+    /**
+     * Date selection logic
+     */
+    private emptySelected;
+    private normalizeSelected;
+    addToSelected(selectedDate: Date): void;
+    removeFromSelected(selectedDate: Date): void;
+    toggleSelected(selectedDate: Date): void;
+    private isRangeAllowed;
+    private handleRangeSelect;
+    private handleRangeHover;
+    handleDateSelect(selectedDate: Date | null): Promise<void>;
+    /**
+     * Focus management and event handlers
+     */
+    focusOnCurrentDate(): void;
+    closeEvent(e: FocusEvent): void;
+    close(): void;
+}

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,3 @@
+import { PktCalendar } from './calendar';
+export { PktCalendar };
+export default PktCalendar;

package/dist/components/card/card.d.ts

@@ -0,0 +1,64 @@
+import { IPktTag } from '../tag';
+import { PktElementWithSlot } from '../../base-elements/element-with-slot';
+import { IPktHeading } from '../heading';
+import { IAriaAttributes, TCardSkin, TLayout } from '../../shared-types';
+export type { TCardSkin, TLayout };
+export type TCardPadding = 'none' | 'default';
+export type TCardImageShape = 'square' | 'round';
+export type TCardTagPosition = 'top' | 'bottom';
+export interface IPktCard {
+    ariaLabel?: IAriaAttributes['aria-label'];
+    metaLead?: string | null;
+    metaTrail?: string | null;
+    layout?: TLayout;
+    heading?: string;
+    headingLevel?: IPktHeading['level'];
+    image?: {
+        src: string;
+        alt: string;
+    };
+    imageShape?: TCardImageShape;
+    clickCardLink?: string | null;
+    openLinkInNewTab?: boolean | null;
+    borderOnHover?: boolean | null;
+    padding?: TCardPadding;
+    skin?: TCardSkin;
+    subheading?: string;
+    tagPosition?: TCardTagPosition;
+    tags?: (Omit<IPktTag, 'closeTag'> & {
+        text: string;
+    })[];
+}
+export declare class PktCard extends PktElementWithSlot implements IPktCard {
+    ariaLabel: string;
+    metaLead: string | null;
+    borderOnHover: boolean;
+    clickCardLink: IPktCard['clickCardLink'];
+    metaTrail: string | null;
+    layout: TLayout;
+    heading: string;
+    headinglevel: IPktHeading['level'];
+    image: {
+        src: string;
+        alt: string;
+    };
+    imageShape: TCardImageShape;
+    openLinkInNewTab: boolean;
+    padding: TCardPadding;
+    skin: TCardSkin;
+    subheading: string;
+    tagPosition: 'top' | 'bottom';
+    tags: (Omit<IPktTag, 'closeTag'> & {
+        text: string;
+    })[];
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    renderImage(): import('lit-html').TemplateResult<1>;
+    renderHeading(): import('lit-html').TemplateResult<1>;
+    renderLinkHeading(): import('lit-html').TemplateResult<1>;
+    renderSubheading(): import('lit-html').TemplateResult<1>;
+    renderHeader(): import('lit-html').TemplateResult<1>;
+    renderTags(): import('lit-html').TemplateResult<1>;
+    renderSlot(): import('lit-html').TemplateResult<1>;
+    renderMetadata(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/card/card.test.d.ts

@@ -0,0 +1,22 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface CardTestConfig extends BaseTestConfig {
+    skin?: string;
+    layout?: string;
+    padding?: string;
+    borderOnHover?: boolean;
+    heading?: string;
+    subheading?: string;
+    headingLevel?: number;
+    href?: string;
+    linkText?: string;
+    image?: string;
+    imageAlt?: string;
+    tags?: string;
+    metaPrefix?: string;
+    metaLabel?: string;
+    metaDate?: string;
+}
+export declare const createCardTest: (config?: CardTestConfig) => Promise<{
+    container: HTMLElement;
+    card: import('./card').PktCard;
+}>;

package/dist/components/card/index.d.ts

@@ -0,0 +1,3 @@
+import { PktCard, TCardSkin, TLayout, TCardPadding, TCardImageShape, TCardTagPosition } from './card';
+export { PktCard, TCardSkin, TLayout, TCardPadding, TCardImageShape, TCardTagPosition };
+export default PktCard;

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,32 @@
+import { PktInputElement } from '../../base-elements/input-element';
+import { Ref } from 'lit/directives/ref.js';
+import { PropertyValues } from 'lit';
+import { ElementProps } from '../../types/typeUtils';
+type Props = ElementProps<PktCheckbox, 'checkHelptext' | 'defaultChecked' | 'hasTile' | 'isSwitch' | 'labelPosition' | 'hideLabel' | 'tagText' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText'>;
+export declare class PktCheckbox extends PktInputElement<Props> {
+    inputRef: Ref<HTMLInputElement>;
+    value: string;
+    checkHelptext: string | null;
+    defaultChecked: boolean;
+    hasTile: boolean;
+    isSwitch: boolean;
+    labelPosition: 'right' | 'left';
+    hideLabel: boolean;
+    checked: boolean | string | null;
+    indeterminate: boolean | 'true' | 'false' | '';
+    type: string;
+    tagText: string | null;
+    optionalTag: boolean;
+    optionalText: string;
+    requiredTag: boolean;
+    requiredText: string;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleClick;
+    private handleChange;
+    private toggleChecked;
+}
+export {};

package/dist/components/checkbox/checkbox.test.d.ts

@@ -0,0 +1,24 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface CheckboxTestConfig extends BaseTestConfig {
+    id?: string;
+    name?: string;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string;
+    checkHelptext?: string;
+    hasTile?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    optionalTag?: boolean;
+    requiredTag?: boolean;
+    tagText?: string;
+    labelPosition?: string;
+    hideLabel?: boolean;
+    isSwitch?: boolean;
+}
+export declare const createCheckboxTest: (config?: CheckboxTestConfig) => Promise<{
+    container: HTMLElement;
+    checkbox: import('./checkbox').PktCheckbox;
+}>;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { PktCheckbox } from './checkbox';
+export { PktCheckbox };
+export default PktCheckbox;

package/dist/components/combobox/combobox-base.d.ts

@@ -0,0 +1,74 @@
+import { Ref } from 'lit/directives/ref.js';
+import { PktInputElement } from '../../base-elements/input-element';
+import { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
+import { default as PktListbox } from '../listbox';
+/**
+ * Base class for PktCombobox.
+ * Declares all reactive properties, state, refs, and simple helpers.
+ */
+export declare class ComboboxBase extends PktInputElement {
+    constructor();
+    value: string | string[];
+    options: IPktComboboxOption[];
+    defaultOptions: IPktComboboxOption[];
+    allowUserInput: boolean;
+    typeahead: boolean;
+    includeSearch: boolean;
+    searchPlaceholder: string;
+    multiple: boolean;
+    maxlength: number | null;
+    displayValueAs: string;
+    tagPlacement: TPktComboboxTagPlacement | null;
+    isOpen: boolean;
+    _options: IPktComboboxOption[];
+    protected _value: string[];
+    protected _isOptionsOpen: boolean;
+    protected _userInfoMessage: string;
+    protected _addValueText: string | null;
+    protected _maxIsReached: boolean;
+    protected _search: string;
+    protected _inputFocus: boolean;
+    protected _internalValueSync: boolean;
+    protected _optionsFromSlot: boolean;
+    protected _lastSlotGeneration: number;
+    /** When true, the next handleFocus call will not reopen the dropdown. */
+    protected _suppressNextOpen: boolean;
+    protected readonly inputRef: Ref<HTMLInputElement>;
+    protected readonly triggerRef: Ref<HTMLDivElement>;
+    protected readonly listboxRef: Ref<PktListbox>;
+    protected get _hasTextInput(): boolean;
+    protected get _selectionDescription(): string | undefined;
+    /**
+     * Focuses the appropriate trigger element after closing the listbox.
+     * Select-only: the combobox input div. Editable: the text input.
+     */
+    protected focusTrigger(): void;
+    /**
+     * Parses the value prop into an internal string array.
+     */
+    protected parseValue(): string[];
+    /**
+     * Updates the _maxIsReached state flag.
+     */
+    protected updateMaxReached(): void;
+    /**
+     * Syncs the public value property from internal _value state and dispatches
+     * events if the value content changed. Always sets this.value as a string
+     * to prevent array→string reflect cascades.
+     */
+    protected syncValueAndDispatch(oldInternal: string[]): void;
+    /**
+     * Override onChange to skip the base class touched guard.
+     * The base class returns early on the first call (setting touched = true but not
+     * dispatching events). Combobox needs consistent event dispatch regardless of
+     * touched state.
+     */
+    protected onChange(value: string | string[]): void;
+    /**
+     * No-op override of the base class valueChanged.
+     * The base class version sets both this.value AND this._value, which creates
+     * an infinite _value → valueChanged → value → parseValue → _value loop.
+     * Combobox handles value sync and event dispatch in syncValueAndDispatch() instead.
+     */
+    protected valueChanged(): void;
+}

package/dist/components/combobox/combobox-handlers.d.ts

@@ -0,0 +1,28 @@
+import { ComboboxValue } from './combobox-value';
+/**
+ * Event handler layer for PktCombobox.
+ * Handles user interactions: input, focus, keyboard, clicks, tags.
+ */
+export declare class ComboboxHandlers extends ComboboxValue {
+    protected handleInput(e: InputEvent): void;
+    protected handleFocus(): void;
+    protected handleFocusOut(e: FocusEvent): void;
+    /**
+     * Shared close logic used by both focusout and outside-click handlers.
+     * Processes any pending input value, then closes the dropdown.
+     */
+    protected closeAndProcessInput(): void;
+    protected handleBlur(): void;
+    protected handleInputClick(e: MouseEvent): void;
+    protected handlePlaceholderClick(e: MouseEvent): void;
+    protected handleSelectOnlyKeydown(e: KeyboardEvent): void;
+    protected handleOptionToggled(e: CustomEvent): void;
+    protected handleSearch(e: CustomEvent): void;
+    protected handleInputKeydown(e: KeyboardEvent): void;
+    protected handleTagRemove(value: string | null): void;
+    protected getInsideTags(): HTMLElement[];
+    protected focusTag(index: number): void;
+    protected resetTagTabindices(): void;
+    protected handleTagKeydown(e: KeyboardEvent, index: number): void;
+    protected checkForMatches(): void;
+}

package/dist/components/combobox/combobox-types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Type definitions for the combobox component family.
+ * Re-exports from shared-types for backward compatibility.
+ */
+export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from '../../shared-types/combobox';

package/dist/components/combobox/combobox-utils.d.ts

@@ -0,0 +1,41 @@
+import { IPktComboboxOption } from '../../shared-types/combobox';
+/**
+ * Lit-specific utility functions for PktCombobox component.
+ *
+ * Framework-agnostic functions live in shared-utils/combobox/.
+ * Only Lit-specific functions (using Ref, in-place mutation) stay here.
+ */
+/**
+ * In-place option mutation helpers that preserve referential identity
+ * between this._options and this.options in the Lit component.
+ */
+export declare const selectionMutators: {
+    markOptionSelected(options: IPktComboboxOption[], value: string | null): void;
+    markOptionDeselected(options: IPktComboboxOption[], value: string | null): void;
+    markAllSelected(options: IPktComboboxOption[]): void;
+    markAllDeselected(options: IPktComboboxOption[]): void;
+    removeUserAddedOptions(options: IPktComboboxOption[]): IPktComboboxOption[];
+};
+/**
+ * Parses option elements from slot controller nodes into IPktComboboxOption[].
+ */
+export declare const slotUtils: {
+    parseOptionsFromSlot(nodes: Element[]): IPktComboboxOption[];
+};
+export declare const optionStateUtils: {
+    /**
+     * Ensures options have labels and fulltext set.
+     * Also syncs selected state with current values.
+     *
+     * IMPORTANT: Mutates options in place to preserve referential identity
+     * between this._options and this.options in the Lit component.
+     */
+    syncOptionsWithValues(options: IPktComboboxOption[], values: string[]): {
+        options: IPktComboboxOption[];
+        newValues: string[];
+    };
+    /**
+     * Merges user-added options with new options, preserving user additions.
+     */
+    mergeWithUserAdded(newOptions: IPktComboboxOption[], previousOptions: IPktComboboxOption[]): IPktComboboxOption[];
+};

package/dist/components/combobox/combobox-value.d.ts

@@ -0,0 +1,17 @@
+import { ComboboxBase } from './combobox-base';
+/**
+ * Value management layer for PktCombobox.
+ * Handles selection, deselection, user-added values, and input reset.
+ */
+export declare class ComboboxValue extends ComboboxBase {
+    toggleValue(value: string | null): void;
+    protected setSelected(value: string | null): void;
+    protected removeSelected(value: string | null): void;
+    protected addAllOptions(): void;
+    protected removeAllSelected(): void;
+    protected addValue(): void;
+    protected removeValue(value: string | null): void;
+    protected addNewUserValue(value: string | null): void;
+    protected resetComboboxInput(shouldResetInput?: boolean): void;
+    protected removeLastValue(e: Event): void;
+}

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,61 @@
+import { PropertyValues } from 'lit';
+import { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
+import { ComboboxHandlers } from './combobox-handlers';
+export type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
+export interface IPktCombobox {
+    allowUserInput?: boolean;
+    typeahead?: boolean;
+    disabled?: boolean;
+    displayValueAs?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    hasError?: boolean;
+    helptext?: string | null;
+    helptextDropdown?: string | null;
+    helptextDropdownButton?: string | null;
+    id?: string;
+    includeSearch?: boolean;
+    label?: string | null;
+    maxlength?: number | null;
+    minlength?: number | null;
+    multiple?: boolean;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    options?: IPktComboboxOption[];
+    defaultOptions?: IPktComboboxOption[];
+    placeholder?: string | null;
+    requiredTag?: boolean;
+    requiredText?: string;
+    searchPlaceholder?: string;
+    tagPlacement?: TPktComboboxTagPlacement | null;
+    tagText?: string | null;
+    value?: string | string[];
+    isOpen?: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+export declare class PktCombobox extends ComboboxHandlers implements IPktCombobox {
+    private handleBodyClick;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    disconnectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Override form reset to properly restore combobox state.
+     * The base class deselects all options and sets value/defaultValue, but
+     * combobox needs to re-sync _options with the restored values and clean up
+     * user-added options and UI state.
+     */
+    protected formResetCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderInputField;
+    private renderSingleOrMultipleValues;
+    private renderValueTag;
+}
+export default PktCombobox;

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,4 @@
+import { PktCombobox } from './combobox';
+export type { IPktCombobox, IPktComboboxOption, TPktComboboxTagPlacement } from './combobox';
+export { PktCombobox };
+export default PktCombobox;

package/dist/components/consent/consent.d.ts

@@ -0,0 +1,46 @@
+import { PropertyValues } from 'lit';
+import { PktElement } from '../../base-elements/element';
+declare global {
+    interface Window {
+        cookieBanner_devMode?: boolean;
+        cookieBanner_cookieDomain?: string | null;
+        cookieBanner_cookieSecure?: string | null;
+        cookieBanner_cookieExpiryDays?: string | null;
+        cookieBanner_googleAnalyticsId?: string | null;
+        cookieBanner_hotjarId?: string | null;
+        cookieBanner?: any;
+        __cookieEvents?: any;
+    }
+}
+export interface IPktConsent {
+    devMode?: boolean;
+    cookieDomain?: string | null;
+    cookieSecure?: string | null;
+    cookieExpiryDays?: string | null;
+    hotjarId?: string | null;
+    googleAnalyticsId?: string | null;
+    i18nLanguage?: string;
+    triggerType?: 'button' | 'link' | 'footerlink' | 'icon' | null;
+    triggerText?: string | null;
+}
+export declare class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
+    private _cookieEventHandler?;
+    devMode: boolean;
+    hotjarId: string | null;
+    googleAnalyticsId: string | null;
+    cookieDomain: string | null;
+    cookieSecure: string | null;
+    cookieExpiryDays: string | null;
+    triggerType: 'button' | 'link' | 'footerlink' | 'icon' | null;
+    triggerText: string | null;
+    i18nLanguage: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    returnJsonOrObject(obj: any): any;
+    emitCookieConsents(consent: any): void;
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+    triggerInit(): void;
+    openModal(e: Event): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/consent/consent.test.d.ts

@@ -0,0 +1,16 @@
+import { BaseTestConfig } from '../../tests/test-framework';
+export interface ConsentTestConfig extends BaseTestConfig {
+    devMode?: boolean;
+    googleAnalyticsId?: string;
+    hotjarId?: string;
+    cookieDomain?: string;
+    cookieSecure?: string;
+    cookieExpiryDays?: string;
+    triggerType?: string;
+    triggerText?: string;
+    i18nLanguage?: string;
+}
+export declare const createConsentTest: (config?: ConsentTestConfig) => Promise<{
+    container: HTMLElement;
+    consent: import('./consent').PktConsent;
+}>;

package/dist/components/consent/index.d.ts

@@ -0,0 +1,4 @@
+import { PktConsent, IPktConsent } from './consent';
+export { PktConsent };
+export type { IPktConsent };
+export default PktConsent;

package/dist/components/consent/strings.d.ts

@@ -0,0 +1,85 @@
+export declare const consentStrings: {
+    i18n: {
+        nb: {
+            contentPresentation: {
+                title: string;
+                description: string[];
+                buttons: {
+                    accept: string;
+                    reject: string;
+                    settings: string;
+                };
+            };
+            contentSettings: {
+                title: string;
+                description: string[];
+                buttons: {
+                    back: string;
+                    save: string;
+                };
+            };
+        };
+        en: {
+            contentPresentation: {
+                title: string;
+                description: string[];
+                buttons: {
+                    accept: string;
+                    reject: string;
+                    settings: string;
+                };
+            };
+            contentSettings: {
+                title: string;
+                description: string[];
+                buttons: {
+                    back: string;
+                    save: string;
+                };
+            };
+        };
+    };
+    cookies: ({
+        name: string;
+        defaultValue: null;
+        i18n: {
+            nb: {
+                title: string;
+                description: string;
+                buttons: {
+                    yes: string;
+                    no: string;
+                };
+            };
+            en: {
+                title: string;
+                description: string;
+                buttons: {
+                    yes: string;
+                    no: string;
+                };
+            };
+        };
+    } | {
+        name: string;
+        defaultValue: boolean;
+        i18n: {
+            nb: {
+                title: string;
+                description: string;
+                buttons: {
+                    yes: string;
+                    no: string;
+                };
+            };
+            en: {
+                title: string;
+                description: string;
+                buttons: {
+                    yes: string;
+                    no: string;
+                };
+            };
+        };
+    })[];
+};