Skip to content

Instantly share code, notes, and snippets.

@heyMP

heyMP/custom-elements.json

Created August 12, 2024 21:43
Show Gist options
  • Save heyMP/fc7f1a91f7dea82e53d7a9ed406b9699 to your computer and use it in GitHub Desktop.
Save heyMP/fc7f1a91f7dea82e53d7a9ed406b9699 to your computer and use it in GitHub Desktop.
Download ZIP
RHDS Custom Element Manifest Schema
Raw
custom-elements.json
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "rh-alert/rh-alert.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "AlertCloseEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-alert/rh-alert.ts"
}
},
{
"kind": "class",
"description": "An alert is a banner used to notify a user about a change in status\nor communicate other information. It can be generated with or without\na user triggering an action first.",
"name": "RhAlert",
"slots": [
{
"description": "Provide a description for the alert message",
"name": ""
},
{
"description": "Provide a header for the alert message.",
"name": "header"
},
{
"description": "Provide actions that the user can take for the alert",
"name": "actions"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "icon",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "state",
"type": {
"text": "'default' | 'error' | 'success' | 'warning' | 'danger' | 'info'"
},
"default": "'default'",
"description": "Communicates the urgency of a message and is denoted by various styling configurations.\n\n- `default` - Indicates generic information or a message with no severity.\n- `info` - Indicates helpful information or a message with very little to no severity.\n- `success` - Indicates a success state, like if a process was completed without errors.\n- `warning` - Indicates a caution state, like a non-blocking error that might need to be fixed.\n- `danger` - Indicates a danger state, like an error that is blocking a user from completing a task.",
"attribute": "state",
"reflects": true
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "'alternate' | 'toast' | 'inline' | undefined"
},
"description": "The alternate Inline alert style includes a border instead of a line which\ncan be used to express more urgency or better grab the attention of a user.\n\nA Toast alert is used to present a global message about an event,\nupdate, or confirmation, like the result of a user action that cannot\nbe presented within a specific layout or component.",
"attribute": "variant",
"reflects": true
},
{
"kind": "field",
"name": "toast",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "toast",
"reflects": true
},
{
"kind": "field",
"name": "dismissable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Alert variants have different rules regarding their ability to be dismissed by a user.\nDefault, Info, and Success Inline alerts can be dismissed by a user selecting the close button.\nWarning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert.\nAll Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.",
"attribute": "dismissable",
"reflects": true
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, 'header', null, 'actions')"
},
{
"kind": "method",
"name": "#closeHandler",
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "AlertCloseEvent"
},
"description": "when the dismissable alert closes",
"name": "close"
}
],
"attributes": [
{
"name": "state",
"type": {
"text": "'default' | 'error' | 'success' | 'warning' | 'danger' | 'info'"
},
"default": "'default'",
"description": "Communicates the urgency of a message and is denoted by various styling configurations.\n\n - `default` - Indicates generic information or a message with no severity.\n - `info` - Indicates helpful information or a message with very little to no severity.\n - `success` - Indicates a success state, like if a process was completed without errors.\n - `warning` - Indicates a caution state, like a non-blocking error that might need to be fixed.\n - `danger` - Indicates a danger state, like an error that is blocking a user from completing a task.",
"fieldName": "state"
},
{
"name": "variant",
"type": {
"text": "'alternate' | 'toast' | 'inline' | undefined"
},
"description": "The alternate Inline alert style includes a border instead of a line which\ncan be used to express more urgency or better grab the attention of a user.\n\nA Toast alert is used to present a global message about an event,\nupdate, or confirmation, like the result of a user action that cannot\nbe presented within a specific layout or component.",
"fieldName": "variant"
},
{
"name": "toast",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "toast"
},
{
"name": "dismissable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Alert variants have different rules regarding their ability to be dismissed by a user.\nDefault, Info, and Success Inline alerts can be dismissed by a user selecting the close button.\nWarning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert.\nAll Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.",
"fieldName": "dismissable"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Notifies a user without blocking their workflow",
"tagName": "rh-alert",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/alert/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/rh-alert.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/alternate/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/alternate.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/dismissable/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/dismissable.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/inline/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/inline.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/states/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/states.html"
}
},
{
"url": "https://ux.redhat.com/elements/alert/demo/toast/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-alert/demo/toast.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "AlertCloseEvent",
"declaration": {
"name": "AlertCloseEvent",
"module": "rh-alert/rh-alert.js"
}
},
{
"kind": "js",
"name": "RhAlert",
"declaration": {
"name": "RhAlert",
"module": "rh-alert/rh-alert.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-alert",
"declaration": {
"name": "RhAlert",
"module": "rh-alert/rh-alert.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-audio-player/rh-audio-player-about.js",
"declarations": [
{
"kind": "class",
"description": "Audio Player About Panel",
"name": "RhAudioPlayerAbout",
"cssParts": [
{
"description": "panel heading",
"name": "heading"
},
{
"description": "panel body",
"name": "body"
},
{
"description": "panel profile / avatar",
"name": "profile"
}
],
"slots": [
{
"description": "custom heading for panel",
"name": "heading"
},
{
"description": "panel content",
"name": ""
},
{
"description": "`<rh-avatar>` for attribution",
"name": "profile"
}
],
"members": [
{
"kind": "field",
"name": "label",
"type": {
"text": "string | undefined"
},
"description": "Default label content",
"attribute": "label"
},
{
"kind": "field",
"name": "mediaseries",
"type": {
"text": "string | undefined"
},
"description": "Series this track belongs to, if applicable",
"attribute": "series"
},
{
"kind": "field",
"name": "mediatitle",
"type": {
"text": "string | undefined"
},
"description": "Title of audio track",
"attribute": "mediatitle"
},
{
"kind": "field",
"name": "content",
"type": {
"text": "HTMLElement[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#headings",
"privacy": "private",
"default": "new HeadingLevelContextConsumer(this)"
},
{
"kind": "field",
"name": "#label",
"privacy": "private",
"type": {
"text": "string | undefined"
}
},
{
"kind": "field",
"name": "menuLabel",
"type": {
"text": "string"
}
},
{
"kind": "method",
"name": "scrollText"
}
],
"attributes": [
{
"name": "label",
"type": {
"text": "string | undefined"
},
"description": "Default label content",
"fieldName": "label"
},
{
"name": "series",
"type": {
"text": "string | undefined"
},
"description": "Series this track belongs to, if applicable",
"fieldName": "mediaseries"
},
{
"name": "mediatitle",
"type": {
"text": "string | undefined"
},
"description": "Title of audio track",
"fieldName": "mediatitle"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-audio-player-about",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhAudioPlayerAbout",
"declaration": {
"name": "RhAudioPlayerAbout",
"module": "rh-audio-player/rh-audio-player-about.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-audio-player-about",
"declaration": {
"name": "RhAudioPlayerAbout",
"module": "rh-audio-player/rh-audio-player-about.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-audio-player/rh-audio-player-scrolling-text-overflow.js",
"declarations": [
{
"kind": "class",
"description": "Audio Player Scrolling Text Overflow",
"name": "RhAudioPlayerScrollingTextOverflow",
"cssProperties": [
{
"description": "color of fade effect (shoudl match background) -",
"name": "--rh-audio-player-scrolling-text-overflow-background-color",
"default": "var(--rh-color-surface-lightest, #ffffff)"
}
],
"slots": [
{
"description": "inline text to scroll if wider than host",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#scrolling",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#style",
"privacy": "private"
},
{
"kind": "field",
"name": "#isScrollable",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "stopScrolling"
},
{
"kind": "method",
"name": "startScrolling"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-audio-player-scrolling-text-overflow",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhAudioPlayerScrollingTextOverflow",
"declaration": {
"name": "RhAudioPlayerScrollingTextOverflow",
"module": "rh-audio-player/rh-audio-player-scrolling-text-overflow.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-audio-player-scrolling-text-overflow",
"declaration": {
"name": "RhAudioPlayerScrollingTextOverflow",
"module": "rh-audio-player/rh-audio-player-scrolling-text-overflow.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-audio-player/rh-audio-player-subscribe.js",
"declarations": [
{
"kind": "class",
"description": "Audio Player Subscribe Panel",
"name": "RhAudioPlayerSubscribe",
"cssParts": [
{
"description": "scrolling text overflow",
"name": "heading"
},
{
"description": "body content slot",
"name": "body"
},
{
"description": "subscribe links",
"name": "links"
}
],
"slots": [
{
"description": "custom heading for panel",
"name": "heading"
},
{
"description": "panel content",
"name": ""
},
{
"description": "link to subscribe to podcast",
"name": "link"
}
],
"members": [
{
"kind": "field",
"name": "heading",
"type": {
"text": "string | undefined"
},
"attribute": "heading"
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string | undefined"
},
"attribute": "label"
},
{
"kind": "field",
"name": "body",
"type": {
"text": "HTMLElement[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#headings",
"privacy": "private",
"default": "new HeadingLevelContextConsumer(this)"
},
{
"kind": "field",
"name": "#label",
"privacy": "private",
"type": {
"text": "string | undefined"
}
},
{
"kind": "field",
"name": "menuLabel",
"type": {
"text": "string"
}
},
{
"kind": "method",
"name": "scrollText"
}
],
"attributes": [
{
"name": "heading",
"type": {
"text": "string | undefined"
},
"fieldName": "heading"
},
{
"name": "label",
"type": {
"text": "string | undefined"
},
"fieldName": "label"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-audio-player-subscribe",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhAudioPlayerSubscribe",
"declaration": {
"name": "RhAudioPlayerSubscribe",
"module": "rh-audio-player/rh-audio-player-subscribe.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-audio-player-subscribe",
"declaration": {
"name": "RhAudioPlayerSubscribe",
"module": "rh-audio-player/rh-audio-player-subscribe.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-audio-player/rh-audio-player.js",
"declarations": [
{
"kind": "class",
"description": "An audio player plays audio clips in the browser and includes other features.",
"name": "RhAudioPlayer",
"cssProperties": [
{
"description": "color of player background -",
"name": "--rh-audio-player-background-color",
"default": "var(--rh-color-surface-lightest, #ffffff)"
},
{
"description": "",
"name": "--rh-audio-player-icon-background-color",
"default": "var(--rh-audio-player-background-color)"
},
{
"description": "color of player border -",
"name": "--rh-audio-player-border-color",
"default": "var(--rh-color-border-subtle-on-light, #d2d2d2)"
},
{
"description": "player secondary text color -",
"name": "--rh-audio-player-secondary-text-color",
"default": "var(--rh-color-text-secondary-on-light, #6a6e73)"
},
{
"description": "player secondary opacity used for partially faded elements -",
"name": "--rh-audio-player-secondary-opacity",
"default": "0.75"
},
{
"description": "color of time and volume range slider thumb -",
"name": "--rh-audio-player-range-thumb-color",
"default": "var(--rh-color-accent-brand-on-light, #ee0000)"
},
{
"description": "padding top on tooltips -",
"name": "--rh-tooltip-content-padding-block-start",
"default": "var(--rh-space-md, 8px)"
},
{
"description": "padding bottom on tooltips -",
"name": "--rh-tooltip-content-padding-block-end",
"default": "var(--rh-space-md, 8px)"
},
{
"description": "padding left on tooltips -",
"name": "--rh-tooltip-content-padding-inline-start",
"default": "var(--rh-space-md, 8px)"
},
{
"description": "padding right on tooltips -",
"name": "--rh-tooltip-content-padding-inline-end",
"default": "var(--rh-space-md, 8px)"
}
],
"cssParts": [
{
"description": "expandable panel",
"name": "panel"
},
{
"description": "main controls",
"name": "toolbar"
},
{
"description": "about the episode panel",
"name": "about"
},
{
"description": "subscribe panel",
"name": "subscribe"
},
{
"description": "transcript panel",
"name": "transcript"
}
],
"slots": [
{
"description": "optional, name of podcast series",
"name": "series"
},
{
"description": "optional, title of episode",
"name": "title"
},
{
"description": "html `audio` element",
"name": "media"
},
{
"description": "optional `rh-audio-player-about` panel with attribution",
"name": "about"
},
{
"description": "optional `rh-audio-player-subscribe` panel with links to subscribe",
"name": "subscribe"
},
{
"description": "optional `rh-transcript` panel with `rh-cue` elements",
"name": "transcript"
}
],
"members": [
{
"kind": "field",
"name": "instances",
"privacy": "private",
"static": true,
"default": "new Set<RhAudioPlayer>()"
},
{
"kind": "field",
"name": "icons",
"type": {
"text": "object"
},
"privacy": "private",
"static": true,
"default": "{\n close: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <path d=\"M14.3,12l3.4-3.4c0.4-0.4,0.4-1.1,0-1.5l-0.8-0.8c-0.4-0.4-1.1-0.4-1.5,0L12,9.7L8.6,6.3\n c-0.4-0.4-1.1-0.4-1.5,0L6.3,7.1c-0.4,0.4-0.4,1.1,0,1.5L9.7,12l-3.4,3.4c-0.4,0.4-0.4,1.1,0,1.5l0.8,0.8c0.4,0.4,1.1,0.4,1.5,0\n l3.4-3.4l3.4,3.4c0.4,0.4,1.1,0.4,1.5,0l0.8-0.8c0.4-0.4,0.4-1.1,0-1.5L14.3,12z\"/>\n </svg>\n `,\n download: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M7.56 12.45a.63.63 0 0 0 .88 0l4-4a.63.63 0 1 0-.88-.89L8.63 10.5V2A.62.62 0 0 0 8 1.38a.63.63 0 0 0-.63.62v8.5L4.44 7.56a.63.63 0 1 0-.88.89ZM14 14.38H2a.63.63 0 1 0 0 1.25h12a.63.63 0 0 0 0-1.25Z\"/>\n </svg>\n `,\n forward: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\">\n <path d=\"M28,6.6L22.4,2v3.7h-7.4C9,5.7,4,10.6,4,16.7c0,6.1,5,11.1,11.1,11.1h7.4V26h-1.8h-5.5c-5.1,0-9.2-4.1-9.2-9.2\n c0-5.1,4.1-9.2,9.2-9.2h5.5h1.8v3.7L28,6.6z\"/>\n <g>\n <path d=\"M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z\"/>\n <path d=\"M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3\n c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4\n C18,20.5,17.1,20.2,16.4,19.6z\"/>\n </g>\n </svg>\n `,\n menuKebab: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"22\" r=\"2\"/>\n <circle cx=\"12\" cy=\"12\" r=\"2\"/>\n <circle cx=\"12\" cy=\"2\" r=\"2\"/>\n </svg>\n `,\n menuMeatball: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <circle cx=\"22\" cy=\"12\" r=\"2\"/>\n <circle cx=\"12\" cy=\"12\" r=\"2\"/>\n <circle cx=\"2\" cy=\"12\" r=\"2\"/>\n </svg>\n `,\n pause: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <rect x=\"15.3\" y=\"2.1\" width=\"4.4\" height=\"19.9\"/>\n <rect x=\"4.3\" y=\"2.1\" width=\"4.4\" height=\"19.9\"/>\n </svg>\n `,\n play: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <path d=\"M23.2,12L5.6,20.8V3.2L23.2,12z\"/>\n </svg>\n `,\n playbackRateFaster: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 14 14\">\n <path d=\"M11.2,7.7l-5.9,5.9c-0.4,0.4-1.1,0.4-1.5,0c0,0,0,0,0,0l-1-1c-0.4-0.4-0.4-1.1,0-1.5c0,0,0,0,0,0L7,7\n L2.8,2.8c-0.4-0.4-0.4-1.1,0-1.5c0,0,0,0,0,0l1-1c0.4-0.4,1.1-0.4,1.5,0c0,0,0,0,0,0l5.9,5.9C11.6,6.7,11.6,7.3,11.2,7.7\n C11.2,7.7,11.2,7.7,11.2,7.7z\"/>\n </svg>\n `,\n playbackRateSlower: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 14 14\">\n <path d=\"M2.8,7.7l5.9,5.9c0.4,0.4,1.1,0.4,1.5,0c0,0,0,0,0,0l1-1c0.4-0.4,0.4-1.1,0-1.5c0,0,0,0,0,0L7,7\n l4.2-4.2c0.4-0.4,0.4-1.1,0-1.5c0,0,0,0,0,0l-1-1c-0.4-0.4-1.1-0.4-1.5,0c0,0,0,0,0,0L2.8,6.3C2.4,6.7,2.4,7.3,2.8,7.7\n C2.8,7.7,2.8,7.7,2.8,7.7z\"/>\n </svg>\n `,\n rewind: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\">\n <g>\n <path d=\"M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z\"/>\n <path d=\"M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3\n c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4\n C18,20.5,17.1,20.2,16.4,19.6z\"/>\n </g>\n <path d=\"M4,6.6L9.5,2v3.7h7.4c6.1,0,11.1,5,11.1,11.1c0,6.1-5,11.1-11.1,11.1H9.5V26h1.8h5.5\n c5.1,0,9.2-4.1,9.2-9.2c0-5.1-4.1-9.2-9.2-9.2h-5.5H9.5v3.7L4,6.6z\"/>\n </svg>\n `,\n volumeMax: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <path d=\"M14.2,2.2v2.2c4.3,0,7.6,3.4,7.6,7.6s-3.4,7.6-7.6,7.6v2.2c5.5,0,9.8-4.4,9.8-9.8S19.6,2.2,14.2,2.2z\"/>\n <path d=\"M14.2,6.5v2.2c1.9,0,3.3,1.4,3.3,3.3s-1.4,3.3-3.3,3.3v2.2c3.1,0,5.5-2.4,5.5-5.5S17.2,6.5,14.2,6.5z\"/>\n <path d=\"M12,2.2L5.3,7.6H2.2C1,7.6,0,8.6,0,9.8v4.4c0,1.2,1,2.2,2.2,2.2h3.2l6.7,5.5V2.2z\"/>\n </svg>\n `,\n volumeMuted: html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <polygon points=\"23.4,8.7 21.9,7.3 18.6,10.6 15.4,7.3 13.9,8.7 17.2,12 13.9,15.3 15.4,16.7 18.6,13.4 21.9,16.7 \n 23.4,15.3 20.1,12 \"/>\n <path d=\"M11.6,3L5.5,8H2.6c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h2.9l6.1,5V3z\"/>\n </svg>\n `,\n }"
},
{
"kind": "field",
"name": "enUS",
"type": {
"text": "object"
},
"static": true,
"default": "{\n 'play': 'Play',\n 'pause': 'Pause',\n 'seek': 'Seek',\n 'rewind': 'Rewind 15 seconds',\n 'advance': 'Advance 15 seconds',\n 'speed': 'Speed',\n 'mute': 'Mute',\n 'unmute': 'Unmute',\n 'volume': 'Volume',\n 'menu': 'More options',\n 'close': 'Close',\n 'about': 'About the episode',\n 'subscribe': 'Subscribe',\n 'transcript': 'Transcript',\n 'autoscroll': 'Autoscroll',\n 'download': 'Download',\n }"
},
{
"kind": "field",
"name": "mediaseries",
"type": {
"text": "string | undefined"
},
"description": "Audio's series name, e.g. Podcast series.",
"attribute": "mediaseries",
"reflects": true
},
{
"kind": "field",
"name": "mediatitle",
"type": {
"text": "string | undefined"
},
"description": "Audio's title, e.g. Podcast episode title.",
"attribute": "mediatitle",
"reflects": true
},
{
"kind": "field",
"name": "layout",
"type": {
"text": "'mini' | 'compact' | 'compact-wide' | 'full' | undefined"
},
"description": "Layout:\n- `mini` (default): minimal controls: play/pause, range; volume and other controls hidden behind menu\n- `compact`: artwork and more controls: time, skip, volume\n- `compact-wide`: like compact but full width\n- `full`: maximal controls and artwork",
"attribute": "layout",
"reflects": true
},
{
"kind": "field",
"name": "poster",
"type": {
"text": "string | undefined"
},
"description": "URL to audio's artwork",
"attribute": "poster",
"reflects": true
},
{
"kind": "field",
"name": "volume",
"type": {
"text": "number"
},
"default": "0.5",
"description": "Playback volume",
"attribute": "volume",
"reflects": true
},
{
"kind": "field",
"name": "playbackRate",
"type": {
"text": "number"
},
"default": "1",
"description": "Playback rate",
"attribute": "playbackRate",
"reflects": true
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "expanded",
"reflects": true
},
{
"kind": "field",
"name": "lang",
"type": {
"text": "string"
},
"attribute": "lang",
"reflects": true
},
{
"kind": "field",
"name": "microcopy",
"type": {
"text": "object"
},
"default": "{}"
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Element's color palette",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_mediaseries",
"type": {
"text": "HTMLElement[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_mediatitle",
"type": {
"text": "HTMLElement[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_transcripts",
"type": {
"text": "RhTranscript[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_abouts",
"type": {
"text": "RhAudioPlayerAbout[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_subscribe",
"type": {
"text": "RhAudioPlayerSubscribe[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#duration",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#readyState",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#isMobileSafari",
"privacy": "private"
},
{
"kind": "field",
"name": "#paused",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "true"
},
{
"kind": "field",
"name": "#unmutedVolume",
"privacy": "private"
},
{
"kind": "field",
"name": "#pbrMin",
"privacy": "private",
"type": {
"text": "number"
},
"default": "0.25"
},
{
"kind": "field",
"name": "#pbrMax",
"privacy": "private",
"type": {
"text": "number"
},
"default": "2"
},
{
"kind": "field",
"name": "#pbrStep",
"privacy": "private",
"type": {
"text": "number"
},
"default": "0.25"
},
{
"kind": "field",
"name": "#pbrFixed",
"privacy": "private",
"type": {
"text": "number"
},
"default": "2"
},
{
"kind": "field",
"name": "#styles",
"privacy": "private",
"type": {
"text": "CSSStyleDeclaration | undefined"
}
},
{
"kind": "field",
"name": "#headings",
"privacy": "private",
"default": "new HeadingLevelContextProvider(this)"
},
{
"kind": "field",
"name": "#mediaElement",
"privacy": "private",
"type": {
"text": "HTMLAudioElement | undefined"
}
},
{
"kind": "field",
"name": "#lastMediaElement",
"privacy": "private",
"type": {
"text": "HTMLAudioElement | undefined"
}
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)"
},
{
"kind": "field",
"name": "#width",
"privacy": "private"
},
{
"kind": "field",
"name": "#resizeObserver",
"privacy": "private",
"default": "new ResizeObserver(() => {\n if (this.#width !== this.offsetWidth) {\n this.#positionMenu();\n }\n })"
},
{
"kind": "field",
"name": "#translation",
"privacy": "private",
"default": "new I18nController(this, {\n 'en': {\n ...RhAudioPlayer.enUS,\n },\n 'en-US': {\n ...RhAudioPlayer.enUS,\n }, ...this.microcopy ?? {},\n })"
},
{
"kind": "field",
"name": "#menufloat",
"privacy": "private",
"default": "new FloatingDOMController(this, {\n content: () => this.shadowRoot?.getElementById('menu'),\n invoker: () => this.shadowRoot?.getElementById('menu-button'),\n })"
},
{
"kind": "field",
"name": "#listeners",
"privacy": "private",
"default": "new Map(Object.entries({\n canplay: this.#onCanplay.bind(this),\n canplaythrough: this.#onCanplaythrough.bind(this),\n durationchange: this.#onDurationchange.bind(this),\n loadedmetadata: this.#onLoadedmetadata.bind(this),\n loadeddata: this.#onLoadeddata.bind(this),\n ended: this.#onEnded.bind(this),\n pause: this.#onPause.bind(this),\n play: this.#onPlay.bind(this),\n playing: this.#onPlaying.bind(this),\n ratechange: this.#onPlaybackRateChange.bind(this),\n seeked: this.#onSeeked.bind(this),\n seeking: this.#onSeeking.bind(this),\n timeupdate: this.#onTimeupdate.bind(this),\n volumechange: this.#onVolumechange.bind(this),\n }))",
"description": "Added to media element in light DOM. Bound so they can be cleaned up later"
},
{
"kind": "field",
"name": "#isMini",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#isFull",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#isCompact",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#panels",
"privacy": "private",
"type": {
"text": "(\n | { id: 'about'; panel: RhAudioPlayerAbout }\n | { id: 'subscribe'; panel: RhAudioPlayerSubscribe }\n | { id: 'transcript'; panel: RhTranscript }\n )[]"
},
"readonly": true
},
{
"kind": "field",
"name": "#hasMenu",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#menuOpen",
"privacy": "private"
},
{
"kind": "field",
"name": "#playbackRates",
"privacy": "private",
"description": "gets list of allowable playback rates",
"readonly": true
},
{
"kind": "field",
"name": "#mediaEnd",
"privacy": "private",
"description": "gets media media time if set",
"readonly": true
},
{
"kind": "field",
"name": "#mediaStart",
"privacy": "private",
"description": "gets media media time if set",
"readonly": true
},
{
"kind": "field",
"name": "#elapsedText",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#transcript",
"privacy": "private",
"type": {
"text": "RhTranscript | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "#about",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#subscribe",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "currentTime",
"description": "elapsed time in seconds"
},
{
"kind": "field",
"name": "duration",
"description": "total time in seconds",
"readonly": true
},
{
"kind": "field",
"name": "muted",
"type": {
"text": "boolean"
},
"description": "whether audio is muted",
"readonly": true
},
{
"kind": "field",
"name": "paused",
"type": {
"text": "boolean"
},
"description": "whether media is paused",
"readonly": true
},
{
"kind": "field",
"name": "readyState",
"type": {
"text": "number"
},
"description": "media status",
"readonly": true
},
{
"kind": "method",
"name": "getUpdateComplete",
"privacy": "protected",
"return": {
"type": {
"text": "Promise<boolean>"
}
}
},
{
"kind": "method",
"name": "#playbackRateTemplate",
"parameters": [
{
"name": "id",
"default": "'playback-rate'"
}
],
"description": "template for playback rate controls",
"privacy": "private"
},
{
"kind": "method",
"name": "#loadLanguage",
"parameters": [
{
"name": "lang",
"default": "this.#translation.language"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#updateMenuLabels",
"privacy": "private"
},
{
"kind": "method",
"name": "#updateTranscriptLabels",
"privacy": "private"
},
{
"kind": "method",
"name": "#cleanUpListeners",
"privacy": "private"
},
{
"kind": "method",
"name": "#initMediaElement",
"parameters": [
{
"name": "slotchangeevent",
"optional": true,
"type": {
"text": "Event"
}
}
],
"description": "sets initial values based media player metadata",
"privacy": "private"
},
{
"kind": "method",
"name": "#onCanplay",
"description": "handles media `canplay` event",
"privacy": "private"
},
{
"kind": "method",
"name": "#onCanplaythrough",
"description": "handles media `canplaythrough` event",
"privacy": "private"
},
{
"kind": "method",
"name": "#onCueseek",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onDurationchange",
"description": "handles media `durationchange` event",
"privacy": "private"
},
{
"kind": "method",
"name": "#onEnded",
"description": "handles media `ended` event",
"privacy": "private"
},
{
"kind": "method",
"name": "#onLoadeddata",
"description": "handles media `loadeddata` event",
"privacy": "private"
},
{
"kind": "method",
"name": "#onLoadedmetadata",
"description": "handles media `loadedmetadata` event",
"privacy": "private"
},
{
"kind": "method",
"name": "#onMuteButton",
"description": "handles mute button click to toggle mute",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPause",
"description": "handles media `pause` event by updating component's `_paused` state",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPlay",
"description": "handles media `play` event by updating component's `_paused` state",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPlaybackRateChange",
"description": "handles changes to media element playback rate\nby updating component playbackRate property",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPlaybackRateSelect",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"description": "handles changes to value of playback rate number input\nby updating component playbackRate property",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPlayClick",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"description": "handles play button click by toggling play / pause",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPlayFocus",
"description": "handles play button click by toggling play / pause",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPlaying",
"description": "handles media `playing` event by updating component's `_paused` state",
"privacy": "private"
},
{
"kind": "method",
"name": "#onSeeked",
"description": "handles media `seeked` event by updating component's `_currentTime` state",
"privacy": "private"
},
{
"kind": "method",
"name": "#onSeeking",
"description": "handles media `seeking` event by updating component's `_currentTime` state",
"privacy": "private"
},
{
"kind": "method",
"name": "#onTimeSlider",
"parameters": [
{
"name": "event",
"type": {
"text": "Event & { target: HTMLInputElement }"
}
}
],
"description": "handles time input changes by seeking to input value",
"privacy": "private"
},
{
"kind": "method",
"name": "#onTimeupdate",
"description": "handles media `timeupdate` event by updating component's `_currentTime` state",
"privacy": "private"
},
{
"kind": "method",
"name": "#onMenuToggle",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"description": "handles toggling the \"More options\" menu button",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPanelChange",
"description": "updates panel text",
"privacy": "private"
},
{
"kind": "method",
"name": "#onTitleChange",
"description": "updates about panel with title and series text",
"privacy": "private"
},
{
"kind": "method",
"name": "#onVolumechange",
"description": "handles media `volumechange` event by\nupdating component's `_muted` state and `volume` property",
"privacy": "private"
},
{
"kind": "method",
"name": "#onVolumeSlider",
"parameters": [
{
"name": "event",
"type": {
"text": "Event & { target: HTMLInputElement }"
}
}
],
"description": "handles volume input changes by setting media volume to input value",
"privacy": "private"
},
{
"kind": "method",
"name": "#validPlaybackRate",
"parameters": [
{
"name": "number",
"type": {
"text": "number"
}
}
],
"description": "ensures playback rate value falls between playback rate minimum and maximum values",
"privacy": "private"
},
{
"kind": "method",
"name": "#selectOpenPanel",
"parameters": [
{
"name": "panel",
"optional": true,
"type": {
"text": "RhAudioPlayerAbout | RhAudioPlayerSubscribe | RhTranscript"
}
}
],
"description": "opens particular panel open or closes panels if none given",
"privacy": "private"
},
{
"kind": "field",
"name": "#lastActiveMenuItem",
"privacy": "private",
"type": {
"text": "HTMLElement | undefined"
}
},
{
"kind": "method",
"name": "#onCloseKeydown",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"description": "hides panel with Escape key",
"privacy": "private"
},
{
"kind": "method",
"name": "#onMenuKeydown",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"description": "hides menu with Escape key",
"privacy": "private"
},
{
"kind": "method",
"name": "#onMenuFocusout",
"parameters": [
{
"name": "event",
"type": {
"text": "FocusEvent"
}
}
],
"description": "hides menu when left without focus",
"privacy": "private"
},
{
"kind": "method",
"name": "#positionMenu",
"privacy": "private"
},
{
"kind": "method",
"name": "#showMenu",
"privacy": "private"
},
{
"kind": "method",
"name": "#unsetTabindexFromMenuItems",
"privacy": "private"
},
{
"kind": "method",
"name": "#hideMenu",
"privacy": "private"
},
{
"kind": "method",
"name": "#onTranscriptDownload",
"privacy": "private"
},
{
"kind": "field",
"name": "#onWindowClick",
"privacy": "private"
},
{
"kind": "method",
"name": "mute",
"description": "Mutes media volume"
},
{
"kind": "method",
"name": "unmute",
"description": "Unmutes media volume"
},
{
"kind": "method",
"name": "incrementPlaybackrate",
"description": "Increases media playback rate by playback rate step value"
},
{
"kind": "method",
"name": "decrementPlaybackrate",
"description": "Decreases media playback rate by playback rate step value"
},
{
"kind": "method",
"name": "pause",
"description": "Pauses playback"
},
{
"kind": "method",
"name": "play",
"description": "Starts or resumes playback"
},
{
"kind": "method",
"name": "seek",
"parameters": [
{
"name": "seconds",
"type": {
"text": "number"
}
}
],
"description": "Seeks media to a given point in seconds"
},
{
"kind": "method",
"name": "seekFromCurrentTime",
"parameters": [
{
"name": "seconds",
"default": "0"
}
],
"description": "Seeks media a given number of secons from current elapsed time"
},
{
"kind": "method",
"name": "rewind",
"parameters": [
{
"name": "by",
"default": "15",
"description": "number of seconds to rewind"
}
],
"description": "Rewinds media by 15 seconds (default)"
},
{
"kind": "method",
"name": "forward",
"parameters": [
{
"name": "by",
"default": "15",
"description": "number of seconds to advance"
}
],
"description": "Advances media by 15 seconds (default)"
}
],
"attributes": [
{
"name": "mediaseries",
"type": {
"text": "string | undefined"
},
"description": "Audio's series name, e.g. Podcast series.",
"fieldName": "mediaseries"
},
{
"name": "mediatitle",
"type": {
"text": "string | undefined"
},
"description": "Audio's title, e.g. Podcast episode title.",
"fieldName": "mediatitle"
},
{
"name": "layout",
"type": {
"text": "'mini' | 'compact' | 'compact-wide' | 'full' | undefined"
},
"description": "Layout:\n - `mini` (default): minimal controls: play/pause, range; volume and other controls hidden behind menu\n - `compact`: artwork and more controls: time, skip, volume\n - `compact-wide`: like compact but full width\n - `full`: maximal controls and artwork",
"fieldName": "layout"
},
{
"name": "poster",
"type": {
"text": "string | undefined"
},
"description": "URL to audio's artwork",
"fieldName": "poster"
},
{
"name": "volume",
"type": {
"text": "number"
},
"default": "0.5",
"description": "Playback volume",
"fieldName": "volume"
},
{
"name": "playbackRate",
"type": {
"text": "number"
},
"default": "1",
"description": "Playback rate",
"fieldName": "playbackRate"
},
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
},
{
"name": "lang",
"type": {
"text": "string"
},
"fieldName": "lang"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Element's color palette",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Plays audio clips and includes other features",
"tagName": "rh-audio-player",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/audio-player/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/rh-audio-player.html"
}
},
{
"url": "https://ux.redhat.com/elements/audio-player/demo/customization/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/customization.html"
}
},
{
"url": "https://ux.redhat.com/elements/audio-player/demo/detailed-transcript/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/detailed-transcript.html"
}
},
{
"url": "https://ux.redhat.com/elements/audio-player/demo/heading-levels/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/heading-levels.html"
}
},
{
"url": "https://ux.redhat.com/elements/audio-player/demo/language-localization/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/language-localization.html"
}
},
{
"url": "https://ux.redhat.com/elements/audio-player/demo/prevent-concurrent-playback/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/prevent-concurrent-playback.html"
}
},
{
"url": "https://ux.redhat.com/elements/audio-player/demo/right-to-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-audio-player/demo/right-to-left.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhAudioPlayer",
"declaration": {
"name": "RhAudioPlayer",
"module": "rh-audio-player/rh-audio-player.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-audio-player",
"declaration": {
"name": "RhAudioPlayer",
"module": "rh-audio-player/rh-audio-player.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-audio-player/rh-cue.js",
"declarations": [
{
"kind": "function",
"name": "getFormattedTime",
"return": {
"type": {
"text": "string"
}
},
"parameters": [
{
"name": "seconds",
"type": {
"text": "Seconds"
}
}
],
"description": "formats time in seconds as `mm:ss.ms` string"
},
{
"kind": "function",
"name": "getSeconds",
"return": {
"type": {
"text": "Seconds"
}
},
"parameters": [
{
"name": "str",
"type": {
"text": "TimeString"
}
}
],
"description": "gets seconds from a string formatted as `mm:ss.mss` or `hh:mm:ss.mss`"
},
{
"kind": "class",
"description": "Media Transcript Cue",
"name": "RhCue",
"slots": [
{
"description": "text of cue",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "start",
"type": {
"text": "string | undefined"
},
"description": "Start time, in mm:ss.ms",
"attribute": "start"
},
{
"kind": "field",
"name": "end",
"type": {
"text": "string | undefined"
},
"description": "End time, in mm:ss.ms",
"attribute": "end"
},
{
"kind": "field",
"name": "text",
"type": {
"text": "string | undefined"
},
"description": "Text of this cue. Overridden by `text` slot",
"attribute": "text"
},
{
"kind": "field",
"name": "voice",
"type": {
"text": "string | undefined"
},
"description": "Name of voice speaking this text. Overridden by `voice` slot",
"attribute": "voice",
"reflects": true
},
{
"kind": "field",
"name": "active",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether this cue is active right now",
"attribute": "active",
"reflects": true
},
{
"kind": "field",
"name": "#headings",
"privacy": "private",
"default": "new HeadingLevelContextConsumer(this)"
},
{
"kind": "field",
"name": "#hasVoice",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "startTime",
"readonly": true
},
{
"kind": "field",
"name": "endTime",
"readonly": true
},
{
"kind": "field",
"name": "downloadText",
"readonly": true
},
{
"kind": "method",
"name": "#linkTemplate",
"parameters": [
{
"name": "content",
"default": "nothing",
"type": {
"text": "unknown"
}
},
{
"name": "heading",
"default": "false"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onClick",
"privacy": "private"
}
],
"events": [
{
"name": "cueseek",
"type": {
"text": "Event"
},
"description": "when user clicks a time cue"
}
],
"attributes": [
{
"name": "start",
"type": {
"text": "string | undefined"
},
"description": "Start time, in mm:ss.ms",
"fieldName": "start"
},
{
"name": "end",
"type": {
"text": "string | undefined"
},
"description": "End time, in mm:ss.ms",
"fieldName": "end"
},
{
"name": "text",
"type": {
"text": "string | undefined"
},
"description": "Text of this cue. Overridden by `text` slot",
"fieldName": "text"
},
{
"name": "voice",
"type": {
"text": "string | undefined"
},
"description": "Name of voice speaking this text. Overridden by `voice` slot",
"fieldName": "voice"
},
{
"name": "active",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether this cue is active right now",
"fieldName": "active"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-cue",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "getFormattedTime",
"declaration": {
"name": "getFormattedTime",
"module": "rh-audio-player/rh-cue.js"
}
},
{
"kind": "js",
"name": "getSeconds",
"declaration": {
"name": "getSeconds",
"module": "rh-audio-player/rh-cue.js"
}
},
{
"kind": "js",
"name": "RhCue",
"declaration": {
"name": "RhCue",
"module": "rh-audio-player/rh-cue.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-cue",
"declaration": {
"name": "RhCue",
"module": "rh-audio-player/rh-cue.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-audio-player/rh-transcript.js",
"declarations": [
{
"kind": "class",
"description": "Audio Player Transcript Panel",
"name": "RhTranscript",
"cssParts": [
{
"description": "scrolling text overflow",
"name": "heading"
},
{
"description": "toolbar area above cues list",
"name": "toolbar"
}
],
"slots": [
{
"description": "custom heading for panel",
"name": "heading"
},
{
"description": "`rh-cue` elements",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "heading",
"type": {
"text": "string | undefined"
},
"attribute": "heading"
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string | undefined"
},
"attribute": "label"
},
{
"kind": "field",
"name": "lang",
"type": {
"text": "string"
},
"attribute": "lang",
"reflects": true
},
{
"kind": "field",
"name": "_label",
"type": {
"text": "string"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_autoscroll",
"type": {
"text": "string"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_download",
"type": {
"text": "string"
},
"privacy": "private"
},
{
"kind": "field",
"name": "_cues",
"type": {
"text": "RhCue[]"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#autoscroll",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "true"
},
{
"kind": "field",
"name": "#duration",
"privacy": "private",
"type": {
"text": "number | undefined"
}
},
{
"kind": "field",
"name": "#headings",
"privacy": "private",
"default": "new HeadingLevelContextProvider(this, {\n offset: 0,\n parent: new HeadingLevelContextConsumer(this),\n })"
},
{
"kind": "field",
"name": "autoscrollLabel",
"type": {
"text": "string"
}
},
{
"kind": "field",
"name": "downloadLabel",
"type": {
"text": "string"
}
},
{
"kind": "field",
"name": "menuLabel",
"type": {
"text": "string"
}
},
{
"kind": "method",
"name": "#updateCues",
"parameters": [
{
"name": "currentTime",
"optional": true,
"type": {
"text": "number"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onScrollClick",
"privacy": "private"
},
{
"kind": "method",
"name": "#onDownloadClick",
"privacy": "private"
},
{
"kind": "field",
"name": "downloadText",
"readonly": true
},
{
"kind": "method",
"name": "setActiveCues",
"parameters": [
{
"name": "currentTime",
"default": "0"
}
]
},
{
"kind": "method",
"name": "setDuration",
"parameters": [
{
"name": "mediaDuration",
"type": {
"text": "number"
}
}
]
},
{
"kind": "method",
"name": "scrollText"
}
],
"events": [
{
"name": "transcriptdownload",
"type": {
"text": "Event"
}
}
],
"attributes": [
{
"name": "heading",
"type": {
"text": "string | undefined"
},
"fieldName": "heading"
},
{
"name": "label",
"type": {
"text": "string | undefined"
},
"fieldName": "label"
},
{
"name": "lang",
"type": {
"text": "string"
},
"fieldName": "lang"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-transcript",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhTranscript",
"declaration": {
"name": "RhTranscript",
"module": "rh-audio-player/rh-transcript.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-transcript",
"declaration": {
"name": "RhTranscript",
"module": "rh-audio-player/rh-transcript.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-avatar/rh-avatar.js",
"declarations": [
{
"kind": "class",
"description": "An avatar is a small thumbnail representation of a user.",
"name": "RhAvatar",
"cssProperties": [
{
"description": "List of colors to use when generating avatars",
"name": "--rh-avatar-colors",
"syntax": "<color>+"
},
{
"description": "Size of the avatar,",
"name": "--rh-avatar-size",
"syntax": "<length>",
"default": "64px"
}
],
"slots": [
{
"description": "The subject's name",
"name": ""
},
{
"description": "auxiliary information about the subject, e.g. job title",
"name": "subtitle"
}
],
"members": [
{
"kind": "field",
"name": "src",
"type": {
"text": "string | undefined"
},
"description": "The URL to the user's custom avatar image.\n\nIt will be displayed instead of a random pattern.",
"attribute": "src",
"reflects": true
},
{
"kind": "field",
"name": "name",
"type": {
"text": "string | undefined"
},
"description": "The user's name, either given name and family name, or username.\n\nWhen displaying a pattern, the name will be used to seed the pattern generator.",
"attribute": "name",
"reflects": true
},
{
"kind": "field",
"name": "subtitle",
"type": {
"text": "string | undefined"
},
"description": "The auxiliary information about the user, e.g. job title",
"attribute": "subtitle",
"reflects": true
},
{
"kind": "field",
"name": "layout",
"type": {
"text": "'inline' | 'block' | undefined"
},
"description": "The type of pattern to display.",
"attribute": "layout",
"reflects": true
},
{
"kind": "field",
"name": "pattern",
"type": {
"text": "'squares' | 'triangles' | undefined"
},
"description": "The type of pattern to display.",
"attribute": "pattern",
"reflects": true
},
{
"kind": "field",
"name": "plain",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When true, hides the title and subtitle",
"attribute": "plain",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"attribute": "on"
},
{
"kind": "field",
"name": "#style",
"privacy": "private",
"type": {
"text": "CSSStyleDeclaration | undefined"
}
},
{
"kind": "field",
"name": "#pattern",
"privacy": "private",
"type": {
"text": "RandomPatternController | undefined"
}
},
{
"kind": "field",
"name": "#screen",
"privacy": "private",
"default": "new ScreenSizeController(this)"
},
{
"kind": "method",
"name": "#normalize",
"description": "Page authors may include whitespace in the element while also using `name`\nor `subtitle` attributes to inject default content. In those cases, any\nslotted text nodes, even if consisting solely of white-space, will override\nthe default content (i.e. attribute values)",
"privacy": "private"
},
{
"kind": "method",
"name": "#initPattern",
"privacy": "private"
},
{
"kind": "method",
"name": "updatePattern"
}
],
"attributes": [
{
"name": "src",
"type": {
"text": "string | undefined"
},
"description": "The URL to the user's custom avatar image.\n\nIt will be displayed instead of a random pattern.",
"fieldName": "src"
},
{
"name": "name",
"type": {
"text": "string | undefined"
},
"description": "The user's name, either given name and family name, or username.\n\nWhen displaying a pattern, the name will be used to seed the pattern generator.",
"fieldName": "name"
},
{
"name": "subtitle",
"type": {
"text": "string | undefined"
},
"description": "The auxiliary information about the user, e.g. job title",
"fieldName": "subtitle"
},
{
"name": "layout",
"type": {
"text": "'inline' | 'block' | undefined"
},
"description": "The type of pattern to display.",
"fieldName": "layout"
},
{
"name": "pattern",
"type": {
"text": "'squares' | 'triangles' | undefined"
},
"description": "The type of pattern to display.",
"fieldName": "pattern"
},
{
"name": "plain",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When true, hides the title and subtitle",
"fieldName": "plain"
},
{
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"fieldName": "on"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Visually represents a user in a masthead or navigation",
"tagName": "rh-avatar",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/avatar/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/rh-avatar.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/links/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/links.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/pattern/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/pattern.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/plain/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/plain.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/position/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/position.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/sizes/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/sizes.html"
}
},
{
"url": "https://ux.redhat.com/elements/avatar/demo/subtitles/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-avatar/demo/subtitles.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhAvatar",
"declaration": {
"name": "RhAvatar",
"module": "rh-avatar/rh-avatar.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-avatar",
"declaration": {
"name": "RhAvatar",
"module": "rh-avatar/rh-avatar.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-back-to-top/rh-back-to-top.js",
"declarations": [
{
"kind": "class",
"description": "Back to top component is a fragment link that allows users to quickly navigate\nto the top of a lengthy content page.",
"name": "RhBackToTop",
"cssParts": [
{
"description": "back to top link anchor element",
"name": "trigger"
}
],
"slots": [
{
"description": "Text for the back to top link",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "visible",
"type": {
"text": "'always' | undefined | undefined"
},
"description": "Flag to always show back to top button, defaults to false.",
"attribute": "visible",
"reflects": true
},
{
"kind": "field",
"name": "scrollableSelector",
"type": {
"text": "string | undefined"
},
"description": "Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events",
"attribute": "scrollable-selector",
"reflects": true
},
{
"kind": "field",
"name": "scrollDistance",
"type": {
"text": "number"
},
"default": "400",
"description": "Distance from the top of the scrollable element to trigger the visibility of the back to top button",
"attribute": "scroll-distance"
},
{
"kind": "field",
"name": "href",
"type": {
"text": "string | undefined"
},
"description": "Page fragment link to target element, must include hash ex: #top",
"attribute": "href",
"reflects": true
},
{
"kind": "field",
"name": "#scrollSpy",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#visible",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#scrollElement",
"privacy": "private",
"type": {
"text": "Element | Window | undefined"
}
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#rootNode",
"privacy": "private",
"type": {
"text": "Document | ShadowRoot"
},
"readonly": true
},
{
"kind": "method",
"name": "#removeScrollListener",
"privacy": "private"
},
{
"kind": "method",
"name": "#addScrollListener",
"privacy": "private"
},
{
"kind": "field",
"name": "#toggleVisibility",
"privacy": "private"
}
],
"attributes": [
{
"name": "visible",
"type": {
"text": "'always' | undefined | undefined"
},
"description": "Flag to always show back to top button, defaults to false.",
"fieldName": "visible"
},
{
"name": "scrollable-selector",
"type": {
"text": "string | undefined"
},
"description": "Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events",
"fieldName": "scrollableSelector"
},
{
"name": "scroll-distance",
"type": {
"text": "number"
},
"default": "400",
"description": "Distance from the top of the scrollable element to trigger the visibility of the back to top button",
"fieldName": "scrollDistance"
},
{
"name": "href",
"type": {
"text": "string | undefined"
},
"description": "Page fragment link to target element, must include hash ex: #top",
"fieldName": "href"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "A shortcut to the top of the page content",
"tagName": "rh-back-to-top",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/rh-back-to-top.html"
}
},
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/always-visible/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/always-visible.html"
}
},
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/no-slotted-text/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/no-slotted-text.html"
}
},
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/position-sticky/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/position-sticky.html"
}
},
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/scroll-distance/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/scroll-distance.html"
}
},
{
"url": "https://ux.redhat.com/elements/back-to-top/demo/warnings/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-back-to-top/demo/warnings.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhBackToTop",
"declaration": {
"name": "RhBackToTop",
"module": "rh-back-to-top/rh-back-to-top.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-back-to-top",
"declaration": {
"name": "RhBackToTop",
"module": "rh-back-to-top/rh-back-to-top.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-badge/rh-badge.js",
"declarations": [
{
"kind": "class",
"description": "A badge is used to annotate other information like a label or an object name.\n\n- **info**: Indicates informative or low impact\n- **success**: Indicates stability or completion\n- **moderate**: Indicates caution\n- **important**: Indicates an error\n- **critical**: Indicates danger or something critical",
"name": "RhBadge",
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "state",
"type": {
"text": "'info' | 'success' | 'moderate' | 'important' | 'critical' | undefined"
},
"description": "Denotes the state-of-affairs this badge represents",
"attribute": "state",
"reflects": true
},
{
"kind": "field",
"name": "number",
"type": {
"text": "number | undefined"
},
"description": "Sets a numeric value for a badge.\n\nYou can pair it with `threshold` attribute to add a `+` sign\nif the number exceeds the threshold value.",
"attribute": "number",
"reflects": true
},
{
"kind": "field",
"name": "threshold",
"type": {
"text": "number | undefined"
},
"description": "Sets a threshold for the numeric value and adds `+` sign if\nthe numeric value exceeds the threshold value.",
"attribute": "threshold",
"reflects": true
}
],
"attributes": [
{
"name": "state",
"type": {
"text": "'info' | 'success' | 'moderate' | 'important' | 'critical' | undefined"
},
"description": "Denotes the state-of-affairs this badge represents",
"fieldName": "state"
},
{
"name": "number",
"type": {
"text": "number | undefined"
},
"description": "Sets a numeric value for a badge.\n\nYou can pair it with `threshold` attribute to add a `+` sign\nif the number exceeds the threshold value.",
"fieldName": "number"
},
{
"name": "threshold",
"type": {
"text": "number | undefined"
},
"description": "Sets a threshold for the numeric value and adds `+` sign if\nthe numeric value exceeds the threshold value.",
"fieldName": "threshold"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Annotates information like a label or object",
"tagName": "rh-badge",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/badge/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/rh-badge.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/critical/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/critical.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/important/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/important.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/info/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/info.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/moderate/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/moderate.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/success/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/success.html"
}
},
{
"url": "https://ux.redhat.com/elements/badge/demo/threshold/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-badge/demo/threshold.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhBadge",
"declaration": {
"name": "RhBadge",
"module": "rh-badge/rh-badge.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-badge",
"declaration": {
"name": "RhBadge",
"module": "rh-badge/rh-badge.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-blockquote/rh-blockquote.js",
"declarations": [
{
"kind": "class",
"description": "A blockquote for displaying quote, author, and author title.",
"name": "RhBlockquote",
"slots": [
{
"description": "Provide a quote for the blockquote",
"name": ""
},
{
"description": "Provide an author for the blockquote",
"name": "author"
},
{
"description": "Provide an author title for the blockquote",
"name": "title"
}
],
"members": [
{
"kind": "field",
"name": "title",
"type": {
"text": "string"
},
"default": "'Blockquote'",
"attribute": "title"
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Set the colorPalette of the blockquote. Possible values are:\n- `lightest` (default)\n- `darkest`",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "align",
"type": {
"text": "'center' | 'inline-start'"
},
"default": "'inline-start'",
"description": "Set the alignment of the blockquote. Possible values are:\n- `left` (default)\n- `center`",
"attribute": "align",
"reflects": true
},
{
"kind": "field",
"name": "highlight",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Optional highlight attribute that, when present, shows a highlight on side of blockquote.",
"attribute": "highlight",
"reflects": true
},
{
"kind": "field",
"name": "size",
"type": {
"text": "'default' | 'large'"
},
"default": "'default'",
"description": "Set the text size of the blockquote. Possible values are:\n- `default`\n- `large`",
"attribute": "size",
"reflects": true
}
],
"attributes": [
{
"name": "title",
"type": {
"text": "string"
},
"default": "'Blockquote'",
"fieldName": "title"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Set the colorPalette of the blockquote. Possible values are:\n- `lightest` (default)\n- `darkest`",
"fieldName": "colorPalette"
},
{
"name": "align",
"type": {
"text": "'center' | 'inline-start'"
},
"default": "'inline-start'",
"description": "Set the alignment of the blockquote. Possible values are:\n- `left` (default)\n- `center`",
"fieldName": "align"
},
{
"name": "highlight",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Optional highlight attribute that, when present, shows a highlight on side of blockquote.",
"fieldName": "highlight"
},
{
"name": "size",
"type": {
"text": "'default' | 'large'"
},
"default": "'default'",
"description": "Set the text size of the blockquote. Possible values are:\n- `default`\n- `large`",
"fieldName": "size"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Highlights quotations and citations with text styles",
"tagName": "rh-blockquote",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/blockquote/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/rh-blockquote.html"
}
},
{
"url": "https://ux.redhat.com/elements/blockquote/demo/centered/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/centered.html"
}
},
{
"url": "https://ux.redhat.com/elements/blockquote/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/blockquote/demo/highlighted/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/highlighted.html"
}
},
{
"url": "https://ux.redhat.com/elements/blockquote/demo/large/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-blockquote/demo/large.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhBlockquote",
"declaration": {
"name": "RhBlockquote",
"module": "rh-blockquote/rh-blockquote.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-blockquote",
"declaration": {
"name": "RhBlockquote",
"module": "rh-blockquote/rh-blockquote.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-button/rh-button.js",
"declarations": [
{
"kind": "class",
"description": "A button is clickable text or an icon that triggers an action on the page or in the background.\nDepending on the action, content, and hierarchy, a button can be used on its own or grouped with\nother buttons.",
"name": "RhButton",
"cssParts": [
{
"description": "Internal button element",
"name": "button"
},
{
"description": "Container for the icon slot",
"name": "icon"
}
],
"slots": [
{
"description": "Contains the button's icon or state indicator, e.g. a spinner.",
"name": "icon"
},
{
"description": "Contains button text",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "formAssociated",
"type": {
"text": "boolean"
},
"static": true,
"default": "true",
"readonly": true
},
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "object"
},
"static": true,
"default": "{\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n }",
"readonly": true
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disables the button",
"attribute": "disabled",
"reflects": true
},
{
"kind": "field",
"name": "type",
"type": {
"text": "'button' | 'submit' | 'reset' | undefined"
},
"attribute": "type",
"reflects": true
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string | undefined"
},
"description": "Accessible name for the button, use when the button does not have slotted text",
"attribute": "label"
},
{
"kind": "field",
"name": "value",
"type": {
"text": "string | undefined"
},
"description": "Form value for the button",
"attribute": "value"
},
{
"kind": "field",
"name": "name",
"type": {
"text": "string | undefined"
},
"description": "Form name for the button",
"attribute": "name"
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "Shorthand for the `icon` slot, the value is icon name",
"attribute": "icon"
},
{
"kind": "field",
"name": "_button",
"type": {
"text": "HTMLButtonElement"
},
"privacy": "private"
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "| 'primary'\n | 'secondary'\n | 'tertiary'\n | 'close'\n | 'play'"
},
"default": "'primary'",
"description": "Changes the style of the button.\n- Primary: Used for the most important call to action on a page. Try to\nlimit primary buttons to one per page.\n- Secondary: Use secondary buttons for general actions on a page, that\ndon’t require as much emphasis as primary button actions. For example,\nyou can use secondary buttons where there are multiple actions, like in\ntoolbars or data lists.\n- Tertiary: Tertiary buttons are flexible and can be used as needed.",
"attribute": "variant",
"reflects": true
},
{
"kind": "field",
"name": "danger",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Use danger buttons for actions a user can take that are potentially\ndestructive or difficult/impossible to undo, like deleting or removing\nuser data.",
"attribute": "danger",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#hasIcon",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#internals",
"privacy": "private"
},
{
"kind": "method",
"name": "formDisabledCallback",
"privacy": "protected"
},
{
"kind": "method",
"name": "#onClick",
"privacy": "private"
},
{
"kind": "method",
"name": "#renderDefaultIcon",
"return": {
"type": {
"text": "TemplateResult | string"
}
},
"description": "Fallback content for the icon slot. When the `icon` attribute is set, it\nshould render an icon corresponding to the value.",
"privacy": "private"
},
{
"kind": "method",
"name": "focus"
}
],
"attributes": [
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Disables the button",
"fieldName": "disabled"
},
{
"name": "type",
"type": {
"text": "'button' | 'submit' | 'reset' | undefined"
},
"fieldName": "type"
},
{
"name": "label",
"type": {
"text": "string | undefined"
},
"description": "Accessible name for the button, use when the button does not have slotted text",
"fieldName": "label"
},
{
"name": "value",
"type": {
"text": "string | undefined"
},
"description": "Form value for the button",
"fieldName": "value"
},
{
"name": "name",
"type": {
"text": "string | undefined"
},
"description": "Form name for the button",
"fieldName": "name"
},
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "Shorthand for the `icon` slot, the value is icon name",
"fieldName": "icon"
},
{
"name": "variant",
"type": {
"text": "| 'primary'\n | 'secondary'\n | 'tertiary'\n | 'close'\n | 'play'"
},
"default": "'primary'",
"description": "Changes the style of the button.\n- Primary: Used for the most important call to action on a page. Try to\n limit primary buttons to one per page.\n- Secondary: Use secondary buttons for general actions on a page, that\n don’t require as much emphasis as primary button actions. For example,\n you can use secondary buttons where there are multiple actions, like in\n toolbars or data lists.\n- Tertiary: Tertiary buttons are flexible and can be used as needed.",
"fieldName": "variant"
},
{
"name": "danger",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Use danger buttons for actions a user can take that are potentially\ndestructive or difficult/impossible to undo, like deleting or removing\nuser data.",
"fieldName": "danger"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Triggers actions on the page or in the background",
"tagName": "rh-button",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/button/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/rh-button.html"
}
},
{
"url": "https://ux.redhat.com/elements/button/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/button/demo/form-control/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/form-control.html"
}
},
{
"url": "https://ux.redhat.com/elements/button/demo/variants/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-button/demo/variants.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhButton",
"declaration": {
"name": "RhButton",
"module": "rh-button/rh-button.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-button",
"declaration": {
"name": "RhButton",
"module": "rh-button/rh-button.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-accordion/rh-accordion-header.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "AccordionHeaderChangeEvent",
"members": [
{
"kind": "field",
"name": "target",
"type": {
"text": "RhAccordionHeader"
}
}
],
"superclass": {
"name": "Event",
"module": "elements/rh-accordion/rh-accordion-header.ts"
}
},
{
"kind": "class",
"description": "Accordion Header",
"name": "RhAccordionHeader",
"cssParts": [
{
"description": "inline element containing the heading text or slotted heading content",
"name": "text"
},
{
"description": "container for accents within the header",
"name": "accents"
},
{
"description": "caret icon",
"name": "icon"
}
],
"slots": [
{
"description": "We expect the light DOM of the rh-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)"
},
{
"description": "These elements will appear inline by default with the header title, between the header and the chevron (or after the chevron and header in disclosure mode). There is an option to set the accents placement to bottom",
"name": "accents"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "object"
},
"static": true,
"default": "{\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n }",
"readonly": true
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "expanded",
"reflects": true
},
{
"kind": "field",
"name": "headingText",
"type": {
"text": "string | undefined"
},
"attribute": "heading-text",
"reflects": true
},
{
"kind": "field",
"name": "headingTag",
"type": {
"text": "string | undefined"
},
"attribute": "heading-tag",
"reflects": true
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string"
},
"default": "'angle-down'",
"attribute": "icon",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "ctx",
"type": {
"text": "RhAccordionContext | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#generatedHtag",
"privacy": "private",
"type": {
"text": "HTMLHeadingElement | undefined"
}
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#header",
"privacy": "private",
"type": {
"text": "HTMLElement | undefined"
}
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)"
},
{
"kind": "method",
"name": "#initHeader",
"privacy": "private"
},
{
"kind": "method",
"name": "#renderHeaderContent",
"privacy": "private"
},
{
"kind": "method",
"name": "#getOrCreateHeader",
"return": {
"type": {
"text": "HTMLElement | undefined"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#onClick",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
],
"privacy": "private"
}
],
"events": [
{
"name": "expanded",
"type": {
"text": "AccordionHeaderChangeEvent"
}
},
{
"type": {
"text": "AccordionHeaderChangeEvent"
},
"description": "when the open panels change",
"name": "change"
}
],
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
},
{
"name": "heading-text",
"type": {
"text": "string | undefined"
},
"fieldName": "headingText"
},
{
"name": "heading-tag",
"type": {
"text": "string | undefined"
},
"fieldName": "headingTag"
},
{
"name": "icon",
"type": {
"text": "string"
},
"default": "'angle-down'",
"fieldName": "icon"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-accordion-header",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "AccordionHeaderChangeEvent",
"declaration": {
"name": "AccordionHeaderChangeEvent",
"module": "rh-accordion/rh-accordion-header.js"
}
},
{
"kind": "js",
"name": "RhAccordionHeader",
"declaration": {
"name": "RhAccordionHeader",
"module": "rh-accordion/rh-accordion-header.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion-header",
"declaration": {
"name": "RhAccordionHeader",
"module": "rh-accordion/rh-accordion-header.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-accordion/rh-accordion-panel.js",
"declarations": [
{
"kind": "class",
"description": "Accordion Panel",
"name": "RhAccordionPanel",
"slots": [
{
"description": "The content of the accordion panel can be any basic markup including but not limited to div, paragraph, or nested accordion panels."
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "expanded",
"reflects": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
}
],
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-accordion-panel",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhAccordionPanel",
"declaration": {
"name": "RhAccordionPanel",
"module": "rh-accordion/rh-accordion-panel.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion-panel",
"declaration": {
"name": "RhAccordionPanel",
"module": "rh-accordion/rh-accordion-panel.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-accordion/rh-accordion.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "AccordionExpandEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "",
"name": "AccordionCollapseEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "An accordion is a stacked list of panels which allows users to expand or collapse information when selected. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.",
"name": "RhAccordion",
"slots": [
{
"description": "Place the `rh-accordion-header` and `rh-accordion-panel` elements here."
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "method",
"name": "isAccordion",
"static": true,
"return": {
"type": {
"text": "target is RhAccordion"
}
},
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
]
},
{
"kind": "method",
"name": "isHeader",
"static": true,
"return": {
"type": {
"text": "target is RhAccordionHeader"
}
},
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
]
},
{
"kind": "method",
"name": "isPanel",
"static": true,
"return": {
"type": {
"text": "target is RhAccordionPanel"
}
},
"parameters": [
{
"name": "target",
"type": {
"text": "EventTarget | null"
}
}
]
},
{
"kind": "method",
"name": "isAccordionChangeEvent",
"static": true,
"return": {
"type": {
"text": "event is AccordionHeaderChangeEvent"
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
]
},
{
"kind": "field",
"name": "accents",
"type": {
"text": "'inline' | 'bottom' | undefined"
},
"description": "Sets accordion header's accents position to inline or bottom",
"attribute": "accents",
"reflects": true
},
{
"kind": "field",
"name": "expandedIndex",
"description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n<pf-accordion expanded-index=\"1,2\">\n...\n</pf-accordion>\n```",
"attribute": "expanded-index"
},
{
"kind": "field",
"name": "#ctx",
"privacy": "private",
"type": {
"text": "RhAccordionContext"
},
"readonly": true
},
{
"kind": "field",
"name": "large",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "large",
"reflects": true
},
{
"kind": "field",
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "true",
"attribute": "bordered",
"reflects": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "expandedSets",
"privacy": "protected",
"default": "new Set<number>()"
},
{
"kind": "field",
"name": "#expandedIndex",
"privacy": "private",
"type": {
"text": "number[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "#headerIndex",
"privacy": "private",
"default": "new RovingTabindexController<RhAccordionHeader>(this)"
},
{
"kind": "field",
"name": "#initialized",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.#init())"
},
{
"kind": "field",
"name": "ctx",
"privacy": "private"
},
{
"kind": "method",
"name": "#init",
"description": "Initialize the accordion by connecting headers and panels\nwith aria controls and labels; set up the default disclosure\nstate if not set by the author; and check the URL for default\nopen",
"privacy": "private"
},
{
"kind": "method",
"name": "getUpdateComplete",
"privacy": "protected",
"return": {
"type": {
"text": "Promise<boolean>"
}
}
},
{
"kind": "field",
"name": "#activeHeader",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "#updateActiveHeader",
"privacy": "private"
},
{
"kind": "method",
"name": "#panelForHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "RhAccordionHeader"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#expandHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "RhAccordionHeader"
}
},
{
"name": "index",
"default": "this.#getIndex(header)"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#expandPanel",
"parameters": [
{
"name": "panel",
"type": {
"text": "RhAccordionPanel"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#collapseHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "RhAccordionHeader"
}
},
{
"name": "index",
"default": "this.#getIndex(header)"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#collapsePanel",
"parameters": [
{
"name": "panel",
"type": {
"text": "RhAccordionPanel"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onChange",
"parameters": [
{
"name": "event",
"type": {
"text": "AccordionHeaderChangeEvent"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#allHeaders",
"return": {
"type": {
"text": "RhAccordionHeader[]"
}
},
"parameters": [
{
"name": "accordion",
"default": "this",
"type": {
"text": "RhAccordion"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#allPanels",
"return": {
"type": {
"text": "RhAccordionPanel[]"
}
},
"parameters": [
{
"name": "accordion",
"default": "this",
"type": {
"text": "RhAccordion"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#getIndex",
"parameters": [
{
"name": "el",
"type": {
"text": "Element | null"
}
}
],
"privacy": "private"
},
{
"kind": "field",
"name": "headers",
"readonly": true
},
{
"kind": "field",
"name": "panels",
"readonly": true
},
{
"kind": "method",
"name": "updateAccessibility",
"privacy": "public"
},
{
"kind": "method",
"name": "toggle",
"privacy": "public",
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse."
},
{
"kind": "method",
"name": "expand",
"privacy": "public",
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
},
{
"name": "parentAccordion",
"optional": true,
"type": {
"text": "RhAccordion"
}
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to expand.\nAccepts an optional parent accordion to search for headers and panels."
},
{
"kind": "method",
"name": "expandAll",
"privacy": "public",
"description": "Expands all accordion items."
},
{
"kind": "method",
"name": "collapse",
"privacy": "public",
"parameters": [
{
"name": "index",
"type": {
"text": "number"
}
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to collapse."
},
{
"kind": "method",
"name": "collapseAll",
"privacy": "public",
"description": "Collapses all accordion items."
}
],
"events": [
{
"name": "header",
"type": {
"text": "AccordionExpandEvent"
}
},
{
"type": {
"text": "AccordionExpandEvent"
},
"description": "when a panel expands",
"name": "expand"
},
{
"type": {
"text": "AccordionCollapseEvent"
},
"description": "when a panel collapses",
"name": "collapse"
}
],
"attributes": [
{
"description": "Sets accordion header's accents position to inline or bottom",
"name": "accents",
"type": {
"text": "'inline' | 'bottom' | undefined"
},
"fieldName": "accents"
},
{
"name": "expanded-index",
"description": "Sets and reflects the currently expanded accordion 0-based indexes.\nUse commas to separate multiple indexes.\n```html\n<pf-accordion expanded-index=\"1,2\">\n ...\n</pf-accordion>\n```",
"fieldName": "expandedIndex"
},
{
"name": "large",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "large"
},
{
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "true",
"fieldName": "bordered"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Expands or collapses a stacked list of panels",
"tagName": "rh-accordion",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/accordion/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/rh-accordion.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/accents/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/accents.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/large/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/large.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/nested/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/nested.html"
}
},
{
"url": "https://ux.redhat.com/elements/accordion/demo/right-to-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-accordion/demo/right-to-left.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "AccordionExpandEvent",
"declaration": {
"name": "AccordionExpandEvent",
"module": "rh-accordion/rh-accordion.js"
}
},
{
"kind": "js",
"name": "AccordionCollapseEvent",
"declaration": {
"name": "AccordionCollapseEvent",
"module": "rh-accordion/rh-accordion.js"
}
},
{
"kind": "js",
"name": "RhAccordion",
"declaration": {
"name": "RhAccordion",
"module": "rh-accordion/rh-accordion.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-accordion",
"declaration": {
"name": "RhAccordion",
"module": "rh-accordion/rh-accordion.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-code-block/rh-code-block.js",
"declarations": [
{
"kind": "class",
"description": "A code block is formatted text within a container.",
"name": "RhCodeBlock",
"slots": [
{
"description": "A non-executable script tag containing the sample content. JavaScript samples should use the type `text/sample-javascript`. HTML samples containing script tags must escape the closing `</script>` tag. Can also be a `<pre>` tag.",
"name": ""
},
{
"description": "tooltip content for the copy action button",
"name": "action-label-copy"
},
{
"description": "tooltip content for the wrap action button",
"name": "action-label-wrap"
},
{
"description": "text content for the expandable toggle button when the code block is collapsed.",
"name": "show-more"
},
{
"description": "text content for the expandable toggle button when the code block is expanded.",
"name": "show-less"
},
{
"description": "`<dl>` element containing rh-badges in the `<dt>` and legend text in the `<dd>` elements",
"name": "legend"
}
],
"members": [
{
"kind": "field",
"name": "actions",
"privacy": "private",
"static": true,
"default": "new Map([\n ['wrap', html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\">\n <path d=\"M19 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0ZM10.82 4.992C9.877 4.996 8.31 5.57 8.174 6c1.21.03 2.432-.073 3.635.08 2.181.383 3.677 2.796 3.066 4.922-.41 1.753-2.108 2.995-3.877 3.014L11 14H5.207l2.682-2.682-.707-.707L3.293 14.5l3.889 3.889.707-.707L5.207 15h5.736l.004-.008c1.444.005 2.896-.59 3.832-1.722 1.65-1.82 1.612-4.85-.08-6.63A5 5 0 0 0 11 5a1.948 1.948 0 0 0-.18-.008z\"/>\n <path d=\"M4 5h7c-.039.313.077.781-.057 1H4V5ZM0 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0Z\"/>\n </svg>\n `],\n ['wrap-active', html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 21 20\">\n <path fill=\"currentColor\" d=\"M12 13h1v7h-1zM12 0h1v7h-1z\"/>\n <path stroke=\"currentColor\" d=\"M16.465 6.464 20 10l-3.535 3.536\"/>\n <path fill=\"currentColor\" d=\"M3 9.5h17v1H3zM0 0h1v20H0z\"/>\n </svg>\n `],\n ['copy', html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n version=\"1.1\"\n viewBox=\"0 0 20 20\">\n <path fill=\"currentColor\" d=\"M12 0H2C.9 0 0 .9 0 2v10h1V2c0-.6.4-1 1-1h10V0z\"/>\n <path fill=\"currentColor\" d=\"M18 20H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2zM8 7c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8c0-.6-.4-1-1-1H8z\"/>\n </svg>\n `],\n ])",
"attribute": "actions",
"reflects": true
},
{
"kind": "field",
"name": "actions",
"type": {
"text": "('copy' | 'wrap')[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "compact",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, the code block displays with compact spacing",
"attribute": "compact",
"reflects": true
},
{
"kind": "field",
"name": "resizable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, the code block is resizable",
"attribute": "resizable",
"reflects": true
},
{
"kind": "field",
"name": "fullHeight",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, the code block occupies it's full height, without scrolling",
"attribute": "full-height",
"reflects": true
},
{
"kind": "field",
"name": "wrap",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, lines in the code snippet wrap",
"attribute": "wrap"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(\n this,\n null,\n // 'actions',\n 'action-label-copy',\n 'action-label-wrap',\n 'show-more',\n 'show-less',\n 'legend',\n )"
},
{
"kind": "field",
"name": "#ro",
"privacy": "private",
"default": "new ResizeObserver(() => this.#computeLineNumbers())"
},
{
"kind": "field",
"name": "#lineHeights",
"privacy": "private",
"type": {
"text": "`${string}px`[]"
},
"default": "[]"
},
{
"kind": "method",
"name": "#wrapChanged",
"privacy": "private"
},
{
"kind": "method",
"name": "#computeLineNumbers",
"description": "Clone the text content and connect it to the document, in order to calculate the number of lines",
"privacy": "private"
},
{
"kind": "method",
"name": "#onActionsClick",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onActionsKeyup",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onCodeAction",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onClickExpand",
"privacy": "private"
},
{
"kind": "method",
"name": "#copy",
"privacy": "private"
}
],
"attributes": [
{
"name": "actions",
"default": "new Map([\n ['wrap', html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\">\n <path d=\"M19 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0ZM10.82 4.992C9.877 4.996 8.31 5.57 8.174 6c1.21.03 2.432-.073 3.635.08 2.181.383 3.677 2.796 3.066 4.922-.41 1.753-2.108 2.995-3.877 3.014L11 14H5.207l2.682-2.682-.707-.707L3.293 14.5l3.889 3.889.707-.707L5.207 15h5.736l.004-.008c1.444.005 2.896-.59 3.832-1.722 1.65-1.82 1.612-4.85-.08-6.63A5 5 0 0 0 11 5a1.948 1.948 0 0 0-.18-.008z\"/>\n <path d=\"M4 5h7c-.039.313.077.781-.057 1H4V5ZM0 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0Z\"/>\n </svg>\n `],\n ['wrap-active', html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 21 20\">\n <path fill=\"currentColor\" d=\"M12 13h1v7h-1zM12 0h1v7h-1z\"/>\n <path stroke=\"currentColor\" d=\"M16.465 6.464 20 10l-3.535 3.536\"/>\n <path fill=\"currentColor\" d=\"M3 9.5h17v1H3zM0 0h1v20H0z\"/>\n </svg>\n `],\n ['copy', html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n version=\"1.1\"\n viewBox=\"0 0 20 20\">\n <path fill=\"currentColor\" d=\"M12 0H2C.9 0 0 .9 0 2v10h1V2c0-.6.4-1 1-1h10V0z\"/>\n <path fill=\"currentColor\" d=\"M18 20H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2zM8 7c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8c0-.6-.4-1-1-1H8z\"/>\n </svg>\n `],\n ])",
"fieldName": "actions"
},
{
"name": "compact",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, the code block displays with compact spacing",
"fieldName": "compact"
},
{
"name": "resizable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, the code block is resizable",
"fieldName": "resizable"
},
{
"name": "full-height",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, the code block occupies it's full height, without scrolling",
"fieldName": "fullHeight"
},
{
"name": "wrap",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When set, lines in the code snippet wrap",
"fieldName": "wrap"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Formats code strings within a container",
"tagName": "rh-code-block",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/code-block/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/rh-code-block.html"
}
},
{
"url": "https://ux.redhat.com/elements/code-block/demo/actions/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/actions.html"
}
},
{
"url": "https://ux.redhat.com/elements/code-block/demo/callout-badges/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/callout-badges.html"
}
},
{
"url": "https://ux.redhat.com/elements/code-block/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/code-block/demo/resizable/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/resizable.html"
}
},
{
"url": "https://ux.redhat.com/elements/code-block/demo/sizes/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-code-block/demo/sizes.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhCodeBlock",
"declaration": {
"name": "RhCodeBlock",
"module": "rh-code-block/rh-code-block.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-code-block",
"declaration": {
"name": "RhCodeBlock",
"module": "rh-code-block/rh-code-block.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-card/rh-card.js",
"declarations": [
{
"kind": "class",
"description": "Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.",
"name": "RhCard",
"cssProperties": [
{
"description": "Font size for header on card",
"name": "--rh-card-header-font-size",
"syntax": "<length>",
"default": "1.5rem"
}
],
"cssParts": [
{
"description": "The container for the card. Contains the header, body, and footer.",
"name": "container"
},
{
"description": "The header for the card. Contains the header slot.",
"name": "header"
},
{
"description": "The body for the card. Contains the default slot.",
"name": "body"
},
{
"description": "The footer for the card. Contains the footer slot.",
"name": "footer"
}
],
"slots": [
{
"description": "If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region.",
"name": "header"
},
{
"description": "content that is not designated for the header or footer slot, will go to this slot.",
"name": "Any"
},
{
"description": "Use this slot for anything that you want to be stuck to the base of the card.",
"name": "footer"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "'darkest' | 'lightest' | 'lighter' | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nCard always resets its context to `base`, unless explicitly provided with a `color-palette`.",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, 'header', null, 'footer')"
}
],
"attributes": [
{
"name": "color-palette",
"type": {
"text": "'darkest' | 'lightest' | 'lighter' | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nCard always resets its context to `base`, unless explicitly provided with a `color-palette`.",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Arranges content and interactive elements in a layout",
"tagName": "rh-card",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/card/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/rh-card.html"
}
},
{
"url": "https://ux.redhat.com/elements/card/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/card/demo/grid/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/grid.html"
}
},
{
"url": "https://ux.redhat.com/elements/card/demo/variants/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-card/demo/variants.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhCard",
"declaration": {
"name": "RhCard",
"module": "rh-card/rh-card.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-card",
"declaration": {
"name": "RhCard",
"module": "rh-card/rh-card.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-cta/rh-cta.js",
"declarations": [
{
"kind": "class",
"description": "A call to action is a styled link that entices users to make a selection.",
"name": "RhCta",
"cssProperties": [
{
"description": "Sets the cta color",
"name": "--rh-cta-color",
"syntax": "<color>",
"default": "var(--rh-color-text-primary-on-dark, #ffffff)"
},
{
"description": "Sets the cta background color",
"name": "--rh-cta-background-color",
"default": "var(--rh-color-brand-red-on-light, #ee0000)"
},
{
"description": "Sets the cta border color",
"name": "--rh-cta-border-color",
"default": "var(--rh-color-brand-red-on-light, #ee0000)"
},
{
"description": "Sets the cta color on hover",
"name": "--rh-cta-hover-color",
"default": "var(--rh-color-text-primary-on-dark, #ffffff)"
},
{
"description": "Sets the cta background color on hover",
"name": "--rh-cta-hover-background-color",
"default": "var(--rh-color-brand-red-dark, #be0000)"
},
{
"description": "Sets the cta boder color on hover",
"name": "--rh-cta-hover-border-color",
"default": "var(--rh-color-brand-red-dark, #be0000)"
},
{
"description": "Sets the cta color on focus",
"name": "--rh-cta-focus-color",
"default": "var(--rh-color-text-primary-on-dark, #ffffff)"
},
{
"description": "Sets the cta background color on focus",
"name": "--rh-cta-focus-background-color",
"default": "var(--rh-color-brand-red-on-light, #ee0000)"
},
{
"description": "Sets the cta container background color on focus",
"name": "--rh-cta-focus-container-background-color",
"default": "transparent"
},
{
"description": "Sets the cta container outline color on focus",
"name": "--rh-cta-focus-container-outline-color",
"default": "#0066cc"
},
{
"description": "Sets the cta border color on focus",
"name": "--rh-cta-focus-border-color",
"default": "transparent"
},
{
"description": "Sets the cta inner border color on focus",
"name": "--rh-cta-focus-inner-border-color",
"default": "transparent"
},
{
"description": "Sets the cta color on active. Applicable only for secondary variant",
"name": "--rh-cta-active-color",
"default": "var(--rh-color-text-primary-on-dark, #ffffff)"
},
{
"description": "Sets the cta background color on active",
"name": "--rh-cta-active-background-color",
"default": "var(--rh-color-brand-red-dark, #be0000)"
},
{
"description": "Sets the cta container background color on active. Applicable only for default variant",
"name": "--rh-cta-active-container-background-color",
"default": "#0066cc1a"
},
{
"description": "Sets the cta inner border color on active",
"name": "--rh-cta-active-inner-border-color",
"default": "var(--rh-color-text-primary-on-dark, #ffffff)"
},
{
"description": "Sets the cta text decoration",
"name": "--rh-cta-text-decoration",
"default": "none"
},
{
"description": "Sets the cta text decoration on focus",
"name": "--rh-cta-focus-text-decoration",
"default": "none"
},
{
"description": "Sets the cta text decoration on hover",
"name": "--rh-cta-hover-text-decoration",
"default": "none"
},
{
"description": "Sets the cta text decoration on active",
"name": "--rh-cta-active-text-decoration",
"default": "none"
}
],
"cssParts": [
{
"description": "container element for slotted CTA",
"name": "container"
}
],
"slots": [
{
"description": "We expect an anchor tag, `<a>` with an `href`, to be the first child inside `rh-cta` element. Less preferred but allowed for specific use-cases include: `<button>` (note however that the `button` tag is not supported for the default CTA styles)."
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "'primary' | 'secondary' | 'brick' | undefined"
},
"description": "Indicates the importance of this call-to-action in the context of the page.\nWill also influence how the call-to-action is styled.\n- **Primary**: Use for the primary or most important link. This variant is the highest in\n hierarchy and can also be used to play a video in a Modal or large container.\n- **Secondary**: Use for secondary or general links. This variant is lower in hierarchy than\n the Primary variant and can be used multiple times in the same container or layout.\n- **Brick**: Use to group links together. Only the Brick variant can stretch to fit a\n container or grid, otherwise the text label padding in other variants stays the same.\n- Default (no variant): Use for tertiary or the least important links. This variant is the\n lowest in hierarchy and can be used multiple times in the same container or layout.",
"attribute": "variant",
"reflects": true
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"attribute": "icon",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "cta",
"type": {
"text": "HTMLAnchorElement | HTMLButtonElement | null"
},
"privacy": "public",
"default": "null",
"description": "The slotted `<a>` or `<button>` element"
},
{
"kind": "field",
"name": "#initializing",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false",
"description": "true while the initializer method is running - to prevent double-execution"
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)",
"description": "Is the element in an RTL context?"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#isDefault",
"privacy": "private",
"type": {
"text": "boolean"
},
"readonly": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.#onMutation())"
},
{
"kind": "method",
"name": "#onMutation",
"privacy": "private"
}
],
"attributes": [
{
"description": "[**Deprecated**] intended for use in elements that have slotted descendants, will be removed in a future release. - Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See [CSS Custom Properties](#css-custom-properties) for default values. {@deprecated color-palette intended for usage in elements that have slotted descendants}",
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"fieldName": "colorPalette"
},
{
"name": "variant",
"type": {
"text": "'primary' | 'secondary' | 'brick' | undefined"
},
"description": "Indicates the importance of this call-to-action in the context of the page.\nWill also influence how the call-to-action is styled.\n - **Primary**: Use for the primary or most important link. This variant is the highest in\n hierarchy and can also be used to play a video in a Modal or large container.\n - **Secondary**: Use for secondary or general links. This variant is lower in hierarchy than\n the Primary variant and can be used multiple times in the same container or layout.\n - **Brick**: Use to group links together. Only the Brick variant can stretch to fit a\n container or grid, otherwise the text label padding in other variants stays the same.\n - Default (no variant): Use for tertiary or the least important links. This variant is the\n lowest in hierarchy and can be used multiple times in the same container or layout.",
"fieldName": "variant"
},
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"fieldName": "icon"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Directs users to other pages or displays extra content",
"tagName": "rh-cta",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/rh-cta.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/analytics/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/analytics.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/brick/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/brick.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/button/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/button.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/color-context-with-lightdom-css/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/color-context-with-lightdom-css.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/no-javascript-customization/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/no-javascript-customization.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/resizing/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/resizing.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/right-to-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/right-to-left.html"
}
},
{
"url": "https://ux.redhat.com/elements/call-to-action/demo/variants/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-cta/demo/variants.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhCta",
"declaration": {
"name": "RhCta",
"module": "rh-cta/rh-cta.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-cta",
"declaration": {
"name": "RhCta",
"module": "rh-cta/rh-cta.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-dialog/rh-dialog.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "DialogCancelEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-dialog/rh-dialog.ts"
}
},
{
"kind": "class",
"description": "",
"name": "DialogCloseEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-dialog/rh-dialog.ts"
}
},
{
"kind": "class",
"description": "",
"name": "DialogOpenEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-dialog/rh-dialog.ts"
}
},
{
"kind": "class",
"description": "A dialog displays important information to users without requiring them to navigate away from the page.",
"name": "RhDialog",
"cssProperties": [
{
"name": "--rh-dialog-video-aspect-ratio",
"syntax": "<number>"
},
{
"description": "Sets the dialog close button color.",
"name": "--rh-dialog-close-button-color",
"syntax": "<color>",
"default": "var(--rh-color-icon-secondary-on-dark, #ffffff)"
}
],
"cssParts": [
{
"description": "The dialog overlay which lies under the dialog and above the page body",
"name": "overlay"
},
{
"description": "The dialog element",
"name": "dialog"
},
{
"description": "The container for the dialog content",
"name": "content"
},
{
"description": "The container for the optional dialog header",
"name": "header"
},
{
"description": "The container for the optional dialog description in the header",
"name": "description"
},
{
"description": "The dialog's close button",
"name": "close-button"
},
{
"description": "Actions footer container",
"name": "footer"
}
],
"slots": [
{
"description": "The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the dialog window (to the left of the close button). Otherwise it will appear beneath the header.",
"name": ""
},
{
"description": "The header is an optional slot that appears at the top of the dialog window. It should be a header tag (h2-h6).",
"name": "header"
},
{
"description": "Optional footer content. Good place to put action buttons.",
"name": "footer"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "closeOnOutsideClick",
"type": {
"text": "boolean"
},
"privacy": "protected",
"static": true,
"default": "true"
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "'small' | 'medium' | 'large' | undefined"
},
"description": "The `variant` controls the width of the dialog.\nThere are three options: `small`, `medium` and `large`. The default is `large`.",
"attribute": "variant",
"reflects": true
},
{
"kind": "field",
"name": "position",
"type": {
"text": "'top' | undefined"
},
"description": "`position=\"top\"` aligns the dialog with the top of the page",
"attribute": "position",
"reflects": true
},
{
"kind": "field",
"name": "open",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "open",
"reflects": true
},
{
"kind": "field",
"name": "trigger",
"type": {
"text": "string | undefined"
},
"description": "Optional ID of the trigger element",
"attribute": "trigger"
},
{
"kind": "field",
"name": "type",
"type": {
"text": "'video' | undefined"
},
"attribute": "type",
"reflects": true
},
{
"kind": "field",
"name": "returnValue",
"type": {
"text": "string"
},
"privacy": "public",
"default": "''"
},
{
"kind": "field",
"name": "#screenSize",
"privacy": "private",
"default": "new ScreenSizeController(this)"
},
{
"kind": "field",
"name": "overlay",
"type": {
"text": "HTMLElement | null | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "dialog",
"type": {
"text": "HTMLElement | null | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "closeButton",
"type": {
"text": "HTMLElement | null | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#headerId",
"privacy": "private"
},
{
"kind": "field",
"name": "#triggerElement",
"privacy": "private",
"type": {
"text": "HTMLElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#header",
"privacy": "private",
"type": {
"text": "HTMLElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#body",
"privacy": "private",
"type": {
"text": "Element[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "#headings",
"privacy": "private",
"type": {
"text": "Element[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "#cancelling",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, null, 'header', 'description', 'footer')"
},
{
"kind": "method",
"name": "_init",
"privacy": "protected"
},
{
"kind": "method",
"name": "_openChanged",
"privacy": "protected",
"parameters": [
{
"name": "oldValue",
"optional": true,
"type": {
"text": "boolean"
}
},
{
"name": "newValue",
"optional": true,
"type": {
"text": "boolean"
}
}
]
},
{
"kind": "method",
"name": "_triggerChanged",
"privacy": "protected"
},
{
"kind": "method",
"name": "onTriggerClick",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
]
},
{
"kind": "method",
"name": "onClick",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
]
},
{
"kind": "method",
"name": "onKeydown",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
]
},
{
"kind": "method",
"name": "cancel",
"privacy": "private"
},
{
"kind": "method",
"name": "setTrigger",
"parameters": [
{
"name": "element",
"type": {
"text": "HTMLElement"
}
}
]
},
{
"kind": "method",
"name": "toggle",
"description": "Manually toggles the dialog.\n```js\ndialog.toggle();\n```"
},
{
"kind": "method",
"name": "show",
"description": "Manually opens the dialog.\n```js\ndialog.show();\n```"
},
{
"kind": "method",
"name": "showModal"
},
{
"kind": "method",
"name": "close",
"parameters": [
{
"name": "returnValue",
"optional": true,
"type": {
"text": "string"
}
}
],
"description": "Manually closes the dialog.\n```js\ndialog.close();\n```"
}
],
"events": [
{
"type": {
"text": "DialogOpenEvent"
},
"description": "Fires when a user clicks on the trigger or manually opens a dialog.",
"name": "open"
},
{
"type": {
"text": "DialogCloseEvent"
},
"description": "Fires when either a user clicks on either the close button or the overlay or manually closes a dialog.",
"name": "close"
},
{
"type": {
"text": "DialogCancelEvent"
},
"name": "cancel"
}
],
"attributes": [
{
"name": "variant",
"type": {
"text": "'small' | 'medium' | 'large' | undefined"
},
"description": "The `variant` controls the width of the dialog.\nThere are three options: `small`, `medium` and `large`. The default is `large`.",
"fieldName": "variant"
},
{
"name": "position",
"type": {
"text": "'top' | undefined"
},
"description": "`position=\"top\"` aligns the dialog with the top of the page",
"fieldName": "position"
},
{
"name": "open",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "open"
},
{
"name": "trigger",
"type": {
"text": "string | undefined"
},
"description": "Optional ID of the trigger element",
"fieldName": "trigger"
},
{
"name": "type",
"type": {
"text": "'video' | undefined"
},
"fieldName": "type"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Communicates information requiring user input or action",
"tagName": "rh-dialog",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/dialog/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/rh-dialog.html"
}
},
{
"url": "https://ux.redhat.com/elements/dialog/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/dialog/demo/events/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/events.html"
}
},
{
"url": "https://ux.redhat.com/elements/dialog/demo/lots-of-content/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/lots-of-content.html"
}
},
{
"url": "https://ux.redhat.com/elements/dialog/demo/no-header-content/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/no-header-content.html"
}
},
{
"url": "https://ux.redhat.com/elements/dialog/demo/no-headings/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/no-headings.html"
}
},
{
"url": "https://ux.redhat.com/elements/dialog/demo/video-modal/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-dialog/demo/video-modal.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "DialogCancelEvent",
"declaration": {
"name": "DialogCancelEvent",
"module": "rh-dialog/rh-dialog.js"
}
},
{
"kind": "js",
"name": "DialogCloseEvent",
"declaration": {
"name": "DialogCloseEvent",
"module": "rh-dialog/rh-dialog.js"
}
},
{
"kind": "js",
"name": "DialogOpenEvent",
"declaration": {
"name": "DialogOpenEvent",
"module": "rh-dialog/rh-dialog.js"
}
},
{
"kind": "js",
"name": "RhDialog",
"declaration": {
"name": "RhDialog",
"module": "rh-dialog/rh-dialog.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-dialog",
"declaration": {
"name": "RhDialog",
"module": "rh-dialog/rh-dialog.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-footer-block.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhFooterBlock",
"members": [],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-footer-block",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhFooterBlock",
"declaration": {
"name": "RhFooterBlock",
"module": "rh-footer/rh-footer-block.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-footer-block",
"declaration": {
"name": "RhFooterBlock",
"module": "rh-footer/rh-footer-block.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-footer-copyright.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhFooterCopyright",
"members": [],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-footer-copyright",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhFooterCopyright",
"declaration": {
"name": "RhFooterCopyright",
"module": "rh-footer/rh-footer-copyright.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-footer-copyright",
"declaration": {
"name": "RhFooterCopyright",
"module": "rh-footer/rh-footer-copyright.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-footer-links.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhFooterLinks",
"members": [
{
"kind": "field",
"name": "headerHidden",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Cause the header slot to be visually hidden.\nSetting this to true will not affect `aria-labelledby`.",
"attribute": "header-hidden",
"reflects": true
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.updateAccessibility())"
},
{
"kind": "field",
"name": "slots",
"privacy": "protected",
"default": "new SlotController(this, 'header')"
},
{
"kind": "method",
"name": "updateAccessibility"
}
],
"attributes": [
{
"name": "header-hidden",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Cause the header slot to be visually hidden.\nSetting this to true will not affect `aria-labelledby`.",
"fieldName": "headerHidden"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-footer-links",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhFooterLinks",
"declaration": {
"name": "RhFooterLinks",
"module": "rh-footer/rh-footer-links.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-footer-links",
"declaration": {
"name": "RhFooterLinks",
"module": "rh-footer/rh-footer-links.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-footer-social-link.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhFooterSocialLink",
"members": [
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"attribute": "icon"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
}
],
"attributes": [
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"fieldName": "icon"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-footer-social-link",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhFooterSocialLink",
"declaration": {
"name": "RhFooterSocialLink",
"module": "rh-footer/rh-footer-social-link.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-footer-social-link",
"declaration": {
"name": "RhFooterSocialLink",
"module": "rh-footer/rh-footer-social-link.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-footer-universal.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhFooterUniversal",
"cssParts": [
{
"name": "base"
},
{
"name": "base"
},
{
"name": "logo"
},
{
"name": "logo-image"
},
{
"name": "primary"
},
{
"name": "primary-start"
},
{
"name": "primary-end"
},
{
"name": "secondary"
},
{
"name": "secondary-start"
},
{
"name": "secondary-end"
},
{
"name": "links-primary"
},
{
"name": "links-secondary"
},
{
"name": "tertiary"
}
],
"slots": [
{
"description": "text that describes the footer section to assistive tecchnology. Contains default text \"Red Hat footer\".",
"name": "heading"
},
{
"name": "logo"
},
{
"name": "logo-image"
},
{
"name": "primary"
},
{
"name": "primary-start"
},
{
"name": "primary-end"
},
{
"name": "secondary"
},
{
"name": "secondary-start"
},
{
"name": "secondary-end"
},
{
"name": "links-primary"
},
{
"name": "links-secondary"
},
{
"name": "tertiary"
}
],
"members": [
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette"
},
"default": "'darker'",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(\n this,\n 'primary-start',\n 'primary-end',\n 'secondary-start',\n 'secondary-end',\n 'links-primary',\n 'links-secondary',\n 'tertiary',\n )"
}
],
"attributes": [
{
"name": "color-palette",
"type": {
"text": "ColorPalette"
},
"default": "'darker'",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-footer-universal",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhFooterUniversal",
"declaration": {
"name": "RhFooterUniversal",
"module": "rh-footer/rh-footer-universal.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-footer-universal",
"declaration": {
"name": "RhFooterUniversal",
"module": "rh-footer/rh-footer-universal.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-footer.js",
"declarations": [
{
"kind": "class",
"description": "A footer displays secondary content and legal information to users who reach the bottom of a page.",
"name": "RhFooter",
"cssProperties": [
{
"description": "",
"name": "--rh-footer-icon-color",
"default": "#8a8d90"
},
{
"description": "",
"name": "--rh-footer-icon-color-hover",
"default": "#b8bbbe"
},
{
"description": "",
"name": "--rh-footer-border-color",
"default": "#6a6e73"
},
{
"description": "",
"name": "--rh-footer-accent-color",
"default": "#e00"
},
{
"description": "",
"name": "--rh-footer-section-side-gap",
"default": "16px"
},
{
"description": "",
"name": "--rh-footer-links-gap",
"default": "8px"
},
{
"description": "",
"name": "--rh-footer-link-header-font-size",
"default": "0.875em"
},
{
"description": "",
"name": "--rh-footer-nojs-min-height",
"default": "750px"
}
],
"cssParts": [
{
"description": "main footer element, containing all footer content",
"name": "base"
},
{
"description": "footer header, typically containing main logo and social links",
"name": "header"
},
{
"description": "primary footer header content, e.g. main logo",
"name": "header-primary"
},
{
"description": "secondary footer header content, e.g. social links",
"name": "header-secondary"
},
{
"description": "main page or product logo container",
"name": "logo"
},
{
"description": "social links container `<rh-footer-links>`",
"name": "social-links"
},
{
"description": "main content container.",
"name": "main"
},
{
"description": "container for main footer links",
"name": "main-primary"
},
{
"description": "container for main footer links",
"name": "links"
},
{
"description": "mobile links accordion header element",
"name": "links-accordion-header"
},
{
"description": "mobile links panel container element",
"name": "links-accordion-panel"
},
{
"description": "container fro prose or promotional content",
"name": "main-secondary"
}
],
"slots": [
{
"description": "Overrides everything. Do not use.",
"name": "base"
},
{
"description": "Overrides `header-*`, `logo`, `social-links`",
"name": "header"
},
{
"description": "primary footer header content, e.g. main logo. Overrides `logo`",
"name": "header-primary"
},
{
"description": "secondary footer header content, e.g. social links. Overrides `social-links`",
"name": "header-secondary"
},
{
"description": "text that describes the footer section to assistive tecchnology. Contains default text \"Red Hat footer\".",
"name": "heading"
},
{
"description": "main page or product logo. Defaults to Red Hat corporate logo",
"name": "logo"
},
{
"description": "social media links (icons). Contains a default set of links",
"name": "social-links"
},
{
"description": "main footer content. Overrides `main-*`",
"name": "main"
},
{
"description": "main footer region. typically a columnar grid",
"name": "main-primary"
},
{
"description": "main footer links",
"name": "links"
},
{
"description": "typically contains prose or promotional content",
"name": "main-secondary"
},
{
"description": "must contain `<rh-footer-universal>`",
"name": "global",
"deprecated": "- use `universal`"
},
{
"description": "must contain `<rh-footer-universal>`",
"name": "universal"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "method",
"name": "getImportURL",
"static": true,
"return": {
"type": {
"text": "string | URL"
}
},
"parameters": [
{
"name": "relativeLocation",
"type": {
"text": "string | URL"
}
}
],
"description": "Isomorphic import.meta.url function\nRequires a node.js dom shim that sets window.location"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#compact",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette"
},
"default": "'darker'",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "screenSize",
"privacy": "protected",
"default": "new ScreenSizeController(this, 'md', {\n onChange: matches => {\n this.#compact = !matches;\n },\n })",
"description": "ScreenSizeController effects callback to set #compact is true when viewport\n`(min-width: ${tabletLandscapeBreakpoint})`."
},
{
"kind": "method",
"name": "#renderLinksTemplate",
"parameters": [
{
"name": "isMobile",
"default": "false"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "updateAccessibility",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"description": "Get any `<ul>`s that are in the designated link slots\nand synchronously update each list and header if we need to."
}
],
"attributes": [
{
"name": "color-palette",
"type": {
"text": "ColorPalette"
},
"default": "'darker'",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Displays secondary information at the bottom of a page",
"tagName": "rh-footer",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/footer/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/demo/rh-footer.html"
}
},
{
"url": "https://ux.redhat.com/elements/footer/demo/footer-universal/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/demo/footer-universal.html"
}
},
{
"url": "https://ux.redhat.com/elements/footer/demo/proxy/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-footer/demo/proxy.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhFooterUniversal",
"declaration": {
"name": "RhFooterUniversal",
"module": "./rh-footer-universal.js"
}
},
{
"kind": "js",
"name": "RhFooter",
"declaration": {
"name": "RhFooter",
"module": "rh-footer/rh-footer.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-footer",
"declaration": {
"name": "RhFooter",
"module": "rh-footer/rh-footer.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-footer/rh-global-footer.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhGlobalFooter",
"superclass": {
"name": "RhFooterUniversal",
"module": "/elements/rh-footer/rh-footer-universal.js"
},
"tagName": "rh-global-footer",
"customElement": true,
"attributes": [
{
"name": "color-palette",
"type": {
"text": "ColorPalette"
},
"default": "'darker'",
"fieldName": "colorPalette",
"inheritedFrom": {
"name": "RhFooterUniversal",
"module": "elements/rh-footer/rh-footer-universal.ts"
}
}
],
"members": [
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette"
},
"default": "'darker'",
"attribute": "color-palette",
"reflects": true,
"inheritedFrom": {
"name": "RhFooterUniversal",
"module": "elements/rh-footer/rh-footer-universal.js"
}
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(\n this,\n 'primary-start',\n 'primary-end',\n 'secondary-start',\n 'secondary-end',\n 'links-primary',\n 'links-secondary',\n 'tertiary',\n )",
"inheritedFrom": {
"name": "RhFooterUniversal",
"module": "elements/rh-footer/rh-footer-universal.js"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhGlobalFooter",
"declaration": {
"name": "RhGlobalFooter",
"module": "rh-footer/rh-global-footer.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-global-footer",
"declaration": {
"name": "RhGlobalFooter",
"module": "rh-footer/rh-global-footer.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-menu/rh-menu.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "MenuToggleEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-menu/rh-menu.ts"
}
},
{
"kind": "class",
"description": "Menu",
"name": "RhMenu",
"slots": [
{
"description": "menu items",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "object"
},
"static": true,
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
},
{
"kind": "field",
"name": "_menuItems",
"type": {
"text": "HTMLElement[]"
},
"privacy": "private"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#tabindex",
"privacy": "private",
"default": "new RovingTabindexController<HTMLElement>(this, {\n getItems: () => this._menuItems ?? [],\n })"
},
{
"kind": "field",
"name": "activeItem",
"readonly": true
},
{
"kind": "method",
"name": "#onSlotchange",
"privacy": "private"
},
{
"kind": "method",
"name": "activateItem",
"parameters": [
{
"name": "item",
"type": {
"text": "HTMLElement"
}
}
]
},
{
"kind": "method",
"name": "focus"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-menu",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/menu/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/rh-menu.html"
}
},
{
"url": "https://ux.redhat.com/elements/menu/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/menu/demo/position-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/position-left.html"
}
},
{
"url": "https://ux.redhat.com/elements/menu/demo/position-right/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/position-right.html"
}
},
{
"url": "https://ux.redhat.com/elements/menu/demo/position-top/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-menu/demo/position-top.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "MenuToggleEvent",
"declaration": {
"name": "MenuToggleEvent",
"module": "rh-menu/rh-menu.js"
}
},
{
"kind": "js",
"name": "RhMenu",
"declaration": {
"name": "RhMenu",
"module": "rh-menu/rh-menu.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-menu",
"declaration": {
"name": "RhMenu",
"module": "rh-menu/rh-menu.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SecondaryNavDropdownExpandEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "Upgrades a top level nav link to include dropdown functionality",
"name": "RhNavigationSecondaryDropdown",
"slots": [
{
"description": "Link for dropdown, expects `<a>` element",
"name": "link"
},
{
"description": "Menu for dropdown, expects `<rh-navigation-secondary-menu>` element",
"name": "menu"
}
],
"members": [
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, { slots: ['link', 'menu'] })"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#highlight",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(this.#mutationsCallback.bind(this))"
},
{
"kind": "field",
"name": "_container",
"type": {
"text": "HTMLElement | undefined"
}
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "method",
"name": "_expandedChanged",
"privacy": "protected",
"return": {
"type": {
"text": ""
}
},
"parameters": [
{
"name": "oldVal",
"optional": true,
"type": {
"text": "string"
},
"description": "Boolean value in string form"
},
{
"name": "newVal",
"optional": true,
"type": {
"text": "string"
},
"description": "Boolean value in string form"
}
],
"description": "When expanded property changes, check the new value, if true\nrun the `#open()` method, if false run the `#close()` method."
},
{
"kind": "method",
"name": "_clickHandler",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
],
"description": "When a dropdown is clicked set expanded to the opposite of the expanded property\nand then dispatch that value in a SecondaryNavDropdownExpandEvent"
},
{
"kind": "method",
"name": "#open",
"return": {
"type": {
"text": ""
}
},
"description": "Sets or removes attributes needed to open a dropdown menu",
"privacy": "private"
},
{
"kind": "method",
"name": "#close",
"description": "Sets or removes attributes needed to close a dropdown menu",
"privacy": "private"
},
{
"kind": "method",
"name": "#mutationsCallback",
"return": {
"type": {
"text": "Promise<void>"
}
},
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "SecondaryNavDropdownExpandEvent"
},
"description": "Fires when a dropdown is clicked",
"name": "change"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Upgrades a top level nav link to include dropdown functionality",
"tagName": "rh-navigation-secondary-dropdown",
"customElement": true
},
{
"kind": "class",
"description": "",
"name": "RhSecondaryNavDropdown",
"members": [
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, { slots: ['link', 'menu'] })",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "field",
"name": "#highlight",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(this.#mutationsCallback.bind(this))",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "field",
"name": "_container",
"type": {
"text": "HTMLElement | undefined"
},
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "method",
"name": "_expandedChanged",
"privacy": "protected",
"return": {
"type": {
"text": ""
}
},
"parameters": [
{
"name": "oldVal",
"optional": true,
"type": {
"text": "string"
},
"description": "Boolean value in string form"
},
{
"name": "newVal",
"optional": true,
"type": {
"text": "string"
},
"description": "Boolean value in string form"
}
],
"description": "When expanded property changes, check the new value, if true\nrun the `#open()` method, if false run the `#close()` method.",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "method",
"name": "_clickHandler",
"privacy": "private",
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
],
"description": "When a dropdown is clicked set expanded to the opposite of the expanded property\nand then dispatch that value in a SecondaryNavDropdownExpandEvent",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "method",
"name": "#open",
"return": {
"type": {
"text": ""
}
},
"description": "Sets or removes attributes needed to open a dropdown menu",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "method",
"name": "#close",
"description": "Sets or removes attributes needed to close a dropdown menu",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "method",
"name": "#mutationsCallback",
"return": {
"type": {
"text": "Promise<void>"
}
},
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
}
],
"superclass": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts"
},
"tagName": "rh-secondary-nav-dropdown",
"customElement": true,
"events": [
{
"type": {
"text": "SecondaryNavDropdownExpandEvent"
},
"description": "Fires when a dropdown is clicked",
"name": "change",
"inheritedFrom": {
"name": "RhNavigationSecondaryDropdown",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "SecondaryNavDropdownExpandEvent",
"declaration": {
"name": "SecondaryNavDropdownExpandEvent",
"module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "js",
"name": "RhNavigationSecondaryDropdown",
"declaration": {
"name": "RhNavigationSecondaryDropdown",
"module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-navigation-secondary-dropdown",
"declaration": {
"name": "RhNavigationSecondaryDropdown",
"module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-secondary-nav-dropdown",
"declaration": {
"name": "RhSecondaryNavDropdown",
"module": "rh-navigation-secondary/rh-navigation-secondary-dropdown.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js",
"declarations": [
{
"kind": "class",
"description": "A menu section which auto upgrades accessibility for headers and sibling list",
"name": "RhNavigationSecondaryMenuSection",
"cssParts": [
{
"description": "container, <section> element",
"name": "container"
}
],
"slots": [
{
"description": "Adds a header tag to section, expects `<h1> | <h2> | <h3> | <h4> | <h5> | <h6>` element",
"name": "header"
},
{
"description": "Adds a ul tag to section, expects `<ul> | <ol>` element",
"name": "links"
},
{
"description": "Adds a section level CTA, expects `<rh-cta>` element",
"name": "cta"
}
],
"members": [
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "method",
"name": "#updateAccessibility",
"description": "Finds all list elements `<ul>, <ol>` and if the list does not have an\n`aria-labelledby` attribute finds the previousElementSibling header\n`<h1-6>` tags if available assigns an id or uses preexisting id\nto that header, then uses that id to the list on the `aria-labelledby`.",
"privacy": "private"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "'A menu section which auto upgrades accessibility for headers and sibling list'",
"tagName": "rh-navigation-secondary-menu-section",
"customElement": true
},
{
"kind": "class",
"description": "",
"name": "RhSecondaryNavMenuSection",
"members": [
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenuSection",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js"
}
},
{
"kind": "method",
"name": "#updateAccessibility",
"description": "Finds all list elements `<ul>, <ol>` and if the list does not have an\n`aria-labelledby` attribute finds the previousElementSibling header\n`<h1-6>` tags if available assigns an id or uses preexisting id\nto that header, then uses that id to the list on the `aria-labelledby`.",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenuSection",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js"
}
}
],
"superclass": {
"name": "RhNavigationSecondaryMenuSection",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.ts"
},
"tagName": "rh-secondary-nav-menu-section",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhNavigationSecondaryMenuSection",
"declaration": {
"name": "RhNavigationSecondaryMenuSection",
"module": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-navigation-secondary-menu-section",
"declaration": {
"name": "RhNavigationSecondaryMenuSection",
"module": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-secondary-nav-menu-section",
"declaration": {
"name": "RhSecondaryNavMenuSection",
"module": "rh-navigation-secondary/rh-navigation-secondary-menu-section.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-navigation-secondary/rh-navigation-secondary-menu.js",
"declarations": [
{
"kind": "class",
"description": "Dropdown menu for secondary nav, available in full-width and fixed-with sizes",
"name": "RhNavigationSecondaryMenu",
"cssProperties": [
{
"description": "grid-template-columns for menu sections",
"name": "--rh-navigation-secondary-menu-section-grid",
"default": "repeat(auto-fit, minmax(15.5rem, 1fr))"
},
{
"description": "grid-gap for menu sections",
"name": "--rh-navigation-secondary-menu-section-grid-gap",
"syntax": "<length>",
"default": "32px"
},
{
"description": "max-width for menu content",
"name": "--rh-navigation-secondary-menu-content-max-width",
"syntax": "<length>",
"default": "1136px"
}
],
"cssParts": [
{
"description": "container - `<div>` element, wrapper for menus",
"name": "container"
},
{
"description": "container - `<div>` element, wrapper for full-width menus",
"name": "full-width"
},
{
"description": "container - `<div>` element, wrapper for fixed-width menus",
"name": "fixed-width"
},
{
"description": "container - `<div>` element, wrapper for menu sections",
"name": "sections"
}
],
"slots": [
{
"description": "Optional `<rh-navigation-secondary-menu-section>` elements or content following [design guidelines](../guidelines/#expandable-tray)",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette"
},
"default": "'lightest'",
"description": "Color palette (default: lightest)\nSecondary nav menus are always represented on the lightest color palette.",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "layout",
"type": {
"text": "'fixed-width' | 'full-width'"
},
"default": "'full-width'",
"description": "Layout (default: full-width)\nSecondary nav menus by default are always full-width, but can be set to fixed-width for special cases.",
"attribute": "layout",
"reflects": true
},
{
"kind": "field",
"name": "#screenSize",
"privacy": "private",
"default": "new ScreenSizeController(this)"
},
{
"kind": "field",
"name": "visible",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`visible` toggles on click (default: false)",
"attribute": "visible"
}
],
"attributes": [
{
"name": "color-palette",
"type": {
"text": "ColorPalette"
},
"default": "'lightest'",
"description": "Color palette (default: lightest)\nSecondary nav menus are always represented on the lightest color palette.",
"fieldName": "colorPalette"
},
{
"name": "layout",
"type": {
"text": "'fixed-width' | 'full-width'"
},
"default": "'full-width'",
"description": "Layout (default: full-width)\nSecondary nav menus by default are always full-width, but can be set to fixed-width for special cases.",
"fieldName": "layout"
},
{
"name": "visible",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`visible` toggles on click (default: false)",
"fieldName": "visible"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "'Dropdown menu for secondary nav, available in full-width and fixed-with sizes'",
"tagName": "rh-navigation-secondary-menu",
"customElement": true
},
{
"kind": "class",
"description": "",
"name": "RhSecondaryNavMenu",
"members": [
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette"
},
"default": "'lightest'",
"description": "Color palette (default: lightest)\nSecondary nav menus are always represented on the lightest color palette.",
"attribute": "color-palette",
"reflects": true,
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
},
{
"kind": "field",
"name": "layout",
"type": {
"text": "'fixed-width' | 'full-width'"
},
"default": "'full-width'",
"description": "Layout (default: full-width)\nSecondary nav menus by default are always full-width, but can be set to fixed-width for special cases.",
"attribute": "layout",
"reflects": true,
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
},
{
"kind": "field",
"name": "#screenSize",
"privacy": "private",
"default": "new ScreenSizeController(this)",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
},
{
"kind": "field",
"name": "visible",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`visible` toggles on click (default: false)",
"attribute": "visible",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
}
],
"superclass": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.ts"
},
"tagName": "rh-secondary-nav-menu",
"customElement": true,
"attributes": [
{
"name": "color-palette",
"type": {
"text": "ColorPalette"
},
"default": "'lightest'",
"description": "Color palette (default: lightest)\nSecondary nav menus are always represented on the lightest color palette.",
"fieldName": "colorPalette",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.ts"
}
},
{
"name": "layout",
"type": {
"text": "'fixed-width' | 'full-width'"
},
"default": "'full-width'",
"description": "Layout (default: full-width)\nSecondary nav menus by default are always full-width, but can be set to fixed-width for special cases.",
"fieldName": "layout",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.ts"
}
},
{
"name": "visible",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`visible` toggles on click (default: false)",
"fieldName": "visible",
"inheritedFrom": {
"name": "RhNavigationSecondaryMenu",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary-menu.ts"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhNavigationSecondaryMenu",
"declaration": {
"name": "RhNavigationSecondaryMenu",
"module": "rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-navigation-secondary-menu",
"declaration": {
"name": "RhNavigationSecondaryMenu",
"module": "rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-secondary-nav-menu",
"declaration": {
"name": "RhSecondaryNavMenu",
"module": "rh-navigation-secondary/rh-navigation-secondary-menu.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-navigation-secondary/rh-navigation-secondary-overlay.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RhNavigationSecondaryOverlay",
"members": [
{
"kind": "field",
"name": "open",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "open",
"reflects": true
}
],
"attributes": [
{
"name": "open",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "open"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "An overlay element to cover content with an opacity when navigation is expanded.",
"tagName": "rh-navigation-secondary-overlay",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhNavigationSecondaryOverlay",
"declaration": {
"name": "RhNavigationSecondaryOverlay",
"module": "rh-navigation-secondary/rh-navigation-secondary-overlay.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-navigation-secondary-overlay",
"declaration": {
"name": "RhNavigationSecondaryOverlay",
"module": "rh-navigation-secondary/rh-navigation-secondary-overlay.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-navigation-secondary/rh-navigation-secondary.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SecondaryNavOverlayChangeEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "The Secondary navigation is used to connect a series of pages together. It displays wayfinding content and links relevant to the page it is placed on. It should be used in conjunction with the [primary navigation](../navigation-primary).",
"name": "RhNavigationSecondary",
"cssProperties": [
{
"description": "z-index of the navigation-secondary",
"name": "--rh-navigation-secondary-z-index",
"syntax": "<integer>",
"default": "102"
},
{
"description": "z-index of the navigation-secondary-overlay",
"name": "--rh-navigation-secondary-overlay-z-index",
"syntax": "<integer>",
"default": "-1"
}
],
"cssParts": [
{
"description": "container, `<nav>` element",
"name": "nav"
},
{
"description": "container, `<div>` element",
"name": "container"
},
{
"description": "container, `<div>` element",
"name": "cta"
}
],
"slots": [
{
"description": "Logo added to the main nav bar, expects `<a>Text</a> | <a><svg/></a> | <a><img/></a>` element",
"name": "logo"
},
{
"description": "Navigation list added to the main nav bar, expects `<ul>` element",
"name": "nav"
},
{
"description": "Nav bar level CTA, expects `<rh-cta>` element",
"name": "cta"
},
{
"description": "Text label for the mobile menu button, for l10n. Defaults to \"Menu\"",
"name": "mobile-menu"
}
],
"members": [
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "NavPalette"
},
"default": "'lighter'",
"description": "Color palette darker | lighter (default: lighter)",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "_nav",
"type": {
"text": "HTMLElement[] | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#logoCopy",
"privacy": "private",
"type": {
"text": "HTMLElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#label",
"privacy": "private",
"type": {
"text": "string"
},
"default": "'secondary'",
"description": "The accessible label for the <nav> element"
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)",
"description": "Is the element in an RTL context?"
},
{
"kind": "field",
"name": "#compact",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Compact mode"
},
{
"kind": "field",
"name": "#tabindex",
"privacy": "private",
"default": "new RovingTabindexController(this, {\n getItems: () => this._nav?.flatMap(slotted =>\n Array.from(slotted.querySelectorAll<HTMLAnchorElement>(`:is(rh-navigation-secondary-dropdown,\n rh-secondary-nav-dropdown) > a,\n [slot=\"nav\"] > li > a`))) ?? [],\n })"
},
{
"kind": "field",
"name": "mobileMenuExpanded",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false",
"description": "`mobileMenuExpanded` property is toggled when the mobile menu button is clicked,\na focusout event occurs, or on an overlay click event. It also switches state\nwhen the viewport changes breakpoints depending on if a dropdown is open or not."
},
{
"kind": "field",
"name": "overlayOpen",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "#screenSize",
"privacy": "private",
"default": "new ScreenSizeController(this, 'md', {\n onChange: matches => {\n this.#compact = !matches;\n const dropdownsOpen = this.#allDropdowns().some(x => x.expanded);\n this.mobileMenuExpanded = this.#compact && dropdownsOpen;\n this.overlayOpen = dropdownsOpen;\n },\n })",
"description": "ScreenSizeController effects callback to set #compact\nWhen viewport size changes,\n- If viewport is mobile, open mobile menu\n- otherwise, close mobile menu and close overlay"
},
{
"kind": "method",
"name": "isDropdown",
"static": true,
"return": {
"type": {
"text": "element is RhNavigationSecondaryDropdown"
}
},
"parameters": [
{
"name": "element",
"type": {
"text": "Element | null"
},
"description": "possibly an rh-navigation-secondary-dropdown"
}
],
"description": "Checks if passed in element is a RhNavigationSecondaryDropdown"
},
{
"kind": "method",
"name": "#onExpandRequest",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
},
"description": "when a dropdown tries to expand"
}
],
"description": "When dropdown event is triggered gets dropdown index that triggered\nevent then closes all dropdowns.\nIf the event is to open a dropdown, run #expand(index)\nIf isMobile is set dispatch an SecondaryNavOverlayChangeEvent event\nto open the overlay",
"privacy": "private"
},
{
"kind": "method",
"name": "#onFocusout",
"parameters": [
{
"name": "event",
"type": {
"text": "FocusEvent"
},
"description": "focus"
}
],
"description": "Handles when focus changes outside of the navigation\nIf _compact is set, close the mobileMenu\nCloses all dropdowns and toggles overlay to closed",
"privacy": "private"
},
{
"kind": "method",
"name": "#onOverlayClick",
"description": "Handles when the overlay receives a click event\nCloses all dropdowns and toggles overlay to closed\nIf _compact then closes mobile menu to closed",
"privacy": "private"
},
{
"kind": "method",
"name": "#onKeydown",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
},
"description": "keydown"
}
],
"description": "Closes dropdown menu on keydown, then places\nfocus on last button clicked",
"privacy": "private"
},
{
"kind": "method",
"name": "#onTabEvent",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#getDropdownIndex",
"return": {
"type": {
"text": "void | number"
}
},
"parameters": [
{
"name": "element",
"type": {
"text": "Element | null"
},
"description": "dropdown element"
}
],
"description": "Gets all dropdowns and finds the element given and returns its index",
"privacy": "private"
},
{
"kind": "method",
"name": "#dropdownByIndex",
"return": {
"type": {
"text": "void | RhNavigationSecondaryDropdown"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "of the dropdown"
}
],
"description": "Gets all dropdowns and returns the dropdown given an index",
"privacy": "private"
},
{
"kind": "method",
"name": "#expand",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "to expand"
}
],
"description": "Opens a dropdown given an index",
"privacy": "private"
},
{
"kind": "method",
"name": "#allDropdowns",
"return": {
"type": {
"text": "RhNavigationSecondaryDropdown[]"
}
},
"description": "Gets all dropdowns",
"privacy": "private"
},
{
"kind": "method",
"name": "#closeDropdown",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "dropdown",
"type": {
"text": "RhNavigationSecondaryDropdown"
},
"description": "to close"
}
],
"description": "Sets property expanded=false on dropdown given",
"privacy": "private"
},
{
"kind": "method",
"name": "#openDropdown",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "dropdown",
"type": {
"text": "RhNavigationSecondaryDropdown"
},
"description": "to open"
}
],
"description": "Sets property expanded=true on dropdown given",
"privacy": "private"
},
{
"kind": "method",
"name": "#onOverlayChange",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
},
"description": "secondary nav overlay change event"
}
],
"description": "Toggles the overlay triggered by eventListener",
"privacy": "private"
},
{
"kind": "method",
"name": "#upgradeAccessibility",
"return": {
"type": {
"text": "void"
}
},
"description": "Upgrades the aria attributes on upgrade",
"privacy": "private"
},
{
"kind": "method",
"name": "#toggleMobileMenu",
"description": "Toggles the mobile menu from `@click` of the _mobileMenuButton",
"privacy": "private"
},
{
"kind": "method",
"name": "open",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "index of the dropdown to open"
}
],
"description": "Opens a specific dropdown based on index.\nCloses all open dropdowns before opening specified.\nToggles overlay to open"
},
{
"kind": "method",
"name": "close",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"description": "Closes all open dropdowns"
}
],
"events": [
{
"type": {
"text": "SecondaryNavOverlayChangeEvent"
},
"description": "Fires when an dropdown is opened or closed in desktop view or when the mobile menu button is toggled in mobile view.",
"name": "overlay-change"
}
],
"attributes": [
{
"name": "color-palette",
"type": {
"text": "NavPalette"
},
"default": "'lighter'",
"description": "Color palette darker | lighter (default: lighter)",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Propagates related content across a series of pages",
"tagName": "rh-navigation-secondary",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/rh-navigation-secondary.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/analytics/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/analytics.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/current-page-indicator/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/current-page-indicator.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/dark-variant/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/dark-variant.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/deprecated/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/deprecated.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/long-logo-text/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/long-logo-text.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/proxy/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/proxy.html"
}
},
{
"url": "https://ux.redhat.com/elements/navigation-secondary/demo/translation/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-navigation-secondary/demo/translation.html"
}
}
]
},
{
"kind": "class",
"description": "",
"name": "RhSecondaryNav",
"members": [
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "NavPalette"
},
"default": "'lighter'",
"description": "Color palette darker | lighter (default: lighter)",
"attribute": "color-palette",
"reflects": true,
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "_nav",
"type": {
"text": "HTMLElement[] | undefined"
},
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "#logoCopy",
"privacy": "private",
"type": {
"text": "HTMLElement | null"
},
"default": "null",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "#label",
"privacy": "private",
"type": {
"text": "string"
},
"default": "'secondary'",
"description": "The accessible label for the <nav> element",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)",
"description": "Is the element in an RTL context?",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "#compact",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Compact mode",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "#tabindex",
"privacy": "private",
"default": "new RovingTabindexController(this, {\n getItems: () => this._nav?.flatMap(slotted =>\n Array.from(slotted.querySelectorAll<HTMLAnchorElement>(`:is(rh-navigation-secondary-dropdown,\n rh-secondary-nav-dropdown) > a,\n [slot=\"nav\"] > li > a`))) ?? [],\n })",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "mobileMenuExpanded",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false",
"description": "`mobileMenuExpanded` property is toggled when the mobile menu button is clicked,\na focusout event occurs, or on an overlay click event. It also switches state\nwhen the viewport changes breakpoints depending on if a dropdown is open or not.",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "overlayOpen",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "field",
"name": "#screenSize",
"privacy": "private",
"default": "new ScreenSizeController(this, 'md', {\n onChange: matches => {\n this.#compact = !matches;\n const dropdownsOpen = this.#allDropdowns().some(x => x.expanded);\n this.mobileMenuExpanded = this.#compact && dropdownsOpen;\n this.overlayOpen = dropdownsOpen;\n },\n })",
"description": "ScreenSizeController effects callback to set #compact\nWhen viewport size changes,\n- If viewport is mobile, open mobile menu\n- otherwise, close mobile menu and close overlay",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "isDropdown",
"static": true,
"return": {
"type": {
"text": "element is RhNavigationSecondaryDropdown"
}
},
"parameters": [
{
"name": "element",
"type": {
"text": "Element | null"
},
"description": "possibly an rh-navigation-secondary-dropdown"
}
],
"description": "Checks if passed in element is a RhNavigationSecondaryDropdown",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#onExpandRequest",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
},
"description": "when a dropdown tries to expand"
}
],
"description": "When dropdown event is triggered gets dropdown index that triggered\nevent then closes all dropdowns.\nIf the event is to open a dropdown, run #expand(index)\nIf isMobile is set dispatch an SecondaryNavOverlayChangeEvent event\nto open the overlay",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#onFocusout",
"parameters": [
{
"name": "event",
"type": {
"text": "FocusEvent"
},
"description": "focus"
}
],
"description": "Handles when focus changes outside of the navigation\nIf _compact is set, close the mobileMenu\nCloses all dropdowns and toggles overlay to closed",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#onOverlayClick",
"description": "Handles when the overlay receives a click event\nCloses all dropdowns and toggles overlay to closed\nIf _compact then closes mobile menu to closed",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#onKeydown",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
},
"description": "keydown"
}
],
"description": "Closes dropdown menu on keydown, then places\nfocus on last button clicked",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#onTabEvent",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
}
}
],
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#getDropdownIndex",
"return": {
"type": {
"text": "void | number"
}
},
"parameters": [
{
"name": "element",
"type": {
"text": "Element | null"
},
"description": "dropdown element"
}
],
"description": "Gets all dropdowns and finds the element given and returns its index",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#dropdownByIndex",
"return": {
"type": {
"text": "void | RhNavigationSecondaryDropdown"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "of the dropdown"
}
],
"description": "Gets all dropdowns and returns the dropdown given an index",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#expand",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "to expand"
}
],
"description": "Opens a dropdown given an index",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#allDropdowns",
"return": {
"type": {
"text": "RhNavigationSecondaryDropdown[]"
}
},
"description": "Gets all dropdowns",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#closeDropdown",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "dropdown",
"type": {
"text": "RhNavigationSecondaryDropdown"
},
"description": "to close"
}
],
"description": "Sets property expanded=false on dropdown given",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#openDropdown",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "dropdown",
"type": {
"text": "RhNavigationSecondaryDropdown"
},
"description": "to open"
}
],
"description": "Sets property expanded=true on dropdown given",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#onOverlayChange",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
},
"description": "secondary nav overlay change event"
}
],
"description": "Toggles the overlay triggered by eventListener",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#upgradeAccessibility",
"return": {
"type": {
"text": "void"
}
},
"description": "Upgrades the aria attributes on upgrade",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "#toggleMobileMenu",
"description": "Toggles the mobile menu from `@click` of the _mobileMenuButton",
"privacy": "private",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "open",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "index of the dropdown to open"
}
],
"description": "Opens a specific dropdown based on index.\nCloses all open dropdowns before opening specified.\nToggles overlay to open",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "method",
"name": "close",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"description": "Closes all open dropdowns",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.js"
}
}
],
"superclass": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.ts"
},
"tagName": "rh-secondary-nav",
"customElement": true,
"attributes": [
{
"name": "color-palette",
"type": {
"text": "NavPalette"
},
"default": "'lighter'",
"description": "Color palette darker | lighter (default: lighter)",
"fieldName": "colorPalette",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.ts"
}
}
],
"events": [
{
"type": {
"text": "SecondaryNavOverlayChangeEvent"
},
"description": "Fires when an dropdown is opened or closed in desktop view or when the mobile menu button is toggled in mobile view.",
"name": "overlay-change",
"inheritedFrom": {
"name": "RhNavigationSecondary",
"module": "elements/rh-navigation-secondary/rh-navigation-secondary.ts"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "SecondaryNavOverlayChangeEvent",
"declaration": {
"name": "SecondaryNavOverlayChangeEvent",
"module": "rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "js",
"name": "RhNavigationSecondary",
"declaration": {
"name": "RhNavigationSecondary",
"module": "rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-navigation-secondary",
"declaration": {
"name": "RhNavigationSecondary",
"module": "rh-navigation-secondary/rh-navigation-secondary.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-secondary-nav",
"declaration": {
"name": "RhSecondaryNav",
"module": "rh-navigation-secondary/rh-navigation-secondary.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-pagination/rh-pagination.js",
"declarations": [
{
"kind": "class",
"description": "A paginator allows users to navigate between pages of related content.",
"name": "RhPagination",
"cssProperties": [
{
"description": "Sets the outline color when the page input has focus.",
"name": "--rh-pagination-accent-color",
"syntax": "<color>",
"default": "var(--rh-color-interactive-blue, #0066cc)"
},
{
"description": "Sets the disabled stepper color.",
"name": "--rh-pagination-background-focused",
"syntax": "<color>",
"default": "var(--rh-color-gray-20, #c7c7c7)"
},
{
"description": "Sets the stepper color.",
"name": "--rh-pagination-stepper-color",
"syntax": "<color>",
"default": "var(--rh-color-icon-subtle, #707070)"
}
],
"slots": [
{
"description": "An ordered list of links",
"name": ""
},
{
"description": "\"Go to page\" text",
"name": "go-to-page"
},
{
"description": "\"of\" text",
"name": "out-of"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "overflow",
"type": {
"text": "'start' | 'end' | 'both' | null"
},
"default": "null",
"description": "Override `overflow` values set from HTML or JS.\n`overflow` should ideally be private, but because\nwe can't do `::slotted(nav ol li)`, we need to reflect\nit to a host attribute, so that lightdom CSS can target\nthe list items.",
"attribute": "overflow",
"reflects": true
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"default": "'Page navigation'",
"description": "Accessible label for the 'nav' element",
"attribute": "label"
},
{
"kind": "field",
"name": "labelFirst",
"type": {
"text": "string"
},
"default": "'first page'",
"description": "Accessible label for the 'first page' button",
"attribute": "label-first"
},
{
"kind": "field",
"name": "labelPrevious",
"type": {
"text": "string"
},
"default": "'previous page'",
"description": "Accessible label for the 'previous page' button",
"attribute": "label-previous"
},
{
"kind": "field",
"name": "labelNext",
"type": {
"text": "string"
},
"default": "'next page'",
"description": "Accessible label for the 'next page' button",
"attribute": "label-next"
},
{
"kind": "field",
"name": "labelLast",
"type": {
"text": "string"
},
"default": "'last page'",
"description": "Accessible label for the 'last page' button",
"attribute": "label-last"
},
{
"kind": "field",
"name": "input",
"type": {
"text": "HTMLInputElement | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.#update())"
},
{
"kind": "field",
"name": "#screen",
"privacy": "private",
"default": "new ScreenSizeController(this)"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#ol",
"privacy": "private"
},
{
"kind": "field",
"name": "#links",
"privacy": "private"
},
{
"kind": "field",
"name": "#firstLink",
"privacy": "private",
"type": {
"text": "HTMLAnchorElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#lastLink",
"privacy": "private",
"type": {
"text": "HTMLAnchorElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#nextLink",
"privacy": "private",
"type": {
"text": "HTMLAnchorElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#prevLink",
"privacy": "private",
"type": {
"text": "HTMLAnchorElement | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#currentLink",
"privacy": "private"
},
{
"kind": "field",
"name": "#currentIndex",
"privacy": "private",
"type": {
"text": "number"
},
"default": "0"
},
{
"kind": "field",
"name": "#currentPage",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "#update",
"privacy": "private"
},
{
"kind": "method",
"name": "#getOverflow",
"return": {
"type": {
"text": "'start' | 'end' | 'both' | null"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#getCurrentLink",
"return": {
"type": {
"text": "HTMLAnchorElement | null"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#updateLightDOMRefs",
"return": {
"type": {
"text": "void"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#checkValidity",
"return": {
"type": {
"text": "boolean"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#go",
"parameters": [
{
"name": "id",
"type": {
"text": "'first' | 'prev' | 'next' | 'last' | number"
}
}
],
"description": "1. Normalize the element state\n2. validate and act on the input\n3. update the element in case a full browser navigation was prevented (e.g. SPA routing)",
"privacy": "private"
},
{
"kind": "method",
"name": "#onKeyup",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onChange",
"privacy": "private"
},
{
"kind": "method",
"name": "first",
"description": "Navigate to the first page"
},
{
"kind": "method",
"name": "prev",
"description": "Navigate to the previous page"
},
{
"kind": "method",
"name": "next",
"description": "Navigate to the next page"
},
{
"kind": "method",
"name": "last",
"description": "Navigate to the last page"
},
{
"kind": "method",
"name": "go",
"parameters": [
{
"name": "page",
"type": {
"text": "'first' | 'prev' | 'next' | 'last' | number"
}
}
],
"description": "Navigate to a specific page"
}
],
"attributes": [
{
"name": "overflow",
"type": {
"text": "'start' | 'end' | 'both' | null"
},
"default": "null",
"description": "Override `overflow` values set from HTML or JS.\n`overflow` should ideally be private, but because\nwe can't do `::slotted(nav ol li)`, we need to reflect\nit to a host attribute, so that lightdom CSS can target\nthe list items.",
"fieldName": "overflow"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "'Page navigation'",
"description": "Accessible label for the 'nav' element",
"fieldName": "label"
},
{
"name": "label-first",
"type": {
"text": "string"
},
"default": "'first page'",
"description": "Accessible label for the 'first page' button",
"fieldName": "labelFirst"
},
{
"name": "label-previous",
"type": {
"text": "string"
},
"default": "'previous page'",
"description": "Accessible label for the 'previous page' button",
"fieldName": "labelPrevious"
},
{
"name": "label-next",
"type": {
"text": "string"
},
"default": "'next page'",
"description": "Accessible label for the 'next page' button",
"fieldName": "labelNext"
},
{
"name": "label-last",
"type": {
"text": "string"
},
"default": "'last page'",
"description": "Accessible label for the 'last page' button",
"fieldName": "labelLast"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Allows users to navigate content divided into pages",
"tagName": "rh-pagination",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/pagination/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/rh-pagination.html"
}
},
{
"url": "https://ux.redhat.com/elements/pagination/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/pagination/demo/many-pages/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/many-pages.html"
}
},
{
"url": "https://ux.redhat.com/elements/pagination/demo/no-numeric-control/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/no-numeric-control.html"
}
},
{
"url": "https://ux.redhat.com/elements/pagination/demo/overflow/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/overflow.html"
}
},
{
"url": "https://ux.redhat.com/elements/pagination/demo/right-to-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-pagination/demo/right-to-left.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhPagination",
"declaration": {
"name": "RhPagination",
"module": "rh-pagination/rh-pagination.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-pagination",
"declaration": {
"name": "RhPagination",
"module": "rh-pagination/rh-pagination.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-site-status/rh-site-status.js",
"declarations": [
{
"kind": "class",
"description": "Website status communicates the operational status of a website or domain using a status icon and\nlink. It is usually located in the Footer component.",
"name": "RhSiteStatus",
"slots": [
{
"description": "Text to display while loading the status defaults to \"Loading\"",
"name": "loading-text"
}
],
"members": [
{
"kind": "field",
"name": "dataURI",
"privacy": "private",
"static": true,
"default": "'https://status.redhat.com/index.json'",
"type": {
"text": "'https://status.redhat.com/index.json'"
}
},
{
"kind": "field",
"name": "fetchOptions",
"type": {
"text": "RequestInit"
},
"privacy": "private",
"static": true,
"default": "{\n mode: 'cors',\n cache: 'no-cache',\n headers: {\n Accept: 'application/json',\n },\n }"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "#status",
"privacy": "private",
"type": {
"text": "Status | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#component",
"privacy": "private",
"type": {
"text": "Component | null"
},
"default": "null"
},
{
"kind": "field",
"name": "#loading",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "true"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#domain",
"privacy": "private"
},
{
"kind": "field",
"name": "__TESTING_ONLY_DONT_USE_OR_WELL_TELL_YOUR_BOSS__domain__",
"privacy": "private",
"description": "secret testing-only domain override"
},
{
"kind": "field",
"name": "#icon",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#text",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "#fetch",
"privacy": "private"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Communicates operational status of a website or domain",
"tagName": "rh-site-status",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/site-status/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/rh-site-status.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/domains/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/domains.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/loading/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/loading.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/status-404/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-404.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/status-critical/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-critical.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/status-major/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-major.html"
}
},
{
"url": "https://ux.redhat.com/elements/site-status/demo/status-minor/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-site-status/demo/status-minor.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhSiteStatus",
"declaration": {
"name": "RhSiteStatus",
"module": "rh-site-status/rh-site-status.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-site-status",
"declaration": {
"name": "RhSiteStatus",
"module": "rh-site-status/rh-site-status.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-skip-link/rh-skip-link.js",
"declarations": [
{
"kind": "class",
"description": "A skip link is used to skip repetitive content on a page.\nIt is hidden by default and can be activated by hitting\nthe \"Tab\" key after loading/refreshing a page.",
"name": "RhSkipLink",
"slots": [
{
"description": "Place an anchor tag with an `href` that targets an ID of the main content on the page.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "object"
},
"static": true,
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Skip to the main content of a page",
"tagName": "rh-skip-link",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/skip-link/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-skip-link/demo/rh-skip-link.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhSkipLink",
"declaration": {
"name": "RhSkipLink",
"module": "rh-skip-link/rh-skip-link.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-skip-link",
"declaration": {
"name": "RhSkipLink",
"module": "rh-skip-link/rh-skip-link.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-spinner/rh-spinner.js",
"declarations": [
{
"kind": "class",
"description": "A spinner indicates that an action is in progress.\nIt appears as an animated circle over the section that is loading,\nand it may include a text label",
"name": "RhSpinner",
"slots": [
{
"description": "Optional text label below the animated circle.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "size",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"default": "'lg'",
"description": "Preset sizes for the spinner",
"attribute": "size",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "string | undefined"
},
"attribute": "color-palette"
}
],
"attributes": [
{
"name": "size",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"default": "'lg'",
"description": "Preset sizes for the spinner",
"fieldName": "size"
},
{
"name": "color-palette",
"type": {
"text": "string | undefined"
},
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Notifies users their action is being processed or loaded",
"tagName": "rh-spinner",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/spinner/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/rh-spinner.html"
}
},
{
"url": "https://ux.redhat.com/elements/spinner/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/spinner/demo/size-medium/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/size-medium.html"
}
},
{
"url": "https://ux.redhat.com/elements/spinner/demo/size-small/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/size-small.html"
}
},
{
"url": "https://ux.redhat.com/elements/spinner/demo/with-text-label/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-spinner/demo/with-text-label.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhSpinner",
"declaration": {
"name": "RhSpinner",
"module": "rh-spinner/rh-spinner.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-spinner",
"declaration": {
"name": "RhSpinner",
"module": "rh-spinner/rh-spinner.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-stat/rh-stat.js",
"declarations": [
{
"kind": "class",
"description": "A statistic showcases a data point or quick fact visually.",
"name": "RhStat",
"cssProperties": [
{
"name": "--pf-icon--size"
}
],
"slots": [
{
"description": "Optional icon",
"name": "icon"
},
{
"description": "Statistic title",
"name": "title"
},
{
"description": "Statistic data",
"name": "statistic"
},
{
"description": "Call to action",
"name": "cta"
},
{
"description": "Description of the stat",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "The icon to display in the statistic",
"attribute": "icon",
"reflects": true
},
{
"kind": "field",
"name": "top",
"type": {
"text": "'default' | 'statistic'"
},
"default": "'default'",
"description": "Whether the title or statistic should be displayed on top in the statistic",
"attribute": "top",
"reflects": true
},
{
"kind": "field",
"name": "size",
"type": {
"text": "'default' | 'large'"
},
"default": "'default'",
"description": "The size of the statistic",
"attribute": "size",
"reflects": true
},
{
"kind": "field",
"name": "isMobile",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether the statistic is in a mobile view or not for styling",
"attribute": "is-mobile",
"reflects": true
},
{
"kind": "field",
"name": "#screenSize",
"privacy": "private",
"default": "new ScreenSizeController(this)"
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, null, 'icon', 'title', 'statistic', 'cta')"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.#onMutation())"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "method",
"name": "#updateIcons",
"return": {
"type": {
"text": "void"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#onMutation",
"privacy": "private"
}
],
"attributes": [
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "The icon to display in the statistic",
"fieldName": "icon"
},
{
"name": "top",
"type": {
"text": "'default' | 'statistic'"
},
"default": "'default'",
"description": "Whether the title or statistic should be displayed on top in the statistic",
"fieldName": "top"
},
{
"name": "size",
"type": {
"text": "'default' | 'large'"
},
"default": "'default'",
"description": "The size of the statistic",
"fieldName": "size"
},
{
"name": "is-mobile",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether the statistic is in a mobile view or not for styling",
"fieldName": "isMobile"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Showcases a data point or quick fact visually",
"tagName": "rh-stat",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/statistic/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/rh-stat.html"
}
},
{
"url": "https://ux.redhat.com/elements/statistic/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/statistic/demo/icon-slot/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/icon-slot.html"
}
},
{
"url": "https://ux.redhat.com/elements/statistic/demo/icon-svg/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/icon-svg.html"
}
},
{
"url": "https://ux.redhat.com/elements/statistic/demo/icon/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/icon.html"
}
},
{
"url": "https://ux.redhat.com/elements/statistic/demo/large/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/large.html"
}
},
{
"url": "https://ux.redhat.com/elements/statistic/demo/slotted-content/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-stat/demo/slotted-content.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhStat",
"declaration": {
"name": "RhStat",
"module": "rh-stat/rh-stat.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-stat",
"declaration": {
"name": "RhStat",
"module": "rh-stat/rh-stat.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-surface/rh-surface.js",
"declarations": [
{
"kind": "class",
"description": "Surfaces are content containers with a color palette which provide a theme\n(i.e. a background color as well as accessible font colors) to their child\nelements. Use surface only when other containers like card or accordion\nare inappropriate.",
"name": "RhSurface",
"slots": [
{
"description": "The `<rh-surface>` element has a single anonymous slot which accepts any content and does not provide additional layout styling",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "method",
"name": "#onSlotchange",
"privacy": "private"
}
],
"attributes": [
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-surface",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/surface/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-surface/demo/rh-surface.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhSurface",
"declaration": {
"name": "RhSurface",
"module": "rh-surface/rh-surface.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-surface",
"declaration": {
"name": "RhSurface",
"module": "rh-surface/rh-surface.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-subnav/rh-subnav.js",
"declarations": [
{
"kind": "class",
"description": "A subnavigation allows users to navigate between a small number of page links.",
"name": "RhSubnav",
"cssParts": [
{
"description": "container, `<div>` element",
"name": "container"
},
{
"description": "`<slot>` element",
"name": "links"
}
],
"slots": [
{
"description": "Navigation links, expects collection of `<a>` elements",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "scrollIconLeft",
"type": {
"text": "string"
},
"privacy": "protected",
"static": true,
"default": "'angle-left'",
"description": "Icon name to use for the scroll left button",
"readonly": true
},
{
"kind": "field",
"name": "scrollIconRight",
"type": {
"text": "string"
},
"privacy": "protected",
"static": true,
"default": "'angle-right'",
"description": "Icon name to use for the scroll right button",
"readonly": true
},
{
"kind": "field",
"name": "scrollIconSet",
"type": {
"text": "string"
},
"privacy": "protected",
"static": true,
"default": "'fas'",
"description": "Icon set to use for the scroll buttons",
"readonly": true
},
{
"kind": "field",
"name": "instances",
"privacy": "private",
"static": true,
"default": "new Set<RhSubnav>()"
},
{
"kind": "field",
"name": "",
"static": true
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Organizes content into sections using tabbed pages",
"tagName": "rh-subnav",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/subnavigation/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/rh-subnav.html"
}
},
{
"url": "https://ux.redhat.com/elements/subnavigation/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/subnavigation/demo/dynamic/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/dynamic.html"
}
},
{
"url": "https://ux.redhat.com/elements/subnavigation/demo/padded/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-subnav/demo/padded.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhSubnav",
"declaration": {
"name": "RhSubnav",
"module": "rh-subnav/rh-subnav.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-subnav",
"declaration": {
"name": "RhSubnav",
"module": "rh-subnav/rh-subnav.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tabs/rh-tab-panel.js",
"declarations": [
{
"kind": "class",
"description": "The tab panel for use within a rh-tabs element, must be paired with a rh-tab.",
"name": "RhTabPanel",
"slots": [
{
"description": "Panel content should follow guidelines for [tab panel content layout](../guidelines)",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "#internals",
"privacy": "private"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-tab-panel",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhTabPanel",
"declaration": {
"name": "RhTabPanel",
"module": "rh-tabs/rh-tab-panel.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tab-panel",
"declaration": {
"name": "RhTabPanel",
"module": "rh-tabs/rh-tab-panel.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tabs/rh-tab.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "TabExpandEvent",
"superclass": {
"name": "Event",
"module": "elements/rh-tabs/rh-tab.ts"
}
},
{
"kind": "class",
"description": "The tab button for use within a rh-tabs element, must be paired with a rh-tab-panel.",
"name": "RhTab",
"cssProperties": [
{
"description": "Tab link text color",
"name": "--rh-tabs-link-color",
"syntax": "<color>",
"default": "#4d4d4d"
},
{
"description": "Tab active border color",
"name": "--rh-tabs-active-border-color",
"syntax": "<color>",
"default": "#ff442b"
},
{
"description": "Tab padding inline start",
"name": "--rh-tabs-link-padding-inline-start",
"syntax": "<length>",
"default": "32px"
},
{
"description": "Tab padding block start",
"name": "--rh-tabs-link-padding-block-start",
"syntax": "<length>",
"default": "16px"
},
{
"description": "Tab padding inline end",
"name": "--rh-tabs-link-padding-inline-end",
"syntax": "<length>",
"default": "32px"
},
{
"description": "Tab padding block end",
"name": "--rh-tabs-link-padding-block-end",
"syntax": "<length>",
"default": "16px"
}
],
"cssParts": [
{
"description": "element that contains the interactive part of a tab",
"name": "button"
},
{
"description": "icon `<span>` element",
"name": "icon"
},
{
"description": "tile text `<span>` element",
"name": "text"
}
],
"slots": [
{
"description": "Can contain an `<svg>` or `<pf-icon>`",
"name": "icon"
},
{
"description": "Tab title text",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "active",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`active` should be observed, and true when the tab is selected",
"attribute": "active",
"reflects": true
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`disabled` should be observed, and true when the tab is disabled",
"attribute": "disabled",
"reflects": true
},
{
"kind": "field",
"name": "ctx",
"type": {
"text": "RhTabsContext | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "icons",
"type": {
"text": "HTMLElement[]"
},
"privacy": "private"
},
{
"kind": "field",
"name": "button",
"type": {
"text": "HTMLButtonElement"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#internals",
"privacy": "private"
},
{
"kind": "method",
"name": "#onClick",
"privacy": "private"
},
{
"kind": "method",
"name": "#activate",
"privacy": "private"
},
{
"kind": "method",
"name": "#disabledChanged",
"description": "if a tab is disabled, then it is also aria-disabled\nif a tab is removed from disabled its not necessarily\nnot still aria-disabled so we don't remove the aria-disabled",
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "TabExpandEvent"
},
"description": "when a tab expands",
"name": "expand"
}
],
"attributes": [
{
"name": "active",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`active` should be observed, and true when the tab is selected",
"fieldName": "active"
},
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "`disabled` should be observed, and true when the tab is disabled",
"fieldName": "disabled"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-tab",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "TabExpandEvent",
"declaration": {
"name": "TabExpandEvent",
"module": "rh-tabs/rh-tab.js"
}
},
{
"kind": "js",
"name": "RhTab",
"declaration": {
"name": "RhTab",
"module": "rh-tabs/rh-tab.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tab",
"declaration": {
"name": "RhTab",
"module": "rh-tabs/rh-tab.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tabs/rh-tabs.js",
"declarations": [
{
"kind": "class",
"description": "Tabs are used to organize and navigate between sections of content.\nThey feature a horizontal or a vertical list of section text labels\nwith a content panel below or to the right of the component.",
"name": "RhTabs",
"cssProperties": [
{
"description": "Tabs Border color",
"name": "--rh-tabs-border-color",
"syntax": "<color>",
"default": "#c7c7c7"
},
{
"description": "Tabs inset",
"name": "--rh-tabs-inset",
"syntax": "<length>",
"default": "auto"
}
],
"cssParts": [
{
"description": "outer container",
"name": "container"
},
{
"description": "tabs container",
"name": "tabs-container"
},
{
"description": "tablist",
"name": "tabs"
},
{
"description": "panels",
"name": "panels"
}
],
"slots": [
{
"description": "Must contain one or more `<rh-tab>`",
"name": "tab"
},
{
"description": "Must contain one or more `<rh-tab-panel>`",
"name": ""
}
],
"members": [
{
"kind": "method",
"name": "isTab",
"static": true,
"return": {
"type": {
"text": "element is RhTab"
}
},
"parameters": [
{
"name": "element",
"type": {
"text": "HTMLElement"
}
}
]
},
{
"kind": "method",
"name": "isPanel",
"static": true,
"return": {
"type": {
"text": "element is RhTabPanel"
}
},
"parameters": [
{
"name": "element",
"type": {
"text": "HTMLElement"
}
}
]
},
{
"kind": "field",
"name": "labelScrollLeft",
"type": {
"text": "string"
},
"default": "'Scroll left'",
"description": "Label for the scroll left button",
"attribute": "label-scroll-left",
"reflects": true
},
{
"kind": "field",
"name": "labelScrollRight",
"type": {
"text": "string"
},
"default": "'Scroll right'",
"description": "Label for the scroll right button",
"attribute": "label-scroll-right",
"reflects": true
},
{
"kind": "field",
"name": "manual",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\nor [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)",
"attribute": "manual",
"reflects": true
},
{
"kind": "field",
"name": "activeIndex",
"type": {
"text": "number"
},
"default": "-1",
"description": "Index of the active tab",
"attribute": "active-index"
},
{
"kind": "field",
"name": "activeTab",
"type": {
"text": "RhTab | undefined"
}
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color context for child components, overrides parent context",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "centered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Aligns tabs to the center",
"attribute": "centered",
"reflects": true
},
{
"kind": "field",
"name": "box",
"type": {
"text": "'box' | 'inset' | undefined"
},
"description": "Sets tabs to a boxed style with or without an inset",
"attribute": "box",
"reflects": true
},
{
"kind": "field",
"name": "vertical",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Sets the alignment of the tabs vertical",
"attribute": "vertical",
"reflects": true
},
{
"kind": "field",
"name": "theme",
"type": {
"text": "'base' | null | undefined"
},
"default": "null",
"description": "Sets the theme for the tabs and panels"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "tabList",
"type": {
"text": "HTMLElement"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#ctx",
"privacy": "private",
"type": {
"text": "RhTabsContext"
},
"readonly": true
},
{
"kind": "field",
"name": "canShowScrollButtons",
"type": {
"text": "boolean"
},
"privacy": "protected",
"readonly": true
},
{
"kind": "field",
"name": "#overflow",
"privacy": "private",
"default": "new OverflowController(this)"
},
{
"kind": "field",
"name": "#tabs",
"privacy": "private",
"default": "new TabsAriaController<RhTab, RhTabPanel>(this, {\n isTab: (x): x is RhTab => x instanceof RhTab,\n isPanel: (x): x is RhTabPanel => x instanceof RhTabPanel,\n isActiveTab: x => x.active,\n })"
},
{
"kind": "field",
"name": "#tabindex",
"privacy": "private",
"default": "new RovingTabindexController(this, {\n getHTMLElement: () => this.tabList,\n getItems: () => this.tabs ?? [],\n })"
},
{
"kind": "field",
"name": "#dir",
"privacy": "private",
"default": "new DirController(this)"
},
{
"kind": "field",
"name": "tabs",
"readonly": true
},
{
"kind": "field",
"name": "panels",
"readonly": true
},
{
"kind": "field",
"name": "#firstTab",
"privacy": "private",
"type": {
"text": "RhTab | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "#lastTab",
"privacy": "private",
"type": {
"text": "RhTab | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "ctx",
"privacy": "private"
},
{
"kind": "method",
"name": "#onSlotchange",
"privacy": "private"
},
{
"kind": "method",
"name": "#onExpand",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#updateActive",
"parameters": [
{
"name": "{ force = false }",
"default": "{}"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "select",
"parameters": [
{
"name": "option",
"type": {
"text": "RhTab | number"
}
}
]
}
],
"attributes": [
{
"name": "label-scroll-left",
"type": {
"text": "string"
},
"default": "'Scroll left'",
"description": "Label for the scroll left button",
"fieldName": "labelScrollLeft"
},
{
"name": "label-scroll-right",
"type": {
"text": "string"
},
"default": "'Scroll right'",
"description": "Label for the scroll right button",
"fieldName": "labelScrollRight"
},
{
"name": "manual",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\nor [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)",
"fieldName": "manual"
},
{
"name": "active-index",
"type": {
"text": "number"
},
"default": "-1",
"description": "Index of the active tab",
"fieldName": "activeIndex"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color context for child components, overrides parent context",
"fieldName": "colorPalette"
},
{
"name": "centered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Aligns tabs to the center",
"fieldName": "centered"
},
{
"name": "box",
"type": {
"text": "'box' | 'inset' | undefined"
},
"description": "Sets tabs to a boxed style with or without an inset",
"fieldName": "box"
},
{
"name": "vertical",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Sets the alignment of the tabs vertical",
"fieldName": "vertical"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Arranges content in a contained view on the same page",
"tagName": "rh-tabs",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/tabs/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/rh-tabs.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/box-inset/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/box-inset.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/centered/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/centered.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/deprecation/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/deprecation.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/icons-and-text/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/icons-and-text.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/long-tab-content/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/long-tab-content.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/nested/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/nested.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/right-to-left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/right-to-left.html"
}
},
{
"url": "https://ux.redhat.com/elements/tabs/demo/vertical/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tabs/demo/vertical.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhTab",
"declaration": {
"name": "RhTab",
"module": "rh-tabs/rh-tabs.js"
}
},
{
"kind": "js",
"name": "RhTabs",
"declaration": {
"name": "RhTabs",
"module": "rh-tabs/rh-tabs.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tabs",
"declaration": {
"name": "RhTabs",
"module": "rh-tabs/rh-tabs.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tag/rh-tag.js",
"declarations": [
{
"kind": "class",
"description": "A tag is a caption added to an element for better clarity and user convenience.",
"name": "RhTag",
"cssProperties": [
{
"description": "The margin at the end of the direction parallel to the flow of the text.",
"name": "--rh-tag-margin-inline-end",
"syntax": "<length>",
"default": "4px"
},
{
"description": "The padding at the start of the direction perpendicular to the flow of the text.",
"name": "--rh-tag-padding-block-start",
"syntax": "<length>",
"default": "4px"
},
{
"description": "The padding at the end of the direction perpendicular to the flow of the text.",
"name": "--rh-tag-padding-block-end",
"syntax": "<length>",
"default": "4px"
},
{
"description": "The padding at the start of the direction parallel to the flow of the text.",
"name": "--rh-tag-padding-inline-start",
"syntax": "<length>",
"default": "8px"
},
{
"description": "The padding at the end of the direction parallel to the flow of the text.",
"name": "--rh-tag-padding-inline-end",
"syntax": "<length>",
"default": "8px"
},
{
"name": "--pf-icon--size"
}
],
"cssParts": [
{
"description": "container for the label icon",
"name": "icon"
}
],
"slots": [
{
"description": "Contains the labels's icon, e.g. web-icon-alert-success.",
"name": "icon"
},
{
"description": "Must contain the text for the label."
}
],
"members": [
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "The icon to display in the label.",
"attribute": "icon"
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "'filled' | 'outline' | undefined"
},
"default": "'filled'",
"description": "The variant of the label.",
"attribute": "variant"
},
{
"kind": "field",
"name": "color",
"type": {
"text": "'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | undefined"
},
"description": "The color of the label.",
"attribute": "color"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, 'icon', null)",
"description": "Represents the state of the anonymous and icon slots"
}
],
"events": [
{
"description": "when a removable label's close button is clicked",
"name": "close"
}
],
"attributes": [
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "The icon to display in the label.",
"fieldName": "icon"
},
{
"name": "variant",
"type": {
"text": "'filled' | 'outline' | undefined"
},
"default": "'filled'",
"description": "The variant of the label.",
"fieldName": "variant"
},
{
"name": "color",
"type": {
"text": "'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | undefined"
},
"description": "The color of the label.",
"fieldName": "color"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Highlights an element to add clarity or draw attention",
"tagName": "rh-tag",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/tag/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/rh-tag.html"
}
},
{
"url": "https://ux.redhat.com/elements/tag/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/tag/demo/filled-color-with-icon/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/filled-color-with-icon.html"
}
},
{
"url": "https://ux.redhat.com/elements/tag/demo/filled-color/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/filled-color.html"
}
},
{
"url": "https://ux.redhat.com/elements/tag/demo/outline-with-icon/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/outline-with-icon.html"
}
},
{
"url": "https://ux.redhat.com/elements/tag/demo/outline/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tag/demo/outline.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhTag",
"declaration": {
"name": "RhTag",
"module": "rh-tag/rh-tag.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tag",
"declaration": {
"name": "RhTag",
"module": "rh-tag/rh-tag.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-timestamp/rh-timestamp.js",
"declarations": [
{
"kind": "class",
"description": "A timestamp provides consistent formats for displaying date and time values.",
"name": "RhTimestamp",
"members": [
{
"kind": "field",
"name": "dateFormat",
"type": {
"text": "DateTimeFormat | undefined"
},
"description": "Custom date formatting style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) for options.",
"attribute": "date-format",
"reflects": true
},
{
"kind": "field",
"name": "timeFormat",
"type": {
"text": "DateTimeFormat | undefined"
},
"description": "Custom time formatting style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle) for options.",
"attribute": "time-format",
"reflects": true
},
{
"kind": "field",
"name": "customFormat",
"type": {
"text": "object | undefined"
},
"description": "Custom date and time formatting options. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options."
},
{
"kind": "field",
"name": "displaySuffix",
"type": {
"text": "string | undefined"
},
"description": "Text to display after the timestamp",
"attribute": "display-suffix",
"reflects": true
},
{
"kind": "field",
"name": "locale",
"type": {
"text": "string | undefined"
},
"description": "Overrides the runtime's default locale",
"attribute": "locale",
"reflects": true
},
{
"kind": "field",
"name": "relative",
"type": {
"text": "boolean | undefined"
},
"description": "Formats a timestamp in realtive terms",
"attribute": "relative",
"reflects": true
},
{
"kind": "field",
"name": "utc",
"type": {
"text": "boolean | undefined"
},
"description": "Sets the timezone as UTC",
"attribute": "utc",
"reflects": true
},
{
"kind": "field",
"name": "hour12",
"type": {
"text": "boolean | undefined"
},
"description": "Whether to use 12-hour time (as opposed to 24-hour time)",
"attribute": "hour-12",
"reflects": true
},
{
"kind": "field",
"name": "date",
"description": "A string value representing a date",
"attribute": "date",
"reflects": true
},
{
"kind": "field",
"name": "isoString",
"readonly": true
},
{
"kind": "field",
"name": "time",
"readonly": true
},
{
"kind": "field",
"name": "#timestamp",
"privacy": "private",
"default": "new TimestampController(this)"
}
],
"attributes": [
{
"name": "date-format",
"type": {
"text": "DateTimeFormat | undefined"
},
"description": "Custom date formatting style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) for options.",
"fieldName": "dateFormat"
},
{
"name": "time-format",
"type": {
"text": "DateTimeFormat | undefined"
},
"description": "Custom time formatting style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle) for options.",
"fieldName": "timeFormat"
},
{
"name": "display-suffix",
"type": {
"text": "string | undefined"
},
"description": "Text to display after the timestamp",
"fieldName": "displaySuffix"
},
{
"name": "locale",
"type": {
"text": "string | undefined"
},
"description": "Overrides the runtime's default locale",
"fieldName": "locale"
},
{
"name": "relative",
"type": {
"text": "boolean | undefined"
},
"description": "Formats a timestamp in realtive terms",
"fieldName": "relative"
},
{
"name": "utc",
"type": {
"text": "boolean | undefined"
},
"description": "Sets the timezone as UTC",
"fieldName": "utc"
},
{
"name": "hour-12",
"type": {
"text": "boolean | undefined"
},
"description": "Whether to use 12-hour time (as opposed to 24-hour time)",
"fieldName": "hour12"
},
{
"name": "date",
"description": "A string value representing a date",
"fieldName": "date"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Displays a line of text with date and time values",
"tagName": "rh-timestamp",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/timestamp/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/rh-timestamp.html"
}
},
{
"url": "https://ux.redhat.com/elements/timestamp/demo/custom-format/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/custom-format.html"
}
},
{
"url": "https://ux.redhat.com/elements/timestamp/demo/fallback/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/fallback.html"
}
},
{
"url": "https://ux.redhat.com/elements/timestamp/demo/formats/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/formats.html"
}
},
{
"url": "https://ux.redhat.com/elements/timestamp/demo/relative/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/relative.html"
}
},
{
"url": "https://ux.redhat.com/elements/timestamp/demo/tooltip/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-timestamp/demo/tooltip.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhTimestamp",
"declaration": {
"name": "RhTimestamp",
"module": "rh-timestamp/rh-timestamp.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-timestamp",
"declaration": {
"name": "RhTimestamp",
"module": "rh-timestamp/rh-timestamp.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-table/rh-sort-button.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "RequestSortEvent",
"superclass": {
"name": "ComposedEvent",
"package": "@patternfly/pfe-core"
}
},
{
"kind": "class",
"description": "Table sort button",
"name": "RhSortButton",
"cssParts": [
{
"description": "button element",
"name": "sort-button"
},
{
"description": "icon wrapper element",
"name": "sort-indicator"
}
],
"members": [
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "sortDirection",
"type": {
"text": "'asc' | 'desc' | undefined"
},
"description": "The button's sorting order",
"attribute": "sort-direction",
"reflects": true
},
{
"kind": "field",
"name": "column",
"type": {
"text": "string | undefined"
},
"description": "The column name associated with this button (for screen readers)",
"attribute": "column"
},
{
"kind": "method",
"name": "sort",
"description": "Dispatch a request-sort event in ascending (asc) or descending (desc) order"
}
],
"events": [
{
"name": "next",
"type": {
"text": "RequestSortEvent"
}
},
{
"type": {
"text": "RequestSortEvent"
},
"description": "when the button is clicked",
"name": "request-sort"
}
],
"attributes": [
{
"name": "sort-direction",
"type": {
"text": "'asc' | 'desc' | undefined"
},
"description": "The button's sorting order",
"fieldName": "sortDirection"
},
{
"name": "column",
"type": {
"text": "string | undefined"
},
"description": "The column name associated with this button (for screen readers)",
"fieldName": "column"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-sort-button",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RequestSortEvent",
"declaration": {
"name": "RequestSortEvent",
"module": "rh-table/rh-sort-button.js"
}
},
{
"kind": "js",
"name": "RhSortButton",
"declaration": {
"name": "RhSortButton",
"module": "rh-table/rh-sort-button.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-sort-button",
"declaration": {
"name": "RhSortButton",
"module": "rh-table/rh-sort-button.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-table/rh-table.js",
"declarations": [
{
"kind": "class",
"description": "A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.",
"name": "RhTable",
"cssProperties": [
{
"description": "deprecated use --rh-table-row-background-hover-color",
"name": "--rh-table-row-background-color",
"syntax": "<color>",
"default": "224 224 224 / 40%"
},
{
"description": "deprecated use --rh-table-column-background-hover-color",
"name": "--rh-table-column-background-color",
"syntax": "<color>",
"default": "0 102 204 / 10%"
},
{
"description": "row hover background color",
"name": "--rh-table-row-background-hover-color",
"syntax": "<color>",
"default": "224 224 224 / 40%"
},
{
"description": "column hover background color",
"name": "--rh-table-column-background-hover-color",
"syntax": "<color>",
"default": "0 102 204 / 10%"
},
{
"description": "row border",
"name": "--rh-table-row-border",
"default": "1px solid #c7c7c7"
}
],
"slots": [
{
"description": "an HTML table",
"name": ""
},
{
"description": "a brief description of the data",
"name": "summary"
}
],
"members": [
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "method",
"name": "getNodeContentForSort",
"privacy": "private",
"static": true,
"parameters": [
{
"name": "columnIndexToSort",
"type": {
"text": "number"
}
},
{
"name": "node",
"type": {
"text": "Element"
}
}
]
},
{
"kind": "method",
"name": "sortByContent",
"privacy": "private",
"static": true,
"parameters": [
{
"name": "direction",
"type": {
"text": "'asc' | 'desc'"
}
},
{
"name": "a",
"type": {
"text": "{ content: string }"
}
},
{
"name": "b",
"type": {
"text": "{ content: string }"
}
}
]
},
{
"kind": "field",
"name": "#table",
"privacy": "private",
"type": {
"text": "HTMLTableElement | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "#cols",
"privacy": "private",
"type": {
"text": "NodeListOf<HTMLTableColElement> | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "#rows",
"privacy": "private",
"type": {
"text": "NodeListOf<HTMLTableRowElement> | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "#summary",
"privacy": "private",
"type": {
"text": "HTMLElement | undefined"
},
"readonly": true
},
{
"kind": "field",
"name": "#internalColorPalette",
"privacy": "private",
"type": {
"text": "string | null | undefined"
}
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "method",
"name": "#onPointerleave",
"privacy": "private"
},
{
"kind": "method",
"name": "#onPointerover",
"parameters": [
{
"name": "event",
"type": {
"text": "PointerEvent"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#init",
"privacy": "private"
},
{
"kind": "method",
"name": "#onSlotChange",
"privacy": "private"
},
{
"kind": "method",
"name": "#onRequestSort",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#performSort",
"parameters": [
{
"name": "button",
"type": {
"text": "RhSortButton"
}
},
{
"name": "direction",
"type": {
"text": "'asc' | 'desc'"
}
}
],
"privacy": "private"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Organizes and displays information from a data set",
"tagName": "rh-table",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/table/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/rh-table.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/column-headers/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/column-headers.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/headers-and-summary-but-no-title/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/headers-and-summary-but-no-title.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/horizontal-overflow/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/horizontal-overflow.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/no-title-headers-or-summary/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/no-title-headers-or-summary.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/row-and-column-headers/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/row-and-column-headers.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/row-headers/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/row-headers.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/title-and-summary-but-no-headers/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/title-and-summary-but-no-headers.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/title-headers-and-summary/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/title-headers-and-summary.html"
}
},
{
"url": "https://ux.redhat.com/elements/table/demo/vertical-overflow/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-table/demo/vertical-overflow.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhTable",
"declaration": {
"name": "RhTable",
"module": "rh-table/rh-table.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-table",
"declaration": {
"name": "RhTable",
"module": "rh-table/rh-table.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tile/rh-tile-group.js",
"declarations": [
{
"kind": "class",
"description": "A group of `<rh-tile>` elements which handles radio selection.",
"name": "RhTileGroup",
"slots": [
{
"description": "tiles",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether tile group interaction is disabled",
"attribute": "disabled",
"reflects": true
},
{
"kind": "field",
"name": "radio",
"type": {
"text": "boolean"
},
"default": "false",
"description": "If tile is checkable, whether only one tile can be checked",
"attribute": "radio",
"reflects": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile group always resets its context to `base`, unless explicitly provided with a `color-palette`.",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "#tiles",
"privacy": "private",
"type": {
"text": "RhTile[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "#initTiles",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#tabindex",
"privacy": "private",
"default": "new RovingTabindexController<HTMLElement>(this)"
},
{
"kind": "field",
"name": "#internals",
"privacy": "private"
},
{
"kind": "field",
"name": "tiles",
"description": "All slotted tiles",
"readonly": true
},
{
"kind": "field",
"name": "selected",
"description": "All selected tiles",
"readonly": true
},
{
"kind": "method",
"name": "#selectTile",
"parameters": [
{
"name": "tileToSelect",
"type": {
"text": "RhTile"
}
},
{
"name": "force",
"optional": true,
"type": {
"text": "boolean"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onSelect",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onSlotchange",
"description": "handles slot change by updating slotted tiles",
"privacy": "private"
},
{
"kind": "method",
"name": "focus",
"description": "Sets focus on active tile"
},
{
"kind": "method",
"name": "selectItem",
"parameters": [
{
"name": "tile",
"optional": true,
"type": {
"text": "RhTile"
},
"description": "tile to select"
}
],
"description": "Programatically select a tile"
},
{
"kind": "method",
"name": "toggleItem",
"parameters": [
{
"name": "tile",
"optional": true,
"type": {
"text": "RhTile"
},
"description": "tile to toggle"
}
],
"description": "Programatically toggle a tile"
},
{
"kind": "method",
"name": "updateItems",
"description": "Updates slotted tiles to set properties and keyboard navigation"
}
],
"attributes": [
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether tile group interaction is disabled",
"fieldName": "disabled"
},
{
"name": "radio",
"type": {
"text": "boolean"
},
"default": "false",
"description": "If tile is checkable, whether only one tile can be checked",
"fieldName": "radio"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile group always resets its context to `base`, unless explicitly provided with a `color-palette`.",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "rh-tile-group",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "RhTileGroup",
"declaration": {
"name": "RhTileGroup",
"module": "rh-tile/rh-tile-group.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tile-group",
"declaration": {
"name": "RhTileGroup",
"module": "rh-tile/rh-tile-group.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tile/rh-tile.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "TileSelectEvent",
"members": [
{
"kind": "field",
"name": "target",
"type": {
"text": "RhTile"
}
}
],
"superclass": {
"name": "Event",
"module": "elements/rh-tile/rh-tile.ts"
}
},
{
"kind": "class",
"description": "A tile is a flexible layout with a clickable and contained surface.",
"name": "RhTile",
"cssProperties": [
{
"description": "color of text -",
"name": "--rh-tile-text-color",
"default": "var(--rh-color-text-primary-on-light, #151515)"
},
{
"description": "disabled text and icons -",
"name": "--rh-tile-text-color-secondary",
"default": "var(--rh-color-text-secondary-on-light, #4d4d4d)"
},
{
"description": "color of interactive elements -",
"name": "--rh-tile-interactive-color",
"default": "var(--rh-color-border-interactive-on-light, #0066cc)"
},
{
"description": "color of tile link -",
"name": "--rh-tile-link-color",
"default": "var(--rh-tile-interactive-color)"
},
{
"description": "tile link text decoration -",
"name": "--rh-tile-link-text-decoration",
"default": "none"
},
{
"description": "color tile surface -",
"name": "--rh-tile-background-color",
"default": "var(--rh-color-surface-lightest, #ffffff)"
},
{
"description": "color tile surface on focus/hover -",
"name": "--rh-tile-focus-background-color",
"default": "var(--rh-color-surface-lighter, #f2f2f2)"
},
{
"description": "color tile surface when disabled -",
"name": "--rh-tile-disabled-background-color",
"default": "var(--rh-color-surface-light, #e0e0e0)"
},
{
"description": "color of tile border -",
"name": "--rh-tile-border-color",
"default": "var(--rh-color-border-subtle-on-light, #c7c7c7)"
}
],
"slots": [
{
"description": "optional image on top of tile",
"name": "image"
},
{
"description": "optional icon",
"name": "icon"
},
{
"description": "optional title",
"name": "title"
},
{
"description": "optional headline / link title",
"name": "headline"
},
{
"description": "optional body content",
"name": ""
},
{
"description": "optional footer",
"name": "footer"
}
],
"members": [
{
"kind": "field",
"name": "formAssociated",
"type": {
"text": "boolean"
},
"static": true,
"default": "true",
"readonly": true
},
{
"kind": "field",
"name": "shadowRoot",
"type": {
"text": "ShadowRoot"
}
},
{
"kind": "field",
"name": "bleed",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether image is full-width (i.e. bleeds into the padding)",
"attribute": "bleed"
},
{
"kind": "field",
"name": "desaturated",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether headline link text is a desaturated color instead of blue;\n`true` sets headline color to white on dark tiles or black on light tiles",
"attribute": "desaturated"
},
{
"kind": "field",
"name": "compact",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Reduces tile padding for more compact spaces",
"attribute": "compact"
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "Icon (must be a member of the fontawesome \"far\" icon set)",
"attribute": "icon"
},
{
"kind": "field",
"name": "accessibleLabel",
"type": {
"text": "string | undefined"
},
"description": "When checkable, the accessible (visually hidden) label for the form control\nIf not set, the text content of the tile element will be used instead.",
"attribute": "accessible-label"
},
{
"kind": "field",
"name": "name",
"type": {
"text": "string | undefined"
},
"description": "Form name",
"attribute": "name"
},
{
"kind": "field",
"name": "value",
"type": {
"text": "string | undefined"
},
"description": "Form value",
"attribute": "value"
},
{
"kind": "field",
"name": "checkable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When true, tile behaves like a checkbox unless it is part of an\n`<rh-tile-group radio>`, in which case it behaves like a radio button",
"attribute": "checkable"
},
{
"kind": "field",
"name": "checked",
"type": {
"text": "boolean"
},
"default": "false",
"description": "If tile is checkable, whether it is currently checked",
"attribute": "checked",
"reflects": true
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether tile interaction is disabled",
"attribute": "disabled",
"reflects": true
},
{
"kind": "field",
"name": "colorPalette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile always resets its context to `base`, unless explicitly provided with a `color-palette`.",
"attribute": "color-palette",
"reflects": true
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private",
"description": "Sets color theme based on parent context"
},
{
"kind": "field",
"name": "disabledGroup",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "radioGroup",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "#internals",
"privacy": "private"
},
{
"kind": "field",
"name": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#slots",
"privacy": "private",
"default": "new SlotController(this, { slots: ['icon'] })"
},
{
"kind": "field",
"name": "#isCheckable",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#input",
"privacy": "private",
"type": {
"text": "HTMLInputElement | null"
},
"readonly": true
},
{
"kind": "method",
"name": "formDisabledCallback"
},
{
"kind": "method",
"name": "formStateRestoreCallback",
"parameters": [
{
"name": "state",
"type": {
"text": "string"
}
},
{
"name": "mode",
"type": {
"text": "string"
}
}
]
},
{
"kind": "method",
"name": "#setValidityFromInput",
"privacy": "private"
},
{
"kind": "method",
"name": "setCustomValidity",
"parameters": [
{
"name": "message",
"type": {
"text": "string"
}
}
]
},
{
"kind": "method",
"name": "checkValidity"
},
{
"kind": "method",
"name": "reportValidity"
},
{
"kind": "method",
"name": "#onClick",
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
},
"description": "click event"
}
],
"description": "handles tile click",
"privacy": "private"
},
{
"kind": "method",
"name": "#requestSelect",
"parameters": [
{
"name": "force",
"optional": true,
"type": {
"text": "boolean"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#onKeydown",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
},
"description": "keydown"
}
],
"description": "Prevent scrolling when spacebar is pressed down",
"privacy": "private"
},
{
"kind": "method",
"name": "#onKeyup",
"parameters": [
{
"name": "event",
"type": {
"text": "KeyboardEvent"
},
"description": "keyup"
}
],
"description": "handles key up and toggles input",
"privacy": "private"
}
],
"events": [
{
"name": "force",
"type": {
"text": "TileSelectEvent"
}
},
{
"type": {
"text": "TileSelectEvent"
},
"description": "when tile is clicked",
"name": "select"
}
],
"attributes": [
{
"name": "bleed",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether image is full-width (i.e. bleeds into the padding)",
"fieldName": "bleed"
},
{
"name": "desaturated",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether headline link text is a desaturated color instead of blue;\n`true` sets headline color to white on dark tiles or black on light tiles",
"fieldName": "desaturated"
},
{
"name": "compact",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Reduces tile padding for more compact spaces",
"fieldName": "compact"
},
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"description": "Icon (must be a member of the fontawesome \"far\" icon set)",
"fieldName": "icon"
},
{
"name": "accessible-label",
"type": {
"text": "string | undefined"
},
"description": "When checkable, the accessible (visually hidden) label for the form control\nIf not set, the text content of the tile element will be used instead.",
"fieldName": "accessibleLabel"
},
{
"name": "name",
"type": {
"text": "string | undefined"
},
"description": "Form name",
"fieldName": "name"
},
{
"name": "value",
"type": {
"text": "string | undefined"
},
"description": "Form value",
"fieldName": "value"
},
{
"name": "checkable",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When true, tile behaves like a checkbox unless it is part of an\n`<rh-tile-group radio>`, in which case it behaves like a radio button",
"fieldName": "checkable"
},
{
"name": "checked",
"type": {
"text": "boolean"
},
"default": "false",
"description": "If tile is checkable, whether it is currently checked",
"fieldName": "checked"
},
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether tile interaction is disabled",
"fieldName": "disabled"
},
{
"name": "color-palette",
"type": {
"text": "ColorPalette | undefined"
},
"description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [CSS Custom Properties](#css-custom-properties) for default values\n\nTile always resets its context to `base`, unless explicitly provided with a `color-palette`.",
"fieldName": "colorPalette"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Creates a clickable, contained surface",
"tagName": "rh-tile",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/tile/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/rh-tile.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/checkable/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/checkable.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/compact/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/compact.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/desaturated-heading/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/desaturated-heading.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/disabled/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/disabled.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/form-control/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/form-control.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/full-width-images/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/full-width-images.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/icon/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/icon.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/in-flex-container/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/in-flex-container.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/tile-group-disabled/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-disabled.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/tile-group-flex/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-flex.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/tile-group-radio-disabled/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-radio-disabled.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/tile-group-radio/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group-radio.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/tile-group/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-group.html"
}
},
{
"url": "https://ux.redhat.com/elements/tile/demo/tile-layout/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tile/demo/tile-layout.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "TileSelectEvent",
"declaration": {
"name": "TileSelectEvent",
"module": "rh-tile/rh-tile.js"
}
},
{
"kind": "js",
"name": "RhTile",
"declaration": {
"name": "RhTile",
"module": "rh-tile/rh-tile.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tile",
"declaration": {
"name": "RhTile",
"module": "rh-tile/rh-tile.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "rh-tooltip/rh-tooltip.js",
"declarations": [
{
"kind": "class",
"description": "A tooltip is a floating text area that provides helpful\nor contextual information on hover, focus, or tap.",
"name": "RhTooltip",
"cssProperties": [
{
"name": "--rh-tooltip-arrow-size",
"default": "11px",
"syntax": "<length>"
},
{
"name": "--rh-tooltip-content-background-color",
"default": "#ffffff",
"syntax": "<color>"
},
{
"name": "--rh-tooltip-content-color",
"default": "#151515",
"syntax": "<color>"
},
{
"name": "--rh-tooltip-max-width",
"default": "18.75rem",
"syntax": "<length>"
},
{
"name": "--rh-tooltip-content-padding-block-start",
"default": "16px",
"syntax": "<length>"
},
{
"name": "--rh-tooltip-content-padding-inline-end",
"default": "16px",
"syntax": "<length>"
},
{
"name": "--rh-tooltip-content-padding-block-end",
"default": "16px",
"syntax": "<length>"
},
{
"name": "--rh-tooltip-content-padding-inline-start",
"default": "16px",
"syntax": "<length>"
},
{
"name": "--rh-tooltip-content-font-size",
"default": "0.875rem",
"syntax": "<absolute-size> | <relative-size> | <length> | <percentage>"
}
],
"slots": [
{
"description": "Place invoking element here, i.e. the element which when hovered the tooltip will display. Must be inline content.",
"name": ""
},
{
"description": "Place tooltip content here. Overrides the `content` attribute.",
"name": "content"
}
],
"members": [
{
"kind": "field",
"name": "version",
"type": {
"text": "string"
},
"static": true,
"default": "1.4.5",
"readonly": true
},
{
"kind": "field",
"name": "position",
"type": {
"text": "Placement"
},
"default": "'top'",
"description": "The position of the tooltip, relative to the invoking content",
"attribute": "position"
},
{
"kind": "field",
"name": "content",
"type": {
"text": "string | undefined"
},
"description": "Tooltip content. Overridden by the content slot",
"attribute": "content"
},
{
"kind": "field",
"name": "on",
"type": {
"text": "ColorTheme | undefined"
},
"privacy": "private"
},
{
"kind": "field",
"name": "#float",
"privacy": "private",
"default": "new FloatingDOMController(this, {\n content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),\n })"
},
{
"kind": "field",
"name": "#initialized",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "method",
"name": "show",
"description": "Show the tooltip"
},
{
"kind": "method",
"name": "hide",
"description": "Hide the tooltip"
}
],
"attributes": [
{
"name": "position",
"type": {
"text": "Placement"
},
"default": "'top'",
"description": "The position of the tooltip, relative to the invoking content",
"fieldName": "position"
},
{
"name": "content",
"type": {
"text": "string | undefined"
},
"description": "Tooltip content. Overridden by the content slot",
"fieldName": "content"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Reveals a small area of information on hover",
"tagName": "rh-tooltip",
"customElement": true,
"demos": [
{
"url": "https://ux.redhat.com/elements/tooltip/demo/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/rh-tooltip.html"
}
},
{
"url": "https://ux.redhat.com/elements/tooltip/demo/bottom/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/bottom.html"
}
},
{
"url": "https://ux.redhat.com/elements/tooltip/demo/color-context/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/color-context.html"
}
},
{
"url": "https://ux.redhat.com/elements/tooltip/demo/left/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/left.html"
}
},
{
"url": "https://ux.redhat.com/elements/tooltip/demo/right/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/right.html"
}
},
{
"url": "https://ux.redhat.com/elements/tooltip/demo/top/",
"source": {
"href": "https://github.com/redhat-ux/red-hat-design-system/tree/main/elements/rh-tooltip/demo/top.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "RhTooltip",
"declaration": {
"name": "RhTooltip",
"module": "rh-tooltip/rh-tooltip.js"
}
},
{
"kind": "custom-element-definition",
"name": "rh-tooltip",
"declaration": {
"name": "RhTooltip",
"module": "rh-tooltip/rh-tooltip.js"
}
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment