@oslokommune/punkt-elements/dist/index.d.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { LitElement } from 'lit';
import { nothing } from 'lit';
import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
import { PropertyValues } from 'lit';
import { ReactiveController } from 'lit';
import { ReactiveControllerHost } from 'lit';
import { Ref } from 'lit/directives/ref.js';
import { TemplateResult } from 'lit-html';

declare type Booleanish = boolean | 'true' | 'false';

declare type Booleanish_2 = boolean | 'true' | 'false';

/**
 * We define all props as optional. Native HTML attributes are optional by default,
 * but the TS definition require either null or value. This way we can support showing a value as optional
 * and define a default value on the element itself
 */
declare type ElementProps<Element, PropKeys extends keyof Element> = Partial<Pick<Element, PropKeys>>;

declare interface IAriaAttributes {
    'aria-activedescendant'?: string;
    'aria-controls'?: string;
    'aria-describedby'?: string;
    'aria-details'?: string;
    'aria-errormessage'?: string;
    'aria-flowto'?: string;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-owns'?: string;
    'aria-roledescription'?: string;
    'aria-autocomplete'?: TAriaAutoComplete;
    'aria-checked'?: TAriaBooleanMixed;
    'aria-current'?: TAriaCurrent;
    'aria-disabled'?: TAriaBoolean;
    'aria-expanded'?: TAriaBoolean;
    'aria-haspopup'?: TAriaHasPopup;
    'aria-hidden'?: TAriaBoolean;
    'aria-invalid'?: TAriaInvalid;
    'aria-keyshortcuts'?: string;
    'aria-level'?: number;
    'aria-modal'?: TAriaBoolean;
    'aria-multiline'?: TAriaBoolean;
    'aria-multiselectable'?: TAriaBoolean;
    'aria-orientation'?: TAriaOrientation;
    'aria-placeholder'?: string;
    'aria-pressed'?: TAriaBooleanMixed;
    'aria-readonly'?: TAriaBoolean;
    'aria-required'?: TAriaBoolean;
    'aria-selected'?: TAriaBoolean;
    'aria-sort'?: TAriaSort;
    'aria-atomic'?: TAriaBoolean;
    'aria-busy'?: TAriaBoolean;
    'aria-live'?: TAriaLive;
    'aria-relevant'?: TAriaRelevant | string;
    'aria-colcount'?: number;
    'aria-colindex'?: number;
    'aria-colspan'?: number;
    'aria-rowcount'?: number;
    'aria-rowindex'?: number;
    'aria-rowspan'?: number;
    'aria-posinset'?: number;
    'aria-setsize'?: number;
    'aria-valuemax'?: number;
    'aria-valuemin'?: number;
    'aria-valuenow'?: number;
    'aria-valuetext'?: string;
}

export declare interface IPktAccordion {
    compact?: boolean;
    skin?: TPktAccordionSkin;
    ariaLabelledBy?: string;
}

/**
 * @param toggleProps
 *
 * @description Send in an "isOpen" boolean and "onToggleClick" function
 * to override the automatic toggling
 */
export declare interface IPktAccordionItem {
    defaultOpen?: boolean;
    id: string;
    title: string | React.ReactNode;
    skin?: TPktAccordionSkin;
    compact?: boolean;
    isOpen?: boolean;
}

declare interface IPktAlert {
    skin?: TAlertSkin;
    closeAlert?: boolean;
    title?: string;
    date?: string | null;
    ariaLive?: TAriaLive | null;
    'aria-live'?: TAriaLive | null;
    compact?: boolean;
    role?: string;
}

export declare interface IPktBackLink {
    href?: string;
    text?: string;
    ariaLabel?: string;
}

export declare interface IPktButton {
    iconName?: PktIconName;
    secondIconName?: PktIconName;
    mode?: TPktButtonMode;
    size?: TPktButtonSize;
    color?: TPktButtonColor;
    skin?: TPktButtonSkin;
    variant?: TPktButtonVariant;
    state?: TPktButtonState;
    type?: TPktButtonType;
    isLoading?: Booleanish;
    disabled?: Booleanish;
    loadingAnimationPath?: string;
}

declare 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 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[];
}

export declare interface IPktComboboxOption {
    description?: string;
    disabled?: boolean;
    fulltext?: string;
    label?: string;
    prefix?: string;
    selected?: boolean;
    tagSkinColor?: TTagSkin;
    userAdded?: boolean;
    value: string;
}

export declare 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 interface IPktHeading {
    size?: TPktHeadingSize;
    level?: TPktHeadingLevel;
    visuallyHidden?: boolean;
    align?: 'start' | 'center' | 'end';
}

declare interface IPktLinkCard {
    title?: string;
    href?: string;
    iconName?: string;
    external?: boolean;
    openInNewTab?: boolean;
    skin?: TLinkCardSkin;
}

declare interface IPktListbox {
    options: IPktComboboxOption[];
    isOpen: boolean;
    disabled: boolean;
    includeSearch: boolean;
    isMultiSelect: boolean;
    allowUserInput: boolean;
    maxIsReached: boolean;
    customUserInput: string | null;
    searchPlaceholder: string | null;
    searchValue: string | null;
    maxLength: number;
    userMessage: string | null;
}

export declare interface IPktLoader {
    /**
     * The `delay` prop controls how much time the loading should be given before the loader is displayed.
     * This is handy for situations where the load time might be so short that loader is not necessary.
     * Delay time is in milliseconds.
     */
    delay?: number;
    /**
     * The `inline` prop decides whether the loader should be displayed inline or not.
     */
    inline?: boolean;
    /**
     * The boolean 'isLoading' decides whether the loader or the children will be displayed.
     * If set to false, the children will be displayed.
     */
    isLoading?: boolean;
    /**
     * The message to display when the loader is loading.
     */
    message?: string | null;
    /**
     * The size of the loader. Default is "medium".
     */
    size?: TPktSize;
    /**
     * The variant of the loader. Default is "shapes" which is the OSLO wave loader.
     * Other variants are "blue" and "rainbow" which are spinner variants.
     */
    variant?: TPktLoaderVariant;
    /**
     * Override path to loading animations.
     */
    loadingAnimationPath?: string;
}

declare interface IPktMessagebox {
    skin?: TMessageboxSkin;
    title?: string;
    compact?: boolean;
    closable?: boolean;
}

declare interface IPktModal {
    headingText?: string;
    removePadding?: boolean;
    hideCloseButton?: boolean;
    closeOnBackdropClick?: boolean;
    closeButtonSkin?: 'blue' | 'yellow-filled';
    size?: TPktSize;
    variant?: 'dialog' | 'drawer';
    drawerPosition?: 'left' | 'right';
    transparentBackdrop?: boolean;
}

export declare interface IPktProgressbar {
    ariaLabel?: string | null;
    ariaLabelledby?: string | null;
    ariaLive?: TAriaLive | null;
    ariaValueText?: string | null;
    id?: string | null;
    role?: TProgressbarRole;
    skin?: TProgressbarSkin;
    statusPlacement?: TProgressbarStatusPlacement;
    statusType?: TProgressbarStatusType;
    title?: string | null;
    titlePosition?: TProgressbarTitlePosition;
    valueCurrent: number;
    valueMax?: number;
    valueMin?: number;
}

declare interface IPktSelect {
    options: TSelectOption[];
    value: string;
}

declare interface IPktTag {
    closeTag?: boolean;
    size?: TPktSize;
    skin?: TTagSkin;
    textStyle?: string | null;
    iconName?: PktIconName;
    type?: TTagType;
    ariaLabel?: IAriaAttributes['aria-label'] | null;
}

export declare class PktAccordion extends LitElement implements IPktAccordion {
    ariaLabelledBy: string;
    compact: boolean;
    skin: TPktAccordionSkin;
    updated(changedProperties: Map<string, any>): void;
    render(): TemplateResult<1>;
}

