ng-hub-ui-panels 22.8.2 → 22.9.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.
Files changed (7) hide show
  1. package/README.md +1 -0
  2. package/fesm2022/ng-hub-ui-panels.mjs +33 -11
  3. package/fesm2022/ng-hub-ui-panels.mjs.map +1 -1
  4. package/ng-hub-ui-panels-22.9.0.tgz +0 -0
  5. package/package.json +2 -2
  6. package/types/ng-hub-ui-panels.d.ts +18 -2
  7. package/ng-hub-ui-panels-22.8.2.tgz +0 -0
package/README.md CHANGED
@@ -430,6 +430,7 @@ the active panel follows the current URL (`tabs` / `pills` views only).
430
430
  | `active` | `boolean` (model) | `false` | Two-way active/expanded state. |
431
431
  | `disabled` | `boolean` | `false` | Prevents activation. |
432
432
  | `removable` | `boolean` | `false` | Shows a ✕ and enables the Delete key. |
433
+ | `removeLabel` | `string` | `'Remove panel'` | Accessible name (`aria-label`) of the ✕ button; override to localize. |
433
434
  | `routerLink` | `string \| string[]` | `undefined` | Turns the panel into a routed panel. |
434
435
  | `queryParams` | `Params` | `undefined` | Query params for `routerLink`. |
435
436
  | `pathMatch` | `'route' \| 'full'` | `'route'` | URL comparison for routed panels. |
package/fesm2022/ng-hub-ui-panels.mjs CHANGED
@@ -340,6 +340,20 @@ class PanelsComponent {
340
340
  }
341
341
  this.#scheduleSync();
342
342
  }
