@compsych-ui-components/angular 7.0.3 → 7.0.5

package/esm2022/lib/card-base/ripple.directive.js

@@ -0,0 +1,106 @@
+import { Directive, ElementRef, NgZone, inject } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Material 3 press ripple for interactive cards.
+ *
+ * Angular port of the ComPsych DS ripple. Apply to a positioned,
+ * `overflow: hidden` element. On primary pointer-down it spawns a circle at the
+ * pointer that scales out to the farthest corner and fades; keyboard activation
+ * (Enter/Space) spawns a centered ripple.
+ *
+ * The ripple nodes are created imperatively and animated with the Web Animations
+ * API, and their colour is `currentColor` — so no global stylesheet is needed
+ * and the ripple inherits the host's text colour (white on filled/image, dark on
+ * outlined/gradient), matching the reference.
+ */
+export class RippleDirective {
+    el = inject((ElementRef));
+    zone = inject(NgZone);
+    /**
+     * Imperative suppression — the card surface only ripples when `interactive`
+     * and not `disabled`. Set by the host component. Defaults to off.
+     */
+    suppressed = false;
+    static DURATION_MS = 450;
+    layer = null;
+    onPointerDown(event) {
+        if (this.suppressed || event.button !== 0)
+            return;
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const corners = [
+            [0, 0],
+            [rect.width, 0],
+            [0, rect.height],
+            [rect.width, rect.height],
+        ];
+        const maxRadius = Math.max(...corners.map(([cx, cy]) => Math.hypot(cx - x, cy - y)));
+        this.spawn(x, y, maxRadius * 2);
+    }
+    onKeyDown(event) {
+        if (this.suppressed || event.repeat)
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        this.spawn(rect.width / 2, rect.height / 2, Math.hypot(rect.width, rect.height));
+    }
+    ensureLayer() {
+        if (this.layer && this.layer.isConnected)
+            return this.layer;
+        const layer = document.createElement('span');
+        layer.setAttribute('aria-hidden', 'true');
+        Object.assign(layer.style, {
+            position: 'absolute',
+            inset: '0',
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+            zIndex: '0',
+        });
+        this.el.nativeElement.appendChild(layer);
+        this.layer = layer;
+        return layer;
+    }
+    spawn(x, y, size) {
+        if (typeof Element.prototype.animate !== 'function')
+            return;
+        const layer = this.ensureLayer();
+        const dot = document.createElement('span');
+        Object.assign(dot.style, {
+            position: 'absolute',
+            left: `${x}px`,
+            top: `${y}px`,
+            width: `${size}px`,
+            height: `${size}px`,
+            marginLeft: `${-size / 2}px`,
+            marginTop: `${-size / 2}px`,
+            borderRadius: '50%',
+            backgroundColor: 'currentColor',
+            pointerEvents: 'none',
+        });
+        layer.appendChild(dot);
+        this.zone.runOutsideAngular(() => {
+            const anim = dot.animate([
+                { transform: 'scale(0)', opacity: 0.12 },
+                { transform: 'scale(1)', opacity: 0 },
+            ], { duration: RippleDirective.DURATION_MS, easing: 'ease-out' });
+            anim.onfinish = () => dot.remove();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: RippleDirective, isStandalone: true, selector: "[compsychRipple]", host: { listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[compsychRipple]',
+                    standalone: true,
+                    host: {
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=ripple.directive.js.map

package/esm2022/lib/card-base/ripple.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.directive.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/card-base/ripple.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, ElementRef, NgZone, inject } from '@angular/core';\r\n\r\n/**\r\n * Material 3 press ripple for interactive cards.\r\n *\r\n * Angular port of the ComPsych DS ripple. Apply to a positioned,\r\n * `overflow: hidden` element. On primary pointer-down it spawns a circle at the\r\n * pointer that scales out to the farthest corner and fades; keyboard activation\r\n * (Enter/Space) spawns a centered ripple.\r\n *\r\n * The ripple nodes are created imperatively and animated with the Web Animations\r\n * API, and their colour is `currentColor` — so no global stylesheet is needed\r\n * and the ripple inherits the host's text colour (white on filled/image, dark on\r\n * outlined/gradient), matching the reference.\r\n */\r\n@Directive({\r\n  selector: '[compsychRipple]',\r\n  standalone: true,\r\n  host: {\r\n    '(pointerdown)': 'onPointerDown($event)',\r\n    '(keydown)': 'onKeyDown($event)',\r\n  },\r\n})\r\nexport class RippleDirective {\r\n  private readonly el = inject(ElementRef<HTMLElement>);\r\n  private readonly zone = inject(NgZone);\r\n\r\n  /**\r\n   * Imperative suppression — the card surface only ripples when `interactive`\r\n   * and not `disabled`. Set by the host component. Defaults to off.\r\n   */\r\n  suppressed = false;\r\n\r\n  private static readonly DURATION_MS = 450;\r\n  private layer: HTMLElement | null = null;\r\n\r\n  onPointerDown(event: PointerEvent): void {\r\n    if (this.suppressed || event.button !== 0) return;\r\n    const rect = this.el.nativeElement.getBoundingClientRect();\r\n    const x = event.clientX - rect.left;\r\n    const y = event.clientY - rect.top;\r\n    const corners: Array<[number, number]> = [\r\n      [0, 0],\r\n      [rect.width, 0],\r\n      [0, rect.height],\r\n      [rect.width, rect.height],\r\n    ];\r\n    const maxRadius = Math.max(...corners.map(([cx, cy]) => Math.hypot(cx - x, cy - y)));\r\n    this.spawn(x, y, maxRadius * 2);\r\n  }\r\n\r\n  onKeyDown(event: KeyboardEvent): void {\r\n    if (this.suppressed || event.repeat) return;\r\n    if (event.key !== 'Enter' && event.key !== ' ') return;\r\n    const rect = this.el.nativeElement.getBoundingClientRect();\r\n    this.spawn(rect.width / 2, rect.height / 2, Math.hypot(rect.width, rect.height));\r\n  }\r\n\r\n  private ensureLayer(): HTMLElement {\r\n    if (this.layer && this.layer.isConnected) return this.layer;\r\n    const layer = document.createElement('span');\r\n    layer.setAttribute('aria-hidden', 'true');\r\n    Object.assign(layer.style, {\r\n      position: 'absolute',\r\n      inset: '0',\r\n      overflow: 'hidden',\r\n      borderRadius: 'inherit',\r\n      pointerEvents: 'none',\r\n      zIndex: '0',\r\n    });\r\n    this.el.nativeElement.appendChild(layer);\r\n    this.layer = layer;\r\n    return layer;\r\n  }\r\n\r\n  private spawn(x: number, y: number, size: number): void {\r\n    if (typeof (Element.prototype as { animate?: unknown }).animate !== 'function') return;\r\n    const layer = this.ensureLayer();\r\n    const dot = document.createElement('span');\r\n    Object.assign(dot.style, {\r\n      position: 'absolute',\r\n      left: `${x}px`,\r\n      top: `${y}px`,\r\n      width: `${size}px`,\r\n      height: `${size}px`,\r\n      marginLeft: `${-size / 2}px`,\r\n      marginTop: `${-size / 2}px`,\r\n      borderRadius: '50%',\r\n      backgroundColor: 'currentColor',\r\n      pointerEvents: 'none',\r\n    });\r\n    layer.appendChild(dot);\r\n\r\n    this.zone.runOutsideAngular(() => {\r\n      const anim = dot.animate(\r\n        [\r\n          { transform: 'scale(0)', opacity: 0.12 },\r\n          { transform: 'scale(1)', opacity: 0 },\r\n        ],\r\n        { duration: RippleDirective.DURATION_MS, easing: 'ease-out' },\r\n      );\r\n      anim.onfinish = () => dot.remove();\r\n    });\r\n  }\r\n}\r\n"]}

package/esm2022/lib/card-grid/card-grid.js

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Card Grid — the layout primitive for the Cards organism.
+ *
+ * Figma: Core Components — "Card Grid" base (file VFBn7KCDy3FSIlvhNo3ylq, 59621:14856).
+ *
+ * Arranges projected cards into one of the design's layouts: full-width,
+ * 2/3/4/5-column even grids, a Bento grid (one feature cell + a stacked column),
+ * or 2/3-column masonry. A 16px gutter (sys-padding-16) throughout. Cards are
+ * projected, so any card type can fill the cells.
+ *
+ *   <compsych-card-grid layout="3-col">
+ *     <compsych-content-card … /> …
+ *   </compsych-card-grid>
+ *
+ * Uses `ViewEncapsulation.None` with `cmp-card-grid`-namespaced selectors so it
+ * can lay out the *projected* card children (bento span, masonry flow), which
+ * emulated encapsulation cannot reach.
+ */
+export class CardGridComponent {
+    layout = input('3-col', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CardGridComponent, isStandalone: true, selector: "compsych-card-grid", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cmp-card-grid--full": "layout() === 'full'", "class.cmp-card-grid--2-col": "layout() === '2-col'", "class.cmp-card-grid--3-col": "layout() === '3-col'", "class.cmp-card-grid--4-col": "layout() === '4-col'", "class.cmp-card-grid--5-col": "layout() === '5-col'", "class.cmp-card-grid--bento": "layout() === 'bento'", "class.cmp-card-grid--masonry-2": "layout() === 'masonry-2'", "class.cmp-card-grid--masonry-3": "layout() === 'masonry-3'" }, classAttribute: "cmp-card-grid" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".cmp-card-grid{--cmp-grid-gap: var(--spacing-padding-sys-padding-16);display:grid;gap:var(--cmp-grid-gap);width:100%;align-items:stretch}.cmp-card-grid--full{grid-template-columns:1fr}.cmp-card-grid--2-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--3-col{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp-card-grid--4-col{grid-template-columns:repeat(4,minmax(0,1fr))}.cmp-card-grid--5-col{grid-template-columns:repeat(5,minmax(0,1fr))}.cmp-card-grid--bento{grid-template-columns:2fr 1fr;grid-auto-rows:1fr}.cmp-card-grid--bento>:first-child{grid-row:span 2}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{display:block;column-gap:var(--cmp-grid-gap)}.cmp-card-grid--masonry-2{column-count:2}.cmp-card-grid--masonry-3{column-count:3}.cmp-card-grid--masonry-2>*,.cmp-card-grid--masonry-3>*{break-inside:avoid;margin-bottom:var(--cmp-grid-gap)}@media(max-width:56.25rem){.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--masonry-3{column-count:2}.cmp-card-grid--bento{grid-template-columns:1fr;grid-auto-rows:auto}.cmp-card-grid--bento>:first-child{grid-row:auto}}@media(max-width:35rem){.cmp-card-grid--2-col,.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:1fr}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{column-count:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'compsych-card-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
+                        class: 'cmp-card-grid',
+                        '[class.cmp-card-grid--full]': "layout() === 'full'",
+                        '[class.cmp-card-grid--2-col]': "layout() === '2-col'",
+                        '[class.cmp-card-grid--3-col]': "layout() === '3-col'",
+                        '[class.cmp-card-grid--4-col]': "layout() === '4-col'",
+                        '[class.cmp-card-grid--5-col]': "layout() === '5-col'",
+                        '[class.cmp-card-grid--bento]': "layout() === 'bento'",
+                        '[class.cmp-card-grid--masonry-2]': "layout() === 'masonry-2'",
+                        '[class.cmp-card-grid--masonry-3]': "layout() === 'masonry-3'",
+                    }, styles: [".cmp-card-grid{--cmp-grid-gap: var(--spacing-padding-sys-padding-16);display:grid;gap:var(--cmp-grid-gap);width:100%;align-items:stretch}.cmp-card-grid--full{grid-template-columns:1fr}.cmp-card-grid--2-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--3-col{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp-card-grid--4-col{grid-template-columns:repeat(4,minmax(0,1fr))}.cmp-card-grid--5-col{grid-template-columns:repeat(5,minmax(0,1fr))}.cmp-card-grid--bento{grid-template-columns:2fr 1fr;grid-auto-rows:1fr}.cmp-card-grid--bento>:first-child{grid-row:span 2}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{display:block;column-gap:var(--cmp-grid-gap)}.cmp-card-grid--masonry-2{column-count:2}.cmp-card-grid--masonry-3{column-count:3}.cmp-card-grid--masonry-2>*,.cmp-card-grid--masonry-3>*{break-inside:avoid;margin-bottom:var(--cmp-grid-gap)}@media(max-width:56.25rem){.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-card-grid--masonry-3{column-count:2}.cmp-card-grid--bento{grid-template-columns:1fr;grid-auto-rows:auto}.cmp-card-grid--bento>:first-child{grid-row:auto}}@media(max-width:35rem){.cmp-card-grid--2-col,.cmp-card-grid--3-col,.cmp-card-grid--4-col,.cmp-card-grid--5-col{grid-template-columns:1fr}.cmp-card-grid--masonry-2,.cmp-card-grid--masonry-3{column-count:1}}\n"] }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
+//# sourceMappingURL=card-grid.js.map

package/esm2022/lib/card-grid/card-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-grid.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/card-grid/card-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAa7F;;;;;;;;;;;;;;;;;GAiBG;AAoBH,MAAM,OAAO,iBAAiB;IACnB,MAAM,GAAG,KAAK,CAAiB,OAAO,6EAAC,CAAC;wGADtC,iBAAiB;4FAAjB,iBAAiB,8sBAdlB,gBAAgB;;4FAcf,iBAAiB;kBAnB7B,SAAS;+BACE,oBAAoB,cAClB,IAAI,mBACC,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,gBAAgB,QAEpB;wBACJ,KAAK,EAAE,eAAe;wBACtB,6BAA6B,EAAE,qBAAqB;wBACpD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,8BAA8B,EAAE,sBAAsB;wBACtD,kCAAkC,EAAE,0BAA0B;wBAC9D,kCAAkC,EAAE,0BAA0B;qBAC/D","sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\r\n\r\n/** Grid arrangement. Mirrors the Figma \"Card Grid\" base type property. */\r\nexport type CardGridLayout =\r\n  | 'full'\r\n  | '2-col'\r\n  | '3-col'\r\n  | '4-col'\r\n  | '5-col'\r\n  | 'bento'\r\n  | 'masonry-2'\r\n  | 'masonry-3';\r\n\r\n/**\r\n * Card Grid — the layout primitive for the Cards organism.\r\n *\r\n * Figma: Core Components — \"Card Grid\" base (file VFBn7KCDy3FSIlvhNo3ylq, 59621:14856).\r\n *\r\n * Arranges projected cards into one of the design's layouts: full-width,\r\n * 2/3/4/5-column even grids, a Bento grid (one feature cell + a stacked column),\r\n * or 2/3-column masonry. A 16px gutter (sys-padding-16) throughout. Cards are\r\n * projected, so any card type can fill the cells.\r\n *\r\n *   <compsych-card-grid layout=\"3-col\">\r\n *     <compsych-content-card … /> …\r\n *   </compsych-card-grid>\r\n *\r\n * Uses `ViewEncapsulation.None` with `cmp-card-grid`-namespaced selectors so it\r\n * can lay out the *projected* card children (bento span, masonry flow), which\r\n * emulated encapsulation cannot reach.\r\n */\r\n@Component({\r\n  selector: 'compsych-card-grid',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  template: `<ng-content />`,\r\n  styleUrl: './card-grid.css',\r\n  host: {\r\n    class: 'cmp-card-grid',\r\n    '[class.cmp-card-grid--full]': \"layout() === 'full'\",\r\n    '[class.cmp-card-grid--2-col]': \"layout() === '2-col'\",\r\n    '[class.cmp-card-grid--3-col]': \"layout() === '3-col'\",\r\n    '[class.cmp-card-grid--4-col]': \"layout() === '4-col'\",\r\n    '[class.cmp-card-grid--5-col]': \"layout() === '5-col'\",\r\n    '[class.cmp-card-grid--bento]': \"layout() === 'bento'\",\r\n    '[class.cmp-card-grid--masonry-2]': \"layout() === 'masonry-2'\",\r\n    '[class.cmp-card-grid--masonry-3]': \"layout() === 'masonry-3'\",\r\n  },\r\n})\r\nexport class CardGridComponent {\r\n  readonly layout = input<CardGridLayout>('3-col');\r\n}\r\n"]}

package/esm2022/lib/footer/footer.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, Input, afterNextRender, signal, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, afterNextRender, signal, } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Footer — bottom bar from the ComPsych Design System.
@@ -16,44 +16,51 @@ export class FooterComponent {
      * The layout switches automatically based on their combined natural width.
      */
     links = [];
-    /**
-     * Copyright notice generated from the current calendar year.
-     * Left-aligned in the row layout and centered when stacked.
-     */
-    copyright = `Copyright \u00a9 ${new Date().getFullYear()} ComPsych\u00ae. All rights reserved.`;
+    /** Copyright text displayed in the footer. */
+    copyright = '';
+    /** Emits the id of the link button that was clicked. */
+    linkClick = new EventEmitter();
     /**
      * Reflects whether the row layout is active.
      * Signal so OnPush picks up DOM-driven updates from async callbacks.
      */
     isRow = signal(false, ...(ngDevMode ? [{ debugName: "isRow" }] : /* istanbul ignore next */ []));
-    /**
-     * Indices of link items whose leading divider should be hidden because
-     * the item has wrapped onto a new row.
-     */
-    hiddenDividerIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "hiddenDividerIndices" }] : /* istanbul ignore next */ []));
     /** Combined natural width of copyright + links + gap + padding. */
     breakpoint = 0;
+    widthObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+            const items = Array.from(this.el.nativeElement.querySelectorAll('.compsych-footer__links li'));
+            const dividers = Array.from(this.el.nativeElement.querySelectorAll('.compsych-footer__divider'));
+            dividers.forEach((d) => (d.style.display = ''));
+            let prevTop = null;
+            items.forEach((item, i) => {
+                const top = item.offsetTop;
+                if (prevTop !== null && top > prevTop) {
+                    dividers[i - 1].style.display = 'none';
+                }
+                prevTop = top;
+            });
+        });
+    });
     constructor(el) {
         this.el = el;
         afterNextRender(() => {
+            this.widthObserver.observe(this.el.nativeElement);
             this.measureBreakpoint();
             this.checkLayout();
-            requestAnimationFrame(() => this.updateDividers());
         });
     }
