@compsych-ui-components/angular 6.0.7 → 6.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -32,6 +32,8 @@ export class HeaderNavComponent {
|
|
|
32
32
|
brandLabelAria = 'ComPsych';
|
|
33
33
|
/** Brand wordmark text rendered next to the logo on `main` and `not-logged` levels. */
|
|
34
34
|
brandLabel = '';
|
|
35
|
+
/** Optional hex color (e.g. `'#ff0000'`) applied to the brand label text. Overrides the default inherited color. */
|
|
36
|
+
brandLabelColor;
|
|
35
37
|
/**
|
|
36
38
|
* URL of a client logo image. When provided, replaces the ComPsych SVG logo
|
|
37
39
|
* with an `<img>` at the same position. The image receives `brandLabelAria`
|
|
@@ -131,11 +133,11 @@ export class HeaderNavComponent {
|
|
|
131
133
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
132
134
|
}
|
|
133
135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderNavComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
134
|
-
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", clientLogoUrl: "clientLogoUrl", breadcrumbs: "breadcrumbs", notificationCount: "notificationCount", avatarInitials: "avatarInitials", showSearch: "showSearch", 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\">{{ 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 [variant]=\"btn.variant ?? 'filled'\" size=\"medium\" [label]=\"btn.label\" (click)=\"action.emit(btn.id)\"></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 (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 (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-4);line-height:1;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", "icon", "iconOnly", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
136
|
+
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", 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 [variant]=\"btn.variant ?? 'filled'\" size=\"medium\" [label]=\"btn.label\" (click)=\"action.emit(btn.id)\"></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 (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 (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-4);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", "icon", "iconOnly", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
135
137
|
}
|
|
136
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderNavComponent, decorators: [{
|
|
137
139
|
type: Component,
|
|
138
|
-
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\">{{ 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 [variant]=\"btn.variant ?? 'filled'\" size=\"medium\" [label]=\"btn.label\" (click)=\"action.emit(btn.id)\"></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 (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 (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-4);line-height:1;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"] }]
|
|
140
|
+
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 [variant]=\"btn.variant ?? 'filled'\" size=\"medium\" [label]=\"btn.label\" (click)=\"action.emit(btn.id)\"></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 (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 (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-4);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"] }]
|
|
139
141
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { level: [{
|
|
140
142
|
type: Input
|
|
141
143
|
}], sidebarOpen: [{
|
|
@@ -146,6 +148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
146
148
|
type: Input
|
|
147
149
|
}], brandLabel: [{
|
|
148
150
|
type: Input
|
|
151
|
+
}], brandLabelColor: [{
|
|
152
|
+
type: Input
|
|
149
153
|
}], clientLogoUrl: [{
|
|
150
154
|
type: Input
|
|
151
155
|
}], breadcrumbs: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-nav.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/header-nav/header-nav.ts","../../../../../../packages/angular/src/lib/header-nav/header-nav.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\r\nimport { ButtonComponent, ButtonVariant } from '../button/button';\r\n\r\nexport type HeaderNavLevel = 'main' | 'sub-page' | 'not-logged';\r\n\r\n/**\r\n * A navigation item used for both breadcrumbs and action buttons.\r\n * - Breadcrumb: provide `id` and `label`.\r\n * - Action button: provide `id`, `label`, and optionally `variant`.\r\n */\r\nexport interface NavAction {\r\n /** Stable identifier emitted by the `action` output when this item is clicked. */\r\n id: string;\r\n /** Text displayed in the breadcrumb trail or on the action button. */\r\n label: string;\r\n /** Button style for action buttons. Defaults to `'filled'` when omitted. Not used for breadcrumbs. */\r\n variant?: ButtonVariant;\r\n}\r\n\r\n\r\n/**\r\n * Header Navigation — top app bar from the ComPsych Design System.\r\n *\r\n * Three layout levels controlled by `level`:\r\n * - `'main'` — menu toggle, brand logo + wordmark, logged-in action cluster.\r\n * - `'sub-page'` — menu toggle, logo mark + breadcrumb trail, logged-in action cluster.\r\n * - `'not-logged'` — menu toggle, brand, public action cluster (language, help, CTA buttons).\r\n *\r\n * All interactive elements emit a string id via the `action` output.\r\n * For breadcrumbs and action buttons the emitted value is the `NavAction.id`.\r\n * For built-in icon buttons a fixed string is emitted (see `action` docs).\r\n */\r\n@Component({\r\n selector: 'compsych-header-nav',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [ButtonComponent],\r\n templateUrl: './header-nav.html',\r\n styleUrl: './header-nav.css',\r\n host: { role: 'banner' },\r\n})\r\nexport class HeaderNavComponent {\r\n /**\r\n * Layout and feature set of the header.\r\n * - `'main'` — logo + brand label, logged-in action cluster (search, notifications, documents, language, avatar, logout).\r\n * - `'sub-page'` — symbol mark + breadcrumb trail, same logged-in action cluster.\r\n * - `'not-logged'` — logo + brand label, public action cluster (language, help, action buttons).\r\n */\r\n @Input() level: HeaderNavLevel = 'main';\r\n /** Whether the paired sidebar is open — toggles the menu icon (☰ ↔ ✕). */\r\n @Input() sidebarOpen = false;\r\n /** Show the hamburger / close menu toggle button. */\r\n @Input() showMenuToggle = true;\r\n /** Accessible label for the brand area (logo + wordmark) used by screen readers. */\r\n @Input() brandLabelAria = 'ComPsych';\r\n /** Brand wordmark text rendered next to the logo on `main` and `not-logged` levels. */\r\n @Input() brandLabel = '';\r\n /**\r\n * URL of a client logo image. When provided, replaces the ComPsych SVG logo\r\n * with an `<img>` at the same position. The image receives `brandLabelAria`\r\n * as its accessible label.\r\n */\r\n @Input() clientLogoUrl?: string;\r\n /**\r\n * Ordered breadcrumb trail rendered at `'sub-page'` level.\r\n * Each item requires `id` and `label`. The last item is the current page\r\n * (non-interactive). All preceding items are buttons that emit their `id`\r\n * via the `action` output when clicked.\r\n */\r\n @Input() breadcrumbs: NavAction[] = [];\r\n /** Notification badge count. Badge is hidden when 0. */\r\n @Input() notificationCount = 0;\r\n /** Avatar initials for the logged-in user. */\r\n @Input() avatarInitials = 'CP';\r\n /** Show the search icon button (logged-in levels). */\r\n @Input() showSearch = true;\r\n /** Show the notifications icon button (logged-in levels). */\r\n @Input() showNotifications = true;\r\n /** Show the documents icon button (logged-in levels). */\r\n @Input() showDocuments = true;\r\n /** Show the avatar button (logged-in levels). */\r\n @Input() showAvatar = true;\r\n /** Show the language icon button (main, sub-page, and not-logged levels). */\r\n @Input() showLanguage = true;\r\n /** Show the help icon button (not-logged level). */\r\n @Input() showHelp = true;\r\n /** Show the logout icon button (main and sub-page levels). */\r\n @Input() showLogout = false;\r\n /**\r\n * Additional configurable buttons rendered in the actions area.\r\n * Each entry requires `id` and `label`; `variant` defaults to `'filled'`.\r\n * Clicking any button emits its `id` via the `action` output.\r\n */\r\n @Input() actionButtons: NavAction[] = [];\r\n\r\n /**\r\n * Emitted as a string whenever any interactive element is activated.\r\n * Fixed values for built-in controls:\r\n * - `'menu-toggle'` — hamburger / close button\r\n * - `'logo'` — brand / logo button\r\n * - `'search'` — search icon button\r\n * - `'notifications'` — notifications icon button\r\n * - `'documents'` — documents icon button\r\n * - `'language'` — language icon button\r\n * - `'help'` — help icon button\r\n * - `'avatar'` — avatar button\r\n * - `'logout'` — logout icon button\r\n *\r\n * For `breadcrumbs` and `actionButtons` items, the item's `NavAction.id` is emitted.\r\n */\r\n @Output() readonly action = new EventEmitter<string>();\r\n\r\n readonly searchIconSvg: SafeHtml;\r\n readonly bellIconSvg: SafeHtml;\r\n readonly fileTextIconSvg: SafeHtml;\r\n readonly globeIconSvg: SafeHtml;\r\n readonly helpIconSvg: SafeHtml;\r\n readonly logOutIconSvg: SafeHtml;\r\n readonly userIconSvg: SafeHtml;\r\n\r\n constructor(private readonly sanitizer: DomSanitizer) {\r\n this.searchIconSvg = this.trustedIcon('search');\r\n this.bellIconSvg = this.trustedIcon('bell');\r\n this.fileTextIconSvg = this.trustedIcon('file-text');\r\n this.globeIconSvg = this.trustedIcon('globe');\r\n this.helpIconSvg = this.trustedIcon('circle-question-mark');\r\n this.logOutIconSvg = this.trustedIcon('log-out');\r\n this.userIconSvg = this.trustedIcon('user');\r\n }\r\n\r\n get isLoggedOut(): boolean {\r\n return this.level === 'not-logged';\r\n }\r\n\r\n get isSubPage(): boolean {\r\n return this.level === 'sub-page';\r\n }\r\n\r\n get menuIconSvg(): SafeHtml {\r\n return this.trustedIcon(this.sidebarOpen ? 'x' : 'menu');\r\n }\r\n\r\n get badgeText(): string {\r\n return this.notificationCount > 99 ? '99+' : `${this.notificationCount}`;\r\n }\r\n\r\n get notificationAriaLabel(): string {\r\n return this.notificationCount > 0\r\n ? `Notifications, ${this.notificationCount} unread`\r\n : 'Notifications';\r\n }\r\n\r\n /**\r\n * Looks up a Lucide icon by name and injects explicit width/height attributes\r\n * (20 × 20) so the SVG renders at the correct size when injected via [innerHTML].\r\n * Angular's CSS encapsulation does not add _ngcontent attributes to dynamically\r\n * injected content, so CSS descendant selectors targeting `svg` would not apply —\r\n * explicit SVG attributes are the reliable solution.\r\n */\r\n private trustedIcon(name: string): SafeHtml {\r\n const svg = (LUCIDE_ICONS[name] ?? '').replace('<svg ', '<svg width=\"20\" height=\"20\" ');\r\n return this.sanitizer.bypassSecurityTrustHtml(svg);\r\n }\r\n}\r\n","<!-- 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\">{{ 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 [variant]=\"btn.variant ?? 'filled'\" size=\"medium\" [label]=\"btn.label\" (click)=\"action.emit(btn.id)\"></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 (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 (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"]}
|
|
1
|
+
{"version":3,"file":"header-nav.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/header-nav/header-nav.ts","../../../../../../packages/angular/src/lib/header-nav/header-nav.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\r\nimport { ButtonComponent, ButtonVariant } from '../button/button';\r\n\r\nexport type HeaderNavLevel = 'main' | 'sub-page' | 'not-logged';\r\n\r\n/**\r\n * A navigation item used for both breadcrumbs and action buttons.\r\n * - Breadcrumb: provide `id` and `label`.\r\n * - Action button: provide `id`, `label`, and optionally `variant`.\r\n */\r\nexport interface NavAction {\r\n /** Stable identifier emitted by the `action` output when this item is clicked. */\r\n id: string;\r\n /** Text displayed in the breadcrumb trail or on the action button. */\r\n label: string;\r\n /** Button style for action buttons. Defaults to `'filled'` when omitted. Not used for breadcrumbs. */\r\n variant?: ButtonVariant;\r\n}\r\n\r\n\r\n/**\r\n * Header Navigation — top app bar from the ComPsych Design System.\r\n *\r\n * Three layout levels controlled by `level`:\r\n * - `'main'` — menu toggle, brand logo + wordmark, logged-in action cluster.\r\n * - `'sub-page'` — menu toggle, logo mark + breadcrumb trail, logged-in action cluster.\r\n * - `'not-logged'` — menu toggle, brand, public action cluster (language, help, CTA buttons).\r\n *\r\n * All interactive elements emit a string id via the `action` output.\r\n * For breadcrumbs and action buttons the emitted value is the `NavAction.id`.\r\n * For built-in icon buttons a fixed string is emitted (see `action` docs).\r\n */\r\n@Component({\r\n selector: 'compsych-header-nav',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [ButtonComponent],\r\n templateUrl: './header-nav.html',\r\n styleUrl: './header-nav.css',\r\n host: { role: 'banner' },\r\n})\r\nexport class HeaderNavComponent {\r\n /**\r\n * Layout and feature set of the header.\r\n * - `'main'` — logo + brand label, logged-in action cluster (search, notifications, documents, language, avatar, logout).\r\n * - `'sub-page'` — symbol mark + breadcrumb trail, same logged-in action cluster.\r\n * - `'not-logged'` — logo + brand label, public action cluster (language, help, action buttons).\r\n */\r\n @Input() level: HeaderNavLevel = 'main';\r\n /** Whether the paired sidebar is open — toggles the menu icon (☰ ↔ ✕). */\r\n @Input() sidebarOpen = false;\r\n /** Show the hamburger / close menu toggle button. */\r\n @Input() showMenuToggle = true;\r\n /** Accessible label for the brand area (logo + wordmark) used by screen readers. */\r\n @Input() brandLabelAria = 'ComPsych';\r\n /** Brand wordmark text rendered next to the logo on `main` and `not-logged` levels. */\r\n @Input() brandLabel = '';\r\n /** Optional hex color (e.g. `'#ff0000'`) applied to the brand label text. Overrides the default inherited color. */\r\n @Input() brandLabelColor?: string;\r\n /**\r\n * URL of a client logo image. When provided, replaces the ComPsych SVG logo\r\n * with an `<img>` at the same position. The image receives `brandLabelAria`\r\n * as its accessible label.\r\n */\r\n @Input() clientLogoUrl?: string;\r\n /**\r\n * Ordered breadcrumb trail rendered at `'sub-page'` level.\r\n * Each item requires `id` and `label`. The last item is the current page\r\n * (non-interactive). All preceding items are buttons that emit their `id`\r\n * via the `action` output when clicked.\r\n */\r\n @Input() breadcrumbs: NavAction[] = [];\r\n /** Notification badge count. Badge is hidden when 0. */\r\n @Input() notificationCount = 0;\r\n /** Avatar initials for the logged-in user. */\r\n @Input() avatarInitials = 'CP';\r\n /** Show the search icon button (logged-in levels). */\r\n @Input() showSearch = true;\r\n /** Show the notifications icon button (logged-in levels). */\r\n @Input() showNotifications = true;\r\n /** Show the documents icon button (logged-in levels). */\r\n @Input() showDocuments = true;\r\n /** Show the avatar button (logged-in levels). */\r\n @Input() showAvatar = true;\r\n /** Show the language icon button (main, sub-page, and not-logged levels). */\r\n @Input() showLanguage = true;\r\n /** Show the help icon button (not-logged level). */\r\n @Input() showHelp = true;\r\n /** Show the logout icon button (main and sub-page levels). */\r\n @Input() showLogout = false;\r\n /**\r\n * Additional configurable buttons rendered in the actions area.\r\n * Each entry requires `id` and `label`; `variant` defaults to `'filled'`.\r\n * Clicking any button emits its `id` via the `action` output.\r\n */\r\n @Input() actionButtons: NavAction[] = [];\r\n\r\n /**\r\n * Emitted as a string whenever any interactive element is activated.\r\n * Fixed values for built-in controls:\r\n * - `'menu-toggle'` — hamburger / close button\r\n * - `'logo'` — brand / logo button\r\n * - `'search'` — search icon button\r\n * - `'notifications'` — notifications icon button\r\n * - `'documents'` — documents icon button\r\n * - `'language'` — language icon button\r\n * - `'help'` — help icon button\r\n * - `'avatar'` — avatar button\r\n * - `'logout'` — logout icon button\r\n *\r\n * For `breadcrumbs` and `actionButtons` items, the item's `NavAction.id` is emitted.\r\n */\r\n @Output() readonly action = new EventEmitter<string>();\r\n\r\n readonly searchIconSvg: SafeHtml;\r\n readonly bellIconSvg: SafeHtml;\r\n readonly fileTextIconSvg: SafeHtml;\r\n readonly globeIconSvg: SafeHtml;\r\n readonly helpIconSvg: SafeHtml;\r\n readonly logOutIconSvg: SafeHtml;\r\n readonly userIconSvg: SafeHtml;\r\n\r\n constructor(private readonly sanitizer: DomSanitizer) {\r\n this.searchIconSvg = this.trustedIcon('search');\r\n this.bellIconSvg = this.trustedIcon('bell');\r\n this.fileTextIconSvg = this.trustedIcon('file-text');\r\n this.globeIconSvg = this.trustedIcon('globe');\r\n this.helpIconSvg = this.trustedIcon('circle-question-mark');\r\n this.logOutIconSvg = this.trustedIcon('log-out');\r\n this.userIconSvg = this.trustedIcon('user');\r\n }\r\n\r\n get isLoggedOut(): boolean {\r\n return this.level === 'not-logged';\r\n }\r\n\r\n get isSubPage(): boolean {\r\n return this.level === 'sub-page';\r\n }\r\n\r\n get menuIconSvg(): SafeHtml {\r\n return this.trustedIcon(this.sidebarOpen ? 'x' : 'menu');\r\n }\r\n\r\n get badgeText(): string {\r\n return this.notificationCount > 99 ? '99+' : `${this.notificationCount}`;\r\n }\r\n\r\n get notificationAriaLabel(): string {\r\n return this.notificationCount > 0\r\n ? `Notifications, ${this.notificationCount} unread`\r\n : 'Notifications';\r\n }\r\n\r\n /**\r\n * Looks up a Lucide icon by name and injects explicit width/height attributes\r\n * (20 × 20) so the SVG renders at the correct size when injected via [innerHTML].\r\n * Angular's CSS encapsulation does not add _ngcontent attributes to dynamically\r\n * injected content, so CSS descendant selectors targeting `svg` would not apply —\r\n * explicit SVG attributes are the reliable solution.\r\n */\r\n private trustedIcon(name: string): SafeHtml {\r\n const svg = (LUCIDE_ICONS[name] ?? '').replace('<svg ', '<svg width=\"20\" height=\"20\" ');\r\n return this.sanitizer.bypassSecurityTrustHtml(svg);\r\n }\r\n}\r\n","<!-- 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 [variant]=\"btn.variant ?? 'filled'\" size=\"medium\" [label]=\"btn.label\" (click)=\"action.emit(btn.id)\"></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 (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 (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"]}
|
|
@@ -45,6 +45,8 @@ export declare class HeaderNavComponent {
|
|
|
45
45
|
brandLabelAria: string;
|
|
46
46
|
/** Brand wordmark text rendered next to the logo on `main` and `not-logged` levels. */
|
|
47
47
|
brandLabel: string;
|
|
48
|
+
/** Optional hex color (e.g. `'#ff0000'`) applied to the brand label text. Overrides the default inherited color. */
|
|
49
|
+
brandLabelColor?: string;
|
|
48
50
|
/**
|
|
49
51
|
* URL of a client logo image. When provided, replaces the ComPsych SVG logo
|
|
50
52
|
* with an `<img>` at the same position. The image receives `brandLabelAria`
|
|
@@ -120,5 +122,5 @@ export declare class HeaderNavComponent {
|
|
|
120
122
|
*/
|
|
121
123
|
private trustedIcon;
|
|
122
124
|
static ɵfac: i0.ɵɵFactoryDeclaration<HeaderNavComponent, never>;
|
|
123
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HeaderNavComponent, "compsych-header-nav", never, { "level": { "alias": "level"; "required": false; }; "sidebarOpen": { "alias": "sidebarOpen"; "required": false; }; "showMenuToggle": { "alias": "showMenuToggle"; "required": false; }; "brandLabelAria": { "alias": "brandLabelAria"; "required": false; }; "brandLabel": { "alias": "brandLabel"; "required": false; }; "clientLogoUrl": { "alias": "clientLogoUrl"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "notificationCount": { "alias": "notificationCount"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "showNotifications": { "alias": "showNotifications"; "required": false; }; "showDocuments": { "alias": "showDocuments"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "showLanguage": { "alias": "showLanguage"; "required": false; }; "showHelp": { "alias": "showHelp"; "required": false; }; "showLogout": { "alias": "showLogout"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
|
|
125
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HeaderNavComponent, "compsych-header-nav", never, { "level": { "alias": "level"; "required": false; }; "sidebarOpen": { "alias": "sidebarOpen"; "required": false; }; "showMenuToggle": { "alias": "showMenuToggle"; "required": false; }; "brandLabelAria": { "alias": "brandLabelAria"; "required": false; }; "brandLabel": { "alias": "brandLabel"; "required": false; }; "brandLabelColor": { "alias": "brandLabelColor"; "required": false; }; "clientLogoUrl": { "alias": "clientLogoUrl"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "notificationCount": { "alias": "notificationCount"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "showNotifications": { "alias": "showNotifications"; "required": false; }; "showDocuments": { "alias": "showDocuments"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "showLanguage": { "alias": "showLanguage"; "required": false; }; "showHelp": { "alias": "showHelp"; "required": false; }; "showLogout": { "alias": "showLogout"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
|
|
124
126
|
}
|