@patternfly/elements 3.0.2 → 4.0.1

package/pf-accordion/pf-accordion.js

@@ -1,86 +1,37 @@
-import { __decorate } from "tslib";
-import { observed } from '@patternfly/pfe-core/decorators.js';
+var _PfAccordion_instances, _PfAccordion_logger, _PfAccordion_initialized, _PfAccordion_mo, _PfAccordion_tabindex, _PfAccordion_expandedIndex, _PfAccordion_activeHeader_get, _PfAccordion_init, _PfAccordion_panelForHeader, _PfAccordion_expandHeader, _PfAccordion_expandPanel, _PfAccordion_collapseHeader, _PfAccordion_collapsePanel, _PfAccordion_allHeaders, _PfAccordion_allPanels, _PfAccordion_getIndex;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import { listen } from '@patternfly/pfe-core/decorators/listen.js';
 import { property } from 'lit/decorators/property.js';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { BaseAccordion } from './BaseAccordion.js';
-import { BaseAccordionHeader } from './BaseAccordionHeader.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { NumberListConverter } from '@patternfly/pfe-core';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { PfAccordionHeader, PfAccordionHeaderChangeEvent } from './pf-accordion-header.js';
+import { PfAccordionPanel } from './pf-accordion-panel.js';
 export * from './pf-accordion-header.js';
 export * from './pf-accordion-panel.js';
 import { css } from "lit";
 const style = css `:host {\n\t--pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__toggle--before--BackgroundColor: transparent;\n\t--pf-c-accordion__toggle--before--Top: 0;\n\t--pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));\n\t--pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n\t--pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n\t--pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n\t--pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;\n\t--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;\n\t--pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;\n\t--pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;\n\t--pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;\n\t--pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-accordion__expanded-content-body--before--Top: 0;\n\t--pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);\n\t--pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n\t--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px));\n\t--pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;\n\t--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\tcolor: var(--pf-global--Color--100, #151515);\n\tbackground-color: var(--pf-c-accordion--BackgroundColor);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:first-child),\n:host([large]) ::slotted(pf-accordion-header:first-child) {\n  display: block;\n  border-top: 1px solid var(--accordion__bordered--Color);\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),\n:host([large]) ::slotted(pf-accordion-header:not(:first-child)) {\n  display: block;\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),\n:host([large]) ::slotted(pf-accordion-header:is([expanded])) {\n  display: block;\n  border-bottom: 0;\n}\n\n:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),\n:host([large]) ::slotted(pf-accordion-panel:is([expanded])) {\n  display: block;\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n`;
-/**
- * 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.
- * @summary Toggle the visibility of sections of content
- * @fires {AccordionExpandEvent} expand - when a panel expands
- * @fires {AccordionCollapseEvent} collapse - when a panel collapses
- * @slot
- *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.
- * @cssprop --pf-c-accordion--BackgroundColor {@default var(--pf-global--BackgroundColor--100, #fff)}
- * @cssprop --pf-c-accordion__toggle--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)}
- * @cssprop --pf-c-accordion__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion__toggle--PaddingBottom {@default var(--pf-global--spacer--sm, 0.5rem)}
- * @cssprop --pf-c-accordion__toggle--PaddingLeft {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion__toggle--before--BackgroundColor {@default transparent}
- * @cssprop --pf-c-accordion__toggle--before--Top {@default 0}
- * @cssprop --pf-c-accordion__toggle--hover--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}
- * @cssprop --pf-c-accordion__toggle--focus--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}
- * @cssprop --pf-c-accordion__toggle--active--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}
- * @cssprop --pf-c-accordion__toggle--before--Width {@default var(--pf-global--BorderWidth--lg, 3px)}
- * @cssprop --pf-c-accordion__toggle--m-expanded--before--BackgroundColor {@default var(--pf-global--primary-color--100, #06c)}
- * @cssprop --pf-c-accordion__toggle-text--MaxWidth {@default calc(100% - var(--pf-global--spacer--lg, 1.5rem))}
- * @cssprop --pf-c-accordion__toggle--hover__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
- * @cssprop --pf-c-accordion__toggle--active__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
- * @cssprop --pf-c-accordion__toggle--active__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}
- * @cssprop --pf-c-accordion__toggle--focus__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
- * @cssprop --pf-c-accordion__toggle--focus__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}
- * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}
- * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}
- * @cssprop --pf-c-accordion__toggle-icon--Transition {@default .2s ease-in 0s}
- * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate {@default 90deg}
- * @cssprop --pf-c-accordion__expanded-content--Color {@default var(--pf-global--Color--200, #6a6e73)}
- * @cssprop --pf-c-accordion__expanded-content--FontSize {@default var(--pf-global--FontSize--sm, 0.875rem)}
- * @cssprop --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor {@default var(--pf-global--primary-color--100, #06c)}
- * @cssprop --pf-c-accordion__expanded-content--m-fixed--MaxHeight {@default 9.375rem}
- * @cssprop --pf-c-accordion__expanded-content-body--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)}
- * @cssprop --pf-c-accordion__expanded-content-body--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion__expanded-content-body--PaddingBottom {@default var(--pf-global--spacer--sm, 0.5rem)}
- * @cssprop --pf-c-accordion__expanded-content-body--PaddingLeft {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop {@default 0}
- * @cssprop --pf-c-accordion__expanded-content-body--before--BackgroundColor {@default transparent}
- * @cssprop --pf-c-accordion__expanded-content-body--before--Width {@default var(--pf-global--BorderWidth--lg, 3px)}
- * @cssprop --pf-c-accordion__expanded-content-body--before--Top {@default 0}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingTop {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingBottom {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingLeft {@default var(--pf-global--spacer--lg, 1.5rem)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--FontFamily {@default var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--FontSize {@default var(--pf-global--FontSize--xl, 1.25rem)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}
- * @cssprop --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content--FontSize {@default var(--pf-global--FontSize--md, 1rem)}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content--Color {@default var(--pf-global--Color--100, #151515)}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop {@default 0}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom {@default var(--pf-global--spacer--md, 1rem)}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom {@default var(--pf-global--spacer--lg, 1.5rem)}
- * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft {@default var(--pf-global--spacer--lg, 1.5rem)}
- * @cssprop --pf-c-accordion--m-bordered--BorderTopWidth {@default var(--pf-global--BorderWidth--sm, 1px)}
- * @cssprop --pf-c-accordion--m-bordered--BorderTopColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}
- * @cssprop --pf-c-accordion--m-bordered__toggle--before--Top {@default calc(-1 * var(--pf-global--BorderWidth--sm, 1px))}
- * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}
- * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth {@default 0}
- * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth {@default var(--pf-global--BorderWidth--sm, 1px)}
- * @cssprop --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth {@default var(--pf-global--BorderWidth--sm, 1px)}
- * @cssprop --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}
- */
-let PfAccordion = class PfAccordion extends BaseAccordion {
+export class PfAccordionExpandEvent extends Event {
+    constructor(toggle, panel) {
+        super('expand', { bubbles: true, cancelable: true });
+        this.toggle = toggle;
+        this.panel = panel;
+    }
+}
+export class PfAccordionCollapseEvent extends Event {
+    constructor(toggle, panel) {
+        super('collapse', { bubbles: true, cancelable: true });
+        this.toggle = toggle;
+        this.panel = panel;
+    }
+}
+let PfAccordion = class PfAccordion extends LitElement {
     constructor() {
         super(...arguments);
+        _PfAccordion_instances.add(this);
         /** When true, only one accordion panel may be expanded at a time */
         this.single = false;
         /** Whether to apply the `bordered` style variant */
@@ -88,39 +39,268 @@ let PfAccordion = class PfAccordion extends BaseAccordion {
         /** Whether to apply the `large` style variant */
         this.large = false;
         this.fixed = false;
+        _PfAccordion_logger.set(this, new Logger(this));
+        // actually is read in #init, by the `||=` operator
+        // eslint-disable-next-line no-unused-private-class-members
+        _PfAccordion_initialized.set(this, false);
+        _PfAccordion_mo.set(this, new MutationObserver(() => __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_init).call(this)));
+        _PfAccordion_tabindex.set(this, RovingTabindexController.of(this, {
+            getItems: () => this.headers,
+        }));
+        _PfAccordion_expandedIndex.set(this, []);
+        this.expandedSets = new Set();
+    }
+    /**
+     * Sets and reflects the currently expanded accordion 0-based indexes.
+     * Use commas to separate multiple indexes.
+     * ```html
+     * <pf-accordion expanded-index="1,2">
+     *   ...
+     * </pf-accordion>
+     * ```
+     */
+    get expandedIndex() {
+        return __classPrivateFieldGet(this, _PfAccordion_expandedIndex, "f");
+    }
+    set expandedIndex(value) {
+        const old = __classPrivateFieldGet(this, _PfAccordion_expandedIndex, "f");
+        __classPrivateFieldSet(this, _PfAccordion_expandedIndex, value, "f");
+        __classPrivateFieldGet(this, _PfAccordion_tabindex, "f").atFocusedItemIndex = value.at(-1) ?? -1;
+        if (JSON.stringify(old) !== JSON.stringify(value)) {
+            this.requestUpdate('expandedIndex', old);
+            this.collapseAll().then(async () => {
+                for (const i of this.expandedIndex) {
+                    await this.expand(i);
+                }
+            });
+        }
+    }
+    get headers() {
+        return __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_allHeaders).call(this);
+    }
+    get panels() {
+        return __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_allPanels).call(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _PfAccordion_mo, "f").observe(this, { childList: true });
+        __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_init).call(this);
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
     }
     async firstUpdated() {
-        let index = null;
-        if (this.single) {
-            const allHeaders = [...this.querySelectorAll('pf-accordion-header')];
-            const lastExpanded = allHeaders.filter(x => x.hasAttribute('expanded')).pop();
-            if (lastExpanded) {
-                index = allHeaders.indexOf(lastExpanded);
+        let lastExpandedIndex;
+        const { headers, single } = this;
+        const lastExpanded = headers.filter(x => x.hasAttribute('expanded')).pop();
+        if (lastExpanded) {
+            lastExpandedIndex = headers.indexOf(lastExpanded);
+        }
+        headers.forEach((header, index) => {
+            if (header.expanded && (!single || index === lastExpandedIndex)) {
+                __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_expandHeader).call(this, header, index);
+                const panel = __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_panelForHeader).call(this, header);
+                if (panel) {
+                    __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_expandPanel).call(this, panel);
+                }
             }
+        });
+    }
+    async getUpdateComplete() {
+        const c = await super.getUpdateComplete();
+        const results = await Promise.all([
+            ...__classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_allHeaders).call(this).map(x => x.updateComplete),
+            ...__classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_allPanels).call(this).map(x => x.updateComplete),
+        ]);
+        return c && results.every(Boolean);
+    }
+    largeChanged() {
+        for (const el of [...this.headers, ...this.panels]) {
+            el.toggleAttribute('large', this.large);
         }
-        await super.firstUpdated();
-        if (index !== null) {
-            this.headers.forEach((_, i) => {
-                this.headers.at(i)?.toggleAttribute('expanded', i === index);
-                this.panels.at(i)?.toggleAttribute('expanded', i === index);
-            });
+    }
+    updateActiveHeader() {
+        if (__classPrivateFieldGet(this, _PfAccordion_instances, "a", _PfAccordion_activeHeader_get)
+            && __classPrivateFieldGet(this, _PfAccordion_instances, "a", _PfAccordion_activeHeader_get) !== this.headers.at(__classPrivateFieldGet(this, _PfAccordion_tabindex, "f").atFocusedItemIndex)) {
+            __classPrivateFieldGet(this, _PfAccordion_tabindex, "f").atFocusedItemIndex = this.headers.indexOf(__classPrivateFieldGet(this, _PfAccordion_instances, "a", _PfAccordion_activeHeader_get));
+        }
+    }
+    onChange(event) {
+        if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {
+            const index = __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_getIndex).call(this, event.target);
+            if (event.expanded) {
+                this.expand(index);
+            }
+            else {
+                this.collapse(index);
+            }
+            event.stopPropagation();
         }
     }
