ng-hub-ui-panels 22.12.2 → 22.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, Renderer2, ElementRef, DestroyRef, viewChild, viewChildren, output, input, booleanAttribute, signal, computed, afterNextRender, RendererStyleFlags2, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, model, effect, TemplateRef, Directive, DOCUMENT, Injector, numberAttribute, untracked } from '@angular/core';
|
|
2
|
+
import { Injectable, InjectionToken, inject, Renderer2, ElementRef, DestroyRef, viewChild, viewChildren, output, input, booleanAttribute, contentChildren, signal, computed, afterNextRender, RendererStyleFlags2, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, model, effect, TemplateRef, Directive, DOCUMENT, Injector, numberAttribute, untracked } from '@angular/core';
|
|
3
3
|
import { NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { Router, NavigationEnd, RouterOutlet } from '@angular/router';
|
|
5
5
|
import { resolveHubAccent } from 'ng-hub-ui-utils';
|
|
@@ -69,38 +69,14 @@ function readByPath(source, path) {
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
|
-
*
|
|
72
|
+
* Stands in for `HubPanelComponent` where importing the class would close a cycle.
|
|
73
73
|
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
* (roving tabindex, arrow/Home/End/Delete keys) above the active pane.
|
|
78
|
-
* Panels with a `routerLink` switch the content area to a `<router-outlet>`
|
|
79
|
-
* and the active panel follows the URL. With `scrollable`, overflowing
|
|
80
|
-
* headers get backward/forward scroll buttons.
|
|
81
|
-
* - **`accordion`** — each panel renders as a stacked disclosure panel with an
|
|
82
|
-
* animated collapse: clicking an open header closes it, `multiple` allows
|
|
83
|
-
* several panels open at once and `flush` removes the outer chrome. All
|
|
84
|
-
* panels start collapsed unless a panel is marked `[active]` or a form value
|
|
85
|
-
* is bound. Routed panels are not supported in this view.
|
|
86
|
-
*
|
|
87
|
-
* The container implements `ControlValueAccessor`, so the active panel(s) can
|
|
88
|
-
* be bound as a form value (`ngModel` / `formControl`): each panel contributes
|
|
89
|
-
* its `value` (or its `id` by default), optionally narrowed with `bindValue`
|
|
90
|
-
* and compared with `compareWith`. With `multiple` the form value is an array.
|
|
91
|
-
*
|
|
92
|
-
* Theming is driven entirely by the `--hub-panels-*` CSS custom properties
|
|
93
|
-
* (see `panels.variables.scss`); the accordion view also honours the
|
|
94
|
-
* `--hub-accordion-*` ng-hub-ui contract as a compatibility fallback.
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* ```html
|
|
98
|
-
* <hub-panels type="accordion" multiple [formControl]="openPanels">
|
|
99
|
-
* <hub-panel heading="Fields" value="fields">…</hub-panel>
|
|
100
|
-
* <hub-panel heading="Validations" value="validations">…</hub-panel>
|
|
101
|
-
* </hub-panels>
|
|
102
|
-
* ```
|
|
74
|
+
* The panel injects its container and the container queries its panels, so one of the two
|
|
75
|
+
* directions has to be type-only. This token is that direction: the panel provides itself under
|
|
76
|
+
* it, and the container queries the token.
|
|
103
77
|
*/
|
|
78
|
+
const HUB_PANEL = new InjectionToken('HUB_PANEL');
|
|
79
|
+
|
|
104
80
|
class HubPanelsComponent {
|
|
105
81
|
#router = inject(Router);
|
|
106
82
|
#renderer = inject(Renderer2);
|
|
@@ -171,8 +147,29 @@ class HubPanelsComponent {
|
|
|
171
147
|
/** Equality used to match form values against panel values. `===` by default. */
|
|
172
148
|
compareWith = input((a, b) => a === b, /* @ts-ignore */
|
|
173
149
|
...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
|
|
174
|
-
/**
|
|
175
|
-
|
|
150
|
+
/**
|
|
151
|
+
* Panels projected into this container, in the order the consumer wrote them.
|
|
152
|
+
*
|
|
153
|
+
* A content query rather than self-registration, because a panel adding itself from its own
|
|
154
|
+
* constructor is never seen when it is created inside a control-flow block: an `@if` that turns
|
|
155
|
+
* true produced a pane in the DOM and no tab at all. The query also fixes the order for free —
|
|
156
|
+
* registration order is creation order, which a conditional panel breaks the moment its
|
|
157
|
+
* condition flips.
|
|
158
|
+
*
|
|
159
|
+
* The boundary is exactly right: content children reach through `@if` and `@for` in the
|
|
160
|
+
* consumer's template, and stop at another component's own view, so a panel nested inside a
|
|
161
|
+
* component projected into a pane is still not captured as a hidden tab.
|
|
162
|
+
*/
|
|
163
|
+
projectedPanels = contentChildren(HUB_PANEL, { ...(ngDevMode ? { debugName: "projectedPanels" } : /* istanbul ignore next */ {}), descendants: true });
|
|
164
|
+
/**
|
|
165
|
+
* Panels a consumer removed through the strip's own close button. Removal is an action, not a
|
|
166
|
+
* shape the template describes, so it cannot come from the query: the panel is still written in
|
|
167
|
+
* the consumer's template and the query keeps returning it.
|
|
168
|
+
*/
|
|
169
|
+
#removedPanels = signal(new Set(), /* @ts-ignore */
|
|
170
|
+
...(ngDevMode ? [{ debugName: "#removedPanels" }] : /* istanbul ignore next */ []));
|
|
171
|
+
/** Panels the strip presents, in the order the consumer wrote them. */
|
|
172
|
+
panels = computed(() => this.projectedPanels().filter((panel) => !panel.standalone && !this.#removedPanels().has(panel)), /* @ts-ignore */
|
|
176
173
|
...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
|
|
177
174
|
/** Currently active panel, if any (the first one, under `multiple`). */
|
|
178
175
|
activePanel = computed(() => this.panels().find((panel) => panel.active()), /* @ts-ignore */
|
|
@@ -277,20 +274,24 @@ class HubPanelsComponent {
|
|
|
277
274
|
});
|
|
278
275
|
}
|
|
279
276
|
/**
|
|
280
|
-
*
|
|
281
|
-
*
|
|
277
|
+
* Kept so a panel built against an older release still compiles. Panels are discovered by
|
|
278
|
+
* content query now, so joining the container is nothing a panel has to ask for.
|
|
279
|
+
*
|
|
280
|
+
* @deprecated Does nothing. Removed under this name in **23.0.0**.
|
|
282
281
|
*/
|
|
283
|
-
registerPanel(
|
|
284
|
-
|
|
285
|
-
this.#scheduleSync();
|
|
282
|
+
registerPanel(_panel) {
|
|
283
|
+
// Intentionally empty.
|
|
286
284
|
}
|
|
287
285
|
/**
|
|
288
|
-
* Removes a panel from the container. `reselect` activates the closest
|
|
289
|
-
*
|
|
290
|
-
*
|
|
286
|
+
* Removes a panel from the container. `reselect` activates the closest enabled neighbour when
|
|
287
|
+
* the removed panel was active; `emit` fires the panel's `removed` output; `track` records the
|
|
288
|
+
* removal so the content query stops presenting the panel.
|
|
289
|
+
*
|
|
290
|
+
* A panel on its way out of the DOM passes `track: false`: the query drops it by itself, and
|
|
291
|
+
* remembering it would hold the reference alive for nothing.
|
|
291
292
|
*/
|
|
292
293
|
removePanel(panel, options = {}) {
|
|
293
|
-
const { reselect = true, emit = true } = options;
|
|
294
|
+
const { reselect = true, emit = true, track = true } = options;
|
|
294
295
|
const panels = this.panels();
|
|
295
296
|
const index = panels.indexOf(panel);
|
|
296
297
|
if (index === -1 || this.#isDestroyed) {
|
|
@@ -305,7 +306,16 @@ class HubPanelsComponent {
|
|
|
305
306
|
if (emit) {
|
|
306
307
|
panel.removed.emit(panel);
|
|
307
308
|
}
|
|
308
|
-
|
|
309
|
+
if (track) {
|
|
310
|
+
// Prune as we go: a panel removed and then destroyed would otherwise stay in the set for
|
|
311
|
+
// the lifetime of the container.
|
|
312
|
+
this.#removedPanels.update((current) => {
|
|
313
|
+
const live = new Set(this.projectedPanels());
|
|
314
|
+
const next = new Set([...current].filter((candidate) => live.has(candidate)));
|
|
315
|
+
next.add(panel);
|
|
316
|
+
return next;
|
|
317
|
+
});
|
|
318
|
+
}
|
|
309
319
|
// Detach the projected pane: the consumer template still owns the node,
|
|
310
320
|
// so removing the header alone would leave the pane content behind.
|
|
311
321
|
const paneElement = panel.elementRef.nativeElement;
|
|
@@ -780,7 +790,7 @@ class HubPanelsComponent {
|
|
|
780
790
|
useExisting: forwardRef(() => HubPanelsComponent),
|
|
781
791
|
multi: true
|
|
782
792
|
}
|
|
783
|
-
], 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]=\"\n\t\t\t\t\t\t\t\t\t\t\tpanel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\n\t\t\t\t\t\t\t\t\t\t\"\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</button>\n\t\t\t\t\t\t\t\t\t<!-- Real sibling button: a control nested inside the tab\n\t\t\t\t\t\t\t\t\t\t button would be invalid HTML and unreachable by keyboard.\n\t\t\t\t\t\t\t\t\t\t It overlays the tab's reserved end padding, so the \u2715 keeps\n\t\t\t\t\t\t\t\t\t\t its visual spot inside the tab chrome. -->\n\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\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[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"panel.removeLabel()\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removePanelAndRefocus(panel)\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\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 class=\"hub-panels__content\" [class.hub-panels__content--pills]=\"type() === 'pills'\">\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</button>\n\t\t\t\t\t\t\t<!-- Real sibling button: a control nested inside the tab\n\t\t\t\t\t\t\t\t button would be invalid HTML and unreachable by keyboard.\n\t\t\t\t\t\t\t\t It overlays the tab's reserved end padding, so the \u2715 keeps\n\t\t\t\t\t\t\t\t its visual spot inside the tab chrome. -->\n\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"panel.removeLabel()\"\n\t\t\t\t\t\t\t\t\t(click)=\"removePanelAndRefocus(panel)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\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-accent: var(--hub-sys-color-primary, #0d6efd);--hub-panels-accent-emphasis: color-mix(in oklch, var(--hub-panels-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-accent-subtle: color-mix(in oklch, var(--hub-panels-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-accent-on: oklch(from var(--hub-panels-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-panels-flex-direction: row;--hub-panels-border-width: var(--hub-container-border-width, var(--hub-ref-border-width, 1px));--hub-panels-border-color: var(--hub-container-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-panels-border-radius: var(--hub-container-border-radius, var(--hub-ref-radius-md, .375rem));--hub-panels-content-bg: var(--hub-container-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-container-padding-x, var(--hub-ref-space-3, 1rem));--hub-panels-content-padding-y: var(--hub-container-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-panels-accent-emphasis);--hub-panels-nav-link-active-color: var(--hub-panels-accent);--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: var(--hub-ref-font-weight-medium, 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-border-end-radius: 0;--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-panels-accent);--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: var(--hub-ref-radius-pill, 50rem);--hub-panels-pill-bg-active: var(--hub-panels-accent);--hub-panels-pill-color-active: var(--hub-panels-accent-on);--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-panels-accent-emphasis));--hub-panels-accordion-active-bg: var(--hub-accordion-active-bg, var(--hub-panels-accent-subtle));--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))}:where(.hub-panels[data-variant=primary]){--hub-panels-accent: var(--hub-sys-color-primary)}:where(.hub-panels[data-variant=secondary]){--hub-panels-accent: var(--hub-sys-color-secondary)}:where(.hub-panels[data-variant=success]){--hub-panels-accent: var(--hub-sys-color-success)}:where(.hub-panels[data-variant=danger]){--hub-panels-accent: var(--hub-sys-color-danger)}:where(.hub-panels[data-variant=warning]){--hub-panels-accent: var(--hub-sys-color-warning)}:where(.hub-panels[data-variant=info]){--hub-panels-accent: var(--hub-sys-color-info)}:where(.hub-panels[data-variant=neutral]){--hub-panels-accent: var(--hub-sys-color-neutral)}:where(.hub-panels[data-variant=light]){--hub-panels-accent: var(--hub-sys-color-light)}:where(.hub-panels[data-variant=dark]){--hub-panels-accent: var(--hub-sys-color-dark)}\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--pills .hub-panels__nav-item--active>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-pill-color-active)}.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{position:relative;display:flex;flex:0 0 auto}.hub-panels__nav-item:has(>.hub-panels__remove-btn)>.hub-panels__nav-link{padding-inline-end:calc(var(--hub-panels-tab-padding-x) + var(--hub-panels-tab-gap) + 1em)}.hub-panels__nav-item>.hub-panels__remove-btn{position:absolute;z-index:2;inset-block:0;inset-inline-end:var(--hub-panels-tab-padding-x);margin-block:auto;color:var(--hub-panels-tab-color)}.hub-panels__nav-item:hover:not(.hub-panels__nav-item--active):not(.hub-panels__nav-item--disabled)>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-tab-color-hover)}.hub-panels__nav-item--active>.hub-panels__remove-btn{color:var(--hub-panels-tab-color-active)}.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;flex:0 0 auto;align-items:center;justify-content:center;width:1em;height:1em;padding:0;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:1;color:inherit;background:transparent;border:0;cursor:pointer;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover:not(:disabled){opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__remove-btn:focus-visible{outline:0;opacity:var(--hub-panels-remove-btn-opacity-hover);box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__remove-btn:disabled{color:var(--hub-panels-tab-color-disabled);cursor:not-allowed}.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:var(--hub-panels-tab-border-end-radius, 0);border-end-start-radius:var(--hub-panels-tab-border-radius);border-end-end-radius:var(--hub-panels-tab-border-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__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:not(.hub-panels__accordion-header--expanded),.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{position:relative;display:flex;align-items:stretch;margin:0;background-color:var(--hub-panels-accordion-btn-bg);transition:var(--hub-panels-accordion-transition);--hub-panels-accordion-toggle-gutter: calc(var(--hub-panels-accordion-btn-icon-width) + var(--hub-panels-tab-gap))}.hub-panels__accordion-header--expanded{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-actions{display:flex;flex-shrink:0;align-items:center;gap:var(--hub-panels-tab-gap);padding-inline-end:calc(var(--hub-panels-accordion-btn-padding-x) + var(--hub-panels-accordion-toggle-gutter))}.hub-panels__accordion-actions>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-accordion-btn-color)}.hub-panels__accordion-header--expanded>.hub-panels__accordion-actions>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-accordion-active-color)}.hub-panels__accordion-header:not(:has(>.hub-panels__accordion-actions))>.hub-panels__accordion-btn{padding-inline-end:calc(var(--hub-panels-accordion-btn-padding-x) + var(--hub-panels-accordion-toggle-gutter))}.hub-panels__accordion-btn{display:flex;flex:1 1 auto;align-items:center;min-width:0;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:start;color:var(--hub-panels-accordion-btn-color);background-color:transparent;border:0;border-radius:0;overflow-anchor:none;transition:var(--hub-panels-accordion-transition);cursor:pointer}.hub-panels__accordion-btn:after{position:absolute;z-index:1;inset-block:0;inset-inline-end:var(--hub-panels-accordion-btn-padding-x);flex-shrink:0;width:var(--hub-panels-accordion-btn-icon-width);height:var(--hub-panels-accordion-btn-icon-width);margin-block: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)}.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__panel--toggle-start>.hub-panels__accordion-header{--hub-panels-accordion-toggle-gutter: 0px}.hub-panels__panel--toggle-start>.hub-panels__accordion-header>.hub-panels__accordion-btn:after{position:static;z-index:auto;order:-1;margin-block:0;margin-inline-start:0;margin-inline-end:var(--hub-panels-tab-gap)}.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 });
|
|
793
|
+
], queries: [{ propertyName: "projectedPanels", predicate: HUB_PANEL, descendants: true, isSignal: 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]=\"\n\t\t\t\t\t\t\t\t\t\t\tpanel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\n\t\t\t\t\t\t\t\t\t\t\"\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</button>\n\t\t\t\t\t\t\t\t\t<!-- Real sibling button: a control nested inside the tab\n\t\t\t\t\t\t\t\t\t\t button would be invalid HTML and unreachable by keyboard.\n\t\t\t\t\t\t\t\t\t\t It overlays the tab's reserved end padding, so the \u2715 keeps\n\t\t\t\t\t\t\t\t\t\t its visual spot inside the tab chrome. -->\n\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\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[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"panel.removeLabel()\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removePanelAndRefocus(panel)\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\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 class=\"hub-panels__content\" [class.hub-panels__content--pills]=\"type() === 'pills'\">\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</button>\n\t\t\t\t\t\t\t<!-- Real sibling button: a control nested inside the tab\n\t\t\t\t\t\t\t\t button would be invalid HTML and unreachable by keyboard.\n\t\t\t\t\t\t\t\t It overlays the tab's reserved end padding, so the \u2715 keeps\n\t\t\t\t\t\t\t\t its visual spot inside the tab chrome. -->\n\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"panel.removeLabel()\"\n\t\t\t\t\t\t\t\t\t(click)=\"removePanelAndRefocus(panel)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\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-accent: var(--hub-sys-color-primary, #0d6efd);--hub-panels-accent-emphasis: color-mix(in oklch, var(--hub-panels-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-accent-subtle: color-mix(in oklch, var(--hub-panels-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-accent-on: oklch(from var(--hub-panels-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-panels-flex-direction: row;--hub-panels-border-width: var(--hub-container-border-width, var(--hub-ref-border-width, 1px));--hub-panels-border-color: var(--hub-container-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-panels-border-radius: var(--hub-container-border-radius, var(--hub-ref-radius-md, .375rem));--hub-panels-content-bg: var(--hub-container-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-container-padding-x, var(--hub-ref-space-3, 1rem));--hub-panels-content-padding-y: var(--hub-container-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-panels-accent-emphasis);--hub-panels-nav-link-active-color: var(--hub-panels-accent);--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: var(--hub-ref-font-weight-medium, 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-border-end-radius: 0;--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-panels-accent);--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: var(--hub-ref-radius-pill, 50rem);--hub-panels-pill-bg-active: var(--hub-panels-accent);--hub-panels-pill-color-active: var(--hub-panels-accent-on);--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-panels-accent-emphasis));--hub-panels-accordion-active-bg: var(--hub-accordion-active-bg, var(--hub-panels-accent-subtle));--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))}:where(.hub-panels[data-variant=primary]){--hub-panels-accent: var(--hub-sys-color-primary)}:where(.hub-panels[data-variant=secondary]){--hub-panels-accent: var(--hub-sys-color-secondary)}:where(.hub-panels[data-variant=success]){--hub-panels-accent: var(--hub-sys-color-success)}:where(.hub-panels[data-variant=danger]){--hub-panels-accent: var(--hub-sys-color-danger)}:where(.hub-panels[data-variant=warning]){--hub-panels-accent: var(--hub-sys-color-warning)}:where(.hub-panels[data-variant=info]){--hub-panels-accent: var(--hub-sys-color-info)}:where(.hub-panels[data-variant=neutral]){--hub-panels-accent: var(--hub-sys-color-neutral)}:where(.hub-panels[data-variant=light]){--hub-panels-accent: var(--hub-sys-color-light)}:where(.hub-panels[data-variant=dark]){--hub-panels-accent: var(--hub-sys-color-dark)}\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--pills .hub-panels__nav-item--active>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-pill-color-active)}.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{position:relative;display:flex;flex:0 0 auto}.hub-panels__nav-item:has(>.hub-panels__remove-btn)>.hub-panels__nav-link{padding-inline-end:calc(var(--hub-panels-tab-padding-x) + var(--hub-panels-tab-gap) + 1em)}.hub-panels__nav-item>.hub-panels__remove-btn{position:absolute;z-index:2;inset-block:0;inset-inline-end:var(--hub-panels-tab-padding-x);margin-block:auto;color:var(--hub-panels-tab-color)}.hub-panels__nav-item:hover:not(.hub-panels__nav-item--active):not(.hub-panels__nav-item--disabled)>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-tab-color-hover)}.hub-panels__nav-item--active>.hub-panels__remove-btn{color:var(--hub-panels-tab-color-active)}.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;flex:0 0 auto;align-items:center;justify-content:center;width:1em;height:1em;padding:0;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:1;color:inherit;background:transparent;border:0;cursor:pointer;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover:not(:disabled){opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__remove-btn:focus-visible{outline:0;opacity:var(--hub-panels-remove-btn-opacity-hover);box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__remove-btn:disabled{color:var(--hub-panels-tab-color-disabled);cursor:not-allowed}.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:var(--hub-panels-tab-border-end-radius, 0);border-end-start-radius:var(--hub-panels-tab-border-radius);border-end-end-radius:var(--hub-panels-tab-border-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__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:not(.hub-panels__accordion-header--expanded),.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{position:relative;display:flex;align-items:stretch;margin:0;background-color:var(--hub-panels-accordion-btn-bg);transition:var(--hub-panels-accordion-transition);--hub-panels-accordion-toggle-gutter: calc(var(--hub-panels-accordion-btn-icon-width) + var(--hub-panels-tab-gap))}.hub-panels__accordion-header--expanded{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-actions{display:flex;flex-shrink:0;align-items:center;gap:var(--hub-panels-tab-gap);padding-inline-end:calc(var(--hub-panels-accordion-btn-padding-x) + var(--hub-panels-accordion-toggle-gutter))}.hub-panels__accordion-actions>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-accordion-btn-color)}.hub-panels__accordion-header--expanded>.hub-panels__accordion-actions>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-accordion-active-color)}.hub-panels__accordion-header:not(:has(>.hub-panels__accordion-actions))>.hub-panels__accordion-btn{padding-inline-end:calc(var(--hub-panels-accordion-btn-padding-x) + var(--hub-panels-accordion-toggle-gutter))}.hub-panels__accordion-btn{display:flex;flex:1 1 auto;align-items:center;min-width:0;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:start;color:var(--hub-panels-accordion-btn-color);background-color:transparent;border:0;border-radius:0;overflow-anchor:none;transition:var(--hub-panels-accordion-transition);cursor:pointer}.hub-panels__accordion-btn:after{position:absolute;z-index:1;inset-block:0;inset-inline-end:var(--hub-panels-accordion-btn-padding-x);flex-shrink:0;width:var(--hub-panels-accordion-btn-icon-width);height:var(--hub-panels-accordion-btn-icon-width);margin-block: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)}.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__panel--toggle-start>.hub-panels__accordion-header{--hub-panels-accordion-toggle-gutter: 0px}.hub-panels__panel--toggle-start>.hub-panels__accordion-header>.hub-panels__accordion-btn:after{position:static;z-index:auto;order:-1;margin-block:0;margin-inline-start:0;margin-inline-end:var(--hub-panels-tab-gap)}.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 });
|
|
784
794
|
}
|
|
785
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubPanelsComponent, decorators: [{
|
|
786
796
|
type: Component,
|
|
@@ -804,35 +814,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
804
814
|
'[style.--hub-panels-accent]': 'groupAccent()',
|
|
805
815
|
'(window:resize)': 'onWindowResize()'
|
|
806
816
|
}, 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]=\"\n\t\t\t\t\t\t\t\t\t\t\tpanel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\n\t\t\t\t\t\t\t\t\t\t\"\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</button>\n\t\t\t\t\t\t\t\t\t<!-- Real sibling button: a control nested inside the tab\n\t\t\t\t\t\t\t\t\t\t button would be invalid HTML and unreachable by keyboard.\n\t\t\t\t\t\t\t\t\t\t It overlays the tab's reserved end padding, so the \u2715 keeps\n\t\t\t\t\t\t\t\t\t\t its visual spot inside the tab chrome. -->\n\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\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[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"panel.removeLabel()\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"removePanelAndRefocus(panel)\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t}\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 class=\"hub-panels__content\" [class.hub-panels__content--pills]=\"type() === 'pills'\">\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</button>\n\t\t\t\t\t\t\t<!-- Real sibling button: a control nested inside the tab\n\t\t\t\t\t\t\t\t button would be invalid HTML and unreachable by keyboard.\n\t\t\t\t\t\t\t\t It overlays the tab's reserved end padding, so the \u2715 keeps\n\t\t\t\t\t\t\t\t its visual spot inside the tab chrome. -->\n\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"panel.removeLabel()\"\n\t\t\t\t\t\t\t\t\t(click)=\"removePanelAndRefocus(panel)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t×\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t}\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-accent: var(--hub-sys-color-primary, #0d6efd);--hub-panels-accent-emphasis: color-mix(in oklch, var(--hub-panels-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-accent-subtle: color-mix(in oklch, var(--hub-panels-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-accent-on: oklch(from var(--hub-panels-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-panels-flex-direction: row;--hub-panels-border-width: var(--hub-container-border-width, var(--hub-ref-border-width, 1px));--hub-panels-border-color: var(--hub-container-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-panels-border-radius: var(--hub-container-border-radius, var(--hub-ref-radius-md, .375rem));--hub-panels-content-bg: var(--hub-container-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-container-padding-x, var(--hub-ref-space-3, 1rem));--hub-panels-content-padding-y: var(--hub-container-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-panels-accent-emphasis);--hub-panels-nav-link-active-color: var(--hub-panels-accent);--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: var(--hub-ref-font-weight-medium, 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-border-end-radius: 0;--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-panels-accent);--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: var(--hub-ref-radius-pill, 50rem);--hub-panels-pill-bg-active: var(--hub-panels-accent);--hub-panels-pill-color-active: var(--hub-panels-accent-on);--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-panels-accent-emphasis));--hub-panels-accordion-active-bg: var(--hub-accordion-active-bg, var(--hub-panels-accent-subtle));--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))}:where(.hub-panels[data-variant=primary]){--hub-panels-accent: var(--hub-sys-color-primary)}:where(.hub-panels[data-variant=secondary]){--hub-panels-accent: var(--hub-sys-color-secondary)}:where(.hub-panels[data-variant=success]){--hub-panels-accent: var(--hub-sys-color-success)}:where(.hub-panels[data-variant=danger]){--hub-panels-accent: var(--hub-sys-color-danger)}:where(.hub-panels[data-variant=warning]){--hub-panels-accent: var(--hub-sys-color-warning)}:where(.hub-panels[data-variant=info]){--hub-panels-accent: var(--hub-sys-color-info)}:where(.hub-panels[data-variant=neutral]){--hub-panels-accent: var(--hub-sys-color-neutral)}:where(.hub-panels[data-variant=light]){--hub-panels-accent: var(--hub-sys-color-light)}:where(.hub-panels[data-variant=dark]){--hub-panels-accent: var(--hub-sys-color-dark)}\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--pills .hub-panels__nav-item--active>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-pill-color-active)}.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{position:relative;display:flex;flex:0 0 auto}.hub-panels__nav-item:has(>.hub-panels__remove-btn)>.hub-panels__nav-link{padding-inline-end:calc(var(--hub-panels-tab-padding-x) + var(--hub-panels-tab-gap) + 1em)}.hub-panels__nav-item>.hub-panels__remove-btn{position:absolute;z-index:2;inset-block:0;inset-inline-end:var(--hub-panels-tab-padding-x);margin-block:auto;color:var(--hub-panels-tab-color)}.hub-panels__nav-item:hover:not(.hub-panels__nav-item--active):not(.hub-panels__nav-item--disabled)>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-tab-color-hover)}.hub-panels__nav-item--active>.hub-panels__remove-btn{color:var(--hub-panels-tab-color-active)}.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;flex:0 0 auto;align-items:center;justify-content:center;width:1em;height:1em;padding:0;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:1;color:inherit;background:transparent;border:0;cursor:pointer;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover:not(:disabled){opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__remove-btn:focus-visible{outline:0;opacity:var(--hub-panels-remove-btn-opacity-hover);box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__remove-btn:disabled{color:var(--hub-panels-tab-color-disabled);cursor:not-allowed}.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:var(--hub-panels-tab-border-end-radius, 0);border-end-start-radius:var(--hub-panels-tab-border-radius);border-end-end-radius:var(--hub-panels-tab-border-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__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:not(.hub-panels__accordion-header--expanded),.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{position:relative;display:flex;align-items:stretch;margin:0;background-color:var(--hub-panels-accordion-btn-bg);transition:var(--hub-panels-accordion-transition);--hub-panels-accordion-toggle-gutter: calc(var(--hub-panels-accordion-btn-icon-width) + var(--hub-panels-tab-gap))}.hub-panels__accordion-header--expanded{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-actions{display:flex;flex-shrink:0;align-items:center;gap:var(--hub-panels-tab-gap);padding-inline-end:calc(var(--hub-panels-accordion-btn-padding-x) + var(--hub-panels-accordion-toggle-gutter))}.hub-panels__accordion-actions>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-accordion-btn-color)}.hub-panels__accordion-header--expanded>.hub-panels__accordion-actions>.hub-panels__remove-btn:not(:disabled){color:var(--hub-panels-accordion-active-color)}.hub-panels__accordion-header:not(:has(>.hub-panels__accordion-actions))>.hub-panels__accordion-btn{padding-inline-end:calc(var(--hub-panels-accordion-btn-padding-x) + var(--hub-panels-accordion-toggle-gutter))}.hub-panels__accordion-btn{display:flex;flex:1 1 auto;align-items:center;min-width:0;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:start;color:var(--hub-panels-accordion-btn-color);background-color:transparent;border:0;border-radius:0;overflow-anchor:none;transition:var(--hub-panels-accordion-transition);cursor:pointer}.hub-panels__accordion-btn:after{position:absolute;z-index:1;inset-block:0;inset-inline-end:var(--hub-panels-accordion-btn-padding-x);flex-shrink:0;width:var(--hub-panels-accordion-btn-icon-width);height:var(--hub-panels-accordion-btn-icon-width);margin-block: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)}.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__panel--toggle-start>.hub-panels__accordion-header{--hub-panels-accordion-toggle-gutter: 0px}.hub-panels__panel--toggle-start>.hub-panels__accordion-header>.hub-panels__accordion-btn:after{position:static;z-index:auto;order:-1;margin-block:0;margin-inline-start:0;margin-inline-end:var(--hub-panels-tab-gap)}.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"] }]
|
|
807
|
-
}], 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 }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }] } });
|
|
817
|
+
}], 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 }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], projectedPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HUB_PANEL), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
808
818
|
|
|
809
819
|
/** Monotonic counter backing the auto-generated accessibility ids. */
|
|
810
820
|
let nextPanelId = 0;
|
|
811
|
-
/**
|
|
812
|
-
* One content panel inside a `<hub-panels>` container.
|
|
813
|
-
*
|
|
814
|
-
* In the `tabs` / `pills` views the host element is the tab *panel*
|
|
815
|
-
* (`role="tabpanel"`) and the clickable header is rendered by
|
|
816
|
-
* {@link HubPanelsComponent} in the strip. In the `accordion` view this component
|
|
817
|
-
* renders its own disclosure header plus an animated collapse wrapper around
|
|
818
|
-
* the projected content. In every view the header comes from `heading` or from
|
|
819
|
-
* a `<ng-template hubPanelHeading>` projected inside this element.
|
|
820
|
-
*
|
|
821
|
-
* Panels can be plain content panes or routed: when `routerLink` is set, the
|
|
822
|
-
* container renders a `<router-outlet>` instead of the projected panels and
|
|
823
|
-
* the active panel follows the current URL (`tabs` / `pills` views only).
|
|
824
|
-
*
|
|
825
|
-
* @example
|
|
826
|
-
* ```html
|
|
827
|
-
* <hub-panels>
|
|
828
|
-
* <hub-panel heading="Fields">…</hub-panel>
|
|
829
|
-
* <hub-panel>
|
|
830
|
-
* <ng-template hubPanelHeading>Validations <span class="badge">3</span></ng-template>
|
|
831
|
-
* …
|
|
832
|
-
* </hub-panel>
|
|
833
|
-
* </hub-panels>
|
|
834
|
-
* ```
|
|
835
|
-
*/
|
|
836
821
|
class HubPanelComponent {
|
|
837
822
|
/** Host element reference — exposed so the container can detach removed panes. */
|
|
838
823
|
elementRef = inject(ElementRef);
|
|
@@ -1070,7 +1055,7 @@ class HubPanelComponent {
|
|
|
1070
1055
|
}
|
|
1071
1056
|
ngOnDestroy() {
|
|
1072
1057
|
if (!this.standalone) {
|
|
1073
|
-
this.tabset?.removePanel(this, { reselect: false, emit: false });
|
|
1058
|
+
this.tabset?.removePanel(this, { reselect: false, emit: false, track: false });
|
|
1074
1059
|
}
|
|
1075
1060
|
}
|
|
1076
1061
|
/** Route path plus query string, or `null` when the panel is not routed. */
|
|
@@ -1130,11 +1115,11 @@ class HubPanelComponent {
|
|
|
1130
1115
|
this.tabset?.removePanelAndRefocus(this);
|
|
1131
1116
|
}
|
|
1132
1117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1133
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubPanelComponent, isStandalone: true, selector: "hub-panel, [hub-panel]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", 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 }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", 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": "alertView() ? 'alert' : (accordionView() || cardView() ? null : 'tabpanel')", "attr.aria-labelledby": "accordionView() || cardView() ? null : id() + '-link'", "attr.data-variant": "cardView() ? (variant() ?? null) : null", "style.--hub-panels-alert-accent": "alertAccent()", "style.--hub-panels-card-accent": "cardAccent()", "class.hub-panels__panel--active": "active()", "class.hub-panels__panel--accordion": "accordionView()", "class.hub-panels__panel--toggle-start": "toggleAtStart()", "class.hub-panels__panel--card": "cardView() && !alertView()", "class.hub-panels__panel--alert": "alertView()", "class.hub-panels__panel--fill": "fill()", "class.hub-panels__panel--flush": "flush()" }, classAttribute: "hub-panels__panel" }, exportAs: ["hubPanel"], ngImport: i0, template: "@if (accordionView()) {\n\t<h2 class=\"hub-panels__accordion-header\" [class.hub-panels__accordion-header--expanded]=\"active()\">\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</button>\n\n\t\t<!-- Row affordances live OUTSIDE the disclosure button: a control nested\n\t\t\t in another control is invalid and unreachable by keyboard. They stay\n\t\t\t visible while the row is collapsed, unlike `hubPanelHeader`. The \u2715\n\t\t\t remove control is a real button here for the same reason \u2014 focusable,\n\t\t\t keyboard operable and labelled for assistive technologies. -->\n\t\t@if (removable() || headingActionsRef()) {\n\t\t\t<span class=\"hub-panels__accordion-actions\">\n\t\t\t\t@if (headingActionsRef(); as actionsTemplate) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n\t\t\t\t}\n\t\t\t\t@if (removable()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t[disabled]=\"disabled() || tabset?.formDisabled()\"\n\t\t\t\t\t\t[attr.aria-label]=\"removeLabel()\"\n\t\t\t\t\t\t(click)=\"removeSelf()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t×\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</span>\n\t\t}\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\tclass=\"hub-panels__panel-collapse\"\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__panel-region\" [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-style: solid;--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-accent: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-card-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-panels-card-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-body-gap: 0}:where(.hub-panels__panel-header,.hub-panels__panel-footer){--hub-panels-panel-header-color: var(--hub-sys-text-primary, #212529);--hub-panels-panel-header-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-panels-panel-header-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 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-content-direction: row;--hub-panels-panel-header-content-align: center;--hub-panels-panel-header-content-justify: flex-start;--hub-panels-panel-footer-content-justify: flex-end;--hub-panels-panel-header-content-gap: var(--hub-sys-gap-3, .75rem)}.hub-panels__panel-header{display:flex;flex-direction:var(--hub-panels-panel-header-content-direction);align-items:var(--hub-panels-panel-header-content-align);justify-content:var(--hub-panels-panel-header-content-justify);gap:var(--hub-panels-panel-header-content-gap);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, var(--hub-sys-surface-elevated, #f8f9fa));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-header>:last-child:not(:only-child){margin-inline-start:auto}.hub-panels__panel-footer{display:flex;flex-direction:var(--hub-panels-panel-header-content-direction);align-items:var(--hub-panels-panel-header-content-align);justify-content:var(--hub-panels-panel-footer-content-justify);gap:var(--hub-panels-panel-header-content-gap);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, var(--hub-sys-surface-elevated, #f8f9fa));border-top:var(--hub-panels-panel-header-border-width) solid var(--hub-panels-panel-header-border-color)}.hub-panels__panel-footer>:first-child:not(:only-child){margin-inline-end:auto}.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) var(--hub-panels-card-border-style) var(--hub-panels-card-border-color);border-radius:var(--hub-panels-card-border-radius);box-shadow:var(--hub-panels-card-box-shadow, var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075)));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)}.hub-panels__panel--flush{--hub-panels-card-padding-x: 0;--hub-panels-card-padding-y: 0}.hub-panels__panel--card.hub-panels__panel--fill{flex:1 1 auto;min-height:0}.hub-panels__panel--card.hub-panels__panel--fill .hub-panels__panel-collapse,.hub-panels__panel--card.hub-panels__panel--fill .hub-panels__panel-region{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.hub-panels__panel--card.hub-panels__panel--fill .hub-panels__panel-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--hub-panels-body-gap)}:where(.hub-panels__panel--alert){--hub-panels-alert-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-panels-alert-color: var(--hub-sys-text-primary, #212529);--hub-panels-alert-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-alert-accent: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-alert-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-panels-alert-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-alert-border-radius: var(--hub-ref-radius-md, .375rem);--hub-panels-alert-accent-width: .25rem;--hub-panels-alert-content-direction: row;--hub-panels-alert-content-align: flex-start;--hub-panels-alert-content-justify: flex-start;--hub-panels-alert-content-gap: var(--hub-sys-gap-2, .5rem)}:where(.hub-panels__panel--alert[data-variant]){--hub-panels-alert-bg: color-mix(in oklch, var(--hub-panels-alert-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-alert-color: color-mix(in oklch, var(--hub-panels-alert-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-alert-border-color: color-mix(in oklch, var(--hub-panels-alert-accent) 30%, transparent)}:where(.hub-panels__panel--alert[data-variant=primary]){--hub-panels-alert-bg: var(--hub-sys-color-primary-subtle);--hub-panels-alert-color: var(--hub-sys-color-primary-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-primary-border-subtle)}:where(.hub-panels__panel--alert[data-variant=secondary]){--hub-panels-alert-bg: var(--hub-sys-color-secondary-subtle);--hub-panels-alert-color: var(--hub-sys-color-secondary-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-secondary-border-subtle)}:where(.hub-panels__panel--alert[data-variant=success]){--hub-panels-alert-bg: var(--hub-sys-color-success-subtle);--hub-panels-alert-color: var(--hub-sys-color-success-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-success-border-subtle)}:where(.hub-panels__panel--alert[data-variant=danger]){--hub-panels-alert-bg: var(--hub-sys-color-danger-subtle);--hub-panels-alert-color: var(--hub-sys-color-danger-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-danger-border-subtle)}:where(.hub-panels__panel--alert[data-variant=warning]){--hub-panels-alert-bg: var(--hub-sys-color-warning-subtle);--hub-panels-alert-color: var(--hub-sys-color-warning-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-warning-border-subtle)}:where(.hub-panels__panel--alert[data-variant=info]){--hub-panels-alert-bg: var(--hub-sys-color-info-subtle);--hub-panels-alert-color: var(--hub-sys-color-info-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-info-border-subtle)}:where(.hub-panels__panel--alert[data-variant=neutral]){--hub-panels-alert-bg: var(--hub-sys-color-neutral-subtle);--hub-panels-alert-color: var(--hub-sys-color-neutral-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-neutral-border-subtle)}:where(.hub-panels__panel--alert[data-variant=light]){--hub-panels-alert-bg: var(--hub-sys-color-light-subtle);--hub-panels-alert-color: var(--hub-sys-color-light-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-light-border-subtle)}:where(.hub-panels__panel--alert[data-variant=dark]){--hub-panels-alert-bg: var(--hub-sys-color-dark-subtle);--hub-panels-alert-color: var(--hub-sys-color-dark-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-dark-border-subtle)}:where(.hub-panels__panel--card[data-variant]){--hub-panels-card-bg: color-mix(in oklch, var(--hub-panels-card-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-card-color: color-mix(in oklch, var(--hub-panels-card-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-card-border-color: color-mix(in oklch, var(--hub-panels-card-accent) 30%, transparent)}:where(.hub-panels__panel--card[data-variant]) :where(.hub-panels__panel-header,.hub-panels__panel-footer){background:color-mix(in oklch,var(--hub-panels-card-accent) 22%,var(--hub-sys-surface-page, #ffffff));--hub-panels-panel-header-color: color-mix(in oklch, var(--hub-panels-card-accent) 85%, var(--hub-sys-color-ink, #212529));--hub-panels-panel-header-border-color: color-mix(in oklch, var(--hub-panels-card-accent) 40%, transparent)}:where(.hub-panels__panel--card[data-variant=primary]){--hub-panels-card-bg: var(--hub-sys-color-primary-subtle);--hub-panels-card-color: var(--hub-sys-color-primary-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-primary-border-subtle)}:where(.hub-panels__panel--card[data-variant=secondary]){--hub-panels-card-bg: var(--hub-sys-color-secondary-subtle);--hub-panels-card-color: var(--hub-sys-color-secondary-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-secondary-border-subtle)}:where(.hub-panels__panel--card[data-variant=success]){--hub-panels-card-bg: var(--hub-sys-color-success-subtle);--hub-panels-card-color: var(--hub-sys-color-success-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-success-border-subtle)}:where(.hub-panels__panel--card[data-variant=danger]){--hub-panels-card-bg: var(--hub-sys-color-danger-subtle);--hub-panels-card-color: var(--hub-sys-color-danger-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-danger-border-subtle)}:where(.hub-panels__panel--card[data-variant=warning]){--hub-panels-card-bg: var(--hub-sys-color-warning-subtle);--hub-panels-card-color: var(--hub-sys-color-warning-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-warning-border-subtle)}:where(.hub-panels__panel--card[data-variant=info]){--hub-panels-card-bg: var(--hub-sys-color-info-subtle);--hub-panels-card-color: var(--hub-sys-color-info-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-info-border-subtle)}:where(.hub-panels__panel--card[data-variant=neutral]){--hub-panels-card-bg: var(--hub-sys-color-neutral-subtle);--hub-panels-card-color: var(--hub-sys-color-neutral-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-neutral-border-subtle)}:where(.hub-panels__panel--card[data-variant=light]){--hub-panels-card-bg: var(--hub-sys-color-light-subtle);--hub-panels-card-color: var(--hub-sys-color-light-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-light-border-subtle)}:where(.hub-panels__panel--card[data-variant=dark]){--hub-panels-card-bg: var(--hub-sys-color-dark-subtle);--hub-panels-card-color: var(--hub-sys-color-dark-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-dark-border-subtle)}.hub-panels__panel.hub-panels__panel--alert{display:flex;flex-direction:column;color:var(--hub-panels-alert-color, var(--hub-sys-text-primary, #212529));background:var(--hub-panels-alert-bg, var(--hub-sys-surface-elevated, #f8f9fa));border:var(--hub-ref-border-width, 1px) solid var(--hub-panels-alert-border-color, var(--hub-sys-border-color-default, #dee2e6));border-inline-start:var(--hub-panels-alert-accent-width) solid var(--hub-panels-alert-accent, var(--hub-sys-border-color-default, #dee2e6));border-radius:var(--hub-panels-alert-border-radius);overflow:hidden}.hub-panels__panel.hub-panels__panel--alert .hub-panels__panel-body{display:flex;flex-direction:var(--hub-panels-alert-content-direction);align-items:var(--hub-panels-alert-content-align);justify-content:var(--hub-panels-alert-content-justify);gap:var(--hub-panels-alert-content-gap);padding:var(--hub-panels-alert-padding-y) var(--hub-panels-alert-padding-x)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1118
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubPanelComponent, isStandalone: true, selector: "hub-panel, [hub-panel]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", 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 }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", 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": "alertView() ? 'alert' : (accordionView() || cardView() ? null : 'tabpanel')", "attr.aria-labelledby": "accordionView() || cardView() ? null : id() + '-link'", "attr.data-variant": "cardView() ? (variant() ?? null) : null", "style.--hub-panels-alert-accent": "alertAccent()", "style.--hub-panels-card-accent": "cardAccent()", "class.hub-panels__panel--active": "active()", "class.hub-panels__panel--accordion": "accordionView()", "class.hub-panels__panel--toggle-start": "toggleAtStart()", "class.hub-panels__panel--card": "cardView() && !alertView()", "class.hub-panels__panel--alert": "alertView()", "class.hub-panels__panel--fill": "fill()", "class.hub-panels__panel--flush": "flush()" }, classAttribute: "hub-panels__panel" }, providers: [{ provide: HUB_PANEL, useExisting: forwardRef(() => HubPanelComponent) }], exportAs: ["hubPanel"], ngImport: i0, template: "@if (accordionView()) {\n\t<h2 class=\"hub-panels__accordion-header\" [class.hub-panels__accordion-header--expanded]=\"active()\">\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</button>\n\n\t\t<!-- Row affordances live OUTSIDE the disclosure button: a control nested\n\t\t\t in another control is invalid and unreachable by keyboard. They stay\n\t\t\t visible while the row is collapsed, unlike `hubPanelHeader`. The \u2715\n\t\t\t remove control is a real button here for the same reason \u2014 focusable,\n\t\t\t keyboard operable and labelled for assistive technologies. -->\n\t\t@if (removable() || headingActionsRef()) {\n\t\t\t<span class=\"hub-panels__accordion-actions\">\n\t\t\t\t@if (headingActionsRef(); as actionsTemplate) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n\t\t\t\t}\n\t\t\t\t@if (removable()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t[disabled]=\"disabled() || tabset?.formDisabled()\"\n\t\t\t\t\t\t[attr.aria-label]=\"removeLabel()\"\n\t\t\t\t\t\t(click)=\"removeSelf()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t×\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</span>\n\t\t}\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\tclass=\"hub-panels__panel-collapse\"\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__panel-region\" [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-style: solid;--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-accent: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-card-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-panels-card-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-body-gap: 0}:where(.hub-panels__panel-header,.hub-panels__panel-footer){--hub-panels-panel-header-color: var(--hub-sys-text-primary, #212529);--hub-panels-panel-header-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-panels-panel-header-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 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-content-direction: row;--hub-panels-panel-header-content-align: center;--hub-panels-panel-header-content-justify: flex-start;--hub-panels-panel-footer-content-justify: flex-end;--hub-panels-panel-header-content-gap: var(--hub-sys-gap-3, .75rem)}.hub-panels__panel-header{display:flex;flex-direction:var(--hub-panels-panel-header-content-direction);align-items:var(--hub-panels-panel-header-content-align);justify-content:var(--hub-panels-panel-header-content-justify);gap:var(--hub-panels-panel-header-content-gap);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, var(--hub-sys-surface-elevated, #f8f9fa));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-header>:last-child:not(:only-child){margin-inline-start:auto}.hub-panels__panel-footer{display:flex;flex-direction:var(--hub-panels-panel-header-content-direction);align-items:var(--hub-panels-panel-header-content-align);justify-content:var(--hub-panels-panel-footer-content-justify);gap:var(--hub-panels-panel-header-content-gap);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, var(--hub-sys-surface-elevated, #f8f9fa));border-top:var(--hub-panels-panel-header-border-width) solid var(--hub-panels-panel-header-border-color)}.hub-panels__panel-footer>:first-child:not(:only-child){margin-inline-end:auto}.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) var(--hub-panels-card-border-style) var(--hub-panels-card-border-color);border-radius:var(--hub-panels-card-border-radius);box-shadow:var(--hub-panels-card-box-shadow, var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075)));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)}.hub-panels__panel--flush{--hub-panels-card-padding-x: 0;--hub-panels-card-padding-y: 0}.hub-panels__panel--card.hub-panels__panel--fill{flex:1 1 auto;min-height:0}.hub-panels__panel--card.hub-panels__panel--fill .hub-panels__panel-collapse,.hub-panels__panel--card.hub-panels__panel--fill .hub-panels__panel-region{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.hub-panels__panel--card.hub-panels__panel--fill .hub-panels__panel-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--hub-panels-body-gap)}:where(.hub-panels__panel--alert){--hub-panels-alert-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-panels-alert-color: var(--hub-sys-text-primary, #212529);--hub-panels-alert-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-alert-accent: var(--hub-sys-border-color-default, #dee2e6);--hub-panels-alert-padding-x: var(--hub-ref-space-4, 1.5rem);--hub-panels-alert-padding-y: var(--hub-ref-space-3, 1rem);--hub-panels-alert-border-radius: var(--hub-ref-radius-md, .375rem);--hub-panels-alert-accent-width: .25rem;--hub-panels-alert-content-direction: row;--hub-panels-alert-content-align: flex-start;--hub-panels-alert-content-justify: flex-start;--hub-panels-alert-content-gap: var(--hub-sys-gap-2, .5rem)}:where(.hub-panels__panel--alert[data-variant]){--hub-panels-alert-bg: color-mix(in oklch, var(--hub-panels-alert-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-alert-color: color-mix(in oklch, var(--hub-panels-alert-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-alert-border-color: color-mix(in oklch, var(--hub-panels-alert-accent) 30%, transparent)}:where(.hub-panels__panel--alert[data-variant=primary]){--hub-panels-alert-bg: var(--hub-sys-color-primary-subtle);--hub-panels-alert-color: var(--hub-sys-color-primary-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-primary-border-subtle)}:where(.hub-panels__panel--alert[data-variant=secondary]){--hub-panels-alert-bg: var(--hub-sys-color-secondary-subtle);--hub-panels-alert-color: var(--hub-sys-color-secondary-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-secondary-border-subtle)}:where(.hub-panels__panel--alert[data-variant=success]){--hub-panels-alert-bg: var(--hub-sys-color-success-subtle);--hub-panels-alert-color: var(--hub-sys-color-success-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-success-border-subtle)}:where(.hub-panels__panel--alert[data-variant=danger]){--hub-panels-alert-bg: var(--hub-sys-color-danger-subtle);--hub-panels-alert-color: var(--hub-sys-color-danger-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-danger-border-subtle)}:where(.hub-panels__panel--alert[data-variant=warning]){--hub-panels-alert-bg: var(--hub-sys-color-warning-subtle);--hub-panels-alert-color: var(--hub-sys-color-warning-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-warning-border-subtle)}:where(.hub-panels__panel--alert[data-variant=info]){--hub-panels-alert-bg: var(--hub-sys-color-info-subtle);--hub-panels-alert-color: var(--hub-sys-color-info-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-info-border-subtle)}:where(.hub-panels__panel--alert[data-variant=neutral]){--hub-panels-alert-bg: var(--hub-sys-color-neutral-subtle);--hub-panels-alert-color: var(--hub-sys-color-neutral-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-neutral-border-subtle)}:where(.hub-panels__panel--alert[data-variant=light]){--hub-panels-alert-bg: var(--hub-sys-color-light-subtle);--hub-panels-alert-color: var(--hub-sys-color-light-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-light-border-subtle)}:where(.hub-panels__panel--alert[data-variant=dark]){--hub-panels-alert-bg: var(--hub-sys-color-dark-subtle);--hub-panels-alert-color: var(--hub-sys-color-dark-emphasis);--hub-panels-alert-border-color: var(--hub-sys-color-dark-border-subtle)}:where(.hub-panels__panel--card[data-variant]){--hub-panels-card-bg: color-mix(in oklch, var(--hub-panels-card-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-panels-card-color: color-mix(in oklch, var(--hub-panels-card-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-panels-card-border-color: color-mix(in oklch, var(--hub-panels-card-accent) 30%, transparent)}:where(.hub-panels__panel--card[data-variant]) :where(.hub-panels__panel-header,.hub-panels__panel-footer){background:color-mix(in oklch,var(--hub-panels-card-accent) 22%,var(--hub-sys-surface-page, #ffffff));--hub-panels-panel-header-color: color-mix(in oklch, var(--hub-panels-card-accent) 85%, var(--hub-sys-color-ink, #212529));--hub-panels-panel-header-border-color: color-mix(in oklch, var(--hub-panels-card-accent) 40%, transparent)}:where(.hub-panels__panel--card[data-variant=primary]){--hub-panels-card-bg: var(--hub-sys-color-primary-subtle);--hub-panels-card-color: var(--hub-sys-color-primary-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-primary-border-subtle)}:where(.hub-panels__panel--card[data-variant=secondary]){--hub-panels-card-bg: var(--hub-sys-color-secondary-subtle);--hub-panels-card-color: var(--hub-sys-color-secondary-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-secondary-border-subtle)}:where(.hub-panels__panel--card[data-variant=success]){--hub-panels-card-bg: var(--hub-sys-color-success-subtle);--hub-panels-card-color: var(--hub-sys-color-success-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-success-border-subtle)}:where(.hub-panels__panel--card[data-variant=danger]){--hub-panels-card-bg: var(--hub-sys-color-danger-subtle);--hub-panels-card-color: var(--hub-sys-color-danger-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-danger-border-subtle)}:where(.hub-panels__panel--card[data-variant=warning]){--hub-panels-card-bg: var(--hub-sys-color-warning-subtle);--hub-panels-card-color: var(--hub-sys-color-warning-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-warning-border-subtle)}:where(.hub-panels__panel--card[data-variant=info]){--hub-panels-card-bg: var(--hub-sys-color-info-subtle);--hub-panels-card-color: var(--hub-sys-color-info-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-info-border-subtle)}:where(.hub-panels__panel--card[data-variant=neutral]){--hub-panels-card-bg: var(--hub-sys-color-neutral-subtle);--hub-panels-card-color: var(--hub-sys-color-neutral-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-neutral-border-subtle)}:where(.hub-panels__panel--card[data-variant=light]){--hub-panels-card-bg: var(--hub-sys-color-light-subtle);--hub-panels-card-color: var(--hub-sys-color-light-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-light-border-subtle)}:where(.hub-panels__panel--card[data-variant=dark]){--hub-panels-card-bg: var(--hub-sys-color-dark-subtle);--hub-panels-card-color: var(--hub-sys-color-dark-emphasis);--hub-panels-card-border-color: var(--hub-sys-color-dark-border-subtle)}.hub-panels__panel.hub-panels__panel--alert{display:flex;flex-direction:column;color:var(--hub-panels-alert-color, var(--hub-sys-text-primary, #212529));background:var(--hub-panels-alert-bg, var(--hub-sys-surface-elevated, #f8f9fa));border:var(--hub-ref-border-width, 1px) solid var(--hub-panels-alert-border-color, var(--hub-sys-border-color-default, #dee2e6));border-inline-start:var(--hub-panels-alert-accent-width) solid var(--hub-panels-alert-accent, var(--hub-sys-border-color-default, #dee2e6));border-radius:var(--hub-panels-alert-border-radius);overflow:hidden}.hub-panels__panel.hub-panels__panel--alert .hub-panels__panel-body{display:flex;flex-direction:var(--hub-panels-alert-content-direction);align-items:var(--hub-panels-alert-content-align);justify-content:var(--hub-panels-alert-content-justify);gap:var(--hub-panels-alert-content-gap);padding:var(--hub-panels-alert-padding-y) var(--hub-panels-alert-padding-x)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1134
1119
|
}
|
|
1135
1120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubPanelComponent, decorators: [{
|
|
1136
1121
|
type: Component,
|
|
1137
|
-
args: [{ selector: 'hub-panel, [hub-panel]', exportAs: 'hubPanel', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1122
|
+
args: [{ selector: 'hub-panel, [hub-panel]', providers: [{ provide: HUB_PANEL, useExisting: forwardRef(() => HubPanelComponent) }], exportAs: 'hubPanel', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1138
1123
|
class: 'hub-panels__panel',
|
|
1139
1124
|
'[attr.id]': 'accordionView() || cardView() ? null : id()',
|
|
1140
1125
|
'[attr.role]': "alertView() ? 'alert' : (accordionView() || cardView() ? null : 'tabpanel')",
|