@patternfly/elements
Version:
PatternFly Elements
1,483 lines • 667 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "pf-accordion/pf-accordion-header.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "PfAccordionHeaderChangeEvent",
"members": [
{
"kind": "field",
"name": "target",
"type": {
"text": "PfAccordionHeader"
}
},
{
"kind": "field",
"type": {
"text": "boolean",
"name": "boolean"
},
"name": "expanded",
"privacy": "public"
},
{
"kind": "field",
"type": {
"text": "PfAccordionHeader",
"name": "PfAccordionHeader"
},
"name": "toggle",
"privacy": "public"
},
{
"kind": "field",
"type": {
"text": "PfAccordion",
"name": "PfAccordion",
"module": "./pf-accordion.js"
},
"name": "accordion",
"privacy": "public"
}
],
"superclass": {
"name": "Event",
"module": "global:"
}
},
{
"kind": "class",
"description": "Accordion Header",
"name": "PfAccordionHeader",
"cssProperties": [
{
"type": {
"text": "<color>"
},
"description": "Sets the font color for the accordion header.",
"name": "--pf-c-accordion__toggle--Color",
"default": "var(--pf-global--Color--100, #151515)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the background color for the accordion header toggle element.",
"name": "--pf-c-accordion__toggle--BackgroundColor",
"default": "transparent"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the background color for the after element for the accordion header toggle element.",
"name": "--pf-c-accordion__toggle--after--BackgroundColor",
"default": "transparent"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the top padding for the accordion header.",
"name": "--pf-c-accordion__toggle--PaddingTop",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the right padding for the accordion header.",
"name": "--pf-c-accordion__toggle--PaddingRight",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the bottom padding for the accordion header.",
"name": "--pf-c-accordion__toggle--PaddingBottom",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the left padding for the accordion header.",
"name": "--pf-c-accordion__toggle--PaddingLeft",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the sidebar background color for the accordion header.",
"name": "--pf-c-accordion__toggle--FontSize",
"default": "var(--pf-global--FontSize--lg, 1rem)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the font family for the accordion header.",
"name": "--pf-c-accordion__toggle--FontFamily",
"default": "var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, \"RedHatDisplayUpdated\", helvetica, arial, sans-serif)"
},
{
"description": "Sets the font weight for the accordion header.",
"name": "--pf-c-accordion__toggle--FontWeight",
"default": "var(--pf-global--FontWeight--normal, 400)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the active backgrdound color for the accordion header.",
"name": "--pf-c-accordion__toggle--active--BackgroundColor",
"default": "var(--pf-global--BackgroundColor--200, #f0f0f0)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the active text color for the accordion header.",
"name": "--pf-c-accordion__toggle--active-text--Color",
"default": "var(--pf-global--link--Color, #0066cc)"
},
{
"description": "Sets the active text font weight for the accordion header.",
"name": "--pf-c-accordion__toggle--active-text--FontWeight",
"default": "var(--pf-global--FontWeight--semi-bold, 700)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the hover expanded before background color for the accordion header.",
"name": "--pf-c-accordion__toggle--expanded--before--BackgroundColor",
"default": "var(--pf-global--link--Color, #0066cc)"
},
{
"description": "Sets the expanded icon rotation degrees for the accordion header.",
"name": "--pf-c-accordion__toggle--expanded-icon--Rotate",
"default": "90deg"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the max width for the text inside the accordion header.",
"name": "--pf-c-accordion__toggle-text--MaxWidth",
"default": "calc(100 - var(--pf-global--spacer--lg, 1.5rem))"
},
{
"description": "Sets the sidebar width for the accordion header.",
"name": "--pf-c-accordion__toggle--before--Width",
"default": "var(--pf-global--BorderWidth--lg, 3px)"
},
{
"description": "Sets the transition animation for the accordion header.",
"name": "--pf-c-accordion__toggle-icon--Transition",
"default": "0.2s ease-in 0s"
}
],
"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 pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)"
},
{
"description": "These elements will appear inline with the accordion header, between the header and the chevron\n(or after the chevron and header in disclosure mode).",
"name": "accents"
}
],
"members": [
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "ShadowRootInit"
},
"static": true,
"default": "{\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n }",
"readonly": true
},
{
"kind": "field",
"name": "bordered",
"type": {
"text": "'true' | 'false' | undefined"
},
"attribute": "bordered",
"reflects": true
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "string | undefined"
},
"attribute": "icon",
"reflects": true
},
{
"kind": "field",
"name": "iconSet",
"type": {
"text": "string | undefined"
},
"attribute": "icon-set",
"reflects": 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": "#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": "#slots",
"privacy": "private",
"default": "new SlotController(this, 'accents', null)"
},
{
"kind": "method",
"name": "#initHeader",
"privacy": "private"
},
{
"kind": "method",
"name": "#getOrCreateHeader",
"return": {
"type": {
"text": "HTMLElement | undefined"
}
},
"privacy": "private"
},
{
"kind": "method",
"name": "#onClick",
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "AccordionHeaderChangeEvent"
},
"description": "when the open panels change",
"name": "change"
}
],
"attributes": [
{
"name": "bordered",
"type": {
"text": "'true' | 'false' | undefined"
},
"fieldName": "bordered"
},
{
"name": "icon",
"type": {
"text": "string | undefined"
},
"fieldName": "icon"
},
{
"name": "icon-set",
"type": {
"text": "string | undefined"
},
"fieldName": "iconSet"
},
{
"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"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pf-accordion-header",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PfAccordionHeaderChangeEvent",
"declaration": {
"name": "PfAccordionHeaderChangeEvent",
"module": "pf-accordion/pf-accordion-header.js"
}
},
{
"kind": "js",
"name": "PfAccordionHeader",
"declaration": {
"name": "PfAccordionHeader",
"module": "pf-accordion/pf-accordion-header.js"
}
},
{
"kind": "custom-element-definition",
"name": "pf-accordion-header",
"declaration": {
"name": "PfAccordionHeader",
"module": "pf-accordion/pf-accordion-header.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "pf-accordion/pf-accordion-panel.js",
"declarations": [
{
"kind": "class",
"description": "Accordion Panel",
"name": "PfAccordionPanel",
"cssProperties": [
{
"type": {
"text": "<color>"
},
"description": "Sets the background color for the panel content.",
"name": "--pf-c-accordion--BackgroundColor",
"default": "var(--pf-global--BackgroundColor--light-100, #ffffff)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the font color for the panel content.",
"name": "--pf-c-accordion__panel--Color",
"default": "var(--pf-global--Color--dark-200, #6a6e73)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the font size for the panel content.",
"name": "--pf-c-accordion__panel--FontSize",
"default": "var(--pf-global--FontSize--sm, 0.875rem)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the sidebar color for the panel when the context is expanded.",
"name": "--pf-c-accordion__panel--content-body--before--BackgroundColor",
"default": "var(--pf-global--primary-color--100, #0066cc)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the maximum height for the panel content.\nWill only be used if the `fixed` attribute is used.",
"name": "--pf-c-accordion__panel--m-fixed--MaxHeight",
"default": "9.375rem"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the padding top for the panel content.",
"name": "--pf-c-accordion__panel-body--PaddingTop",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the padding right for the panel content.",
"name": "--pf-c-accordion__panel-body--PaddingRight",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the padding bottom for the panel content.",
"name": "--pf-c-accordion__panel-body--PaddingBottom",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"type": {
"text": "<length>"
},
"description": "Sets the padding left for the panel content.",
"name": "--pf-c-accordion__panel-body--PaddingLeft",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"type": {
"text": "<color>"
},
"description": "Sets the background color for the panel content.",
"name": "--pf-c-accordion__panel-body--before--BackgroundColor",
"default": "transparent"
},
{
"description": "Sets the before width for the panel content.",
"name": "--pf-c-accordion__panel-body--before--Width",
"default": "var(--pf-global--BorderWidth--lg, 3px)"
}
],
"slots": [
{
"description": "Panel content",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "expanded",
"reflects": true
},
{
"kind": "field",
"name": "bordered",
"type": {
"text": "'true' | 'false' | undefined"
},
"attribute": "bordered",
"reflects": true
}
],
"attributes": [
{
"name": "expanded",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "expanded"
},
{
"name": "bordered",
"type": {
"text": "'true' | 'false' | undefined"
},
"fieldName": "bordered"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "pf-accordion-panel",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "PfAccordionPanel",
"declaration": {
"name": "PfAccordionPanel",
"module": "pf-accordion/pf-accordion-panel.js"
}
},
{
"kind": "custom-element-definition",
"name": "pf-accordion-panel",
"declaration": {
"name": "PfAccordionPanel",
"module": "pf-accordion/pf-accordion-panel.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "pf-accordion/pf-accordion.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "PfAccordionExpandEvent",
"members": [
{
"kind": "field",
"type": {
"text": "PfAccordionHeader",
"name": "PfAccordionHeader",
"module": "./pf-accordion-header.js"
},
"name": "toggle",
"privacy": "public"
},
{
"kind": "field",
"type": {
"text": "PfAccordionPanel",
"name": "PfAccordionPanel",
"module": "./pf-accordion-panel.js"
},
"name": "panel",
"privacy": "public"
}
],
"superclass": {
"name": "Event",
"module": "global:"
}
},
{
"kind": "class",
"description": "",
"name": "PfAccordionCollapseEvent",
"members": [
{
"kind": "field",
"type": {
"text": "PfAccordionHeader",
"name": "PfAccordionHeader",
"module": "./pf-accordion-header.js"
},
"name": "toggle",
"privacy": "public"
},
{
"kind": "field",
"type": {
"text": "PfAccordionPanel",
"name": "PfAccordionPanel",
"module": "./pf-accordion-panel.js"
},
"name": "panel",
"privacy": "public"
}
],
"superclass": {
"name": "Event",
"module": "global:"
}
},
{
"kind": "class",
"description": "An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.",
"name": "PfAccordion",
"cssProperties": [
{
"name": "--pf-c-accordion--BackgroundColor",
"default": "var(--pf-global--BackgroundColor--100, #fff)"
},
{
"name": "--pf-c-accordion__toggle--PaddingTop",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"name": "--pf-c-accordion__toggle--PaddingRight",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion__toggle--PaddingBottom",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"name": "--pf-c-accordion__toggle--PaddingLeft",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion__toggle--before--BackgroundColor",
"default": "transparent"
},
{
"name": "--pf-c-accordion__toggle--before--Top",
"default": "0"
},
{
"name": "--pf-c-accordion__toggle--hover--BackgroundColor",
"default": "var(--pf-global--BackgroundColor--200, #f0f0f0)"
},
{
"name": "--pf-c-accordion__toggle--focus--BackgroundColor",
"default": "var(--pf-global--BackgroundColor--200, #f0f0f0)"
},
{
"name": "--pf-c-accordion__toggle--active--BackgroundColor",
"default": "var(--pf-global--BackgroundColor--200, #f0f0f0)"
},
{
"name": "--pf-c-accordion__toggle--before--Width",
"default": "var(--pf-global--BorderWidth--lg, 3px)"
},
{
"name": "--pf-c-accordion__toggle--m-expanded--before--BackgroundColor",
"default": "var(--pf-global--primary-color--100, #06c)"
},
{
"name": "--pf-c-accordion__toggle-text--MaxWidth",
"default": "calc(100 - var(--pf-global--spacer--lg, 1.5rem))"
},
{
"name": "--pf-c-accordion__toggle--hover__toggle-text--Color",
"default": "var(--pf-global--link--Color, #06c)"
},
{
"name": "--pf-c-accordion__toggle--active__toggle-text--Color",
"default": "var(--pf-global--link--Color, #06c)"
},
{
"name": "--pf-c-accordion__toggle--active__toggle-text--FontWeight",
"default": "var(--pf-global--FontWeight--semi-bold, 700)"
},
{
"name": "--pf-c-accordion__toggle--focus__toggle-text--Color",
"default": "var(--pf-global--link--Color, #06c)"
},
{
"name": "--pf-c-accordion__toggle--focus__toggle-text--FontWeight",
"default": "var(--pf-global--FontWeight--semi-bold, 700)"
},
{
"name": "--pf-c-accordion__toggle--m-expanded__toggle-text--Color",
"default": "var(--pf-global--link--Color, #06c)"
},
{
"name": "--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight",
"default": "var(--pf-global--FontWeight--semi-bold, 700)"
},
{
"name": "--pf-c-accordion__toggle-icon--Transition",
"default": ".2s ease-in 0s"
},
{
"name": "--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate",
"default": "90deg"
},
{
"name": "--pf-c-accordion__expanded-content--Color",
"default": "var(--pf-global--Color--200, #6a6e73)"
},
{
"name": "--pf-c-accordion__expanded-content--FontSize",
"default": "var(--pf-global--FontSize--sm, 0.875rem)"
},
{
"name": "--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor",
"default": "var(--pf-global--primary-color--100, #06c)"
},
{
"name": "--pf-c-accordion__expanded-content--m-fixed--MaxHeight",
"default": "9.375rem"
},
{
"name": "--pf-c-accordion__expanded-content-body--PaddingTop",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"name": "--pf-c-accordion__expanded-content-body--PaddingRight",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion__expanded-content-body--PaddingBottom",
"default": "var(--pf-global--spacer--sm, 0.5rem)"
},
{
"name": "--pf-c-accordion__expanded-content-body--PaddingLeft",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop",
"default": "0"
},
{
"name": "--pf-c-accordion__expanded-content-body--before--BackgroundColor",
"default": "transparent"
},
{
"name": "--pf-c-accordion__expanded-content-body--before--Width",
"default": "var(--pf-global--BorderWidth--lg, 3px)"
},
{
"name": "--pf-c-accordion__expanded-content-body--before--Top",
"default": "0"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--PaddingTop",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--PaddingRight",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--PaddingBottom",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--PaddingLeft",
"default": "var(--pf-global--spacer--lg, 1.5rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--FontFamily",
"default": "var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--FontSize",
"default": "var(--pf-global--FontSize--xl, 1.25rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color",
"default": "var(--pf-global--Color--100, #151515)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color",
"default": "var(--pf-global--Color--100, #151515)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight",
"default": "var(--pf-global--FontWeight--normal, 400)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color",
"default": "var(--pf-global--Color--100, #151515)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight",
"default": "var(--pf-global--FontWeight--normal, 400)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color",
"default": "var(--pf-global--Color--100, #151515)"
},
{
"name": "--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight",
"default": "var(--pf-global--FontWeight--normal, 400)"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content--FontSize",
"default": "var(--pf-global--FontSize--md, 1rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content--Color",
"default": "var(--pf-global--Color--100, #151515)"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop",
"default": "0"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom",
"default": "var(--pf-global--spacer--md, 1rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom",
"default": "var(--pf-global--spacer--lg, 1.5rem)"
},
{
"name": "--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft",
"default": "var(--pf-global--spacer--lg, 1.5rem)"
},
{
"name": "--pf-c-accordion--m-bordered--BorderTopWidth",
"default": "var(--pf-global--BorderWidth--sm, 1px)"
},
{
"name": "--pf-c-accordion--m-bordered--BorderTopColor",
"default": "var(--pf-global--BorderColor--100, #d2d2d2)"
},
{
"name": "--pf-c-accordion--m-bordered__toggle--before--Top",
"default": "calc(-1 * var(--pf-global--BorderWidth--sm, 1px))"
},
{
"name": "--pf-c-accordion--m-bordered__toggle--after--BorderColor",
"default": "var(--pf-global--BorderColor--100, #d2d2d2)"
},
{
"name": "--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth",
"default": "0"
},
{
"name": "--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth",
"default": "var(--pf-global--BorderWidth--sm, 1px)"
},
{
"name": "--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth",
"default": "var(--pf-global--BorderWidth--sm, 1px)"
},
{
"name": "--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor",
"default": "var(--pf-global--BorderColor--100, #d2d2d2)"
}
],
"slots": [
{
"description": "Place the `pf-accordion-header` and `pf-accordion-panel` elements here."
}
],
"members": [
{
"kind": "field",
"name": "single",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When true, only one accordion panel may be expanded at a time",
"attribute": "single",
"reflects": true
},
{
"kind": "field",
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to apply the `bordered` style variant",
"attribute": "bordered",
"reflects": true
},
{
"kind": "field",
"name": "large",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to apply the `large` style variant",
"attribute": "large",
"reflects": true
},
{
"kind": "field",
"name": "fixed",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "fixed",
"reflects": true
},
{
"kind": "field",
"name": "expandedIndex",
"type": {
"text": "number[]"
},
"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": "#logger",
"privacy": "private",
"default": "new Logger(this)"
},
{
"kind": "field",
"name": "#initialized",
"privacy": "private",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "#mo",
"privacy": "private",
"default": "new MutationObserver(() => this.#init())"
},
{
"kind": "field",
"name": "#tabindex",
"privacy": "private"
},
{
"kind": "field",
"name": "#expandedIndex",
"privacy": "private",
"type": {
"text": "number[]"
},
"default": "[]"
},
{
"kind": "field",
"name": "expandedSets",
"type": {
"text": "Set<number>"
},
"privacy": "protected",
"default": "new Set<number>()"
},
{
"kind": "field",
"name": "#activeHeader",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "headers",
"type": {
"text": "PfAccordionHeader[]"
},
"readonly": true
},
{
"kind": "field",
"name": "panels",
"type": {
"text": "PfAccordionPanel[]"
},
"readonly": true
},
{
"kind": "method",
"name": "getUpdateComplete",
"privacy": "protected",
"return": {
"type": {
"text": "Promise<boolean>"
}
}
},
{
"kind": "method",
"name": "largeChanged",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
}
},
{
"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": "updateActiveHeader",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "#panelForHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "PfAccordionHeader"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#expandHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "PfAccordionHeader"
}
},
{
"name": "index",
"default": "this.#getIndex(header)"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#expandPanel",
"parameters": [
{
"name": "panel",
"type": {
"text": "PfAccordionPanel"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#collapseHeader",
"parameters": [
{
"name": "header",
"type": {
"text": "PfAccordionHeader"
}
},
{
"name": "index",
"default": "this.#getIndex(header)"
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#collapsePanel",
"parameters": [
{
"name": "panel",
"type": {
"text": "PfAccordionPanel"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "onChange",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "PfAccordionHeaderChangeEvent"
}
}
]
},
{
"kind": "method",
"name": "#allHeaders",
"return": {
"type": {
"text": "PfAccordionHeader[]"
}
},
"parameters": [
{
"name": "accordion",
"default": "this",
"type": {
"text": "PfAccordion"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#allPanels",
"return": {
"type": {
"text": "PfAccordionPanel[]"
}
},
"parameters": [
{
"name": "accordion",
"default": "this",
"type": {
"text": "PfAccordion"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "#getIndex",
"parameters": [
{
"name": "el",
"type": {
"text": "Element | null"
}
}
],
"privacy": "private"
},
{
"kind": "method",
"name": "updateAccessibility",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "expand",
"privacy": "public",
"return": {
"type": {
"text": "Promise<void>"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "index (0-based) of the panel to expand"
}
],
"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": "collapse",
"privacy": "public",
"return": {
"type": {
"text": "Promise<void>"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "index (0-based) of the panel to collapse"
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to collapse."
},
{
"kind": "method",
"name": "toggle",
"privacy": "public",
"return": {
"type": {
"text": "Promise<void>"
}
},
"parameters": [
{
"name": "index",
"type": {
"text": "number"
},
"description": "index (0-based) of the panel to toggle"
}
],
"description": "Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse."
},
{
"kind": "method",
"name": "expandAll",
"privacy": "public",
"return": {
"type": {
"text": "Promise<void>"
}
},
"description": "Expands all accordion items."
},
{
"kind": "method",
"name": "collapseAll",
"privacy": "public",
"return": {
"type": {
"text": "Promise<void>"
}
},
"description": "Collapses all accordion items."
}
],
"events": [
{
"type": {
"text": "AccordionExpandEvent"
},
"description": "when a panel expands",
"name": "expand"
},
{
"type": {
"text": "AccordionCollapseEvent"
},
"description": "when a panel collapses",
"name": "collapse"
}
],
"attributes": [
{
"name": "single",
"type": {
"text": "boolean"
},
"default": "false",
"description": "When true, only one accordion panel may be expanded at a time",
"fieldName": "single"
},
{
"name": "bordered",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to apply the `bordered` style variant",
"fieldName": "bordered"
},
{
"name": "large",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to apply the `large` style variant",
"fieldName": "large"
},
{
"name": "fixed",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "fixed"
},
{
"name": "expanded-index",
"type": {
"text": "number[]"
},
"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"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"summary": "Toggle the visibility of sections of content",
"tagName": "pf-accordion",
"customElement": true,
"demos": [
{
"url": "https://patternflyelements.org/components/accordion/demo/",
"source": {
"href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-accordion/demo/pf-accordion.html"
}
},
{
"url": "https://patternflyelements.org/components/accordion/demo/bordered/",
"source": {
"href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-accordion/demo/bordered.html"
}
},
{
"url": "https://patternflyelements.org/components/accordion/demo/content-attributes/",
"source": {
"href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-accordion/demo/content-attributes.html"
}
},
{
"url": "https://patternflyelements.org/components/accordion/demo/fixed-panel/",
"source": {
"href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-accordion/demo/fixed-panel.html"
}
},
{
"url": "https://patternflyelements.org/components/accordion/demo/nested/",
"source": {
"href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-accordion/demo/nested.html"
}
},
{
"url": "https://patternflyelements.org/components/accordion/demo/single-expanded-panel/",
"source": {
"href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pf-accordion/demo/single-expanded-panel.html"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./pf-accordion-header.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./pf-accordion-panel.js"
}
},
{
"kind": "js",
"name": "PfAccordionExpandEvent",
"declaration": {
"name": "PfAccordionExpandEvent",
"module": "pf-accordion/pf-accordion.js"
}
},
{
"kind": "js",
"name": "PfAccordionCollapseEvent",
"declaration": {
"name": "PfAccordionCollapseEvent",
"module": "pf-accordion/pf-accordion.js"
}
},
{
"kind": "js",
"name": "PfAccordion",
"declaration": {
"name": "PfAccordion",
"module": "pf-accordion/pf-accordion.js"
}
},
{
"kind": "custom-element-definition",
"name": "pf-accordion",
"declaration": {
"name": "PfAccordion",
"module": "pf-accordion/pf-accordion.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "pf-avatar/pf-avatar.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "PfAvatarLoadEvent",
"members": [
{
"kind": "field",
"type": {
"text": "Event",
"name": "Event"
},
"name": "originalEvent",
"privacy": "public"
}
],
"superclass": {
"name": "Event",
"module": "global:"
}
},
{
"kind": "class",
"description": "An **avatar** is a visual used to represent a user. It may contain