-    async expand(index, parentAccordion) {
+    updateAccessibility() {
+        const { headers } = this;
+        // For each header in the accordion, attach the aria connections
+        headers.forEach(header => {
+            const panel = __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_panelForHeader).call(this, header);
+            if (panel) {
+                header.setAttribute('aria-controls', panel.id);
+                panel.setAttribute('aria-labelledby', header.id);
+                panel.hidden = !panel.expanded;
+            }
+        });
+    }
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to expand.
+     * Accepts an optional parent accordion to search for headers and panels.
+     * @param index index (0-based) of the panel to expand
+     */
+    async expand(index) {
         if (index === -1) {
             return;
         }
-        const allHeaders = this.headers;
         // Get all the headers and capture the item by index value
         if (this.single) {
             await Promise.all([
-                ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),
+                ...this.headers.map((header, index) => header.expanded && this.collapse(index)),
             ]);
         }
-        await super.expand(index, parentAccordion);
+        const header = this.headers[index];
+        if (!header) {
+            return;
+        }
+        const panel = __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_panelForHeader).call(this, header);
+        if (!panel) {
+            return;
+        }
+        // If the header and panel exist, open both
+        __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_expandHeader).call(this, header, index);
+        __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_expandPanel).call(this, panel);
+        this.dispatchEvent(new PfAccordionExpandEvent(header, panel));
+        await this.updateComplete;
+    }
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to collapse.
+     * @param index index (0-based) of the panel to collapse
+     */
+    async collapse(index) {
+        const header = this.headers.at(index);
+        const panel = this.panels.at(index);
+        if (!header || !panel) {
+            return;
+        }
+        __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_collapseHeader).call(this, header);
+        __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_collapsePanel).call(this, panel);
+        this.dispatchEvent(new PfAccordionCollapseEvent(header, panel));
+        await this.updateComplete;
+    }
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
+     * @param index index (0-based) of the panel to toggle
+     */
+    async toggle(index) {
+        const { headers } = this;
+        const header = headers[index];
+        if (!header.expanded) {
+            await this.expand(index);
+        }
+        else {
+            await this.collapse(index);
+        }
+    }
+    /**
+     * Expands all accordion items.
+     */
+    async expandAll() {
+        this.headers.forEach(header => __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_expandHeader).call(this, header));
+        this.panels.forEach(panel => __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_expandPanel).call(this, panel));
+        await this.updateComplete;
     }