export declare class PktAccordionItem extends PktElement implements IPktAccordionItem {
    defaultOpen: boolean;
    title: string;
    skin: TPktAccordionSkin | undefined;
    compact: boolean;
    isOpen: boolean;
    accordionItemRef: Ref<HTMLDivElement>;
    defaultSlot: Ref<HTMLElement>;
    constructor();
    render(): TemplateResult<1>;
}

export declare class PktAlert extends PktElement implements IPktAlert {
    defaultSlot: Ref<HTMLElement>;
    constructor();
    compact: boolean;
    title: string;
    skin: TAlertSkin;
    ariaLive: TAriaLive;
    'aria-live': TAriaLive | null;
    closeAlert: boolean;
    date: string | null;
    role: string;
    _isClosed: boolean;
    connectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    protected updated(_changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
    private close;
}

export declare class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
    href: string;
    text: string;
    ariaLabel: string;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
    render(): TemplateResult<1>;
}

export declare class PktButton extends PktElement<IPktButton> implements IPktButton {
    slotController: PktSlotController;
    defaultSlot: Ref<HTMLElement>;
    constructor();
    iconName: string;
    secondIconName: string;
    mode?: TPktButtonMode;
    size: TPktButtonSize;
    color?: TPktButtonColor;
    skin: TPktButtonSkin;
    variant: TPktButtonVariant;
    state?: TPktButtonState;
    type: TPktButtonType;
    form: string | undefined;
    isLoading: Booleanish;
    disabled: Booleanish;
    loadingAnimationPath: string | undefined;
    connectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
}

export declare class PktCalendar extends PktElement {
    /**
     * Element attributes
     */
    multiple: boolean;
    maxMultiple: number;
    range: boolean;
    weeknumbers: boolean;
    withcontrols: boolean;
    selected: string | string[];
    earliest: string | null;
    latest: string | null;
    excludedates: Date[];
    excludeweekdays: string[];
    currentmonth: Date | null;
    /**
     * Strings
     */
    dayStrings: string[];
    dayStringsLong: string[];
    monthStrings: string[];
    weekString: string;
    prevMonthString: string;
    nextMonthString: string;
    /**
     * Private properties
     */
    private _selected;
    private year;
    private month;
    private week;
    private rangeHovered;
    private inRange;
    private focusedDate;
    private selectableDates;
    private currentmonthtouched;
    private tabIndexSet;
    /**
     * Runs on mount, used to set up various values and whatever you need to run
     */
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    updated(changedProperties: PropertyValues): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    convertSelected(): void;
    setCurrentMonth(): void;
    handleKeydown(e: KeyboardEvent): void;
    handleArrowKey(e: KeyboardEvent, direction: number): void;
    /**
     * Component functionality and render
     */
    render(): TemplateResult<1>;
    private renderDayNames;
    private renderMonthNav;
    private renderDayView;
    private renderCalendarBody;
    private isExcluded;
    isPrevMonthAllowed(): boolean;
    private prevMonth;
    isNextMonthAllowed(): boolean;
    private nextMonth;
    private changeMonth;
    private isInRange;
    private isRangeAllowed;
    private emptySelected;
    addToSelected(selectedDate: Date): void;
    removeFromSelected(selectedDate: Date): void;
    toggleSelected(selectedDate: Date): void;
    private handleRangeSelect;
    private handleRangeHover;
    handleDateSelect(selectedDate: Date | null): Promise<void> | undefined;
    focusOnCurrentDate(): void;
    closeEvent(e: FocusEvent): void;
    close(): void;
}

