@postnord/web-components/types/components.d.ts

PostNord Web Components

/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { PnButtonAppearance, PnButtonVariant, PnColors, PnLanguages as PnLanguages1, PnMultiselectOption, PnZipCodeSearchLanguages } from "./index";
import { PnLanguages, PnMarkets, PnSteps, PnUploadFileItem } from "./globals/types";
import { CalendarView, PnDatePickerSelectEvent } from "./globals/date/index";
import { Event } from "./stencil-public-runtime";
export { PnButtonAppearance, PnButtonVariant, PnColors, PnLanguages as PnLanguages1, PnMultiselectOption, PnZipCodeSearchLanguages } from "./index";
export { PnLanguages, PnMarkets, PnSteps, PnUploadFileItem } from "./globals/types";
export { CalendarView, PnDatePickerSelectEvent } from "./globals/date/index";
export { Event } from "./stencil-public-runtime";
export namespace Components {
    /**
     * The `pn-accordion` is a wrapper for `pn-accordion-row` components.
     * This component gives the accordion rows some space between each one and provides the `single` feature.
     * Which will force the rule that only a single row to be open at one time.
     */
    interface PnAccordion {
        /**
          * Only allow a single row to be open at once.
         */
        "single": boolean;
        /**
          * Optional prop that removes the default white background on the accordion row
         */
        "transparent": boolean;
    }
    /**
     * Use this row component inside a `pn-accordion` to create an accordion group.
     * **Note**: you can use the `pn-accordion-row` without the parent accordion.
     * But you will have to style the gap between each row.
     */
    interface PnAccordionRow {
        /**
          * Optional unique id for the `summary` element.
          * @category ID
         */
        "buttonid"?: string;
        /**
          * Optional unique id for the `div` element containing the content.
          * @category ID
         */
        "contentid"?: string;
        /**
          * The label/title of the accordion row, you can also pass a slot with the name "label" if you want to put custom HTML content in there.
         */
        "label": string;
        /**
          * The open/close status of the accordion row.
         */
        "state"?: boolean;
        /**
          * Optional prop that removes the default white background on the accordion row
         */
        "transparent": boolean;
    }
    /**
     * The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute.
     * @nativeClick Use the `click` event to listen when the button is clicked.
     */
    interface PnButton {
        /**
          * Select the button appearance: default (blue), `light` (white) and  `warning` (red).
          * @category Visual
         */
        "appearance"?: PnButtonAppearance;
        /**
          * HTML aria-controls attribute.
          * @category HTML attributes
         */
        "ariacontrols"?: string;
        /**
          * HTML aria-current attribute.
          * @category HTML attributes
         */
        "ariacurrent"?: string;
        /**
          * HTML aria-expanded attribute.
          * @category HTML attributes
         */
        "ariaexpanded"?: string;
        /**
          * HTML aria-haspopup attribute.
          * @category HTML attributes
         */
        "ariahaspopup"?: string;
        /**
          * HTML aria-label attribute.
          * @category HTML attributes
         */
        "arialabel"?: string;
        /**
          * HTML aria-labelledby attribute.
          * @category HTML attributes
         */
        "arialabelledby"?: string;
        /**
          * HTML aria-pressed attribute.
          * @category HTML attributes
         */
        "ariapressed"?: string;
        /**
          * HTML ID.
          * @category HTML attributes
         */
        "buttonId"?: string;
        /**
          * The download attribute of the link.
          * @category Link
         */
        "download"?: string;
        /**
          * Connect this button to a HTML form.
          * @category Button
          * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form HTML button form}
         */
        "form"?: string;
        /**
          * Pass an href to make the button into link (a-tag).
          * @category Link
         */
        "href"?: string;
        /**
          * The SVG content of the icon you want.
          * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs pn-design-assets}
          * @category Icon
         */
        "icon"?: string;
        /**
          * Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.
          * @summary __You need an `icon` selected, as well as either `tooltip`, `arialabel` or `arialabelledby` for this to work__.
          * @see {@link icon }
          * @category Icon
         */
        "iconOnly": boolean;
        /**
          * The label of the button, this is the same as using the default slot.
         */
        "label"?: string;
        /**
          * Place the `icon` to the left of the button.
          * @summary __You need an `icon` selected for this to work__.
          * @see {@link icon }
          * @category Icon
         */
        "leftIcon": boolean;
        /**
          * Display the loading indicator.
          * @category Visual
         */
        "loading": boolean;
        /**
          * HTML tabindex.
          * @category HTML attributes
         */
        "noTab"?: boolean;
        /**
          * The rel attribute of the link.
          * @category Link
         */
        "rel"?: string;
        /**
          * Use the small button.
          * @category Visual
         */
        "small": boolean;
        /**
          * The target attribute of the link.
          * @category Link
         */
        "target"?: string;
        /**
          * When the user focus/hover the button, the `tooltip` text will show up.
          * @category Tooltip
         */
        "tooltip"?: string;
        /**
          * Prefer the tooltip to open upwards. Will still go downwards if there is no space.
          * @category Tooltip
         */
        "tooltipUp": boolean;
        /**
          * Select HTML button type.
          * @category Button
         */
        "type"?: 'button' | 'reset' | 'submit' | '';
        /**
          * Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).
          * @category Visual
         */
        "variant"?: PnButtonVariant;
    }
    /**
     * The open/closing of the dropdown is handled by the component itself.
     * @nativeClick Use the `click` event to listen when the button is clicked.
     */
    interface PnButtonDropdown {
        /**
          * Select between `light` and `warning`.
         */
        "appearance"?: PnButtonAppearance;
        /**
          * The optional SVG content of the icon you want.
         */
        "icon"?: string;
        /**
          * The required label on the button.
         */
        "label": string;
        /**
          * Open/close the dropdown without user interaction.
         */
        "open": boolean;
        /**
          * Smaller button.
         */
        "small": boolean;
        /**
          * Tooltip (required for Icon Only).
         */
        "tooltip": string;
        /**
          * Select between `outlined` and `borderless`.
         */
        "variant"?: PnButtonVariant;
    }
    /**
     * The card component is more than just a navigational element.
     * It is a flexible component that can be used as a product item, a clickable link card, etc...
     * Setting the `href` prop will transform the entire `pn-card` into a clickable element.
     * If you need content to be interactable inside the card, do not use the `href` prop.
     */
    interface PnCard {
        /**
          * Select image aspect ratio. Example: '3/3', '16/9'.
          * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio CSS documentation.}
          * @category Features
         */
        "aspectRatio"?: string | '3/3' | '16/9';
        /**
          * Set a HTML id for the card. Optional and not required.
         */
        "cardId"?: string;
        /**
          * Uee the horizontal card layout.
          * @category Features
         */
        "horizontal"?: boolean;
        /**
          * The card link.
          * @category Href
         */
        "href"?: string;
        /**
          * The link text.
          * @category Href
         */
        "hrefLabel"?: string;
        /**
          * The link icon. Defaults to `arrow_right` or `open_in_new` if `target="_blank"`.
          * @category Href
         */
        "icon"?: string;
        /**
          * Headline of the card. Will act as label for the link if there is no `href-label` set.
         */
        "label": string;
        /**
          * The label HTML tag. Default is `h3`.
         */
        "labelTag"?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
        /**
          * Set a smaller text above the `label` text.
         */
        "overline"?: string;
        /**
          * The rel attribute of the link.
          * @category Href
         */
        "rel"?: string;
        /**
          * Reverse the order of which the image will wrap.
          * @category Features
         */
        "reverse"?: boolean;
        /**
          * The target attribute of the link.
          * @category Href
         */
        "target"?: string;
        /**
          * Text content of the card.
         */
        "text"?: string;
    }
    /**
     * The `pn-checkbox` is built with a native `input[type="checkbox"]` in the background.
     * This means you can use native events to listen to the changes.
     * @nativeChange Use the `change` event to listen when the checkbox state is being toggled.
     */
    interface PnCheckbox {
        /**
          * A unique HTML ID for the checkbox.
         */
        "checkboxid": string;
        /**
          * Check the radio button.
         */
        "checked": boolean;
        /**
          * Disable the radio button.
          * @category State
         */
        "disabled": boolean;
        /**
          * This adds an optional helpertext element under the label
         */
        "helpertext"?: string;
        /**
          * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
          * @category Tile
         */
        "icon"?: string;
        /**
          * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state.
          * @category State
         */
        "indeterminate": boolean;
        /**
          * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox.
          * @category State
         */
        "invalid": boolean;
        /**
          * The checkbox label
         */
        "label"?: string;
        /**
          * The name of the checkbox group
         */
        "name": string;
        /**
          * Set the checkbox as required.
          * @category State
         */
        "required": boolean;
        /**
          * If set to true, this checkbox turns into a checkbox-tile.
          * @category Tile
         */
        "tile": boolean;
        /**
          * This will be emitted on change and input, like a native checkbox
         */
        "value": string;
    }
    /**
     * The `pn-choice-chip` is built with a native `input[type="checkbox|radio"]` in the background.
     * This means you can use native events to listen to the changes.
     * @nativeChange Use the `change` event to listen when the choice chip state is being toggled. Works for both checkbox/radio variant.
     */
    interface PnChoiceChip {
        /**
          * Precheck the choice chip
         */
        "checked"?: boolean;
        /**
          * A unique HTML id
         */
        "choiceid": string;
        /**
          * Disable the choice chip.
          * @category State
         */
        "disabled": boolean;
        /**
          * Include an icon
         */
        "icon"?: string;
        /**
          * The choice chip label
         */
        "label": string;
        /**
          * Set the size to large.
          * @category Size
         */
        "large": boolean;
        /**
          * The name of the checkbox group
         */
        "name"?: string;
        /**
          * Make the choice chip a radio
         */
        "radio": boolean;
        /**
          * Set the choice chip as required.
          * @category State
         */
        "required": boolean;
        /**
          * Set the size to small.
          * @category Size
         */
        "small": boolean;
        /**
          * This will be emitted on change and input
         */
        "value": string;
    }
    /**
     * The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value.
     * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
     * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
     */
    interface PnCounter {
        /**
          * Set a unique HTML ID for the counter
         */
        "counterid": string;
        /**
          * Set the counter as disabled.
          * @category State
         */
        "disabled": boolean;
        /**
          * Set a helpertext for the counter.
         */
        "helpertext"?: string;
        /**
          * Label for the counter
         */
        "label": string;
        /**
          * Text for the decrease button. Default is "Decrease".
          * @category Translation
         */
        "labelDecrease"?: string;
        /**
          * Text for the increase button. Default is "Increase".
          * @category Translation
         */
        "labelIncrease"?: string;
        /**
          * Set the language manually for the built in translations.
         */
        "language"?: PnLanguages;
        /**
          * Suggest values for the counter input.
          * @category HTML input
         */
        "list"?: string;
        /**
          * Maximum value.
          * @category HTML input
         */
        "max": number;
        /**
          * Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"
          * @category Translation
         */
        "maxMessage"?: string;
        /**
          * Minimum value.
          * @category HTML input
         */
        "min": number;
        /**
          * Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x"
          * @category Translation
         */
        "minMessage"?: string;
        /**
          * HTML input name.
          * @category HTML input
         */
        "name"?: string;
        /**
          * Set the counter as readonly.
          * @category State
         */
        "readonly": boolean;
        /**
          * Set the counter as required.
          * @category State
         */
        "required": boolean;
        /**
          * Increase/decrease the value in steps, default is 1.
          * @category HTML input
         */
        "step": number;
        /**
          * Set a predefined value
         */
        "value": number;
    }
    /**
     * The date picker allows a single or a range of dates to be selected.
     * Based on the `format` prop, separators will automatically be added if you type the date.
     * You can navigate the calendar grid with your keyboard.
     * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
     * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
     */
    interface PnDatePicker {
        /**
          * Set the input `autocomplete` attribute.
          * @category HTML attributes
         */
        "autocomplete"?: string;
        /**
          * Make the calendar open upwards by default. Opens downwards if there is not enough space.
          * @category Features
         */
        "calendarUp": boolean;
        /**
          * Set a custom ID for the calendar.
          * @category HTML attributes
         */
        "dateId": string;
        /**
          * If you use a format with an unknown length, disable the max length.
          * @category Features
         */
        "disableMaxLength"?: boolean;
        /**
          * Disable the automatic insertion of separators when typing in the input.
          * @category Features
         */
        "disableTypeAhead": boolean;
        /**
          * Remove the option to select dates on weekends.
          * @category Features
         */
        "disableWeekends": boolean;
        /**
          * Set the date picker as disabled.
          * @category State
         */
        "disabled": boolean;
        /**
          * Individual dates you want to disable. Use a comma separated string.  Remember to use the same format that you have in the `format` prop.
          * @see {@link format }
          * @example "YYYY-MM-DD,YYYY-MM-DD"
          * @category Features
         */
        "disabledDates"?: string;
        /**
          * Set a predefined value for the from date.
          * @see {@link range }
          * @see {@link format }
         */
        "end": string;
        /**
          * Placeholder for end date (defaults to the format prop).
          * @see {@link format }
          * @category HTML attributes
         */
        "endPlaceholder"?: string;
        /**
          * Set an error message for the date picker. Overwrites the helpertext if used at the same time.
          * @category Validation
         */
        "error"?: string;
        /**
          * Set the date format of the value.  While you can set any date value from the Dayjs documentation, we strongly recommend you pick a simple format that you can also type manually.
          * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
         */
        "format": string;
        /**
          * Provide a helpertext for the date input.
         */
        "helpertext"?: string;
        /**
          * Trigger the invalid state without an error message.
          * @category Validation
         */
        "invalid": boolean;
        /**
          * Set a label for the from date.
         */
        "labelFrom": string;
        /**
          * Set a label for the to date.
          * @see {@link range }
         */
        "labelTo"?: string;
        /**
          * Manually set language; this will be inherited from the topbar.
         */
        "language"?: PnLanguages;
        /**
          * Set the input `list` attribute for the first date input.
          * @category HTML attributes
         */
        "list"?: string;
        /**
          * Set the input `list` attribute for the second date input.
          * @category HTML attributes
         */
        "listEnd"?: string;
        /**
          * Latest date possible, this will determine how many years forward the date picker will show.  Remember to use the same format that you have in the `format` prop.
          * @see {@link format }
          * @example "2024-06-25"
          * @category Min/max date
         */
        "maxDate"?: string;
        /**
          * Earliest date possible, this will determine how many years back the date picker will show.  Remember to use the same format that you have in the `format` prop.
          * @see {@link format }
          * @example "2024-05-25"
          * @category Min/max date
         */
        "minDate"?: string;
        /**
          * HTML input name
          * @category HTML attributes
         */
        "name"?: string;
        /**
          * Set the HTML pattern prop on the input elements. Make sure it matches the format.
          * @category HTML attributes
         */
        "pattern"?: string;
        /**
          * Placeholder for the input field (defaults to the format prop).
          * @see {@link format }
          * @category HTML attributes
         */
        "placeholder"?: string;
        /**
          * Allow the selection of a date range.
          * @category Features
         */
        "range": boolean;
        /**
          * Set a limit on how many days one may select. By default, you can select an unlimited range.
          * @todo Create a range limit function.
          * @see {@link range }
          * @category Features
          * @hide true
         */
        "rangeLimit"?: number;
        /**
          * Set the date picker as readonly.
          * @category State
         */
        "readonly": boolean;
        /**
          * Set the date picker as required.
          * @category State
         */
        "required": boolean;
        /**
          * Set a predefined value for the from date.
          * @see {@link format }
         */
        "start": string;
        /**
          * The calendar grid is shown as default. You can set either `months` or `years` as your first choice.
          * @category Features
         */
        "view": CalendarView;
        /**
          * Show weekend numbers to the left of the calendar grid.
          * @category Features
         */
        "weekNumbers": boolean;
    }
    /**
     * The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.
     * However, you may include any type of input such as textareas, toggles and selects.
     */
    interface PnFieldset {
        /**
          * Disable all of the inputs inside of the fieldset.
         */
        "disabled": boolean;
        /**
          * Error message, applies warning styles and icon.
         */
        "error"?: string;
        /**
          * Give the fieldset a custom HTML id.
         */
        "fieldsetId": string;
        /**
          * The id of the form you want the fieldset to be part of. If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
         */
        "form"?: string;
        /**
          * Text message underneath the legend for more instruction or hints on how to fill in controls correctly.
         */
        "helpertext"?: string;
        /**
          * Set the fieldset as `invalid`, will add red error styles.
         */
        "invalid": boolean;
        /**
          * The legend provides a caption for the fieldset group. This should be a question or heading that describes the inputs/fields.
         */
        "legend": string;
        /**
          * Give the fieldset a HTML name.
         */
        "name"?: string;
    }
    /**
     * Users can drop files directly into the upload area of the component
     * or simply click on it to open their native file explorer.
     * @nativeChange Use the `change` event to listen when the input receives files.
     * @nativeCancel The `cancel` event lets you know the user canceled their selection.
     * Either via clicking on the "Cancel" button or pressing `ESC`.
     */
    interface PnFileUpload {
        /**
          * Set which file types the input accepts. Ex: .docs,.xml
          * @category HTML attributes
         */
        "accept": string;
        /**
          * Use the capture mode.
          * @category HTML attributes
         */
        "capture"?: '' | 'user' | 'environment';
        /**
          * Clear the selected files, state and input value.
         */
        "clearUpload": () => Promise<void>;
        /**
          * Disable the input.
          * @category HTML attributes
         */
        "disabled": boolean;
        /**
          * The helpertext defaults to "Supported formats {x} and max filesize {y}", if there is a value set for the prop `accept`.
         */
        "helpertext"?: string;
        /**
          * Always hide the progress bar, even when upload has begun.
          * @category Features
         */
        "hideProgress": boolean;
        /**
          * The default label is "Click or drag a file here".
         */
        "label"?: string;
        /**
          * Manually set the language.
          * @category Features
         */
        "language"?: PnLanguages;
        /**
          * Set maximum amount of files to be selected. Any value above 1 will force the `multiple` to be `true`.
          * @category HTML attributes
         */
        "limit": number;
        /**
          * Set the maximum upload size.
          * @category HTML attributes
         */
        "maxSize": string;
        /**
          * Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1.
          * @category HTML attributes
         */
        "multiple": boolean;
        /**
          * Set a HTML name.
          * @category HTML attributes
         */
        "name": string;
        /**
          * Remove the selected file.
         */
        "removeFile": (targetFile: PnUploadFileItem) => Promise<void>;
        /**
          * Set the input as required.
          * @category HTML attributes
         */
        "required"?: boolean;
        /**
          * Start the upload of all selected files (excludes invalid files).
         */
        "startUpload": () => Promise<void>;
        /**
          * Update an existing file.
         */
        "updateFile": (file: PnUploadFileItem, index?: any) => Promise<void>;
    }
    /**
     * The default market and language is SE/en.
     * Make sure you set the market **and** language prop.
     * Example: Setting the `language` prop `da` will not display anything, as `da` does not exist on the `SE` market.
     * @deprecated This component has been replaced with the {@link https://portal.postnord.com/web-components/?path=/docs/external-components-pn-footer-nav--docs pn-footer-nav}.
     */
    interface PnFooter {
        /**
          * Set the language for the footer.
         */
        "language"?: PnLanguages;
        /**
          * Set the market for the footer.
         */
        "market"?: PnMarkets;
    }
    interface PnHeader {
        /**
          * The href for the go back link. If this is provided a button be displayed.
         */
        "goBackHref"?: string;
        /**
          * The text for the back link.
         */
        "goBackText"?: string;
        /**
          * Heading text.
         */
        "heading": string;
        /**
          * Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no.
         */
        "language"?: PnLanguages;
        /**
          * Set a inner container max-width, any width CSS value is accepted.
         */
        "maxWidth"?: string;
    }
    /**
     * The `pn-icon` is a wrapper for an SVG string.
     * While its built with PostNords specific icon dimensions in mind (24x24px), you can use any SVG content in this component.
     * As long as its 3x3 in size, there should be no problem.
     * The color feature will not overwrite the color of flags.
     */
    interface PnIcon {
        /**
          * Color the icon with one of the follwing colors from our library.
          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs PostNord Colors (Storybook)}
         */
        "color"?: PnColors;
        /**
          * The SVG content of the icon you want to use.  Flags cannot be colored.
          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs PostNord Icons (Storybook)}
          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs PostNord Flags (Storybook)}
         */
        "icon": string;
        /**
          * Make the icon small (16 instead of 24px).
         */
        "small": boolean;
    }
    interface PnIllustration {
        /**
          * Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`)
         */
        "fill"?: boolean;
        /**
          * Set the height of the SVG element. Any valid CSS height value is allowed
         */
        "height"?: string;
        /**
          * The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height
         */
        "illustration": string;
        /**
          * Set the width of the SVG element. Any valid CSS width value is allowed
         */
        "width"?: string;
    }
    /**
     * The `pn-input` is a regular `input` but styled. This means you can use native events to listen to the changes.
     * Always use the `label` prop to make sure the input is accessible.
     * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
     * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
     */
    interface PnInput {
        /**
          * Set the ID of what this input controls.
          * @category HTML input
         */
        "ariacontrols"?: string;
        /**
          * While you can use the `aria-label`, using a `label` is far more accessible.
          * @category HTML input
         */
        "arialabel"?: string;
        /**
          * Let the browser know what type of autocorrects the input should use. Works much better if a `name` and `inputid` is supplied.
          * @see {@link name }
          * @see {@link inputid }
          * @category HTML input
         */
        "autocomplete"?: string;
        /**
          * Set the input as `disabled`.
          * @category State
         */
        "disabled": boolean;
        /**
          * Set the input as `invalid` and display an error message (applies the same style as `invalid`).  Error message; will take precedence over helpertext if both are provided.
          * @see {@link invalid Set invalid without an error message.}
          * @category Validation
         */
        "error"?: string;
        /**
          * Text message placed underneath the input field.
         */
        "helpertext"?: string;
        /**
          * Select an icon to display before the input field value. `icon` takes precedence over the `text-prefix` prop.
          * @see {@link textPrefix }
          * @category Visual
         */
        "icon": string;
        /**
          * Provide a unique HTML id to connect the input with the label. A unique uuid ID will be generated if this field is left empty.
         */
        "inputid": string;
        /**
          * Hint the browser about what type of virtual keyboard should be used. The browser will be able to decide this on its own most of the time, especially if you use the `type`, `name` and `inputid` props.  Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
          * @category HTML input
         */
        "inputmode"?: 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
        /**
          * Set the input as `invalid`. Provides a red color and red warning icon.
          * @see {@link error Provide an error message.}
          * @category Validation
         */
        "invalid": boolean;
        /**
          * Text label placed above the input field.
         */
        "label": string;
        /**
          * Set the language manually for the translations of show/hide/clear button text. Not needed if you have the pntopbar on the page.
         */
        "language"?: PnLanguages;
        /**
          * Point to a datalist element for this input.
          * @category HTML input
         */
        "list"?: string;
        /**
          * Set the `max` value of the `number` input.
          * @category HTML input
         */
        "max"?: number | string;
        /**
          * The maximum number of characters the user should be able to add, also adds a visible counter.
          * @category HTML input
         */
        "maxlength": number;
        /**
          * Set the `min` value of the `number` input.
          * @category HTML input
         */
        "min"?: number | string;
        /**
          * HTML input name. Setting a name will help the browser understand what type of data the input have and can better assist with autofill data based on previous entires much better.
          * @category HTML input
         */
        "name"?: string;
        /**
          * Pattern prop.
          * @category HTML input
         */
        "pattern"?: string;
        /**
          * Provide a placeholder text. Remember that this is no replacement for a label. The placeholder should be a nice addition to the label/helpertext, not important information.
          * @category HTML input
         */
        "placeholder"?: string;
        /**
          * Set the input as `readonly`.
          * @category State
         */
        "readonly": boolean;
        /**
          * Set the input as `required`.
          * @category State
         */
        "required": boolean;
        /**
          * Set a `step` for the number input.
          * @category HTML input
         */
        "step"?: number | string;
        /**
          * Set a small text before the input field value. Cannot be used together with an `icon` at the same time.
          * @see {@link icon }
          * @see {@link textSuffix }
          * @category Visual
         */
        "textPrefix": string;
        /**
          * Set a small text after the input field value. Cannot be used with the `text-prefix` prop at the same time.
          * @see {@link textPrefix }
          * @category Visual
         */
        "textSuffix": string;
        /**
          * pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`.
          * @category HTML input
         */
        "type"?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
        /**
          * Set the input as `valid`. Provides a green color and a check icon.
          * @category Validation
         */
        "valid"?: boolean;
        /**
          * Set the value of the input.
         */
        "value": string;
    }
    /**
     * Present content in a modal that overlays everything on the current page.
     * Use the prop `open` to toggle the visiblity.
     * Use the event `close` to determine when the modal is being closed by the user.
     */
    interface PnModal {
        /**
          * Bind to this property if you want to control the visibility of the modal from your own data.
         */
        "open": boolean;
    }
    /**
     * The `pn-multiselect` gets its options via javascript.
     * Native HTML does not accept arrays of objects. Most frameworks solves this automatically (Vue, react, etc...),
     * but keep this in mind if you use this component outside of a framework environment.
     * @nativeChange The `pn-multiselect` is built with `input[type=checkbox]` elements, so the `change` event works. However, we recommend the customEvents described above.
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-input-multiselect--docs#pn-multiselect%20(options) Options documentation}
     */
    interface PnMultiselect {
        /**
          * Set a custom value for the "Select all value" option.
          * @see {@link selectAll }
          * @category Features
         */
        "allValue"?: string;
        /**
          * Force the dropdown to always open downwards.
          * @category Features
         */
        "bottom"?: boolean;
        /**
          * Disable the select.
          * @category Validation
         */
        "disabled"?: boolean;
        /**
          * Display an error message and trigger the invalid state.
          * @category Validation
         */
        "error"?: string;
        /**
          * Display a helper text underneath the select
         */
        "helpertext"?: string;
        /**
          * Display an icon to the left of the select input
         */
        "icon"?: string;
        /**
          * Trigger the invalid state.
          * @category Validation
         */
        "invalid"?: boolean;
        /**
          * Decide how many items should be shown before ellipsis. Requires the `search` prop to work.
          * @see {@link search }
          * @category Features
         */
        "itemCount": number;
        /**
          * Label placed above the select
         */
        "label": string;
        /**
          * Manually set the language, not needed if you have the pnTopbar available
         */
        "language"?: PnLanguages;
        /**
          * Use a custom max-height for the dropdown list.
          * @description The component will automatically set the max height of the dropdown list on its own. It takes the `pn-topbar` into account and will open in the direction that fits best. Use this prop to override this behaviour and use a custom max-height.
          * @category Features
         */
        "maxHeight"?: string;
        /**
          * HTML name of the checkbox elements. Used for each checkbox inside the multiselect.
         */
        "name"?: string;
        /**
          * Array of options.
          * @hide true
         */
        "options": PnMultiselectOption[];
        /**
          * This is what will be shown on load if no value is used. The `placeholder` will override the default text used if you have the `search` prop active.
         */
        "placeholder"?: string;
        /**
          * Set the select as required.
          * @category Validation
         */
        "required"?: boolean;
        /**
          * Allow the user to search among the options. The selected options will now display underneath the multiselect element.
          * @category Features
         */
        "search"?: boolean;
        /**
          * Set the search query of the multiselect.
          * @see {@link search }
          * @category Features
         */
        "searchQuery"?: string;
        /**
          * Adds a "Select all" option into the list. If you use the search feature at the same time, clicking this option will only toggle the options found.
          * @see {@link search }
          * @category Features
         */
        "selectAll": boolean;
        /**
          * Select HTML id
         */
        "selectId": string;
        /**
          * HTML name of the input element.
         */
        "selectName"?: string;
        /**
          * Force the dropdown to always open upwards.
          * @category Features
         */
        "top"?: boolean;
    }
    interface PnOcrSearch {
        /**
          * The `language` property will be prioritized before the pnTopbar language.
         */
        "language"?: PnLanguages;
    }
    /**
     * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs} Use `pn-tablist` instead.
     */
    interface PnPageNav {
        /**
          * Pass a string which will be the text on the dropdown button.
         */
        "dropdown": string | boolean;
        /**
          * Set a unique HTML ID.
         */
        "navid": string;
        /**
          * Currently active menu item value
         */
        "value": string;
    }
    /**
     * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs} Use `pn-tablist` instead.
     */
    interface PnPageNavDropdownItem {
        /**
          * Ignore this, it's internal communication with parent.
          * @hide true
         */
        "active": boolean;
        /**
          * Pass an href to the items if you want to have links that lead outside of your app
         */
        "href": string;
        /**
          * The value that will be emitted upon selection, only pass this if the item is a link, if you want a button (for quick actions), omit this prop.
         */
        "value": string;
    }
    /**
     * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
     * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs} Use `pn-tablist` instead.
     */
    interface PnPageNavItem {
        /**
          * Pass an href to the items if you want to have links that lead outside of your app.
         */
        "href": string;
        /**
          * The SVG content of the icon you want.
         */
        "icon": string;
        /**
          * The item value. Used by `pn-page-nav` to determine pre-selected item.
         */
        "value": string;
    }
    /**
     * Accessible pagination needs each item to link to a different part of the document.
     * This means that you must `preventDefault` on the `MouseEvent` emitted from the `pageSelected` event if you have a SPA.
     * If you set a `page` value that is higher than `pages`, the component will automatically lower it to the `pages` value.
     */
    interface PnPagination {
        /**
          * Set a label for the pagination element for screen readers. It defaults to `Pagination`.
         */
        "label"?: string;
        /**
          * Manually set the language.
         */
        "language"?: PnLanguages;
        /**
          * Set which page the user is currently viewing. Use this to set an inital page or if the selected page is changed from outside this component.
          * @category Pages
         */
        "page": number;
        /**
          * Set how many pages are available.
          * @category Pages
         */
        "pages": number;
        /**
          * Set how many pages should be visible at one time. Use an odd number. Minimum is `5`.
          * @category Pages
         */
        "pagesVisible": number;
        /**
          * Set a HTML id on the pagination element.
         */
        "paginationId"?: string;
        /**
          * Allow the user to decide how many items should be shown per page. Make sure this value exists in the `rowsList` string.
          * @see {@link rowsList }
          * @category Rows per page
         */
        "rows": number;
        /**
          * Default label is "Items per page".
          * @see {@link rows }
          * @category Rows per page
         */
        "rowsLabel": string;
        /**
          * Set available items per page options the user can select. Use a comma separated string.
          * @see {@link rows }
          * @category Rows per page
         */
        "rowsList": string;
        /**
          * Set a custom URL template. Use `{page}` within the string to position where the dynamic page number should be.
         */
        "urlTemplate": string;
    }
    interface PnProgressBar {
        /**
          * Trigger an error and display a message
         */
        "error"?: string;
        /**
          * Set a label for the progress bar
         */
        "label"?: string;
        /**
          * Progress value, 0-100
         */
        "progress": number;
        /**
          * A unique HTML id fror the progress bar
         */
        "progressId": string;
        /**
          * Replaces the default progress percentage text
         */
        "progressText"?: string;
        /**
          * Text shown on success (100%)
         */
        "successText"?: string;
    }
    interface PnProgressIndicator {
        /**
          * Takes the index of the active step
         */
        "activeStep": number;
    }
    interface PnProgressIndicatorStep {
        /**
          * Set by the parent component. Do not use manually.
          * @hide true
         */
        "active"?: 'yes' | 'no';
        /**
          * Set by the parent component. Do not use manually.
          * @hide true
         */
        "activeStep": number;
        /**
          * Set the step as checked, meaning a white check mark will appear.
         */
        "checked": boolean;
        /**
          * Set by the parent component. Do not use manually.
          * @hide true
         */
        "index": number;
        /**
          * The step name.
         */
        "name": string;
    }
    /**
     * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...).
     */
    interface PnProgressStepper {
        /**
          * The current step of the progress stepper.
         */
        "currentStep": PnSteps;
        /**
          * Set custom label for the stepper, recommended default label is "Step".
         */
        "label"?: string;
        /**
          * Set the language manually, only use this prop if the pnTopbar is not loaded. Will not overwrite the `label` prop if used.
         */
        "language"?: PnLanguages;
        /**
          * Set a custom HTML id on the progress stepper element to associate progress bar with label.
         */
        "progressStepperId"?: string;
        /**
          * You can add a custom optional string to the label if you need a name for the current step.
         */
        "stepName"?: string;
        /**
          * Set total amount of steps, maximum `7` is allowed.
         */
        "totalSteps": PnSteps;
    }
    /**
     * The `pn-radio-button` is built with a native `input[type="radio"]` in the background.
     * This means you can use native events to listen to the changes.
     * @nativeChange Use the `change` event to listen when the radio state is being changed.
     */
    interface PnRadioButton {
        /**
          * Check the radio button
         */
        "checked": boolean;
        /**
          * Disable the radio button.
          * @category State
         */
        "disabled"?: boolean;
        /**
          * With this prop you can add an optional helper text element to radio button.
         */
        "helpertext"?: string;
        /**
          * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
          * @category Tile
         */
        "icon"?: string;
        /**
          * Trigger the red error state.
          * @category State
         */
        "invalid"?: boolean;
        /**
          * The radio button label
         */
        "label"?: string;
        /**
          * The name of the radio button group that will hold this button, like a native radio button (required)
         */
        "name": string;
        /**
          * Give the radio button a custom ID
         */
        "radioid": string;
        /**
          * Set the radio button as required.
          * @category State
         */
        "required"?: boolean;
        /**
          * Turn this radio-button into a radio-tile.
          * @category Tile
         */
        "tile"?: boolean;
        /**
          * This will be emitted on `change` and `input`, like a native radio button (required)
         */
        "value": string;
    }
    /**
     * There are no events or features other than the `icon`, `small` and `language` prop.
     * Our rule is to not have disabled buttons.
     * However, this component is an exception for a very specific use case regarding portal users.
     */
    interface PnReadOnlyButton {
        /**
          * The SVG content of the icon you want.
         */
        "icon"?: string;
        /**
          * If you're using a button with only an icon, button text is still REQUIRED for the tooltip.
         */
        "iconOnly": boolean;
        /**
          * Set the language manually.
         */
        "language"?: PnLanguages;
        /**
          * Icon on the left side instead of on the right.
         */
        "leftIcon": boolean;
        /**
          * Smaller button.
         */
        "small": boolean;
    }
    interface PnSearchField {
        /**
          * Allow the browser to autocomplete the search field.
         */
        "autocomplete"?: string;
        /**
          * Button type, options are `none` for no button, `icon` for a labelless button with just a search icon and `icon-inline` for a search button inside of the search field (this last option disables the clear field button).
          * @category Button
         */
        "button": '' | 'none' | 'icon' | 'icon-inline';
        /**
          * Label for the button element.
          * @category Button
         */
        "buttonLabel"?: string;
        /**
          * Light instead of dark search button.
          * @category Button
         */
        "buttonLight": boolean;
        /**
          * Disable the search field.
          * @category State
         */
        "disabled": boolean;
        /**
          * Provi