+    /**
+     * Collapses all accordion items.
+     */
+    async collapseAll() {
+        this.headers.forEach(header => __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_collapseHeader).call(this, header));
+        this.panels.forEach(panel => __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_collapsePanel).call(this, panel));
+        await this.updateComplete;
+    }
+};
+_PfAccordion_logger = new WeakMap();
+_PfAccordion_initialized = new WeakMap();
+_PfAccordion_mo = new WeakMap();
+_PfAccordion_tabindex = new WeakMap();
+_PfAccordion_expandedIndex = new WeakMap();
+_PfAccordion_instances = new WeakSet();
+_PfAccordion_activeHeader_get = function _PfAccordion_activeHeader_get() {
+    const { headers } = this;
+    const index = headers.findIndex(header => header.matches(':focus,:focus-within'));
+    return index > -1 ? headers.at(index) : undefined;
+};
+_PfAccordion_init = 
+/**
+ * Initialize the accordion by connecting headers and panels
+ * with aria controls and labels; set up the default disclosure
+ * state if not set by the author; and check the URL for default
+ * open
+ */
+async function _PfAccordion_init() {
+    __classPrivateFieldSet(this, _PfAccordion_initialized, __classPrivateFieldGet(this, _PfAccordion_initialized, "f") || !!await this.updateComplete, "f");
+    this.updateAccessibility();
+};
+_PfAccordion_panelForHeader = function _PfAccordion_panelForHeader(header) {
+    const next = header.nextElementSibling;
+    if (!(next instanceof PfAccordionPanel)) {
+        return void __classPrivateFieldGet(this, _PfAccordion_logger, "f").error('Sibling element to a header needs to be a panel');
+    }
+    else {
+        return next;
+    }
+};
+_PfAccordion_expandHeader = function _PfAccordion_expandHeader(header, index = __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_getIndex).call(this, header)) {
+    // If this index is not already listed in the expandedSets array, add it
+    this.expandedSets.add(index);
+    __classPrivateFieldSet(this, _PfAccordion_expandedIndex, [...this.expandedSets], "f");
+    header.expanded = true;
+};
+_PfAccordion_expandPanel = function _PfAccordion_expandPanel(panel) {
+    panel.expanded = true;
+    panel.hidden = false;
+};
+_PfAccordion_collapseHeader = async function _PfAccordion_collapseHeader(header, index = __classPrivateFieldGet(this, _PfAccordion_instances, "m", _PfAccordion_getIndex).call(this, header)) {
+    if (!this.expandedSets) {
+        await this.updateComplete;
+    }
+    this.expandedSets.delete(index);
+    header.expanded = false;
+    await header.updateComplete;
+};
+_PfAccordion_collapsePanel = async function _PfAccordion_collapsePanel(panel) {
+    await panel.updateComplete;
+    if (!panel.expanded) {
+        return;
+    }
+    panel.expanded = false;
+    panel.hidden = true;
+};
+_PfAccordion_allHeaders = function _PfAccordion_allHeaders(accordion = this) {
+    return Array.from(accordion.children ?? []).filter((x) => x instanceof PfAccordionHeader);
+};
+_PfAccordion_allPanels = function _PfAccordion_allPanels(accordion = this) {
+    return Array.from(accordion.children ?? []).filter((x) => x instanceof PfAccordionPanel);
+};
+_PfAccordion_getIndex = function _PfAccordion_getIndex(el) {
+    if (el instanceof PfAccordionHeader) {
+        return this.headers.findIndex(header => header.id === el.id);
+    }
+    if (el instanceof PfAccordionPanel) {
+        return this.panels.findIndex(panel => panel.id === el.id);
+    }
+    __classPrivateFieldGet(this, _PfAccordion_logger, "f").warn('The #getIndex method expects to receive a header or panel element.');
+    return -1;
 };
 PfAccordion.styles = [style];