343
+ /**
344
+ * Removes a panel on behalf of the user (the ✕ button or the Delete key)
345
+ * and returns keyboard focus to the closest remaining header — strip link
346
+ * or accordion button — so focus never falls back to `<body>` when the
347
+ * focused control disappears with its panel.
348
+ */
349
+ removePanelAndRefocus(panel) {
350
+ const index = this.panels().indexOf(panel);
351
+ if (index === -1) {
352
+ return;
353
+ }
354
+ this.removePanel(panel);
355
+ queueMicrotask(() => this.#focusPanelAt(Math.min(index, this.panels().length - 1)));
356
+ }
343
357
  /**
344
358
  * Activates a panel on behalf of the user (`tabs` / `pills` views): marks it
345
359
  * active, navigates when routed, and emits `panelChange`. In `multiple` mode
@@ -498,8 +512,7 @@ class PanelsComponent {
498
512
  case 'Delete': {
499
513
  const panel = this.panels()[index];
500
514
  if (panel?.removable()) {
501
- this.removePanel(panel);
502
- queueMicrotask(() => this.#focusPanelAt(Math.min(index, this.panels().length - 1)));
515
+ this.removePanelAndRefocus(panel);
503
516
  }
504
517
  }
505
518
  }
@@ -534,8 +547,7 @@ class PanelsComponent {
534
547
  }
535
548
  case 'Delete': {
536
549
  if (panel.removable()) {
537
- this.removePanel(panel);
538
- queueMicrotask(() => this.#focusPanelAt(Math.min(index, this.panels().length - 1)));
550
+ this.removePanelAndRefocus(panel);
539
551
  }
540
552
  }
541
553
  }
@@ -791,7 +803,7 @@ class PanelsComponent {
791
803
  useExisting: forwardRef(() => PanelsComponent),
792
804
  multi: true
793
805
  }
794
- ], viewQueries: [{ propertyName: "navScroller", first: true, predicate: ["navScroller"], descendants: true, isSignal: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true, isSignal: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true, isSignal: true }, { propertyName: "contentRoot", first: true, predicate: ["contentRoot"], descendants: true, isSignal: true }, { propertyName: "multiplePaneHosts", predicate: ["multiplePaneHost"], descendants: true, isSignal: true }, { propertyName: "multipleBlocks", predicate: ["multipleBlock"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isAccordionView() && !isCardView()) {\n\t@if (multiple()) {\n\t\t<div class=\"hub-panels__multiple-layout\">\n\t\t\t@for (group of multipleHeaderGroups(); track group.activePanel ?? group.headers[0]) {\n\t\t\t\t<div\n\t\t\t\t\t#multipleBlock\n\t\t\t\t\tclass=\"hub-panels hub-panels__multiple-block\"\n\t\t\t\t\t[class.hub-panels--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels--vertical]=\"vertical()\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"hub-panels__header\">\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (panel of group.headers; track panel) {\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, panelIndex(panel))\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t@if (!justified() && type() !== 'pills' && !vertical()) {\n\t\t\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (group.activePanel) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"hub-panels__content\"\n\t\t\t\t\t\t\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#multiplePaneHost\n\t\t\t\t\t\t\t\tclass=\"hub-panels__multiple-pane-host\"\n\t\t\t\t\t\t\t\t[attr.data-panel-id]=\"group.activePanel.id()\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<div class=\"hub-panels__header\">\n\t\t\t@if (scrollable() && !backwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#prevBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--backward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollBackwardAriaLabel\"\n\t\t\t\t\t(click)=\"navBackward()\"\n\t\t\t\t></button>\n\t\t\t}\n\n\t\t\t<div #navScroller class=\"hub-panels__nav-scroller\" (scroll)=\"onScroll()\">\n\t\t\t\t<ul\n\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t>\n\t\t\t\t\t@for (panel of panels(); track panel; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && index === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t\t@if (!justified() && type() !== 'pills') {\n\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (scrollable() && !forwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#nextBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--forward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollForwardAriaLabel\"\n\t\t\t\t\t(click)=\"navForward()\"\n\t\t\t\t></button>\n\t\t\t}\n\t\t</div>\n\t}\n}\n\n<div\n\t#contentRoot\n\tclass=\"hub-panels__content\"\n\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t[class.hub-panels__content--accordion]=\"isAccordionView()\"\n\t[class.hub-panels__content--multiple-parking]=\"!isAccordionView() && multiple()\"\n>\n\t@if (activePanelHasRouter()) {\n\t\t<router-outlet />\n\t} @else {\n\t\t<ng-content />\n\t}\n</div>\n", styles: [":where(.hub-panels){--hub-panels-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--justified{flex:1 1 auto}.hub-panels__nav--justified .hub-panels__nav-item{flex:1 1 0}.hub-panels__nav--justified .hub-panels__nav-link{width:100%;justify-content:center}.hub-panels__nav--vertical{flex-direction:column}.hub-panels__nav--vertical.hub-panels__nav--tabs{border-bottom:0;border-inline-end:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__nav--vertical.hub-panels__nav--tabs .hub-panels__nav-link{margin-bottom:0;margin-inline-end:calc(-1 * var(--hub-panels-border-width))}.hub-panels__nav-item{display:flex;flex:0 0 auto}.hub-panels__nav-link{position:relative;display:inline-flex;align-items:center;gap:var(--hub-panels-tab-gap);padding:var(--hub-panels-tab-padding-y) var(--hub-panels-tab-padding-x);font-family:var(--hub-panels-tab-font-family);font-size:var(--hub-panels-tab-font-size);font-weight:var(--hub-panels-tab-font-weight);line-height:var(--hub-panels-tab-line-height);white-space:nowrap;color:var(--hub-panels-tab-color);background:var(--hub-panels-tab-bg);border-style:var(--hub-panels-tab-border-style);border-width:var(--hub-panels-tab-border-width);border-color:var(--hub-panels-tab-border-color);border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius:var(--hub-panels-tab-border-radius);cursor:pointer;transition:var(--hub-panels-tab-transition)}.hub-panels__nav-link:hover:not(:disabled):not(.hub-panels__nav-link--active){color:var(--hub-panels-tab-color-hover);background:var(--hub-panels-tab-bg-hover)}.hub-panels__nav-link:focus-visible{z-index:1;outline:0;box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__nav-link--active{color:var(--hub-panels-tab-color-active);background:var(--hub-panels-tab-bg-active);border-color:var(--hub-panels-tab-border-color-active)}.hub-panels__nav-link:disabled{color:var(--hub-panels-tab-color-disabled);background:var(--hub-panels-tab-bg-disabled);cursor:not-allowed}.hub-panels__remove-btn{display:inline-flex;align-items:center;line-height:1;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover{opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__spacer{flex:1 1 auto;background:var(--hub-panels-header-bg);border-bottom:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__content{padding:var(--hub-panels-content-padding-y) var(--hub-panels-content-padding-x);background:var(--hub-panels-content-bg);box-shadow:var(--hub-panels-content-box-shadow)}.hub-panels__content--accordion{padding:0;background:transparent;box-shadow:none}.hub-panels__content--multiple-parking{display:none}.hub-panels__multiple-layout{display:flex;align-items:stretch;gap:var(--hub-panels-pane-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}.hub-panels__multiple-block{display:flex;flex-direction:column;flex:1 0 var(--hub-panels-pane-min-width);align-self:stretch;min-width:var(--hub-panels-pane-min-width);min-height:100%}.hub-panels__multiple-block.hub-panels--vertical{flex-direction:row;flex:1 1 auto;width:100%;min-width:100%;min-height:var(--hub-panels-pane-min-height)}.hub-panels__multiple-block>.hub-panels__content{display:flex;flex:1 1 auto;min-height:0}.hub-panels__multiple-block.hub-panels--vertical>.hub-panels__content{flex:1 1 auto;width:auto;min-width:max(var(--hub-panels-pane-min-width),var(--hub-panels-multiple-vertical-panel-min-width, 0px))}.hub-panels__multiple-pane-host{display:flex;flex:1 1 auto;width:100%;min-height:0}.hub-panels__multiple-pane-host>.hub-panels__panel{flex:1 1 auto;width:100%;height:100%}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active{display:flex;flex-direction:column}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active>div{flex:1 1 auto;min-height:0}.hub-panels--vertical.hub-panels--multiple>.hub-panels__multiple-layout{flex-direction:column;align-items:stretch;width:100%}.hub-panels--pills.hub-panels--multiple.hub-panels--vertical>.hub-panels__multiple-layout>.hub-panels__multiple-block+.hub-panels__multiple-block{padding-top:var(--hub-panels-nav-content-gap);border-top:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__panel{display:none}.hub-panels__panel--active{display:block}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__header{margin-top:var(--hub-panels-strip-margin-top)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__content{border:var(--hub-panels-border-width) solid var(--hub-panels-border-color);border-top:0;border-end-start-radius:var(--hub-panels-border-radius);border-end-end-radius:var(--hub-panels-border-radius)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple) .hub-panels__nav--tabs .hub-panels__nav-link--active{border-color:var(--hub-panels-border-color);border-bottom-color:var(--hub-panels-tab-bg-active);box-shadow:var(--hub-panels-tab-active-shadow)}.hub-panels--pills>.hub-panels__header{margin-bottom:var(--hub-panels-nav-content-gap)}.hub-panels--pills>.hub-panels__content{border:var(--hub-panels-pill-content-border-width) solid var(--hub-panels-border-color);border-radius:var(--hub-panels-border-radius)}.hub-panels--vertical{display:flex;align-items:stretch}.hub-panels--vertical .hub-panels__header{flex-direction:column}.hub-panels--vertical .hub-panels__nav-scroller{overflow:visible}.hub-panels--vertical .hub-panels__content{flex:1 1 auto;min-width:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple)>.hub-panels__header{margin-inline-start:var(--hub-panels-strip-margin-top);align-self:stretch;min-height:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__spacer{display:none}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav-scroller{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-item{width:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-link{width:calc(100% + var(--hub-panels-border-width));justify-content:flex-start;margin-bottom:0;border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius: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-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 });
806
+ ], viewQueries: [{ propertyName: "navScroller", first: true, predicate: ["navScroller"], descendants: true, isSignal: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true, isSignal: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true, isSignal: true }, { propertyName: "contentRoot", first: true, predicate: ["contentRoot"], descendants: true, isSignal: true }, { propertyName: "multiplePaneHosts", predicate: ["multiplePaneHost"], descendants: true, isSignal: true }, { propertyName: "multipleBlocks", predicate: ["multipleBlock"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isAccordionView() && !isCardView()) {\n\t@if (multiple()) {\n\t\t<div class=\"hub-panels__multiple-layout\">\n\t\t\t@for (group of multipleHeaderGroups(); track group.activePanel ?? group.headers[0]) {\n\t\t\t\t<div\n\t\t\t\t\t#multipleBlock\n\t\t\t\t\tclass=\"hub-panels hub-panels__multiple-block\"\n\t\t\t\t\t[class.hub-panels--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels--vertical]=\"vertical()\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"hub-panels__header\">\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (panel of group.headers; track panel) {\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, panelIndex(panel))\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</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&times;\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\n\t\t\t\t\t\t\tclass=\"hub-panels__content\"\n\t\t\t\t\t\t\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#multiplePaneHost\n\t\t\t\t\t\t\t\tclass=\"hub-panels__multiple-pane-host\"\n\t\t\t\t\t\t\t\t[attr.data-panel-id]=\"group.activePanel.id()\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<div class=\"hub-panels__header\">\n\t\t\t@if (scrollable() && !backwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#prevBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--backward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollBackwardAriaLabel\"\n\t\t\t\t\t(click)=\"navBackward()\"\n\t\t\t\t></button>\n\t\t\t}\n\n\t\t\t<div #navScroller class=\"hub-panels__nav-scroller\" (scroll)=\"onScroll()\">\n\t\t\t\t<ul\n\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t>\n\t\t\t\t\t@for (panel of panels(); track panel; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && index === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</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&times;\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 });
795
807
  }
796
808
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelsComponent, decorators: [{
797
809
  type: Component,
@@ -814,7 +826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
814
826
  '[attr.data-variant]': 'variant() ?? null',
815
827
  '[style.--hub-panels-accent]': 'groupAccent()',
816
828
  '(window:resize)': 'onWindowResize()'
817
- }, template: "@if (!isAccordionView() && !isCardView()) {\n\t@if (multiple()) {\n\t\t<div class=\"hub-panels__multiple-layout\">\n\t\t\t@for (group of multipleHeaderGroups(); track group.activePanel ?? group.headers[0]) {\n\t\t\t\t<div\n\t\t\t\t\t#multipleBlock\n\t\t\t\t\tclass=\"hub-panels hub-panels__multiple-block\"\n\t\t\t\t\t[class.hub-panels--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels--vertical]=\"vertical()\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"hub-panels__header\">\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (panel of group.headers; track panel) {\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, panelIndex(panel))\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t@if (!justified() && type() !== 'pills' && !vertical()) {\n\t\t\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (group.activePanel) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"hub-panels__content\"\n\t\t\t\t\t\t\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#multiplePaneHost\n\t\t\t\t\t\t\t\tclass=\"hub-panels__multiple-pane-host\"\n\t\t\t\t\t\t\t\t[attr.data-panel-id]=\"group.activePanel.id()\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<div class=\"hub-panels__header\">\n\t\t\t@if (scrollable() && !backwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#prevBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--backward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollBackwardAriaLabel\"\n\t\t\t\t\t(click)=\"navBackward()\"\n\t\t\t\t></button>\n\t\t\t}\n\n\t\t\t<div #navScroller class=\"hub-panels__nav-scroller\" (scroll)=\"onScroll()\">\n\t\t\t\t<ul\n\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t>\n\t\t\t\t\t@for (panel of panels(); track panel; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && index === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (panel.removable()) {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__remove-btn\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation(); removePanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t>&times;</span\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t\t@if (!justified() && type() !== 'pills') {\n\t\t\t\t\t<div class=\"hub-panels__spacer\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (scrollable() && !forwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#nextBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--forward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollForwardAriaLabel\"\n\t\t\t\t\t(click)=\"navForward()\"\n\t\t\t\t></button>\n\t\t\t}\n\t\t</div>\n\t}\n}\n\n<div\n\t#contentRoot\n\tclass=\"hub-panels__content\"\n\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t[class.hub-panels__content--accordion]=\"isAccordionView()\"\n\t[class.hub-panels__content--multiple-parking]=\"!isAccordionView() && multiple()\"\n>\n\t@if (activePanelHasRouter()) {\n\t\t<router-outlet />\n\t} @else {\n\t\t<ng-content />\n\t}\n</div>\n", styles: [":where(.hub-panels){--hub-panels-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--justified{flex:1 1 auto}.hub-panels__nav--justified .hub-panels__nav-item{flex:1 1 0}.hub-panels__nav--justified .hub-panels__nav-link{width:100%;justify-content:center}.hub-panels__nav--vertical{flex-direction:column}.hub-panels__nav--vertical.hub-panels__nav--tabs{border-bottom:0;border-inline-end:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__nav--vertical.hub-panels__nav--tabs .hub-panels__nav-link{margin-bottom:0;margin-inline-end:calc(-1 * var(--hub-panels-border-width))}.hub-panels__nav-item{display:flex;flex:0 0 auto}.hub-panels__nav-link{position:relative;display:inline-flex;align-items:center;gap:var(--hub-panels-tab-gap);padding:var(--hub-panels-tab-padding-y) var(--hub-panels-tab-padding-x);font-family:var(--hub-panels-tab-font-family);font-size:var(--hub-panels-tab-font-size);font-weight:var(--hub-panels-tab-font-weight);line-height:var(--hub-panels-tab-line-height);white-space:nowrap;color:var(--hub-panels-tab-color);background:var(--hub-panels-tab-bg);border-style:var(--hub-panels-tab-border-style);border-width:var(--hub-panels-tab-border-width);border-color:var(--hub-panels-tab-border-color);border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius:var(--hub-panels-tab-border-radius);cursor:pointer;transition:var(--hub-panels-tab-transition)}.hub-panels__nav-link:hover:not(:disabled):not(.hub-panels__nav-link--active){color:var(--hub-panels-tab-color-hover);background:var(--hub-panels-tab-bg-hover)}.hub-panels__nav-link:focus-visible{z-index:1;outline:0;box-shadow:0 0 0 var(--hub-panels-tab-focus-ring-width) var(--hub-panels-tab-focus-ring-color)}.hub-panels__nav-link--active{color:var(--hub-panels-tab-color-active);background:var(--hub-panels-tab-bg-active);border-color:var(--hub-panels-tab-border-color-active)}.hub-panels__nav-link:disabled{color:var(--hub-panels-tab-color-disabled);background:var(--hub-panels-tab-bg-disabled);cursor:not-allowed}.hub-panels__remove-btn{display:inline-flex;align-items:center;line-height:1;opacity:var(--hub-panels-remove-btn-opacity)}.hub-panels__remove-btn:hover{opacity:var(--hub-panels-remove-btn-opacity-hover)}.hub-panels__spacer{flex:1 1 auto;background:var(--hub-panels-header-bg);border-bottom:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__content{padding:var(--hub-panels-content-padding-y) var(--hub-panels-content-padding-x);background:var(--hub-panels-content-bg);box-shadow:var(--hub-panels-content-box-shadow)}.hub-panels__content--accordion{padding:0;background:transparent;box-shadow:none}.hub-panels__content--multiple-parking{display:none}.hub-panels__multiple-layout{display:flex;align-items:stretch;gap:var(--hub-panels-pane-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}.hub-panels__multiple-block{display:flex;flex-direction:column;flex:1 0 var(--hub-panels-pane-min-width);align-self:stretch;min-width:var(--hub-panels-pane-min-width);min-height:100%}.hub-panels__multiple-block.hub-panels--vertical{flex-direction:row;flex:1 1 auto;width:100%;min-width:100%;min-height:var(--hub-panels-pane-min-height)}.hub-panels__multiple-block>.hub-panels__content{display:flex;flex:1 1 auto;min-height:0}.hub-panels__multiple-block.hub-panels--vertical>.hub-panels__content{flex:1 1 auto;width:auto;min-width:max(var(--hub-panels-pane-min-width),var(--hub-panels-multiple-vertical-panel-min-width, 0px))}.hub-panels__multiple-pane-host{display:flex;flex:1 1 auto;width:100%;min-height:0}.hub-panels__multiple-pane-host>.hub-panels__panel{flex:1 1 auto;width:100%;height:100%}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active{display:flex;flex-direction:column}.hub-panels__multiple-pane-host>.hub-panels__panel.hub-panels__panel--active>div{flex:1 1 auto;min-height:0}.hub-panels--vertical.hub-panels--multiple>.hub-panels__multiple-layout{flex-direction:column;align-items:stretch;width:100%}.hub-panels--pills.hub-panels--multiple.hub-panels--vertical>.hub-panels__multiple-layout>.hub-panels__multiple-block+.hub-panels__multiple-block{padding-top:var(--hub-panels-nav-content-gap);border-top:var(--hub-panels-border-width) solid var(--hub-panels-border-color)}.hub-panels__panel{display:none}.hub-panels__panel--active{display:block}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__header{margin-top:var(--hub-panels-strip-margin-top)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple)>.hub-panels__content{border:var(--hub-panels-border-width) solid var(--hub-panels-border-color);border-top:0;border-end-start-radius:var(--hub-panels-border-radius);border-end-end-radius:var(--hub-panels-border-radius)}.hub-panels--tabs:not(.hub-panels--vertical):not(.hub-panels--multiple) .hub-panels__nav--tabs .hub-panels__nav-link--active{border-color:var(--hub-panels-border-color);border-bottom-color:var(--hub-panels-tab-bg-active);box-shadow:var(--hub-panels-tab-active-shadow)}.hub-panels--pills>.hub-panels__header{margin-bottom:var(--hub-panels-nav-content-gap)}.hub-panels--pills>.hub-panels__content{border:var(--hub-panels-pill-content-border-width) solid var(--hub-panels-border-color);border-radius:var(--hub-panels-border-radius)}.hub-panels--vertical{display:flex;align-items:stretch}.hub-panels--vertical .hub-panels__header{flex-direction:column}.hub-panels--vertical .hub-panels__nav-scroller{overflow:visible}.hub-panels--vertical .hub-panels__content{flex:1 1 auto;min-width:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple)>.hub-panels__header{margin-inline-start:var(--hub-panels-strip-margin-top);align-self:stretch;min-height:0}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__spacer{display:none}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav-scroller{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical{flex:1 1 auto;align-self:stretch;min-height:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-item{width:100%}.hub-panels--tabs.hub-panels--vertical:not(.hub-panels--multiple) .hub-panels__nav--vertical .hub-panels__nav-link{width:calc(100% + var(--hub-panels-border-width));justify-content:flex-start;margin-bottom:0;border-start-start-radius:var(--hub-panels-tab-border-radius);border-start-end-radius: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-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"] }]
829
+ }, template: "@if (!isAccordionView() && !isCardView()) {\n\t@if (multiple()) {\n\t\t<div class=\"hub-panels__multiple-layout\">\n\t\t\t@for (group of multipleHeaderGroups(); track group.activePanel ?? group.headers[0]) {\n\t\t\t\t<div\n\t\t\t\t\t#multipleBlock\n\t\t\t\t\tclass=\"hub-panels hub-panels__multiple-block\"\n\t\t\t\t\t[class.hub-panels--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels--vertical]=\"vertical()\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"hub-panels__header\">\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (panel of group.headers; track panel) {\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && panelIndex(panel) === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, panelIndex(panel))\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</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&times;\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\n\t\t\t\t\t\t\tclass=\"hub-panels__content\"\n\t\t\t\t\t\t\t[class.hub-panels__content--pills]=\"type() === 'pills'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t#multiplePaneHost\n\t\t\t\t\t\t\t\tclass=\"hub-panels__multiple-pane-host\"\n\t\t\t\t\t\t\t\t[attr.data-panel-id]=\"group.activePanel.id()\"\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<div class=\"hub-panels__header\">\n\t\t\t@if (scrollable() && !backwardIsDisabled()) {\n\t\t\t\t<button\n\t\t\t\t\t#prevBtn\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-panels__scroll-btn hub-panels__scroll-btn--backward\"\n\t\t\t\t\t[attr.aria-label]=\"config.scrollBackwardAriaLabel\"\n\t\t\t\t\t(click)=\"navBackward()\"\n\t\t\t\t></button>\n\t\t\t}\n\n\t\t\t<div #navScroller class=\"hub-panels__nav-scroller\" (scroll)=\"onScroll()\">\n\t\t\t\t<ul\n\t\t\t\t\tclass=\"hub-panels__nav\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t[attr.aria-label]=\"config.ariaLabel\"\n\t\t\t\t\t[attr.aria-orientation]=\"vertical() ? 'vertical' : null\"\n\t\t\t\t\t[class.hub-panels__nav--tabs]=\"type() === 'tabs'\"\n\t\t\t\t\t[class.hub-panels__nav--pills]=\"type() === 'pills'\"\n\t\t\t\t\t[class.hub-panels__nav--vertical]=\"vertical()\"\n\t\t\t\t\t[class.hub-panels__nav--justified]=\"justified()\"\n\t\t\t\t>\n\t\t\t\t\t@for (panel of panels(); track panel; let index = $index) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tclass=\"hub-panels__nav-item\"\n\t\t\t\t\t\t\t[class]=\"panel.customClass()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--active]=\"panel.active()\"\n\t\t\t\t\t\t\t[class.hub-panels__nav-item--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-panels__nav-link\"\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t[id]=\"panel.id() + '-link'\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--active]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[class.hub-panels__nav-link--disabled]=\"panel.disabled()\"\n\t\t\t\t\t\t\t\t[disabled]=\"panel.disabled() || formDisabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-controls]=\"panel.id()\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"panel.active()\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"panel.active() || (!activePanel() && index === 0) ? null : -1\"\n\t\t\t\t\t\t\t\t(click)=\"selectPanel(panel)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onPanelKeydown($event, index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (panel.headingRef(); as headingRef) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"headingRef\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{ panel.heading() }}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</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&times;\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"] }]
818
830
  }], 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 }] }] } });
819
831
 
820
832
  /** Monotonic counter backing the auto-generated accessibility ids. */
@@ -915,6 +927,13 @@ class PanelComponent {
915
927
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
916
928
  /** Whether the panel shows a remove affordance (✕ and the Delete key). */
917
929
  removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
930
+ /**
931
+ * Accessible name announced for the ✕ remove button (`removable` panels).
932
+ * The visible glyph is decorative, so this label is what assistive
933
+ * technologies read; override it to localize the control.
934
+ */
935
+ removeLabel = input('Remove panel', /* @ts-ignore */
936
+ ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
918
937
  /**
919
938
  * URL comparison used to mark routed panels active: `'route'` compares the
920
939
  * path only, `'full'` also compares query params.
@@ -1126,12 +1145,15 @@ class PanelComponent {
1126
1145
  onAccordionHeaderKeydown(event) {
1127
1146
  this.tabset?.onAccordionKeydown(event, this);
1128
1147
  }
1129
- /** Removes this panel through the accordion header's ✕ affordance. */
1148
+ /**
1149
+ * Removes this panel through the accordion header's ✕ button, handing
1150
+ * keyboard focus to the closest remaining header afterwards.
1151
+ */
1130
1152
  removeSelf() {
1131
- this.tabset?.removePanel(this);
1153
+ this.tabset?.removePanelAndRefocus(this);
1132
1154
  }
1133
1155
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1134
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PanelComponent, isStandalone: true, selector: "hub-panel, [hub-panel]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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\t@if (removable()) {\n\t\t\t\t<span class=\"hub-panels__remove-btn\" aria-hidden=\"true\" (click)=\"$event.stopPropagation(); removeSelf()\">&times;</span>\n\t\t\t}\n\t\t</button>\n\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`. -->\n\t\t@if (headingActionsRef(); as actionsTemplate) {\n\t\t\t<span class=\"hub-panels__accordion-actions\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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 });
1156
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PanelComponent, isStandalone: true, selector: "hub-panel, [hub-panel]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, 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&times;\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 });
1135
1157
  }
1136
1158
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PanelComponent, decorators: [{
1137
1159
  type: Component,
@@ -1150,8 +1172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
1150
1172
  '[class.hub-panels__panel--alert]': 'alertView()',
1151
1173
  '[class.hub-panels__panel--fill]': 'fill()',
1152
1174
  '[class.hub-panels__panel--flush]': 'flush()'
1153
- }, 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\t@if (removable()) {\n\t\t\t\t<span class=\"hub-panels__remove-btn\" aria-hidden=\"true\" (click)=\"$event.stopPropagation(); removeSelf()\">&times;</span>\n\t\t\t}\n\t\t</button>\n\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`. -->\n\t\t@if (headingActionsRef(); as actionsTemplate) {\n\t\t\t<span class=\"hub-panels__accordion-actions\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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"] }]
1154
- }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], pathMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathMatch", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], selectPanel: [{ type: i0.Output, args: ["selectPanel"] }], deselectPanel: [{ type: i0.Output, args: ["deselectPanel"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
1175
+ }, 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&times;\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"] }]
1176
+ }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], pathMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathMatch", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], selectPanel: [{ type: i0.Output, args: ["selectPanel"] }], deselectPanel: [{ type: i0.Output, args: ["deselectPanel"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
1155
1177
 
1156
1178
  /**
1157
1179
  * Marks an `<ng-template>` inside a `hub-panel` as that panel's custom header