export declare class PktCard extends PktElement implements IPktCard {
    defaultSlot: Ref<HTMLElement>;
    constructor();
    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(): TemplateResult<1>;
    renderImage(): TemplateResult<1>;
    renderHeading(): TemplateResult<1>;
    renderLinkHeading(): TemplateResult<1>;
    renderSubheading(): TemplateResult<1>;
    renderHeader(): TemplateResult<1>;
    renderTags(): TemplateResult<1>;
    renderSlot(): TemplateResult<1>;
    renderMetadata(): TemplateResult<1>;
}

export declare class PktCheckbox extends PktInputElement {
    private inputRef;
    value: string;
    checkHelptext: string | null;
    defaultChecked: boolean;
    hasTile: boolean;
    isSwitch: boolean;
    labelPosition: 'right' | 'left';
    hideLabel: boolean;
    checked: boolean | string | null;
    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;
    render(): TemplateResult<1>;
    private toggleChecked;
}

export declare class PktCombobox extends PktInputElement implements IPktCombobox {
    private helptextSlot;
    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;
    private _options;
    private _isOptionsOpen;
    private _value;
    private _userInfoMessage;
    private _addValueText;
    private _maxIsReached;
    private _search;
    private _inputFocus;
    private _editingSingleValue;
    inputRef: Ref<HTMLInputElement>;
    arrowRef: Ref<HTMLButtonElement>;
    listboxRef: Ref<PktListbox>;
    focusRef: Ref<HTMLElement>;
    optionTagRef: Ref<HTMLElement>;
    connectedCallback(): void;
    updated(changedProperties: PropertyValues): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    render(): TemplateResult<1>;
    renderInputField(): TemplateResult<1>;
    renderSingleOrMultipleValues(): unknown;
    renderValueTag(option: IPktComboboxOption | null): "" | TemplateResult<1>;
    handleInput(e: InputEvent): void;
    private handleFocus;
    private handleFocusOut;
    private handleBlur;
    private handleInputClick;
    private handleArrowClick;
    private handleOptionToggled;
    private handleSearch;
    private handleInputKeydown;
    private handleTagRemove;
    private blurInput;
    private checkForMatches;
    private findValueInOptions;
    private findIndexInOptions;
    private isMaxItemsReached;
    toggleValue(value: string | null): void;
    private setSelected;
    private removeSelected;
    private addAllOptions;
    private removeAllSelected;
    private addValue;
    private removeValue;
    private addNewUserValue;
    private resetComboboxInput;
    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;
    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(): TemplateResult<1>;
}

export declare class PktDatepicker extends PktInputElement {
    /**
     * Element attributes and properties
     */
    value: string | string[];
    _value: string[];
    label: string;
    dateformat: string;
    multiple: boolean;
    maxlength: number | null;
    range: boolean;
    showRangeLabels: boolean;
    min: string | null;
    max: string | null;
    weeknumbers: boolean;
    withcontrols: boolean;
    excludedates: string[];
    excludeweekdays: string[];
    currentmonth: string | null;
    calendarOpen: boolean;
    timezone: string;
    inputClasses: {};
    buttonClasses: {};
    /**
     * Housekeeping / lifecycle methods
     */
    constructor();
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    updated(changedProperties: PropertyValues): void;
    /**
     * Element references
     */
    inputRef: Ref<HTMLInputElement>;
    inputRefTo: Ref<HTMLInputElement>;
    btnRef: Ref<HTMLButtonElement>;
    calRef: Ref<PktCalendar>;
    popupRef: Ref<HTMLDivElement>;
    helptextSlot: Ref<HTMLElement>;
    /**
     * Rendering
     */
    renderInput(): TemplateResult<1>;
    renderRangeInput(): TemplateResult<1>;
    renderMultipleInput(): TemplateResult<1>;
    renderTags(): TemplateResult<1>;
    renderCalendar(): TemplateResult<1>;
    render(): TemplateResult<1>;
    /**
     * Handlers
     */
    handleCalendarPosition(): void;
    addToSelected: (e: Event | KeyboardEvent) => void;
    private handleFocusOut;
    showCalendar(): Promise<void>;
    hideCalendar(): void;
    toggleCalendar(e: Event): Promise<void>;
}

