@postnord/web-components
Version:
PostNord Web Components
1,551 lines • 406 kB
JSON
{
"schemaVersion": "2.1.0",
"modules": [
{
"kind": "javascript-module",
"path": "src/components/content/pn-accordion/pn-accordion.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-accordion",
"name": "PnAccordion",
"description": "The `pn-accordion` is a wrapper for `pn-accordion-row` components.\nThis component gives the accordion rows some space between each one and provides the `single` feature.\nWhich will force the rule that only a single row to be open at one time.",
"attributes": [
{
"name": "single",
"description": "Only allow a single row to be open at once.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "single"
},
{
"name": "transparent",
"description": "Optional prop that removes the default white background on the accordion row.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "transparent"
}
],
"members": [
{
"kind": "field",
"name": "single",
"description": "Only allow a single row to be open at once.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "single"
},
{
"kind": "field",
"name": "transparent",
"description": "Optional prop that removes the default white background on the accordion row.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "transparent"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "PnAccordion",
"declaration": {
"name": "PnAccordion"
}
},
{
"kind": "custom-element-definition",
"name": "pn-accordion",
"declaration": {
"name": "PnAccordion"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/content/pn-accordion/row/pn-accordion-row.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-accordion-row",
"name": "PnAccordionRow",
"description": "Use this row component inside a `pn-accordion` to create an accordion group.\n\n**Note**: you can use the `pn-accordion-row` without the parent accordion.\nBut you will have to style the gap between each row.",
"attributes": [
{
"name": "buttonid",
"description": "Optional unique id for the `summary` element.",
"type": {
"text": "string"
},
"fieldName": "buttonid"
},
{
"name": "contentid",
"description": "Optional unique id for the `div` element containing the content.",
"type": {
"text": "string"
},
"fieldName": "contentid"
},
{
"name": "label",
"description": "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.",
"type": {
"text": "string"
},
"fieldName": "label"
},
{
"name": "state",
"description": "The open/close status of the accordion row.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "state"
},
{
"name": "transparent",
"description": "Optional prop that removes the default white background on the accordion row.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "transparent"
}
],
"members": [
{
"kind": "field",
"name": "buttonid",
"description": "Optional unique id for the `summary` element.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "buttonid"
},
{
"kind": "field",
"name": "contentid",
"description": "Optional unique id for the `div` element containing the content.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "contentid"
},
{
"kind": "field",
"name": "label",
"description": "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.",
"type": {
"text": "string"
},
"attribute": "label"
},
{
"kind": "field",
"name": "state",
"description": "The open/close status of the accordion row.",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "state"
},
{
"kind": "field",
"name": "transparent",
"description": "Optional prop that removes the default white background on the accordion row.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "transparent"
}
],
"events": [
{
"name": "togglerow",
"description": "Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop.",
"type": {
"text": "CustomEvent<{ element: HTMLElement; state: Boolean; }>",
"references": [
{
"name": "HTMLElement",
"package": "global:"
},
{
"name": "Boolean",
"package": "global:"
}
]
}
}
],
"slots": [
{
"name": "label",
"description": "Include your own HTML as the label.\n```\n<h3 slot=\"label\">Custom title</h3>\n```"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "PnAccordionRow",
"declaration": {
"name": "PnAccordionRow"
}
},
{
"kind": "custom-element-definition",
"name": "pn-accordion-row",
"declaration": {
"name": "PnAccordionRow"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/buttons/pn-action-menu/pn-action-menu.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-action-menu",
"name": "PnActionMenu",
"description": "Create a list of actions in an accessible way.\n\nOption types include:\n\n- Regular button, click and it will collapse the menu,\n- Checkbox/radio, toggle the option on/off\n- Link, behaves like a regular `a[href]` element.\n\nYou can group these actions in groups and/or sub menus.\n\n- `group`, an array of options. The label will act as a title for the items.\n- `options`, an array of options. These items will appear in a sub-menu that can be toggled.",
"attributes": [
{
"name": "language",
"description": "Manually set the language.",
"type": {
"text": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": [
{
"name": "PnLanguages",
"module": "@/index"
}
]
},
"default": "null",
"fieldName": "language"
},
{
"name": "menu-id",
"description": "Set a custom ID for the menu.",
"type": {
"text": "string"
},
"default": "this.id",
"fieldName": "menuId"
},
{
"name": "menu-left",
"description": "Prefer that the submenus opens to the left, if there is enough space.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "menuLeft"
},
{
"name": "menu-up",
"description": "Prefer that the menu open upwards, if there is enough space.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "menuUp"
},
{
"name": "open",
"description": "Open/close the action menu manually.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "open"
}
],
"members": [
{
"kind": "field",
"name": "button",
"description": "Set any prop from the `pn-button` component here.",
"type": {
"text": "PnButton",
"references": [
{
"name": "Components",
"module": "@/index"
}
]
},
"readonly": true
},
{
"kind": "field",
"name": "language",
"description": "Manually set the language.",
"type": {
"text": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": [
{
"name": "PnLanguages",
"module": "@/index"
}
]
},
"default": "null",
"attribute": "language"
},
{
"kind": "field",
"name": "menuId",
"description": "Set a custom ID for the menu.",
"type": {
"text": "string"
},
"default": "this.id",
"readonly": true,
"attribute": "menu-id"
},
{
"kind": "field",
"name": "menuLeft",
"description": "Prefer that the submenus opens to the left, if there is enough space.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "menu-left"
},
{
"kind": "field",
"name": "menuUp",
"description": "Prefer that the menu open upwards, if there is enough space.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "menu-up"
},
{
"kind": "field",
"name": "open",
"description": "Open/close the action menu manually.",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "open",
"reflects": true
},
{
"kind": "field",
"name": "options",
"description": "Array of action menu options.",
"type": {
"text": "PnActionMenuItem[]",
"references": [
{
"name": "PnActionMenuItem",
"module": "@/index"
}
]
},
"default": "[]",
"readonly": true
}
],
"events": [
{
"name": "menuOption",
"description": "Emitted when an option is clicked (button, link, input or submenus).",
"type": {
"text": "CustomEvent<{ type: \"button\" | \"input\" | \"link\" | \"submenu\"; click: Event | MouseEvent; option: PnActionMenuItem; open?: Boolean; }>",
"references": [
{
"name": "MouseEvent",
"package": "global:"
},
{
"name": "Event",
"module": "@stencil/core"
},
{
"name": "PnActionMenuItem",
"module": "@/index"
},
{
"name": "Boolean",
"package": "global:"
}
]
}
},
{
"name": "menuToggle",
"description": "Emitted when the menu is opened or closed.",
"type": {
"text": "CustomEvent<{ open: boolean; }>"
}
},
{
"name": "menuVisible",
"description": "Emitted when the menu is fully hidden/visible after the animation has played.",
"type": {
"text": "CustomEvent<{ visible: boolean; }>"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "PnActionMenu",
"declaration": {
"name": "PnActionMenu"
}
},
{
"kind": "custom-element-definition",
"name": "pn-action-menu",
"declaration": {
"name": "PnActionMenu"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/buttons/pn-button/pn-button.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-button",
"name": "PnButton",
"description": "The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute.",
"attributes": [
{
"name": "appearance",
"description": "Select the button appearance: default (blue), `light` (white) and `warning` (red).",
"type": {
"text": "\"\" | \"light\" | \"warning\"",
"references": [
{
"name": "PnButtonAppearance",
"module": "@/index"
}
]
},
"default": "''",
"fieldName": "appearance"
},
{
"name": "ariacontrols",
"description": "HTML aria-controls attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "ariacontrols"
},
{
"name": "ariacurrent",
"description": "HTML aria-current attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "ariacurrent"
},
{
"name": "ariaexpanded",
"description": "HTML aria-expanded attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "ariaexpanded"
},
{
"name": "ariahaspopup",
"description": "HTML aria-haspopup attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "ariahaspopup"
},
{
"name": "arialabel",
"description": "HTML aria-label attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "arialabel"
},
{
"name": "arialabelledby",
"description": "HTML aria-labelledby attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "arialabelledby"
},
{
"name": "ariapressed",
"description": "HTML aria-pressed attribute.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "ariapressed"
},
{
"name": "button-id",
"description": "HTML ID.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "buttonId"
},
{
"name": "download",
"description": "The download attribute of the link.",
"type": {
"text": "string"
},
"fieldName": "download"
},
{
"name": "form",
"description": "Connect this button to a HTML form.",
"type": {
"text": "string"
},
"fieldName": "form"
},
{
"name": "href",
"description": "Pass an href to make the button into link (a-tag).",
"type": {
"text": "string"
},
"fieldName": "href"
},
{
"name": "icon",
"description": "The SVG content of the icon you want.",
"type": {
"text": "string"
},
"fieldName": "icon"
},
{
"name": "icon-only",
"description": "Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "iconOnly"
},
{
"name": "label",
"description": "The label of the button, this is the same as using the default slot.",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "label"
},
{
"name": "left-icon",
"description": "Place the `icon` to the left of the button.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "leftIcon"
},
{
"name": "loading",
"description": "Display the loading indicator.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "loading"
},
{
"name": "no-tab",
"description": "HTML tabindex.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "noTab"
},
{
"name": "rel",
"description": "The rel attribute of the link.",
"type": {
"text": "string"
},
"fieldName": "rel"
},
{
"name": "small",
"description": "Use the small button.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "small"
},
{
"name": "target",
"description": "The target attribute of the link.",
"type": {
"text": "string"
},
"fieldName": "target"
},
{
"name": "tooltip",
"description": "When the user focus/hover the button, the `tooltip` text will show up.",
"type": {
"text": "string"
},
"fieldName": "tooltip"
},
{
"name": "tooltip-up",
"description": "Prefer the tooltip to open upwards. Will still go downwards if there is no space.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "tooltipUp"
},
{
"name": "type",
"description": "Select HTML button type.",
"type": {
"text": "\"\" | \"button\" | \"reset\" | \"submit\""
},
"default": "'button'",
"fieldName": "type"
},
{
"name": "variant",
"description": "Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).",
"type": {
"text": "\"\" | \"borderless\" | \"outlined\"",
"references": [
{
"name": "PnButtonVariant",
"module": "@/index"
}
]
},
"default": "''",
"fieldName": "variant"
}
],
"members": [
{
"kind": "field",
"name": "appearance",
"description": "Select the button appearance: default (blue), `light` (white) and `warning` (red).",
"type": {
"text": "\"\" | \"light\" | \"warning\"",
"references": [
{
"name": "PnButtonAppearance",
"module": "@/index"
}
]
},
"default": "''",
"readonly": true,
"attribute": "appearance"
},
{
"kind": "field",
"name": "ariacontrols",
"description": "HTML aria-controls attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "ariacontrols"
},
{
"kind": "field",
"name": "ariacurrent",
"description": "HTML aria-current attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "ariacurrent"
},
{
"kind": "field",
"name": "ariaexpanded",
"description": "HTML aria-expanded attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "ariaexpanded"
},
{
"kind": "field",
"name": "ariahaspopup",
"description": "HTML aria-haspopup attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "ariahaspopup"
},
{
"kind": "field",
"name": "arialabel",
"description": "HTML aria-label attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "arialabel"
},
{
"kind": "field",
"name": "arialabelledby",
"description": "HTML aria-labelledby attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "arialabelledby"
},
{
"kind": "field",
"name": "ariapressed",
"description": "HTML aria-pressed attribute.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "ariapressed"
},
{
"kind": "field",
"name": "buttonId",
"description": "HTML ID.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "button-id"
},
{
"kind": "field",
"name": "download",
"description": "The download attribute of the link.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "download"
},
{
"kind": "field",
"name": "form",
"description": "Connect this button to a HTML form.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "form"
},
{
"kind": "field",
"name": "href",
"description": "Pass an href to make the button into link (a-tag).",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "href"
},
{
"kind": "field",
"name": "icon",
"description": "The SVG content of the icon you want.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "icon"
},
{
"kind": "field",
"name": "iconOnly",
"description": "Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "icon-only"
},
{
"kind": "field",
"name": "label",
"description": "The label of the button, this is the same as using the default slot.",
"type": {
"text": "string"
},
"default": "''",
"readonly": true,
"attribute": "label"
},
{
"kind": "field",
"name": "leftIcon",
"description": "Place the `icon` to the left of the button.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "left-icon"
},
{
"kind": "field",
"name": "loading",
"description": "Display the loading indicator.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "loading",
"reflects": true
},
{
"kind": "field",
"name": "noTab",
"description": "HTML tabindex.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "no-tab"
},
{
"kind": "field",
"name": "rel",
"description": "The rel attribute of the link.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "rel"
},
{
"kind": "field",
"name": "small",
"description": "Use the small button.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "small"
},
{
"kind": "field",
"name": "target",
"description": "The target attribute of the link.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "target"
},
{
"kind": "field",
"name": "tooltip",
"description": "When the user focus/hover the button, the `tooltip` text will show up.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "tooltip"
},
{
"kind": "field",
"name": "tooltipUp",
"description": "Prefer the tooltip to open upwards. Will still go downwards if there is no space.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "tooltip-up"
},
{
"kind": "field",
"name": "type",
"description": "Select HTML button type.",
"type": {
"text": "\"\" | \"button\" | \"reset\" | \"submit\""
},
"default": "'button'",
"readonly": true,
"attribute": "type"
},
{
"kind": "field",
"name": "variant",
"description": "Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).",
"type": {
"text": "\"\" | \"borderless\" | \"outlined\"",
"references": [
{
"name": "PnButtonVariant",
"module": "@/index"
}
]
},
"default": "''",
"readonly": true,
"attribute": "variant"
}
],
"events": [
{
"name": "pnClick",
"description": "This event is fired when the `button`/`a` element of the `pn-button` is clicked.\nSetting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area\nor if the button is `disabled` with the `loading` prop.",
"type": {
"text": "CustomEvent<MouseEvent>",
"references": [
{
"name": "MouseEvent",
"package": "global:"
}
]
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "PnButton",
"declaration": {
"name": "PnButton"
}
},
{
"kind": "custom-element-definition",
"name": "pn-button",
"declaration": {
"name": "PnButton"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/buttons/pn-button-dropdown/pn-button-dropdown.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-button-dropdown",
"name": "PnButtonDropdown",
"description": "The open/closing of the dropdown is handled by the component itself.",
"attributes": [
{
"name": "appearance",
"description": "Select between `light` and `warning`.",
"type": {
"text": "\"\" | \"light\" | \"warning\"",
"references": [
{
"name": "PnButtonAppearance",
"module": "@/index"
}
]
},
"default": "''",
"fieldName": "appearance"
},
{
"name": "icon",
"description": "The optional SVG content of the icon you want.",
"type": {
"text": "string"
},
"fieldName": "icon"
},
{
"name": "label",
"description": "The required label on the button.",
"type": {
"text": "string"
},
"fieldName": "label"
},
{
"name": "open",
"description": "Open/close the dropdown without user interaction.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "open"
},
{
"name": "small",
"description": "Smaller button.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "small"
},
{
"name": "tooltip",
"description": "Tooltip (required for Icon Only).",
"type": {
"text": "string"
},
"fieldName": "tooltip"
},
{
"name": "variant",
"description": "Select between `outlined` and `borderless`.",
"type": {
"text": "\"\" | \"borderless\" | \"outlined\"",
"references": [
{
"name": "PnButtonVariant",
"module": "@/index"
}
]
},
"default": "''",
"fieldName": "variant"
}
],
"members": [
{
"kind": "field",
"name": "appearance",
"description": "Select between `light` and `warning`.",
"type": {
"text": "\"\" | \"light\" | \"warning\"",
"references": [
{
"name": "PnButtonAppearance",
"module": "@/index"
}
]
},
"default": "''",
"readonly": true,
"attribute": "appearance"
},
{
"kind": "field",
"name": "icon",
"description": "The optional SVG content of the icon you want.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "icon"
},
{
"kind": "field",
"name": "label",
"description": "The required label on the button.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "label"
},
{
"kind": "field",
"name": "open",
"description": "Open/close the dropdown without user interaction.",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "open",
"reflects": true
},
{
"kind": "field",
"name": "small",
"description": "Smaller button.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "small"
},
{
"kind": "field",
"name": "tooltip",
"description": "Tooltip (required for Icon Only).",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "tooltip"
},
{
"kind": "field",
"name": "variant",
"description": "Select between `outlined` and `borderless`.",
"type": {
"text": "\"\" | \"borderless\" | \"outlined\"",
"references": [
{
"name": "PnButtonVariant",
"module": "@/index"
}
]
},
"default": "''",
"readonly": true,
"attribute": "variant"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "PnButtonDropdown",
"declaration": {
"name": "PnButtonDropdown"
}
},
{
"kind": "custom-element-definition",
"name": "pn-button-dropdown",
"declaration": {
"name": "PnButtonDropdown"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/navigation/pn-card/pn-card.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-card",
"name": "PnCard",
"description": "The card component is more than just a navigational element.\nIt is a flexible component that can be used as a product item, a clickable link card, etc...\n\nSetting the `href` prop will transform the entire `pn-card` into a clickable element.\nIf you need content to be interactable inside the card, do not use the `href` prop.",
"attributes": [
{
"name": "aspect-ratio",
"description": "Select image aspect ratio. Example: '3/3', '16/9'.",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "aspectRatio"
},
{
"name": "card-id",
"description": "Set a HTML id for the card. Optional and not required.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "cardId"
},
{
"name": "horizontal",
"description": "Uee the horizontal card layout.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "horizontal"
},
{
"name": "href",
"description": "The card link.",
"type": {
"text": "string"
},
"fieldName": "href"
},
{
"name": "href-label",
"description": "The link text.",
"type": {
"text": "string"
},
"fieldName": "hrefLabel"
},
{
"name": "icon",
"description": "The link icon. Defaults to `arrow_right` or `open_in_new` if `target=\"_blank\"`.",
"type": {
"text": "string"
},
"default": "null",
"fieldName": "icon"
},
{
"name": "label",
"description": "Headline of the card. Will act as label for the link if there is no `href-label` set.",
"type": {
"text": "string"
},
"fieldName": "label"
},
{
"name": "label-tag",
"description": "The label HTML tag. Default is `h3`.",
"type": {
"text": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\""
},
"default": "'h3'",
"fieldName": "labelTag"
},
{
"name": "overline",
"description": "Set a smaller text above the `label` text.",
"type": {
"text": "string"
},
"fieldName": "overline"
},
{
"name": "rel",
"description": "The rel attribute of the link.",
"type": {
"text": "string"
},
"default": "'noopener noreferrer'",
"fieldName": "rel"
},
{
"name": "reverse",
"description": "Reverse the order of which the image will wrap.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "reverse"
},
{
"name": "target",
"description": "The target attribute of the link.",
"type": {
"text": "string"
},
"fieldName": "target"
},
{
"name": "text",
"description": "Text content of the card.",
"type": {
"text": "string"
},
"fieldName": "text"
}
],
"members": [
{
"kind": "field",
"name": "aspectRatio",
"description": "Select image aspect ratio. Example: '3/3', '16/9'.",
"type": {
"text": "string"
},
"default": "''",
"readonly": true,
"attribute": "aspect-ratio"
},
{
"kind": "field",
"name": "cardId",
"description": "Set a HTML id for the card. Optional and not required.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "card-id"
},
{
"kind": "field",
"name": "horizontal",
"description": "Uee the horizontal card layout.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "horizontal"
},
{
"kind": "field",
"name": "href",
"description": "The card link.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "href"
},
{
"kind": "field",
"name": "hrefLabel",
"description": "The link text.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "href-label"
},
{
"kind": "field",
"name": "icon",
"description": "The link icon. Defaults to `arrow_right` or `open_in_new` if `target=\"_blank\"`.",
"type": {
"text": "string"
},
"default": "null",
"readonly": true,
"attribute": "icon"
},
{
"kind": "field",
"name": "label",
"description": "Headline of the card. Will act as label for the link if there is no `href-label` set.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "label"
},
{
"kind": "field",
"name": "labelTag",
"description": "The label HTML tag. Default is `h3`.",
"type": {
"text": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\""
},
"default": "'h3'",
"readonly": true,
"attribute": "label-tag"
},
{
"kind": "field",
"name": "overline",
"description": "Set a smaller text above the `label` text.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "overline"
},
{
"kind": "field",
"name": "rel",
"description": "The rel attribute of the link.",
"type": {
"text": "string"
},
"default": "'noopener noreferrer'",
"readonly": true,
"attribute": "rel"
},
{
"kind": "field",
"name": "reverse",
"description": "Reverse the order of which the image will wrap.",
"type": {
"text": "boolean"
},
"default": "false",
"readonly": true,
"attribute": "reverse"
},
{
"kind": "field",
"name": "target",
"description": "The target attribute of the link.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "target"
},
{
"kind": "field",
"name": "text",
"description": "Text content of the card.",
"type": {
"text": "string"
},
"readonly": true,
"attribute": "text"
}
],
"events": [
{
"name": "pnCard",
"description": "Emitted when you click on the card link (if you use the `href` prop).",
"type": {
"text": "CustomEvent<{ click: MouseEvent; }>",
"references": [
{
"name": "MouseEvent",
"package": "global:"
}
]
}
}
],
"slots": [
{
"name": "",
"description": "The default slot is the primary content of the card. This is the same area where the `text` prop is located."
},
{
"name": "header",
"description": "The header content, same area that the `label` and `overline` props will appear."
},
{
"name": "image",
"description": "Set a custom image/svg/illustration. Simply use an `img` tag with the slot \"image\"."
},
{
"name": "navigation",
"description": "This slot is intended for one or more `pn-button` components.\nOnly use **without** the `href` prop. Having both at the same time makes the component inaccessible."
},
{
"name": "tags",
"description": "Add `pn-tags` that will be positioned above the `label` and `overline` if used."
}
]
}
],
"exports": [
{
"kind": "js",
"name": "PnCard",
"declaration": {
"name": "PnCard"
}
},
{
"kind": "custom-element-definition",
"name": "pn-card",
"declaration": {
"name": "PnCard"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/input/pn-checkbox/pn-checkbox.tsx",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "pn-checkbox",
"name": "PnCheckbox",
"description": "The `pn-checkbox` is built with a native `input[type=\"checkbox\"]` in the background.\nThis means you can use native events to listen to the changes.",
"attributes": [
{
"name": "checkboxid",
"description": "A unique HTML ID for the checkbox.",
"type": {
"text": "string"
},
"fieldName": "checkboxid",
"deprecated": "Use `pn-id` instead."
},
{
"name": "checked",
"description": "Programmatically check the input.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "checked"
},
{
"name": "disabled",
"description": "Disable the checkbox.",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "disabled"
},
{
"name": "expand",
"description": "Allow the checkbox to control the slot area \"content\"