ng-hub-ui-panels 21.2.0

package/fesm2022/ng-hub-ui-panels.mjs

@@ -0,0 +1,1080 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Renderer2, ElementRef, DestroyRef, viewChild, viewChildren, output, input, booleanAttribute, signal, computed, afterNextRender, RendererStyleFlags2, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, model, effect, TemplateRef, Directive } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Router, NavigationEnd, RouterOutlet } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { filter } from 'rxjs';
+
+/**
+ * Injectable defaults for every `<hub-panels>` in the application.
+ *
+ * Override at any injector level to change the defaults globally or for a
+ * feature subtree:
+ *
+ * ```ts
+ * providers: [{ provide: PanelsConfig, useValue: { ...new PanelsConfig(), type: 'pills' } }]
+ * ```
+ */
+class PanelsConfig {
+    /** Default navigation style — `'tabs'`, `'pills'` or `'accordion'`. */
+    type = 'tabs';
+    /** Whether keyboard navigation (arrows / Home / End / Delete) is enabled. */
+    isKeysAllowed = true;
+    /** Accessible label announced for the panel list. */
+    ariaLabel = 'Tabs';
+    /** Accessible label for the backward scroll button (scrollable mode). */
+    scrollBackwardAriaLabel = 'Scroll tabs backward';
+    /** Accessible label for the forward scroll button (scrollable mode). */
+    scrollForwardAriaLabel = 'Scroll tabs forward';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelsConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelsConfig, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelsConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Usable inner width of an element: `offsetWidth` minus horizontal paddings
+ * and borders. Used by the scrollable strip to size its scroll steps.
+ */
+function contentBoxWidth(element) {
+    const style = getComputedStyle(element);
+    return (element.offsetWidth -
+        parseFloat(style.paddingLeft) -
+        parseFloat(style.paddingRight) -
+        parseFloat(style.borderLeftWidth) -
+        parseFloat(style.borderRightWidth));
+}
+
+/**
+ * Reads a nested value from an object using dot-notation path syntax
+ * (e.g. `id`, `meta.key`). Returns `undefined` when the path cannot be
+ * resolved. Used by the panels' `bindValue` form-value mapping.
+ */
+function readByPath(source, path) {
+    if (source == null || !path) {
+        return undefined;
+    }
+    return path.split('.').reduce((currentValue, segment) => {
+        if (currentValue == null) {
+            return undefined;
+        }
+        return currentValue[segment];
+    }, source);
+}
+
+/**
+ * Content-panels container — the hub `panels` primitive.
+ *
+ * Projects `<hub-panel>` panes and renders them in one of three views:
+ *
+ * - **`tabs` / `pills`** — an accessible `tablist` of clickable headers
+ *   (roving tabindex, arrow/Home/End/Delete keys) above the active pane.
+ *   Panels with a `routerLink` switch the content area to a `<router-outlet>`
+ *   and the active panel follows the URL. With `scrollable`, overflowing
+ *   headers get backward/forward scroll buttons.
+ * - **`accordion`** — each panel renders as a stacked disclosure panel with an
+ *   animated collapse: clicking an open header closes it, `multiple` allows
+ *   several panels open at once and `flush` removes the outer chrome. All
+ *   panels start collapsed unless a panel is marked `[active]` or a form value
+ *   is bound. Routed panels are not supported in this view.
+ *
+ * The container implements `ControlValueAccessor`, so the active panel(s) can
+ * be bound as a form value (`ngModel` / `formControl`): each panel contributes
+ * its `value` (or its `id` by default), optionally narrowed with `bindValue`
+ * and compared with `compareWith`. With `multiple` the form value is an array.
+ *
+ * Theming is driven entirely by the `--hub-panels-*` CSS custom properties
+ * (see `panels.variables.scss`); the accordion view also honours the
+ * `--hub-accordion-*` ng-hub-ui contract as a compatibility fallback.
+ *
+ * @example
+ * ```html
+ * <hub-panels type="accordion" multiple [formControl]="openPanels">
+ *   <hub-panel heading="Fields" value="fields">…</hub-panel>
+ *   <hub-panel heading="Validations" value="validations">…</hub-panel>
+ * </hub-panels>
+ * ```
+ */
+class PanelsComponent {
+    #router = inject(Router);
+    #renderer = inject(Renderer2);
+    #elementRef = inject(ElementRef);
+    #destroyRef = inject(DestroyRef);
+    /** Container-wide defaults (aria labels, default type, keyboard toggle). */
+    config = inject(PanelsConfig);
+    /** Scrollable container hosting the panel headers (`tabs` / `pills` views). */
+    navScroller = viewChild('navScroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navScroller" }] : /* istanbul ignore next */ []));
+    /** Backward scroll button (only rendered while it can scroll back). */
+    prevBtn = viewChild('prevBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevBtn" }] : /* istanbul ignore next */ []));
+    /** Forward scroll button (only rendered while it can scroll forward). */
+    nextBtn = viewChild('nextBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextBtn" }] : /* istanbul ignore next */ []));
+    /** Parking lot that owns the projected panel hosts before they are placed. */
+    contentRoot = viewChild('contentRoot', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRoot" }] : /* istanbul ignore next */ []));
+    /** Visible block hosts used by `multiple` tabs / pills. */
+    multiplePaneHosts = viewChildren('multiplePaneHost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiplePaneHosts" }] : /* istanbul ignore next */ []));
+    /** Visible grouped blocks used by `multiple` tabs / pills. */
+    multipleBlocks = viewChildren('multipleBlock', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multipleBlocks" }] : /* istanbul ignore next */ []));
+    /** Emitted when the user activates (opens) a different panel. */
+    panelChange = output();
+    /** Whether the panel list is stacked beside the content (`tabs` / `pills`). */
+    vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether panel headers stretch to share the available width equally. */
+    justified = input(false, { ...(ngDevMode ? { debugName: "justified" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Visualization — `'tabs'` (default), `'pills'` or `'accordion'`. */
+    type = input(this.config.type, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Whether keyboard navigation is enabled. */
+    isKeysAllowed = input(this.config.isKeysAllowed, { ...(ngDevMode ? { debugName: "isKeysAllowed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether overflowing headers get backward/forward scroll buttons. */
+    scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accordion view: whether several panels may be expanded at once. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accordion view: edge-to-edge panels without outer borders or radius. */
+    flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Dot-notation path applied to each panel's `value` to obtain the emitted
+     * form value (e.g. `'meta.key'`). Empty by default — the raw value is used.
+     */
+    bindValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    /** Equality used to match form values against panel values. `===` by default. */
+    compareWith = input((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /** Registered panels, in projection order. */
+    panels = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    /** Currently active panel, if any (the first one, under `multiple`). */
+    activePanel = computed(() => this.panels().find((panel) => panel.active()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanel" }] : /* istanbul ignore next */ []));
+    /** Panel index lookup used by the strip templates and keyboard navigation. */
+    panelIndexMap = computed(() => new Map(this.panels().map((panel, index) => [panel, index])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelIndexMap" }] : /* istanbul ignore next */ []));
+    /** Whether the container renders the accordion visualization. */
+    isAccordionView = computed(() => this.type() === 'accordion', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAccordionView" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the container renders the chromeless `card` visualization: no
+     * navigation strip and every panel always visible, each styled as a card.
+     */
+    isCardView = computed(() => this.type() === 'card', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCardView" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether more than one panel may be active at once. Driven by `multiple`
+     * for every view, and always enabled in the `card` view, where all panels
+     * stay visible at once and must not deactivate one another.
+     */
+    allowsMultipleActive = computed(() => this.multiple() || this.isCardView(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowsMultipleActive" }] : /* istanbul ignore next */ []));
+    /** Whether the bound form control disabled the whole container. */
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the active panel routes its content through a `<router-outlet>`.
+     * Never true in the accordion view, where routed panels are not supported.
+     */
+    activePanelHasRouter = computed(() => !this.isAccordionView() && !this.allowsMultipleActive() && !!this.activePanel()?.routerUrl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanelHasRouter" }] : /* istanbul ignore next */ []));
+    /**
+     * In `multiple` tabs/pills, headers are partitioned into blocks. Every
+     * active panel starts a block; following inactive headers stay visible in
+     * that same block until the next active panel starts a new one.
+     */
+    multipleHeaderGroups = computed(() => {
+        if (!this.allowsMultipleActive() || this.isAccordionView()) {
+            return [];
+        }
+        const panels = this.panels();
+        if (!panels.length) {
+            return [];
+        }
+        const activeIndices = panels
+            .map((panel, index) => (panel.active() ? index : -1))
+            .filter((index) => index !== -1);
+        if (!activeIndices.length) {
+            return [{ headers: panels }];
+        }
+        return activeIndices.map((activeIndex, groupIndex) => {
+            const startIndex = groupIndex === 0 ? 0 : activeIndex;
+            const endIndex = activeIndices[groupIndex + 1] ?? panels.length;
+            return {
+                activePanel: panels[activeIndex],
+                headers: panels.slice(startIndex, endIndex)
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multipleHeaderGroups" }] : /* istanbul ignore next */ []));
+    /** Whether the strip cannot scroll further backward. */
+    backwardIsDisabled = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backwardIsDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether the strip cannot scroll further forward. */
+    forwardIsDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forwardIsDisabled" }] : /* istanbul ignore next */ []));
+    #isDestroyed = false;
+    #syncScheduled = false;
+    #viewInitialised = false;
+    #placementScheduled = false;
+    #multipleBlockSizingScheduled = false;
+    /** Last value written by the bound form control; `null` when no form. */
+    #formValue = null;
+    #onChange = () => undefined;
+    #onTouched = () => undefined;
+    constructor() {
+        this.#destroyRef.onDestroy(() => {
+            this.#isDestroyed = true;
+        });
+        afterNextRender(() => {
+            this.#viewInitialised = true;
+            this.updateScrollButtons();
+            this.setActivePanel();
+            // Re-apply any form value written before the panels' inputs were bound.
+            this.#applyFormValue();
+            this.#ensureActivePanel();
+            this.#schedulePanelPlacement();
+            this.#scheduleMultipleBlockSizing();
+            this.#router.events
+                .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.#destroyRef))
+                .subscribe(() => this.setActivePanel());
+        });
+    }
+    /**
+     * Registers a panel in the container. Called by `PanelComponent` on
+     * construction — not meant for manual use.
+     */
+    registerPanel(panel) {
+        this.panels.update((panels) => [...panels, panel]);
+        this.#scheduleSync();
+    }
+    /**
+     * Removes a panel from the container. `reselect` activates the closest
+     * enabled neighbour when the removed panel was active; `emit` fires the
+     * panel's `removed` output.
+     */
+    removePanel(panel, options = {}) {
+        const { reselect = true, emit = true } = options;
+        const panels = this.panels();
+        const index = panels.indexOf(panel);
+        if (index === -1 || this.#isDestroyed) {
+            return;
+        }
+        if (reselect && panel.active() && !this.isAccordionView()) {
+            const closestIndex = this.#closestEnabledIndex(index);
+            if (closestIndex !== -1) {
+                panels[closestIndex].active.set(true);
+            }
+        }
+        if (emit) {
+            panel.removed.emit(panel);
+        }
+        this.panels.update((currentPanels) => currentPanels.filter((candidate) => candidate !== panel));
+        // Detach the projected pane: the consumer template still owns the node,
+        // so removing the header alone would leave the pane content behind.
+        const paneElement = panel.elementRef.nativeElement;
+        if (paneElement.parentNode) {
+            this.#renderer.removeChild(paneElement.parentNode, paneElement);
+        }
+        if (panel.active()) {
+            panel.active.set(false);
+            this.#emitFormValue();
+        }
+        this.#scheduleSync();
+    }
+    /**
+     * Activates a panel on behalf of the user (`tabs` / `pills` views): marks it
+     * active, navigates when routed, and emits `panelChange`. In `multiple` mode
+     * clicking an active panel toggles it off (the panes render side by side);
+     * otherwise an already-active panel no-ops. Disabled panels always no-op.
+     */
+    selectPanel(panel) {
+        if (panel.disabled() || this.formDisabled()) {
+            return;
+        }
+        if (this.allowsMultipleActive()) {
+            if (panel.active()) {
+                panel.active.set(false);
+            }
+            else {
+                panel.active.set(true);
+                panel.navigate();
+                this.panelChange.emit({ prev: undefined, current: panel });
+            }
+            this.#emitFormValue();
+            this.#onTouched();
+            this.#schedulePanelPlacement();
+            return;
+        }
+        if (panel.active()) {
+            return;
+        }
+        const previousPanel = this.activePanel();
+        // Deactivate the previously active panel up front so the emitted form
+        // value reflects only the newly selected panel. The per-panel effect that
+        // enforces single-active runs asynchronously, so relying on it here would
+        // emit a stale value that still includes the previous panel.
+        if (previousPanel && previousPanel !== panel) {
+            previousPanel.active.set(false);
+        }
+        panel.active.set(true);
+        panel.navigate();
+        this.panelChange.emit({ prev: previousPanel, current: panel });
+        this.#emitFormValue();
+        this.#onTouched();
+        this.#schedulePanelPlacement();
+    }
+    /**
+     * Toggles a panel on behalf of the user (accordion view): an open panel
+     * closes, a closed one opens — closing the others unless `multiple`.
+     * Emits `panelChange` when a panel opens.
+     */
+    togglePanel(panel) {
+        if (panel.disabled() || this.formDisabled()) {
+            return;
+        }
+        if (panel.active()) {
+            panel.active.set(false);
+        }
+        else {
+            const previousPanel = this.allowsMultipleActive() ? undefined : this.activePanel();
+            panel.active.set(true);
+            this.panelChange.emit({ prev: previousPanel, current: panel });
+        }
+        this.#emitFormValue();
+        this.#onTouched();
+        this.#schedulePanelPlacement();
+    }
+    /**
+     * Marks the routed panel matching the current URL as active. Does not
+     * navigate — activation through this path is URL-driven. No-op in the
+     * accordion view, where routed panels are not supported.
+     */
+    setActivePanel() {
+        if (this.isAccordionView()) {
+            return;
+        }
+        const [route, queryString] = this.#router.url.split('?');
+        for (const panel of this.panels()) {
+            if (!panel.routerUrl()) {
+                continue;
+            }
+            let matches;
+            if (panel.pathMatch() === 'full') {
+                const currentUrl = queryString?.trim() ? `${route}?${queryString.trim()}` : route;
+                matches = currentUrl === panel.getFullRoute();
+            }
+            else {
+                matches = route === panel.getRoute();
+            }
+            if (matches) {
+                if (!panel.active()) {
+                    panel.active.set(true);
+                }
+                break;
+            }
+        }
+    }
+    // ── ControlValueAccessor ────────────────────────────────────────────────
+    /**
+     * Writes the form value into the container: panels whose (`bindValue`-mapped)
+     * value matches are activated, the rest are deactivated. With `multiple` an
+     * array is expected; otherwise a single value.
+     */
+    writeValue(value) {
+        if (value == null) {
+            this.#formValue = [];
+        }
+        else if (this.multiple()) {
+            this.#formValue = Array.isArray(value) ? [...value] : [value];
+        }
+        else {
+            this.#formValue = Array.isArray(value) ? value.slice(0, 1) : [value];
+        }
+        this.#applyFormValue();
+    }
+    /** Registers the form-control change callback. */
+    registerOnChange(onChange) {
+        this.#onChange = onChange;
+    }
+    /** Registers the form-control touched callback. */
+    registerOnTouched(onTouched) {
+        this.#onTouched = onTouched;
+    }
+    /** Enables/disables every panel header on behalf of the form control. */
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /** Keyboard navigation for the panel strip (arrows / Home / End / Delete). */
+    onPanelKeydown(event, index) {
+        if (!this.isKeysAllowed()) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                if (event.key === 'ArrowDown' && !this.vertical()) {
+                    return;
+                }
+                event.preventDefault();
+                this.#focusPanelAt(this.#stepEnabledIndex(index, 1));
+                return;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                if (event.key === 'ArrowUp' && !this.vertical()) {
+                    return;
+                }
+                event.preventDefault();
+                this.#focusPanelAt(this.#stepEnabledIndex(index, -1));
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.#focusPanelAt(this.panels().findIndex((panel) => !panel.disabled()));
+                return;
+            case 'End': {
+                event.preventDefault();
+                const panels = this.panels();
+                this.#focusPanelAt(panels.length - 1 - [...panels].reverse().findIndex((panel) => !panel.disabled()));
+                return;
+            }
+            case 'Delete': {
+                const panel = this.panels()[index];
+                if (panel?.removable()) {
+                    this.removePanel(panel);
+                    queueMicrotask(() => this.#focusPanelAt(Math.min(index, this.panels().length - 1)));
+                }
+            }
+        }
+    }
+    /**
+     * Keyboard navigation between accordion headers (arrows / Home / End /
+     * Delete). Enter and Space toggle natively through the button click.
+     */
+    onAccordionKeydown(event, panel) {
+        if (!this.isKeysAllowed()) {
+            return;
+        }
+        const index = this.panels().indexOf(panel);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.#focusPanelAt(this.#stepEnabledIndex(index, 1));
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.#focusPanelAt(this.#stepEnabledIndex(index, -1));
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.#focusPanelAt(this.panels().findIndex((candidate) => !candidate.disabled()));
+                return;
+            case 'End': {
+                event.preventDefault();
+                const panels = this.panels();
+                this.#focusPanelAt(panels.length - 1 - [...panels].reverse().findIndex((candidate) => !candidate.disabled()));
+                return;
+            }
+            case 'Delete': {
+                if (panel.removable()) {
+                    this.removePanel(panel);
+                    queueMicrotask(() => this.#focusPanelAt(Math.min(index, this.panels().length - 1)));
+                }
+            }
+        }
+    }
+    /** Recomputes the enabled/disabled state of the scroll buttons. */
+    updateScrollButtons() {
+        if (!this.scrollable() || this.isAccordionView()) {
+            return;
+        }
+        const scroller = this.navScroller()?.nativeElement;
+        if (!scroller) {
+            return;
+        }
+        const { scrollLeft, scrollWidth } = scroller;
+        this.backwardIsDisabled.set(scrollLeft <= 0);
+        this.forwardIsDisabled.set(scrollLeft + contentBoxWidth(scroller) + 1 >= scrollWidth);
+    }
+    /** Re-syncs scroll controls and multiple-block sizing on window resize. */
+    onWindowResize() {
+        this.updateScrollButtons();
+        this.#scheduleMultipleBlockSizing();
+    }
+    /** Updates the scroll buttons as the strip scrolls. */
+    onScroll() {
+        this.updateScrollButtons();
+    }
+    /** Global index of a panel within the projected strip order. */
+    panelIndex(panel) {
+        return this.panelIndexMap().get(panel) ?? -1;
+    }
+    /** Scrolls the panel headers one viewport backward. */
+    navBackward() {
+        const scroller = this.navScroller()?.nativeElement;
+        if (!scroller) {
+            return;
+        }
+        const step = contentBoxWidth(scroller) - this.#visibleScrollButtonsWidth();
+        scroller.scrollLeft = Math.max(scroller.scrollLeft - step, 0);
+    }
+    /** Scrolls the panel headers one viewport forward. */
+    navForward() {
+        const scroller = this.navScroller()?.nativeElement;
+        if (!scroller) {
+            return;
+        }
+        const step = contentBoxWidth(scroller) - this.#visibleScrollButtonsWidth();
+        const lastPosition = scroller.scrollWidth - step;
+        scroller.scrollLeft = Math.min(scroller.scrollLeft + step, lastPosition);
+    }
+    /** Width currently taken by the visible scroll buttons. */
+    #visibleScrollButtonsWidth() {
+        return [this.prevBtn()?.nativeElement, this.nextBtn()?.nativeElement].reduce((total, button) => (button ? total + contentBoxWidth(button) : total), 0);
+    }
+    /** Index of the enabled panel closest to `index`, or `-1` when none exists. */
+    #closestEnabledIndex(index) {
+        const panels = this.panels();
+        for (let step = 1; step <= panels.length; step += 1) {
+            const previous = panels[index - step];
+            if (previous && !previous.disabled()) {
+                return index - step;
+            }
+            const next = panels[index + step];
+            if (next && !next.disabled()) {
+                return index + step;
+            }
+        }
+        return -1;
+    }
+    /** Next enabled panel index from `index` in `direction`, wrapping around. */
+    #stepEnabledIndex(index, direction) {
+        const panels = this.panels();
+        for (let step = 1; step <= panels.length; step += 1) {
+            const candidate = (index + direction * step + panels.length * step) % panels.length;
+            if (!panels[candidate].disabled()) {
+                return candidate;
+            }
+        }
+        return index;
+    }
+    /** Moves DOM focus to the panel header at `index` (strip link or accordion button). */
+    #focusPanelAt(index) {
+        if (index < 0) {
+            return;
+        }
+        const selector = this.isAccordionView() ? '.hub-panels__accordion-btn' : '.hub-panels__nav-link';
+        const headers = this.#elementRef.nativeElement.querySelectorAll(selector);
+        headers[index]?.focus();
+    }
+    /**
+     * Coalesces post-registration/removal housekeeping into one microtask:
+     * re-applies the bound form value to the current panels, guarantees an
+     * active panel (non-routed `tabs` / `pills` containers without a bound
+     * form) and refreshes the scroll buttons after the strip changed size.
+     * Skipped until the first render — before it the projected panels' inputs
+     * are not bound yet, and the constructor's `afterNextRender` performs the
+     * initial pass instead.
+     */
+    #scheduleSync() {
+        if (this.#syncScheduled || this.#isDestroyed) {
+            return;
+        }
+        this.#syncScheduled = true;
+        queueMicrotask(() => {
+            this.#syncScheduled = false;
+            if (this.#isDestroyed || !this.#viewInitialised) {
+                return;
+            }
+            this.#applyFormValue();
+            this.#ensureActivePanel();
+            this.#schedulePanelPlacement();
+            this.updateScrollButtons();
+        });
+    }
+    /** Coalesces DOM moves for the projected `hub-panel` hosts. */
+    #schedulePanelPlacement() {
+        if (this.#placementScheduled || this.#isDestroyed) {
+            return;
+        }
+        this.#placementScheduled = true;
+        requestAnimationFrame(() => {
+            this.#placementScheduled = false;
+            if (this.#isDestroyed || !this.#viewInitialised) {
+                return;
+            }
+            this.#runPanelPlacementPass();
+            requestAnimationFrame(() => {
+                if (this.#isDestroyed || !this.#viewInitialised) {
+                    return;
+                }
+                this.#runPanelPlacementPass();
+            });
+        });
+    }
+    /** Performs one projected-panel placement pass plus dependent sizing. */
+    #runPanelPlacementPass() {
+        this.#placeProjectedPanels();
+        this.#scheduleMultipleBlockSizing();
+    }
+    /** Coalesces the DOM measurements needed by `multiple + vertical`. */
+    #scheduleMultipleBlockSizing() {
+        if (this.#multipleBlockSizingScheduled || this.#isDestroyed) {
+            return;
+        }
+        this.#multipleBlockSizingScheduled = true;
+        requestAnimationFrame(() => {
+            this.#multipleBlockSizingScheduled = false;
+            if (this.#isDestroyed || !this.#viewInitialised) {
+                return;
+            }
+            this.#syncMultipleBlockSizing();
+        });
+    }
+    /** Moves projected panel hosts into their visible multiple-block container. */
+    #placeProjectedPanels() {
+        const contentRoot = this.contentRoot()?.nativeElement;
+        if (!contentRoot) {
+            return;
+        }
+        if (!this.allowsMultipleActive() || this.isAccordionView()) {
+            for (const panel of this.panels()) {
+                const panelElement = panel.elementRef.nativeElement;
+                if (panelElement.parentElement !== contentRoot) {
+                    this.#renderer.appendChild(contentRoot, panelElement);
+                }
+            }
+            return;
+        }
+        const hostMap = new Map(Array.from(this.#elementRef.nativeElement.querySelectorAll('.hub-panels__multiple-layout .hub-panels__multiple-pane-host'))
+            .map((host) => [host.dataset['panelId'] ?? '', host]));
+        for (const panel of this.panels()) {
+            const panelElement = panel.elementRef.nativeElement;
+            const targetHost = hostMap.get(panel.id()) ?? contentRoot;
+            if (panelElement.parentElement !== targetHost) {
+                this.#renderer.appendChild(targetHost, panelElement);
+            }
+        }
+    }
+    /** Updates the minimum content width for each `multiple + vertical` block. */
+    #syncMultipleBlockSizing() {
+        for (const blockRef of this.multipleBlocks()) {
+            const block = blockRef.nativeElement;
+            this.#renderer.removeStyle(block, '--hub-panels-multiple-vertical-panel-min-width', RendererStyleFlags2.DashCase);
+            if (!this.vertical() || !this.allowsMultipleActive() || this.isAccordionView()) {
+                continue;
+            }
+            const header = block.querySelector(':scope > .hub-panels__header');
+            if (!(header instanceof HTMLElement)) {
+                continue;
+            }
+            const headerStackHeight = Math.ceil(header.getBoundingClientRect().height);
+            this.#renderer.setStyle(block, '--hub-panels-multiple-vertical-panel-min-width', `${headerStackHeight}px`, RendererStyleFlags2.DashCase);
+        }
+    }
+    /**
+     * Activates the first enabled panel when none is active. Skipped for the
+     * accordion view (panels start collapsed), for routed containers (the URL
+     * is the single source of truth) and when a form value is bound (the form
+     * is).
+     */
+    #ensureActivePanel() {
+        if (this.isAccordionView() || this.#formValue !== null) {
+            return;
+        }
+        if (this.allowsMultipleActive()) {
+            return;
+        }
+        const panels = this.panels();
+        if (!panels.length || panels.some((panel) => panel.active())) {
+            return;
+        }
+        if (panels.some((panel) => !!panel.routerUrl())) {
+            return;
+        }
+        panels.find((panel) => !panel.disabled())?.active.set(true);
+    }
+    /** Activates/deactivates panels so they mirror the bound form value. */
+    #applyFormValue() {
+        if (this.#formValue === null) {
+            return;
+        }
+        const compare = this.compareWith();
+        for (const panel of this.panels()) {
+            const panelValue = this.#comparableValue(panel);
+            const matches = this.#formValue.some((selectedValue) => compare(selectedValue, panelValue));
+            if (panel.active() !== matches) {
+                panel.active.set(matches);
+            }
+        }
+    }
+    /** Emits the current selection through the form-control callback. */
+    #emitFormValue() {
+        const compare = this.compareWith();
+        const activeValues = this.panels()
+            .filter((panel) => panel.active())
+            .map((panel) => this.#comparableValue(panel));
+        if (this.#formValue !== null) {
+            this.#formValue = [...activeValues];
+        }
+        // Deduplicate defensively when several panels share the same value.
+        const uniqueValues = activeValues.filter((value, index) => activeValues.findIndex((candidate) => compare(candidate, value)) === index);
+        this.#onChange(this.multiple() ? uniqueValues : (uniqueValues[0] ?? null));
+    }
+    /** Form value of a panel with the `bindValue` path applied. */
+    #comparableValue(panel) {
+        const rawValue = panel.formValue();
+        const bindPath = this.bindValue();
+        return bindPath ? readByPath(rawValue, bindPath) : rawValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PanelsComponent, isStandalone: true, selector: "hub-panels", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, justified: { classPropertyName: "justified", publicName: "justified", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isKeysAllowed: { classPropertyName: "isKeysAllowed", publicName: "isKeysAllowed", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelChange: "panelChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.hub-panels--tabs": "type() === 'tabs'", "class.hub-panels--pills": "type() === 'pills'", "class.hub-panels--card": "isCardView()", "class.hub-panels--vertical": "vertical() && !isAccordionView() && !isCardView()", "class.hub-panels--accordion": "isAccordionView()", "class.hub-panels--flush": "isAccordionView() && flush()", "class.hub-panels--multiple": "multiple()" }, classAttribute: "hub-panels" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PanelsComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "navScroller", first: true, predicate: ["navScroller"], descendants: true, isSignal: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true, isSignal: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true, isSignal: true }, { propertyName: "contentRoot", first: true, predicate: ["contentRoot"], descendants: true, isSignal: true }, { propertyName: "multiplePaneHosts", predicate: ["multiplePaneHost"], descendants: true, isSignal: true }, { propertyName: "multipleBlocks", predicate: ["multipleBlock"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isAccordionView() && !isCardView()) {\n\t@if (multiple()) {\n\t\t<div class=\"hub-panels__multiple-layout\">\n\t\t\t@for (group of multipleHeaderGroups(); track group.activePanel ?? group.headers[0]) {\n\t\t\t\t<div\n\t\t\t\t\t#multipleBlock\n\t\t\t\t\tclass=\"hub-panels hub-panels__multiple-block\"\n\t\t\t\t\t[class.hub-panels--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels--vertical]=\"vertical()\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"hub-panels__header\">\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (panel of group.headers; track panel) {\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, panelIndex(panel))\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t@if (!justified() && type() !== 'pills' && !vertical()) {\n\t\t\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (group.activePanel) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"hub-panels__content\"\n\t\t\t\t\t\t\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#multiplePaneHost\n\t\t\t\t\t\t\t\tclass=\"hub-panels__multiple-pane-host\"\n\t\t\t\t\t\t\t\t[attr.data-panel-id]=\"group.activePanel.id()\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<div class=\"hub-panels__header\">\n\t\t\t@if (scrollable() && !backwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#prevBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--backward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollBackwardAriaLabel\"\n\t\t\t\t\t(click)=\"navBackward()\"\n\t\t\t\t></button>\n\t\t\t}\n\n\t\t\t<div #navScroller class=\"hub-panels__nav-scroller\" (scroll)=\"onScroll()\">\n\t\t\t\t<ul\n\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t>\n\t\t\t\t\t@for (panel of panels(); track panel; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && index === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t\t@if (!justified() && type() !== 'pills') {\n\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (scrollable() && !forwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#nextBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--forward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollForwardAriaLabel\"\n\t\t\t\t\t(click)=\"navForward()\"\n\t\t\t\t></button>\n\t\t\t}\n\t\t</div>\n\t}\n}\n\n<div\n\t#contentRoot\n\tclass=\"hub-panels__content\"\n\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t[class.hub-panels__content--accordion]=\"isAccordionView()\"\n\t[class.hub-panels__content--multiple-parking]=\"!isAccordionView() && multiple()\"\n>\n\t@if (activePanelHasRouter()) {\n\t\t<router-outlet />\n\t} @else {\n\t\t<ng-content />\n\t}\n</div>\n", styles: [":where(.hub-panels){--hub-panels-flex-direction: row;--hub-panels-border-width: var(--hub-ref-border-width, 1px);--hub-panels-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-border-radius: var(--hub-ref-radius-md, .375rem);--hub-panels-content-bg: var(--hub-sys-surface-page, #fff);--hub-panels-header-bg: var(--hub-panels-content-bg);--hub-panels-content-box-shadow: none;--hub-panels-content-padding-x: var(--hub-ref-space-3, 1rem);--hub-panels-content-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-nav-btn-width: 1.5rem;--hub-panels-nav-btn-height: 1.5rem;--hub-panels-backward-btn-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23212529' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-panels-forward-btn-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23212529' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E\");--hub-panels-nav-link-padding-x: var(--hub-ref-space-3, 1rem);--hub-panels-nav-link-padding-y: var(--hub-ref-space-2, .5rem);--hub-panels-nav-link-color: var(--hub-sys-text-primary, #212529);--hub-panels-nav-link-hover-color: var(--hub-sys-color-primary-emphasis, #0a58ca);--hub-panels-nav-link-active-color: var(--hub-sys-color-primary, #0d6efd);--hub-panels-nav-link-active-bg: var(--hub-panels-content-bg);--hub-panels-nav-link-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-panels-tab-font-family: var(--hub-container-font-family, var(--hub-ref-font-family-base));--hub-panels-tab-font-size: var(--hub-container-font-size, var(--hub-ref-font-size-base, 1rem));--hub-panels-tab-font-weight: 500;--hub-panels-tab-line-height: var(--hub-ref-line-height-base, 1.5);--hub-panels-tab-padding-x: var(--hub-panels-nav-link-padding-x);--hub-panels-tab-padding-y: var(--hub-panels-nav-link-padding-y);--hub-panels-tab-gap: var(--hub-ref-space-2, .5rem);--hub-panels-tab-bg: transparent;--hub-panels-tab-color: var(--hub-panels-nav-link-color);--hub-panels-tab-border-width: var(--hub-panels-border-width);--hub-panels-tab-border-style: solid;--hub-panels-tab-border-color: transparent;--hub-panels-tab-border-radius: var(--hub-panels-border-radius);--hub-panels-tab-bg-hover: var(--hub-ref-surface-2, #f8f9fa);--hub-panels-tab-color-hover: var(--hub-panels-nav-link-hover-color);--hub-panels-tab-bg-active: var(--hub-panels-nav-link-active-bg);--hub-panels-tab-color-active: var(--hub-panels-nav-link-active-color);--hub-panels-tab-border-color-active: var(--hub-sys-color-primary, #0d6efd);--hub-panels-tab-bg-disabled: transparent;--hub-panels-tab-color-disabled: var(--hub-panels-nav-link-disabled-color);--hub-panels-tab-focus-ring-width: var(--hub-sys-focus-ring-width, .25rem);--hub-panels-tab-focus-ring-color: var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));--hub-panels-tab-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-panels-tab-active-shadow: 0 -.25rem .5rem rgba(0, 0, 0, .06);--hub-panels-tab-active-shadow-vertical: -.25rem 0 .5rem rgba(0, 0, 0, .06);--hub-panels-strip-margin-top: var(--hub-ref-space-2, .5rem);--hub-panels-nav-gap: 0;--hub-panels-pill-border-radius: 50rem;--hub-panels-pill-bg-active: var(--hub-sys-color-primary, #0d6efd);--hub-panels-pill-color-active: var(--hub-ref-color-white, #fff);--hub-panels-pill-gap: var(--hub-ref-space-2, .5rem);--hub-panels-pill-content-border-width: 0;--hub-panels-remove-btn-opacity: .6;--hub-panels-remove-btn-opacity-hover: 1;--hub-panels-nav-content-gap: var(--hub-ref-space-2, .5rem);--hub-panels-pane-min-width: 16rem;--hub-panels-pane-min-height: 8rem;--hub-panels-pane-gap: 0;--hub-panels-card-gap: var(--hub-ref-space-3, 1rem);--hub-panels-accordion-color: var(--hub-accordion-color, var(--hub-sys-text-primary, #212529));--hub-panels-accordion-bg: var(--hub-accordion-bg, var(--hub-sys-surface-page, #fff));--hub-panels-accordion-border-width: var(--hub-accordion-border-width, var(--hub-ref-border-width, 1px));--hub-panels-accordion-border-color: var(--hub-accordion-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-panels-accordion-border-radius: var(--hub-accordion-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-panels-accordion-inner-border-radius: var( --hub-accordion-inner-border-radius, calc(var(--hub-panels-accordion-border-radius) - var(--hub-panels-accordion-border-width)) );--hub-panels-accordion-btn-padding-x: var(--hub-accordion-btn-padding-x, 1.25rem);--hub-panels-accordion-btn-padding-y: var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem));--hub-panels-accordion-btn-color: var(--hub-accordion-btn-color, var(--hub-sys-text-primary, #212529));--hub-panels-accordion-btn-bg: var(--hub-accordion-btn-bg, var(--hub-sys-surface-page, #fff));--hub-panels-accordion-active-color: var(--hub-accordion-active-color, var(--hub-sys-color-primary, #0c63e4));--hub-panels-accordion-active-bg: var(--hub-accordion-active-bg, var(--hub-sys-color-primary-subtle, #e7f1ff));--hub-panels-accordion-icon-color: var(--hub-accordion-icon-color, var(--hub-panels-accordion-btn-color));--hub-panels-accordion-icon-active-color: var(--hub-accordion-icon-active-color, var(--hub-panels-accordion-active-color));--hub-panels-accordion-btn-icon-mask: var(--hub-accordion-btn-icon-mask, url(\"data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E\"));--hub-panels-accordion-btn-icon-width: var(--hub-accordion-btn-icon-width, 1.25rem);--hub-panels-accordion-btn-icon-transform: var(--hub-accordion-btn-icon-transform, rotate(-180deg));--hub-panels-accordion-btn-icon-transition: var(--hub-accordion-btn-icon-transition, transform .2s ease-in-out);--hub-panels-accordion-btn-focus-box-shadow: var( --hub-accordion-btn-focus-box-shadow, 0 0 0 var(--hub-sys-focus-ring-width, .25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25)) );--hub-panels-accordion-transition: var( --hub-accordion-transition, color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease );--hub-panels-accordion-collapse-transition-duration: var(--hub-accordion-collapse-transition-duration, .25s);--hub-panels-accordion-collapse-transition-easing: var( --hub-accordion-collapse-transition-easing, cubic-bezier(.4, 0, .2, 1) );--hub-panels-accordion-body-padding-x: var(--hub-accordion-body-padding-x, 1.25rem);--hub-panels-accordion-body-padding-y: var(--hub-accordion-body-padding-y, var(--hub-ref-space-3, 1rem))}\n", ".hub-panels{display:block;width:100%;box-sizing:border-box}.hub-panels,.hub-panels *,.hub-panels *:before,.hub-panels *:after{box-sizing:border-box}.hub-panels__header{display:flex;flex-direction:var(--hub-panels-flex-direction);align-items:stretch;background:var(--hub-panels-header-bg)}.hub-panels__scroll-btn{flex:0 0 auto;align-self:center;width:var(--hub-panels-nav-btn-width);height:var(--hub-panels-nav-btn-height);padding:0;border:0;cursor:pointer;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:1rem 1rem}.hub-panels__scroll-btn--backward{background-image:var(--hub-panels-backward-btn-bg)}.hub-panels__scroll-btn--forward{background-image:var(--hub-panels-forward-btn-bg)}.hub-panels__nav-scroller{display:flex;flex:1 1 auto;overflow-x:auto;background:var(--hub-panels-header-bg);scroll-behavior:smooth;scrollbar-width:none}.hub-panels__nav-scroller::-webkit-scrollbar{display:none}.hub-panels__nav{display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:var(--hub-panels-nav-gap);margin:0;padding:0;list-style:none}.hub-panels__nav--tabs{border-bottom:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__nav--tabs .hub-panels__nav-link{margin-bottom:calc(-1 * var(--hub-panels-border-width))}.hub-panels__nav--pills{gap:var(--hub-panels-pill-gap)}.hub-panels__nav--pills .hub-panels__nav-link{border-radius:var(--hub-panels-pill-border-radius)}.hub-panels__nav--pills .hub-panels__nav-link--active{color:var(--hub-panels-pill-color-active);background:var(--hub-panels-pill-bg-active);border-color:transparent}.hub-panels__nav--justified{flex:1 1 auto}.hub-panels__nav--justified .hub-panels__nav-item{flex:1 1 0}.hub-panels__nav--justified .hub-panels__nav-link{width:100%;justify-content:center}.hub-panels__nav--vertical{flex-direction:column}.hub-panels__nav--vertical.hub-panels__nav--tabs{border-bottom:0;border-inline-end:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__nav--vertical.hub-panels__nav--tabs .hub-panels__nav-link{margin-bottom:0;margin-inline-end:calc(-1 * var(--hub-panels-border-width))}.hub-panels__nav-item{display:flex;flex:0 0 auto}.hub-panels__nav-link{position:relative;display:inline-flex;align-items:center;gap:var(--hub-panels-tab-gap);padding:var(--hub-panels-tab-padding-y) var(--hub-panels-tab-padding-x);font-family:var(--hub-panels-tab-font-family);font-size:var(--hub-panels-tab-font-size);font-weight:var(--hub-panels-tab-font-weight);line-height:var(--hub-panels-tab-line-height);white-space:nowrap;color:var(--hub-panels-tab-color);background:var(--hub-panels-tab-bg);border-style:var(--hub-panels-tab-border-style);border-width:var(--hub-panels-tab-border-width);border-color:var(--hub-panels-tab-border-color);border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius:var(--hub-panels-tab-border-radius);cursor:pointer;transition:var(--hub-panels-tab-transition)}.hub-panels__nav-link:hover:not(:disabled):not(.hub-panels__nav-link--active){color:var(--hub-panels-tab-color-hover);background:var(--hub-panels-tab-bg-hover)}.hub-panels__nav-link:focus-visible{z-index:1;outline:0;box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__nav-link--active{color:var(--hub-panels-tab-color-active);background:var(--hub-panels-tab-bg-active);border-color:var(--hub-panels-tab-border-color-active)}.hub-panels__nav-link:disabled{color:var(--hub-panels-tab-color-disabled);background:var(--hub-panels-tab-bg-disabled);cursor:not-allowed}.hub-panels__remove-btn{display:inline-flex;align-items:center;line-height:1;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover{opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__spacer{flex:1 1 auto;background:var(--hub-panels-header-bg);border-bottom:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__content{padding:var(--hub-panels-content-padding-y) var(--hub-panels-content-padding-x);background:var(--hub-panels-content-bg);box-shadow:var(--hub-panels-content-box-shadow)}.hub-panels__content--accordion{padding:0;background:transparent;box-shadow:none}.hub-panels__content--multiple-parking{display:none}.hub-panels__multiple-layout{display:flex;align-items:stretch;gap:var(--hub-panels-pane-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}.hub-panels__multiple-block{display:flex;flex-direction:column;flex:1 0 var(--hub-panels-pane-min-width);align-self:stretch;min-width:var(--hub-panels-pane-min-width);min-height:100%}.hub-panels__multiple-block.hub-panels--vertical{flex-direction:row;flex:1 1 auto;width:100%;min-width:100%;min-height:var(--hub-panels-pane-min-height)}.hub-panels__multiple-block>.hub-panels__content{display:flex;flex:1 1 auto;min-height:0}.hub-panels__multiple-block.hub-panels--vertical>.hub-panels__content{flex:1 1 auto;width:auto;min-width:max(var(--hub-panels-pane-min-width),var(--hub-panels-multiple-vertical-panel-min-width, 0px))}.hub-panels__multiple-pane-host{display:flex;flex:1 1 auto;width:100%;min-height:0}.hub-panels__multiple-pane-host>.hub-panels__panel{flex:1 1 auto;width:100%;height:100%}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active{display:flex;flex-direction:column}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active>div{flex:1 1 auto;min-height:0}.hub-panels--vertical.hub-panels--multiple>.hub-panels__multiple-layout{flex-direction:column;align-items:stretch;width:100%}.hub-panels--pills.hub-panels--multiple.hub-panels--vertical>.hub-panels__multiple-layout>.hub-panels__multiple-block+.hub-panels__multiple-block{padding-top:var(--hub-panels-nav-content-gap);border-top:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__panel{display:none}.hub-panels__panel--active{display:block}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__header{margin-top:var(--hub-panels-strip-margin-top)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__content{border:var(--hub-panels-border-width) solid var(--hub-panels-border-color);border-top:0;border-end-start-radius:var(--hub-panels-border-radius);border-end-end-radius:var(--hub-panels-border-radius)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple) .hub-panels__nav--tabs .hub-panels__nav-link--active{border-color:var(--hub-panels-border-color);border-bottom-color:var(--hub-panels-tab-bg-active);box-shadow:var(--hub-panels-tab-active-shadow)}.hub-panels--pills>.hub-panels__header{margin-bottom:var(--hub-panels-nav-content-gap)}.hub-panels--pills>.hub-panels__content{border:var(--hub-panels-pill-content-border-width) solid var(--hub-panels-border-color);border-radius:var(--hub-panels-border-radius)}.hub-panels--vertical{display:flex;align-items:stretch}.hub-panels--vertical .hub-panels__header{flex-direction:column}.hub-panels--vertical .hub-panels__nav-scroller{overflow:visible}.hub-panels--vertical .hub-panels__content{flex:1 1 auto;min-width:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple)>.hub-panels__header{margin-inline-start:var(--hub-panels-strip-margin-top);align-self:stretch;min-height:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__spacer{display:none}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav-scroller{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-item{width:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-link{width:calc(100% + var(--hub-panels-border-width));justify-content:flex-start;margin-bottom:0;border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius:0;border-end-start-radius:var(--hub-panels-tab-border-radius);border-end-end-radius:0;margin-inline-end:calc(-1 * var(--hub-panels-border-width))}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple)>.hub-panels__content{border:var(--hub-panels-border-width) solid var(--hub-panels-border-color);border-inline-start:0;border-start-end-radius:var(--hub-panels-border-radius);border-end-end-radius:var(--hub-panels-border-radius)}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--tabs .hub-panels__nav-link--active{z-index:1;border-color:var(--hub-panels-border-color);border-inline-end-color:var(--hub-panels-tab-bg-active);box-shadow:var(--hub-panels-tab-active-shadow-vertical)}.hub-panels--pills.hub-panels--vertical>.hub-panels__header{margin-bottom:0;margin-inline-end:var(--hub-panels-nav-content-gap)}.hub-panels--card{display:flex}.hub-panels--card>.hub-panels__content{display:flex;flex-direction:column;gap:var(--hub-panels-card-gap, var(--hub-ref-space-3, 1rem));width:100%;padding:0;background:transparent;box-shadow:none}\n", ".hub-panels__panel--accordion{display:block;color:var(--hub-panels-accordion-color);background-color:var(--hub-panels-accordion-bg);border:var(--hub-panels-accordion-border-width) solid var(--hub-panels-accordion-border-color)}.hub-panels__panel--accordion:not(:first-of-type){border-top:0}.hub-panels__panel--accordion:first-of-type{border-start-start-radius:var(--hub-panels-accordion-border-radius);border-start-end-radius:var(--hub-panels-accordion-border-radius)}.hub-panels__panel--accordion:first-of-type>.hub-panels__accordion-header .hub-panels__accordion-btn{border-start-start-radius:var(--hub-panels-accordion-inner-border-radius);border-start-end-radius:var(--hub-panels-accordion-inner-border-radius)}.hub-panels__panel--accordion:last-of-type{border-end-start-radius:var(--hub-panels-accordion-border-radius);border-end-end-radius:var(--hub-panels-accordion-border-radius)}.hub-panels__panel--accordion:last-of-type>.hub-panels__accordion-header .hub-panels__accordion-btn--collapsed{border-end-start-radius:var(--hub-panels-accordion-inner-border-radius);border-end-end-radius:var(--hub-panels-accordion-inner-border-radius)}.hub-panels__panel--accordion:last-of-type>.hub-panels__accordion-collapse{border-end-start-radius:var(--hub-panels-accordion-border-radius);border-end-end-radius:var(--hub-panels-accordion-border-radius)}.hub-panels__accordion-header{margin:0}.hub-panels__accordion-btn{position:relative;display:flex;align-items:center;width:100%;gap:var(--hub-panels-tab-gap);padding:var(--hub-panels-accordion-btn-padding-y) var(--hub-panels-accordion-btn-padding-x);font-family:var(--hub-panels-tab-font-family);font-size:var(--hub-panels-tab-font-size);line-height:var(--hub-panels-tab-line-height);text-align:left;color:var(--hub-panels-accordion-btn-color);background-color:var(--hub-panels-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--hub-panels-accordion-transition);cursor:pointer}.hub-panels__accordion-btn:after{flex-shrink:0;width:var(--hub-panels-accordion-btn-icon-width);height:var(--hub-panels-accordion-btn-icon-width);margin-left:auto;content:\"\";background-color:var(--hub-panels-accordion-icon-active-color);-webkit-mask-image:var(--hub-panels-accordion-btn-icon-mask);mask-image:var(--hub-panels-accordion-btn-icon-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;transform:var(--hub-panels-accordion-btn-icon-transform);transition:var(--hub-panels-accordion-btn-icon-transition)}.hub-panels__accordion-btn:not(.hub-panels__accordion-btn--collapsed){color:var(--hub-panels-accordion-active-color);background-color:var(--hub-panels-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--hub-panels-accordion-border-width)) 0 var(--hub-panels-accordion-border-color)}.hub-panels__accordion-btn--collapsed:after{background-color:var(--hub-panels-accordion-icon-color);transform:none}.hub-panels__accordion-btn:hover:not(:disabled){z-index:2}.hub-panels__accordion-btn:focus-visible{z-index:3;outline:0;box-shadow:var(--hub-panels-accordion-btn-focus-box-shadow)}.hub-panels__accordion-btn:disabled{color:var(--hub-panels-tab-color-disabled);cursor:not-allowed}.hub-panels__accordion-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--hub-panels-accordion-collapse-transition-duration) var(--hub-panels-accordion-collapse-transition-easing)}.hub-panels__accordion-collapse--collapsed{grid-template-rows:0fr}.hub-panels__accordion-collapse>.hub-panels__accordion-body{min-height:0;overflow:hidden;opacity:1;padding:var(--hub-panels-accordion-body-padding-y) var(--hub-panels-accordion-body-padding-x);transition:opacity var(--hub-panels-accordion-collapse-transition-duration) var(--hub-panels-accordion-collapse-transition-easing),padding var(--hub-panels-accordion-collapse-transition-duration) var(--hub-panels-accordion-collapse-transition-easing)}.hub-panels__accordion-collapse--collapsed>.hub-panels__accordion-body{opacity:0;padding-top:0;padding-bottom:0}.hub-panels--flush .hub-panels__panel--accordion{border-right:0;border-left:0;border-radius:0}.hub-panels--flush .hub-panels__panel--accordion:first-of-type{border-top:0}.hub-panels--flush .hub-panels__panel--accordion:last-of-type{border-bottom:0}.hub-panels--flush .hub-panels__panel--accordion>.hub-panels__accordion-collapse,.hub-panels--flush .hub-panels__panel--accordion>.hub-panels__accordion-header .hub-panels__accordion-btn{border-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-panels', imports: [NgTemplateOutlet, RouterOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PanelsComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        class: 'hub-panels',
+                        '[class.hub-panels--tabs]': "type() === 'tabs'",
+                        '[class.hub-panels--pills]': "type() === 'pills'",
+                        '[class.hub-panels--card]': 'isCardView()',
+                        '[class.hub-panels--vertical]': 'vertical() && !isAccordionView() && !isCardView()',
+                        '[class.hub-panels--accordion]': 'isAccordionView()',
+                        '[class.hub-panels--flush]': 'isAccordionView() && flush()',
+                        '[class.hub-panels--multiple]': 'multiple()',
+                        '(window:resize)': 'onWindowResize()'
+                    }, template: "@if (!isAccordionView() && !isCardView()) {\n\t@if (multiple()) {\n\t\t<div class=\"hub-panels__multiple-layout\">\n\t\t\t@for (group of multipleHeaderGroups(); track group.activePanel ?? group.headers[0]) {\n\t\t\t\t<div\n\t\t\t\t\t#multipleBlock\n\t\t\t\t\tclass=\"hub-panels hub-panels__multiple-block\"\n\t\t\t\t\t[class.hub-panels--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels--vertical]=\"vertical()\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"hub-panels__header\">\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (panel of group.headers; track panel) {\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, panelIndex(panel))\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t@if (!justified() && type() !== 'pills' && !vertical()) {\n\t\t\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (group.activePanel) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"hub-panels__content\"\n\t\t\t\t\t\t\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#multiplePaneHost\n\t\t\t\t\t\t\t\tclass=\"hub-panels__multiple-pane-host\"\n\t\t\t\t\t\t\t\t[attr.data-panel-id]=\"group.activePanel.id()\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<div class=\"hub-panels__header\">\n\t\t\t@if (scrollable() && !backwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#prevBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--backward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollBackwardAriaLabel\"\n\t\t\t\t\t(click)=\"navBackward()\"\n\t\t\t\t></button>\n\t\t\t}\n\n\t\t\t<div #navScroller class=\"hub-panels__nav-scroller\" (scroll)=\"onScroll()\">\n\t\t\t\t<ul\n\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t>\n\t\t\t\t\t@for (panel of panels(); track panel; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && index === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t\t@if (!justified() && type() !== 'pills') {\n\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (scrollable() && !forwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#nextBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--forward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollForwardAriaLabel\"\n\t\t\t\t\t(click)=\"navForward()\"\n\t\t\t\t></button>\n\t\t\t}\n\t\t</div>\n\t}\n}\n\n<div\n\t#contentRoot\n\tclass=\"hub-panels__content\"\n\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t[class.hub-panels__content--accordion]=\"isAccordionView()\"\n\t[class.hub-panels__content--multiple-parking]=\"!isAccordionView() && multiple()\"\n>\n\t@if (activePanelHasRouter()) {\n\t\t<router-outlet />\n\t} @else {\n\t\t<ng-content />\n\t}\n</div>\n", styles: [":where(.hub-panels){--hub-panels-flex-direction: row;--hub-panels-border-width: var(--hub-ref-border-width, 1px);--hub-panels-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-border-radius: var(--hub-ref-radius-md, .375rem);--hub-panels-content-bg: var(--hub-sys-surface-page, #fff);--hub-panels-header-bg: var(--hub-panels-content-bg);--hub-panels-content-box-shadow: none;--hub-panels-content-padding-x: var(--hub-ref-space-3, 1rem);--hub-panels-content-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-nav-btn-width: 1.5rem;--hub-panels-nav-btn-height: 1.5rem;--hub-panels-backward-btn-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23212529' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-panels-forward-btn-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23212529' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E\");--hub-panels-nav-link-padding-x: var(--hub-ref-space-3, 1rem);--hub-panels-nav-link-padding-y: var(--hub-ref-space-2, .5rem);--hub-panels-nav-link-color: var(--hub-sys-text-primary, #212529);--hub-panels-nav-link-hover-color: var(--hub-sys-color-primary-emphasis, #0a58ca);--hub-panels-nav-link-active-color: var(--hub-sys-color-primary, #0d6efd);--hub-panels-nav-link-active-bg: var(--hub-panels-content-bg);--hub-panels-nav-link-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-panels-tab-font-family: var(--hub-container-font-family, var(--hub-ref-font-family-base));--hub-panels-tab-font-size: var(--hub-container-font-size, var(--hub-ref-font-size-base, 1rem));--hub-panels-tab-font-weight: 500;--hub-panels-tab-line-height: var(--hub-ref-line-height-base, 1.5);--hub-panels-tab-padding-x: var(--hub-panels-nav-link-padding-x);--hub-panels-tab-padding-y: var(--hub-panels-nav-link-padding-y);--hub-panels-tab-gap: var(--hub-ref-space-2, .5rem);--hub-panels-tab-bg: transparent;--hub-panels-tab-color: var(--hub-panels-nav-link-color);--hub-panels-tab-border-width: var(--hub-panels-border-width);--hub-panels-tab-border-style: solid;--hub-panels-tab-border-color: transparent;--hub-panels-tab-border-radius: var(--hub-panels-border-radius);--hub-panels-tab-bg-hover: var(--hub-ref-surface-2, #f8f9fa);--hub-panels-tab-color-hover: var(--hub-panels-nav-link-hover-color);--hub-panels-tab-bg-active: var(--hub-panels-nav-link-active-bg);--hub-panels-tab-color-active: var(--hub-panels-nav-link-active-color);--hub-panels-tab-border-color-active: var(--hub-sys-color-primary, #0d6efd);--hub-panels-tab-bg-disabled: transparent;--hub-panels-tab-color-disabled: var(--hub-panels-nav-link-disabled-color);--hub-panels-tab-focus-ring-width: var(--hub-sys-focus-ring-width, .25rem);--hub-panels-tab-focus-ring-color: var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));--hub-panels-tab-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-panels-tab-active-shadow: 0 -.25rem .5rem rgba(0, 0, 0, .06);--hub-panels-tab-active-shadow-vertical: -.25rem 0 .5rem rgba(0, 0, 0, .06);--hub-panels-strip-margin-top: var(--hub-ref-space-2, .5rem);--hub-panels-nav-gap: 0;--hub-panels-pill-border-radius: 50rem;--hub-panels-pill-bg-active: var(--hub-sys-color-primary, #0d6efd);--hub-panels-pill-color-active: var(--hub-ref-color-white, #fff);--hub-panels-pill-gap: var(--hub-ref-space-2, .5rem);--hub-panels-pill-content-border-width: 0;--hub-panels-remove-btn-opacity: .6;--hub-panels-remove-btn-opacity-hover: 1;--hub-panels-nav-content-gap: var(--hub-ref-space-2, .5rem);--hub-panels-pane-min-width: 16rem;--hub-panels-pane-min-height: 8rem;--hub-panels-pane-gap: 0;--hub-panels-card-gap: var(--hub-ref-space-3, 1rem);--hub-panels-accordion-color: var(--hub-accordion-color, var(--hub-sys-text-primary, #212529));--hub-panels-accordion-bg: var(--hub-accordion-bg, var(--hub-sys-surface-page, #fff));--hub-panels-accordion-border-width: var(--hub-accordion-border-width, var(--hub-ref-border-width, 1px));--hub-panels-accordion-border-color: var(--hub-accordion-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-panels-accordion-border-radius: var(--hub-accordion-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-panels-accordion-inner-border-radius: var( --hub-accordion-inner-border-radius, calc(var(--hub-panels-accordion-border-radius) - var(--hub-panels-accordion-border-width)) );--hub-panels-accordion-btn-padding-x: var(--hub-accordion-btn-padding-x, 1.25rem);--hub-panels-accordion-btn-padding-y: var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem));--hub-panels-accordion-btn-color: var(--hub-accordion-btn-color, var(--hub-sys-text-primary, #212529));--hub-panels-accordion-btn-bg: var(--hub-accordion-btn-bg, var(--hub-sys-surface-page, #fff));--hub-panels-accordion-active-color: var(--hub-accordion-active-color, var(--hub-sys-color-primary, #0c63e4));--hub-panels-accordion-active-bg: var(--hub-accordion-active-bg, var(--hub-sys-color-primary-subtle, #e7f1ff));--hub-panels-accordion-icon-color: var(--hub-accordion-icon-color, var(--hub-panels-accordion-btn-color));--hub-panels-accordion-icon-active-color: var(--hub-accordion-icon-active-color, var(--hub-panels-accordion-active-color));--hub-panels-accordion-btn-icon-mask: var(--hub-accordion-btn-icon-mask, url(\"data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E\"));--hub-panels-accordion-btn-icon-width: var(--hub-accordion-btn-icon-width, 1.25rem);--hub-panels-accordion-btn-icon-transform: var(--hub-accordion-btn-icon-transform, rotate(-180deg));--hub-panels-accordion-btn-icon-transition: var(--hub-accordion-btn-icon-transition, transform .2s ease-in-out);--hub-panels-accordion-btn-focus-box-shadow: var( --hub-accordion-btn-focus-box-shadow, 0 0 0 var(--hub-sys-focus-ring-width, .25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25)) );--hub-panels-accordion-transition: var( --hub-accordion-transition, color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease );--hub-panels-accordion-collapse-transition-duration: var(--hub-accordion-collapse-transition-duration, .25s);--hub-panels-accordion-collapse-transition-easing: var( --hub-accordion-collapse-transition-easing, cubic-bezier(.4, 0, .2, 1) );--hub-panels-accordion-body-padding-x: var(--hub-accordion-body-padding-x, 1.25rem);--hub-panels-accordion-body-padding-y: var(--hub-accordion-body-padding-y, var(--hub-ref-space-3, 1rem))}\n", ".hub-panels{display:block;width:100%;box-sizing:border-box}.hub-panels,.hub-panels *,.hub-panels *:before,.hub-panels *:after{box-sizing:border-box}.hub-panels__header{display:flex;flex-direction:var(--hub-panels-flex-direction);align-items:stretch;background:var(--hub-panels-header-bg)}.hub-panels__scroll-btn{flex:0 0 auto;align-self:center;width:var(--hub-panels-nav-btn-width);height:var(--hub-panels-nav-btn-height);padding:0;border:0;cursor:pointer;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:1rem 1rem}.hub-panels__scroll-btn--backward{background-image:var(--hub-panels-backward-btn-bg)}.hub-panels__scroll-btn--forward{background-image:var(--hub-panels-forward-btn-bg)}.hub-panels__nav-scroller{display:flex;flex:1 1 auto;overflow-x:auto;background:var(--hub-panels-header-bg);scroll-behavior:smooth;scrollbar-width:none}.hub-panels__nav-scroller::-webkit-scrollbar{display:none}.hub-panels__nav{display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:var(--hub-panels-nav-gap);margin:0;padding:0;list-style:none}.hub-panels__nav--tabs{border-bottom:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__nav--tabs .hub-panels__nav-link{margin-bottom:calc(-1 * var(--hub-panels-border-width))}.hub-panels__nav--pills{gap:var(--hub-panels-pill-gap)}.hub-panels__nav--pills .hub-panels__nav-link{border-radius:var(--hub-panels-pill-border-radius)}.hub-panels__nav--pills .hub-panels__nav-link--active{color:var(--hub-panels-pill-color-active);background:var(--hub-panels-pill-bg-active);border-color:transparent}.hub-panels__nav--justified{flex:1 1 auto}.hub-panels__nav--justified .hub-panels__nav-item{flex:1 1 0}.hub-panels__nav--justified .hub-panels__nav-link{width:100%;justify-content:center}.hub-panels__nav--vertical{flex-direction:column}.hub-panels__nav--vertical.hub-panels__nav--tabs{border-bottom:0;border-inline-end:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__nav--vertical.hub-panels__nav--tabs .hub-panels__nav-link{margin-bottom:0;margin-inline-end:calc(-1 * var(--hub-panels-border-width))}.hub-panels__nav-item{display:flex;flex:0 0 auto}.hub-panels__nav-link{position:relative;display:inline-flex;align-items:center;gap:var(--hub-panels-tab-gap);padding:var(--hub-panels-tab-padding-y) var(--hub-panels-tab-padding-x);font-family:var(--hub-panels-tab-font-family);font-size:var(--hub-panels-tab-font-size);font-weight:var(--hub-panels-tab-font-weight);line-height:var(--hub-panels-tab-line-height);white-space:nowrap;color:var(--hub-panels-tab-color);background:var(--hub-panels-tab-bg);border-style:var(--hub-panels-tab-border-style);border-width:var(--hub-panels-tab-border-width);border-color:var(--hub-panels-tab-border-color);border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius:var(--hub-panels-tab-border-radius);cursor:pointer;transition:var(--hub-panels-tab-transition)}.hub-panels__nav-link:hover:not(:disabled):not(.hub-panels__nav-link--active){color:var(--hub-panels-tab-color-hover);background:var(--hub-panels-tab-bg-hover)}.hub-panels__nav-link:focus-visible{z-index:1;outline:0;box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__nav-link--active{color:var(--hub-panels-tab-color-active);background:var(--hub-panels-tab-bg-active);border-color:var(--hub-panels-tab-border-color-active)}.hub-panels__nav-link:disabled{color:var(--hub-panels-tab-color-disabled);background:var(--hub-panels-tab-bg-disabled);cursor:not-allowed}.hub-panels__remove-btn{display:inline-flex;align-items:center;line-height:1;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover{opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__spacer{flex:1 1 auto;background:var(--hub-panels-header-bg);border-bottom:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__content{padding:var(--hub-panels-content-padding-y) var(--hub-panels-content-padding-x);background:var(--hub-panels-content-bg);box-shadow:var(--hub-panels-content-box-shadow)}.hub-panels__content--accordion{padding:0;background:transparent;box-shadow:none}.hub-panels__content--multiple-parking{display:none}.hub-panels__multiple-layout{display:flex;align-items:stretch;gap:var(--hub-panels-pane-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}.hub-panels__multiple-block{display:flex;flex-direction:column;flex:1 0 var(--hub-panels-pane-min-width);align-self:stretch;min-width:var(--hub-panels-pane-min-width);min-height:100%}.hub-panels__multiple-block.hub-panels--vertical{flex-direction:row;flex:1 1 auto;width:100%;min-width:100%;min-height:var(--hub-panels-pane-min-height)}.hub-panels__multiple-block>.hub-panels__content{display:flex;flex:1 1 auto;min-height:0}.hub-panels__multiple-block.hub-panels--vertical>.hub-panels__content{flex:1 1 auto;width:auto;min-width:max(var(--hub-panels-pane-min-width),var(--hub-panels-multiple-vertical-panel-min-width, 0px))}.hub-panels__multiple-pane-host{display:flex;flex:1 1 auto;width:100%;min-height:0}.hub-panels__multiple-pane-host>.hub-panels__panel{flex:1 1 auto;width:100%;height:100%}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active{display:flex;flex-direction:column}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active>div{flex:1 1 auto;min-height:0}.hub-panels--vertical.hub-panels--multiple>.hub-panels__multiple-layout{flex-direction:column;align-items:stretch;width:100%}.hub-panels--pills.hub-panels--multiple.hub-panels--vertical>.hub-panels__multiple-layout>.hub-panels__multiple-block+.hub-panels__multiple-block{padding-top:var(--hub-panels-nav-content-gap);border-top:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__panel{display:none}.hub-panels__panel--active{display:block}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__header{margin-top:var(--hub-panels-strip-margin-top)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__content{border:var(--hub-panels-border-width) solid var(--hub-panels-border-color);border-top:0;border-end-start-radius:var(--hub-panels-border-radius);border-end-end-radius:var(--hub-panels-border-radius)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple) .hub-panels__nav--tabs .hub-panels__nav-link--active{border-color:var(--hub-panels-border-color);border-bottom-color:var(--hub-panels-tab-bg-active);box-shadow:var(--hub-panels-tab-active-shadow)}.hub-panels--pills>.hub-panels__header{margin-bottom:var(--hub-panels-nav-content-gap)}.hub-panels--pills>.hub-panels__content{border:var(--hub-panels-pill-content-border-width) solid var(--hub-panels-border-color);border-radius:var(--hub-panels-border-radius)}.hub-panels--vertical{display:flex;align-items:stretch}.hub-panels--vertical .hub-panels__header{flex-direction:column}.hub-panels--vertical .hub-panels__nav-scroller{overflow:visible}.hub-panels--vertical .hub-panels__content{flex:1 1 auto;min-width:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple)>.hub-panels__header{margin-inline-start:var(--hub-panels-strip-margin-top);align-self:stretch;min-height:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__spacer{display:none}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav-scroller{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-item{width:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-link{width:calc(100% + var(--hub-panels-border-width));justify-content:flex-start;margin-bottom:0;border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius:0;border-end-start-radius:var(--hub-panels-tab-border-radius);border-end-end-radius:0;margin-inline-end:calc(-1 * var(--hub-panels-border-width))}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple)>.hub-panels__content{border:var(--hub-panels-border-width) solid var(--hub-panels-border-color);border-inline-start:0;border-start-end-radius:var(--hub-panels-border-radius);border-end-end-radius:var(--hub-panels-border-radius)}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--tabs .hub-panels__nav-link--active{z-index:1;border-color:var(--hub-panels-border-color);border-inline-end-color:var(--hub-panels-tab-bg-active);box-shadow:var(--hub-panels-tab-active-shadow-vertical)}.hub-panels--pills.hub-panels--vertical>.hub-panels__header{margin-bottom:0;margin-inline-end:var(--hub-panels-nav-content-gap)}.hub-panels--card{display:flex}.hub-panels--card>.hub-panels__content{display:flex;flex-direction:column;gap:var(--hub-panels-card-gap, var(--hub-ref-space-3, 1rem));width:100%;padding:0;background:transparent;box-shadow:none}\n", ".hub-panels__panel--accordion{display:block;color:var(--hub-panels-accordion-color);background-color:var(--hub-panels-accordion-bg);border:var(--hub-panels-accordion-border-width) solid var(--hub-panels-accordion-border-color)}.hub-panels__panel--accordion:not(:first-of-type){border-top:0}.hub-panels__panel--accordion:first-of-type{border-start-start-radius:var(--hub-panels-accordion-border-radius);border-start-end-radius:var(--hub-panels-accordion-border-radius)}.hub-panels__panel--accordion:first-of-type>.hub-panels__accordion-header .hub-panels__accordion-btn{border-start-start-radius:var(--hub-panels-accordion-inner-border-radius);border-start-end-radius:var(--hub-panels-accordion-inner-border-radius)}.hub-panels__panel--accordion:last-of-type{border-end-start-radius:var(--hub-panels-accordion-border-radius);border-end-end-radius:var(--hub-panels-accordion-border-radius)}.hub-panels__panel--accordion:last-of-type>.hub-panels__accordion-header .hub-panels__accordion-btn--collapsed{border-end-start-radius:var(--hub-panels-accordion-inner-border-radius);border-end-end-radius:var(--hub-panels-accordion-inner-border-radius)}.hub-panels__panel--accordion:last-of-type>.hub-panels__accordion-collapse{border-end-start-radius:var(--hub-panels-accordion-border-radius);border-end-end-radius:var(--hub-panels-accordion-border-radius)}.hub-panels__accordion-header{margin:0}.hub-panels__accordion-btn{position:relative;display:flex;align-items:center;width:100%;gap:var(--hub-panels-tab-gap);padding:var(--hub-panels-accordion-btn-padding-y) var(--hub-panels-accordion-btn-padding-x);font-family:var(--hub-panels-tab-font-family);font-size:var(--hub-panels-tab-font-size);line-height:var(--hub-panels-tab-line-height);text-align:left;color:var(--hub-panels-accordion-btn-color);background-color:var(--hub-panels-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--hub-panels-accordion-transition);cursor:pointer}.hub-panels__accordion-btn:after{flex-shrink:0;width:var(--hub-panels-accordion-btn-icon-width);height:var(--hub-panels-accordion-btn-icon-width);margin-left:auto;content:\"\";background-color:var(--hub-panels-accordion-icon-active-color);-webkit-mask-image:var(--hub-panels-accordion-btn-icon-mask);mask-image:var(--hub-panels-accordion-btn-icon-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;transform:var(--hub-panels-accordion-btn-icon-transform);transition:var(--hub-panels-accordion-btn-icon-transition)}.hub-panels__accordion-btn:not(.hub-panels__accordion-btn--collapsed){color:var(--hub-panels-accordion-active-color);background-color:var(--hub-panels-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--hub-panels-accordion-border-width)) 0 var(--hub-panels-accordion-border-color)}.hub-panels__accordion-btn--collapsed:after{background-color:var(--hub-panels-accordion-icon-color);transform:none}.hub-panels__accordion-btn:hover:not(:disabled){z-index:2}.hub-panels__accordion-btn:focus-visible{z-index:3;outline:0;box-shadow:var(--hub-panels-accordion-btn-focus-box-shadow)}.hub-panels__accordion-btn:disabled{color:var(--hub-panels-tab-color-disabled);cursor:not-allowed}.hub-panels__accordion-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--hub-panels-accordion-collapse-transition-duration) var(--hub-panels-accordion-collapse-transition-easing)}.hub-panels__accordion-collapse--collapsed{grid-template-rows:0fr}.hub-panels__accordion-collapse>.hub-panels__accordion-body{min-height:0;overflow:hidden;opacity:1;padding:var(--hub-panels-accordion-body-padding-y) var(--hub-panels-accordion-body-padding-x);transition:opacity var(--hub-panels-accordion-collapse-transition-duration) var(--hub-panels-accordion-collapse-transition-easing),padding var(--hub-panels-accordion-collapse-transition-duration) var(--hub-panels-accordion-collapse-transition-easing)}.hub-panels__accordion-collapse--collapsed>.hub-panels__accordion-body{opacity:0;padding-top:0;padding-bottom:0}.hub-panels--flush .hub-panels__panel--accordion{border-right:0;border-left:0;border-radius:0}.hub-panels--flush .hub-panels__panel--accordion:first-of-type{border-top:0}.hub-panels--flush .hub-panels__panel--accordion:last-of-type{border-bottom:0}.hub-panels--flush .hub-panels__panel--accordion>.hub-panels__accordion-collapse,.hub-panels--flush .hub-panels__panel--accordion>.hub-panels__accordion-header .hub-panels__accordion-btn{border-radius:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { navScroller: [{ type: i0.ViewChild, args: ['navScroller', { isSignal: true }] }], prevBtn: [{ type: i0.ViewChild, args: ['prevBtn', { isSignal: true }] }], nextBtn: [{ type: i0.ViewChild, args: ['nextBtn', { isSignal: true }] }], contentRoot: [{ type: i0.ViewChild, args: ['contentRoot', { isSignal: true }] }], multiplePaneHosts: [{ type: i0.ViewChildren, args: ['multiplePaneHost', { isSignal: true }] }], multipleBlocks: [{ type: i0.ViewChildren, args: ['multipleBlock', { isSignal: true }] }], panelChange: [{ type: i0.Output, args: ["panelChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], justified: [{ type: i0.Input, args: [{ isSignal: true, alias: "justified", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], isKeysAllowed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isKeysAllowed", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }] } });
+
+/** Monotonic counter backing the auto-generated accessibility ids. */
+let nextPanelId = 0;
+/**
+ * One content panel inside a `<hub-panels>` container.
+ *
+ * In the `tabs` / `pills` views the host element is the tab *panel*
+ * (`role="tabpanel"`) and the clickable header is rendered by
+ * {@link PanelsComponent} in the strip. In the `accordion` view this component
+ * renders its own disclosure header plus an animated collapse wrapper around
+ * the projected content. In every view the header comes from `heading` or from
+ * a `<ng-template hubPanelHeading>` projected inside this element.
+ *
+ * Panels can be plain content panes or routed: when `routerLink` is set, the
+ * container renders a `<router-outlet>` instead of the projected panels and
+ * the active panel follows the current URL (`tabs` / `pills` views only).
+ *
+ * @example
+ * ```html
+ * <hub-panels>
+ *   <hub-panel heading="Fields">…</hub-panel>
+ *   <hub-panel>
+ *     <ng-template hubPanelHeading>Validations <span class="badge">3</span></ng-template>
+ *     …
+ *   </hub-panel>
+ * </hub-panels>
+ * ```
+ */
+class PanelComponent {
+    /** Host element reference — exposed so the container can detach removed panes. */
+    elementRef = inject(ElementRef);
+    #renderer = inject(Renderer2);
+    #router = inject(Router);
+    /**
+     * Owning panels container, or `null` when the panel is used standalone
+     * (outside any `<hub-panels>`), in which case it renders as a card.
+     * Exposed to the template for the accordion header.
+     */
+    tabset = inject(PanelsComponent, { optional: true });
+    /** Plain-text panel header. Ignored when a `hubPanelHeading` template exists. */
+    heading = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /**
+     * Unique id used for the `tab` / `tabpanel` (or accordion header / region)
+     * ARIA pairing. Auto-generated (`hub-panel-<n>`) when not provided.
+     */
+    id = input(`hub-panel-${nextPanelId++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Whether the panel cannot be activated. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the panel shows a remove affordance (✕ and the Delete key). */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * URL comparison used to mark routed panels active: `'route'` compares the
+     * path only, `'full'` also compares query params.
+     */
+    pathMatch = input('route', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pathMatch" }] : /* istanbul ignore next */ []));
+    /** Navigation target that turns this panel into a routed panel. */
+    routerLink = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    /** Query params appended when navigating to `routerLink`. */
+    queryParams = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes applied to both the nav item and this pane. */
+    customClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Value this panel contributes when the container is used as a form control
+     * (see {@link PanelsComponent} `ControlValueAccessor`). Defaults to `id`.
+     */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is currently active (expanded, in the accordion view). */
+    active = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Emitted when the panel becomes active. */
+    selectPanel = output();
+    /** Emitted when the panel stops being active. */
+    deselectPanel = output();
+    /** Emitted when the panel is removed through the ✕ button or the Delete key. */
+    removed = output();
+    /** Custom header template registered by `PanelHeadingDirective`. */
+    headingRef = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingRef" }] : /* istanbul ignore next */ []));
+    /** Whether the owning container renders the accordion visualization. */
+    accordionView = computed(() => this.tabset?.isAccordionView() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accordionView" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this panel renders as a card: either inside a `<hub-panels
+     * type="card">` container or standalone (no owning container at all).
+     */
+    cardView = computed(() => !this.tabset || this.tabset.isCardView(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardView" }] : /* istanbul ignore next */ []));
+    /** Form value resolved for this panel: the explicit `value` or the panel id. */
+    formValue = computed(() => (this.value() !== undefined ? this.value() : this.id()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    /** `routerLink` normalised to a segments array, or `null` when not routed. */
+    routerUrl = computed(() => {
+        const link = this.routerLink();
+        if (!link) {
+            return null;
+        }
+        return Array.isArray(link) ? link : [link];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []));
+    /** Last activation state seen by the effect — avoids emitting on init. */
+    #wasActive = false;
+    constructor() {
+        // Standalone panels (no container) render as a card and skip registration.
+        this.tabset?.registerPanel(this);
+        // Mirror `customClass` onto the pane host element.
+        effect((onCleanup) => {
+            const classes = (this.customClass() ?? '')
+                .split(' ')
+                .map((cssClass) => cssClass.trim())
+                .filter((cssClass) => cssClass.length > 0);
+            for (const cssClass of classes) {
+                this.#renderer.addClass(this.elementRef.nativeElement, cssClass);
+            }
+            onCleanup(() => {
+                for (const cssClass of classes) {
+                    this.#renderer.removeClass(this.elementRef.nativeElement, cssClass);
+                }
+            });
+        });
+        // Activation side effects: emit outputs and enforce single-active-panel
+        // (unless the container allows multiple expanded panels — accordion mode).
+        effect(() => {
+            const isActive = this.active();
+            if (isActive && this.disabled()) {
+                this.active.set(false);
+                return;
+            }
+            if (isActive === this.#wasActive) {
+                return;
+            }
+            this.#wasActive = isActive;
+            if (isActive) {
+                this.selectPanel.emit(this);
+                if (this.tabset && !this.tabset.allowsMultipleActive()) {
+                    for (const panel of this.tabset.panels()) {
+                        if (panel !== this) {
+                            panel.active.set(false);
+                        }
+                    }
+                }
+            }
+            else {
+                this.deselectPanel.emit(this);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.tabset?.removePanel(this, { reselect: false, emit: false });
+    }
+    /** Route path plus query string, or `null` when the panel is not routed. */
+    getFullRoute() {
+        const route = this.getRoute();
+        if (!route) {
+            return null;
+        }
+        const queryString = this.getQueryParamsString();
+        return queryString ? `${route}?${queryString}` : route;
+    }
+    /** Normalised absolute route path, or `null` when the panel is not routed. */
+    getRoute() {
+        const routerUrl = this.routerUrl();
+        if (!routerUrl) {
+            return null;
+        }
+        let route = routerUrl.join('/').replace(/\/\/+/g, '/');
+        if (route.charAt(0) === '.') {
+            route = route.substring(1);
+        }
+        if (route.charAt(0) !== '/') {
+            route = `/${route}`;
+        }
+        return route;
+    }
+    /** `queryParams` serialised as `key=value&…`, or `null` when empty. */
+    getQueryParamsString() {
+        const params = this.queryParams();
+        if (!params || !Object.keys(params).length) {
+            return null;
+        }
+        return Object.entries(params)
+            .map(([key, value]) => `${key}=${value}`)
+            .join('&');
+    }
+    /** Navigates to the panel's route. No-op for non-routed panels. */
+    navigate() {
+        const routerUrl = this.routerUrl();
+        if (routerUrl) {
+            this.#router.navigate(routerUrl, { queryParams: this.queryParams() ?? {} });
+        }
+    }
+    /** Accordion header click — toggles this panel through the container. */
+    onAccordionHeaderClick() {
+        this.tabset?.togglePanel(this);
+    }
+    /** Accordion header keyboard navigation, delegated to the container. */
+    onAccordionHeaderKeydown(event) {
+        this.tabset?.onAccordionKeydown(event, this);
+    }
+    /** Removes this panel through the accordion header's ✕ affordance. */
+    removeSelf() {
+        this.tabset?.removePanel(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PanelComponent, isStandalone: true, selector: "hub-panel, [hub-panel]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, pathMatch: { classPropertyName: "pathMatch", publicName: "pathMatch", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", selectPanel: "selectPanel", deselectPanel: "deselectPanel", removed: "removed" }, host: { properties: { "attr.id": "accordionView() || cardView() ? null : id()", "attr.role": "accordionView() || cardView() ? null : 'tabpanel'", "attr.aria-labelledby": "accordionView() || cardView() ? null : id() + '-link'", "class.hub-panels__panel--active": "active()", "class.hub-panels__panel--accordion": "accordionView()", "class.hub-panels__panel--card": "cardView()" }, classAttribute: "hub-panels__panel" }, exportAs: ["hubPanel"], ngImport: i0, template: "@if (accordionView()) {\n\t<h2 class=\"hub-panels__accordion-header\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-panels__accordion-btn\"\n\t\t\t[class.hub-panels__accordion-btn--collapsed]=\"!active()\"\n\t\t\t[id]=\"id() + '-link'\"\n\t\t\t[disabled]=\"disabled() || tabset?.formDisabled()\"\n\t\t\t[attr.aria-expanded]=\"active()\"\n\t\t\t[attr.aria-controls]=\"id()\"\n\t\t\t(click)=\"onAccordionHeaderClick()\"\n\t\t\t(keydown)=\"onAccordionHeaderKeydown($event)\"\n\t\t>\n\t\t\t@if (headingRef(); as headingTemplate) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingTemplate\" />\n\t\t\t} @else {\n\t\t\t\t{{ heading() }}\n\t\t\t}\n\t\t\t@if (removable()) {\n\t\t\t\t<span class=\"hub-panels__remove-btn\" aria-hidden=\"true\" (click)=\"$event.stopPropagation(); removeSelf()\">&times;</span>\n\t\t\t}\n\t\t</button>\n\t</h2>\n}\n\n<!-- Projection slots for every view. In the strip views the wrappers are plain\n\t pass-throughs; in the accordion view they become the animated collapse\n\t region. The header/footer `select` slots and the default `<ng-content>` are\n\t all UNCONDITIONAL \u2014 never wrapped in `@if` \u2014 to avoid the lost-projection\n\t bug that conditional slots cause. Header/footer render in every view; the\n\t `card` view styles them as the card's header and footer bands. -->\n<div\n\t[class.hub-panels__accordion-collapse]=\"accordionView()\"\n\t[class.hub-panels__accordion-collapse--collapsed]=\"accordionView() && !active()\"\n\t[attr.role]=\"accordionView() ? 'region' : null\"\n\t[attr.id]=\"accordionView() ? id() : null\"\n\t[attr.aria-labelledby]=\"accordionView() ? id() + '-link' : null\"\n\t[attr.aria-hidden]=\"accordionView() ? !active() : null\"\n\t[attr.inert]=\"accordionView() && !active() ? '' : null\"\n>\n\t<div [class.hub-panels__accordion-body]=\"accordionView()\">\n\t\t<ng-content select=\"[hubPanelHeader]\" />\n\t\t<div class=\"hub-panels__panel-body\">\n\t\t\t<ng-content />\n\t\t</div>\n\t\t<ng-content select=\"[hubPanelFooter]\" />\n\t</div>\n</div>\n", styles: [":where(.hub-panels__panel--card){--hub-panels-card-bg: var(--hub-sys-surface-page, #fff);--hub-panels-card-color: var(--hub-sys-text-primary, #212529);--hub-panels-card-border-width: var(--hub-ref-border-width, 1px);--hub-panels-card-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-card-border-radius: var(--hub-ref-radius-md, .375rem);--hub-panels-card-box-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-panels-card-padding-x: var(--hub-ref-space-4, 1.25rem);--hub-panels-card-padding-y: var(--hub-ref-space-3, 1rem)}:where(.hub-panels__panel-header,.hub-panels__panel-footer){--hub-panels-panel-header-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-panels-panel-header-color: var(--hub-sys-text-primary, #212529);--hub-panels-panel-header-padding-x: var(--hub-ref-space-4, 1.25rem);--hub-panels-panel-header-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-panel-header-font-weight: 600;--hub-panels-panel-header-border-width: var(--hub-ref-border-width, 1px);--hub-panels-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6)}.hub-panels__panel-header{display:block;padding:var(--hub-panels-panel-header-padding-y) var(--hub-panels-panel-header-padding-x);color:var(--hub-panels-panel-header-color);background:var(--hub-panels-panel-header-bg);font-weight:var(--hub-panels-panel-header-font-weight);border-bottom:var(--hub-panels-panel-header-border-width) solid var(--hub-panels-panel-header-border-color)}.hub-panels__panel-footer{display:block;padding:var(--hub-panels-panel-header-padding-y) var(--hub-panels-panel-header-padding-x);color:var(--hub-panels-panel-header-color);background:var(--hub-panels-panel-header-bg);border-top:var(--hub-panels-panel-header-border-width) solid var(--hub-panels-panel-header-border-color)}.hub-panels__panel.hub-panels__panel--card{display:flex;flex-direction:column;color:var(--hub-panels-card-color);background:var(--hub-panels-card-bg);border:var(--hub-panels-card-border-width) solid var(--hub-panels-card-border-color);border-radius:var(--hub-panels-card-border-radius);box-shadow:var(--hub-panels-card-box-shadow);overflow:hidden}.hub-panels__panel.hub-panels__panel--card .hub-panels__panel-body{padding:var(--hub-panels-card-padding-y) var(--hub-panels-card-padding-x)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-panel, [hub-panel]', exportAs: 'hubPanel', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-panels__panel',
+                        '[attr.id]': 'accordionView() || cardView() ? null : id()',
+                        '[attr.role]': "accordionView() || cardView() ? null : 'tabpanel'",
+                        '[attr.aria-labelledby]': "accordionView() || cardView() ? null : id() + '-link'",
+                        '[class.hub-panels__panel--active]': 'active()',
+                        '[class.hub-panels__panel--accordion]': 'accordionView()',
+                        '[class.hub-panels__panel--card]': 'cardView()'
+                    }, template: "@if (accordionView()) {\n\t<h2 class=\"hub-panels__accordion-header\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-panels__accordion-btn\"\n\t\t\t[class.hub-panels__accordion-btn--collapsed]=\"!active()\"\n\t\t\t[id]=\"id() + '-link'\"\n\t\t\t[disabled]=\"disabled() || tabset?.formDisabled()\"\n\t\t\t[attr.aria-expanded]=\"active()\"\n\t\t\t[attr.aria-controls]=\"id()\"\n\t\t\t(click)=\"onAccordionHeaderClick()\"\n\t\t\t(keydown)=\"onAccordionHeaderKeydown($event)\"\n\t\t>\n\t\t\t@if (headingRef(); as headingTemplate) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingTemplate\" />\n\t\t\t} @else {\n\t\t\t\t{{ heading() }}\n\t\t\t}\n\t\t\t@if (removable()) {\n\t\t\t\t<span class=\"hub-panels__remove-btn\" aria-hidden=\"true\" (click)=\"$event.stopPropagation(); removeSelf()\">&times;</span>\n\t\t\t}\n\t\t</button>\n\t</h2>\n}\n\n<!-- Projection slots for every view. In the strip views the wrappers are plain\n\t pass-throughs; in the accordion view they become the animated collapse\n\t region. The header/footer `select` slots and the default `<ng-content>` are\n\t all UNCONDITIONAL \u2014 never wrapped in `@if` \u2014 to avoid the lost-projection\n\t bug that conditional slots cause. Header/footer render in every view; the\n\t `card` view styles them as the card's header and footer bands. -->\n<div\n\t[class.hub-panels__accordion-collapse]=\"accordionView()\"\n\t[class.hub-panels__accordion-collapse--collapsed]=\"accordionView() && !active()\"\n\t[attr.role]=\"accordionView() ? 'region' : null\"\n\t[attr.id]=\"accordionView() ? id() : null\"\n\t[attr.aria-labelledby]=\"accordionView() ? id() + '-link' : null\"\n\t[attr.aria-hidden]=\"accordionView() ? !active() : null\"\n\t[attr.inert]=\"accordionView() && !active() ? '' : null\"\n>\n\t<div [class.hub-panels__accordion-body]=\"accordionView()\">\n\t\t<ng-content select=\"[hubPanelHeader]\" />\n\t\t<div class=\"hub-panels__panel-body\">\n\t\t\t<ng-content />\n\t\t</div>\n\t\t<ng-content select=\"[hubPanelFooter]\" />\n\t</div>\n</div>\n", styles: [":where(.hub-panels__panel--card){--hub-panels-card-bg: var(--hub-sys-surface-page, #fff);--hub-panels-card-color: var(--hub-sys-text-primary, #212529);--hub-panels-card-border-width: var(--hub-ref-border-width, 1px);--hub-panels-card-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-card-border-radius: var(--hub-ref-radius-md, .375rem);--hub-panels-card-box-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-panels-card-padding-x: var(--hub-ref-space-4, 1.25rem);--hub-panels-card-padding-y: var(--hub-ref-space-3, 1rem)}:where(.hub-panels__panel-header,.hub-panels__panel-footer){--hub-panels-panel-header-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-panels-panel-header-color: var(--hub-sys-text-primary, #212529);--hub-panels-panel-header-padding-x: var(--hub-ref-space-4, 1.25rem);--hub-panels-panel-header-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-panel-header-font-weight: 600;--hub-panels-panel-header-border-width: var(--hub-ref-border-width, 1px);--hub-panels-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6)}.hub-panels__panel-header{display:block;padding:var(--hub-panels-panel-header-padding-y) var(--hub-panels-panel-header-padding-x);color:var(--hub-panels-panel-header-color);background:var(--hub-panels-panel-header-bg);font-weight:var(--hub-panels-panel-header-font-weight);border-bottom:var(--hub-panels-panel-header-border-width) solid var(--hub-panels-panel-header-border-color)}.hub-panels__panel-footer{display:block;padding:var(--hub-panels-panel-header-padding-y) var(--hub-panels-panel-header-padding-x);color:var(--hub-panels-panel-header-color);background:var(--hub-panels-panel-header-bg);border-top:var(--hub-panels-panel-header-border-width) solid var(--hub-panels-panel-header-border-color)}.hub-panels__panel.hub-panels__panel--card{display:flex;flex-direction:column;color:var(--hub-panels-card-color);background:var(--hub-panels-card-bg);border:var(--hub-panels-card-border-width) solid var(--hub-panels-card-border-color);border-radius:var(--hub-panels-card-border-radius);box-shadow:var(--hub-panels-card-box-shadow);overflow:hidden}.hub-panels__panel.hub-panels__panel--card .hub-panels__panel-body{padding:var(--hub-panels-card-padding-y) var(--hub-panels-card-padding-x)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], pathMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathMatch", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], selectPanel: [{ type: i0.Output, args: ["selectPanel"] }], deselectPanel: [{ type: i0.Output, args: ["deselectPanel"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+/**
+ * Marks an `<ng-template>` inside a `hub-panel` as that panel's custom header
+ * (strip link in `tabs`/`pills` view, disclosure button in `accordion` view),
+ * replacing the plain-text `heading` input.
+ *
+ * @example
+ * ```html
+ * <hub-panel>
+ *   <ng-template hubPanelHeading><em>Rich</em> heading</ng-template>
+ *   Panel content
+ * </hub-panel>
+ * ```
+ */
+class PanelHeadingDirective {
+    constructor() {
+        inject(PanelComponent).headingRef.set(inject(TemplateRef));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: PanelHeadingDirective, isStandalone: true, selector: "[hubPanelHeading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelHeadingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubPanelHeading]' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Marks an element inside a `hub-panel` as the panel's content **header** band,
+ * projected at the top of the panel body (above `<ng-content>`).
+ *
+ * Unlike `hubPanelHeading` — which renders the navigational label in the
+ * `tabs`/`pills` strip or the `accordion` disclosure button — this header lives
+ * inside the panel body and renders in **every** view (`tabs`, `pills`,
+ * `accordion`, `card`). It is the natural title slot for the `card` format.
+ *
+ * @example
+ * ```html
+ * <hub-panel>
+ *   <div hubPanelHeader>Card title</div>
+ *   Card content
+ *   <div hubPanelFooter>Actions</div>
+ * </hub-panel>
+ * ```
+ */
+class PanelHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: PanelHeaderDirective, isStandalone: true, selector: "[hubPanelHeader]", host: { classAttribute: "hub-panels__panel-header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubPanelHeader]',
+                    host: { class: 'hub-panels__panel-header' }
+                }]
+        }] });
+
+/**
+ * Marks an element inside a `hub-panel` as the panel's content **footer** band,
+ * projected at the bottom of the panel body (below `<ng-content>`).
+ *
+ * Renders in **every** view (`tabs`, `pills`, `accordion`, `card`); it is the
+ * natural actions/footer slot for the `card` format.
+ *
+ * @example
+ * ```html
+ * <hub-panel>
+ *   <div hubPanelHeader>Card title</div>
+ *   Card content
+ *   <div hubPanelFooter>Actions</div>
+ * </hub-panel>
+ * ```
+ */
+class PanelFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: PanelFooterDirective, isStandalone: true, selector: "[hubPanelFooter]", host: { classAttribute: "hub-panels__panel-footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubPanelFooter]',
+                    host: { class: 'hub-panels__panel-footer' }
+                }]
+        }] });
+
+/*
+ * Public API Surface of ng-hub-ui-panels
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PanelComponent, PanelFooterDirective, PanelHeaderDirective, PanelHeadingDirective, PanelsComponent, PanelsConfig };
+//# sourceMappingURL=ng-hub-ui-panels.mjs.map