+    ngOnDestroy() {
+        this.widthObserver.disconnect();
+    }
     ngOnChanges() {
-        // Wait for Angular to update the DOM with the new links before re-measuring.
         requestAnimationFrame(() => {
             this.measureBreakpoint();
             this.checkLayout();
-            // Second rAF ensures the layout class change has been rendered before
-            // measuring vertical positions for divider visibility.
-            requestAnimationFrame(() => this.updateDividers());
         });
     }
     onResize() {
         this.checkLayout();
-        requestAnimationFrame(() => this.updateDividers());
     }
     /**
      * Measures the natural widths of the copyright and links elements once and
@@ -79,36 +86,21 @@ export class FooterComponent {
             return;
         this.isRow.set(this.el.nativeElement.offsetWidth >= this.breakpoint);
     }
-    /**
-     * Compares the vertical positions of adjacent link list items and marks
-     * dividers as hidden for any item that has wrapped onto a new row.
-     */
-    updateDividers() {
-        const items = Array.from(this.el.nativeElement.querySelectorAll('.compsych-footer__links li'));
-        if (items.length === 0)
-            return;
-        const hidden = new Set();
-        let prevTop = items[0].getBoundingClientRect().top;
-        for (let i = 1; i < items.length; i++) {
-            const top = items[i].getBoundingClientRect().top;
-            if (Math.round(top) !== Math.round(prevTop)) {
-                hidden.add(i);
-            }
-            prevTop = top;
-        }
-        this.hiddenDividerIndices.set(hidden);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FooterComponent, isStandalone: true, selector: "compsych-footer", inputs: { links: "links" }, host: { attributes: { "role": "contentinfo" }, listeners: { "window:resize": "onResize()" }, properties: { "class.compsych-footer--row": "isRow()" } }, usesOnChanges: true, ngImport: i0, template: "@if (links.length) {\r\n  <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n    <ul role=\"list\">\r\n      @for (link of links; track link.href; let first = $first; let idx = $index) {\r\n        <li>\r\n          @if (!first && !hiddenDividerIndices().has(idx)) {\r\n            <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n          }\r\n          <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n\r\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--spacing-padding-sys-padding-16);row-gap:var(--spacing-padding-sys-padding-8)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);text-decoration:none;white-space:nowrap}.compsych-footer__link:hover{text-decoration:underline}.compsych-footer__link:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick);border-radius:var(--border-radius-sys-radius-xs)}.compsych-footer__divider{display:block;width:0;height:var(--sys-size-xs);border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FooterComponent, isStandalone: true, selector: "compsych-footer", inputs: { links: "links", copyright: "copyright" }, outputs: { linkClick: "linkClick" }, host: { attributes: { "role": "contentinfo" }, listeners: { "window:resize": "onResize()" }, properties: { "class.compsych-footer--row": "isRow()" } }, usesOnChanges: true, ngImport: i0, template: "@if (links.length) {\r\n  <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n    <ul role=\"list\">\r\n      @for (link of links; track link.id; let first = $first) {\r\n        <li>\r\n          @if (!first) {\r\n            <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button class=\"compsych-footer__link\" type=\"button\" (click)=\"linkClick.emit(link.id)\">{{ link.label }}</button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n\r\n@if (copyright) {\r\n  <p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--spacing-padding-sys-padding-16);row-gap:var(--spacing-padding-sys-padding-8)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{appearance:none;background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);white-space:nowrap}.compsych-footer__link:hover{text-decoration:underline}.compsych-footer__link:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick);border-radius:var(--border-radius-sys-radius-xs)}.compsych-footer__divider{display:block;width:0;height:var(--sys-size-xs);border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'compsych-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], host: {
                         role: 'contentinfo',
                         '[class.compsych-footer--row]': 'isRow()',
-                    }, template: "@if (links.length) {\r\n  <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n    <ul role=\"list\">\r\n      @for (link of links; track link.href; let first = $first; let idx = $index) {\r\n        <li>\r\n          @if (!first && !hiddenDividerIndices().has(idx)) {\r\n            <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n          }\r\n          <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n\r\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--spacing-padding-sys-padding-16);row-gap:var(--spacing-padding-sys-padding-8)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);text-decoration:none;white-space:nowrap}.compsych-footer__link:hover{text-decoration:underline}.compsych-footer__link:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick);border-radius:var(--border-radius-sys-radius-xs)}.compsych-footer__divider{display:block;width:0;height:var(--sys-size-xs);border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);flex-shrink:0}\n"] }]
+                    }, template: "@if (links.length) {\r\n  <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n    <ul role=\"list\">\r\n      @for (link of links; track link.id; let first = $first) {\r\n        <li>\r\n          @if (!first) {\r\n            <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button class=\"compsych-footer__link\" type=\"button\" (click)=\"linkClick.emit(link.id)\">{{ link.label }}</button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n\r\n@if (copyright) {\r\n  <p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--spacing-padding-sys-padding-16);row-gap:var(--spacing-padding-sys-padding-8)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{appearance:none;background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);white-space:nowrap}.compsych-footer__link:hover{text-decoration:underline}.compsych-footer__link:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick);border-radius:var(--border-radius-sys-radius-xs)}.compsych-footer__divider{display:block;width:0;height:var(--sys-size-xs);border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);flex-shrink:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { links: [{
                 type: Input
