/* 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 { Components, PnActionMenuItem, PnButtonAppearance, PnButtonVariant, PnColors, PnLanguages, PnMultiselectOption, PnZipCodeSearchLanguages } from "./index"; import { Event } from "./stencil-public-runtime"; import { PnLanguages as PnLanguages1, PnMarkets, PnSearchFieldButton, PnUploadFileItem } from "./globals/types"; import { CalendarView, PnDatePickerSelectEvent } from "./globals/date/index"; export { Components, PnActionMenuItem, PnButtonAppearance, PnButtonVariant, PnColors, PnLanguages, PnMultiselectOption, PnZipCodeSearchLanguages } from "./index"; export { Event } from "./stencil-public-runtime"; export { PnLanguages as PnLanguages1, PnMarkets, PnSearchFieldButton, PnUploadFileItem } from "./globals/types"; export { CalendarView, PnDatePickerSelectEvent } from "./globals/date/index"; 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. * @since v7.8.0 * @default false */ "single": boolean; /** * Optional prop that removes the default white background on the accordion row. * @since v7.10.0 * @default false */ "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. * @default false */ "state"?: boolean; /** * Optional prop that removes the default white background on the accordion row. * @since v7.10.0 * @default false */ "transparent": boolean; } /** * Create a list of actions in an accessible way. * Option types include: * - Regular button, click and it will collapse the menu, * - Checkbox/radio, toggle the option on/off * - Link, behaves like a regular `a[href]` element. * You can group these actions in groups and/or sub menus. * - `group`, an array of options. The label will act as a title for the items. * - `options`, an array of options. These items will appear in a sub-menu that can be toggled. * @since v7.13.0 * @see {@link PnActionMenuItem } */ interface PnActionMenu { /** * Set any prop from the `pn-button` component here. * @see {@link Components.PnButton } */ "button": Components.PnButton; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * Set a custom ID for the menu. * @default this.id */ "menuId"?: string; /** * Prefer that the submenus opens to the left, if there is enough space. * @category Features * @default false */ "menuLeft"?: boolean; /** * Prefer that the menu open upwards, if there is enough space. * @category Features * @default false */ "menuUp"?: boolean; /** * Open/close the action menu manually. * @category Features * @default false */ "open"?: boolean; /** * Array of action menu options. * @see {@link PnActionMenuItem } * @default [] */ "options": PnActionMenuItem[]; } /** * 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 * @default '' */ "appearance"?: PnButtonAppearance; /** * HTML aria-controls attribute. * @category HTML attributes * @default null */ "ariacontrols"?: string; /** * HTML aria-current attribute. * @since v7.9.0 * @category HTML attributes * @default null */ "ariacurrent"?: string; /** * HTML aria-expanded attribute. * @category HTML attributes * @default null */ "ariaexpanded"?: string; /** * HTML aria-haspopup attribute. * @category HTML attributes * @default null */ "ariahaspopup"?: string; /** * HTML aria-label attribute. * @category HTML attributes * @default null */ "arialabel"?: string; /** * HTML aria-labelledby attribute. * @category HTML attributes * @default null */ "arialabelledby"?: string; /** * HTML aria-pressed attribute. * @category HTML attributes * @default null */ "ariapressed"?: string; /** * HTML ID. * @category HTML attributes * @default null */ "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 } * @since v7.4.0 * @category Icon * @default false */ "iconOnly"?: boolean; /** * The label of the button, this is the same as using the default slot. * @since v7.4.0 * @default '' */ "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 * @default false */ "leftIcon"?: boolean; /** * Display the loading indicator. * @category Visual * @default false */ "loading"?: boolean; /** * HTML tabindex. * @category HTML attributes * @default false */ "noTab"?: boolean; /** * The rel attribute of the link. * @category Link */ "rel"?: string; /** * Use the small button. * @category Visual * @default false */ "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. * @since v7.4.0 * @category Tooltip * @default false */ "tooltipUp"?: boolean; /** * Select HTML button type. * @category Button * @default 'button' */ "type"?: 'button' | 'reset' | 'submit' | ''; /** * Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background). * @category Visual * @default '' */ "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`. * @default '' */ "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. * @default false */ "open": boolean; /** * Smaller button. * @default false */ "small": boolean; /** * Tooltip (required for Icon Only). */ "tooltip": string; /** * Select between `outlined` and `borderless`. * @default '' */ "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. * @since v7.12.0 */ 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 * @default '' */ "aspectRatio"?: string | '3/3' | '16/9'; /** * Set a HTML id for the card. Optional and not required. * @default null */ "cardId"?: string; /** * Uee the horizontal card layout. * @category Features * @default false */ "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 * @default null */ "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`. * @default '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 * @default 'noopener noreferrer' */ "rel"?: string; /** * Reverse the order of which the image will wrap. * @category Features * @default false */ "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. * @default this.id */ "checkboxid"?: string; /** * Check the checkbox. * @default false */ "checked"?: boolean; /** * Disable the checkbox. * @category State * @default false */ "disabled"?: boolean; /** * Allow the checkbox to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden. The prop `tile` must be used at the same time. * @see {@link tile } * @since v7.17.0 * @category Tile * @default false */ "expand"?: boolean; /** * This adds an optional helpertext 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. * @see {@link tile } * @category Tile * @default null */ "icon"?: string; /** * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. * @category State * @default false */ "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 * @default false */ "invalid"?: boolean; /** * The checkbox label */ "label"?: string; /** * The name of the checkbox group. */ "name"?: string; /** * Set the checkbox as required. * @category State * @default false */ "required"?: boolean; /** * Turn the checkbox into a clickable tile. A border and padding is added. **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements. * @category Tile * @default false */ "tile"?: boolean; /** * This will be emitted on change and input events. */ "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 * @default false */ "checked"?: boolean; /** * A unique HTML id * @default `pn-choice-chip-${uuidv4()}` */ "choiceid": string; /** * Disable the choice chip. * @category State * @default false */ "disabled": boolean; /** * Include an icon */ "icon"?: string; /** * The choice chip label */ "label": string; /** * Set the size to large. * @category Size * @default false */ "large": boolean; /** * The name of the checkbox group */ "name"?: string; /** * Make the choice chip a radio * @default false */ "radio": boolean; /** * Set the choice chip as required. * @category State * @default false */ "required": boolean; /** * Set the size to small. * @category Size * @default false */ "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 { /** * Use the compact label variant. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Set a unique HTML ID for the counter * @default this.id */ "counterid": string; /** * Set the counter as disabled. * @category State * @default false */ "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. * @default null */ "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 * @default false */ "readonly": boolean; /** * Set the counter as required. * @category State * @default false */ "required": boolean; /** * Increase/decrease the value in steps, default is 1. * @category HTML input * @default 1 */ "step": number; /** * Set a predefined value * @default 0 */ "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. * @since v7.6.0 * @category Features * @default false */ "calendarUp": boolean; /** * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Set a custom ID for the calendar. * @since v7.6.0 * @category HTML attributes * @default this.id */ "dateId": string; /** * If you use a format with an unknown length, disable the max length. * @category Features * @default false */ "disableMaxLength"?: boolean; /** * Disable the automatic insertion of separators when typing in the input. * @since v7.6.0 * @category Features * @default false */ "disableTypeAhead": boolean; /** * Remove the option to select dates on weekends. * @category Features * @default false */ "disableWeekends": boolean; /** * Set the date picker as disabled. * @since v7.6.0 * @category State * @default false */ "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 } * @default '' */ "end": string; /** * Placeholder for end date (defaults to the format prop). * @see {@link format } * @category HTML attributes * @default this.format */ "endPlaceholder"?: string; /** * Set an error message for the date picker. Overwrites the helpertext if used at the same time. * @since v7.6.0 * @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. * @since v7.6.0 * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.} * @default 'YYYY-MM-DD' */ "format": string; /** * Provide a helpertext for the date input. */ "helpertext"?: string; /** * Trigger the invalid state without an error message. * @since v7.6.0 * @category Validation * @default false */ "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. * @default null */ "language"?: PnLanguages; /** * Set the input `list` attribute for the first date input. * @since v7.6.0 * @category HTML attributes */ "list"?: string; /** * Set the input `list` attribute for the second date input. * @since v7.6.0 * @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 * @default null */ "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 * @default null */ "minDate"?: string; /** * HTML input name * @since v7.6.0 * @category HTML attributes */ "name"?: string; /** * Set the HTML pattern prop on the input elements. Make sure it matches the format. * @since v7.6.0 * @category HTML attributes */ "pattern"?: string; /** * Placeholder for the input field (defaults to the format prop). * @see {@link format } * @category HTML attributes * @default this.format */ "placeholder"?: string; /** * Allow the selection of a date range. * @category Features * @default false */ "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. * @since v7.6.0 * @category State * @default false */ "readonly": boolean; /** * Set the date picker as required. * @category State * @default false */ "required": boolean; /** * Set a predefined value for the from date. * @see {@link format } * @default '' */ "start": string; /** * The calendar grid is shown as default. You can set either `months` or `years` as your first choice. * @since v7.6.0 * @category Features * @default CALENDAR */ "view": CalendarView; /** * Show weekend numbers to the left of the calendar grid. * @since v7.6.0 * @category Features * @default false */ "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. * @default false */ "disabled": boolean; /** * Error message, applies warning styles and icon. */ "error"?: string; /** * Give the fieldset a custom HTML id. * @default this.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. * @default false */ "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. * @since v7.1.0 * @category HTML attributes */ "capture"?: '' | 'user' | 'environment'; /** * Clear the selected files, state and input value. */ "clearUpload": () => Promise; /** * Disable the input. * @category HTML attributes * @default false */ "disabled": boolean; /** * The helpertext defaults to "Supported formats {x} and max filesize {y}", if there is a value set for the prop `accept`. * @since v7.1.0 */ "helpertext"?: string; /** * Always hide the progress bar, even when upload has begun. * @category Features * @default false */ "hideProgress": boolean; /** * The default label is "Click or drag a file here". * @since v7.1.0 */ "label"?: string; /** * Manually set the language. * @category Features * @default null */ "language"?: PnLanguages; /** * Set maximum amount of files to be selected. Any value above 1 will force the `multiple` to be `true`. * @category HTML attributes * @default 1 */ "limit": number; /** * Set the maximum upload size. * @category HTML attributes * @default '' */ "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. * @since v7.1.0 * @category HTML attributes */ "name": string; /** * Remove the selected file. */ "removeFile": (targetFile: PnUploadFileItem) => Promise; /** * Set the input as required. * @category HTML attributes * @default false */ "required"?: boolean; /** * Start the upload of all selected files (excludes invalid files). */ "startUpload": () => Promise; /** * Update an existing file. */ "updateFile": (file: PnUploadFileItem, index?: any) => Promise; } /** * 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 pn-footer-nav. * @see {@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. * @default null */ "language"?: PnLanguages; /** * Set the market for the footer. * @default null */ "market"?: PnMarkets; } /** * The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu. */ 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; /** * The `h1` text content. */ "heading": string; /** * Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no. * @default null */ "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)} * @default 'gray900' */ "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)} * @default '' */ "icon": string; /** * Make the icon small (16 instead of 24px). * @default false */ "small": boolean; } interface PnIllustration { /** * Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`) * @default false */ "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; /** * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Set the input as `disabled`. * @category State * @default false */ "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. * @default this.id */ "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 * @default false */ "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. * @default null */ "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 * @default false */ "readonly": boolean; /** * Set the input as `required`. * @category State * @default false */ "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 * @default 'text' */ "type"?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | ''; /** * Set the input as `valid`. Provides a green color and a check icon. * @category Validation * @default false */ "valid"?: boolean; /** * Set the value of the input. * @default '' */ "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 `modalToggle` to determine when the modal is being closed/opened by the user. */ interface PnModal { /** * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight. Do not use if you have a lot of conditional rendering inside the modal. * @since v7.14.0 * @default false */ "allowOverflow"?: boolean; /** * Set a descriptive text for the modal. * @since v7.14.0 */ "helpertext"?: string; /** * Hide the close button. If you disable this, make sure you build your own cancel button. * @since v7.14.0 * @category Features * @default false */ "hideClose"?: boolean; /** * Set a label for the modal. * @since v7.14.0 */ "label"?: string; /** * Set the language. * @since v7.14.0 * @default null */ "language"?: PnLanguages; /** * Define your own max width of the modal. Default is `45em`. * @category Visual * @since v7.14.0 * @default null */ "maxWidth"?: string; /** * Bind to this property if you want to control the visibility of the modal from your own data. * @category Features * @default false */ "open"?: boolean; /** * Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. * @since v7.14.0 * @category Features * @default false */ "persistent"?: boolean; /** * Use the `sheet` visual. Aligns the modal to the right. * @since v7.14.0 * @category Visual * @default false */ "sheet"?: 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 * @default 'pn_multiselect_all' */ "allValue"?: string; /** * Force the dropdown to always open downwards. * @category Features * @default false */ "bottom"?: boolean; /** * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Disable the select. * @category Validation * @default false */ "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 * @default false */ "invalid"?: boolean; /** * Decide how many items should be shown before ellipsis. Requires the `search` prop to work. * @see {@link search } * @category Features * @default 5 */ "itemCount"?: number; /** * Label placed above the select */ "label": string; /** * Manually set the language, not needed if you have the pnTopbar available * @default null */ "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 * @default false */ "required"?: boolean; /** * Allow the user to search among the options. The selected options will now display underneath the multiselect element. * @category Features * @default false */ "search"?: boolean; /** * Set the search query of the multiselect. * @see {@link search } * @category Features * @default '' */ "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 * @default false */ "selectAll"?: boolean; /** * Select HTML id * @default this.id */ "selectId"?: string; /** * HTML name of the input element. */ "selectName"?: string; /** * Force the dropdown to always open upwards. * @category Features * @default false */ "top"?: boolean; } interface PnOcrSearch { /** * The `language` property will be prioritized before the pnTopbar language. * @default null */ "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. * @default false */ "dropdown": string | boolean; /** * Set a unique HTML ID. * @default `pn-page-nav-${uuidv4()}` */ "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 * @default false */ "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. * @since v7.9.0 */ interface PnPagination { /** * Set a label for the pagination element for screen readers. It defaults to `Pagination`. */ "label"?: string; /** * Manually set the language. * @default null */ "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 * @default 1 */ "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 * @default 5 */ "pagesVisible": number; /** * Set a HTML id on the pagination element. * @default null */ "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 * @default null */ "rows": number; /** * Default label is "Items per page". * @see {@link rows } * @category Rows per page * @default null */ "rowsLabel": string; /** * Set available items per page options the user can select. Use a comma separated string. * @see {@link rows } * @category Rows per page * @default '10,25,50' */ "rowsList": string; /** * Set a custom URL template. Use `{page}` within the string to position where the dynamic page number should be. * @default '?page={page}' */ "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 * @default 0 */ "progress": number; /** * A unique HTML id fror the progress bar * @default this.idProgress */ "progressId": string; /** * Replaces the default progress percentage text */ "progressText"?: string; /** * Text shown on success (100%) */ "successText"?: string; } /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ interface PnProgressIndicator { /** * Takes the index of the active step * @default 0 */ "activeStep": number; } /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ 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. * @default false */ "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. * @category Steps * @default this.minStep */ "currentStep": number; /** * Use the dots visual, instead of the bar. This will hide the label from view, but is still accessible to screenreaders. * @since v7.16.0 * @category Visual * @default false */ "dots": boolean; /** * Set custom label for the stepper, default label is "Step". * @default '' */ "label"?: string; /** * Set the language manually, only use this prop if the pnTopbar is not loaded. Will not overwrite the custom `label` prop if used. * @default null */ "language"?: PnLanguages; /** * Set a custom HTML id on the progress stepper element to associate progress bar with label. * @default '' */ "progressStepperId"?: string; /** * You can add a custom optional string to the label if you need a name for the current step. * @category Steps */ "stepName"?: string; /** * Set total amount of steps, maximum allowed is `7`. * @category Steps * @default this.maxStep */ "totalSteps": number; } /** * 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. * @default false */ "checked"?: boolean; /** * Disable the radio. * @category State * @default false */ "disabled"?: boolean; /** * Allow the radio to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden. The prop `tile` must be used at the same time. * @see {@link tile } * @since v7.17.0 * @category Tile * @default false */ "expand"?: boolean; /** * This adds an optional helpertext under the label. */ "helpertext"?: string; /** * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work. * @see {@link tile } * @category Tile * @default null */ "icon"?: string; /** * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio. * @category State * @default false */ "invalid"?: boolean; /** * The radio label */ "label"?: string; /** * The name of the radio group. */ "name"?: string; /** * A unique HTML ID for the radio. * @default this.id */ "radioid"?: string; /** * Set the radio as required. * @category State * @default false */ "required"?: boolean; /** * Turn the radio into a clickable tile. A border and padding is added. **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements. * @category Tile * @default false */ "tile"?: boolean; /** * This will be emitted on change and input events. */ "value": string; } /** * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and * has support for most attributes. * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value. * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input). * @since v7.20.0 */ interface PnRange { /** * Disable the range input. * @category State * @default false */ "disabled"?: boolean; /** * Set an error message for the range input. * @category State * @default null */ "error"?: string; /** * Set a helpertext for the range input. * @default null */ "helpertext"?: string; /** * Set an icon for the range/input field. * @default null */ "icon"?: string; /** * Set an icon at the end of the range or for the second input field when using `multiple`. * @default null */ "iconEnd"?: string; /** * Display an input for the range value. Allowing the user to type or use the slider to set the value. * @category Features * @default false */ "input"?: boolean; /** * Set the error visual for the range input, same as `error`, but without a message. * @category State * @default false */ "invalid"?: boolean; /** * Label for the range input. */ "label": string; /** * Label for the range end input. */ "labelEnd": string; /** * Add markers. This will also render a `datalist` element with `options`. Omitting the `label` for a marker will use the `value` as label instead. Set `label` to `null` or `''` to hide it completely. * @default [] */ "markers"?: { value: number; label?: string }[]; /** * The range input max value. * @category HTML Attributes * @default 100 */ "max"?: number; /** * The range input min value. * @category HTML Attributes * @default 0 */ "min"?: number; /** * Allow multiple values to be selected * @category Features * @default false */ "multiple"?: boolean; /** * The range input name. * @category HTML Attributes */ "name"?: string; /** * The range input name. * @category HTML Attributes */ "nameEnd"?: string; /** * Set a custom HTML id. * @default this.id */ "pnId"?: string; /** * Set a custom HTML id. * @default this.idEnd */ "pnIdEnd"?: string; /** * Set a step value for the range input. * @category HTML Attributes * @default '' */ "step"?: HTMLInputElement['step']; /** * Set a prefix for the range/input field. * @default null */ "textPrefix"?: string; /** * Set a suffix for the range/input field. * @default null */ "textSuffix"?: string; /** * Hide the tooltip. * @category Features * @default false */ "tooltipHide"?: boolean; /** * Range tooltip label template. Default is simply the value of the range input. * @example // Show a suffixed '%' in the tooltip with '{value} %'. * @category Features * @default this.tooltipDefault */ "tooltipTemplate"?: string; /** * The range input value. * @category HTML Attributes * @default 0 */ "value"?: number; /** * The range end input value. * @category HTML Attributes * @default 0 */ "valueEnd"?: number; } /** * 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. * @default false */ "iconOnly": boolean; /** * Set the language manually. * @default null */ "language"?: PnLanguages; /** * Icon on the left side instead of on the right. * @default false */ "leftIcon": boolean; /** * Smaller button. * @default false */ "small": boolean; } /** * The search field has multiple button variants that changes the visual appearance. * @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 PnSearchField { /** * Allow the browser to autocomplete the search field. */ "autocomplete"?: string; /** * Button variant changes the visual of the search field: - `''` Standard with a blue button. - `simple` | ~~`icon`~~ with simple white icon only button. - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button. - `jumbo` with a larger blue icon only button. * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`. * @category Button * @default '' */ "button": PnSearchFieldButton; /** * Label for the button element. * @category Button */ "buttonLabel"?: string; /** * Light instead of dark search button. * @deprecated The color is now set automatically based on the button prop. * @category Button * @default false */ "buttonLight": boolean; /** * Add a tooltip to the search button. * @category Button */ "buttonTooltip"?: string; /** * Disable the search field. * @category State * @default false */ "disabled": boolean; /** * Provide an aria-label for the search field. */ "label": string; /** * Override the pntopbar language. * @default null */ "language"?: PnLanguages; /** * Point to a datalist element with this id. */ "list"?: string; /** * Display loading animation. * @category State * @default false */ "loading": boolean; /** * Set HTML name of the search input. */ "name"?: string; /** * Set a search field placeholder. This is no replacement for a `label`. */ "placeholder"?: string; /** * Set the search field as required. * @category State * @default false */ "required": boolean; /** * Set a unique ID for the search input. * @default this.id */ "searchid": string; /** * Set the value of the search field. * @default '' */ "value": string; } /** * The `pn-segment` is built with a native `input[type="radio"]` in the background. * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead. */ interface PnSegment { /** * Disable the segment. * @since v7.7.0 * @default false */ "disabled": boolean; /** * The SVG content of the icon you want. */ "icon"?: string; /** * The segment label, same as the slot. * @since v7.7.0 */ "label"?: string; /** * The segment controller name. */ "name": string; /** * A unique HTML id. * @default this.id */ "segmentid": string; /** * Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. * @hide true * @default false */ "selected": boolean; /** * The segment value. */ "value": string; } /** * The `pn-segmented-control` and `pn-segmented` is built with 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 segment state is being changed. */ interface PnSegmentedControl { /** * This is the name of the radio buttons inside the controller. * @deprecated Set the name in the nested `pn-segment` components. */ "name": string; /** * Currently active segment value. */ "value": string; } /** * The `pn-select` uses a native `select` element under the hood. * Use the slot to include `option` elements. * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option. * @nativeChange Use the `change` event to listen to changes on the select element. */ interface PnSelect { /** * HTML autocomplete. * @category HTML */ "autocomplete": string; /** * Use the compact label variant. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Disable the select. * @category Validation * @default false */ "disabled"?: boolean; /** * Display an error message and trigger the invalid state. * @category Validation */ "error"?: string; /** * HTML form name. * @category HTML */ "form": 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 * @default false */ "invalid"?: boolean; /** * Label placed above the select. */ "label": string; /** * HTML select name. * @category HTML */ "name": string; /** * Set the select as required. * @category Validation * @default false */ "required"?: boolean; /** * Select HTML id * @default this.id */ "selectId": string; } /** * Display a spinner to indicate a loading state. */ interface PnSpinner { /** * Light version of the spinner. * @default false */ "light": boolean; /** * Size in em. * @default 1.5 */ "size": number; } /** * This tab should control a tab panel. * Use the `ariacontrols` and `tabid` props to connect the tab with the tab panel. * The tab panel should in turn have `aria-labelledby` set to the `tabid` of the tab. * If you use the `href` prop, the tab will turn into an anchor element instead of a button. * This does not required the ariacontrols and tabid props. */ interface PnTab { /** * Is set by `pn-tablist`, don't use this prop. * @hide true */ "activeTab": string; /** * Use the ID of the container that this tab controls. */ "ariacontrols"?: string; /** * Turns the tab from a `button` to an `a` element, but only if the `pn-tablist` is inside a `pn-header`. */ "href"?: string; /** * The SVG content of the icon you want to display */ "icon"?: string; /** * Set a label for the tab. */ "label": string; /** * Tab ID, use if you want to have the tab container be `aria-labelledby` by this tab. */ "tabid"?: string; /** * This is the value that will be matched with `pn-tablist` value. (required) */ "value": string; } /** * The `pn-table` component is just a wrapper for your HTML table element. * You need to create the markup, but the component will deal with the styling. * We have a built in class for divs inside table colums called `column-wrapper`. * This will line up your content and provide a grid gap. */ interface PnTable { /** * Add border to table. * @default false */ "bordered": boolean; /** * Use the gray variant instead of blue. * @default false */ "gray": boolean; /** * Make the table striped. * @default false */ "striped": boolean; } /** * The tablist allows you to create a list with nested `pn-tab` components. * These should control the visibility of panel elements on the page. * If you use the slot name "menu" the tablist will adapt to be used inside of * a `pn-header` component. This also allows the pn-tabs to use the `href` prop. */ interface PnTablist { /** * Give the tablist a name for screenreaders. */ "label": string; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * Make the tablist smaller */ "small"?: boolean; /** * Icons are stacked vertically instead of the default rows * @default false */ "stackedicons"?: boolean; /** * The value of the tab that is currently active, each `` also expects a unique value */ "value": string; } /** * The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status. */ interface PnTag { /** * Set tag appearance: `discrete`, `positive`, `warning` & `error`. * @category Visual * @default '' */ "appearance"?: '' | 'discrete' | 'positive' | 'warning' | 'error'; /** * Set darker background-color on the tag. This is intended for better tag visibility on colored background. * @category Visual * @deprecated Will be removed in v8.0.0 * @default false */ "dark"?: boolean; /** * Select icon from out `pn-design-assets` list. Works with any SVG content. **Please note**: Can not be used with the `xsmall` prop due to the small size. * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.} */ "icon"?: string; /** * The label of the tag. */ "label": string; /** * Set larger tag. * @category Size * @default false */ "large"?: boolean; /** * Set smaller tag. * @category Size * @default false */ "small"?: boolean; /** * Set extra small tag. * @since v7.11.0 * @category Size * @default false */ "xsmall"?: boolean; } /** * The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support. */ interface PnTextLink { /** * Treat the link as a download link. * @category Link attributes */ "download"?: string; /** * The URL string. */ "href": string; /** * Set the hreflang of the URL destination. * @category Link attributes */ "hreflang"?: string; /** * SVG content of the icon. * @category Visual */ "icon"?: string; /** * The link text. * @since v7.5.0 */ "label"?: string; /** * Align the icon on the left. * @category Visual * @default false */ "leftIcon": boolean; /** * Use the light version of the link. * @category Visual * @default false */ "light": boolean; /** * Set a unique html ID of the a element. * @category Link attributes */ "linkid"?: string; /** * Link media. * @category Link attributes */ "media"?: string; /** * Set referrerpolicy on the link. * @category Link attributes */ "referrerpolicy"?: ReferrerPolicy; /** * Set the rel of the link. * @category Link attributes * @default 'noopener noreferrer' */ "rel": string; /** * Set the target of the link. * @category Link attributes */ "target"?: string; } /** * The `pn-textarea` is built with a native `textarea`. * This means you can use native events to listen to the input. * @nativeInput Use the `input` event to listen to content being modified by the user. */ interface PnTextarea { /** * Allow the browser to autocomplete the textarea. * @category HTML Textarea * @default 'off' */ "autocomplete"?: string; /** * Set the col count for the textarea. * @category HTML Textarea * @default 20 */ "cols"?: number; /** * Use the compact label variant. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Disable the textarea. * @category State * @default false */ "disabled"?: boolean; /** * Same as `invalid`, but will display the string as an error message under the textarea. * @category State */ "error"?: string; /** * Set the associated form. * @category HTML Textarea */ "form"?: string; /** * Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */ "helpertext"?: string; /** * Set the textarea as `invalid`, will make the Label and focus rings red. * @category State * @default false */ "invalid"?: boolean; /** * The label describing the textarea. */ "label": string; /** * The maximum number of characters the user should be able to add, also adds a visible counter. * @category HTML Textarea */ "maxlength"?: number; /** * HTML name. * @category HTML Textarea */ "name"?: string; /** * Placeholder for the textarea. * @category HTML Textarea */ "placeholder"?: string; /** * Make the textarea readonly. * @category State * @default false */ "readonly"?: boolean; /** * Make the textarea required. * @category HTML Textarea * @default false */ "required"?: boolean; /** * Allow the user to resize the textarea vertically. Handle width in your own layout. * @category HTML Textarea * @default false */ "resize"?: boolean; /** * Set the row count for the textarea. * @category HTML Textarea * @default 2 */ "rows"?: number; /** * Allow the browser to spellcheck the textarea. * @category HTML Textarea * @default false */ "spellcheck": boolean; /** * A unique ID connecting the element to the label. * @category HTML Textarea * @default this.id */ "textareaid"?: string; /** * Set the textarea as `valid`, will make the Label and focus rings green. * @category State * @default false */ "valid"?: boolean; /** * The textarea content, do not provide slotted content. * @default '' */ "value": string; /** * Set the wrap control. * @category HTML Textarea * @default 'soft' */ "wrap"?: string; } /** * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration. * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set, * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible. */ interface PnTile { /** * Use the horizontal tile. * @category Layout * @default false */ "horizontal"?: boolean; /** * The SVG content of a decorative icon. * @since v7.12.0 * @category Image */ "icon"?: string; /** * The SVG content of an illustration. * @category Image */ "illustration"?: string; /** * Label of the link. This is required for the component to be accessible. */ "label": string; /** * The rel attribute of the link. * @category href * @default 'noopener noreferrer' */ "rel"?: string; /** * The target attribute of the link. * @category href */ "target"?: string; /** * Set a string of text for the tile. Same as the default slot. * @since v7.12.0 */ "text"?: string; /** * The link of the tile. This is required for the component to be accessible. * @category href */ "url": string; } /** * This component is able to fill many roles of a classic toast. * It has 4 different colors, a temporary state, hide button, icon and illustration support. * The `pn-toast` will expand to its parent containers full width. * Either limit the parent width or set a CSS rule to your specific width if needed. */ interface PnToast { /** * Default color is blue, you also have the option of success (green), warning (orange) and error (red). * @category Visual */ "appearance"?: '' | 'success' | 'warning' | 'error'; /** * Show close button. * @category Features * @default false */ "closable": boolean; /** * Set a title for the toast. Requires the `text` prop in order to work. * @description Can be used together with slotted content. * @default '' */ "heading"?: string; /** * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own. * @see {@link closable } * @category Features * @default false */ "hide": boolean; /** * Set an SVG icon. * @category Visual */ "icon"?: string; /** * Set an SVG illustration. * @category Visual */ "illustration"?: string; /** * Manually set the language, only needed if the `closable` prop is enabled. * @see {@link closable } * @category Features * @default null */ "language"?: PnLanguages; /** * This will apply a shadow and border to the toast. * @category Visual * @default false */ "temporary": boolean; /** * Set a paragraph of text for the toast. * @description Can be used together with slotted content. * @default '' */ "text"?: string; /** * Give the toast a HTML ID. */ "toastId"?: string; } /** * The `pn-toggle-switch` 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 switch state is being toggled. */ interface PnToggleSwitch { /** * Precheck the toggle. * @default false */ "checked": boolean; /** * Disable the toggle. * @category State * @default false */ "disabled": boolean; /** * Provide a helpertext for the toggle switch. */ "helpertext"?: string; /** * A label for the toggle switch. */ "label": string; /** * Make the toggle larger. * @category Visual * @default false */ "large": boolean; /** * Set the loading state. * @category State * @default false */ "loading": boolean; /** * HTML toggle name. * @category HTML * @default null */ "name"?: string; /** * Make the toggle smaller. * @category Visual * @default false */ "small": boolean; /** * Set a unique HTML id. * @default this.id */ "toggleid": string; /** * HTML toggle value. * @category HTML * @default null */ "value"?: string; } /** * The `pn-tooltip` can display slotted HTML content or a text `string` with the `tooltip` prop. * Remember that the component is techincally a `button` element, don't put any HTML content that would be out of place in a regular button * (no headlines, other input elements, etc...). */ interface PnTooltip { /** * Apply the light color if you use a dark background. * @default false */ "light": boolean; /** * Overrides the slotted content to create a small tooltip instead. * @since v7.3.0 */ "tooltip"?: string; /** * Apply the warning color and change the icon to `!`. * @default false */ "warning": boolean; } /** * The wizard component lets you highlight areas on the page * that is accompanied with a modal for user guidance. * Either use the label & helpertext props to set a title and description, * or use the default slot to add custom HTML content. * The steps prop takes an array of querySelectors that the wizard will highlight in order. * Set the step prop to start the wizard at a specific step (0-indexed). -1 closes the wizard. * @since v7.19.0 */ interface PnWizard { /** * By default, the component will hide the overflow on the body element when active. You may wish to disable this if your HTML/CSS structure is not compatible with this behavior. * @category Features * @default false */ "displayOverflow": boolean; /** * Set a helpertext for the wizard. * @default '' */ "helpertext"?: string; /** * Hide the back button. * @category Buttons * @default false */ "hideBack"?: boolean; /** * Hide the finish button. * @category Buttons * @default false */ "hideFinish"?: boolean; /** * Hide the next button. * @category Buttons * @default false */ "hideNext": boolean; /** * Set a title for the wizard. * @default '' */ "label"?: string; /** * Set a custom label for the back button. * @category Buttons * @default '' */ "labelBack"?: string; /** * Set a custom label for the finish button. * @category Buttons * @default '' */ "labelFinish"?: string; /** * Set a custom label for the next button. * @category Buttons * @default '' */ "labelNext"?: string; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * Set a custom HTML id. * @default this.id */ "pnId"?: string; /** * Choose to display one of 2 built in progress steppers. - `dots`: The pn-progress-stepper with the `dots` prop. - `text`: simple text indicator "current/total" * @category Features * @default '' */ "progress"?: '' | 'dots' | 'text'; /** * Choose where the scrolling will focus on the highlighted elements. * @category Features * @default 'center' */ "scrollBlock": 'start' | 'center' | 'end' | 'nearest'; /** * Assign the current step. Any value above -1 is valid and will start the wizard. * @category Wizard steps * @default -1 */ "step": number; /** * The list of querySelectors that the wizards will highlight. Recommended maximum of 7 steps. * @category Wizard steps * @default [] */ "steps": string[]; } /** * Check the delivery date for letters, newspapers and direct mail that are distributed every second day. */ interface PnZipcodeSearch { /** * The `language` property will be prioritized before the pnTopbar language. * @default null */ "language"?: PnZipCodeSearchLanguages; /** * Set a pre initialized value. */ "value"?: string; } } export interface PnAccordionRowCustomEvent extends CustomEvent { detail: T; target: HTMLPnAccordionRowElement; } export interface PnActionMenuCustomEvent extends CustomEvent { detail: T; target: HTMLPnActionMenuElement; } export interface PnButtonCustomEvent extends CustomEvent { detail: T; target: HTMLPnButtonElement; } export interface PnCardCustomEvent extends CustomEvent { detail: T; target: HTMLPnCardElement; } export interface PnCounterCustomEvent extends CustomEvent { detail: T; target: HTMLPnCounterElement; } export interface PnDatePickerCustomEvent extends CustomEvent { detail: T; target: HTMLPnDatePickerElement; } export interface PnFileUploadCustomEvent extends CustomEvent { detail: T; target: HTMLPnFileUploadElement; } export interface PnModalCustomEvent extends CustomEvent { detail: T; target: HTMLPnModalElement; } export interface PnMultiselectCustomEvent extends CustomEvent { detail: T; target: HTMLPnMultiselectElement; } export interface PnPageNavCustomEvent extends CustomEvent { detail: T; target: HTMLPnPageNavElement; } export interface PnPageNavDropdownItemCustomEvent extends CustomEvent { detail: T; target: HTMLPnPageNavDropdownItemElement; } export interface PnPageNavItemCustomEvent extends CustomEvent { detail: T; target: HTMLPnPageNavItemElement; } export interface PnPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLPnPaginationElement; } export interface PnProgressIndicatorCustomEvent extends CustomEvent { detail: T; target: HTMLPnProgressIndicatorElement; } export interface PnProgressIndicatorStepCustomEvent extends CustomEvent { detail: T; target: HTMLPnProgressIndicatorStepElement; } export interface PnRangeCustomEvent extends CustomEvent { detail: T; target: HTMLPnRangeElement; } export interface PnSearchFieldCustomEvent extends CustomEvent { detail: T; target: HTMLPnSearchFieldElement; } export interface PnSegmentCustomEvent extends CustomEvent { detail: T; target: HTMLPnSegmentElement; } export interface PnTabCustomEvent extends CustomEvent { detail: T; target: HTMLPnTabElement; } export interface PnTablistCustomEvent extends CustomEvent { detail: T; target: HTMLPnTablistElement; } export interface PnTileCustomEvent extends CustomEvent { detail: T; target: HTMLPnTileElement; } export interface PnToastCustomEvent extends CustomEvent { detail: T; target: HTMLPnToastElement; } export interface PnWizardCustomEvent extends CustomEvent { detail: T; target: HTMLPnWizardElement; } export interface PnZipcodeSearchCustomEvent extends CustomEvent { detail: T; target: HTMLPnZipcodeSearchElement; } declare global { /** * 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 HTMLPnAccordionElement extends Components.PnAccordion, HTMLStencilElement { } var HTMLPnAccordionElement: { prototype: HTMLPnAccordionElement; new (): HTMLPnAccordionElement; }; interface HTMLPnAccordionRowElementEventMap { "togglerow": { element: HTMLElement; state: 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 HTMLPnAccordionRowElement extends Components.PnAccordionRow, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnAccordionRowElement, ev: PnAccordionRowCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnAccordionRowElement, ev: PnAccordionRowCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnAccordionRowElement: { prototype: HTMLPnAccordionRowElement; new (): HTMLPnAccordionRowElement; }; interface HTMLPnActionMenuElementEventMap { "menuToggle": { open: boolean }; "menuVisible": { visible: boolean }; "menuOption": { /** Which type of menu item was clicked. */ type: 'button' | 'link' | 'input' | 'submenu'; /** If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. */ click: MouseEvent | Event; /** The full {@link PnActionMenuItem} object. */ option: PnActionMenuItem; /** If the submenu is open/closed. */ open?: Boolean; }; } /** * Create a list of actions in an accessible way. * Option types include: * - Regular button, click and it will collapse the menu, * - Checkbox/radio, toggle the option on/off * - Link, behaves like a regular `a[href]` element. * You can group these actions in groups and/or sub menus. * - `group`, an array of options. The label will act as a title for the items. * - `options`, an array of options. These items will appear in a sub-menu that can be toggled. * @since v7.13.0 * @see {@link PnActionMenuItem } */ interface HTMLPnActionMenuElement extends Components.PnActionMenu, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnActionMenuElement, ev: PnActionMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnActionMenuElement, ev: PnActionMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnActionMenuElement: { prototype: HTMLPnActionMenuElement; new (): HTMLPnActionMenuElement; }; interface HTMLPnButtonElementEventMap { "pnClick": MouseEvent; } /** * 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 HTMLPnButtonElement extends Components.PnButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnButtonElement, ev: PnButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnButtonElement, ev: PnButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnButtonElement: { prototype: HTMLPnButtonElement; new (): HTMLPnButtonElement; }; /** * 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 HTMLPnButtonDropdownElement extends Components.PnButtonDropdown, HTMLStencilElement { } var HTMLPnButtonDropdownElement: { prototype: HTMLPnButtonDropdownElement; new (): HTMLPnButtonDropdownElement; }; interface HTMLPnCardElementEventMap { "pnCard": { click: MouseEvent }; } /** * 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. * @since v7.12.0 */ interface HTMLPnCardElement extends Components.PnCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnCardElement, ev: PnCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnCardElement, ev: PnCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnCardElement: { prototype: HTMLPnCardElement; new (): HTMLPnCardElement; }; /** * 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 HTMLPnCheckboxElement extends Components.PnCheckbox, HTMLStencilElement { } var HTMLPnCheckboxElement: { prototype: HTMLPnCheckboxElement; new (): HTMLPnCheckboxElement; }; /** * 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 HTMLPnChoiceChipElement extends Components.PnChoiceChip, HTMLStencilElement { } var HTMLPnChoiceChipElement: { prototype: HTMLPnChoiceChipElement; new (): HTMLPnChoiceChipElement; }; interface HTMLPnCounterElementEventMap { "counterInput": { value: number; input?: boolean; decrease?: boolean; increase?: boolean }; } /** * 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 HTMLPnCounterElement extends Components.PnCounter, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnCounterElement, ev: PnCounterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnCounterElement, ev: PnCounterCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnCounterElement: { prototype: HTMLPnCounterElement; new (): HTMLPnCounterElement; }; interface HTMLPnDatePickerElementEventMap { "dateselection": PnDatePickerSelectEvent; "dateSelection": PnDatePickerSelectEvent; "dateInvalid": { start?: string; end?: string }; "toggleCalendar": boolean; "currentView": CalendarView; } /** * 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 HTMLPnDatePickerElement extends Components.PnDatePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnDatePickerElement, ev: PnDatePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnDatePickerElement, ev: PnDatePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnDatePickerElement: { prototype: HTMLPnDatePickerElement; new (): HTMLPnDatePickerElement; }; /** * 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 HTMLPnFieldsetElement extends Components.PnFieldset, HTMLStencilElement { } var HTMLPnFieldsetElement: { prototype: HTMLPnFieldsetElement; new (): HTMLPnFieldsetElement; }; interface HTMLPnFileUploadElementEventMap { "filesAdded": PnUploadFileItem[]; "update": { files: PnUploadFileItem[]; element: HTMLElement }; "fileuploaderror": Error; "valid": this; "uploadFile": { file: PnUploadFileItem; index: number; uploader: any; }; "uploadCancelled": PnUploadFileItem; "uploadCompleted": PnUploadFileItem[]; } /** * 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 HTMLPnFileUploadElement extends Components.PnFileUpload, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnFileUploadElement, ev: PnFileUploadCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnFileUploadElement, ev: PnFileUploadCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnFileUploadElement: { prototype: HTMLPnFileUploadElement; new (): HTMLPnFileUploadElement; }; /** * 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 pn-footer-nav. * @see {@link https://portal.postnord.com/web-components/?path=/docs/external-components-pn-footer-nav--docs pn-footer-nav} */ interface HTMLPnFooterElement extends Components.PnFooter, HTMLStencilElement { } var HTMLPnFooterElement: { prototype: HTMLPnFooterElement; new (): HTMLPnFooterElement; }; /** * The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu. */ interface HTMLPnHeaderElement extends Components.PnHeader, HTMLStencilElement { } var HTMLPnHeaderElement: { prototype: HTMLPnHeaderElement; new (): HTMLPnHeaderElement; }; /** * 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 HTMLPnIconElement extends Components.PnIcon, HTMLStencilElement { } var HTMLPnIconElement: { prototype: HTMLPnIconElement; new (): HTMLPnIconElement; }; interface HTMLPnIllustrationElement extends Components.PnIllustration, HTMLStencilElement { } var HTMLPnIllustrationElement: { prototype: HTMLPnIllustrationElement; new (): HTMLPnIllustrationElement; }; /** * 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 HTMLPnInputElement extends Components.PnInput, HTMLStencilElement { } var HTMLPnInputElement: { prototype: HTMLPnInputElement; new (): HTMLPnInputElement; }; interface HTMLPnModalElementEventMap { "modalToggle": { open: boolean }; "modalVisiblity": { visible: boolean }; "close": boolean; } /** * Present content in a modal that overlays everything on the current page. * Use the prop `open` to toggle the visiblity. * Use the event `modalToggle` to determine when the modal is being closed/opened by the user. */ interface HTMLPnModalElement extends Components.PnModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnModalElement, ev: PnModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnModalElement, ev: PnModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnModalElement: { prototype: HTMLPnModalElement; new (): HTMLPnModalElement; }; interface HTMLPnMultiselectElementEventMap { "toggleSelect": { open: boolean }; "allOptions": PnMultiselectOption[]; "selectedOption": PnMultiselectOption; "selectedAllOptions": { checked: boolean; searching: boolean; query?: string; found?: PnMultiselectOption[]; }; "searchInput": { query: string; found?: PnMultiselectOption[]; }; } /** * 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 HTMLPnMultiselectElement extends Components.PnMultiselect, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnMultiselectElement, ev: PnMultiselectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnMultiselectElement, ev: PnMultiselectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnMultiselectElement: { prototype: HTMLPnMultiselectElement; new (): HTMLPnMultiselectElement; }; interface HTMLPnOcrSearchElement extends Components.PnOcrSearch, HTMLStencilElement { } var HTMLPnOcrSearchElement: { prototype: HTMLPnOcrSearchElement; new (): HTMLPnOcrSearchElement; }; interface HTMLPnPageNavElementEventMap { "navchange": 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 HTMLPnPageNavElement extends Components.PnPageNav, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnPageNavElement, ev: PnPageNavCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnPageNavElement, ev: PnPageNavCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnPageNavElement: { prototype: HTMLPnPageNavElement; new (): HTMLPnPageNavElement; }; interface HTMLPnPageNavDropdownItemElementEventMap { "itemselection": 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 HTMLPnPageNavDropdownItemElement extends Components.PnPageNavDropdownItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnPageNavDropdownItemElement, ev: PnPageNavDropdownItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnPageNavDropdownItemElement, ev: PnPageNavDropdownItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnPageNavDropdownItemElement: { prototype: HTMLPnPageNavDropdownItemElement; new (): HTMLPnPageNavDropdownItemElement; }; interface HTMLPnPageNavItemElementEventMap { "itemselection": 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 HTMLPnPageNavItemElement extends Components.PnPageNavItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnPageNavItemElement, ev: PnPageNavItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnPageNavItemElement, ev: PnPageNavItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnPageNavItemElement: { prototype: HTMLPnPageNavItemElement; new (): HTMLPnPageNavItemElement; }; interface HTMLPnPaginationElementEventMap { "pageSelected": { page: number; mouse: MouseEvent }; "rowsSelected": { rows: number; change: Event }; } /** * 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. * @since v7.9.0 */ interface HTMLPnPaginationElement extends Components.PnPagination, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnPaginationElement, ev: PnPaginationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnPaginationElement, ev: PnPaginationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnPaginationElement: { prototype: HTMLPnPaginationElement; new (): HTMLPnPaginationElement; }; interface HTMLPnProgressBarElement extends Components.PnProgressBar, HTMLStencilElement { } var HTMLPnProgressBarElement: { prototype: HTMLPnProgressBarElement; new (): HTMLPnProgressBarElement; }; interface HTMLPnProgressIndicatorElementEventMap { "progresschange": number; } /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ interface HTMLPnProgressIndicatorElement extends Components.PnProgressIndicator, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnProgressIndicatorElement, ev: PnProgressIndicatorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnProgressIndicatorElement, ev: PnProgressIndicatorCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnProgressIndicatorElement: { prototype: HTMLPnProgressIndicatorElement; new (): HTMLPnProgressIndicatorElement; }; interface HTMLPnProgressIndicatorStepElementEventMap { "setactivestep": number; } /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ interface HTMLPnProgressIndicatorStepElement extends Components.PnProgressIndicatorStep, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnProgressIndicatorStepElement, ev: PnProgressIndicatorStepCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnProgressIndicatorStepElement, ev: PnProgressIndicatorStepCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnProgressIndicatorStepElement: { prototype: HTMLPnProgressIndicatorStepElement; new (): HTMLPnProgressIndicatorStepElement; }; /** * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...). */ interface HTMLPnProgressStepperElement extends Components.PnProgressStepper, HTMLStencilElement { } var HTMLPnProgressStepperElement: { prototype: HTMLPnProgressStepperElement; new (): HTMLPnProgressStepperElement; }; /** * 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 HTMLPnRadioButtonElement extends Components.PnRadioButton, HTMLStencilElement { } var HTMLPnRadioButtonElement: { prototype: HTMLPnRadioButtonElement; new (): HTMLPnRadioButtonElement; }; interface HTMLPnRangeElementEventMap { "rangeSelected": { value: number; /* The end value when using `multiple`. */ valueEnd?: number; /* The selected percentage of the range input. */ percentage: number; /* The difference between `value` and `valueEnd`. */ difference?: number; }; } /** * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and * has support for most attributes. * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value. * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input). * @since v7.20.0 */ interface HTMLPnRangeElement extends Components.PnRange, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnRangeElement, ev: PnRangeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnRangeElement, ev: PnRangeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnRangeElement: { prototype: HTMLPnRangeElement; new (): HTMLPnRangeElement; }; /** * 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 HTMLPnReadOnlyButtonElement extends Components.PnReadOnlyButton, HTMLStencilElement { } var HTMLPnReadOnlyButtonElement: { prototype: HTMLPnReadOnlyButtonElement; new (): HTMLPnReadOnlyButtonElement; }; interface HTMLPnSearchFieldElementEventMap { "search": string; "update": string; } /** * The search field has multiple button variants that changes the visual appearance. * @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 HTMLPnSearchFieldElement extends Components.PnSearchField, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnSearchFieldElement, ev: PnSearchFieldCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnSearchFieldElement, ev: PnSearchFieldCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnSearchFieldElement: { prototype: HTMLPnSearchFieldElement; new (): HTMLPnSearchFieldElement; }; interface HTMLPnSegmentElementEventMap { "segmentHover": MouseEvent; } /** * The `pn-segment` is built with a native `input[type="radio"]` in the background. * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead. */ interface HTMLPnSegmentElement extends Components.PnSegment, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnSegmentElement, ev: PnSegmentCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnSegmentElement, ev: PnSegmentCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnSegmentElement: { prototype: HTMLPnSegmentElement; new (): HTMLPnSegmentElement; }; /** * The `pn-segmented-control` and `pn-segmented` is built with 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 segment state is being changed. */ interface HTMLPnSegmentedControlElement extends Components.PnSegmentedControl, HTMLStencilElement { } var HTMLPnSegmentedControlElement: { prototype: HTMLPnSegmentedControlElement; new (): HTMLPnSegmentedControlElement; }; /** * The `pn-select` uses a native `select` element under the hood. * Use the slot to include `option` elements. * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option. * @nativeChange Use the `change` event to listen to changes on the select element. */ interface HTMLPnSelectElement extends Components.PnSelect, HTMLStencilElement { } var HTMLPnSelectElement: { prototype: HTMLPnSelectElement; new (): HTMLPnSelectElement; }; /** * Display a spinner to indicate a loading state. */ interface HTMLPnSpinnerElement extends Components.PnSpinner, HTMLStencilElement { } var HTMLPnSpinnerElement: { prototype: HTMLPnSpinnerElement; new (): HTMLPnSpinnerElement; }; interface HTMLPnTabElementEventMap { "setActiveTab": { val: string; el: HTMLElement }; "tabEnter": MouseEvent | FocusEvent; "tabLeave": MouseEvent | FocusEvent; } /** * This tab should control a tab panel. * Use the `ariacontrols` and `tabid` props to connect the tab with the tab panel. * The tab panel should in turn have `aria-labelledby` set to the `tabid` of the tab. * If you use the `href` prop, the tab will turn into an anchor element instead of a button. * This does not required the ariacontrols and tabid props. */ interface HTMLPnTabElement extends Components.PnTab, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnTabElement, ev: PnTabCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnTabElement, ev: PnTabCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnTabElement: { prototype: HTMLPnTabElement; new (): HTMLPnTabElement; }; /** * The `pn-table` component is just a wrapper for your HTML table element. * You need to create the markup, but the component will deal with the styling. * We have a built in class for divs inside table colums called `column-wrapper`. * This will line up your content and provide a grid gap. */ interface HTMLPnTableElement extends Components.PnTable, HTMLStencilElement { } var HTMLPnTableElement: { prototype: HTMLPnTableElement; new (): HTMLPnTableElement; }; interface HTMLPnTablistElementEventMap { "tabchange": string; } /** * The tablist allows you to create a list with nested `pn-tab` components. * These should control the visibility of panel elements on the page. * If you use the slot name "menu" the tablist will adapt to be used inside of * a `pn-header` component. This also allows the pn-tabs to use the `href` prop. */ interface HTMLPnTablistElement extends Components.PnTablist, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnTablistElement, ev: PnTablistCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnTablistElement, ev: PnTablistCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnTablistElement: { prototype: HTMLPnTablistElement; new (): HTMLPnTablistElement; }; /** * The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status. */ interface HTMLPnTagElement extends Components.PnTag, HTMLStencilElement { } var HTMLPnTagElement: { prototype: HTMLPnTagElement; new (): HTMLPnTagElement; }; /** * The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support. */ interface HTMLPnTextLinkElement extends Components.PnTextLink, HTMLStencilElement { } var HTMLPnTextLinkElement: { prototype: HTMLPnTextLinkElement; new (): HTMLPnTextLinkElement; }; /** * The `pn-textarea` is built with a native `textarea`. * This means you can use native events to listen to the input. * @nativeInput Use the `input` event to listen to content being modified by the user. */ interface HTMLPnTextareaElement extends Components.PnTextarea, HTMLStencilElement { } var HTMLPnTextareaElement: { prototype: HTMLPnTextareaElement; new (): HTMLPnTextareaElement; }; interface HTMLPnTileElementEventMap { "pnTile": { click: MouseEvent }; } /** * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration. * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set, * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible. */ interface HTMLPnTileElement extends Components.PnTile, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnTileElement, ev: PnTileCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnTileElement, ev: PnTileCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnTileElement: { prototype: HTMLPnTileElement; new (): HTMLPnTileElement; }; interface HTMLPnToastElementEventMap { "close": boolean; "hidden": boolean; } /** * This component is able to fill many roles of a classic toast. * It has 4 different colors, a temporary state, hide button, icon and illustration support. * The `pn-toast` will expand to its parent containers full width. * Either limit the parent width or set a CSS rule to your specific width if needed. */ interface HTMLPnToastElement extends Components.PnToast, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnToastElement, ev: PnToastCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnToastElement, ev: PnToastCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnToastElement: { prototype: HTMLPnToastElement; new (): HTMLPnToastElement; }; /** * The `pn-toggle-switch` 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 switch state is being toggled. */ interface HTMLPnToggleSwitchElement extends Components.PnToggleSwitch, HTMLStencilElement { } var HTMLPnToggleSwitchElement: { prototype: HTMLPnToggleSwitchElement; new (): HTMLPnToggleSwitchElement; }; /** * The `pn-tooltip` can display slotted HTML content or a text `string` with the `tooltip` prop. * Remember that the component is techincally a `button` element, don't put any HTML content that would be out of place in a regular button * (no headlines, other input elements, etc...). */ interface HTMLPnTooltipElement extends Components.PnTooltip, HTMLStencilElement { } var HTMLPnTooltipElement: { prototype: HTMLPnTooltipElement; new (): HTMLPnTooltipElement; }; interface HTMLPnWizardElementEventMap { "wizardStep": { step: number; next: boolean; prev: boolean }; "wizardHighlightClick": PointerEvent; "wizardClose": { step: number; finished: boolean }; } /** * The wizard component lets you highlight areas on the page * that is accompanied with a modal for user guidance. * Either use the label & helpertext props to set a title and description, * or use the default slot to add custom HTML content. * The steps prop takes an array of querySelectors that the wizard will highlight in order. * Set the step prop to start the wizard at a specific step (0-indexed). -1 closes the wizard. * @since v7.19.0 */ interface HTMLPnWizardElement extends Components.PnWizard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnWizardElement, ev: PnWizardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnWizardElement, ev: PnWizardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnWizardElement: { prototype: HTMLPnWizardElement; new (): HTMLPnWizardElement; }; interface HTMLPnZipcodeSearchElementEventMap { "searchsuccessful": boolean; } /** * Check the delivery date for letters, newspapers and direct mail that are distributed every second day. */ interface HTMLPnZipcodeSearchElement extends Components.PnZipcodeSearch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLPnZipcodeSearchElement, ev: PnZipcodeSearchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLPnZipcodeSearchElement, ev: PnZipcodeSearchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPnZipcodeSearchElement: { prototype: HTMLPnZipcodeSearchElement; new (): HTMLPnZipcodeSearchElement; }; interface HTMLElementTagNameMap { "pn-accordion": HTMLPnAccordionElement; "pn-accordion-row": HTMLPnAccordionRowElement; "pn-action-menu": HTMLPnActionMenuElement; "pn-button": HTMLPnButtonElement; "pn-button-dropdown": HTMLPnButtonDropdownElement; "pn-card": HTMLPnCardElement; "pn-checkbox": HTMLPnCheckboxElement; "pn-choice-chip": HTMLPnChoiceChipElement; "pn-counter": HTMLPnCounterElement; "pn-date-picker": HTMLPnDatePickerElement; "pn-fieldset": HTMLPnFieldsetElement; "pn-file-upload": HTMLPnFileUploadElement; "pn-footer": HTMLPnFooterElement; "pn-header": HTMLPnHeaderElement; "pn-icon": HTMLPnIconElement; "pn-illustration": HTMLPnIllustrationElement; "pn-input": HTMLPnInputElement; "pn-modal": HTMLPnModalElement; "pn-multiselect": HTMLPnMultiselectElement; "pn-ocr-search": HTMLPnOcrSearchElement; "pn-page-nav": HTMLPnPageNavElement; "pn-page-nav-dropdown-item": HTMLPnPageNavDropdownItemElement; "pn-page-nav-item": HTMLPnPageNavItemElement; "pn-pagination": HTMLPnPaginationElement; "pn-progress-bar": HTMLPnProgressBarElement; "pn-progress-indicator": HTMLPnProgressIndicatorElement; "pn-progress-indicator-step": HTMLPnProgressIndicatorStepElement; "pn-progress-stepper": HTMLPnProgressStepperElement; "pn-radio-button": HTMLPnRadioButtonElement; "pn-range": HTMLPnRangeElement; "pn-read-only-button": HTMLPnReadOnlyButtonElement; "pn-search-field": HTMLPnSearchFieldElement; "pn-segment": HTMLPnSegmentElement; "pn-segmented-control": HTMLPnSegmentedControlElement; "pn-select": HTMLPnSelectElement; "pn-spinner": HTMLPnSpinnerElement; "pn-tab": HTMLPnTabElement; "pn-table": HTMLPnTableElement; "pn-tablist": HTMLPnTablistElement; "pn-tag": HTMLPnTagElement; "pn-text-link": HTMLPnTextLinkElement; "pn-textarea": HTMLPnTextareaElement; "pn-tile": HTMLPnTileElement; "pn-toast": HTMLPnToastElement; "pn-toggle-switch": HTMLPnToggleSwitchElement; "pn-tooltip": HTMLPnTooltipElement; "pn-wizard": HTMLPnWizardElement; "pn-zipcode-search": HTMLPnZipcodeSearchElement; } } declare namespace LocalJSX { /** * 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. * @since v7.8.0 * @default false */ "single"?: boolean; /** * Optional prop that removes the default white background on the accordion row. * @since v7.10.0 * @default false */ "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; /** * Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop. */ "onTogglerow"?: (event: PnAccordionRowCustomEvent<{ element: HTMLElement; state: Boolean }>) => void; /** * The open/close status of the accordion row. * @default false */ "state"?: boolean; /** * Optional prop that removes the default white background on the accordion row. * @since v7.10.0 * @default false */ "transparent"?: boolean; } /** * Create a list of actions in an accessible way. * Option types include: * - Regular button, click and it will collapse the menu, * - Checkbox/radio, toggle the option on/off * - Link, behaves like a regular `a[href]` element. * You can group these actions in groups and/or sub menus. * - `group`, an array of options. The label will act as a title for the items. * - `options`, an array of options. These items will appear in a sub-menu that can be toggled. * @since v7.13.0 * @see {@link PnActionMenuItem } */ interface PnActionMenu { /** * Set any prop from the `pn-button` component here. * @see {@link Components.PnButton } */ "button"?: Components.PnButton; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * Set a custom ID for the menu. * @default this.id */ "menuId"?: string; /** * Prefer that the submenus opens to the left, if there is enough space. * @category Features * @default false */ "menuLeft"?: boolean; /** * Prefer that the menu open upwards, if there is enough space. * @category Features * @default false */ "menuUp"?: boolean; /** * Emitted when an option is clicked (button, link, input or submenus). */ "onMenuOption"?: (event: PnActionMenuCustomEvent<{ /** Which type of menu item was clicked. */ type: 'button' | 'link' | 'input' | 'submenu'; /** If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. */ click: MouseEvent | Event; /** The full {@link PnActionMenuItem} object. */ option: PnActionMenuItem; /** If the submenu is open/closed. */ open?: Boolean; }>) => void; /** * Emitted when the menu is opened or closed. */ "onMenuToggle"?: (event: PnActionMenuCustomEvent<{ open: boolean }>) => void; /** * Emitted when the menu is fully hidden/visible after the animation has played. */ "onMenuVisible"?: (event: PnActionMenuCustomEvent<{ visible: boolean }>) => void; /** * Open/close the action menu manually. * @category Features * @default false */ "open"?: boolean; /** * Array of action menu options. * @see {@link PnActionMenuItem } * @default [] */ "options"?: PnActionMenuItem[]; } /** * 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 * @default '' */ "appearance"?: PnButtonAppearance; /** * HTML aria-controls attribute. * @category HTML attributes * @default null */ "ariacontrols"?: string; /** * HTML aria-current attribute. * @since v7.9.0 * @category HTML attributes * @default null */ "ariacurrent"?: string; /** * HTML aria-expanded attribute. * @category HTML attributes * @default null */ "ariaexpanded"?: string; /** * HTML aria-haspopup attribute. * @category HTML attributes * @default null */ "ariahaspopup"?: string; /** * HTML aria-label attribute. * @category HTML attributes * @default null */ "arialabel"?: string; /** * HTML aria-labelledby attribute. * @category HTML attributes * @default null */ "arialabelledby"?: string; /** * HTML aria-pressed attribute. * @category HTML attributes * @default null */ "ariapressed"?: string; /** * HTML ID. * @category HTML attributes * @default null */ "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 } * @since v7.4.0 * @category Icon * @default false */ "iconOnly"?: boolean; /** * The label of the button, this is the same as using the default slot. * @since v7.4.0 * @default '' */ "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 * @default false */ "leftIcon"?: boolean; /** * Display the loading indicator. * @category Visual * @default false */ "loading"?: boolean; /** * HTML tabindex. * @category HTML attributes * @default false */ "noTab"?: boolean; /** * This event is fired when the `button`/`a` element of the `pn-button` is clicked. Setting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area or if the button is `disabled` with the `loading` prop. * @since v7.4.0 */ "onPnClick"?: (event: PnButtonCustomEvent) => void; /** * The rel attribute of the link. * @category Link */ "rel"?: string; /** * Use the small button. * @category Visual * @default false */ "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. * @since v7.4.0 * @category Tooltip * @default false */ "tooltipUp"?: boolean; /** * Select HTML button type. * @category Button * @default 'button' */ "type"?: 'button' | 'reset' | 'submit' | ''; /** * Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background). * @category Visual * @default '' */ "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`. * @default '' */ "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. * @default false */ "open"?: boolean; /** * Smaller button. * @default false */ "small"?: boolean; /** * Tooltip (required for Icon Only). */ "tooltip"?: string; /** * Select between `outlined` and `borderless`. * @default '' */ "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. * @since v7.12.0 */ 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 * @default '' */ "aspectRatio"?: string | '3/3' | '16/9'; /** * Set a HTML id for the card. Optional and not required. * @default null */ "cardId"?: string; /** * Uee the horizontal card layout. * @category Features * @default false */ "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 * @default null */ "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`. * @default 'h3' */ "labelTag"?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'; /** * Emitted when you click on the card link (if you use the `href` prop). */ "onPnCard"?: (event: PnCardCustomEvent<{ click: MouseEvent }>) => void; /** * Set a smaller text above the `label` text. */ "overline"?: string; /** * The rel attribute of the link. * @category Href * @default 'noopener noreferrer' */ "rel"?: string; /** * Reverse the order of which the image will wrap. * @category Features * @default false */ "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. * @default this.id */ "checkboxid"?: string; /** * Check the checkbox. * @default false */ "checked"?: boolean; /** * Disable the checkbox. * @category State * @default false */ "disabled"?: boolean; /** * Allow the checkbox to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden. The prop `tile` must be used at the same time. * @see {@link tile } * @since v7.17.0 * @category Tile * @default false */ "expand"?: boolean; /** * This adds an optional helpertext 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. * @see {@link tile } * @category Tile * @default null */ "icon"?: string; /** * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. * @category State * @default false */ "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 * @default false */ "invalid"?: boolean; /** * The checkbox label */ "label"?: string; /** * The name of the checkbox group. */ "name"?: string; /** * Set the checkbox as required. * @category State * @default false */ "required"?: boolean; /** * Turn the checkbox into a clickable tile. A border and padding is added. **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements. * @category Tile * @default false */ "tile"?: boolean; /** * This will be emitted on change and input events. */ "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 * @default false */ "checked"?: boolean; /** * A unique HTML id * @default `pn-choice-chip-${uuidv4()}` */ "choiceid"?: string; /** * Disable the choice chip. * @category State * @default false */ "disabled"?: boolean; /** * Include an icon */ "icon"?: string; /** * The choice chip label */ "label": string; /** * Set the size to large. * @category Size * @default false */ "large"?: boolean; /** * The name of the checkbox group */ "name"?: string; /** * Make the choice chip a radio * @default false */ "radio"?: boolean; /** * Set the choice chip as required. * @category State * @default false */ "required"?: boolean; /** * Set the size to small. * @category Size * @default false */ "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 { /** * Use the compact label variant. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Set a unique HTML ID for the counter * @default this.id */ "counterid"?: string; /** * Set the counter as disabled. * @category State * @default false */ "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. * @default null */ "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; /** * Instead of listening to multiple input, change and/or click events, we bundled them into one. - `value` is the current counter value. - `input` is true if the user changed the value with the HTML input. - `decrease` is true if the user clicked on the decrease button. - `increase` is true if the user clicked on the increase button. */ "onCounterInput"?: (event: PnCounterCustomEvent<{ value: number; input?: boolean; decrease?: boolean; increase?: boolean }>) => void; /** * Set the counter as readonly. * @category State * @default false */ "readonly"?: boolean; /** * Set the counter as required. * @category State * @default false */ "required"?: boolean; /** * Increase/decrease the value in steps, default is 1. * @category HTML input * @default 1 */ "step"?: number; /** * Set a predefined value * @default 0 */ "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. * @since v7.6.0 * @category Features * @default false */ "calendarUp"?: boolean; /** * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Set a custom ID for the calendar. * @since v7.6.0 * @category HTML attributes * @default this.id */ "dateId"?: string; /** * If you use a format with an unknown length, disable the max length. * @category Features * @default false */ "disableMaxLength"?: boolean; /** * Disable the automatic insertion of separators when typing in the input. * @since v7.6.0 * @category Features * @default false */ "disableTypeAhead"?: boolean; /** * Remove the option to select dates on weekends. * @category Features * @default false */ "disableWeekends"?: boolean; /** * Set the date picker as disabled. * @since v7.6.0 * @category State * @default false */ "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 } * @default '' */ "end"?: string; /** * Placeholder for end date (defaults to the format prop). * @see {@link format } * @category HTML attributes * @default this.format */ "endPlaceholder"?: string; /** * Set an error message for the date picker. Overwrites the helpertext if used at the same time. * @since v7.6.0 * @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. * @since v7.6.0 * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.} * @default 'YYYY-MM-DD' */ "format"?: string; /** * Provide a helpertext for the date input. */ "helpertext"?: string; /** * Trigger the invalid state without an error message. * @since v7.6.0 * @category Validation * @default false */ "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. * @default null */ "language"?: PnLanguages; /** * Set the input `list` attribute for the first date input. * @since v7.6.0 * @category HTML attributes */ "list"?: string; /** * Set the input `list` attribute for the second date input. * @since v7.6.0 * @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 * @default null */ "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 * @default null */ "minDate"?: string; /** * HTML input name * @since v7.6.0 * @category HTML attributes */ "name"?: string; /** * Emmitted when you select a new view. * @since v7.6.0 */ "onCurrentView"?: (event: PnDatePickerCustomEvent) => void; /** * Emitted when an invalid value is set. This can only be done if the user writes in the input itself. * @since v7.6.0 */ "onDateInvalid"?: (event: PnDatePickerCustomEvent<{ start?: string; end?: string }>) => void; /** * Emits on valid date selection. Either if the user selects a date in the calendar or writes it manually. * @since v7.6.0 */ "onDateSelection"?: (event: PnDatePickerCustomEvent) => void; /** * Use the new `dateSelection`. Its here for compatibility. Will be removed in v8. * @deprecated Use the new `dateSelection`. Will be removed in v8. */ "onDateselection"?: (event: PnDatePickerCustomEvent) => void; /** * Emitted when the calendar is toggled. * @since v7.6.0 */ "onToggleCalendar"?: (event: PnDatePickerCustomEvent) => void; /** * Set the HTML pattern prop on the input elements. Make sure it matches the format. * @since v7.6.0 * @category HTML attributes */ "pattern"?: string; /** * Placeholder for the input field (defaults to the format prop). * @see {@link format } * @category HTML attributes * @default this.format */ "placeholder"?: string; /** * Allow the selection of a date range. * @category Features * @default false */ "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. * @since v7.6.0 * @category State * @default false */ "readonly"?: boolean; /** * Set the date picker as required. * @category State * @default false */ "required"?: boolean; /** * Set a predefined value for the from date. * @see {@link format } * @default '' */ "start"?: string; /** * The calendar grid is shown as default. You can set either `months` or `years` as your first choice. * @since v7.6.0 * @category Features * @default CALENDAR */ "view"?: CalendarView; /** * Show weekend numbers to the left of the calendar grid. * @since v7.6.0 * @category Features * @default false */ "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. * @default false */ "disabled"?: boolean; /** * Error message, applies warning styles and icon. */ "error"?: string; /** * Give the fieldset a custom HTML id. * @default this.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. * @default false */ "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. * @since v7.1.0 * @category HTML attributes */ "capture"?: '' | 'user' | 'environment'; /** * Disable the input. * @category HTML attributes * @default false */ "disabled"?: boolean; /** * The helpertext defaults to "Supported formats {x} and max filesize {y}", if there is a value set for the prop `accept`. * @since v7.1.0 */ "helpertext"?: string; /** * Always hide the progress bar, even when upload has begun. * @category Features * @default false */ "hideProgress"?: boolean; /** * The default label is "Click or drag a file here". * @since v7.1.0 */ "label"?: string; /** * Manually set the language. * @category Features * @default null */ "language"?: PnLanguages; /** * Set maximum amount of files to be selected. Any value above 1 will force the `multiple` to be `true`. * @category HTML attributes * @default 1 */ "limit"?: number; /** * Set the maximum upload size. * @category HTML attributes * @default '' */ "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. * @since v7.1.0 * @category HTML attributes */ "name"?: string; /** * This event is emitted when you add files. Either via drag and drop or using the file explorer. */ "onFilesAdded"?: (event: PnFileUploadCustomEvent) => void; /** * If any error occurs, such as: invalid file type, size, limit or error during upload. */ "onFileuploaderror"?: (event: PnFileUploadCustomEvent) => void; /** * Emitted everytime an update is made to one of the files. */ "onUpdate"?: (event: PnFileUploadCustomEvent<{ files: PnUploadFileItem[]; element: HTMLElement }>) => void; /** * Emitted when an upload has been cancelled before completion. */ "onUploadCancelled"?: (event: PnFileUploadCustomEvent) => void; /** * Emitted once the upload is finished. */ "onUploadCompleted"?: (event: PnFileUploadCustomEvent) => void; /** * Emitted once the file upload has begun. */ "onUploadFile"?: (event: PnFileUploadCustomEvent<{ file: PnUploadFileItem; index: number; uploader: any; }>) => void; /** * Emitted everytime you select a valid file. It's a good idea to use this event in order to make use of the built in validation features. */ "onValid"?: (event: PnFileUploadCustomEvent) => void; /** * Set the input as required. * @category HTML attributes * @default false */ "required"?: boolean; } /** * 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 pn-footer-nav. * @see {@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. * @default null */ "language"?: PnLanguages; /** * Set the market for the footer. * @default null */ "market"?: PnMarkets; } /** * The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu. */ 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; /** * The `h1` text content. */ "heading"?: string; /** * Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no. * @default null */ "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)} * @default 'gray900' */ "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)} * @default '' */ "icon"?: string; /** * Make the icon small (16 instead of 24px). * @default false */ "small"?: boolean; } interface PnIllustration { /** * Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`) * @default false */ "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; /** * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Set the input as `disabled`. * @category State * @default false */ "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. * @default this.id */ "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 * @default false */ "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. * @default null */ "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 * @default false */ "readonly"?: boolean; /** * Set the input as `required`. * @category State * @default false */ "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 * @default 'text' */ "type"?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | ''; /** * Set the input as `valid`. Provides a green color and a check icon. * @category Validation * @default false */ "valid"?: boolean; /** * Set the value of the input. * @default '' */ "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 `modalToggle` to determine when the modal is being closed/opened by the user. */ interface PnModal { /** * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight. Do not use if you have a lot of conditional rendering inside the modal. * @since v7.14.0 * @default false */ "allowOverflow"?: boolean; /** * Set a descriptive text for the modal. * @since v7.14.0 */ "helpertext"?: string; /** * Hide the close button. If you disable this, make sure you build your own cancel button. * @since v7.14.0 * @category Features * @default false */ "hideClose"?: boolean; /** * Set a label for the modal. * @since v7.14.0 */ "label"?: string; /** * Set the language. * @since v7.14.0 * @default null */ "language"?: PnLanguages; /** * Define your own max width of the modal. Default is `45em`. * @category Visual * @since v7.14.0 * @default null */ "maxWidth"?: string; /** * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button. * @deprecated Use the new `modalToggle` event instead. */ "onClose"?: (event: PnModalCustomEvent) => void; /** * This event is fired when the modal is toggled. {@since v7.14.0} */ "onModalToggle"?: (event: PnModalCustomEvent<{ open: boolean }>) => void; /** * This event is dispatched after the opening/closing animation has finished playing. {@since v7.14.0} */ "onModalVisiblity"?: (event: PnModalCustomEvent<{ visible: boolean }>) => void; /** * Bind to this property if you want to control the visibility of the modal from your own data. * @category Features * @default false */ "open"?: boolean; /** * Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. * @since v7.14.0 * @category Features * @default false */ "persistent"?: boolean; /** * Use the `sheet` visual. Aligns the modal to the right. * @since v7.14.0 * @category Visual * @default false */ "sheet"?: 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 * @default 'pn_multiselect_all' */ "allValue"?: string; /** * Force the dropdown to always open downwards. * @category Features * @default false */ "bottom"?: boolean; /** * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Disable the select. * @category Validation * @default false */ "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 * @default false */ "invalid"?: boolean; /** * Decide how many items should be shown before ellipsis. Requires the `search` prop to work. * @see {@link search } * @category Features * @default 5 */ "itemCount"?: number; /** * Label placed above the select */ "label": string; /** * Manually set the language, not needed if you have the pnTopbar available * @default null */ "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; /** * This event contains the entire options array with the new props. Dispatched everytime you make changes to any option. */ "onAllOptions"?: (event: PnMultiselectCustomEvent) => void; /** * Contains the search text and the options found for that query. Dispacthed everytime you change the search query. */ "onSearchInput"?: (event: PnMultiselectCustomEvent<{ query: string; found?: PnMultiselectOption[]; }>) => void; /** * This event is dispatched when the user toggles the "Choose all options" box. Also triggers when you click the "Select {number} options" if you are performing a search at the same time. */ "onSelectedAllOptions"?: (event: PnMultiselectCustomEvent<{ checked: boolean; searching: boolean; query?: string; found?: PnMultiselectOption[]; }>) => void; /** * Dispatched when you toggle an option. Includes all the props of the option. */ "onSelectedOption"?: (event: PnMultiselectCustomEvent) => void; /** * Dispatched everytime the multiselect is opened or closed. */ "onToggleSelect"?: (event: PnMultiselectCustomEvent<{ open: boolean }>) => void; /** * 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 * @default false */ "required"?: boolean; /** * Allow the user to search among the options. The selected options will now display underneath the multiselect element. * @category Features * @default false */ "search"?: boolean; /** * Set the search query of the multiselect. * @see {@link search } * @category Features * @default '' */ "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 * @default false */ "selectAll"?: boolean; /** * Select HTML id * @default this.id */ "selectId"?: string; /** * HTML name of the input element. */ "selectName"?: string; /** * Force the dropdown to always open upwards. * @category Features * @default false */ "top"?: boolean; } interface PnOcrSearch { /** * The `language` property will be prioritized before the pnTopbar language. * @default null */ "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. * @default false */ "dropdown"?: string | boolean; /** * Set a unique HTML ID. * @default `pn-page-nav-${uuidv4()}` */ "navid"?: string; /** * Emits the value of the selected item. */ "onNavchange"?: (event: PnPageNavCustomEvent) => void; /** * 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 * @default false */ "active"?: boolean; /** * Pass an href to the items if you want to have links that lead outside of your app */ "href"?: string; /** * Ignore this, it's internal communication with parent */ "onItemselection"?: (event: PnPageNavDropdownItemCustomEvent) => void; /** * 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; /** * Event is emitted when you select an item. */ "onItemselection"?: (event: PnPageNavItemCustomEvent) => void; /** * 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. * @since v7.9.0 */ interface PnPagination { /** * Set a label for the pagination element for screen readers. It defaults to `Pagination`. */ "label"?: string; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * Emitted when the page is changed. Either via clicking a link or selecting a page in the select. */ "onPageSelected"?: (event: PnPaginationCustomEvent<{ page: number; mouse: MouseEvent }>) => void; /** * This event fires when the user changes how many items should be shown per page. */ "onRowsSelected"?: (event: PnPaginationCustomEvent<{ rows: number; change: Event }>) => void; /** * 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 * @default 1 */ "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 * @default 5 */ "pagesVisible"?: number; /** * Set a HTML id on the pagination element. * @default null */ "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 * @default null */ "rows"?: number; /** * Default label is "Items per page". * @see {@link rows } * @category Rows per page * @default null */ "rowsLabel"?: string; /** * Set available items per page options the user can select. Use a comma separated string. * @see {@link rows } * @category Rows per page * @default '10,25,50' */ "rowsList"?: string; /** * Set a custom URL template. Use `{page}` within the string to position where the dynamic page number should be. * @default '?page={page}' */ "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 * @default 0 */ "progress"?: number; /** * A unique HTML id fror the progress bar * @default this.idProgress */ "progressId"?: string; /** * Replaces the default progress percentage text */ "progressText"?: string; /** * Text shown on success (100%) */ "successText"?: string; } /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ interface PnProgressIndicator { /** * Takes the index of the active step * @default 0 */ "activeStep"?: number; /** * This will emit when progress is changed and is the value you want to bind to your VM state */ "onProgresschange"?: (event: PnProgressIndicatorCustomEvent) => void; } /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ 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. * @default false */ "checked"?: boolean; /** * Set by the parent component. Do not use manually. * @hide true */ "index"?: number; /** * The step name. */ "name"?: string; "onSetactivestep"?: (event: PnProgressIndicatorStepCustomEvent) => void; } /** * 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. * @category Steps * @default this.minStep */ "currentStep"?: number; /** * Use the dots visual, instead of the bar. This will hide the label from view, but is still accessible to screenreaders. * @since v7.16.0 * @category Visual * @default false */ "dots"?: boolean; /** * Set custom label for the stepper, default label is "Step". * @default '' */ "label"?: string; /** * Set the language manually, only use this prop if the pnTopbar is not loaded. Will not overwrite the custom `label` prop if used. * @default null */ "language"?: PnLanguages; /** * Set a custom HTML id on the progress stepper element to associate progress bar with label. * @default '' */ "progressStepperId"?: string; /** * You can add a custom optional string to the label if you need a name for the current step. * @category Steps */ "stepName"?: string; /** * Set total amount of steps, maximum allowed is `7`. * @category Steps * @default this.maxStep */ "totalSteps"?: number; } /** * 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. * @default false */ "checked"?: boolean; /** * Disable the radio. * @category State * @default false */ "disabled"?: boolean; /** * Allow the radio to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden. The prop `tile` must be used at the same time. * @see {@link tile } * @since v7.17.0 * @category Tile * @default false */ "expand"?: boolean; /** * This adds an optional helpertext under the label. */ "helpertext"?: string; /** * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work. * @see {@link tile } * @category Tile * @default null */ "icon"?: string; /** * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio. * @category State * @default false */ "invalid"?: boolean; /** * The radio label */ "label"?: string; /** * The name of the radio group. */ "name"?: string; /** * A unique HTML ID for the radio. * @default this.id */ "radioid"?: string; /** * Set the radio as required. * @category State * @default false */ "required"?: boolean; /** * Turn the radio into a clickable tile. A border and padding is added. **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements. * @category Tile * @default false */ "tile"?: boolean; /** * This will be emitted on change and input events. */ "value": string; } /** * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and * has support for most attributes. * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value. * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input). * @since v7.20.0 */ interface PnRange { /** * Disable the range input. * @category State * @default false */ "disabled"?: boolean; /** * Set an error message for the range input. * @category State * @default null */ "error"?: string; /** * Set a helpertext for the range input. * @default null */ "helpertext"?: string; /** * Set an icon for the range/input field. * @default null */ "icon"?: string; /** * Set an icon at the end of the range or for the second input field when using `multiple`. * @default null */ "iconEnd"?: string; /** * Display an input for the range value. Allowing the user to type or use the slider to set the value. * @category Features * @default false */ "input"?: boolean; /** * Set the error visual for the range input, same as `error`, but without a message. * @category State * @default false */ "invalid"?: boolean; /** * Label for the range input. */ "label": string; /** * Label for the range end input. */ "labelEnd"?: string; /** * Add markers. This will also render a `datalist` element with `options`. Omitting the `label` for a marker will use the `value` as label instead. Set `label` to `null` or `''` to hide it completely. * @default [] */ "markers"?: { value: number; label?: string }[]; /** * The range input max value. * @category HTML Attributes * @default 100 */ "max"?: number; /** * The range input min value. * @category HTML Attributes * @default 0 */ "min"?: number; /** * Allow multiple values to be selected * @category Features * @default false */ "multiple"?: boolean; /** * The range input name. * @category HTML Attributes */ "name"?: string; /** * The range input name. * @category HTML Attributes */ "nameEnd"?: string; /** * Emitted as the user makes any changes to the range/input value. */ "onRangeSelected"?: (event: PnRangeCustomEvent<{ value: number; /* The end value when using `multiple`. */ valueEnd?: number; /* The selected percentage of the range input. */ percentage: number; /* The difference between `value` and `valueEnd`. */ difference?: number; }>) => void; /** * Set a custom HTML id. * @default this.id */ "pnId"?: string; /** * Set a custom HTML id. * @default this.idEnd */ "pnIdEnd"?: string; /** * Set a step value for the range input. * @category HTML Attributes * @default '' */ "step"?: HTMLInputElement['step']; /** * Set a prefix for the range/input field. * @default null */ "textPrefix"?: string; /** * Set a suffix for the range/input field. * @default null */ "textSuffix"?: string; /** * Hide the tooltip. * @category Features * @default false */ "tooltipHide"?: boolean; /** * Range tooltip label template. Default is simply the value of the range input. * @example // Show a suffixed '%' in the tooltip with '{value} %'. * @category Features * @default this.tooltipDefault */ "tooltipTemplate"?: string; /** * The range input value. * @category HTML Attributes * @default 0 */ "value"?: number; /** * The range end input value. * @category HTML Attributes * @default 0 */ "valueEnd"?: number; } /** * 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. * @default false */ "iconOnly"?: boolean; /** * Set the language manually. * @default null */ "language"?: PnLanguages; /** * Icon on the left side instead of on the right. * @default false */ "leftIcon"?: boolean; /** * Smaller button. * @default false */ "small"?: boolean; } /** * The search field has multiple button variants that changes the visual appearance. * @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 PnSearchField { /** * Allow the browser to autocomplete the search field. */ "autocomplete"?: string; /** * Button variant changes the visual of the search field: - `''` Standard with a blue button. - `simple` | ~~`icon`~~ with simple white icon only button. - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button. - `jumbo` with a larger blue icon only button. * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`. * @category Button * @default '' */ "button"?: PnSearchFieldButton; /** * Label for the button element. * @category Button */ "buttonLabel"?: string; /** * Light instead of dark search button. * @deprecated The color is now set automatically based on the button prop. * @category Button * @default false */ "buttonLight"?: boolean; /** * Add a tooltip to the search button. * @category Button */ "buttonTooltip"?: string; /** * Disable the search field. * @category State * @default false */ "disabled"?: boolean; /** * Provide an aria-label for the search field. */ "label": string; /** * Override the pntopbar language. * @default null */ "language"?: PnLanguages; /** * Point to a datalist element with this id. */ "list"?: string; /** * Display loading animation. * @category State * @default false */ "loading"?: boolean; /** * Set HTML name of the search input. */ "name"?: string; /** * This is emitted on search submission both with keyboard and mouse. */ "onSearch"?: (event: PnSearchFieldCustomEvent) => void; /** * Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */ "onUpdate"?: (event: PnSearchFieldCustomEvent) => void; /** * Set a search field placeholder. This is no replacement for a `label`. */ "placeholder"?: string; /** * Set the search field as required. * @category State * @default false */ "required"?: boolean; /** * Set a unique ID for the search input. * @default this.id */ "searchid"?: string; /** * Set the value of the search field. * @default '' */ "value"?: string; } /** * The `pn-segment` is built with a native `input[type="radio"]` in the background. * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead. */ interface PnSegment { /** * Disable the segment. * @since v7.7.0 * @default false */ "disabled"?: boolean; /** * The SVG content of the icon you want. */ "icon"?: string; /** * The segment label, same as the slot. * @since v7.7.0 */ "label"?: string; /** * The segment controller name. */ "name": string; /** * This event is used by the `pn-segmented-control` component. Do not use manually. */ "onSegmentHover"?: (event: PnSegmentCustomEvent) => void; /** * A unique HTML id. * @default this.id */ "segmentid"?: string; /** * Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. * @hide true * @default false */ "selected"?: boolean; /** * The segment value. */ "value": string; } /** * The `pn-segmented-control` and `pn-segmented` is built with 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 segment state is being changed. */ interface PnSegmentedControl { /** * This is the name of the radio buttons inside the controller. * @deprecated Set the name in the nested `pn-segment` components. */ "name": string; /** * Currently active segment value. */ "value"?: string; } /** * The `pn-select` uses a native `select` element under the hood. * Use the slot to include `option` elements. * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option. * @nativeChange Use the `change` event to listen to changes on the select element. */ interface PnSelect { /** * HTML autocomplete. * @category HTML */ "autocomplete"?: string; /** * Use the compact label variant. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Disable the select. * @category Validation * @default false */ "disabled"?: boolean; /** * Display an error message and trigger the invalid state. * @category Validation */ "error"?: string; /** * HTML form name. * @category HTML */ "form"?: 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 * @default false */ "invalid"?: boolean; /** * Label placed above the select. */ "label": string; /** * HTML select name. * @category HTML */ "name"?: string; /** * Set the select as required. * @category Validation * @default false */ "required"?: boolean; /** * Select HTML id * @default this.id */ "selectId"?: string; } /** * Display a spinner to indicate a loading state. */ interface PnSpinner { /** * Light version of the spinner. * @default false */ "light"?: boolean; /** * Size in em. * @default 1.5 */ "size"?: number; } /** * This tab should control a tab panel. * Use the `ariacontrols` and `tabid` props to connect the tab with the tab panel. * The tab panel should in turn have `aria-labelledby` set to the `tabid` of the tab. * If you use the `href` prop, the tab will turn into an anchor element instead of a button. * This does not required the ariacontrols and tabid props. */ interface PnTab { /** * Is set by `pn-tablist`, don't use this prop. * @hide true */ "activeTab"?: string; /** * Use the ID of the container that this tab controls. */ "ariacontrols"?: string; /** * Turns the tab from a `button` to an `a` element, but only if the `pn-tablist` is inside a `pn-header`. */ "href"?: string; /** * The SVG content of the icon you want to display */ "icon"?: string; /** * Set a label for the tab. */ "label": string; /** * Used by `pn-tab` to communicate with `pn-tablist`. Emits the selected tab value and element. */ "onSetActiveTab"?: (event: PnTabCustomEvent<{ val: string; el: HTMLElement }>) => void; /** * Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab gets focus. */ "onTabEnter"?: (event: PnTabCustomEvent) => void; /** * Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab is blured. */ "onTabLeave"?: (event: PnTabCustomEvent) => void; /** * Tab ID, use if you want to have the tab container be `aria-labelledby` by this tab. */ "tabid"?: string; /** * This is the value that will be matched with `pn-tablist` value. (required) */ "value": string; } /** * The `pn-table` component is just a wrapper for your HTML table element. * You need to create the markup, but the component will deal with the styling. * We have a built in class for divs inside table colums called `column-wrapper`. * This will line up your content and provide a grid gap. */ interface PnTable { /** * Add border to table. * @default false */ "bordered"?: boolean; /** * Use the gray variant instead of blue. * @default false */ "gray"?: boolean; /** * Make the table striped. * @default false */ "striped"?: boolean; } /** * The tablist allows you to create a list with nested `pn-tab` components. * These should control the visibility of panel elements on the page. * If you use the slot name "menu" the tablist will adapt to be used inside of * a `pn-header` component. This also allows the pn-tabs to use the `href` prop. */ interface PnTablist { /** * Give the tablist a name for screenreaders. */ "label": string; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab. This is the event and value you listen to when you toggle the visibility among your tabpanels. */ "onTabchange"?: (event: PnTablistCustomEvent) => void; /** * Make the tablist smaller */ "small"?: boolean; /** * Icons are stacked vertically instead of the default rows * @default false */ "stackedicons"?: boolean; /** * The value of the tab that is currently active, each `` also expects a unique value */ "value": string; } /** * The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status. */ interface PnTag { /** * Set tag appearance: `discrete`, `positive`, `warning` & `error`. * @category Visual * @default '' */ "appearance"?: '' | 'discrete' | 'positive' | 'warning' | 'error'; /** * Set darker background-color on the tag. This is intended for better tag visibility on colored background. * @category Visual * @deprecated Will be removed in v8.0.0 * @default false */ "dark"?: boolean; /** * Select icon from out `pn-design-assets` list. Works with any SVG content. **Please note**: Can not be used with the `xsmall` prop due to the small size. * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.} */ "icon"?: string; /** * The label of the tag. */ "label": string; /** * Set larger tag. * @category Size * @default false */ "large"?: boolean; /** * Set smaller tag. * @category Size * @default false */ "small"?: boolean; /** * Set extra small tag. * @since v7.11.0 * @category Size * @default false */ "xsmall"?: boolean; } /** * The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support. */ interface PnTextLink { /** * Treat the link as a download link. * @category Link attributes */ "download"?: string; /** * The URL string. */ "href": string; /** * Set the hreflang of the URL destination. * @category Link attributes */ "hreflang"?: string; /** * SVG content of the icon. * @category Visual */ "icon"?: string; /** * The link text. * @since v7.5.0 */ "label"?: string; /** * Align the icon on the left. * @category Visual * @default false */ "leftIcon"?: boolean; /** * Use the light version of the link. * @category Visual * @default false */ "light"?: boolean; /** * Set a unique html ID of the a element. * @category Link attributes */ "linkid"?: string; /** * Link media. * @category Link attributes */ "media"?: string; /** * Set referrerpolicy on the link. * @category Link attributes */ "referrerpolicy"?: ReferrerPolicy; /** * Set the rel of the link. * @category Link attributes * @default 'noopener noreferrer' */ "rel"?: string; /** * Set the target of the link. * @category Link attributes */ "target"?: string; } /** * The `pn-textarea` is built with a native `textarea`. * This means you can use native events to listen to the input. * @nativeInput Use the `input` event to listen to content being modified by the user. */ interface PnTextarea { /** * Allow the browser to autocomplete the textarea. * @category HTML Textarea * @default 'off' */ "autocomplete"?: string; /** * Set the col count for the textarea. * @category HTML Textarea * @default 20 */ "cols"?: number; /** * Use the compact label variant. * @since v7.21.0 * @default false */ "compact"?: boolean; /** * Disable the textarea. * @category State * @default false */ "disabled"?: boolean; /** * Same as `invalid`, but will display the string as an error message under the textarea. * @category State */ "error"?: string; /** * Set the associated form. * @category HTML Textarea */ "form"?: string; /** * Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */ "helpertext"?: string; /** * Set the textarea as `invalid`, will make the Label and focus rings red. * @category State * @default false */ "invalid"?: boolean; /** * The label describing the textarea. */ "label": string; /** * The maximum number of characters the user should be able to add, also adds a visible counter. * @category HTML Textarea */ "maxlength"?: number; /** * HTML name. * @category HTML Textarea */ "name"?: string; /** * Placeholder for the textarea. * @category HTML Textarea */ "placeholder"?: string; /** * Make the textarea readonly. * @category State * @default false */ "readonly"?: boolean; /** * Make the textarea required. * @category HTML Textarea * @default false */ "required"?: boolean; /** * Allow the user to resize the textarea vertically. Handle width in your own layout. * @category HTML Textarea * @default false */ "resize"?: boolean; /** * Set the row count for the textarea. * @category HTML Textarea * @default 2 */ "rows"?: number; /** * Allow the browser to spellcheck the textarea. * @category HTML Textarea * @default false */ "spellcheck"?: boolean; /** * A unique ID connecting the element to the label. * @category HTML Textarea * @default this.id */ "textareaid"?: string; /** * Set the textarea as `valid`, will make the Label and focus rings green. * @category State * @default false */ "valid"?: boolean; /** * The textarea content, do not provide slotted content. * @default '' */ "value"?: string; /** * Set the wrap control. * @category HTML Textarea * @default 'soft' */ "wrap"?: string; } /** * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration. * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set, * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible. */ interface PnTile { /** * Use the horizontal tile. * @category Layout * @default false */ "horizontal"?: boolean; /** * The SVG content of a decorative icon. * @since v7.12.0 * @category Image */ "icon"?: string; /** * The SVG content of an illustration. * @category Image */ "illustration"?: string; /** * Label of the link. This is required for the component to be accessible. */ "label": string; /** * Emitted when the link is clicked. Use the `click` property to `preventDefault` if you wish to perform the navigation programmatically. * @since v7.12.0 */ "onPnTile"?: (event: PnTileCustomEvent<{ click: MouseEvent }>) => void; /** * The rel attribute of the link. * @category href * @default 'noopener noreferrer' */ "rel"?: string; /** * The target attribute of the link. * @category href */ "target"?: string; /** * Set a string of text for the tile. Same as the default slot. * @since v7.12.0 */ "text"?: string; /** * The link of the tile. This is required for the component to be accessible. * @category href */ "url": string; } /** * This component is able to fill many roles of a classic toast. * It has 4 different colors, a temporary state, hide button, icon and illustration support. * The `pn-toast` will expand to its parent containers full width. * Either limit the parent width or set a CSS rule to your specific width if needed. */ interface PnToast { /** * Default color is blue, you also have the option of success (green), warning (orange) and error (red). * @category Visual */ "appearance"?: '' | 'success' | 'warning' | 'error'; /** * Show close button. * @category Features * @default false */ "closable"?: boolean; /** * Set a title for the toast. Requires the `text` prop in order to work. * @description Can be used together with slotted content. * @default '' */ "heading"?: string; /** * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own. * @see {@link closable } * @category Features * @default false */ "hide"?: boolean; /** * Set an SVG icon. * @category Visual */ "icon"?: string; /** * Set an SVG illustration. * @category Visual */ "illustration"?: string; /** * Manually set the language, only needed if the `closable` prop is enabled. * @see {@link closable } * @category Features * @default null */ "language"?: PnLanguages; /** * Event fired when the close button is pressed. */ "onClose"?: (event: PnToastCustomEvent) => void; /** * This event is fired when the toast is fully hidden after the animation is finished. Triggers from the close button or if the prop `hide` is set to true. * @since v7.6.0 */ "onHidden"?: (event: PnToastCustomEvent) => void; /** * This will apply a shadow and border to the toast. * @category Visual * @default false */ "temporary"?: boolean; /** * Set a paragraph of text for the toast. * @description Can be used together with slotted content. * @default '' */ "text"?: string; /** * Give the toast a HTML ID. */ "toastId"?: string; } /** * The `pn-toggle-switch` 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 switch state is being toggled. */ interface PnToggleSwitch { /** * Precheck the toggle. * @default false */ "checked"?: boolean; /** * Disable the toggle. * @category State * @default false */ "disabled"?: boolean; /** * Provide a helpertext for the toggle switch. */ "helpertext"?: string; /** * A label for the toggle switch. */ "label": string; /** * Make the toggle larger. * @category Visual * @default false */ "large"?: boolean; /** * Set the loading state. * @category State * @default false */ "loading"?: boolean; /** * HTML toggle name. * @category HTML * @default null */ "name"?: string; /** * Make the toggle smaller. * @category Visual * @default false */ "small"?: boolean; /** * Set a unique HTML id. * @default this.id */ "toggleid"?: string; /** * HTML toggle value. * @category HTML * @default null */ "value"?: string; } /** * The `pn-tooltip` can display slotted HTML content or a text `string` with the `tooltip` prop. * Remember that the component is techincally a `button` element, don't put any HTML content that would be out of place in a regular button * (no headlines, other input elements, etc...). */ interface PnTooltip { /** * Apply the light color if you use a dark background. * @default false */ "light"?: boolean; /** * Overrides the slotted content to create a small tooltip instead. * @since v7.3.0 */ "tooltip"?: string; /** * Apply the warning color and change the icon to `!`. * @default false */ "warning"?: boolean; } /** * The wizard component lets you highlight areas on the page * that is accompanied with a modal for user guidance. * Either use the label & helpertext props to set a title and description, * or use the default slot to add custom HTML content. * The steps prop takes an array of querySelectors that the wizard will highlight in order. * Set the step prop to start the wizard at a specific step (0-indexed). -1 closes the wizard. * @since v7.19.0 */ interface PnWizard { /** * By default, the component will hide the overflow on the body element when active. You may wish to disable this if your HTML/CSS structure is not compatible with this behavior. * @category Features * @default false */ "displayOverflow"?: boolean; /** * Set a helpertext for the wizard. * @default '' */ "helpertext"?: string; /** * Hide the back button. * @category Buttons * @default false */ "hideBack"?: boolean; /** * Hide the finish button. * @category Buttons * @default false */ "hideFinish"?: boolean; /** * Hide the next button. * @category Buttons * @default false */ "hideNext"?: boolean; /** * Set a title for the wizard. * @default '' */ "label"?: string; /** * Set a custom label for the back button. * @category Buttons * @default '' */ "labelBack"?: string; /** * Set a custom label for the finish button. * @category Buttons * @default '' */ "labelFinish"?: string; /** * Set a custom label for the next button. * @category Buttons * @default '' */ "labelNext"?: string; /** * Manually set the language. * @default null */ "language"?: PnLanguages; /** * Emitted when the wizard is canceled or finished. */ "onWizardClose"?: (event: PnWizardCustomEvent<{ step: number; finished: boolean }>) => void; /** * Emitted when the highlighted area is clicked. */ "onWizardHighlightClick"?: (event: PnWizardCustomEvent) => void; /** * Emitted when the wizard step changes. */ "onWizardStep"?: (event: PnWizardCustomEvent<{ step: number; next: boolean; prev: boolean }>) => void; /** * Set a custom HTML id. * @default this.id */ "pnId"?: string; /** * Choose to display one of 2 built in progress steppers. - `dots`: The pn-progress-stepper with the `dots` prop. - `text`: simple text indicator "current/total" * @category Features * @default '' */ "progress"?: '' | 'dots' | 'text'; /** * Choose where the scrolling will focus on the highlighted elements. * @category Features * @default 'center' */ "scrollBlock"?: 'start' | 'center' | 'end' | 'nearest'; /** * Assign the current step. Any value above -1 is valid and will start the wizard. * @category Wizard steps * @default -1 */ "step"?: number; /** * The list of querySelectors that the wizards will highlight. Recommended maximum of 7 steps. * @category Wizard steps * @default [] */ "steps"?: string[]; } /** * Check the delivery date for letters, newspapers and direct mail that are distributed every second day. */ interface PnZipcodeSearch { /** * The `language` property will be prioritized before the pnTopbar language. * @default null */ "language"?: PnZipCodeSearchLanguages; /** * Event fired when search has result */ "onSearchsuccessful"?: (event: PnZipcodeSearchCustomEvent) => void; /** * Set a pre initialized value. */ "value"?: string; } interface IntrinsicElements { "pn-accordion": PnAccordion; "pn-accordion-row": PnAccordionRow; "pn-action-menu": PnActionMenu; "pn-button": PnButton; "pn-button-dropdown": PnButtonDropdown; "pn-card": PnCard; "pn-checkbox": PnCheckbox; "pn-choice-chip": PnChoiceChip; "pn-counter": PnCounter; "pn-date-picker": PnDatePicker; "pn-fieldset": PnFieldset; "pn-file-upload": PnFileUpload; "pn-footer": PnFooter; "pn-header": PnHeader; "pn-icon": PnIcon; "pn-illustration": PnIllustration; "pn-input": PnInput; "pn-modal": PnModal; "pn-multiselect": PnMultiselect; "pn-ocr-search": PnOcrSearch; "pn-page-nav": PnPageNav; "pn-page-nav-dropdown-item": PnPageNavDropdownItem; "pn-page-nav-item": PnPageNavItem; "pn-pagination": PnPagination; "pn-progress-bar": PnProgressBar; "pn-progress-indicator": PnProgressIndicator; "pn-progress-indicator-step": PnProgressIndicatorStep; "pn-progress-stepper": PnProgressStepper; "pn-radio-button": PnRadioButton; "pn-range": PnRange; "pn-read-only-button": PnReadOnlyButton; "pn-search-field": PnSearchField; "pn-segment": PnSegment; "pn-segmented-control": PnSegmentedControl; "pn-select": PnSelect; "pn-spinner": PnSpinner; "pn-tab": PnTab; "pn-table": PnTable; "pn-tablist": PnTablist; "pn-tag": PnTag; "pn-text-link": PnTextLink; "pn-textarea": PnTextarea; "pn-tile": PnTile; "pn-toast": PnToast; "pn-toggle-switch": PnToggleSwitch; "pn-tooltip": PnTooltip; "pn-wizard": PnWizard; "pn-zipcode-search": PnZipcodeSearch; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * 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. */ "pn-accordion": LocalJSX.PnAccordion & JSXBase.HTMLAttributes; /** * 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. */ "pn-accordion-row": LocalJSX.PnAccordionRow & JSXBase.HTMLAttributes; /** * Create a list of actions in an accessible way. * Option types include: * - Regular button, click and it will collapse the menu, * - Checkbox/radio, toggle the option on/off * - Link, behaves like a regular `a[href]` element. * You can group these actions in groups and/or sub menus. * - `group`, an array of options. The label will act as a title for the items. * - `options`, an array of options. These items will appear in a sub-menu that can be toggled. * @since v7.13.0 * @see {@link PnActionMenuItem } */ "pn-action-menu": LocalJSX.PnActionMenu & JSXBase.HTMLAttributes; /** * 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. */ "pn-button": LocalJSX.PnButton & JSXBase.HTMLAttributes; /** * The open/closing of the dropdown is handled by the component itself. * @nativeClick Use the `click` event to listen when the button is clicked. */ "pn-button-dropdown": LocalJSX.PnButtonDropdown & JSXBase.HTMLAttributes; /** * 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. * @since v7.12.0 */ "pn-card": LocalJSX.PnCard & JSXBase.HTMLAttributes; /** * 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. */ "pn-checkbox": LocalJSX.PnCheckbox & JSXBase.HTMLAttributes; /** * 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. */ "pn-choice-chip": LocalJSX.PnChoiceChip & JSXBase.HTMLAttributes; /** * 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). */ "pn-counter": LocalJSX.PnCounter & JSXBase.HTMLAttributes; /** * 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). */ "pn-date-picker": LocalJSX.PnDatePicker & JSXBase.HTMLAttributes; /** * 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. */ "pn-fieldset": LocalJSX.PnFieldset & JSXBase.HTMLAttributes; /** * 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`. */ "pn-file-upload": LocalJSX.PnFileUpload & JSXBase.HTMLAttributes; /** * 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 pn-footer-nav. * @see {@link https://portal.postnord.com/web-components/?path=/docs/external-components-pn-footer-nav--docs pn-footer-nav} */ "pn-footer": LocalJSX.PnFooter & JSXBase.HTMLAttributes; /** * The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu. */ "pn-header": LocalJSX.PnHeader & JSXBase.HTMLAttributes; /** * 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. */ "pn-icon": LocalJSX.PnIcon & JSXBase.HTMLAttributes; "pn-illustration": LocalJSX.PnIllustration & JSXBase.HTMLAttributes; /** * 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). */ "pn-input": LocalJSX.PnInput & JSXBase.HTMLAttributes; /** * Present content in a modal that overlays everything on the current page. * Use the prop `open` to toggle the visiblity. * Use the event `modalToggle` to determine when the modal is being closed/opened by the user. */ "pn-modal": LocalJSX.PnModal & JSXBase.HTMLAttributes; /** * 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} */ "pn-multiselect": LocalJSX.PnMultiselect & JSXBase.HTMLAttributes; "pn-ocr-search": LocalJSX.PnOcrSearch & JSXBase.HTMLAttributes; /** * @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.} */ "pn-page-nav": LocalJSX.PnPageNav & JSXBase.HTMLAttributes; /** * @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.} */ "pn-page-nav-dropdown-item": LocalJSX.PnPageNavDropdownItem & JSXBase.HTMLAttributes; /** * @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.} */ "pn-page-nav-item": LocalJSX.PnPageNavItem & JSXBase.HTMLAttributes; /** * 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. * @since v7.9.0 */ "pn-pagination": LocalJSX.PnPagination & JSXBase.HTMLAttributes; "pn-progress-bar": LocalJSX.PnProgressBar & JSXBase.HTMLAttributes; /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ "pn-progress-indicator": LocalJSX.PnProgressIndicator & JSXBase.HTMLAttributes; /** * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead. * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.} */ "pn-progress-indicator-step": LocalJSX.PnProgressIndicatorStep & JSXBase.HTMLAttributes; /** * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...). */ "pn-progress-stepper": LocalJSX.PnProgressStepper & JSXBase.HTMLAttributes; /** * 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. */ "pn-radio-button": LocalJSX.PnRadioButton & JSXBase.HTMLAttributes; /** * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and * has support for most attributes. * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value. * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input). * @since v7.20.0 */ "pn-range": LocalJSX.PnRange & JSXBase.HTMLAttributes; /** * 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. */ "pn-read-only-button": LocalJSX.PnReadOnlyButton & JSXBase.HTMLAttributes; /** * The search field has multiple button variants that changes the visual appearance. * @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). */ "pn-search-field": LocalJSX.PnSearchField & JSXBase.HTMLAttributes; /** * The `pn-segment` is built with a native `input[type="radio"]` in the background. * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead. */ "pn-segment": LocalJSX.PnSegment & JSXBase.HTMLAttributes; /** * The `pn-segmented-control` and `pn-segmented` is built with 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 segment state is being changed. */ "pn-segmented-control": LocalJSX.PnSegmentedControl & JSXBase.HTMLAttributes; /** * The `pn-select` uses a native `select` element under the hood. * Use the slot to include `option` elements. * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option. * @nativeChange Use the `change` event to listen to changes on the select element. */ "pn-select": LocalJSX.PnSelect & JSXBase.HTMLAttributes; /** * Display a spinner to indicate a loading state. */ "pn-spinner": LocalJSX.PnSpinner & JSXBase.HTMLAttributes; /** * This tab should control a tab panel. * Use the `ariacontrols` and `tabid` props to connect the tab with the tab panel. * The tab panel should in turn have `aria-labelledby` set to the `tabid` of the tab. * If you use the `href` prop, the tab will turn into an anchor element instead of a button. * This does not required the ariacontrols and tabid props. */ "pn-tab": LocalJSX.PnTab & JSXBase.HTMLAttributes; /** * The `pn-table` component is just a wrapper for your HTML table element. * You need to create the markup, but the component will deal with the styling. * We have a built in class for divs inside table colums called `column-wrapper`. * This will line up your content and provide a grid gap. */ "pn-table": LocalJSX.PnTable & JSXBase.HTMLAttributes; /** * The tablist allows you to create a list with nested `pn-tab` components. * These should control the visibility of panel elements on the page. * If you use the slot name "menu" the tablist will adapt to be used inside of * a `pn-header` component. This also allows the pn-tabs to use the `href` prop. */ "pn-tablist": LocalJSX.PnTablist & JSXBase.HTMLAttributes; /** * The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status. */ "pn-tag": LocalJSX.PnTag & JSXBase.HTMLAttributes; /** * The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support. */ "pn-text-link": LocalJSX.PnTextLink & JSXBase.HTMLAttributes; /** * The `pn-textarea` is built with a native `textarea`. * This means you can use native events to listen to the input. * @nativeInput Use the `input` event to listen to content being modified by the user. */ "pn-textarea": LocalJSX.PnTextarea & JSXBase.HTMLAttributes; /** * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration. * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set, * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible. */ "pn-tile": LocalJSX.PnTile & JSXBase.HTMLAttributes; /** * This component is able to fill many roles of a classic toast. * It has 4 different colors, a temporary state, hide button, icon and illustration support. * The `pn-toast` will expand to its parent containers full width. * Either limit the parent width or set a CSS rule to your specific width if needed. */ "pn-toast": LocalJSX.PnToast & JSXBase.HTMLAttributes; /** * The `pn-toggle-switch` 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 switch state is being toggled. */ "pn-toggle-switch": LocalJSX.PnToggleSwitch & JSXBase.HTMLAttributes; /** * The `pn-tooltip` can display slotted HTML content or a text `string` with the `tooltip` prop. * Remember that the component is techincally a `button` element, don't put any HTML content that would be out of place in a regular button * (no headlines, other input elements, etc...). */ "pn-tooltip": LocalJSX.PnTooltip & JSXBase.HTMLAttributes; /** * The wizard component lets you highlight areas on the page * that is accompanied with a modal for user guidance. * Either use the label & helpertext props to set a title and description, * or use the default slot to add custom HTML content. * The steps prop takes an array of querySelectors that the wizard will highlight in order. * Set the step prop to start the wizard at a specific step (0-indexed). -1 closes the wizard. * @since v7.19.0 */ "pn-wizard": LocalJSX.PnWizard & JSXBase.HTMLAttributes; /** * Check the delivery date for letters, newspapers and direct mail that are distributed every second day. */ "pn-zipcode-search": LocalJSX.PnZipcodeSearch & JSXBase.HTMLAttributes; } } }