@ng-doc/app
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
124 lines (118 loc) • 21.1 kB
JavaScript
import { Location, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, Input, HostBinding, ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
import { NG_DOC_CONTEXT } from '@ng-doc/app/tokens';
import { NgDocDotComponent, NgDocTextComponent, NgDocIconComponent, NgDocTextLeftDirective, NgDocRotatorDirective, NgDocExpanderComponent, NgDocTagComponent, NgDocExecutePipe, NgDocBindPipe } from '@ng-doc/ui-kit';
import { NgDocRouteActiveDirective } from '@ng-doc/app/directives/route-active';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { RouterLinkActive, RouterLink } from '@angular/router';
class NgDocSidebarCategoryComponent {
constructor() {
this.isRoot = false;
this.content = '';
this.expandable = true;
this.expanded = true;
this.location = inject(Location);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.location.onUrlChange(() => {
if (this.location.path().includes(this.category.route ?? '', 0)) {
this.expand();
}
});
}
toggle() {
this.expanded ? this.collapse() : this.expand();
}
expand() {
if (this.category?.expandable) {
this.expanded = true;
this.changeDetectorRef.markForCheck();
}
}
collapse() {
if (this.category?.expandable) {
this.expanded = false;
this.changeDetectorRef.markForCheck();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSidebarCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocSidebarCategoryComponent, isStandalone: true, selector: "ng-doc-sidebar-category", inputs: { category: "category", isRoot: "isRoot", content: "content", expandable: "expandable", expanded: "expanded" }, host: { properties: { "attr.data-ng-doc-is-root": "this.isRoot", "attr.data-ng-doc-expandable": "this.expandable" } }, ngImport: i0, template: "<div class=\"ng-doc-sidebar-category-wrapper\">\n <button class=\"ng-doc-sidebar-category-button\" (click)=\"toggle()\">\n <div class=\"ng-doc-sidebar-category\" [ngDocRouteActive]=\"category.route\" activeClass=\"active\">\n @if (!expandable) {\n <ng-doc-dot></ng-doc-dot>\n }\n <span ng-doc-text>\n @if (category.expandable) {\n <ng-doc-icon icon=\"chevron-right\" [ngDocRotator]=\"expanded\" ngDocTextLeft> </ng-doc-icon>\n }\n {{ category.title }}\n </span>\n </div>\n <!--\t\t<div ng-doc-text color=\"muted\" size=\"small\">Some description</div>-->\n </button>\n <ng-doc-expander [expanded]=\"expanded\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n <ng-template #contentTemplate>\n <div class=\"ng-doc-sidebar-category-children\">\n <!--We wrap content via ng-template to save state of the child components -->\n <ng-content></ng-content>\n <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n </div>\n </ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc( var(--ng-doc-sidebar-item-indent) + calc(var(--ng-doc-base-gutter) * 2) );--ng-doc-icon-color: var(--ng-doc-text)}:host[data-ng-doc-expandable=false] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);cursor:pointer;border-radius:var(--ng-doc-base-gutter)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button:hover{background-color:var(--ng-doc-base-1)}:host .ng-doc-sidebar-category-button{display:flex;flex-direction:column;border:unset;background-color:unset;width:100%}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category{display:flex;align-items:center;--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-text: var(--ng-doc-heading-color)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category ng-doc-dot{margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category.active{--ng-doc-font-weight: 600;--ng-doc-dot-background: var(--ng-doc-primary)}:host .ng-doc-sidebar-category-button span[ng-doc-text]{flex-shrink:0;margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-sidebar-category-children{padding-bottom:calc(var(--ng-doc-base-gutter) * 2);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}\n"], dependencies: [{ kind: "directive", type: NgDocRouteActiveDirective, selector: "[ngDocRouteActive]", inputs: ["ngDocRouteActive", "activeClass", "matchOptions"] }, { kind: "component", type: NgDocDotComponent, selector: "ng-doc-dot", inputs: ["color", "size"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocTextLeftDirective, selector: "[ngDocTextLeft]" }, { kind: "directive", type: NgDocRotatorDirective, selector: "[ngDocRotator]", inputs: ["ngDocRotator", "from", "to"] }, { kind: "component", type: NgDocExpanderComponent, selector: "ng-doc-expander", inputs: ["expanded", "content", "collapseMod", "from"] }, { kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSidebarCategoryComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-sidebar-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocRouteActiveDirective,
NgDocDotComponent,
NgDocTextComponent,
NgDocIconComponent,
NgDocTextLeftDirective,
NgDocRotatorDirective,
NgDocExpanderComponent,
PolymorpheusModule,
], template: "<div class=\"ng-doc-sidebar-category-wrapper\">\n <button class=\"ng-doc-sidebar-category-button\" (click)=\"toggle()\">\n <div class=\"ng-doc-sidebar-category\" [ngDocRouteActive]=\"category.route\" activeClass=\"active\">\n @if (!expandable) {\n <ng-doc-dot></ng-doc-dot>\n }\n <span ng-doc-text>\n @if (category.expandable) {\n <ng-doc-icon icon=\"chevron-right\" [ngDocRotator]=\"expanded\" ngDocTextLeft> </ng-doc-icon>\n }\n {{ category.title }}\n </span>\n </div>\n <!--\t\t<div ng-doc-text color=\"muted\" size=\"small\">Some description</div>-->\n </button>\n <ng-doc-expander [expanded]=\"expanded\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n <ng-template #contentTemplate>\n <div class=\"ng-doc-sidebar-category-children\">\n <!--We wrap content via ng-template to save state of the child components -->\n <ng-content></ng-content>\n <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n </div>\n </ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc( var(--ng-doc-sidebar-item-indent) + calc(var(--ng-doc-base-gutter) * 2) );--ng-doc-icon-color: var(--ng-doc-text)}:host[data-ng-doc-expandable=false] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);cursor:pointer;border-radius:var(--ng-doc-base-gutter)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button:hover{background-color:var(--ng-doc-base-1)}:host .ng-doc-sidebar-category-button{display:flex;flex-direction:column;border:unset;background-color:unset;width:100%}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category{display:flex;align-items:center;--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-text: var(--ng-doc-heading-color)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category ng-doc-dot{margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category.active{--ng-doc-font-weight: 600;--ng-doc-dot-background: var(--ng-doc-primary)}:host .ng-doc-sidebar-category-button span[ng-doc-text]{flex-shrink:0;margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-sidebar-category-children{padding-bottom:calc(var(--ng-doc-base-gutter) * 2);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}\n"] }]
}], ctorParameters: () => [], propDecorators: { category: [{
type: Input,
args: [{ required: true }]
}], isRoot: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-is-root']
}], content: [{
type: Input
}], expandable: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-expandable']
}], expanded: [{
type: Input
}] } });
class NgDocSidebarItemComponent {
constructor() {
this.item = input.required();
this.statuses = computed(() => {
const statuses = this.item().metadata?.tags['status'] ?? [];
return statuses.map((status) => {
const [type, text] = status.split(/\s+(.+)/);
return { type: type.replace(/^:/, ''), text };
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocSidebarItemComponent, isStandalone: true, selector: "ng-doc-sidebar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a class=\"ng-doc-sidebar-link\" [routerLink]=\"[item().route]\" routerLinkActive=\"active\">\n <ng-doc-dot></ng-doc-dot>\n <span ng-doc-text [absoluteContent]=\"true\">\n {{ item().title }}\n @for (status of statuses(); track status) {\n <ng-doc-tag size=\"small\" [color]=\"status.type || 'success'\" mod=\"light\">{{\n status.text\n }}</ng-doc-tag>\n }\n </span>\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{font-family:var(--ng-doc-heading-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;align-items:center;gap:var(--ng-doc-base-gutter);padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-horizontal-padding) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);text-decoration:inherit;cursor:pointer;border-radius:var(--ng-doc-base-gutter);--ng-doc-icon-color: var(--ng-doc-text);--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-font-weight: 400}.ng-doc-sidebar-link ng-doc-dot{margin-right:var(--ng-doc-base-gutter);z-index:1}.ng-doc-sidebar-link:hover:not(.active){background:var(--ng-doc-base-1)}.ng-doc-sidebar-link.active{background:color-mix(in srgb,var(--ng-doc-primary) 7%,transparent);--ng-doc-text: var(--ng-doc-primary);--ng-doc-dot-background: var(--ng-doc-primary)}.ng-doc-sidebar-link.active ng-doc-dot{animation:animation .5s ease-out}@keyframes animation{0%{transform:scale(1)}50%{transform:scale(2)}to{transform:scale(1)}}.ng-doc-sidebar-link ng-doc-tag{vertical-align:middle;margin-left:var(--ng-doc-base-gutter);font-weight:600}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgDocDotComponent, selector: "ng-doc-dot", inputs: ["color", "size"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSidebarItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-sidebar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, NgDocDotComponent, NgDocTextComponent, NgDocTagComponent], template: "<a class=\"ng-doc-sidebar-link\" [routerLink]=\"[item().route]\" routerLinkActive=\"active\">\n <ng-doc-dot></ng-doc-dot>\n <span ng-doc-text [absoluteContent]=\"true\">\n {{ item().title }}\n @for (status of statuses(); track status) {\n <ng-doc-tag size=\"small\" [color]=\"status.type || 'success'\" mod=\"light\">{{\n status.text\n }}</ng-doc-tag>\n }\n </span>\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{font-family:var(--ng-doc-heading-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;align-items:center;gap:var(--ng-doc-base-gutter);padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-horizontal-padding) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);text-decoration:inherit;cursor:pointer;border-radius:var(--ng-doc-base-gutter);--ng-doc-icon-color: var(--ng-doc-text);--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-font-weight: 400}.ng-doc-sidebar-link ng-doc-dot{margin-right:var(--ng-doc-base-gutter);z-index:1}.ng-doc-sidebar-link:hover:not(.active){background:var(--ng-doc-base-1)}.ng-doc-sidebar-link.active{background:color-mix(in srgb,var(--ng-doc-primary) 7%,transparent);--ng-doc-text: var(--ng-doc-primary);--ng-doc-dot-background: var(--ng-doc-primary)}.ng-doc-sidebar-link.active ng-doc-dot{animation:animation .5s ease-out}@keyframes animation{0%{transform:scale(1)}50%{transform:scale(2)}to{transform:scale(1)}}.ng-doc-sidebar-link ng-doc-tag{vertical-align:middle;margin-left:var(--ng-doc-base-gutter);font-weight:600}\n"] }]
}] });
class NgDocSidebarComponent {
constructor() {
this.location = inject(Location);
this.context = inject(NG_DOC_CONTEXT);
}
getNavigation(nav) {
return nav ? nav.children ?? [] : this.context.navigation;
}
matchRoute(route) {
return this.location.path().includes(route ?? '', 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocSidebarComponent, isStandalone: true, selector: "ng-doc-sidebar", ngImport: i0, template: "<div class=\"ng-doc-side-bar-wrapper\">\n @for (item of getNavigation | bind: this | execute; track item) {\n <ng-container\n *ngTemplateOutlet=\"sidebarTemplate; context: { item: item, root: true }\"></ng-container>\n }\n\n <ng-template let-item=\"item\" let-root=\"root\" #sidebarTemplate>\n @if (item.children?.length) {\n @if (!item.hidden) {\n <ng-doc-sidebar-category\n [category]=\"item\"\n [expandable]=\"!!item?.expandable\"\n [expanded]=\"\n !!item?.expanded || !item?.expandable || (matchRoute | bind: this | execute: item.route)\n \"\n [isRoot]=\"!!root\"\n [content]=\"categoryContent\">\n </ng-doc-sidebar-category>\n }\n <ng-template #categoryContent>\n @for (child of getNavigation | bind: this | execute: item; track child) {\n <ng-container\n *ngTemplateOutlet=\"\n sidebarTemplate;\n context: { item: child, root: false }\n \"></ng-container>\n }\n </ng-template>\n } @else {\n @if (!item.hidden) {\n <ng-doc-sidebar-item [item]=\"item\"></ng-doc-sidebar-item>\n }\n }\n </ng-template>\n</div>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;padding:var(--ng-doc-sidebar-padding) 0;background:var(--ng-doc-sidebar-background);box-shadow:var(--ng-doc-sidebar-shadow);--ng-doc-sidebar-category-indent: var(--ng-doc-sidebar-horizontal-padding);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-horizontal-padding)}:host .ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocSidebarCategoryComponent, selector: "ng-doc-sidebar-category", inputs: ["category", "isRoot", "content", "expandable", "expanded"] }, { kind: "component", type: NgDocSidebarItemComponent, selector: "ng-doc-sidebar-item", inputs: ["item"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSidebarComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgTemplateOutlet,
NgDocSidebarCategoryComponent,
NgDocSidebarItemComponent,
NgDocExecutePipe,
NgDocBindPipe,
], template: "<div class=\"ng-doc-side-bar-wrapper\">\n @for (item of getNavigation | bind: this | execute; track item) {\n <ng-container\n *ngTemplateOutlet=\"sidebarTemplate; context: { item: item, root: true }\"></ng-container>\n }\n\n <ng-template let-item=\"item\" let-root=\"root\" #sidebarTemplate>\n @if (item.children?.length) {\n @if (!item.hidden) {\n <ng-doc-sidebar-category\n [category]=\"item\"\n [expandable]=\"!!item?.expandable\"\n [expanded]=\"\n !!item?.expanded || !item?.expandable || (matchRoute | bind: this | execute: item.route)\n \"\n [isRoot]=\"!!root\"\n [content]=\"categoryContent\">\n </ng-doc-sidebar-category>\n }\n <ng-template #categoryContent>\n @for (child of getNavigation | bind: this | execute: item; track child) {\n <ng-container\n *ngTemplateOutlet=\"\n sidebarTemplate;\n context: { item: child, root: false }\n \"></ng-container>\n }\n </ng-template>\n } @else {\n @if (!item.hidden) {\n <ng-doc-sidebar-item [item]=\"item\"></ng-doc-sidebar-item>\n }\n }\n </ng-template>\n</div>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;padding:var(--ng-doc-sidebar-padding) 0;background:var(--ng-doc-sidebar-background);box-shadow:var(--ng-doc-sidebar-shadow);--ng-doc-sidebar-category-indent: var(--ng-doc-sidebar-horizontal-padding);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-horizontal-padding)}:host .ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocSidebarComponent };
//# sourceMappingURL=ng-doc-app-components-sidebar.mjs.map