+            }], copyright: [{
+                type: Input
+            }], linkClick: [{
+                type: Output
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']

package/esm2022/lib/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/footer/footer.ts","../../../../../../packages/angular/src/lib/footer/footer.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  HostListener,\r\n  Input,\r\n  OnChanges,\r\n  afterNextRender,\r\n  signal,\r\n} from '@angular/core';\r\n\r\n/** A single navigation link in the footer. */\r\nexport interface FooterLink {\r\n  /** Text displayed in the link. */\r\n  label: string;\r\n  /** URL the link navigates to. */\r\n  href: string;\r\n}\r\n\r\n/**\r\n * Footer — bottom bar from the ComPsych Design System.\r\n *\r\n * Displays a copyright notice and an optional list of navigation links.\r\n * On initialisation the component measures the natural widths of the copyright\r\n * and links to establish a breakpoint. On every window resize it compares the\r\n * host width against that breakpoint and switches between a row layout\r\n * (copyright left, links right) and a stacked, centered column layout.\r\n */\r\n@Component({\r\n  selector: 'compsych-footer',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [],\r\n  templateUrl: './footer.html',\r\n  styleUrl: './footer.css',\r\n  host: {\r\n    role: 'contentinfo',\r\n    '[class.compsych-footer--row]': 'isRow()',\r\n  },\r\n})\r\nexport class FooterComponent implements OnChanges {\r\n  /**\r\n   * Navigation links rendered alongside the copyright notice.\r\n   * The layout switches automatically based on their combined natural width.\r\n   */\r\n  @Input() links: FooterLink[] = [];\r\n\r\n  /**\r\n   * Copyright notice generated from the current calendar year.\r\n   * Left-aligned in the row layout and centered when stacked.\r\n   */\r\n  readonly copyright = `Copyright \\u00a9 ${new Date().getFullYear()} ComPsych\\u00ae. All rights reserved.`;\r\n\r\n  /**\r\n   * Reflects whether the row layout is active.\r\n   * Signal so OnPush picks up DOM-driven updates from async callbacks.\r\n   */\r\n  protected readonly isRow = signal(false);\r\n\r\n  /**\r\n   * Indices of link items whose leading divider should be hidden because\r\n   * the item has wrapped onto a new row.\r\n   */\r\n  protected readonly hiddenDividerIndices = signal<ReadonlySet<number>>(new Set());\r\n\r\n  /** Combined natural width of copyright + links + gap + padding. */\r\n  private breakpoint = 0;\r\n\r\n  constructor(private readonly el: ElementRef<HTMLElement>) {\r\n    afterNextRender(() => {\r\n      this.measureBreakpoint();\r\n      this.checkLayout();\r\n      requestAnimationFrame(() => this.updateDividers());\r\n    });\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    // Wait for Angular to update the DOM with the new links before re-measuring.\r\n    requestAnimationFrame(() => {\r\n      this.measureBreakpoint();\r\n      this.checkLayout();\r\n      // Second rAF ensures the layout class change has been rendered before\r\n      // measuring vertical positions for divider visibility.\r\n      requestAnimationFrame(() => this.updateDividers());\r\n    });\r\n  }\r\n\r\n  @HostListener('window:resize')\r\n  protected onResize(): void {\r\n    this.checkLayout();\r\n    requestAnimationFrame(() => this.updateDividers());\r\n  }\r\n\r\n  /**\r\n   * Measures the natural widths of the copyright and links elements once and\r\n   * stores their sum (plus padding and gap) as the layout breakpoint.\r\n   */\r\n  private measureBreakpoint(): void {\r\n    const host = this.el.nativeElement;\r\n    const copyrightEl = host.querySelector<HTMLElement>('.compsych-footer__copyright');\r\n    const linksEl = host.querySelector<HTMLElement>('.compsych-footer__links');\r\n    if (!copyrightEl) return;\r\n\r\n    const style = getComputedStyle(host);\r\n    const paddingInline = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);\r\n    const gap = parseFloat(style.columnGap) || 0;\r\n\r\n    this.breakpoint =\r\n      copyrightEl.scrollWidth +\r\n      (linksEl ? linksEl.scrollWidth + gap : 0) +\r\n      paddingInline;\r\n  }\r\n\r\n  /** Switches to the row layout when the host is wide enough for both children. */\r\n  private checkLayout(): void {\r\n    if (!this.breakpoint) return;\r\n    this.isRow.set(this.el.nativeElement.offsetWidth >= this.breakpoint);\r\n  }\r\n\r\n  /**\r\n   * Compares the vertical positions of adjacent link list items and marks\r\n   * dividers as hidden for any item that has wrapped onto a new row.\r\n   */\r\n  private updateDividers(): void {\r\n    const items = Array.from(\r\n      this.el.nativeElement.querySelectorAll<HTMLElement>('.compsych-footer__links li'),\r\n    );\r\n    if (items.length === 0) return;\r\n\r\n    const hidden = new Set<number>();\r\n    let prevTop = items[0].getBoundingClientRect().top;\r\n\r\n    for (let i = 1; i < items.length; i++) {\r\n      const top = items[i].getBoundingClientRect().top;\r\n      if (Math.round(top) !== Math.round(prevTop)) {\r\n        hidden.add(i);\r\n      }\r\n      prevTop = top;\r\n    }\r\n\r\n    this.hiddenDividerIndices.set(hidden);\r\n  }\r\n}\r\n","@if (links.length) {\r\n  <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n    <ul role=\"list\">\r\n      @for (link of links; track link.href; let first = $first; let idx = $index) {\r\n        <li>\r\n          @if (!first && !hiddenDividerIndices().has(idx)) {\r\n            <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n          }\r\n          <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n\r\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n"]}
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/footer/footer.ts","../../../../../../packages/angular/src/lib/footer/footer.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  HostListener,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  Output,\r\n  afterNextRender,\r\n  signal,\r\n} from '@angular/core';\r\n\r\n/** A single navigation link in the footer. */\r\nexport interface FooterLink {\r\n  /** Text displayed in the button. */\r\n  label: string;\r\n  /** Identifier emitted when the button is clicked. */\r\n  id: string;\r\n}\r\n\r\n/**\r\n * Footer — bottom bar from the ComPsych Design System.\r\n *\r\n * Displays a copyright notice and an optional list of navigation links.\r\n * On initialisation the component measures the natural widths of the copyright\r\n * and links to establish a breakpoint. On every window resize it compares the\r\n * host width against that breakpoint and switches between a row layout\r\n * (copyright left, links right) and a stacked, centered column layout.\r\n */\r\n@Component({\r\n  selector: 'compsych-footer',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [],\r\n  templateUrl: './footer.html',\r\n  styleUrl: './footer.css',\r\n  host: {\r\n    role: 'contentinfo',\r\n    '[class.compsych-footer--row]': 'isRow()',\r\n  },\r\n})\r\nexport class FooterComponent implements OnChanges, OnDestroy {\r\n  /**\r\n   * Navigation links rendered alongside the copyright notice.\r\n   * The layout switches automatically based on their combined natural width.\r\n   */\r\n  @Input() links: FooterLink[] = [];\r\n\r\n  /** Copyright text displayed in the footer. */\r\n  @Input() copyright = '';\r\n\r\n  /** Emits the id of the link button that was clicked. */\r\n  @Output() linkClick = new EventEmitter<string>();\r\n\r\n  /**\r\n   * Reflects whether the row layout is active.\r\n   * Signal so OnPush picks up DOM-driven updates from async callbacks.\r\n   */\r\n  protected readonly isRow = signal(false);\r\n\r\n  /** Combined natural width of copyright + links + gap + padding. */\r\n  private breakpoint = 0;\r\n\r\n  private readonly widthObserver = new ResizeObserver(() => {\r\n    requestAnimationFrame(() => {\r\n      const items = Array.from(\r\n        this.el.nativeElement.querySelectorAll<HTMLElement>('.compsych-footer__links li'),\r\n      );\r\n      const dividers = Array.from(\r\n        this.el.nativeElement.querySelectorAll<HTMLElement>('.compsych-footer__divider'),\r\n      );\r\n      dividers.forEach((d) => (d.style.display = ''));\r\n      let prevTop: number | null = null;\r\n      items.forEach((item, i) => {\r\n        const top = item.offsetTop;\r\n        if (prevTop !== null && top > prevTop) {\r\n          dividers[i - 1].style.display = 'none';\r\n        }\r\n        prevTop = top;\r\n      });\r\n    });\r\n  });\r\n\r\n  constructor(private readonly el: ElementRef<HTMLElement>) {\r\n    afterNextRender(() => {\r\n      this.widthObserver.observe(this.el.nativeElement);\r\n      this.measureBreakpoint();\r\n      this.checkLayout();\r\n    });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.widthObserver.disconnect();\r\n  }\r\n\r\n  ngOnChanges(): void {\r\n    requestAnimationFrame(() => {\r\n      this.measureBreakpoint();\r\n      this.checkLayout();\r\n    });\r\n  }\r\n\r\n  @HostListener('window:resize')\r\n  protected onResize(): void {\r\n    this.checkLayout();\r\n  }\r\n\r\n  /**\r\n   * Measures the natural widths of the copyright and links elements once and\r\n   * stores their sum (plus padding and gap) as the layout breakpoint.\r\n   */\r\n  private measureBreakpoint(): void {\r\n    const host = this.el.nativeElement;\r\n    const copyrightEl = host.querySelector<HTMLElement>('.compsych-footer__copyright');\r\n    const linksEl = host.querySelector<HTMLElement>('.compsych-footer__links');\r\n    if (!copyrightEl) return;\r\n\r\n    const style = getComputedStyle(host);\r\n    const paddingInline = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);\r\n    const gap = parseFloat(style.columnGap) || 0;\r\n\r\n    this.breakpoint =\r\n      copyrightEl.scrollWidth +\r\n      (linksEl ? linksEl.scrollWidth + gap : 0) +\r\n      paddingInline;\r\n  }\r\n\r\n  /** Switches to the row layout when the host is wide enough for both children. */\r\n  private checkLayout(): void {\r\n    if (!this.breakpoint) return;\r\n    this.isRow.set(this.el.nativeElement.offsetWidth >= this.breakpoint);\r\n  }\r\n\r\n}\r\n","@if (links.length) {\r\n  <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n    <ul role=\"list\">\r\n      @for (link of links; track link.id; let first = $first) {\r\n        <li>\r\n          @if (!first) {\r\n            <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button class=\"compsych-footer__link\" type=\"button\" (click)=\"linkClick.emit(link.id)\">{{ link.label }}</button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n\r\n@if (copyright) {\r\n  <p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n}\r\n"]}

package/esm2022/lib/header-nav/header-nav.js