/**
 * Base class for Punkt light DOM elements
 * This class extends PktShadowElement but renders in light DOM instead of shadow DOM
 * @extends PktShadowElement
 */
declare class PktElement<T = {}> extends PktShadowElement<T> {
    /**
     * Make sure the component renders in light DOM instead of shadow DOM
     */
    createRenderRoot(): this;
}

export declare class PktHeading extends PktShadowElement<IPktHeading> implements IPktHeading {
    size: TPktHeadingSize;
    level: TPktHeadingLevel;
    visuallyHidden: boolean;
    align: 'start' | 'center' | 'end';
    connectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    protected updated(_changedProperties: PropertyValues): void;
    private setLevel;
    private updateHostClasses;
    render(): TemplateResult<1>;
}

export declare class PktHelptext extends PktElement {
    defaultSlot: Ref<HTMLElement>;
    constructor();
    forId: string;
    helptext: string;
    helptextDropdown: string;
    helptextDropdownButton: string;
    isHelpTextOpen: boolean;
    filledSlots: Set<string | null | undefined>;
    updateSlots(filledSlots: Set<string | null | undefined>): void;
    render(): TemplateResult<1>;
}

export declare class PktIcon extends PktElement<Props_3> {
    path: string | undefined;
    name: PktIconName;
    private icon;
    private _updatedProps;
    connectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): Promise<void>;
    protected updated(_changedProperties: PropertyValues): Promise<void>;
    protected getIcon(name?: PktIconName): Promise<void>;
    render(): TemplateResult<1>;
}

/**
 * Base class for all Punkt input elements
 * @extends PktElement
 */
declare class PktInputElement<T = {}> extends PktElement<Props_2 & T> {
    static get formAssociated(): boolean;
    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: boolean;
    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();
    protected manageValidity(input: HTMLInputElement): void;
    protected setFormValue(value: string | string[]): void;
    protected valueChecked(value: string | boolean | null): void;
    protected valueChanged(value: string | string[] | null, _old: string | string[] | null): void;
    protected clearInputValue(): void;
    protected onFocus(): void;
    protected onBlur(): void;
    protected onInput(): void;
    protected onChange(value: string | string[]): void;
    protected formResetCallback(): void;
    protected updated(_changedProperties: PropertyValues): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
}

