@postnord/web-components
Version:
PostNord Web Components
1,438 lines • 351 kB
TypeScript
/* 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.
* @deprecated Use `pn-id` instead.
* @category HTML attributes
*/
"checkboxid"?: string;
/**
* Programmatically check the input.
* @category Native attributes
* @default false
*/
"checked"?: boolean;
/**
* Disable the checkbox.
* @category Native attributes
* @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 Features
* @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 Features
* @default null
*/
"icon"?: string;
/**
* Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state.
* @category Native attributes
* @default false
*/
"indeterminate": boolean;
/**
* If set to true, color scheme will turn red, indicating that there is an issue related to the checkbox.
* @category Native attributes
* @default false
*/
"invalid"?: boolean;
/**
* The checkbox label, this is required for the checkbox to be 100% accessible out of the box.
*/
"label"?: string;
/**
* The name of the checkbox group.
* @category Native attributes
*/
"name"?: string;
/**
* Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabel"?: string;
/**
* Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabelledby"?: string;
/**
* A unique HTML ID for the checkbox.
* @since v7.25.0
* @category HTML attributes
*/
"pnId"?: string;
/**
* Set the checkbox as required.
* @category Native attributes
* @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 Features
* @default false
*/
"tile"?: boolean;
/**
* This will be emitted on change and input events.
* @category Native attributes
*/
"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 {
/**
* Programatically check the input.
* @category Native attributes
* @default false
*/
"checked"?: boolean;
/**
* A unique HTML ID for the choice chip.
* @deprecated Use the `pn-id` prop instead.
* @category HTML attributes
*/
"choiceid"?: string;
/**
* Disable the input.
* @category Native attributes
* @default false
*/
"disabled": boolean;
/**
* Add an icon to the choice chip.
* @category Features
*/
"icon"?: string;
/**
* The choice chip label. This is required for the component to be accessible.
*/
"label": string;
/**
* Use the large size for the choice chip.
* @category Features
* @default false
*/
"large": boolean;
/**
* The name of the checkbox group. This is required if you use the `radio` prop.
* @category Native attributes
*/
"name"?: string;
/**
* A unique HTML ID for the choice chip
* @since v7.25.0
* @category HTML attributes
*/
"pnId"?: string;
/**
* Make the choice chip a radio input. By default, it behaves as a checkbox. You must assign a `name` for the radio to work.
* @category Features
* @default false
*/
"radio": boolean;
/**
* Set the input as required.
* @category Native attributes
* @default false
*/
"required": boolean;
/**
* Use the small size for the choice chip.
* @category Features
* @default false
*/
"small": boolean;
/**
* This will be emitted on change and input.
* @category Native attributes
*/
"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
* @category Features
* @default false
*/
"compact"?: boolean;
/**
* Set a unique HTML ID for the counter.
* @deprecated Use `pn-id` instead.
* @category HTML attributes
*/
"counterid"?: string;
/**
* Set the counter as disabled.
* @category Native attributes
* @default false
*/
"disabled": boolean;
/**
* Set a helpertext for the counter.
*/
"helpertext"?: string;
/**
* Hide the tooltips for the increase/decrease button.
* @since v7.25.0
* @category Features
* @default false
*/
"hideTooltips"?: boolean;
/**
* Label for the counter. This is required for the counter to be 100% accessible out of the box.
*/
"label"?: string;
/**
* Text for the decrease button. Default is "Decrease".
* @category Features
*/
"labelDecrease"?: string;
/**
* Text for the increase button. Default is "Increase".
* @category Features
*/
"labelIncrease"?: string;
/**
* Set the language manually for the built in translations.
* @default undefined
*/
"language"?: PnLanguages;
/**
* Suggest values for the counter input.
* @category Native attributes
*/
"list"?: string;
/**
* Maximum value.
* @category Native attributes
*/
"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 Features
*/
"maxMessage"?: string;
/**
* Minimum value.
* @category Native attributes
*/
"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 Features
*/
"minMessage"?: string;
/**
* HTML input name.
* @category Native attributes
*/
"name"?: string;
/**
* Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabel"?: string;
/**
* Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabelledby"?: string;
/**
* Set a unique HTML ID for the counter.
* @since v7.25.0
* @category HTML attributes
*/
"pnId"?: string;
/**
* Set the counter as readonly.
* @category Native attributes
* @default false
*/
"readonly": boolean;
/**
* Set the counter as required.
* @category Native attributes
* @default false
*/
"required": boolean;
/**
* Increase/decrease the value in steps, default is 1.
* @category Native attributes
* @default 1
*/
"step": number;
/**
* Set a predefined value.
* @category Native attributes
* @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 Native 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
* @category Features
* @default false
*/
"compact"?: boolean;
/**
* Set a custom ID for the calendar.
* @since v7.6.0
* @deprecated Use `pn-id` instead.
* @category HTML attributes
*/
"dateId"?: string;
/**
* If you use a format with an unknown length, disable the max length.
* @since 7.11.3
* @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 Native attributes
* @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. (input value end)
* @see {@link range }
* @see {@link format }
* @category Native attributes
* @default ''
*/
"end": string;
/**
* Placeholder for end date (defaults to the format prop).
* @see {@link format }
* @deprecated Use `placeholder-end` instead
* @category Native attributes
*/
"endPlaceholder"?: string;
/**
* Set an error message for the date picker. Overwrites the helpertext if used at the same time.
* @since v7.6.0
* @category Features
*/
"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.}
* @category Features
* @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 Features
* @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 undefined
*/
"language"?: PnLanguages;
/**
* Set the input `list` attribute for the first date input.
* @since v7.6.0
* @category Native attributes
*/
"list"?: string;
/**
* Set the input `list` attribute for the second date input.
* @since v7.6.0
* @category Native 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 Features
* @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 Features
* @default null
*/
"minDate"?: string;
/**
* HTML input name
* @since v7.6.0
* @category Native attributes
*/
"name"?: string;
/**
* HTML input name
* @since v7.25.0
* @category Native attributes
*/
"nameEnd"?: string;
/**
* Set the HTML pattern prop on the input elements. Make sure it matches the format.
* @since v7.6.0
* @category Native attributes
*/
"pattern"?: string;
/**
* Placeholder for the input field (defaults to the format prop).
* @see {@link format }
* @category Native attributes
*/
"placeholder"?: string;
/**
* Placeholder for end date (defaults to the format prop).
* @see {@link format }
* @since v7.25.0
* @category Native attributes
*/
"placeholderEnd"?: string;
/**
* Provide the label via an aria attribute. We strongly recommend you use the `label-from` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabel"?: string;
/**
* Provide the label for the end input via an aria attribute. We strongly recommend you use the `label-to` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabelEnd"?: string;
/**
* Provide the label from another element via its ID. We strongly recommend you use the `label-from` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabelledby"?: string;
/**
* Provide the label for the end input from another element via its ID. We strongly recommend you use the `label-to` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabelledbyEnd"?: string;
/**
* Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`.
* @since v7.25.0
* @category HTML attributes
*/
"pnId"?: 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 Native attributes
* @default false
*/
"readonly": boolean;
/**
* Set the date picker as required.
* @category Native attributes
* @default false
*/
"required": boolean;
/**
* Set a predefined value for the from date (input value).
* @see {@link format }
* @category Native attributes
* @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.
* @category Native attributes
* @default false
*/
"disabled": boolean;
/**
* Error message, applies warning styles and icon.
* @category Features
*/
"error"?: string;
/**
* Set a custom ID for the fieldset.
* @deprecated Use `pn-id` instead.
* @category HTML attributes
* @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.
* @category Native attributes
*/
"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.
* @category Features
* @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.
* @category Native attributes
*/
"name"?: string;
/**
* Set a custom ID for the fieldset.
* @since v7.25.0
* @category HTML attributes
* @default this.id
*/
"pnId": 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 Native attributes
*/
"accept": string;
/**
* Use the capture mode.
* @since v7.1.0
* @category Native attributes
*/
"capture"?: '' | 'user' | 'environment';
/**
* Clear the selected files, state and input value.
*/
"clearUpload": () => Promise<void>;
/**
* Disable the input.
* @category Native 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.
* @since v7.1.0
* @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.
* @since v7.1.0
* @default undefined
*/
"language"?: PnLanguages;
/**
* Set maximum amount of files to be selected. Any value above 1 will force the `multiple` to be `true`.
* @category Features
* @default 1
*/
"limit": number;
/**
* Set the maximum upload size.
* @category Features
* @default ''
*/
"maxSize": string;
/**
* Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1.
* @category Native attributes
*/
"multiple": boolean;
/**
* Set a HTML name.
* @since v7.1.0
* @category Native attributes
*/
"name": string;
/**
* Set a custom ID for the file upload.
* @since v7.25.0
* @category HTML attributes
* @default this.id
*/
"pnId": string;
/**
* Remove the selected file.
*/
"removeFile": (targetFile: PnUploadFileItem) => Promise<void>;
/**
* Set the input as required.
* @category Native attributes
* @default false
*/
"required"?: boolean;
/**
* Start the upload of all selected files (excludes invalid files).
*/
"startUpload": () => Promise<void>;
/**
* Update an existing file.
*/
"updateFile": (file: PnUploadFileItem, index?: any) => Promise<void>;
}
/**
* The default market and language is SE/en.
* Make sure you set the market **and** language prop.
* Example: Setting the `language` prop `da` will not display anything, as `da` does not exist on the `SE` market.
* @deprecated This component has been replaced with the 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 following colors from our library. Has no effects if you use flags from our library.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs Colors (Storybook)}
* @default 'gray900'
*/
"color"?: PnColors;
/**
* The SVG content of the icon you want to use.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs Icons (Storybook)}
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs Flags (Storybook)}
* @default ''
*/
"icon": string;
/**
* Make the icon small (16 instead of 24px).
* @default false
*/
"small": boolean;
}
/**
* The `pn-illustration` is a wrapper for an SVG string.
* The component will look at the viewBox property of the SVG to determine the default width and height,
* but you can also set these manually with the `width` and `height` props.
* Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
*/
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.
* @deprecated Use `pn-aria-controls` instead.
* @category HTML attributes
*/
"ariacontrols"?: string;
/**
* While you can use the `aria-label`, using a `label` is far more accessible.
* @deprecated Use `pn-aria-label` instead.
* @category HTML attributes
*/
"arialabel"?: string;
/**
* Let the browser know what type of autocorrects the input should use. Works much better if a `name` and `pn-id` is supplied.
* @see {@link name }
* @see {@link inputid }
* @category Native attributes
*/
"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
* @category Features
* @default false
*/
"compact"?: boolean;
/**
* Set the input as `disabled`.
* @category Native attributes
* @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 Features
*/
"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 Features
*/
"icon": string;
/**
* Set a custom ID for the input (default is a generated UUID).
* @deprecated Use `pn-id` instead.
* @category HTML attributes
*/
"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 Native attributes
*/
"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 Features
* @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 undefined
*/
"language"?: PnLanguages;
/**
* Point to a datalist element for this input.
* @category Native attributes
*/
"list"?: string;
/**
* Set the `max` value of the `number` input.
* @category Native attributes
*/
"max"?: number | string;
/**
* The maximum number of characters the user should be able to add, also adds a visible counter.
* @category Native attributes
*/
"maxlength": number;
/**
* Set the `min` value of the `number` input.
* @category Native attributes
*/
"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 Native attributes
*/
"name"?: string;
/**
* Pattern prop.
* @category Native attributes
*/
"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 Native attributes
*/
"placeholder"?: string;
/**
* Set the ID of what this input controls.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaControls"?: string;
/**
* Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabel"?: string;
/**
* Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
"pnAriaLabelledby"?: string;
/**
* Set a custom ID for the input (default is a generated UUID).
* @since v7.25.0
* @category HTML attributes
*/
"pnId"?: string;
/**
* Set the input as `readonly`.
* @category Native attributes
* @default false
*/
"readonly": boolean;
/**
* Set the input as `required`.
* @category Native attributes
* @default false
*/
"required": boolean;
/**
* Set a `step` for the number input.
* @category Native attributes
*/
"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 Features
*/
"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 Features
*/
"textSuffix": string;
/**
* pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`.
* @category Native attributes
* @default 'text'
*/
"type"?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
/**
* Set the input as `valid`. Provides a green color and a check icon.
* @category Features
* @default false
*/
"valid"?: boolean;
/**
* Set the value of the input.
* @category Native attributes
* @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 *when* it is possible. Do not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts.
* @since v7.14.0
* @category Features
* @default false
*/
"allowOverflow"?: boolean;
/**
* Set a descriptive text for the modal.
* @since v7.14.0
*/
"helpertext"?: string;
/**
* Hide the close button. If you enable 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
* @def