@frame-kit/ui-ng-patterns 0.2.20 → 0.2.21
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.
|
@@ -425,6 +425,11 @@ class SidebarNavComponent {
|
|
|
425
425
|
* without a shell present.
|
|
426
426
|
*/
|
|
427
427
|
collapsed = input(null, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
428
|
+
/**
|
|
429
|
+
* Read after the label of an `href` row by assistive technology, so the
|
|
430
|
+
* reader knows the row leaves the app. Supply the app's translated text.
|
|
431
|
+
*/
|
|
432
|
+
externalLinkLabel = input('opens in a new tab', ...(ngDevMode ? [{ debugName: "externalLinkLabel" }] : /* istanbul ignore next */ []));
|
|
428
433
|
// ===== BASE PROPS =====
|
|
429
434
|
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
430
435
|
// ===== DEPENDENCIES =====
|
|
@@ -517,7 +522,8 @@ class SidebarNavComponent {
|
|
|
517
522
|
}
|
|
518
523
|
linkActive(link) {
|
|
519
524
|
const routerLink = link.routerLink;
|
|
520
|
-
|
|
525
|
+
// An outside link is never where the reader is.
|
|
526
|
+
if (!routerLink || link.href) {
|
|
521
527
|
return false;
|
|
522
528
|
}
|
|
523
529
|
// Touch currentUrl so the check re-evaluates on every navigation (OnPush).
|
|
@@ -698,12 +704,12 @@ class SidebarNavComponent {
|
|
|
698
704
|
panel.style.setProperty('--fk-sidebar-nav-flyout-caret-top', `${top}px`);
|
|
699
705
|
}
|
|
700
706
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
701
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SidebarNavComponent, isStandalone: true, selector: "fk-sidebar-nav", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "itemTpl", first: true, predicate: SidebarNavItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "flyoutTpl", first: true, predicate: ["flyoutTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (group of model(); track $index) {\n <div class=\"fk-sidebar-nav__group\">\n @if (group.label) {\n <div class=\"fk-sidebar-nav__group-label\">{{ group.label }}</div>\n }\n <div class=\"fk-sidebar-nav__divider\" aria-hidden=\"true\"></div>\n\n <ul class=\"fk-sidebar-nav__list\">\n @for (item of group.items; track item.id) {\n <li class=\"fk-sidebar-nav__item\">\n @if (isParent(item)) {\n <!-- PARENT \u2014 disclosure row -->\n <button\n #row\n type=\"button\"\n class=\"fk-sidebar-nav__row fk-sidebar-nav__row--parent\"\n [class.fk-sidebar-nav__row--branch]=\"sectionActive(item)\"\n [attr.aria-expanded]=\"\n isCollapsed() ? flyoutItem()?.id === item.id : isOpen(item)\n \"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onParentClick(item, row)\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n <span\n class=\"fk-sidebar-nav__chevron\"\n [class.fk-sidebar-nav__chevron--open]=\"isOpen(item)\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.75 4.5L11.25 9L6.75 13.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n </button>\n\n @if (!isCollapsed() && isOpen(item)) {\n <ul class=\"fk-sidebar-nav__children\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <li class=\"fk-sidebar-nav__subgroup\">\n <span class=\"fk-sidebar-nav__subgroup-title\">{{\n child.label\n }}</span>\n </li>\n } @else {\n <li>\n <a\n class=\"fk-sidebar-nav__child\"\n [class.fk-sidebar-nav__child--active]=\"\n linkActive(child)\n \"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{\n child.label\n }}</span>\n </a>\n </li>\n }\n }\n </ul>\n }\n } @else {\n <!-- LEAF \u2014 direct link -->\n <a\n class=\"fk-sidebar-nav__row\"\n [class.fk-sidebar-nav__row--active]=\"linkActive(item)\"\n [attr.aria-current]=\"linkActive(item) ? 'page' : null\"\n [routerLink]=\"item.routerLink\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </div>\n}\n\n<!-- Flyout panel for a collapsed parent (anchored beside the rail via CDK Overlay) -->\n<ng-template #flyoutTpl let-item>\n <!--\n A labelled group of navigation links \u2014 not an ARIA `menu`. Menu semantics\n promise roving arrow-key focus we don't implement (these are Tab-navigated\n links), so `role=\"group\"` + `aria-label` is the honest, valid structure.\n -->\n <div\n class=\"fk-sidebar-nav__flyout-panel\"\n role=\"group\"\n [attr.aria-label]=\"item.label\"\n >\n <!-- Decorative: the group is already named by aria-label, so the visual\n title/icon would only repeat it to assistive tech. -->\n <div class=\"fk-sidebar-nav__flyout-head\" aria-hidden=\"true\">\n @if (item.icon) {\n <span class=\"fk-sidebar-nav__flyout-icon\">\n <fk-icon [name]=\"item.icon\" size=\"sm\" />\n </span>\n }\n <span class=\"fk-sidebar-nav__flyout-title\">{{ item.label }}</span>\n </div>\n\n <!--\n The items scroll inside their own bounded container, not the panel: the\n panel hosts the caret (::before) which sits outside its left edge, so\n putting overflow on the panel itself would clip it.\n -->\n <div class=\"fk-sidebar-nav__flyout-items\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <span class=\"fk-sidebar-nav__flyout-subgroup\">{{ child.label }}</span>\n } @else {\n <a\n class=\"fk-sidebar-nav__flyout-item\"\n [class.fk-sidebar-nav__flyout-item--active]=\"linkActive(child)\"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ child.label }}</span>\n </a>\n }\n }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block}.fk-sidebar-nav__group{display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-group-inner-gap, var(--fk-rhythm-2, .5rem))}.fk-sidebar-nav__group+.fk-sidebar-nav__group{margin-top:var(--fk-sidebar-nav-group-gap, var(--fk-rhythm-5, 1.25rem))}.fk-sidebar-nav__group-label{padding-inline:var(--fk-sidebar-nav-label-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-label-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-label-font-size, .625rem);font-weight:var(--fk-sidebar-nav-label-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-label-color, var(--fk-color-muted, #64748b))}.fk-sidebar-nav__divider{display:none}.fk-sidebar-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-row-stack, var(--fk-rhythm-1, .25rem))}.fk-sidebar-nav__row{box-sizing:border-box;display:flex;align-items:center;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .625rem));background:var(--fk-sidebar-nav-row-bg, transparent);font-family:var(--fk-sidebar-nav-row-font-family, var(--fk-font-family-base));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__row:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__row:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__row--active,.fk-sidebar-nav__row--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch,.fk-sidebar-nav__row--branch:hover{background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__icon{flex:none;display:inline-flex;color:var(--fk-sidebar-nav-icon-color, var(--fk-color-muted, #8a93a8));transition:color .13s ease}.fk-sidebar-nav__row:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-icon-color-hover, var(--fk-color-text, #36405a))}.fk-sidebar-nav__row--active .fk-sidebar-nav__icon,.fk-sidebar-nav__row--active:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch .fk-sidebar-nav__icon,.fk-sidebar-nav__row--branch:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.fk-sidebar-nav__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--fk-sidebar-nav-chevron-color, var(--fk-color-muted, #8a93a8));transition:transform .18s ease}.fk-sidebar-nav__chevron--open{transform:rotate(90deg)}.fk-sidebar-nav__children{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-children-gap, var(--fk-rhythm-2, .5rem));list-style:none;margin:var(--fk-sidebar-nav-children-offset, var(--fk-rhythm-2, .5rem)) 0 0;padding-left:var(--fk-sidebar-nav-children-indent, var(--fk-rhythm-6, 1.5rem))}.fk-sidebar-nav__children:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--fk-sidebar-nav-children-line-offset, var(--fk-rhythm-3, .75rem));width:var(--fk-sidebar-nav-children-line-width, var(--fk-border-width, 1px));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__child{box-sizing:border-box;display:flex;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;margin:0;padding:var(--fk-sidebar-nav-child-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-child-radius, var(--fk-radius-md, .625rem));font-size:var(--fk-sidebar-nav-child-font-size, .875rem);font-weight:var(--fk-sidebar-nav-child-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-child-color, var(--fk-color-muted, #5c6781));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__child:hover{background:var(--fk-sidebar-nav-child-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-child-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__child:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__child--active,.fk-sidebar-nav__child--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}.fk-sidebar-nav__subgroup{margin:var(--fk-sidebar-nav-subgroup-offset, var(--fk-rhythm-2, .5rem)) 0 0}.fk-sidebar-nav__subgroup-title{display:block;padding-inline:var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group-label{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group:not(:first-child) .fk-sidebar-nav__divider{display:block;height:1px;margin:0 var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__row{justify-content:center;padding-inline:var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__label,:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__chevron{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__children{display:none}.fk-sidebar-nav__flyout-panel{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-width:var(--fk-sidebar-nav-flyout-min-width, 13rem);max-width:var(--fk-sidebar-nav-flyout-max-width, 22rem);max-height:var(--fk-sidebar-nav-flyout-max-height, min(28rem, 100dvh - 2rem));padding:var(--fk-sidebar-nav-flyout-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-radius:var(--fk-sidebar-nav-flyout-radius, var(--fk-radius-md, .75rem));box-shadow:var(--fk-sidebar-nav-flyout-shadow, var(--fk-shadow-lg, 0 18px 44px -14px rgba(20, 34, 80, .3)))}.fk-sidebar-nav__flyout-panel:before{content:\"\";position:absolute;left:-.375rem;top:var(--fk-sidebar-nav-flyout-caret-top, 1.375rem);width:.6875rem;height:.6875rem;background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border-left:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));transform:rotate(45deg)}.fk-sidebar-nav__flyout-items{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline:var(--fk-focus-ring-width, 3px);margin-inline:calc(var(--fk-focus-ring-width, 3px) * -1)}.fk-sidebar-nav__flyout-head{display:flex;flex-shrink:0;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:.4375rem var(--fk-rhythm-3, .625rem) .5625rem;border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__flyout-icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--fk-sidebar-nav-flyout-icon-radius, var(--fk-radius-sm, .5rem));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0));background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe))}.fk-sidebar-nav__flyout-title{min-width:0;overflow:hidden;font-family:var(--fk-sidebar-nav-flyout-title-font-family, var(--fk-font-family-display, var(--fk-font-family-base)));font-size:var(--fk-sidebar-nav-flyout-title-font-size, .84375rem);font-weight:var(--fk-sidebar-nav-flyout-title-font-weight, var(--fk-font-weight-semibold, 600));white-space:nowrap;text-overflow:ellipsis;color:var(--fk-sidebar-nav-flyout-title-color, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-subgroup{display:block;flex-shrink:0;padding:var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem) var(--fk-rhythm-1, .25rem);font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}.fk-sidebar-nav__flyout-item{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .5rem));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease}.fk-sidebar-nav__flyout-item:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-item:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__flyout-item--active,.fk-sidebar-nav__flyout-item--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TooltipDirective, selector: "[fkTooltip]", inputs: ["fkTooltip", "fkTooltipPosition", "fkTooltipOffset", "fkTooltipShowDelay", "fkTooltipHideDelay", "fkTooltipDisabled", "fkTooltipClassName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SidebarNavComponent, isStandalone: true, selector: "fk-sidebar-nav", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, externalLinkLabel: { classPropertyName: "externalLinkLabel", publicName: "externalLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "itemTpl", first: true, predicate: SidebarNavItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "flyoutTpl", first: true, predicate: ["flyoutTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (group of model(); track $index) {\n <div class=\"fk-sidebar-nav__group\">\n @if (group.label) {\n <div class=\"fk-sidebar-nav__group-label\">{{ group.label }}</div>\n }\n <div class=\"fk-sidebar-nav__divider\" aria-hidden=\"true\"></div>\n\n <ul class=\"fk-sidebar-nav__list\">\n @for (item of group.items; track item.id) {\n <li class=\"fk-sidebar-nav__item\">\n @if (isParent(item)) {\n <!-- PARENT \u2014 disclosure row -->\n <button\n #row\n type=\"button\"\n class=\"fk-sidebar-nav__row fk-sidebar-nav__row--parent\"\n [class.fk-sidebar-nav__row--branch]=\"sectionActive(item)\"\n [attr.aria-expanded]=\"\n isCollapsed() ? flyoutItem()?.id === item.id : isOpen(item)\n \"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onParentClick(item, row)\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n <span\n class=\"fk-sidebar-nav__chevron\"\n [class.fk-sidebar-nav__chevron--open]=\"isOpen(item)\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.75 4.5L11.25 9L6.75 13.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n </button>\n\n @if (!isCollapsed() && isOpen(item)) {\n <ul class=\"fk-sidebar-nav__children\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <li class=\"fk-sidebar-nav__subgroup\">\n <span class=\"fk-sidebar-nav__subgroup-title\">{{\n child.label\n }}</span>\n </li>\n } @else if (child.href) {\n <li>\n <a\n class=\"fk-sidebar-nav__child\"\n [href]=\"child.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{\n child.label\n }}</span>\n <ng-container [ngTemplateOutlet]=\"externalMark\" />\n </a>\n </li>\n } @else {\n <li>\n <a\n class=\"fk-sidebar-nav__child\"\n [class.fk-sidebar-nav__child--active]=\"\n linkActive(child)\n \"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{\n child.label\n }}</span>\n </a>\n </li>\n }\n }\n </ul>\n }\n } @else if (item.href) {\n <!-- LEAF \u2014 outside the app, in a new tab; never the active row -->\n <a\n class=\"fk-sidebar-nav__row\"\n [href]=\"item.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [attr.aria-label]=\"\n isCollapsed() ? item.label + ', ' + externalLinkLabel() : null\n \"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n <ng-container [ngTemplateOutlet]=\"externalMark\" />\n </a>\n } @else {\n <!-- LEAF \u2014 direct link -->\n <a\n class=\"fk-sidebar-nav__row\"\n [class.fk-sidebar-nav__row--active]=\"linkActive(item)\"\n [attr.aria-current]=\"linkActive(item) ? 'page' : null\"\n [routerLink]=\"item.routerLink\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </div>\n}\n\n<!--\n The \"opens elsewhere\" mark after an `href` row's label. Inline rather than a\n named icon, so the component asks nothing of the host's icon set; the\n hidden text says in words what the arrow says in pictures.\n-->\n<ng-template #externalMark>\n <span class=\"fk-sidebar-nav__external\" aria-hidden=\"true\">\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 3.5H3.5v9h9V10M9 2.5h4.5V7M13.5 2.5L7.5 8.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n <span class=\"fk-sidebar-nav__sr-only\">({{ externalLinkLabel() }})</span>\n</ng-template>\n\n<!-- Flyout panel for a collapsed parent (anchored beside the rail via CDK Overlay) -->\n<ng-template #flyoutTpl let-item>\n <!--\n A labelled group of navigation links \u2014 not an ARIA `menu`. Menu semantics\n promise roving arrow-key focus we don't implement (these are Tab-navigated\n links), so `role=\"group\"` + `aria-label` is the honest, valid structure.\n -->\n <div\n class=\"fk-sidebar-nav__flyout-panel\"\n role=\"group\"\n [attr.aria-label]=\"item.label\"\n >\n <!-- Decorative: the group is already named by aria-label, so the visual\n title/icon would only repeat it to assistive tech. -->\n <div class=\"fk-sidebar-nav__flyout-head\" aria-hidden=\"true\">\n @if (item.icon) {\n <span class=\"fk-sidebar-nav__flyout-icon\">\n <fk-icon [name]=\"item.icon\" size=\"sm\" />\n </span>\n }\n <span class=\"fk-sidebar-nav__flyout-title\">{{ item.label }}</span>\n </div>\n\n <!--\n The items scroll inside their own bounded container, not the panel: the\n panel hosts the caret (::before) which sits outside its left edge, so\n putting overflow on the panel itself would clip it.\n -->\n <div class=\"fk-sidebar-nav__flyout-items\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <span class=\"fk-sidebar-nav__flyout-subgroup\">{{ child.label }}</span>\n } @else if (child.href) {\n <a\n class=\"fk-sidebar-nav__flyout-item\"\n [href]=\"child.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ child.label }}</span>\n <ng-container [ngTemplateOutlet]=\"externalMark\" />\n </a>\n } @else {\n <a\n class=\"fk-sidebar-nav__flyout-item\"\n [class.fk-sidebar-nav__flyout-item--active]=\"linkActive(child)\"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ child.label }}</span>\n </a>\n }\n }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block}.fk-sidebar-nav__group{display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-group-inner-gap, var(--fk-rhythm-2, .5rem))}.fk-sidebar-nav__group+.fk-sidebar-nav__group{margin-top:var(--fk-sidebar-nav-group-gap, var(--fk-rhythm-5, 1.25rem))}.fk-sidebar-nav__group-label{padding-inline:var(--fk-sidebar-nav-label-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-label-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-label-font-size, .625rem);font-weight:var(--fk-sidebar-nav-label-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-label-color, var(--fk-color-muted, #64748b))}.fk-sidebar-nav__divider{display:none}.fk-sidebar-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-row-stack, var(--fk-rhythm-1, .25rem))}.fk-sidebar-nav__row{box-sizing:border-box;display:flex;align-items:center;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .625rem));background:var(--fk-sidebar-nav-row-bg, transparent);font-family:var(--fk-sidebar-nav-row-font-family, var(--fk-font-family-base));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__row:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__row:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__row--active,.fk-sidebar-nav__row--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch,.fk-sidebar-nav__row--branch:hover{background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__icon{flex:none;display:inline-flex;color:var(--fk-sidebar-nav-icon-color, var(--fk-color-muted, #8a93a8));transition:color .13s ease}.fk-sidebar-nav__row:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-icon-color-hover, var(--fk-color-text, #36405a))}.fk-sidebar-nav__row--active .fk-sidebar-nav__icon,.fk-sidebar-nav__row--active:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch .fk-sidebar-nav__icon,.fk-sidebar-nav__row--branch:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.fk-sidebar-nav__external{flex:none;display:inline-flex;align-items:center;color:var(--fk-sidebar-nav-external-color, var(--fk-color-muted, #8a93a8))}.fk-sidebar-nav__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-sidebar-nav__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--fk-sidebar-nav-chevron-color, var(--fk-color-muted, #8a93a8));transition:transform .18s ease}.fk-sidebar-nav__chevron--open{transform:rotate(90deg)}.fk-sidebar-nav__children{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-children-gap, var(--fk-rhythm-2, .5rem));list-style:none;margin:var(--fk-sidebar-nav-children-offset, var(--fk-rhythm-2, .5rem)) 0 0;padding-left:var(--fk-sidebar-nav-children-indent, var(--fk-rhythm-6, 1.5rem))}.fk-sidebar-nav__children:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--fk-sidebar-nav-children-line-offset, var(--fk-rhythm-3, .75rem));width:var(--fk-sidebar-nav-children-line-width, var(--fk-border-width, 1px));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__child{box-sizing:border-box;display:flex;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;margin:0;padding:var(--fk-sidebar-nav-child-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-child-radius, var(--fk-radius-md, .625rem));font-size:var(--fk-sidebar-nav-child-font-size, .875rem);font-weight:var(--fk-sidebar-nav-child-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-child-color, var(--fk-color-muted, #5c6781));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__child:hover{background:var(--fk-sidebar-nav-child-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-child-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__child:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__child--active,.fk-sidebar-nav__child--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}.fk-sidebar-nav__subgroup{margin:var(--fk-sidebar-nav-subgroup-offset, var(--fk-rhythm-2, .5rem)) 0 0}.fk-sidebar-nav__subgroup-title{display:block;padding-inline:var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group-label{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group:not(:first-child) .fk-sidebar-nav__divider{display:block;height:1px;margin:0 var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__row{justify-content:center;padding-inline:var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__label,:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__chevron,:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__external{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__children{display:none}.fk-sidebar-nav__flyout-panel{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-width:var(--fk-sidebar-nav-flyout-min-width, 13rem);max-width:var(--fk-sidebar-nav-flyout-max-width, 22rem);max-height:var(--fk-sidebar-nav-flyout-max-height, min(28rem, 100dvh - 2rem));padding:var(--fk-sidebar-nav-flyout-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-radius:var(--fk-sidebar-nav-flyout-radius, var(--fk-radius-md, .75rem));box-shadow:var(--fk-sidebar-nav-flyout-shadow, var(--fk-shadow-lg, 0 18px 44px -14px rgba(20, 34, 80, .3)))}.fk-sidebar-nav__flyout-panel:before{content:\"\";position:absolute;left:-.375rem;top:var(--fk-sidebar-nav-flyout-caret-top, 1.375rem);width:.6875rem;height:.6875rem;background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border-left:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));transform:rotate(45deg)}.fk-sidebar-nav__flyout-items{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline:var(--fk-focus-ring-width, 3px);margin-inline:calc(var(--fk-focus-ring-width, 3px) * -1)}.fk-sidebar-nav__flyout-head{display:flex;flex-shrink:0;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:.4375rem var(--fk-rhythm-3, .625rem) .5625rem;border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__flyout-icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--fk-sidebar-nav-flyout-icon-radius, var(--fk-radius-sm, .5rem));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0));background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe))}.fk-sidebar-nav__flyout-title{min-width:0;overflow:hidden;font-family:var(--fk-sidebar-nav-flyout-title-font-family, var(--fk-font-family-display, var(--fk-font-family-base)));font-size:var(--fk-sidebar-nav-flyout-title-font-size, .84375rem);font-weight:var(--fk-sidebar-nav-flyout-title-font-weight, var(--fk-font-weight-semibold, 600));white-space:nowrap;text-overflow:ellipsis;color:var(--fk-sidebar-nav-flyout-title-color, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-subgroup{display:block;flex-shrink:0;padding:var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem) var(--fk-rhythm-1, .25rem);font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}.fk-sidebar-nav__flyout-item{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .5rem));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease}.fk-sidebar-nav__flyout-item:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-item:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__flyout-item--active,.fk-sidebar-nav__flyout-item--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TooltipDirective, selector: "[fkTooltip]", inputs: ["fkTooltip", "fkTooltipPosition", "fkTooltipOffset", "fkTooltipShowDelay", "fkTooltipHideDelay", "fkTooltipDisabled", "fkTooltipClassName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
702
708
|
}
|
|
703
709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarNavComponent, decorators: [{
|
|
704
710
|
type: Component,
|
|
705
|
-
args: [{ selector: 'fk-sidebar-nav', standalone: true, imports: [RouterLink, IconComponent, TooltipDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of model(); track $index) {\n <div class=\"fk-sidebar-nav__group\">\n @if (group.label) {\n <div class=\"fk-sidebar-nav__group-label\">{{ group.label }}</div>\n }\n <div class=\"fk-sidebar-nav__divider\" aria-hidden=\"true\"></div>\n\n <ul class=\"fk-sidebar-nav__list\">\n @for (item of group.items; track item.id) {\n <li class=\"fk-sidebar-nav__item\">\n @if (isParent(item)) {\n <!-- PARENT \u2014 disclosure row -->\n <button\n #row\n type=\"button\"\n class=\"fk-sidebar-nav__row fk-sidebar-nav__row--parent\"\n [class.fk-sidebar-nav__row--branch]=\"sectionActive(item)\"\n [attr.aria-expanded]=\"\n isCollapsed() ? flyoutItem()?.id === item.id : isOpen(item)\n \"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onParentClick(item, row)\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n <span\n class=\"fk-sidebar-nav__chevron\"\n [class.fk-sidebar-nav__chevron--open]=\"isOpen(item)\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.75 4.5L11.25 9L6.75 13.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n </button>\n\n @if (!isCollapsed() && isOpen(item)) {\n <ul class=\"fk-sidebar-nav__children\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <li class=\"fk-sidebar-nav__subgroup\">\n <span class=\"fk-sidebar-nav__subgroup-title\">{{\n child.label\n }}</span>\n </li>\n } @else {\n <li>\n <a\n class=\"fk-sidebar-nav__child\"\n [class.fk-sidebar-nav__child--active]=\"\n linkActive(child)\n \"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{\n child.label\n }}</span>\n </a>\n </li>\n }\n }\n </ul>\n }\n } @else {\n <!-- LEAF \u2014 direct link -->\n <a\n class=\"fk-sidebar-nav__row\"\n [class.fk-sidebar-nav__row--active]=\"linkActive(item)\"\n [attr.aria-current]=\"linkActive(item) ? 'page' : null\"\n [routerLink]=\"item.routerLink\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </div>\n}\n\n<!-- Flyout panel for a collapsed parent (anchored beside the rail via CDK Overlay) -->\n<ng-template #flyoutTpl let-item>\n <!--\n A labelled group of navigation links \u2014 not an ARIA `menu`. Menu semantics\n promise roving arrow-key focus we don't implement (these are Tab-navigated\n links), so `role=\"group\"` + `aria-label` is the honest, valid structure.\n -->\n <div\n class=\"fk-sidebar-nav__flyout-panel\"\n role=\"group\"\n [attr.aria-label]=\"item.label\"\n >\n <!-- Decorative: the group is already named by aria-label, so the visual\n title/icon would only repeat it to assistive tech. -->\n <div class=\"fk-sidebar-nav__flyout-head\" aria-hidden=\"true\">\n @if (item.icon) {\n <span class=\"fk-sidebar-nav__flyout-icon\">\n <fk-icon [name]=\"item.icon\" size=\"sm\" />\n </span>\n }\n <span class=\"fk-sidebar-nav__flyout-title\">{{ item.label }}</span>\n </div>\n\n <!--\n The items scroll inside their own bounded container, not the panel: the\n panel hosts the caret (::before) which sits outside its left edge, so\n putting overflow on the panel itself would clip it.\n -->\n <div class=\"fk-sidebar-nav__flyout-items\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <span class=\"fk-sidebar-nav__flyout-subgroup\">{{ child.label }}</span>\n } @else {\n <a\n class=\"fk-sidebar-nav__flyout-item\"\n [class.fk-sidebar-nav__flyout-item--active]=\"linkActive(child)\"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ child.label }}</span>\n </a>\n }\n }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block}.fk-sidebar-nav__group{display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-group-inner-gap, var(--fk-rhythm-2, .5rem))}.fk-sidebar-nav__group+.fk-sidebar-nav__group{margin-top:var(--fk-sidebar-nav-group-gap, var(--fk-rhythm-5, 1.25rem))}.fk-sidebar-nav__group-label{padding-inline:var(--fk-sidebar-nav-label-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-label-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-label-font-size, .625rem);font-weight:var(--fk-sidebar-nav-label-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-label-color, var(--fk-color-muted, #64748b))}.fk-sidebar-nav__divider{display:none}.fk-sidebar-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-row-stack, var(--fk-rhythm-1, .25rem))}.fk-sidebar-nav__row{box-sizing:border-box;display:flex;align-items:center;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .625rem));background:var(--fk-sidebar-nav-row-bg, transparent);font-family:var(--fk-sidebar-nav-row-font-family, var(--fk-font-family-base));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__row:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__row:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__row--active,.fk-sidebar-nav__row--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch,.fk-sidebar-nav__row--branch:hover{background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__icon{flex:none;display:inline-flex;color:var(--fk-sidebar-nav-icon-color, var(--fk-color-muted, #8a93a8));transition:color .13s ease}.fk-sidebar-nav__row:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-icon-color-hover, var(--fk-color-text, #36405a))}.fk-sidebar-nav__row--active .fk-sidebar-nav__icon,.fk-sidebar-nav__row--active:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch .fk-sidebar-nav__icon,.fk-sidebar-nav__row--branch:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.fk-sidebar-nav__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--fk-sidebar-nav-chevron-color, var(--fk-color-muted, #8a93a8));transition:transform .18s ease}.fk-sidebar-nav__chevron--open{transform:rotate(90deg)}.fk-sidebar-nav__children{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-children-gap, var(--fk-rhythm-2, .5rem));list-style:none;margin:var(--fk-sidebar-nav-children-offset, var(--fk-rhythm-2, .5rem)) 0 0;padding-left:var(--fk-sidebar-nav-children-indent, var(--fk-rhythm-6, 1.5rem))}.fk-sidebar-nav__children:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--fk-sidebar-nav-children-line-offset, var(--fk-rhythm-3, .75rem));width:var(--fk-sidebar-nav-children-line-width, var(--fk-border-width, 1px));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__child{box-sizing:border-box;display:flex;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;margin:0;padding:var(--fk-sidebar-nav-child-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-child-radius, var(--fk-radius-md, .625rem));font-size:var(--fk-sidebar-nav-child-font-size, .875rem);font-weight:var(--fk-sidebar-nav-child-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-child-color, var(--fk-color-muted, #5c6781));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__child:hover{background:var(--fk-sidebar-nav-child-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-child-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__child:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__child--active,.fk-sidebar-nav__child--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}.fk-sidebar-nav__subgroup{margin:var(--fk-sidebar-nav-subgroup-offset, var(--fk-rhythm-2, .5rem)) 0 0}.fk-sidebar-nav__subgroup-title{display:block;padding-inline:var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group-label{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group:not(:first-child) .fk-sidebar-nav__divider{display:block;height:1px;margin:0 var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__row{justify-content:center;padding-inline:var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__label,:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__chevron{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__children{display:none}.fk-sidebar-nav__flyout-panel{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-width:var(--fk-sidebar-nav-flyout-min-width, 13rem);max-width:var(--fk-sidebar-nav-flyout-max-width, 22rem);max-height:var(--fk-sidebar-nav-flyout-max-height, min(28rem, 100dvh - 2rem));padding:var(--fk-sidebar-nav-flyout-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-radius:var(--fk-sidebar-nav-flyout-radius, var(--fk-radius-md, .75rem));box-shadow:var(--fk-sidebar-nav-flyout-shadow, var(--fk-shadow-lg, 0 18px 44px -14px rgba(20, 34, 80, .3)))}.fk-sidebar-nav__flyout-panel:before{content:\"\";position:absolute;left:-.375rem;top:var(--fk-sidebar-nav-flyout-caret-top, 1.375rem);width:.6875rem;height:.6875rem;background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border-left:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));transform:rotate(45deg)}.fk-sidebar-nav__flyout-items{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline:var(--fk-focus-ring-width, 3px);margin-inline:calc(var(--fk-focus-ring-width, 3px) * -1)}.fk-sidebar-nav__flyout-head{display:flex;flex-shrink:0;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:.4375rem var(--fk-rhythm-3, .625rem) .5625rem;border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__flyout-icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--fk-sidebar-nav-flyout-icon-radius, var(--fk-radius-sm, .5rem));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0));background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe))}.fk-sidebar-nav__flyout-title{min-width:0;overflow:hidden;font-family:var(--fk-sidebar-nav-flyout-title-font-family, var(--fk-font-family-display, var(--fk-font-family-base)));font-size:var(--fk-sidebar-nav-flyout-title-font-size, .84375rem);font-weight:var(--fk-sidebar-nav-flyout-title-font-weight, var(--fk-font-weight-semibold, 600));white-space:nowrap;text-overflow:ellipsis;color:var(--fk-sidebar-nav-flyout-title-color, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-subgroup{display:block;flex-shrink:0;padding:var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem) var(--fk-rhythm-1, .25rem);font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}.fk-sidebar-nav__flyout-item{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .5rem));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease}.fk-sidebar-nav__flyout-item:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-item:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__flyout-item--active,.fk-sidebar-nav__flyout-item--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}\n"] }]
|
|
706
|
-
}], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], flyoutTpl: [{ type: i0.ViewChild, args: ['flyoutTpl', { isSignal: true }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SidebarNavItemDirective), { isSignal: true }] }], hostClass: [{
|
|
711
|
+
args: [{ selector: 'fk-sidebar-nav', standalone: true, imports: [RouterLink, IconComponent, TooltipDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of model(); track $index) {\n <div class=\"fk-sidebar-nav__group\">\n @if (group.label) {\n <div class=\"fk-sidebar-nav__group-label\">{{ group.label }}</div>\n }\n <div class=\"fk-sidebar-nav__divider\" aria-hidden=\"true\"></div>\n\n <ul class=\"fk-sidebar-nav__list\">\n @for (item of group.items; track item.id) {\n <li class=\"fk-sidebar-nav__item\">\n @if (isParent(item)) {\n <!-- PARENT \u2014 disclosure row -->\n <button\n #row\n type=\"button\"\n class=\"fk-sidebar-nav__row fk-sidebar-nav__row--parent\"\n [class.fk-sidebar-nav__row--branch]=\"sectionActive(item)\"\n [attr.aria-expanded]=\"\n isCollapsed() ? flyoutItem()?.id === item.id : isOpen(item)\n \"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onParentClick(item, row)\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n <span\n class=\"fk-sidebar-nav__chevron\"\n [class.fk-sidebar-nav__chevron--open]=\"isOpen(item)\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.75 4.5L11.25 9L6.75 13.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n </button>\n\n @if (!isCollapsed() && isOpen(item)) {\n <ul class=\"fk-sidebar-nav__children\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <li class=\"fk-sidebar-nav__subgroup\">\n <span class=\"fk-sidebar-nav__subgroup-title\">{{\n child.label\n }}</span>\n </li>\n } @else if (child.href) {\n <li>\n <a\n class=\"fk-sidebar-nav__child\"\n [href]=\"child.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{\n child.label\n }}</span>\n <ng-container [ngTemplateOutlet]=\"externalMark\" />\n </a>\n </li>\n } @else {\n <li>\n <a\n class=\"fk-sidebar-nav__child\"\n [class.fk-sidebar-nav__child--active]=\"\n linkActive(child)\n \"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{\n child.label\n }}</span>\n </a>\n </li>\n }\n }\n </ul>\n }\n } @else if (item.href) {\n <!-- LEAF \u2014 outside the app, in a new tab; never the active row -->\n <a\n class=\"fk-sidebar-nav__row\"\n [href]=\"item.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [attr.aria-label]=\"\n isCollapsed() ? item.label + ', ' + externalLinkLabel() : null\n \"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n <ng-container [ngTemplateOutlet]=\"externalMark\" />\n </a>\n } @else {\n <!-- LEAF \u2014 direct link -->\n <a\n class=\"fk-sidebar-nav__row\"\n [class.fk-sidebar-nav__row--active]=\"linkActive(item)\"\n [attr.aria-current]=\"linkActive(item) ? 'page' : null\"\n [routerLink]=\"item.routerLink\"\n [attr.aria-label]=\"isCollapsed() ? item.label : null\"\n [fkTooltip]=\"item.label\"\n [fkTooltipDisabled]=\"!isCollapsed()\"\n fkTooltipPosition=\"right\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(item); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n } @else if (item.icon) {\n <fk-icon\n class=\"fk-sidebar-nav__icon\"\n [name]=\"item.icon\"\n size=\"sm\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </div>\n}\n\n<!--\n The \"opens elsewhere\" mark after an `href` row's label. Inline rather than a\n named icon, so the component asks nothing of the host's icon set; the\n hidden text says in words what the arrow says in pictures.\n-->\n<ng-template #externalMark>\n <span class=\"fk-sidebar-nav__external\" aria-hidden=\"true\">\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 3.5H3.5v9h9V10M9 2.5h4.5V7M13.5 2.5L7.5 8.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n <span class=\"fk-sidebar-nav__sr-only\">({{ externalLinkLabel() }})</span>\n</ng-template>\n\n<!-- Flyout panel for a collapsed parent (anchored beside the rail via CDK Overlay) -->\n<ng-template #flyoutTpl let-item>\n <!--\n A labelled group of navigation links \u2014 not an ARIA `menu`. Menu semantics\n promise roving arrow-key focus we don't implement (these are Tab-navigated\n links), so `role=\"group\"` + `aria-label` is the honest, valid structure.\n -->\n <div\n class=\"fk-sidebar-nav__flyout-panel\"\n role=\"group\"\n [attr.aria-label]=\"item.label\"\n >\n <!-- Decorative: the group is already named by aria-label, so the visual\n title/icon would only repeat it to assistive tech. -->\n <div class=\"fk-sidebar-nav__flyout-head\" aria-hidden=\"true\">\n @if (item.icon) {\n <span class=\"fk-sidebar-nav__flyout-icon\">\n <fk-icon [name]=\"item.icon\" size=\"sm\" />\n </span>\n }\n <span class=\"fk-sidebar-nav__flyout-title\">{{ item.label }}</span>\n </div>\n\n <!--\n The items scroll inside their own bounded container, not the panel: the\n panel hosts the caret (::before) which sits outside its left edge, so\n putting overflow on the panel itself would clip it.\n -->\n <div class=\"fk-sidebar-nav__flyout-items\">\n @for (child of item.children; track child.id) {\n @if (child.heading) {\n <span class=\"fk-sidebar-nav__flyout-subgroup\">{{ child.label }}</span>\n } @else if (child.href) {\n <a\n class=\"fk-sidebar-nav__flyout-item\"\n [href]=\"child.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ child.label }}</span>\n <ng-container [ngTemplateOutlet]=\"externalMark\" />\n </a>\n } @else {\n <a\n class=\"fk-sidebar-nav__flyout-item\"\n [class.fk-sidebar-nav__flyout-item--active]=\"linkActive(child)\"\n [attr.aria-current]=\"linkActive(child) ? 'page' : null\"\n [routerLink]=\"child.routerLink\"\n (click)=\"onLinkClick()\"\n >\n @if (leadingTemplate(child); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: child }\"\n />\n }\n <span class=\"fk-sidebar-nav__label\">{{ child.label }}</span>\n </a>\n }\n }\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block}.fk-sidebar-nav__group{display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-group-inner-gap, var(--fk-rhythm-2, .5rem))}.fk-sidebar-nav__group+.fk-sidebar-nav__group{margin-top:var(--fk-sidebar-nav-group-gap, var(--fk-rhythm-5, 1.25rem))}.fk-sidebar-nav__group-label{padding-inline:var(--fk-sidebar-nav-label-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-label-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-label-font-size, .625rem);font-weight:var(--fk-sidebar-nav-label-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-label-color, var(--fk-color-muted, #64748b))}.fk-sidebar-nav__divider{display:none}.fk-sidebar-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-row-stack, var(--fk-rhythm-1, .25rem))}.fk-sidebar-nav__row{box-sizing:border-box;display:flex;align-items:center;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .625rem));background:var(--fk-sidebar-nav-row-bg, transparent);font-family:var(--fk-sidebar-nav-row-font-family, var(--fk-font-family-base));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__row:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__row:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__row--active,.fk-sidebar-nav__row--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch,.fk-sidebar-nav__row--branch:hover{background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__icon{flex:none;display:inline-flex;color:var(--fk-sidebar-nav-icon-color, var(--fk-color-muted, #8a93a8));transition:color .13s ease}.fk-sidebar-nav__row:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-icon-color-hover, var(--fk-color-text, #36405a))}.fk-sidebar-nav__row--active .fk-sidebar-nav__icon,.fk-sidebar-nav__row--active:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-row-color-active, #ffffff)}.fk-sidebar-nav__row--branch .fk-sidebar-nav__icon,.fk-sidebar-nav__row--branch:hover .fk-sidebar-nav__icon{color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0))}.fk-sidebar-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.fk-sidebar-nav__external{flex:none;display:inline-flex;align-items:center;color:var(--fk-sidebar-nav-external-color, var(--fk-color-muted, #8a93a8))}.fk-sidebar-nav__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-sidebar-nav__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--fk-sidebar-nav-chevron-color, var(--fk-color-muted, #8a93a8));transition:transform .18s ease}.fk-sidebar-nav__chevron--open{transform:rotate(90deg)}.fk-sidebar-nav__children{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-children-gap, var(--fk-rhythm-2, .5rem));list-style:none;margin:var(--fk-sidebar-nav-children-offset, var(--fk-rhythm-2, .5rem)) 0 0;padding-left:var(--fk-sidebar-nav-children-indent, var(--fk-rhythm-6, 1.5rem))}.fk-sidebar-nav__children:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--fk-sidebar-nav-children-line-offset, var(--fk-rhythm-3, .75rem));width:var(--fk-sidebar-nav-children-line-width, var(--fk-border-width, 1px));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__child{box-sizing:border-box;display:flex;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));width:100%;margin:0;padding:var(--fk-sidebar-nav-child-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-child-radius, var(--fk-radius-md, .625rem));font-size:var(--fk-sidebar-nav-child-font-size, .875rem);font-weight:var(--fk-sidebar-nav-child-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-child-color, var(--fk-color-muted, #5c6781));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .13s ease,color .13s ease}.fk-sidebar-nav__child:hover{background:var(--fk-sidebar-nav-child-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-child-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__child:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__child--active,.fk-sidebar-nav__child--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}.fk-sidebar-nav__subgroup{margin:var(--fk-sidebar-nav-subgroup-offset, var(--fk-rhythm-2, .5rem)) 0 0}.fk-sidebar-nav__subgroup-title{display:block;padding-inline:var(--fk-sidebar-nav-child-padding-inline, var(--fk-rhythm-3, .75rem));font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group-label{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__group:not(:first-child) .fk-sidebar-nav__divider{display:block;height:1px;margin:0 var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-children-line-color, var(--fk-color-border, #e5e8ef))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__row{justify-content:center;padding-inline:var(--fk-sidebar-nav-rail-padding, var(--fk-rhythm-2, .5rem))}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__label,:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__chevron,:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__external{display:none}:host(.fk-sidebar-nav--collapsed) .fk-sidebar-nav__children{display:none}.fk-sidebar-nav__flyout-panel{position:relative;display:flex;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-width:var(--fk-sidebar-nav-flyout-min-width, 13rem);max-width:var(--fk-sidebar-nav-flyout-max-width, 22rem);max-height:var(--fk-sidebar-nav-flyout-max-height, min(28rem, 100dvh - 2rem));padding:var(--fk-sidebar-nav-flyout-padding, var(--fk-rhythm-2, .5rem));background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-radius:var(--fk-sidebar-nav-flyout-radius, var(--fk-radius-md, .75rem));box-shadow:var(--fk-sidebar-nav-flyout-shadow, var(--fk-shadow-lg, 0 18px 44px -14px rgba(20, 34, 80, .3)))}.fk-sidebar-nav__flyout-panel:before{content:\"\";position:absolute;left:-.375rem;top:var(--fk-sidebar-nav-flyout-caret-top, 1.375rem);width:.6875rem;height:.6875rem;background:var(--fk-sidebar-nav-flyout-bg, var(--fk-color-surface, #ffffff));border-left:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef));transform:rotate(45deg)}.fk-sidebar-nav__flyout-items{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fk-sidebar-nav-flyout-gap, var(--fk-rhythm-1, .25rem));min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline:var(--fk-focus-ring-width, 3px);margin-inline:calc(var(--fk-focus-ring-width, 3px) * -1)}.fk-sidebar-nav__flyout-head{display:flex;flex-shrink:0;align-items:center;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:.4375rem var(--fk-rhythm-3, .625rem) .5625rem;border-bottom:var(--fk-border-width, 1px) solid var(--fk-sidebar-nav-flyout-border, var(--fk-color-border, #e5e8ef))}.fk-sidebar-nav__flyout-icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--fk-sidebar-nav-flyout-icon-radius, var(--fk-radius-sm, .5rem));color:var(--fk-sidebar-nav-branch-color, var(--fk-color-primary, #2348e0));background:var(--fk-sidebar-nav-branch-bg, var(--fk-color-primary-light, #eef2fe))}.fk-sidebar-nav__flyout-title{min-width:0;overflow:hidden;font-family:var(--fk-sidebar-nav-flyout-title-font-family, var(--fk-font-family-display, var(--fk-font-family-base)));font-size:var(--fk-sidebar-nav-flyout-title-font-size, .84375rem);font-weight:var(--fk-sidebar-nav-flyout-title-font-weight, var(--fk-font-weight-semibold, 600));white-space:nowrap;text-overflow:ellipsis;color:var(--fk-sidebar-nav-flyout-title-color, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-subgroup{display:block;flex-shrink:0;padding:var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem) var(--fk-rhythm-1, .25rem);font-family:var(--fk-sidebar-nav-subgroup-font-family, var(--fk-font-family-mono));font-size:var(--fk-sidebar-nav-subgroup-font-size, .625rem);font-weight:var(--fk-sidebar-nav-subgroup-font-weight, var(--fk-font-weight-semibold, 600));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fk-sidebar-nav-subgroup-color, var(--fk-color-muted, #8a93a8))}.fk-sidebar-nav__flyout-item{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;gap:var(--fk-sidebar-nav-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-sidebar-nav-row-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidebar-nav-row-padding-inline, var(--fk-rhythm-3, .75rem));border-radius:var(--fk-sidebar-nav-row-radius, var(--fk-radius-md, .5rem));font-size:var(--fk-sidebar-nav-row-font-size, .875rem);font-weight:var(--fk-sidebar-nav-row-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-sidebar-nav-row-color, var(--fk-color-muted, #36405a));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,color .12s ease}.fk-sidebar-nav__flyout-item:hover{background:var(--fk-sidebar-nav-row-bg-hover, var(--fk-color-surface-muted, #f5f6fa));color:var(--fk-sidebar-nav-row-color-hover, var(--fk-color-text, #0e1526))}.fk-sidebar-nav__flyout-item:focus-visible{outline:none;box-shadow:var(--fk-sidebar-nav-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(35, 72, 224, .28)))}.fk-sidebar-nav__flyout-item--active,.fk-sidebar-nav__flyout-item--active:hover{background:var(--fk-sidebar-nav-row-bg-active, var(--fk-color-primary, #2348e0));color:var(--fk-sidebar-nav-row-color-active, #ffffff);font-weight:var(--fk-sidebar-nav-child-font-weight-active, var(--fk-font-weight-semibold, 600))}\n"] }]
|
|
712
|
+
}], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], externalLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalLinkLabel", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], flyoutTpl: [{ type: i0.ViewChild, args: ['flyoutTpl', { isSignal: true }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SidebarNavItemDirective), { isSignal: true }] }], hostClass: [{
|
|
707
713
|
type: HostBinding,
|
|
708
714
|
args: ['class']
|
|
709
715
|
}] } });
|
|
@@ -2434,7 +2440,7 @@ class DashboardNavComponent {
|
|
|
2434
2440
|
return this.ariaLabel();
|
|
2435
2441
|
}
|
|
2436
2442
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardNavComponent, isStandalone: true, selector: "fk-dashboard-nav", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, slotBeforeGroupId: { classPropertyName: "slotBeforeGroupId", publicName: "slotBeforeGroupId", isSignal: true, isRequired: false, transformFunction: null }, slotAfterGroupId: { classPropertyName: "slotAfterGroupId", publicName: "slotAfterGroupId", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.hostRole", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "@for (segment of segmentsBeforeSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n}\n\n<!--\n Exactly one outlet for `[navSlotBefore]`, never inside a conditional. With\n no anchored group, or no groups at all, both loops are empty and the slot\n lands at the top \u2014 so a caller with nothing to navigate to still gets its\n switcher, which is the one way back to somewhere it can use.\n-->\n<ng-content select=\"[navSlotBefore]\" />\n\n@for (segment of segmentsAfterSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n @if (segment.after) {\n <ng-content />\n }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fk-dashboard-nav-gap, var(--fk-rhythm-6, 1.5rem));padding:var(--fk-dashboard-nav-padding, var(--fk-rhythm-4, 1rem))}:host(.fk-dashboard-nav--collapsed){padding-inline:var(--fk-dashboard-nav-padding-inline-collapsed, var(--fk-rhythm-2, .5rem))}.fk-dashboard-nav__separator{border-top:1px solid var(--fk-dashboard-nav-separator-color, var(--fk-color-border, #d9e2ee))}\n"], dependencies: [{ kind: "component", type: SidebarNavComponent, selector: "fk-sidebar-nav", inputs: ["model", "collapsed", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardNavComponent, isStandalone: true, selector: "fk-dashboard-nav", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, slotBeforeGroupId: { classPropertyName: "slotBeforeGroupId", publicName: "slotBeforeGroupId", isSignal: true, isRequired: false, transformFunction: null }, slotAfterGroupId: { classPropertyName: "slotAfterGroupId", publicName: "slotAfterGroupId", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.hostRole", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "@for (segment of segmentsBeforeSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n}\n\n<!--\n Exactly one outlet for `[navSlotBefore]`, never inside a conditional. With\n no anchored group, or no groups at all, both loops are empty and the slot\n lands at the top \u2014 so a caller with nothing to navigate to still gets its\n switcher, which is the one way back to somewhere it can use.\n-->\n<ng-content select=\"[navSlotBefore]\" />\n\n@for (segment of segmentsAfterSlot(); track segment.id) {\n @if (segment.separated) {\n <div class=\"fk-dashboard-nav__separator\" aria-hidden=\"true\"></div>\n }\n <fk-sidebar-nav [model]=\"segment.model\" [collapsed]=\"isCollapsed()\" />\n @if (segment.after) {\n <ng-content />\n }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fk-dashboard-nav-gap, var(--fk-rhythm-6, 1.5rem));padding:var(--fk-dashboard-nav-padding, var(--fk-rhythm-4, 1rem))}:host(.fk-dashboard-nav--collapsed){padding-inline:var(--fk-dashboard-nav-padding-inline-collapsed, var(--fk-rhythm-2, .5rem))}.fk-dashboard-nav__separator{border-top:1px solid var(--fk-dashboard-nav-separator-color, var(--fk-color-border, #d9e2ee))}\n"], dependencies: [{ kind: "component", type: SidebarNavComponent, selector: "fk-sidebar-nav", inputs: ["model", "collapsed", "externalLinkLabel", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2438
2444
|
}
|
|
2439
2445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardNavComponent, decorators: [{
|
|
2440
2446
|
type: Component,
|