@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/wm-flyout/wm-flyout.js

@@ -0,0 +1,651 @@
+import { h, Host } from "@stencil/core";
+import { csvToArray, debounce, getLastFocusableDescendant } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+/**
+ * Slide-in panel that renders over the main content as a modal dialog. Used for detail views,
+ * multi-step workflows, and forms that require focus without navigating away from the page.
+ *
+ * @category Communication
+ *
+ * @slot - Main content of the flyout body.
+ *
+ * @keyboardInteraction
+ * - **Escape**: Fires `wmFlyoutCloseTriggered` (the host application is responsible for setting `open` to false).
+ * - **Tab**: Cycles forward through focusable elements; wraps from the last element back to the first.
+ * - **Shift+Tab**: Cycles backward; wraps from the first element to the last footer button.
+ *
+ * @accessibility
+ * - Rendered as a `<dialog>` element with `aria-labelledby` pointing to the heading.
+ * - Focus is trapped inside the flyout while open and returns to the trigger element on close.
+ * - Call `focusHeading()` after updating content in a multi-step workflow so screen readers
+ *   announce the new heading.
+ *
+ * @usageNotes
+ * - Always render the component on page load — do not conditionally mount/unmount based on
+ *   visibility. Control visibility with the `open` prop instead.
+ * - The flyout does not close on outside clicks; the host application must handle close events
+ *   and set `open` to false.
+ * - In React, set `open` imperatively via a ref (`ref.current.open = true/false`), and open the
+ *   flyout from a click handler on the trigger element.
+ * - Use `element-to-focus` to shift initial focus away from the default close button, e.g. to
+ *   the `primary` footer button or a specific element id for form workflows.
+ * - In a multi-step workflow, drive `heading`, `breadcrumb`, `primaryText`, and `secondaryText`
+ *   from React state so they update on re-render. Call `ref.current.focusHeading()` inside a
+ *   `useEffect` that runs after the step state change so screen readers announce the new heading.
+ * - Apply content padding via a container query on the flyout body wrapper so it reduces
+ *   automatically on narrower flyout widths:
+ *   ```css
+ *   .flyout-content { padding: 1.25rem 1.875rem; }
+ *   @container flyout (width <= 25.875rem) {
+ *     .flyout-content { padding: 0.75rem 1rem; }
+ *   }
+ *   ```
+ *
+ * @example {html} Basic flyout
+ * <button onclick="document.getElementById('edit-profile').open = true">Open flyout</button>
+ *
+ * <wm-flyout id="edit-profile" heading="Edit profile" eyebrow="Student"
+ *   subheading="Update your information below"
+ *   primary-text="Save" secondary-text="Cancel" info-text="* Required fields">
+ *   <div class="flyout-content">
+ *     <wm-input label="First name *"></wm-input>
+ *     <wm-input label="Last name *"></wm-input>
+ *     <wm-input label="Email" type="email"></wm-input>
+ *   </div>
+ * </wm-flyout>
+ *
+ * @example {react} Basic flyout
+ * // Set open imperatively via ref.
+ * const flyoutRef = useRef(null);
+ *
+ * const openFlyout = () => { flyoutRef.current.open = true; };
+ * const closeFlyout = () => { flyoutRef.current.open = false; };
+ *
+ * <WmButton onClick={openFlyout}>Open flyout</WmButton>
+ *
+ * <WmFlyout
+ *   ref={flyoutRef}
+ *   heading="Edit profile"
+ *   eyebrow="Student"
+ *   subheading="Update your information below"
+ *   primaryText="Save"
+ *   secondaryText="Cancel"
+ *   infoText="* Required fields"
+ *   onWmFlyoutCloseTriggered={closeFlyout}
+ *   onWmFlyoutSecondaryTriggered={closeFlyout}
+ *   onWmFlyoutPrimaryTriggered={closeFlyout}
+ * >
+ *   <div className="flyout-content">
+ *     <WmInput label="First name *" />
+ *     <WmInput label="Last name *" />
+ *     <WmInput label="Email" type="email" />
+ *   </div>
+ * </WmFlyout>
+ *
+ * @example {html} Multi-step flyout with breadcrumbs
+ * <button onclick="document.getElementById('multi-step').open = true">Open multi-step flyout</button>
+ *
+ * <wm-flyout id="multi-step" heading="Vestibulum convallis"
+ *   breadcrumb="Vestibulum convallis"
+ *   primary-text="Next" secondary-text="Cancel">
+ *   <div id="step1" class="flyout-content"><p>Step 1 content</p></div>
+ *   <div id="step2" class="flyout-content" style="display:none"><p>Step 2 content</p></div>
+ * </wm-flyout>
+ *
+ * @example {react} Multi-step flyout with breadcrumbs
+ * // Drive heading/breadcrumb/primaryText/secondaryText from step state so React keeps them
+ * // in sync on re-render. Use useEffect to call focusHeading() after the DOM has updated.
+ * const flyoutRef = useRef(null);
+ * const [step, setStep] = useState(0);
+ * const [focusHeading, setFocusHeading] = useState(false);
+ *
+ * const steps = [
+ *   { heading: "Vestibulum convallis", breadcrumb: "Vestibulum convallis", primaryText: "Next", secondaryText: "Cancel" },
+ *   { heading: "Dignissim magna", breadcrumb: "Vestibulum convallis,Dignissim magna", primaryText: "Submit", secondaryText: "Back" },
+ * ];
+ *
+ * useEffect(() => {
+ *   if (focusHeading) {
+ *     flyoutRef.current.focusHeading();
+ *     setFocusHeading(false);
+ *   }
+ * }, [step, focusHeading]);
+ *
+ * const goToStep = (idx) => { setStep(idx); setFocusHeading(true); };
+ * const handlePrimary = () => { step === 0 ? goToStep(1) : (flyoutRef.current.open = false); };
+ * const handleSecondary = () => { step === 0 ? (flyoutRef.current.open = false) : goToStep(0); };
+ *
+ * <WmButton onClick={() => { setStep(0); flyoutRef.current.open = true; }}>Open flyout</WmButton>
+ *
+ * <WmFlyout
+ *   ref={flyoutRef}
+ *   heading={steps[step].heading}
+ *   breadcrumb={steps[step].breadcrumb}
+ *   primaryText={steps[step].primaryText}
+ *   secondaryText={steps[step].secondaryText}
+ *   onWmFlyoutPrimaryTriggered={handlePrimary}
+ *   onWmFlyoutSecondaryTriggered={handleSecondary}
+ *   onWmFlyoutCloseTriggered={() => { flyoutRef.current.open = false; }}
+ *   onWmFlyoutBreadcrumbClicked={(ev) => goToStep(ev.detail.index)}
+ * >
+ *   {step === 0 && <div className="flyout-content"><WmInput label="Program name *" /></div>}
+ *   {step === 1 && <div className="flyout-content"><WmInput label="Start date" /></div>}
+ * </WmFlyout>
+ *
+ * @requiredSetup
+ * - Drive `open` from your own state: true to show the flyout, false to hide it.
+ * - Handle `wmFlyoutCloseTriggered` by setting `open = false`. It covers the close button and
+ *   Escape, which are the only close paths -- there is no outside-click dismissal.
+ * - Handle `wmFlyoutPrimaryTriggered` and `wmFlyoutSecondaryTriggered` for whichever footer buttons
+ *   `primary-text` and `secondary-text` render, setting `open = false` to dismiss.
+ * - For multi-step flows, drive `heading`, `breadcrumb`, and the button text from state, call
+ *   `focusHeading()` after each step change, and handle `wmFlyoutBreadcrumbClicked` (`event.detail`
+ *   is `{ breadcrumb, index }`) to step backwards.
+ *
+ */
+export class Flyout {
+    constructor() {
+        this.debouncedCheckBreadcrumbOverflow = debounce(this.checkBreadcrumbOverflow, 30);
+        this.eyebrow = undefined;
+        this.heading = undefined;
+        this.subheading = undefined;
+        this.flyoutWidth = "45rem";
+        this.primaryText = undefined;
+        this.secondaryText = undefined;
+        this.infoText = undefined;
+        this.breadcrumb = undefined;
+        this.elementToFocus = "";
+        this.open = false;
+        this.returnFocusEl = undefined;
+        this.isBreadcrumbsOverflowing = false;
+    }
+    get lastFocusableEl() {
+        if (this.primaryText) {
+            return this.el.shadowRoot.querySelector("#primary-button");
+        }
+        if (this.secondaryText) {
+            return this.el.shadowRoot.querySelector("#secondary-button");
+        }
+        let lastFocusableDescendant = null;
+        if (this.el.firstElementChild) {
+            lastFocusableDescendant = getLastFocusableDescendant(this.el.firstElementChild);
+        }
+        if (lastFocusableDescendant) {
+            return lastFocusableDescendant;
+        }
+        return this.closeButtonEl; // fallback
+    }
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            customElementToFocus = this.el.shadowRoot.querySelector(`#${this.elementToFocus}-button`);
+        }
+        else if (this.elementToFocus) {
+            customElementToFocus = this.el.querySelector(`#${this.elementToFocus}`);
+            if (!customElementToFocus) {
+                console.warn(`wm-flyout: The component couldn't find an element matching the id you passed for 'elementToFocus' (${this.elementToFocus}). It will fall back to the default and focus the close button when the flyout opens.`);
+            }
+        }
+        return customElementToFocus || this.closeButtonEl;
+    }
+    componentWillLoad() {
+        if (!this.heading) {
+            console.error("wm-flyout: heading is a required property");
+        }
+        this.el.focus = () => {
+            this.focusOnOpenEl.focus();
+        };
+        this.el.style.setProperty("--flyout-width", this.flyoutWidth);
+    }
+    componentDidLoad() {
+        // Initialize and attach resize observer
+        this.resizeObserver = new ResizeObserver(() => {
+            this.debouncedCheckBreadcrumbOverflow();
+        });
+        this.resizeObserver.observe(this.dialogEl);
+        if (this.open) {
+            this.showFlyout();
+        }
+    }
+    checkBreadcrumbOverflow() {
+        if (this.breadcrumbsMeasureEl && this.breadcrumbsEl && this.open) {
+            this.isBreadcrumbsOverflowing = this.breadcrumbsMeasureEl.offsetWidth > this.breadcrumbsEl.offsetWidth;
+        }
+    }
+    handleOpenChange(newValue) {
+        if (newValue && !this.dialogEl.open) {
+            this.showFlyout();
+        }
+        else if (!newValue && this.dialogEl.open) {
+            this.hideFlyout();
+        }
+    }
+    setFlyoutWidth() {
+        this.el.style.setProperty("--flyout-width", this.flyoutWidth);
+    }
+    /**
+     * @description Moves focus to the flyout's heading element. Call this after updating flyout
+     * content in a multi-step workflow so screen readers announce the new heading to the user.
+     * @returns A promise that resolves once focus has been applied.
+     */
+    async focusHeading() {
+        this.headingEl.focus();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.wmFlyoutCloseTriggered.emit();
+        }
+    }
+    handleEndBookendFocus() {
+        const firstBreadcrumbButton = this.el.shadowRoot.querySelector(".breadcrumb-button");
+        if (firstBreadcrumbButton) {
+            firstBreadcrumbButton.focus();
+        }
+        else {
+            this.closeButtonEl.focus();
+        }
+    }
+    showFlyout() {
+        this.returnFocusEl = document.activeElement;
+        this.initialBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden"; // Prevents background scrolling
+        this.dialogEl.showModal();
+        requestAnimationFrame(() => {
+            this.checkBreadcrumbOverflow();
+            this.focusOnOpenEl.focus();
+        });
+    }
+    hideFlyout() {
+        document.body.style.overflow = this.initialBodyOverflow; // TypeScript doesn't like that this can be undefined, but we do want to assign undefined if that's what initialBodyOverFlow is set to.
+        this.dialogEl.close();
+        // Return focus to the trigger once the dialog has closed, if focus fell back to the body.
+        setTimeout(() => {
+            if (this.returnFocusEl && document.activeElement === document.body) {
+                if (this.returnFocusEl.tagName === "WM-MENUITEM") {
+                    this.returnFocusEl = this.returnFocusEl.parentElement;
+                }
+                this.returnFocusEl.focus();
+            }
+        }, 20);
+    }
+    renderBreadcrumbList() {
+        if (this.breadcrumb) {
+            const breadcrumbNames = csvToArray(this.breadcrumb);
+            const shouldTruncate = this.isBreadcrumbsOverflowing && breadcrumbNames.length > 2;
+            const breadcrumbsToRender = shouldTruncate ? breadcrumbNames.slice(-2) : breadcrumbNames;
+            return (h("div", { class: "breadcrumbs" }, h("div", { class: "breadcrumbs-measure", ref: (el) => (this.breadcrumbsMeasureEl = el) }, breadcrumbNames.map((name, idx) => (h("span", { class: "breadcrumb-item" }, h("span", null, name), idx < breadcrumbNames.length - 1 && h("span", { class: "separator" }, ">"))))), h("div", { class: "breadcrumbs-container", ref: (el) => (this.breadcrumbsEl = el) }, shouldTruncate && (h("span", { class: "breadcrumb-item" }, h("span", { class: "ellipsis" }, "..."), h("span", { class: "separator" }, ">"))), breadcrumbsToRender.map((breadcrumbName, idx) => this.renderBreadcrumb(breadcrumbName, shouldTruncate ? idx === 1 : idx === breadcrumbNames.length - 1)))));
+        }
+    }
+    renderBreadcrumb(breadcrumbName, isLast) {
+        return (h("span", { class: "breadcrumb-item" }, isLast ? (h("span", { class: "current" }, breadcrumbName)) : (h("wm-button", { class: "breadcrumb-button", "button-type": "textonly", onClick: () => this.wmFlyoutBreadcrumbClicked.emit({
+                breadcrumb: breadcrumbName,
+                index: csvToArray(this.breadcrumb).indexOf(breadcrumbName),
+            }) }, breadcrumbName)), !isLast && h("span", { class: "separator" }, ">")));
+    }
+    renderHeader() {
+        return (h("div", { class: "flyout-header" }, h("div", { class: "header-left" }, this.renderBreadcrumbList(), this.eyebrow && h("div", { class: "eyebrow" }, this.eyebrow), h("h2", { id: "heading", class: "heading", tabIndex: -1, ref: (el) => (this.headingEl = el) }, this.heading), this.subheading && h("p", { class: "subheading" }, this.subheading)), h("div", { class: "header-right" }, h("wm-button", { ref: (el) => (this.closeButtonEl = el), class: "close-button", "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, onClick: () => this.wmFlyoutCloseTriggered.emit() }))));
+    }
+    renderFooter() {
+        const hasFooter = this.primaryText || this.secondaryText || this.infoText;
+        if (hasFooter) {
+            return (h("div", { class: `flyout-footer ${this.infoText ? "has-info" : ""}` }, this.infoText && h("div", { class: "info-text" }, this.infoText), h("div", { class: "button-group" }, this.secondaryText && (h("wm-button", { id: "secondary-button", "button-type": "secondary", onClick: () => this.wmFlyoutSecondaryTriggered.emit() }, this.secondaryText)), this.primaryText && (h("wm-button", { id: "primary-button", "button-type": "primary", onClick: () => this.wmFlyoutPrimaryTriggered.emit() }, this.primaryText)))));
+        }
+    }
+    render() {
+        return (h(Host, { key: 'de4b5f597cc2e9fa94f0385df1d3b3b8d886f50d' }, h("dialog", { key: 'e89892a086afa301a9939bf1c5c8abda987f910f', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'c0714dbbf4c6365be710b6705f30ca81d009fd53', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'ca6b64011bd3993a80db682e8a913c8a0392f3a9', class: "flyout-content" }, h("slot", { key: 'ec4f277c68885adfbe6b5379117ba8b6bfee0891' })), this.renderFooter(), h("div", { key: '27c997321b543179b24bfe6759c29a877685932f', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+    }
+    static get is() { return "wm-flyout"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-flyout.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-flyout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eyebrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Small label displayed above the heading. Useful for context like a category or record type."
+                        }],
+                    "text": ""
+                },
+                "attribute": "eyebrow",
+                "reflect": false
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Heading text displayed at the top of the flyout. Also used as the dialog's accessible name."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Subtitle text displayed below the heading."
+                        }],
+                    "text": ""
+                },
+                "attribute": "subheading",
+                "reflect": false
+            },
+            "flyoutWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "CSS width value for the flyout panel. Capped at 90% of the viewport width,\nand at 100% on viewports narrower than 534px."
+                        }, {
+                            "name": "default",
+                            "text": "\"45rem\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "flyout-width",
+                "reflect": false,
+                "defaultValue": "\"45rem\""
+            },
+            "primaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for the primary footer button. When set, a primary button is rendered\nin the footer. Fires `wmFlyoutPrimaryTriggered` when clicked."
+                        }],
+                    "text": ""
+                },
+                "attribute": "primary-text",
+                "reflect": false
+            },
+            "secondaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label for the secondary footer button. When set, a secondary button is rendered\nin the footer. Fires `wmFlyoutSecondaryTriggered` when clicked."
+                        }],
+                    "text": ""
+                },
+                "attribute": "secondary-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Informational text displayed in the lower-left corner of the footer\n(e.g. `\"* Required fields\"`)."
+                        }],
+                    "text": ""
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "breadcrumb": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Comma-separated list of breadcrumb labels rendered above the heading.\nThe last item is displayed as plain text (current step); earlier items are rendered as\nbuttons that fire `wmFlyoutBreadcrumbClicked`."
+                        }],
+                    "text": ""
+                },
+                "attribute": "breadcrumb",
+                "reflect": false
+            },
+            "elementToFocus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Element to focus when the flyout opens. Pass `\"primary\"` or `\"secondary\"` to\nfocus the corresponding footer button, or an element `id` to focus a specific element in the\nflyout body. Defaults to the close button."
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "element-to-focus",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls the open/closed state of the flyout. Always render the component on\npage load and toggle this prop rather than conditionally mounting/unmounting the element."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "returnFocusEl": {},
+            "isBreadcrumbsOverflowing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmFlyoutCloseTriggered",
+                "name": "wmFlyoutCloseTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the close button is clicked, Escape is pressed, or the native\ndialog close event fires. The host application must set `open` to false in response."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmFlyoutPrimaryTriggered",
+                "name": "wmFlyoutPrimaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the primary footer button is clicked."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmFlyoutSecondaryTriggered",
+                "name": "wmFlyoutSecondaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the secondary footer button is clicked."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmFlyoutBreadcrumbClicked",
+                "name": "wmFlyoutBreadcrumbClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when a breadcrumb button (any non-last breadcrumb) is clicked."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "{{ breadcrumb: string, index: number }} breadcrumb \u2014 the label of the clicked breadcrumb; index \u2014 its zero-based position in the original CSV list."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ breadcrumb: string; index: number }",
+                    "resolved": "{ breadcrumb: string; index: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusHeading": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "description",
+                            "text": "Moves focus to the flyout's heading element. Call this after updating flyout\ncontent in a multi-step workflow so screen readers announce the new heading to the user."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves once focus has been applied."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "flyoutWidth",
+                "methodName": "setFlyoutWidth"
+            }];
+    }
+}