+PfAccordion.version = "4.0.1";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfAccordion.prototype, "single", void 0);
@@ -128,14 +308,23 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], PfAccordion.prototype, "bordered", void 0);
 __decorate([
-    observed(function largeChanged() {
-        [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));
-    }),
     property({ type: Boolean, reflect: true })
 ], PfAccordion.prototype, "large", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfAccordion.prototype, "fixed", void 0);
+__decorate([
+    property({ attribute: 'expanded-index', converter: NumberListConverter })
+], PfAccordion.prototype, "expandedIndex", null);
+__decorate([
+    observes('large')
+], PfAccordion.prototype, "largeChanged", null);
+__decorate([
+    listen('focusin')
+], PfAccordion.prototype, "updateActiveHeader", null);
+__decorate([
+    listen('change')
+], PfAccordion.prototype, "onChange", null);
 PfAccordion = __decorate([
     customElement('pf-accordion')
 ], PfAccordion);

package/pf-accordion/pf-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { observed } from '@patternfly/pfe-core/decorators.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\n/**\n * 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.\n * @summary Toggle the visibility of sections of content\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n * @slot\n *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n * @cssprop --pf-c-accordion--BackgroundColor {@default var(--pf-global--BackgroundColor--100, #fff)}\n * @cssprop --pf-c-accordion__toggle--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)}\n * @cssprop --pf-c-accordion__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion__toggle--PaddingBottom {@default var(--pf-global--spacer--sm, 0.5rem)}\n * @cssprop --pf-c-accordion__toggle--PaddingLeft {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion__toggle--before--BackgroundColor {@default transparent}\n * @cssprop --pf-c-accordion__toggle--before--Top {@default 0}\n * @cssprop --pf-c-accordion__toggle--hover--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}\n * @cssprop --pf-c-accordion__toggle--focus--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}\n * @cssprop --pf-c-accordion__toggle--active--BackgroundColor {@default var(--pf-global--BackgroundColor--200, #f0f0f0)}\n * @cssprop --pf-c-accordion__toggle--before--Width {@default var(--pf-global--BorderWidth--lg, 3px)}\n * @cssprop --pf-c-accordion__toggle--m-expanded--before--BackgroundColor {@default var(--pf-global--primary-color--100, #06c)}\n * @cssprop --pf-c-accordion__toggle-text--MaxWidth {@default calc(100% - var(--pf-global--spacer--lg, 1.5rem))}\n * @cssprop --pf-c-accordion__toggle--hover__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}\n * @cssprop --pf-c-accordion__toggle--active__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}\n * @cssprop --pf-c-accordion__toggle--active__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}\n * @cssprop --pf-c-accordion__toggle--focus__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}\n * @cssprop --pf-c-accordion__toggle--focus__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}\n * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-text--Color {@default var(--pf-global--link--Color, #06c)}\n * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight {@default var(--pf-global--FontWeight--semi-bold, 700)}\n * @cssprop --pf-c-accordion__toggle-icon--Transition {@default .2s ease-in 0s}\n * @cssprop --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate {@default 90deg}\n * @cssprop --pf-c-accordion__expanded-content--Color {@default var(--pf-global--Color--200, #6a6e73)}\n * @cssprop --pf-c-accordion__expanded-content--FontSize {@default var(--pf-global--FontSize--sm, 0.875rem)}\n * @cssprop --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor {@default var(--pf-global--primary-color--100, #06c)}\n * @cssprop --pf-c-accordion__expanded-content--m-fixed--MaxHeight {@default 9.375rem}\n * @cssprop --pf-c-accordion__expanded-content-body--PaddingTop {@default var(--pf-global--spacer--sm, 0.5rem)}\n * @cssprop --pf-c-accordion__expanded-content-body--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion__expanded-content-body--PaddingBottom {@default var(--pf-global--spacer--sm, 0.5rem)}\n * @cssprop --pf-c-accordion__expanded-content-body--PaddingLeft {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop {@default 0}\n * @cssprop --pf-c-accordion__expanded-content-body--before--BackgroundColor {@default transparent}\n * @cssprop --pf-c-accordion__expanded-content-body--before--Width {@default var(--pf-global--BorderWidth--lg, 3px)}\n * @cssprop --pf-c-accordion__expanded-content-body--before--Top {@default 0}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingTop {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingBottom {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--PaddingLeft {@default var(--pf-global--spacer--lg, 1.5rem)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--FontFamily {@default var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--FontSize {@default var(--pf-global--FontSize--xl, 1.25rem)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color {@default var(--pf-global--Color--100, #151515)}\n * @cssprop --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight {@default var(--pf-global--FontWeight--normal, 400)}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content--FontSize {@default var(--pf-global--FontSize--md, 1rem)}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content--Color {@default var(--pf-global--Color--100, #151515)}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop {@default 0}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom {@default var(--pf-global--spacer--md, 1rem)}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom {@default var(--pf-global--spacer--lg, 1.5rem)}\n * @cssprop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft {@default var(--pf-global--spacer--lg, 1.5rem)}\n * @cssprop --pf-c-accordion--m-bordered--BorderTopWidth {@default var(--pf-global--BorderWidth--sm, 1px)}\n * @cssprop --pf-c-accordion--m-bordered--BorderTopColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}\n * @cssprop --pf-c-accordion--m-bordered__toggle--before--Top {@default calc(-1 * var(--pf-global--BorderWidth--sm, 1px))}\n * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}\n * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth {@default 0}\n * @cssprop --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth {@default var(--pf-global--BorderWidth--sm, 1px)}\n * @cssprop --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth {@default var(--pf-global--BorderWidth--sm, 1px)}\n * @cssprop --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor {@default var(--pf-global--BorderColor--100, #d2d2d2)}\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends BaseAccordion {\n  static readonly styles = [style];\n\n  /** When true, only one accordion panel may be expanded at a time */\n  @property({ reflect: true, type: Boolean }) single = false;\n\n  /** Whether to apply the `bordered` style variant */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Whether to apply the `large` style variant */\n  @observed(function largeChanged(this: PfAccordion) {\n    [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));\n  })\n  @property({ type: Boolean, reflect: true }) large = false;\n\n  @property({ type: Boolean, reflect: true }) fixed = false;\n\n  async firstUpdated() {\n    let index: number | null = null;\n    if (this.single) {\n      const allHeaders = [...this.querySelectorAll('pf-accordion-header')];\n      const lastExpanded = allHeaders.filter(x => x.hasAttribute('expanded')).pop();\n      if (lastExpanded) {\n        index = allHeaders.indexOf(lastExpanded);\n      }\n    }\n    await super.firstUpdated();\n    if (index !== null) {\n      this.headers.forEach((_, i) => {\n        this.headers.at(i)?.toggleAttribute('expanded', i === index);\n        this.panels.at(i)?.toggleAttribute('expanded', i === index);\n      });\n    }\n  }\n\n  override async expand(index: number, parentAccordion?: BaseAccordion) {\n    if (index === -1) {\n      return;\n    }\n\n    const allHeaders: BaseAccordionHeader[] = this.headers;\n\n    // Get all the headers and capture the item by index value\n    if (this.single) {\n      await Promise.all([\n        ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),\n      ]);\n    }\n\n    await super.expand(index, parentAccordion);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion': PfAccordion;\n  }\n}\n"]}
+{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { listen } from '@patternfly/pfe-core/decorators/listen.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { NumberListConverter } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfAccordionHeader, PfAccordionHeaderChangeEvent } from './pf-accordion-header.js';\nimport { PfAccordionPanel } from './pf-accordion-panel.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\nexport class PfAccordionExpandEvent extends Event {\n  constructor(\n    public toggle: PfAccordionHeader,\n    public panel: PfAccordionPanel,\n  ) {\n    super('expand', { bubbles: true, cancelable: true });\n  }\n}\n\nexport class PfAccordionCollapseEvent extends Event {\n  constructor(\n    public toggle: PfAccordionHeader,\n    public panel: PfAccordionPanel,\n  ) {\n    super('collapse', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * 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.\n * @summary Toggle the visibility of sections of content\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n * @slot\n *       Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n * @cssprop [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]\n * @cssprop [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__toggle--before--BackgroundColor=transparent]\n * @cssprop [--pf-c-accordion__toggle--before--Top=0]\n * @cssprop [--pf-c-accordion__toggle--hover--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--focus--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]\n * @cssprop [--pf-c-accordion__toggle--hover__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--active__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle-icon--Transition=.2s ease-in 0s]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate=90deg]\n * @cssprop [--pf-c-accordion__expanded-content--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-accordion__expanded-content--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-accordion__expanded-content--m-fixed--MaxHeight=9.375rem]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop=0]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--BackgroundColor=transparent]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--Top=0]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontFamily=var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontSize=var(--pf-global--FontSize--xl, 1.25rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop=0]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-bordered--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered--BorderTopColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--before--Top=calc(-1 * var(--pf-global--BorderWidth--sm, 1px))]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth=0]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** When true, only one accordion panel may be expanded at a time */\n  @property({ reflect: true, type: Boolean }) single = false;\n\n  /** Whether to apply the `bordered` style variant */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Whether to apply the `large` style variant */\n  @property({ type: Boolean, reflect: true }) large = false;\n\n  @property({ type: Boolean, reflect: true }) fixed = false;\n\n  /**\n   * Sets and reflects the currently expanded accordion 0-based indexes.\n   * Use commas to separate multiple indexes.\n   * ```html\n   * <pf-accordion expanded-index=\"1,2\">\n   *   ...\n   * </pf-accordion>\n   * ```\n   */\n  @property({ attribute: 'expanded-index', converter: NumberListConverter })\n  get expandedIndex(): number[] {\n    return this.#expandedIndex;\n  }\n\n  set expandedIndex(value) {\n    const old = this.#expandedIndex;\n    this.#expandedIndex = value;\n    this.#tabindex.atFocusedItemIndex = value.at(-1) ?? -1;\n    if (JSON.stringify(old) !== JSON.stringify(value)) {\n      this.requestUpdate('expandedIndex', old);\n      this.collapseAll().then(async () => {\n        for (const i of this.expandedIndex) {\n          await this.expand(i);\n        }\n      });\n    }\n  }\n\n  #logger = new Logger(this);\n\n  // actually is read in #init, by the `||=` operator\n  // eslint-disable-next-line no-unused-private-class-members\n  #initialized = false;\n\n  #mo = new MutationObserver(() => this.#init());\n\n  #tabindex = RovingTabindexController.of(this, {\n    getItems: () => this.headers,\n  });\n\n  #expandedIndex: number[] = [];\n\n  protected expandedSets: Set<number> = new Set<number>();\n\n  get #activeHeader() {\n    const { headers } = this;\n    const index = headers.findIndex(header => header.matches(':focus,:focus-within'));\n    return index > -1 ? headers.at(index) : undefined;\n  }\n\n  get headers(): PfAccordionHeader[] {\n    return this.#allHeaders();\n  }\n\n  get panels(): PfAccordionPanel[] {\n    return this.#allPanels();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.#mo.observe(this, { childList: true });\n    this.#init();\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  async firstUpdated(): Promise<void> {\n    let lastExpandedIndex: number;\n    const { headers, single } = this;\n    const lastExpanded = headers.filter(x => x.hasAttribute('expanded')).pop();\n    if (lastExpanded) {\n      lastExpandedIndex = headers.indexOf(lastExpanded);\n    }\n    headers.forEach((header, index) => {\n      if (header.expanded && (!single || index === lastExpandedIndex)) {\n        this.#expandHeader(header, index);\n        const panel = this.#panelForHeader(header);\n        if (panel) {\n          this.#expandPanel(panel);\n        }\n      }\n    });\n  }\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const c = await super.getUpdateComplete();\n    const results = await Promise.all([\n      ...this.#allHeaders().map(x => x.updateComplete),\n      ...this.#allPanels().map(x => x.updateComplete),\n    ]);\n    return c && results.every(Boolean);\n  }\n\n  @observes('large')\n  protected largeChanged(): void {\n    for (const el of [...this.headers, ...this.panels]) {\n      el.toggleAttribute('large', this.large);\n    }\n  }\n\n  /**\n   * Initialize the accordion by connecting headers and panels\n   * with aria controls and labels; set up the default disclosure\n   * state if not set by the author; and check the URL for default\n   * open\n   */\n  async #init() {\n    this.#initialized ||= !!await this.updateComplete;\n    this.updateAccessibility();\n  }\n\n  @listen('focusin')\n  protected updateActiveHeader(): void {\n    if (this.#activeHeader\n        && this.#activeHeader !== this.headers.at(this.#tabindex.atFocusedItemIndex)) {\n      this.#tabindex.atFocusedItemIndex = this.headers.indexOf(this.#activeHeader);\n    }\n  }\n\n  #panelForHeader(header: PfAccordionHeader) {\n    const next = header.nextElementSibling;\n    if (!(next instanceof PfAccordionPanel)) {\n      return void this.#logger.error('Sibling element to a header needs to be a panel');\n    } else {\n      return next;\n    }\n  }\n\n  #expandHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n    // If this index is not already listed in the expandedSets array, add it\n    this.expandedSets.add(index);\n    this.#expandedIndex = [...this.expandedSets as Set<number>];\n    header.expanded = true;\n  }\n\n  #expandPanel(panel: PfAccordionPanel) {\n    panel.expanded = true;\n    panel.hidden = false;\n  }\n\n  async #collapseHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n    if (!this.expandedSets) {\n      await this.updateComplete;\n    }\n    this.expandedSets.delete(index);\n    header.expanded = false;\n    await header.updateComplete;\n  }\n\n  async #collapsePanel(panel: PfAccordionPanel) {\n    await panel.updateComplete;\n    if (!panel.expanded) {\n      return;\n    }\n\n    panel.expanded = false;\n    panel.hidden = true;\n  }\n\n  @listen('change')\n  protected onChange(event: PfAccordionHeaderChangeEvent): void {\n    if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {\n      const index = this.#getIndex(event.target);\n      if (event.expanded) {\n        this.expand(index);\n      } else {\n        this.collapse(index);\n      }\n      event.stopPropagation();\n    }\n  }\n\n  #allHeaders(accordion: PfAccordion = this): PfAccordionHeader[] {\n    return Array.from(accordion.children ?? []).filter((x): x is PfAccordionHeader =>\n      x instanceof PfAccordionHeader);\n  }\n\n  #allPanels(accordion: PfAccordion = this): PfAccordionPanel[] {\n    return Array.from(accordion.children ?? []).filter((x): x is PfAccordionPanel =>\n      x instanceof PfAccordionPanel);\n  }\n\n  #getIndex(el: Element | null) {\n    if (el instanceof PfAccordionHeader) {\n      return this.headers.findIndex(header => header.id === el.id);\n    }\n\n    if (el instanceof PfAccordionPanel) {\n      return this.panels.findIndex(panel => panel.id === el.id);\n    }\n\n    this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n    return -1;\n  }\n\n  public updateAccessibility(): void {\n    const { headers } = this;\n\n    // For each header in the accordion, attach the aria connections\n    headers.forEach(header => {\n      const panel = this.#panelForHeader(header);\n      if (panel) {\n        header.setAttribute('aria-controls', panel.id);\n        panel.setAttribute('aria-labelledby', header.id);\n        panel.hidden = !panel.expanded;\n      }\n    });\n  }\n\n  /**\n   * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n   * Accepts an optional parent accordion to search for headers and panels.\n   * @param index index (0-based) of the panel to expand\n   */\n  public async expand(index: number): Promise<void> {\n    if (index === -1) {\n      return;\n    }\n\n    // Get all the headers and capture the item by index value\n    if (this.single) {\n      await Promise.all([\n        ...this.headers.map((header, index) => header.expanded && this.collapse(index)),\n      ]);\n    }\n\n    const header = this.headers[index];\n    if (!header) {\n      return;\n    }\n\n    const panel = this.#panelForHeader(header);\n    if (!panel) {\n      return;\n    }\n\n    // If the header and panel exist, open both\n    this.#expandHeader(header, index);\n    this.#expandPanel(panel);\n\n    this.dispatchEvent(new PfAccordionExpandEvent(header, panel));\n\n    await this.updateComplete;\n  }\n\n  /**\n   * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n   * @param index index (0-based) of the panel to collapse\n   */\n  public async collapse(index: number): Promise<void> {\n    const header = this.headers.at(index);\n    const panel = this.panels.at(index);\n\n    if (!header || !panel) {\n      return;\n    }\n\n    this.#collapseHeader(header);\n    this.#collapsePanel(panel);\n\n    this.dispatchEvent(new PfAccordionCollapseEvent(header, panel));\n    await this.updateComplete;\n  }\n\n  /**\n   * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n   * @param index index (0-based) of the panel to toggle\n   */\n  public async toggle(index: number): Promise<void> {\n    const { headers } = this;\n    const header = headers[index];\n\n    if (!header.expanded) {\n      await this.expand(index);\n    } else {\n      await this.collapse(index);\n    }\n  }\n\n  /**\n   * Expands all accordion items.\n   */\n  public async expandAll(): Promise<void> {\n    this.headers.forEach(header => this.#expandHeader(header));\n    this.panels.forEach(panel => this.#expandPanel(panel));\n    await this.updateComplete;\n  }\n\n\n  /**\n   * Collapses all accordion items.\n   */\n  public async collapseAll(): Promise<void> {\n    this.headers.forEach(header => this.#collapseHeader(header));\n    this.panels.forEach(panel => this.#collapsePanel(panel));\n    await this.updateComplete;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-accordion': PfAccordion;\n  }\n}\n"]}

package/pf-accordion/test/pf-accordion.e2e.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-accordion';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-accordion.e2e.js.map

package/pf-accordion/test/pf-accordion.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-accordion.e2e.js","sourceRoot":"","sources":["pf-accordion.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,cAAc,CAAC;AAE/B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-accordion';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-accordion.e2e.js","sourceRoot":"","sources":["pf-accordion.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,cAAc,CAAC;AAE/B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-accordion';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}