@@ -139,11 +139,11 @@ export class HeaderNavComponent {
         return this.sanitizer.bypassSecurityTrustHtml(svg);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderNavComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: HeaderNavComponent, isStandalone: true, selector: "compsych-header-nav", inputs: { level: "level", sidebarOpen: "sidebarOpen", showMenuToggle: "showMenuToggle", brandLabelAria: "brandLabelAria", brandLabel: "brandLabel", brandLabelColor: "brandLabelColor", clientLogoUrl: "clientLogoUrl", breadcrumbs: "breadcrumbs", notificationCount: "notificationCount", avatarInitials: "avatarInitials", showSearch: "showSearch", showCalendarChecked: "showCalendarChecked", showNotifications: "showNotifications", showDocuments: "showDocuments", showAvatar: "showAvatar", showLanguage: "showLanguage", showHelp: "showHelp", showLogout: "showLogout", actionButtons: "actionButtons" }, outputs: { action: "action" }, host: { attributes: { "role": "banner" } }, ngImport: i0, template: "<!-- Left: menu toggle + brand / breadcrumb -->\r\n<div class=\"compsych-hnav__left\">\r\n  @if (showMenuToggle) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"compsych-hnav__icon-btn\"\r\n      [attr.aria-label]=\"sidebarOpen ? 'Close menu' : 'Open menu'\"\r\n      [attr.aria-expanded]=\"sidebarOpen\"\r\n      (click)=\"action.emit('menu-toggle')\"\r\n    >\r\n      <span class=\"compsych-hnav__icon\" [innerHTML]=\"menuIconSvg\" aria-hidden=\"true\"></span>\r\n    </button>\r\n  }\r\n\r\n  @if (isSubPage) {\r\n    <span class=\"compsych-hnav__symbol\" aria-hidden=\"true\">\r\n      <svg viewBox=\"0 0 25.73 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n    </span>\r\n    <nav class=\"compsych-hnav__breadcrumb\" aria-label=\"Breadcrumb\">\r\n      <ol role=\"list\">\r\n        @for (crumb of breadcrumbs; track crumb.id; let last = $last) {\r\n          <li>\r\n            <span class=\"compsych-hnav__sep\" aria-hidden=\"true\">/</span>\r\n            @if (last) {\r\n              <span class=\"compsych-hnav__crumb compsych-hnav__crumb--current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n            } @else {\r\n              <button type=\"button\" class=\"compsych-hnav__crumb\" (click)=\"action.emit(crumb.id)\">{{ crumb.label }}</button>\r\n            }\r\n          </li>\r\n        }\r\n      </ol>\r\n    </nav>\r\n  } @else {\r\n    <button type=\"button\" class=\"compsych-hnav__brand\" [attr.aria-label]=\"brandLabelAria\" (click)=\"action.emit('logo')\">\r\n      @if (clientLogoUrl) {\r\n        <img [src]=\"clientLogoUrl\" class=\"compsych-hnav__logo\" [attr.aria-label]=\"brandLabelAria\" alt=\"\">\r\n      } @else {\r\n        <svg class=\"compsych-hnav__logo\" role=\"img\" [attr.aria-label]=\"brandLabelAria\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n          <path d=\"M100.224 10.1401C99.6034 10.1778 99.2832 10.4202 98.9648 11.1655L95.2646 20.0396C94.401 22.0893 93.2696 23.0217 92.0479 23.1187C90.1758 23.2669 89.8026 22.2909 90.001 21.8384C90.1891 21.4101 90.7857 21.432 91.376 21.688C92.9483 22.3923 94.1901 21.1819 94.7578 19.9478L95.0771 19.1646L91.7148 11.1675C91.3769 10.4225 91.0572 10.1795 90.457 10.1431V9.88135H94.4385V10.1431C93.5556 10.1807 93.1605 10.5339 93.4238 11.1489L95.8848 17.2085L98.4014 11.1694C98.6648 10.5356 98.3066 10.1804 97.4805 10.144V9.87939H100.224V10.1401ZM42.1875 6.48486C44.4823 6.48486 46.2325 7.53169 46.7402 9.23096L46.7695 9.32764C46.9127 9.82287 46.5881 10.3309 46.0771 10.4155C45.6244 10.4908 45.1893 10.2032 45.0869 9.75928V9.75439C44.6901 8.07409 43.4871 6.99187 41.9629 6.9917C39.5355 6.9917 37.8613 9.25128 37.8613 12.5366C37.8615 15.8216 39.8557 18.1185 42.6963 18.1187C44.6906 18.1187 46.1534 17.0358 46.7363 15.355L47.042 15.4116C46.4028 17.9504 44.5009 19.519 41.9619 19.519L41.9609 19.5181L41.9619 19.5171L41.6426 19.5093C38.3673 19.3473 36.0548 16.7007 36.0547 13.3003C36.0547 9.34151 38.4247 6.48504 42.1875 6.48486ZM52.25 9.60107C54.8819 9.60107 56.543 11.5448 56.543 14.3667C56.543 17.4128 54.7326 19.5063 52.082 19.5063C49.4316 19.5063 47.7891 17.5624 47.7891 14.7593C47.7891 11.7132 49.6182 9.60114 52.25 9.60107ZM103.946 9.6167C105.862 9.61671 107.065 10.8474 107.252 11.8726C107.256 11.8884 107.455 12.641 106.806 12.8394C106.402 12.9623 105.897 12.7605 105.769 12.2085C105.556 11.2968 104.979 10.1392 103.702 10.1392C102.124 10.1392 101.054 11.7431 101.054 13.8667C101.054 16.4016 102.35 18.1538 104.436 18.1538C105.544 18.1537 106.615 17.576 107.29 16.3833L107.516 16.439C107.027 18.3032 105.675 19.4956 103.759 19.4956V19.4976C101.166 19.4974 99.457 17.3907 99.457 14.6685C99.4572 11.9463 101.166 9.6167 103.946 9.6167ZM86.9658 9.60693C88.5252 9.60693 90.0049 10.2854 90.3486 11.4526C90.4274 11.7209 90.4283 12.2344 90.0801 12.4097C89.7292 12.5859 89.3006 12.3929 89.1406 12.0493C88.6399 10.9763 88.1187 10.1296 86.749 10.1294C85.6223 10.1294 84.9748 10.7634 84.9746 11.6772C84.9746 12.8172 86.1343 13.2135 87.3945 13.6431C88.8752 14.1476 90.4945 14.6992 90.5352 16.562C90.5733 18.2954 88.971 19.4887 86.96 19.4888L86.959 19.4878V19.4858C85.3417 19.4872 83.9282 19.0132 83.3555 17.9028C83.1887 17.5793 83.2679 17.1326 83.5967 16.9761C83.9951 16.7863 84.3966 17.1152 84.6123 17.5005C85.1159 18.4011 86.1587 18.9632 87.0879 18.9634C88.2717 18.9634 89.2381 18.2926 89.2383 17.2681C89.2201 15.9311 87.9619 15.5017 86.6465 15.0532C85.2106 14.5636 83.7073 14.0505 83.6777 12.3091C83.6595 10.7051 84.9748 9.60708 86.9658 9.60693ZM110.52 11.6938C111.509 10.3857 112.498 9.60107 113.805 9.60107C115.447 9.60115 116.399 10.6471 116.399 12.4595V17.8608C116.399 18.6829 116.959 18.8511 117.631 18.9819V19.2437H113.618V18.9819C114.29 18.8511 114.85 18.6828 114.85 17.8608V12.5532C114.85 11.3947 114.197 10.6842 113.133 10.6841C112.218 10.6841 111.453 11.0956 110.52 12.1606V17.8608C110.52 18.6829 111.079 18.8511 111.751 18.9819V19.2437H107.72V18.9819C108.41 18.8511 108.97 18.6829 108.97 17.8608V8.04932C108.97 7.41406 108.671 7.11501 107.999 7.07764H107.552V6.81592L110.258 6.05029H110.52V11.6938ZM78.2471 6.76709L78.249 6.76807C81.1606 6.76807 83.1533 7.86945 83.1533 10.2554C83.1531 12.641 81.1615 13.7222 78.249 13.7222H77.0264V13.4331C80.258 13.4331 81.3154 11.9881 81.3105 10.2554C81.3055 8.52254 80.1832 7.29064 78.043 7.29053H76.3525L76.3506 17.562C76.3506 18.6802 76.8959 18.8865 78.0215 18.9604V19.2212H68.7891V18.9604C69.4654 18.8304 70.0283 18.6616 70.0283 17.8413V12.5474C70.0282 11.391 69.3706 10.6831 68.2998 10.6831C67.3412 10.6831 66.5705 11.1121 65.6133 12.231V17.8423C65.6133 18.6635 66.177 18.8314 66.8535 18.9614V19.2231H62.8145V18.9614C63.491 18.8314 64.0547 18.6627 64.0547 17.8423V12.5483C64.0545 11.3921 63.3963 10.6841 62.3271 10.6841C61.4441 10.6841 60.711 11.0579 59.8291 12.0083V17.8442C59.8293 18.6649 60.3921 18.8324 61.0684 18.9624V19.2241H57.0098V18.9624C57.7046 18.8316 58.2684 18.6643 58.2686 17.8442V11.5991C58.2686 10.9653 57.9682 10.6659 57.292 10.6099H56.8418V10.3481L59.5654 9.5835H59.8291V11.522C60.7869 10.31 61.7449 9.60208 63.0029 9.60205C64.4503 9.60205 65.3706 10.4033 65.5762 11.8198C66.6086 10.4401 67.6239 9.60208 68.9766 9.60205C70.629 9.60205 71.5879 10.6464 71.5879 12.4546V17.8423L71.5859 17.8403C71.5859 18.3871 71.8364 18.6442 72.2041 18.7935C72.5694 18.9413 73.0559 18.9637 73.4463 18.9058C74.2358 18.788 74.6386 18.4873 74.6387 17.561V8.40674C74.6386 7.32569 74.094 7.10187 72.9482 7.02686V6.76514H78.2461L78.2471 6.76709ZM51.9512 10.1245C50.4208 10.1247 49.4503 11.7317 49.4502 14.0112C49.4502 16.1043 50.2529 18.9829 52.3994 18.9829C53.9487 18.9829 54.9004 17.3567 54.9004 15.0581C54.9004 13.0024 54.0791 10.1245 51.9512 10.1245Z\" fill=\"currentColor\"/>\r\n        </svg>\r\n      }\r\n      @if (brandLabel) {\r\n        <span class=\"compsych-hnav__brand-label\" [attr.aria-label]=\"brandLabelAria\" [style.color]=\"brandLabelColor\">{{ brandLabel }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Right: actions -->\r\n<div class=\"compsych-hnav__actions\">\r\n  @if (isLoggedOut) {\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showHelp) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Help\" (click)=\"action.emit('help')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"helpIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    @if (showSearch) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Search\" (click)=\"action.emit('search')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"searchIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showCalendarChecked) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Calendar\" (click)=\"action.emit('calendar-checked')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"calendarCheckedIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showNotifications) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        [attr.aria-label]=\"notificationAriaLabel\"\r\n        (click)=\"action.emit('notifications')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"bellIconSvg\" aria-hidden=\"true\"></span>\r\n        @if (notificationCount > 0) {\r\n          <span class=\"compsych-hnav__badge\" aria-hidden=\"true\">{{ badgeText }}</span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showDocuments) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        aria-label=\"Documents\"\r\n        (click)=\"action.emit('documents')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"fileTextIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (showAvatar) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__avatar compsych-hnav__overflow-core\"\r\n        [attr.aria-label]=\"avatarInitials ? 'Account: ' + avatarInitials : 'Account'\"\r\n        (click)=\"action.emit('avatar')\"\r\n      >\r\n        @if (avatarInitials) {\r\n          {{ avatarInitials }}\r\n        } @else {\r\n          <span class=\"compsych-hnav__icon\" [innerHTML]=\"userIconSvg\" aria-hidden=\"true\"></span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showLogout) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn\" aria-label=\"Logout\" (click)=\"action.emit('logout')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"logOutIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16);height:4rem;padding:0 var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-bottom:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-medium-sys-font-family);container-type:inline-size}.compsych-hnav__left{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-12);min-width:0;flex:1 1 auto}.compsych-hnav__brand{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);padding:0;border:0;background:transparent;color:var(--surface-surface-sys-on-surface);cursor:pointer;min-width:0}.compsych-hnav__brand:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.25rem;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__logo{display:block;height:1.5rem;width:auto;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__brand-label{border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);padding-left:var(--spacing-padding-sys-padding-6);margin-top:var(--spacing-padding-sys-padding-6);line-height:1.5;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compsych-hnav__symbol{display:inline-flex;align-items:center;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__symbol svg{display:block;height:1.5rem;width:auto}.compsych-hnav__breadcrumb{min-width:0;overflow:hidden}.compsych-hnav__breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__breadcrumb li{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__sep{color:var(--outline-sys-outline-fixed);font-size:var(--label-medium-sys-font-size)}.compsych-hnav__crumb{padding:0;border:0;background:transparent;font-family:inherit;font-size:var(--label-medium-sys-font-size);font-weight:500;color:var(--surface-surface-sys-on-surface-variant);white-space:nowrap;cursor:pointer}.compsych-hnav__crumb:hover{color:var(--surface-surface-sys-on-surface)}.compsych-hnav__crumb:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.125rem;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__crumb--current{color:var(--surface-surface-sys-on-surface);overflow:hidden;text-overflow:ellipsis;cursor:default}.compsych-hnav__actions{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);flex-shrink:0}.compsych-hnav__icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:transparent;color:var(--surface-surface-sys-on-surface-variant);cursor:pointer;flex-shrink:0;transition:background-color .12s ease-out,color .12s ease-out}.compsych-hnav__icon-btn:hover{background:var(--surface-surface-container-sys-surface-container-high);color:var(--surface-surface-sys-on-surface)}.compsych-hnav__icon-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.125rem}.compsych-hnav__icon{display:flex;align-items:center;justify-content:center}.compsych-hnav__badge{position:absolute;top:.125rem;right:.125rem;min-width:1rem;height:1rem;padding:0 .25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sys-radius-full);background:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);font-size:.625rem;line-height:1;font-weight:600;box-shadow:0 0 0 .125rem var(--surface-surface-container-sys-surface-container-lowest)}.compsych-hnav__avatar{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed);font-size:var(--label-small-sys-font-size);font-weight:600;letter-spacing:.02em;cursor:pointer;flex-shrink:0}.compsych-hnav__avatar:hover{filter:brightness(.97)}.compsych-hnav__avatar:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.125rem}.compsych-hnav__action-btns{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}@container (max-width: 45rem){.compsych-hnav__action-btns{display:none}}@container (max-width: 40rem){.compsych-hnav__breadcrumb{display:none}}@container (max-width: 30rem){.compsych-hnav__overflow-aux{display:none}}@container (max-width: 25rem){.compsych-hnav__overflow-core{display:none}}@media(max-width:40rem){:host{height:3.5rem;padding:0 var(--spacing-padding-sys-padding-16);gap:var(--spacing-padding-sys-padding-8)}.compsych-hnav__logo{height:1.25rem}.compsych-hnav__symbol svg{height:1.25rem;width:auto}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "compsych-button", inputs: ["label", "variant", "size", "leadingIcon", "trailingIcon", "type", "ariaLabel", "iconOnly", "disabled", "loading", "fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: HeaderNavComponent, isStandalone: true, selector: "compsych-header-nav", inputs: { level: "level", sidebarOpen: "sidebarOpen", showMenuToggle: "showMenuToggle", brandLabelAria: "brandLabelAria", brandLabel: "brandLabel", brandLabelColor: "brandLabelColor", clientLogoUrl: "clientLogoUrl", breadcrumbs: "breadcrumbs", notificationCount: "notificationCount", avatarInitials: "avatarInitials", showSearch: "showSearch", showCalendarChecked: "showCalendarChecked", showNotifications: "showNotifications", showDocuments: "showDocuments", showAvatar: "showAvatar", showLanguage: "showLanguage", showHelp: "showHelp", showLogout: "showLogout", actionButtons: "actionButtons" }, outputs: { action: "action" }, host: { attributes: { "role": "banner" } }, ngImport: i0, template: "<!-- Left: menu toggle + brand / breadcrumb -->\r\n<div class=\"compsych-hnav__left\">\r\n  @if (showMenuToggle) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"compsych-hnav__icon-btn\"\r\n      [attr.aria-label]=\"sidebarOpen ? 'Close menu' : 'Open menu'\"\r\n      [attr.aria-expanded]=\"sidebarOpen\"\r\n      (click)=\"action.emit('menu-toggle')\"\r\n    >\r\n      <span class=\"compsych-hnav__icon\" [innerHTML]=\"menuIconSvg\" aria-hidden=\"true\"></span>\r\n    </button>\r\n  }\r\n\r\n  @if (isSubPage) {\r\n    <span class=\"compsych-hnav__symbol\" aria-hidden=\"true\">\r\n      <svg viewBox=\"0 0 25.73 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n    </span>\r\n    <nav class=\"compsych-hnav__breadcrumb\" aria-label=\"Breadcrumb\">\r\n      <ol role=\"list\">\r\n        @for (crumb of breadcrumbs; track crumb.id; let last = $last) {\r\n          <li>\r\n            <span class=\"compsych-hnav__sep\" aria-hidden=\"true\">/</span>\r\n            @if (last) {\r\n              <span class=\"compsych-hnav__crumb compsych-hnav__crumb--current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n            } @else {\r\n              <button type=\"button\" class=\"compsych-hnav__crumb\" (click)=\"action.emit(crumb.id)\">{{ crumb.label }}</button>\r\n            }\r\n          </li>\r\n        }\r\n      </ol>\r\n    </nav>\r\n  } @else {\r\n    <button type=\"button\" class=\"compsych-hnav__brand\" [attr.aria-label]=\"brandLabelAria\" (click)=\"action.emit('logo')\">\r\n      @if (clientLogoUrl) {\r\n        <img [src]=\"clientLogoUrl\" class=\"compsych-hnav__logo\" [attr.aria-label]=\"brandLabelAria\" alt=\"\">\r\n      } @else {\r\n        <svg class=\"compsych-hnav__logo\" role=\"img\" [attr.aria-label]=\"brandLabelAria\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n          <path d=\"M100.224 10.1401C99.6034 10.1778 99.2832 10.4202 98.9648 11.1655L95.2646 20.0396C94.401 22.0893 93.2696 23.0217 92.0479 23.1187C90.1758 23.2669 89.8026 22.2909 90.001 21.8384C90.1891 21.4101 90.7857 21.432 91.376 21.688C92.9483 22.3923 94.1901 21.1819 94.7578 19.9478L95.0771 19.1646L91.7148 11.1675C91.3769 10.4225 91.0572 10.1795 90.457 10.1431V9.88135H94.4385V10.1431C93.5556 10.1807 93.1605 10.5339 93.4238 11.1489L95.8848 17.2085L98.4014 11.1694C98.6648 10.5356 98.3066 10.1804 97.4805 10.144V9.87939H100.224V10.1401ZM42.1875 6.48486C44.4823 6.48486 46.2325 7.53169 46.7402 9.23096L46.7695 9.32764C46.9127 9.82287 46.5881 10.3309 46.0771 10.4155C45.6244 10.4908 45.1893 10.2032 45.0869 9.75928V9.75439C44.6901 8.07409 43.4871 6.99187 41.9629 6.9917C39.5355 6.9917 37.8613 9.25128 37.8613 12.5366C37.8615 15.8216 39.8557 18.1185 42.6963 18.1187C44.6906 18.1187 46.1534 17.0358 46.7363 15.355L47.042 15.4116C46.4028 17.9504 44.5009 19.519 41.9619 19.519L41.9609 19.5181L41.9619 19.5171L41.6426 19.5093C38.3673 19.3473 36.0548 16.7007 36.0547 13.3003C36.0547 9.34151 38.4247 6.48504 42.1875 6.48486ZM52.25 9.60107C54.8819 9.60107 56.543 11.5448 56.543 14.3667C56.543 17.4128 54.7326 19.5063 52.082 19.5063C49.4316 19.5063 47.7891 17.5624 47.7891 14.7593C47.7891 11.7132 49.6182 9.60114 52.25 9.60107ZM103.946 9.6167C105.862 9.61671 107.065 10.8474 107.252 11.8726C107.256 11.8884 107.455 12.641 106.806 12.8394C106.402 12.9623 105.897 12.7605 105.769 12.2085C105.556 11.2968 104.979 10.1392 103.702 10.1392C102.124 10.1392 101.054 11.7431 101.054 13.8667C101.054 16.4016 102.35 18.1538 104.436 18.1538C105.544 18.1537 106.615 17.576 107.29 16.3833L107.516 16.439C107.027 18.3032 105.675 19.4956 103.759 19.4956V19.4976C101.166 19.4974 99.457 17.3907 99.457 14.6685C99.4572 11.9463 101.166 9.6167 103.946 9.6167ZM86.9658 9.60693C88.5252 9.60693 90.0049 10.2854 90.3486 11.4526C90.4274 11.7209 90.4283 12.2344 90.0801 12.4097C89.7292 12.5859 89.3006 12.3929 89.1406 12.0493C88.6399 10.9763 88.1187 10.1296 86.749 10.1294C85.6223 10.1294 84.9748 10.7634 84.9746 11.6772C84.9746 12.8172 86.1343 13.2135 87.3945 13.6431C88.8752 14.1476 90.4945 14.6992 90.5352 16.562C90.5733 18.2954 88.971 19.4887 86.96 19.4888L86.959 19.4878V19.4858C85.3417 19.4872 83.9282 19.0132 83.3555 17.9028C83.1887 17.5793 83.2679 17.1326 83.5967 16.9761C83.9951 16.7863 84.3966 17.1152 84.6123 17.5005C85.1159 18.4011 86.1587 18.9632 87.0879 18.9634C88.2717 18.9634 89.2381 18.2926 89.2383 17.2681C89.2201 15.9311 87.9619 15.5017 86.6465 15.0532C85.2106 14.5636 83.7073 14.0505 83.6777 12.3091C83.6595 10.7051 84.9748 9.60708 86.9658 9.60693ZM110.52 11.6938C111.509 10.3857 112.498 9.60107 113.805 9.60107C115.447 9.60115 116.399 10.6471 116.399 12.4595V17.8608C116.399 18.6829 116.959 18.8511 117.631 18.9819V19.2437H113.618V18.9819C114.29 18.8511 114.85 18.6828 114.85 17.8608V12.5532C114.85 11.3947 114.197 10.6842 113.133 10.6841C112.218 10.6841 111.453 11.0956 110.52 12.1606V17.8608C110.52 18.6829 111.079 18.8511 111.751 18.9819V19.2437H107.72V18.9819C108.41 18.8511 108.97 18.6829 108.97 17.8608V8.04932C108.97 7.41406 108.671 7.11501 107.999 7.07764H107.552V6.81592L110.258 6.05029H110.52V11.6938ZM78.2471 6.76709L78.249 6.76807C81.1606 6.76807 83.1533 7.86945 83.1533 10.2554C83.1531 12.641 81.1615 13.7222 78.249 13.7222H77.0264V13.4331C80.258 13.4331 81.3154 11.9881 81.3105 10.2554C81.3055 8.52254 80.1832 7.29064 78.043 7.29053H76.3525L76.3506 17.562C76.3506 18.6802 76.8959 18.8865 78.0215 18.9604V19.2212H68.7891V18.9604C69.4654 18.8304 70.0283 18.6616 70.0283 17.8413V12.5474C70.0282 11.391 69.3706 10.6831 68.2998 10.6831C67.3412 10.6831 66.5705 11.1121 65.6133 12.231V17.8423C65.6133 18.6635 66.177 18.8314 66.8535 18.9614V19.2231H62.8145V18.9614C63.491 18.8314 64.0547 18.6627 64.0547 17.8423V12.5483C64.0545 11.3921 63.3963 10.6841 62.3271 10.6841C61.4441 10.6841 60.711 11.0579 59.8291 12.0083V17.8442C59.8293 18.6649 60.3921 18.8324 61.0684 18.9624V19.2241H57.0098V18.9624C57.7046 18.8316 58.2684 18.6643 58.2686 17.8442V11.5991C58.2686 10.9653 57.9682 10.6659 57.292 10.6099H56.8418V10.3481L59.5654 9.5835H59.8291V11.522C60.7869 10.31 61.7449 9.60208 63.0029 9.60205C64.4503 9.60205 65.3706 10.4033 65.5762 11.8198C66.6086 10.4401 67.6239 9.60208 68.9766 9.60205C70.629 9.60205 71.5879 10.6464 71.5879 12.4546V17.8423L71.5859 17.8403C71.5859 18.3871 71.8364 18.6442 72.2041 18.7935C72.5694 18.9413 73.0559 18.9637 73.4463 18.9058C74.2358 18.788 74.6386 18.4873 74.6387 17.561V8.40674C74.6386 7.32569 74.094 7.10187 72.9482 7.02686V6.76514H78.2461L78.2471 6.76709ZM51.9512 10.1245C50.4208 10.1247 49.4503 11.7317 49.4502 14.0112C49.4502 16.1043 50.2529 18.9829 52.3994 18.9829C53.9487 18.9829 54.9004 17.3567 54.9004 15.0581C54.9004 13.0024 54.0791 10.1245 51.9512 10.1245Z\" fill=\"currentColor\"/>\r\n        </svg>\r\n      }\r\n      @if (brandLabel) {\r\n        <span class=\"compsych-hnav__brand-label\" [attr.aria-label]=\"brandLabelAria\" [style.color]=\"brandLabelColor\">{{ brandLabel }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Right: actions -->\r\n<div class=\"compsych-hnav__actions\">\r\n  @if (isLoggedOut) {\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showHelp) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Help\" (click)=\"action.emit('help')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"helpIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    @if (showSearch) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Search\" (click)=\"action.emit('search')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"searchIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showCalendarChecked) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Calendar\" (click)=\"action.emit('calendar-checked')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"calendarCheckedIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showNotifications) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        [attr.aria-label]=\"notificationAriaLabel\"\r\n        (click)=\"action.emit('notifications')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"bellIconSvg\" aria-hidden=\"true\"></span>\r\n        @if (notificationCount > 0) {\r\n          <span class=\"compsych-hnav__badge\" aria-hidden=\"true\">{{ badgeText }}</span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showDocuments) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        aria-label=\"Documents\"\r\n        (click)=\"action.emit('documents')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"fileTextIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (showAvatar) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__avatar compsych-hnav__overflow-core\"\r\n        [attr.aria-label]=\"avatarInitials ? 'Account: ' + avatarInitials : 'Account'\"\r\n        (click)=\"action.emit('avatar')\"\r\n      >\r\n        @if (avatarInitials) {\r\n          {{ avatarInitials }}\r\n        } @else {\r\n          <span class=\"compsych-hnav__icon\" [innerHTML]=\"userIconSvg\" aria-hidden=\"true\"></span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showLogout) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn\" aria-label=\"Logout\" (click)=\"action.emit('logout')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"logOutIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16);height:64px;padding:0 var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-bottom:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-medium-sys-font-family);container-type:inline-size}.compsych-hnav__left{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-12);min-width:0;flex:1 1 auto}.compsych-hnav__brand{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);padding:0;border:0;background:transparent;color:var(--surface-surface-sys-on-surface);cursor:pointer;min-width:0}.compsych-hnav__brand:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:4px;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__logo{display:block;height:24px;width:auto;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__brand-label{border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);padding-left:var(--spacing-padding-sys-padding-6);margin-top:var(--spacing-padding-sys-padding-6);line-height:1.5;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compsych-hnav__symbol{display:inline-flex;align-items:center;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__symbol svg{display:block;height:24px;width:auto}.compsych-hnav__breadcrumb{min-width:0;overflow:hidden}.compsych-hnav__breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__breadcrumb li{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__sep{color:var(--outline-sys-outline-fixed);font-size:var(--label-medium-sys-font-size)}.compsych-hnav__crumb{padding:0;border:0;background:transparent;font-family:inherit;font-size:var(--label-medium-sys-font-size);font-weight:500;color:var(--surface-surface-sys-on-surface-variant);white-space:nowrap;cursor:pointer}.compsych-hnav__crumb:hover{color:var(--surface-surface-sys-on-surface)}.compsych-hnav__crumb:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:2px;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__crumb--current{color:var(--surface-surface-sys-on-surface);overflow:hidden;text-overflow:ellipsis;cursor:default}.compsych-hnav__actions{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);flex-shrink:0}.compsych-hnav__icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:transparent;color:var(--surface-surface-sys-on-surface-variant);cursor:pointer;flex-shrink:0;transition:background-color .12s ease-out,color .12s ease-out}.compsych-hnav__icon-btn:hover{background:var(--surface-surface-container-sys-surface-container-high);color:var(--surface-surface-sys-on-surface)}.compsych-hnav__icon-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:2px}.compsych-hnav__icon{display:flex;align-items:center;justify-content:center}.compsych-hnav__badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sys-radius-full);background:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);font-size:10px;line-height:1;font-weight:600;box-shadow:0 0 0 2px var(--surface-surface-container-sys-surface-container-lowest)}.compsych-hnav__avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed);font-size:var(--label-small-sys-font-size);font-weight:600;letter-spacing:.02em;cursor:pointer;flex-shrink:0}.compsych-hnav__avatar:hover{filter:brightness(.97)}.compsych-hnav__avatar:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:2px}.compsych-hnav__action-btns{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}@container (max-width: 720px){.compsych-hnav__action-btns{display:none}}@container (max-width: 640px){.compsych-hnav__breadcrumb{display:none}}@container (max-width: 480px){.compsych-hnav__overflow-aux{display:none}}@container (max-width: 400px){.compsych-hnav__overflow-core{display:none}}@media(max-width:640px){:host{height:56px;padding:0 var(--spacing-padding-sys-padding-16);gap:var(--spacing-padding-sys-padding-8)}.compsych-hnav__logo{height:20px}.compsych-hnav__symbol svg{height:20px;width:auto}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "compsych-button", inputs: ["label", "variant", "size", "leadingIcon", "trailingIcon", "type", "ariaLabel", "iconOnly", "disabled", "loading", "fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'compsych-header-nav', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], host: { role: 'banner' }, template: "<!-- Left: menu toggle + brand / breadcrumb -->\r\n<div class=\"compsych-hnav__left\">\r\n  @if (showMenuToggle) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"compsych-hnav__icon-btn\"\r\n      [attr.aria-label]=\"sidebarOpen ? 'Close menu' : 'Open menu'\"\r\n      [attr.aria-expanded]=\"sidebarOpen\"\r\n      (click)=\"action.emit('menu-toggle')\"\r\n    >\r\n      <span class=\"compsych-hnav__icon\" [innerHTML]=\"menuIconSvg\" aria-hidden=\"true\"></span>\r\n    </button>\r\n  }\r\n\r\n  @if (isSubPage) {\r\n    <span class=\"compsych-hnav__symbol\" aria-hidden=\"true\">\r\n      <svg viewBox=\"0 0 25.73 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n    </span>\r\n    <nav class=\"compsych-hnav__breadcrumb\" aria-label=\"Breadcrumb\">\r\n      <ol role=\"list\">\r\n        @for (crumb of breadcrumbs; track crumb.id; let last = $last) {\r\n          <li>\r\n            <span class=\"compsych-hnav__sep\" aria-hidden=\"true\">/</span>\r\n            @if (last) {\r\n              <span class=\"compsych-hnav__crumb compsych-hnav__crumb--current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n            } @else {\r\n              <button type=\"button\" class=\"compsych-hnav__crumb\" (click)=\"action.emit(crumb.id)\">{{ crumb.label }}</button>\r\n            }\r\n          </li>\r\n        }\r\n      </ol>\r\n    </nav>\r\n  } @else {\r\n    <button type=\"button\" class=\"compsych-hnav__brand\" [attr.aria-label]=\"brandLabelAria\" (click)=\"action.emit('logo')\">\r\n      @if (clientLogoUrl) {\r\n        <img [src]=\"clientLogoUrl\" class=\"compsych-hnav__logo\" [attr.aria-label]=\"brandLabelAria\" alt=\"\">\r\n      } @else {\r\n        <svg class=\"compsych-hnav__logo\" role=\"img\" [attr.aria-label]=\"brandLabelAria\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n          <path d=\"M100.224 10.1401C99.6034 10.1778 99.2832 10.4202 98.9648 11.1655L95.2646 20.0396C94.401 22.0893 93.2696 23.0217 92.0479 23.1187C90.1758 23.2669 89.8026 22.2909 90.001 21.8384C90.1891 21.4101 90.7857 21.432 91.376 21.688C92.9483 22.3923 94.1901 21.1819 94.7578 19.9478L95.0771 19.1646L91.7148 11.1675C91.3769 10.4225 91.0572 10.1795 90.457 10.1431V9.88135H94.4385V10.1431C93.5556 10.1807 93.1605 10.5339 93.4238 11.1489L95.8848 17.2085L98.4014 11.1694C98.6648 10.5356 98.3066 10.1804 97.4805 10.144V9.87939H100.224V10.1401ZM42.1875 6.48486C44.4823 6.48486 46.2325 7.53169 46.7402 9.23096L46.7695 9.32764C46.9127 9.82287 46.5881 10.3309 46.0771 10.4155C45.6244 10.4908 45.1893 10.2032 45.0869 9.75928V9.75439C44.6901 8.07409 43.4871 6.99187 41.9629 6.9917C39.5355 6.9917 37.8613 9.25128 37.8613 12.5366C37.8615 15.8216 39.8557 18.1185 42.6963 18.1187C44.6906 18.1187 46.1534 17.0358 46.7363 15.355L47.042 15.4116C46.4028 17.9504 44.5009 19.519 41.9619 19.519L41.9609 19.5181L41.9619 19.5171L41.6426 19.5093C38.3673 19.3473 36.0548 16.7007 36.0547 13.3003C36.0547 9.34151 38.4247 6.48504 42.1875 6.48486ZM52.25 9.60107C54.8819 9.60107 56.543 11.5448 56.543 14.3667C56.543 17.4128 54.7326 19.5063 52.082 19.5063C49.4316 19.5063 47.7891 17.5624 47.7891 14.7593C47.7891 11.7132 49.6182 9.60114 52.25 9.60107ZM103.946 9.6167C105.862 9.61671 107.065 10.8474 107.252 11.8726C107.256 11.8884 107.455 12.641 106.806 12.8394C106.402 12.9623 105.897 12.7605 105.769 12.2085C105.556 11.2968 104.979 10.1392 103.702 10.1392C102.124 10.1392 101.054 11.7431 101.054 13.8667C101.054 16.4016 102.35 18.1538 104.436 18.1538C105.544 18.1537 106.615 17.576 107.29 16.3833L107.516 16.439C107.027 18.3032 105.675 19.4956 103.759 19.4956V19.4976C101.166 19.4974 99.457 17.3907 99.457 14.6685C99.4572 11.9463 101.166 9.6167 103.946 9.6167ZM86.9658 9.60693C88.5252 9.60693 90.0049 10.2854 90.3486 11.4526C90.4274 11.7209 90.4283 12.2344 90.0801 12.4097C89.7292 12.5859 89.3006 12.3929 89.1406 12.0493C88.6399 10.9763 88.1187 10.1296 86.749 10.1294C85.6223 10.1294 84.9748 10.7634 84.9746 11.6772C84.9746 12.8172 86.1343 13.2135 87.3945 13.6431C88.8752 14.1476 90.4945 14.6992 90.5352 16.562C90.5733 18.2954 88.971 19.4887 86.96 19.4888L86.959 19.4878V19.4858C85.3417 19.4872 83.9282 19.0132 83.3555 17.9028C83.1887 17.5793 83.2679 17.1326 83.5967 16.9761C83.9951 16.7863 84.3966 17.1152 84.6123 17.5005C85.1159 18.4011 86.1587 18.9632 87.0879 18.9634C88.2717 18.9634 89.2381 18.2926 89.2383 17.2681C89.2201 15.9311 87.9619 15.5017 86.6465 15.0532C85.2106 14.5636 83.7073 14.0505 83.6777 12.3091C83.6595 10.7051 84.9748 9.60708 86.9658 9.60693ZM110.52 11.6938C111.509 10.3857 112.498 9.60107 113.805 9.60107C115.447 9.60115 116.399 10.6471 116.399 12.4595V17.8608C116.399 18.6829 116.959 18.8511 117.631 18.9819V19.2437H113.618V18.9819C114.29 18.8511 114.85 18.6828 114.85 17.8608V12.5532C114.85 11.3947 114.197 10.6842 113.133 10.6841C112.218 10.6841 111.453 11.0956 110.52 12.1606V17.8608C110.52 18.6829 111.079 18.8511 111.751 18.9819V19.2437H107.72V18.9819C108.41 18.8511 108.97 18.6829 108.97 17.8608V8.04932C108.97 7.41406 108.671 7.11501 107.999 7.07764H107.552V6.81592L110.258 6.05029H110.52V11.6938ZM78.2471 6.76709L78.249 6.76807C81.1606 6.76807 83.1533 7.86945 83.1533 10.2554C83.1531 12.641 81.1615 13.7222 78.249 13.7222H77.0264V13.4331C80.258 13.4331 81.3154 11.9881 81.3105 10.2554C81.3055 8.52254 80.1832 7.29064 78.043 7.29053H76.3525L76.3506 17.562C76.3506 18.6802 76.8959 18.8865 78.0215 18.9604V19.2212H68.7891V18.9604C69.4654 18.8304 70.0283 18.6616 70.0283 17.8413V12.5474C70.0282 11.391 69.3706 10.6831 68.2998 10.6831C67.3412 10.6831 66.5705 11.1121 65.6133 12.231V17.8423C65.6133 18.6635 66.177 18.8314 66.8535 18.9614V19.2231H62.8145V18.9614C63.491 18.8314 64.0547 18.6627 64.0547 17.8423V12.5483C64.0545 11.3921 63.3963 10.6841 62.3271 10.6841C61.4441 10.6841 60.711 11.0579 59.8291 12.0083V17.8442C59.8293 18.6649 60.3921 18.8324 61.0684 18.9624V19.2241H57.0098V18.9624C57.7046 18.8316 58.2684 18.6643 58.2686 17.8442V11.5991C58.2686 10.9653 57.9682 10.6659 57.292 10.6099H56.8418V10.3481L59.5654 9.5835H59.8291V11.522C60.7869 10.31 61.7449 9.60208 63.0029 9.60205C64.4503 9.60205 65.3706 10.4033 65.5762 11.8198C66.6086 10.4401 67.6239 9.60208 68.9766 9.60205C70.629 9.60205 71.5879 10.6464 71.5879 12.4546V17.8423L71.5859 17.8403C71.5859 18.3871 71.8364 18.6442 72.2041 18.7935C72.5694 18.9413 73.0559 18.9637 73.4463 18.9058C74.2358 18.788 74.6386 18.4873 74.6387 17.561V8.40674C74.6386 7.32569 74.094 7.10187 72.9482 7.02686V6.76514H78.2461L78.2471 6.76709ZM51.9512 10.1245C50.4208 10.1247 49.4503 11.7317 49.4502 14.0112C49.4502 16.1043 50.2529 18.9829 52.3994 18.9829C53.9487 18.9829 54.9004 17.3567 54.9004 15.0581C54.9004 13.0024 54.0791 10.1245 51.9512 10.1245Z\" fill=\"currentColor\"/>\r\n        </svg>\r\n      }\r\n      @if (brandLabel) {\r\n        <span class=\"compsych-hnav__brand-label\" [attr.aria-label]=\"brandLabelAria\" [style.color]=\"brandLabelColor\">{{ brandLabel }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Right: actions -->\r\n<div class=\"compsych-hnav__actions\">\r\n  @if (isLoggedOut) {\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showHelp) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Help\" (click)=\"action.emit('help')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"helpIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    @if (showSearch) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Search\" (click)=\"action.emit('search')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"searchIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showCalendarChecked) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Calendar\" (click)=\"action.emit('calendar-checked')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"calendarCheckedIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showNotifications) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        [attr.aria-label]=\"notificationAriaLabel\"\r\n        (click)=\"action.emit('notifications')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"bellIconSvg\" aria-hidden=\"true\"></span>\r\n        @if (notificationCount > 0) {\r\n          <span class=\"compsych-hnav__badge\" aria-hidden=\"true\">{{ badgeText }}</span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showDocuments) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        aria-label=\"Documents\"\r\n        (click)=\"action.emit('documents')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"fileTextIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (showAvatar) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__avatar compsych-hnav__overflow-core\"\r\n        [attr.aria-label]=\"avatarInitials ? 'Account: ' + avatarInitials : 'Account'\"\r\n        (click)=\"action.emit('avatar')\"\r\n      >\r\n        @if (avatarInitials) {\r\n          {{ avatarInitials }}\r\n        } @else {\r\n          <span class=\"compsych-hnav__icon\" [innerHTML]=\"userIconSvg\" aria-hidden=\"true\"></span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showLogout) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn\" aria-label=\"Logout\" (click)=\"action.emit('logout')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"logOutIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16);height:4rem;padding:0 var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-bottom:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-medium-sys-font-family);container-type:inline-size}.compsych-hnav__left{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-12);min-width:0;flex:1 1 auto}.compsych-hnav__brand{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);padding:0;border:0;background:transparent;color:var(--surface-surface-sys-on-surface);cursor:pointer;min-width:0}.compsych-hnav__brand:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.25rem;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__logo{display:block;height:1.5rem;width:auto;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__brand-label{border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);padding-left:var(--spacing-padding-sys-padding-6);margin-top:var(--spacing-padding-sys-padding-6);line-height:1.5;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compsych-hnav__symbol{display:inline-flex;align-items:center;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__symbol svg{display:block;height:1.5rem;width:auto}.compsych-hnav__breadcrumb{min-width:0;overflow:hidden}.compsych-hnav__breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__breadcrumb li{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__sep{color:var(--outline-sys-outline-fixed);font-size:var(--label-medium-sys-font-size)}.compsych-hnav__crumb{padding:0;border:0;background:transparent;font-family:inherit;font-size:var(--label-medium-sys-font-size);font-weight:500;color:var(--surface-surface-sys-on-surface-variant);white-space:nowrap;cursor:pointer}.compsych-hnav__crumb:hover{color:var(--surface-surface-sys-on-surface)}.compsych-hnav__crumb:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.125rem;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__crumb--current{color:var(--surface-surface-sys-on-surface);overflow:hidden;text-overflow:ellipsis;cursor:default}.compsych-hnav__actions{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);flex-shrink:0}.compsych-hnav__icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:transparent;color:var(--surface-surface-sys-on-surface-variant);cursor:pointer;flex-shrink:0;transition:background-color .12s ease-out,color .12s ease-out}.compsych-hnav__icon-btn:hover{background:var(--surface-surface-container-sys-surface-container-high);color:var(--surface-surface-sys-on-surface)}.compsych-hnav__icon-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.125rem}.compsych-hnav__icon{display:flex;align-items:center;justify-content:center}.compsych-hnav__badge{position:absolute;top:.125rem;right:.125rem;min-width:1rem;height:1rem;padding:0 .25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sys-radius-full);background:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);font-size:.625rem;line-height:1;font-weight:600;box-shadow:0 0 0 .125rem var(--surface-surface-container-sys-surface-container-lowest)}.compsych-hnav__avatar{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed);font-size:var(--label-small-sys-font-size);font-weight:600;letter-spacing:.02em;cursor:pointer;flex-shrink:0}.compsych-hnav__avatar:hover{filter:brightness(.97)}.compsych-hnav__avatar:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:.125rem}.compsych-hnav__action-btns{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}@container (max-width: 45rem){.compsych-hnav__action-btns{display:none}}@container (max-width: 40rem){.compsych-hnav__breadcrumb{display:none}}@container (max-width: 30rem){.compsych-hnav__overflow-aux{display:none}}@container (max-width: 25rem){.compsych-hnav__overflow-core{display:none}}@media(max-width:40rem){:host{height:3.5rem;padding:0 var(--spacing-padding-sys-padding-16);gap:var(--spacing-padding-sys-padding-8)}.compsych-hnav__logo{height:1.25rem}.compsych-hnav__symbol svg{height:1.25rem;width:auto}}\n"] }]