export declare class PktInputWrapper extends PktElement<Props_4> {
    defaultSlot: Ref<HTMLElement>;
    helptextSlot: Ref<HTMLElement>;
    constructor();
    /**
     * Element attributes
     */
    forId: string;
    label: string;
    helptext: string | null;
    helptextDropdown: string | null;
    helptextDropdownButton: string | null;
    counter: boolean;
    counterCurrent: number;
    counterMaxLength: number;
    counterError: string | null;
    counterPosition: TCounterPosition;
    optionalTag: boolean;
    optionalText: string;
    requiredTag: boolean;
    requiredText: string;
    tagText: string | null;
    hasError: boolean;
    errorMessage: string;
    disabled: boolean;
    inline: boolean;
    ariaDescribedby: string | undefined;
    hasFieldset: boolean;
    role: string | null;
    useWrapper: Booleanish_2;
    protected updated(changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
    private toggleDropdown;
    private handleLabelClick;
}

export declare class PktLink extends PktElement {
    defaultSlot: Ref<HTMLElement>;
    constructor();
    /**
     * Element attributes
     */
    href: string;
    iconName: string | undefined;
    iconPosition: string | undefined;
    external: boolean;
    target: string | null;
    render(): TemplateResult<1>;
}

export declare class PktLinkCard extends PktElement implements IPktLinkCard {
    defaultSlot: Ref<HTMLElement>;
    title: string;
    href: string;
    iconName: string;
    external: boolean;
    openInNewTab: boolean;
    skin: TLinkCardSkin;
    constructor();
    render(): TemplateResult<1>;
}

declare class PktListbox extends PktElement implements IPktListbox {
    id: string;
    label: string | null;
    options: IPktComboboxOption[];
    isOpen: boolean;
    disabled: boolean;
    includeSearch: boolean;
    isMultiSelect: boolean;
    allowUserInput: boolean;
    maxIsReached: boolean;
    customUserInput: string | null;
    searchPlaceholder: string | null;
    searchValue: string | null;
    maxLength: number;
    userMessage: string | null;
    private _selectedOptions;
    private _filteredOptions;
    connectedCallback(): void;
    updated(changedProperties: PropertyValues): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    render(): TemplateResult<1>;
    renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number): TemplateResult<1> | typeof nothing;
    renderList(): TemplateResult<1>;
    renderNewOptionBanner(): TemplateResult<1> | typeof nothing;
    renderMaximumReachedBanner(): TemplateResult<1> | typeof nothing;
    renderUserMessage(): TemplateResult<1> | typeof nothing;
    renderSearch(): TemplateResult<1> | typeof nothing;
    handleSearchInput(e: InputEvent): void;
    handleSearchKeydown(e: KeyboardEvent): void;
    handleOptionKeydown(e: KeyboardEvent): void;
    focusAndScrollIntoView(el: HTMLElement): void;
    focusNextOption(target: HTMLElement): void;
    focusPreviousOption(target: HTMLElement): void;
    focusFirstOption(): void;
    focusLastOption(): void;
    focusFirstOrSelectedOption(): void;
    toggleOption(option: IPktComboboxOption | HTMLElement): void;
    selectAll(): void;
    closeOptions(): void;
    filterOptions(): void;
    isLetterOrSpace(char: string): boolean;
    handleTypeAhead(char: string): void;
    getOptionElements(): HTMLElement[];
}

export declare class PktLoader extends PktElement implements IPktLoader {
    defaultSlot: Ref<HTMLElement>;
    constructor();
    delay: number;
    inline: boolean;
    isLoading: boolean;
    message: string | null;
    size: TPktSize;
    variant: TPktLoaderVariant;
    loadingAnimationPath: string | undefined;
    private _shouldDisplayLoader;
    connectedCallback(): void;
    updated(changedProperties: Map<string, unknown>): void;
    render(): TemplateResult<1>;
    private getVariant;
    private setupLoader;
}

