@frame-kit/ui-ng-patterns 0.2.18 → 0.2.20
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.
|
@@ -698,11 +698,11 @@ class SidebarNavComponent {
|
|
|
698
698
|
panel.style.setProperty('--fk-sidebar-nav-flyout-caret-top', `${top}px`);
|
|
699
699
|
}
|
|
700
700
|
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--active .fk-sidebar-nav__icon{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__row--branch .fk-sidebar-nav__icon{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__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 });
|
|
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 });
|
|
702
702
|
}
|
|
703
703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarNavComponent, decorators: [{
|
|
704
704
|
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--active .fk-sidebar-nav__icon{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__row--branch .fk-sidebar-nav__icon{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__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"] }]
|
|
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
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: [{
|
|
707
707
|
type: HostBinding,
|
|
708
708
|
args: ['class']
|