+            args: [{ selector: 'compsych-header-nav', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], host: { role: 'banner' }, template: "<!-- Left: menu toggle + brand / breadcrumb -->\r\n<div class=\"compsych-hnav__left\">\r\n  @if (showMenuToggle) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"compsych-hnav__icon-btn\"\r\n      [attr.aria-label]=\"sidebarOpen ? 'Close menu' : 'Open menu'\"\r\n      [attr.aria-expanded]=\"sidebarOpen\"\r\n      (click)=\"action.emit('menu-toggle')\"\r\n    >\r\n      <span class=\"compsych-hnav__icon\" [innerHTML]=\"menuIconSvg\" aria-hidden=\"true\"></span>\r\n    </button>\r\n  }\r\n\r\n  @if (isSubPage) {\r\n    <span class=\"compsych-hnav__symbol\" aria-hidden=\"true\">\r\n      <svg viewBox=\"0 0 25.73 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n    </span>\r\n    <nav class=\"compsych-hnav__breadcrumb\" aria-label=\"Breadcrumb\">\r\n      <ol role=\"list\">\r\n        @for (crumb of breadcrumbs; track crumb.id; let last = $last) {\r\n          <li>\r\n            <span class=\"compsych-hnav__sep\" aria-hidden=\"true\">/</span>\r\n            @if (last) {\r\n              <span class=\"compsych-hnav__crumb compsych-hnav__crumb--current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n            } @else {\r\n              <button type=\"button\" class=\"compsych-hnav__crumb\" (click)=\"action.emit(crumb.id)\">{{ crumb.label }}</button>\r\n            }\r\n          </li>\r\n        }\r\n      </ol>\r\n    </nav>\r\n  } @else {\r\n    <button type=\"button\" class=\"compsych-hnav__brand\" [attr.aria-label]=\"brandLabelAria\" (click)=\"action.emit('logo')\">\r\n      @if (clientLogoUrl) {\r\n        <img [src]=\"clientLogoUrl\" class=\"compsych-hnav__logo\" [attr.aria-label]=\"brandLabelAria\" alt=\"\">\r\n      } @else {\r\n        <svg class=\"compsych-hnav__logo\" role=\"img\" [attr.aria-label]=\"brandLabelAria\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.8653 14.1245C16.8469 14.1245 20.3525 16.2028 22.3536 19.3315H3.37704C5.31567 16.3005 8.6659 14.2552 12.4933 14.1304L12.8653 14.1245ZM12.8653 7.84521C18.6037 7.84521 23.2716 12.5137 23.2716 18.2515C23.2716 18.4109 23.267 18.5699 23.2599 18.728C21.0624 15.3064 17.223 13.0347 12.8643 13.0347C8.50575 13.0347 4.66828 15.3048 2.47079 18.7251C2.46367 18.5683 2.46005 18.4102 2.46005 18.2515C2.46005 12.5132 7.1278 7.84543 12.8653 7.84521ZM12.8653 1.56689C19.4758 1.56689 24.8543 6.94473 24.8546 13.5552C24.8546 14.8765 24.6389 16.1496 24.2423 17.3394C23.7763 11.4707 18.8512 6.83838 12.8653 6.83838C6.87959 6.83857 1.95592 11.4715 1.48935 17.3394C1.09275 16.1496 0.877045 14.8765 0.877045 13.5552C0.877289 6.94485 6.25504 1.56709 12.8653 1.56689Z\" fill=\"currentColor\"/>\r\n          <path d=\"M100.224 10.1401C99.6034 10.1778 99.2832 10.4202 98.9648 11.1655L95.2646 20.0396C94.401 22.0893 93.2696 23.0217 92.0479 23.1187C90.1758 23.2669 89.8026 22.2909 90.001 21.8384C90.1891 21.4101 90.7857 21.432 91.376 21.688C92.9483 22.3923 94.1901 21.1819 94.7578 19.9478L95.0771 19.1646L91.7148 11.1675C91.3769 10.4225 91.0572 10.1795 90.457 10.1431V9.88135H94.4385V10.1431C93.5556 10.1807 93.1605 10.5339 93.4238 11.1489L95.8848 17.2085L98.4014 11.1694C98.6648 10.5356 98.3066 10.1804 97.4805 10.144V9.87939H100.224V10.1401ZM42.1875 6.48486C44.4823 6.48486 46.2325 7.53169 46.7402 9.23096L46.7695 9.32764C46.9127 9.82287 46.5881 10.3309 46.0771 10.4155C45.6244 10.4908 45.1893 10.2032 45.0869 9.75928V9.75439C44.6901 8.07409 43.4871 6.99187 41.9629 6.9917C39.5355 6.9917 37.8613 9.25128 37.8613 12.5366C37.8615 15.8216 39.8557 18.1185 42.6963 18.1187C44.6906 18.1187 46.1534 17.0358 46.7363 15.355L47.042 15.4116C46.4028 17.9504 44.5009 19.519 41.9619 19.519L41.9609 19.5181L41.9619 19.5171L41.6426 19.5093C38.3673 19.3473 36.0548 16.7007 36.0547 13.3003C36.0547 9.34151 38.4247 6.48504 42.1875 6.48486ZM52.25 9.60107C54.8819 9.60107 56.543 11.5448 56.543 14.3667C56.543 17.4128 54.7326 19.5063 52.082 19.5063C49.4316 19.5063 47.7891 17.5624 47.7891 14.7593C47.7891 11.7132 49.6182 9.60114 52.25 9.60107ZM103.946 9.6167C105.862 9.61671 107.065 10.8474 107.252 11.8726C107.256 11.8884 107.455 12.641 106.806 12.8394C106.402 12.9623 105.897 12.7605 105.769 12.2085C105.556 11.2968 104.979 10.1392 103.702 10.1392C102.124 10.1392 101.054 11.7431 101.054 13.8667C101.054 16.4016 102.35 18.1538 104.436 18.1538C105.544 18.1537 106.615 17.576 107.29 16.3833L107.516 16.439C107.027 18.3032 105.675 19.4956 103.759 19.4956V19.4976C101.166 19.4974 99.457 17.3907 99.457 14.6685C99.4572 11.9463 101.166 9.6167 103.946 9.6167ZM86.9658 9.60693C88.5252 9.60693 90.0049 10.2854 90.3486 11.4526C90.4274 11.7209 90.4283 12.2344 90.0801 12.4097C89.7292 12.5859 89.3006 12.3929 89.1406 12.0493C88.6399 10.9763 88.1187 10.1296 86.749 10.1294C85.6223 10.1294 84.9748 10.7634 84.9746 11.6772C84.9746 12.8172 86.1343 13.2135 87.3945 13.6431C88.8752 14.1476 90.4945 14.6992 90.5352 16.562C90.5733 18.2954 88.971 19.4887 86.96 19.4888L86.959 19.4878V19.4858C85.3417 19.4872 83.9282 19.0132 83.3555 17.9028C83.1887 17.5793 83.2679 17.1326 83.5967 16.9761C83.9951 16.7863 84.3966 17.1152 84.6123 17.5005C85.1159 18.4011 86.1587 18.9632 87.0879 18.9634C88.2717 18.9634 89.2381 18.2926 89.2383 17.2681C89.2201 15.9311 87.9619 15.5017 86.6465 15.0532C85.2106 14.5636 83.7073 14.0505 83.6777 12.3091C83.6595 10.7051 84.9748 9.60708 86.9658 9.60693ZM110.52 11.6938C111.509 10.3857 112.498 9.60107 113.805 9.60107C115.447 9.60115 116.399 10.6471 116.399 12.4595V17.8608C116.399 18.6829 116.959 18.8511 117.631 18.9819V19.2437H113.618V18.9819C114.29 18.8511 114.85 18.6828 114.85 17.8608V12.5532C114.85 11.3947 114.197 10.6842 113.133 10.6841C112.218 10.6841 111.453 11.0956 110.52 12.1606V17.8608C110.52 18.6829 111.079 18.8511 111.751 18.9819V19.2437H107.72V18.9819C108.41 18.8511 108.97 18.6829 108.97 17.8608V8.04932C108.97 7.41406 108.671 7.11501 107.999 7.07764H107.552V6.81592L110.258 6.05029H110.52V11.6938ZM78.2471 6.76709L78.249 6.76807C81.1606 6.76807 83.1533 7.86945 83.1533 10.2554C83.1531 12.641 81.1615 13.7222 78.249 13.7222H77.0264V13.4331C80.258 13.4331 81.3154 11.9881 81.3105 10.2554C81.3055 8.52254 80.1832 7.29064 78.043 7.29053H76.3525L76.3506 17.562C76.3506 18.6802 76.8959 18.8865 78.0215 18.9604V19.2212H68.7891V18.9604C69.4654 18.8304 70.0283 18.6616 70.0283 17.8413V12.5474C70.0282 11.391 69.3706 10.6831 68.2998 10.6831C67.3412 10.6831 66.5705 11.1121 65.6133 12.231V17.8423C65.6133 18.6635 66.177 18.8314 66.8535 18.9614V19.2231H62.8145V18.9614C63.491 18.8314 64.0547 18.6627 64.0547 17.8423V12.5483C64.0545 11.3921 63.3963 10.6841 62.3271 10.6841C61.4441 10.6841 60.711 11.0579 59.8291 12.0083V17.8442C59.8293 18.6649 60.3921 18.8324 61.0684 18.9624V19.2241H57.0098V18.9624C57.7046 18.8316 58.2684 18.6643 58.2686 17.8442V11.5991C58.2686 10.9653 57.9682 10.6659 57.292 10.6099H56.8418V10.3481L59.5654 9.5835H59.8291V11.522C60.7869 10.31 61.7449 9.60208 63.0029 9.60205C64.4503 9.60205 65.3706 10.4033 65.5762 11.8198C66.6086 10.4401 67.6239 9.60208 68.9766 9.60205C70.629 9.60205 71.5879 10.6464 71.5879 12.4546V17.8423L71.5859 17.8403C71.5859 18.3871 71.8364 18.6442 72.2041 18.7935C72.5694 18.9413 73.0559 18.9637 73.4463 18.9058C74.2358 18.788 74.6386 18.4873 74.6387 17.561V8.40674C74.6386 7.32569 74.094 7.10187 72.9482 7.02686V6.76514H78.2461L78.2471 6.76709ZM51.9512 10.1245C50.4208 10.1247 49.4503 11.7317 49.4502 14.0112C49.4502 16.1043 50.2529 18.9829 52.3994 18.9829C53.9487 18.9829 54.9004 17.3567 54.9004 15.0581C54.9004 13.0024 54.0791 10.1245 51.9512 10.1245Z\" fill=\"currentColor\"/>\r\n        </svg>\r\n      }\r\n      @if (brandLabel) {\r\n        <span class=\"compsych-hnav__brand-label\" [attr.aria-label]=\"brandLabelAria\" [style.color]=\"brandLabelColor\">{{ brandLabel }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<!-- Right: actions -->\r\n<div class=\"compsych-hnav__actions\">\r\n  @if (isLoggedOut) {\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showHelp) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Help\" (click)=\"action.emit('help')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"helpIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    @if (showSearch) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Search\" (click)=\"action.emit('search')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"searchIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showCalendarChecked) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Calendar\" (click)=\"action.emit('calendar-checked')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"calendarCheckedIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showNotifications) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        [attr.aria-label]=\"notificationAriaLabel\"\r\n        (click)=\"action.emit('notifications')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"bellIconSvg\" aria-hidden=\"true\"></span>\r\n        @if (notificationCount > 0) {\r\n          <span class=\"compsych-hnav__badge\" aria-hidden=\"true\">{{ badgeText }}</span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showDocuments) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__icon-btn compsych-hnav__overflow-aux\"\r\n        aria-label=\"Documents\"\r\n        (click)=\"action.emit('documents')\"\r\n      >\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"fileTextIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (showLanguage) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn compsych-hnav__overflow-core\" aria-label=\"Language\" (click)=\"action.emit('language')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"globeIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n    @if (actionButtons.length) {\r\n      <div class=\"compsych-hnav__action-btns\">\r\n        @for (btn of actionButtons; track btn.id) {\r\n          <compsych-button\r\n            [variant]=\"btn.variant ?? 'filled'\"\r\n            size=\"medium\"\r\n            [label]=\"btn.label\"\r\n            [leadingIcon]=\"btn.leadingIcon\"\r\n            [trailingIcon]=\"btn.trailingIcon\"\r\n            [disabled]=\"!!btn.disabled\"\r\n            [loading]=\"!!btn.loading\"\r\n            (click)=\"action.emit(btn.id)\"\r\n          ></compsych-button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (showAvatar) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"compsych-hnav__avatar compsych-hnav__overflow-core\"\r\n        [attr.aria-label]=\"avatarInitials ? 'Account: ' + avatarInitials : 'Account'\"\r\n        (click)=\"action.emit('avatar')\"\r\n      >\r\n        @if (avatarInitials) {\r\n          {{ avatarInitials }}\r\n        } @else {\r\n          <span class=\"compsych-hnav__icon\" [innerHTML]=\"userIconSvg\" aria-hidden=\"true\"></span>\r\n        }\r\n      </button>\r\n    }\r\n    @if (showLogout) {\r\n      <button type=\"button\" class=\"compsych-hnav__icon-btn\" aria-label=\"Logout\" (click)=\"action.emit('logout')\">\r\n        <span class=\"compsych-hnav__icon\" [innerHTML]=\"logOutIconSvg\" aria-hidden=\"true\"></span>\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16);height:64px;padding:0 var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-bottom:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-medium-sys-font-family);container-type:inline-size}.compsych-hnav__left{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-12);min-width:0;flex:1 1 auto}.compsych-hnav__brand{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);padding:0;border:0;background:transparent;color:var(--surface-surface-sys-on-surface);cursor:pointer;min-width:0}.compsych-hnav__brand:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:4px;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__logo{display:block;height:24px;width:auto;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__brand-label{border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);padding-left:var(--spacing-padding-sys-padding-6);margin-top:var(--spacing-padding-sys-padding-6);line-height:1.5;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compsych-hnav__symbol{display:inline-flex;align-items:center;color:var(--accent-primary-sys-primary-container);flex-shrink:0}.compsych-hnav__symbol svg{display:block;height:24px;width:auto}.compsych-hnav__breadcrumb{min-width:0;overflow:hidden}.compsych-hnav__breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__breadcrumb li{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-width:0}.compsych-hnav__sep{color:var(--outline-sys-outline-fixed);font-size:var(--label-medium-sys-font-size)}.compsych-hnav__crumb{padding:0;border:0;background:transparent;font-family:inherit;font-size:var(--label-medium-sys-font-size);font-weight:500;color:var(--surface-surface-sys-on-surface-variant);white-space:nowrap;cursor:pointer}.compsych-hnav__crumb:hover{color:var(--surface-surface-sys-on-surface)}.compsych-hnav__crumb:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:2px;border-radius:var(--border-radius-sys-radius-xs)}.compsych-hnav__crumb--current{color:var(--surface-surface-sys-on-surface);overflow:hidden;text-overflow:ellipsis;cursor:default}.compsych-hnav__actions{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);flex-shrink:0}.compsych-hnav__icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:transparent;color:var(--surface-surface-sys-on-surface-variant);cursor:pointer;flex-shrink:0;transition:background-color .12s ease-out,color .12s ease-out}.compsych-hnav__icon-btn:hover{background:var(--surface-surface-container-sys-surface-container-high);color:var(--surface-surface-sys-on-surface)}.compsych-hnav__icon-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:2px}.compsych-hnav__icon{display:flex;align-items:center;justify-content:center}.compsych-hnav__badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sys-radius-full);background:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);font-size:10px;line-height:1;font-weight:600;box-shadow:0 0 0 2px var(--surface-surface-container-sys-surface-container-lowest)}.compsych-hnav__avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;box-sizing:border-box;padding:0;border:0;border-radius:var(--border-radius-sys-radius-full);background:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed);font-size:var(--label-small-sys-font-size);font-weight:600;letter-spacing:.02em;cursor:pointer;flex-shrink:0}.compsych-hnav__avatar:hover{filter:brightness(.97)}.compsych-hnav__avatar:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:2px}.compsych-hnav__action-btns{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}@container (max-width: 720px){.compsych-hnav__action-btns{display:none}}@container (max-width: 640px){.compsych-hnav__breadcrumb{display:none}}@container (max-width: 480px){.compsych-hnav__overflow-aux{display:none}}@container (max-width: 400px){.compsych-hnav__overflow-core{display:none}}@media(max-width:640px){:host{height:56px;padding:0 var(--spacing-padding-sys-padding-16);gap:var(--spacing-padding-sys-padding-8)}.compsych-hnav__logo{height:20px}.compsych-hnav__symbol svg{height:20px;width:auto}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { level: [{
                 type: Input
             }], sidebarOpen: [{