export declare class PktMessagebox extends PktElement implements IPktMessagebox {
    defaultSlot: Ref<HTMLElement>;
    constructor();
    closable: boolean;
    compact: boolean;
    title: string;
    skin: TMessageboxSkin;
    _isClosed: boolean;
    protected updated(_changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
    private close;
}

export declare class PktModal extends PktElement implements IPktModal {
    headingText?: string;
    removePadding?: boolean;
    hideCloseButton?: boolean;
    closeOnBackdropClick?: boolean;
    closeButtonSkin?: 'blue' | 'yellow-filled';
    size?: TPktSize;
    variant?: 'dialog' | 'drawer';
    drawerPosition?: 'left' | 'right';
    transparentBackdrop?: boolean;
    defaultSlot: Ref<HTMLElement>;
    dialogRef: Ref<HTMLDialogElement>;
    _isOpen: boolean;
    constructor();
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
    private handleKeyDown;
    private handleBackdropClick;
    private isElementInViewport;
    close: (event: Event, bypassNativeClose?: boolean) => void;
    showModal: (event?: Event | null) => void;
    render(): TemplateResult<1>;
}

export declare class PktProgressbar extends PktElement implements IPktProgressbar {
    constructor();
    ariaLabel: string | null;
    ariaLabelledby: string | null;
    ariaValueText: string | null;
    ariaLive: TAriaLive;
    id: string;
    role: TProgressbarRole;
    skin: TProgressbarSkin;
    statusPlacement: TProgressbarStatusPlacement;
    statusType: TProgressbarStatusType;
    title: string;
    titlePosition: TProgressbarTitlePosition;
    valueCurrent: number;
    valueMax: number;
    valueMin: number;
    private labelWidth;
    private progressbarId;
    private computedAriaLabelledby;
    private computedAriaValueText;
    private labelRef;
    private progressBarRef;
    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
    render(): TemplateResult<1>;
    private setComputedValues;
    private syncAttributes;
    private _handleAttribute;
}

declare class PktRadioButton extends PktInputElement {
    private inputRef;
    value: string;
    checkHelptext: string | null;
    defaultChecked: boolean;
    hasTile: boolean;
    checked: boolean | string | null;
    type: string;
    tagText: string | null;
    optionalTag: boolean;
    optionalText: string;
    requiredTag: boolean;
    requiredText: string;
    _checked: boolean;
    connectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    render(): TemplateResult<1>;
    private toggleChecked;
}
export { PktRadioButton }
export { PktRadioButton as PktRadiobutton }

export declare class PktSelect extends PktInputElement implements IPktSelect {
    private inputRef;
    private helptextSlot;
    options: TSelectOption[];
    value: string;
    private _options;
    selectedIndex: number | null;
    selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined;
    constructor();
    connectedCallback(): void;
    add(item: HTMLOptionElement, before?: HTMLOptionElement | number): void;
    remove(item?: number): void;
    item(index: number): HTMLOptionElement | null | undefined;
    namedItem(name: string): HTMLOptionElement | null | undefined;
    showPicker(): void;
    attributeChangedCallback(name: string, _old: string, value: string): void;
    update(changedProperties: PropertyValues): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
    private returnNumberOrNull;
}

/**
 * Base class for Punkt shadow DOM elements
 * @extends LitElement
 */
declare class PktShadowElement<T = {}> extends LitElement {
    [key: string]: any;
    strings: any;
    role: string | null;
    /**
     * Here to support prop typing in Vue
     */
    $props: T & Props;
    /**
     * Add support for Hot Module Reloading in dev mode
     */
    hotReplacedCallback(): void;
    /**
     * Go through changed properties and find ReactNodes to render out
     */
    protected update(changedProperties: PropertyValues): void;
}

/**
 * Controls the distribution of nodes into slots WITHOUT using Shadow DOM.
 * This controller provides a lightweight alternative to Shadow DOM slot distribution,
 * allowing content to be distributed into specific elements while maintaining
 * style penetration and global CSS access.
 *
 * */
declare class PktSlotController implements ReactiveController {
    host: LitElement & ReactiveControllerHost;
    nodes: Element[];
    slots: Ref<HTMLElement>[];
    observer: MutationObserver;
    contentObserver: MutationObserver;
    filledSlots: Set<string | null | undefined>;
    skipOptions: boolean;
    private updatingSlots;
    constructor(host: LitElement & ReactiveControllerHost, ...slots: Ref<HTMLElement>[]);
    hostConnected(): void;
    hostDisconnected(): void;
    hostUpdated(): void;
    private updateNodes;
    private updateSlots;
    private handleMutations;
    private handleSlotMutations;
}

export declare class PktTag extends PktElement<IPktTag> implements IPktTag {
    slotController: PktSlotController;
    defaultSlot: Ref<HTMLElement>;
    constructor();
    /**
     * Element attributes
     */
    closeTag: boolean;
    size: TPktSize;
    skin: TTagSkin;
    textStyle: string | null;
    iconName: string | undefined;
    type: TTagType;
    ariaLabel: string | null;
    /**
     * Element state
     */
    _isClosed: boolean;
    _ariaDescription: string | null;
    /**
     * Lifecycle
     */
    protected firstUpdated(_changedProperties: PropertyValues): void;
    /**
     * Element functions
     */
    private close;
    render(): TemplateResult<1>;
}

export declare class PktTextarea extends PktInputElement {
    private inputRef;
    private helptextSlot;
    value: string;
    autocomplete: string;
    rows: number | null;
    counterCurrent: number;
    constructor();
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    updated(changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
}

export declare class PktTextinput extends PktInputElement<Props_5> {
    private inputRef;
    private helptextSlot;
    value: string;
    type: string;
    size: number | null;
    autocomplete: string | null;
    iconNameRight: string | null;
    prefix: string | null;
    suffix: string | null;
    omitSearchIcon: boolean;
    counterCurrent: number;
    constructor();
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    updated(changedProperties: PropertyValues): void;
    render(): TemplateResult<1>;
}

declare type Props = ElementProps<PktElement, 'strings' | 'role'>;

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<PktIcon, 'path' | 'name'>;

declare type Props_4 = ElementProps<PktInputWrapper, 'forId' | 'label' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'counter' | 'counterCurrent' | 'counterMaxLength' | 'optionalTag' | 'optionalText' | 'requiredTag' | 'requiredText' | 'tagText' | 'hasError' | 'errorMessage' | 'disabled' | 'inline' | 'ariaDescribedby' | 'hasFieldset' | 'useWrapper' | 'role'>;

declare type Props_5 = ElementProps<PktTextinput, 'value' | 'type' | 'size' | 'autocomplete' | 'iconNameRight' | 'prefix' | 'suffix' | 'omitSearchIcon'>;

declare type TAlertSkin = 'error' | 'success' | 'warning' | 'info';

declare type TAriaAutoComplete = 'none' | 'inline' | 'list' | 'both';

/**
 * aria.ts
 *
 * Typedefinisjoner for ARIA-attributter og roller.
 * Eksportert slik at de kan importere andre steder:
 *
 *   import type {
 *     TAriaAttributes,
 *     TAriaLive,
 *     // ...
 *   } from './aria-types';
 */
declare type TAriaBoolean = boolean | 'true' | 'false';

declare type TAriaBooleanMixed = TAriaBoolean | 'mixed';

declare type TAriaCurrent = TAriaBoolean | 'page' | 'step' | 'location' | 'date' | 'time';

declare type TAriaHasPopup = TAriaBoolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';

declare type TAriaInvalid = TAriaBoolean | 'grammar' | 'spelling';

declare type TAriaLive = 'off' | 'polite' | 'assertive';

declare type TAriaOrientation = 'horizontal' | 'vertical';

declare type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';

declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';

declare type TCardImageShape = 'square' | 'round';

declare type TCardPadding = 'none' | 'default';

declare type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';

declare type TCardTagPosition = 'top' | 'bottom';

declare type TCounterPosition = 'top' | 'bottom';

declare type TLayout = 'vertical' | 'horizontal';

declare type TLinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';

declare type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';

export declare type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';

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';

export declare type TPktButtonMode = 'light' | 'dark';

export declare type TPktButtonSize = 'small' | 'medium' | 'large';

export declare type TPktButtonSkin = 'primary' | 'secondary' | 'tertiary';

export declare type TPktButtonState = 'normal' | 'focus' | 'hover' | 'active';

export declare type TPktButtonType = 'button' | 'submit' | 'reset';

export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';

export declare type TPktComboboxTagPlacement = 'inside' | 'outside';

export declare type TPktHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

export declare type TPktHeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';

declare type TPktSize = 'small' | 'medium' | 'large';

export declare type TProgressbarRole = 'progressbar' | 'meter';

export declare type TProgressbarSkin = 'dark-blue' | 'light-blue' | 'green' | 'red';

export declare type TProgressbarStatusPlacement = 'center' | 'left' | 'following';

export declare type TProgressbarStatusType = 'none' | 'percentage' | 'fraction';

export declare type TProgressbarTitlePosition = 'left' | 'center';

export declare type TSelectOption = {
    value: string;
    label: string;
    selected?: boolean;
    disabled?: boolean;
    hidden?: boolean;
};

export declare type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';

export declare type TTagType = 'button' | 'reset' | 'submit';

export { }