npm - @ng-doc/app - Versions diffs - 22.0.0-beta.2 → 22.1.0 - Mend

@ng-doc/app 22.0.0-beta.2 → 22.1.0

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.

Files changed (215) hide show

package/fesm2022/ng-doc-app-components-sidebar.mjs CHANGED Viewed

@@ -1,95 +1,120 @@
 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 { input, booleanAttribute, linkedSignal, inject, ChangeDetectionStrategy, Component, 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 { NgDocExpanderComponent, NgDocExecutePipe, NgDocBindPipe } from '@ng-doc/ui-kit';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, RouterLinkActive, RouterLink } from '@angular/router';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { RouterLinkActive, RouterLink } from '@angular/router';
+import { filter } from 'rxjs/operators';
+let nextId = 0;
+/**
+ * A category of the sidebar: a header row that expands and collapses the pages below it.
+ *
+ * An expandable category opens by itself when the reader navigates to one of its pages.
+ */
 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)) {
+        /** The category. */
+        this.category = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+        /** Whether the category sits at the top level of the sidebar. */
+        this.isRoot = input(false, { ...(ngDevMode ? { debugName: "isRoot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The pages and categories inside the category. */
+        this.content = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /** Whether the reader can collapse the category. A category that cannot is always open. */
+        this.expandable = input(true, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the category starts open. */
+        this.expanded = input(true, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the category is open: it starts from `expanded` and follows the reader. */
+        this.isExpanded = linkedSignal(() => this.expanded() || !this.expandable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+        /** Id of the element that holds the pages, for the header's `aria-controls`. */
+        this.childrenId = `ng-doc-sidebar-category-${nextId++}`;
+        const router = inject(Router);
+        router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => {
+            const route = this.category().route ?? '';
+            if (router.url.includes(route)) {
                 this.expand();
             }
         });
     }
+    /** Opens the category if it is open, or closes it otherwise. */
     toggle() {
-        this.expanded ? this.collapse() : this.expand();
+        this.isExpanded() ? this.collapse() : this.expand();
     }
+    /** Opens the category. */
     expand() {
-        if (this.category?.expandable) {
-            this.expanded = true;
-            this.changeDetectorRef.markForCheck();
+        if (this.expandable()) {
+            this.isExpanded.set(true);
         }
     }
+    /** Closes the category, unless it cannot be collapsed. */
     collapse() {
-        if (this.category?.expandable) {
-            this.expanded = false;
-            this.changeDetectorRef.markForCheck();
+        if (this.expandable()) {
+            this.isExpanded.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidebarCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidebarCategoryComponent, isStandalone: true, selector: "ng-doc-sidebar-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-is-root": "isRoot()", "attr.data-ng-doc-expandable": "expandable()", "attr.data-ng-doc-expanded": "isExpanded()" } }, ngImport: i0, template: "@if (expandable()) {\n  <button\n    type=\"button\"\n    class=\"ng-doc-sidebar-category-button\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"childrenId\"\n    (click)=\"toggle()\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n    <svg\n      class=\"ng-doc-sidebar-category-chevron\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\">\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n} @else {\n  <div class=\"ng-doc-sidebar-category-button\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n  </div>\n}\n<ng-doc-expander [expanded]=\"isExpanded()\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n<ng-template #contentTemplate>\n  <!-- The content comes through a template, so the child components keep their state. -->\n  <div class=\"ng-doc-sidebar-category-children\" [id]=\"childrenId\">\n    <ng-content></ng-content>\n    <ng-container *polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc(var(--ng-doc-sidebar-item-indent) + var(--ng-doc-space-3))}.ng-doc-sidebar-category-button{display:flex;align-items:center;gap:var(--ng-doc-space-2);width:100%;min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border:0;border-radius:var(--ng-doc-radius-md);background:none;color:var(--ng-doc-heading-color);font:inherit;font-weight:600;text-align:left}button.ng-doc-sidebar-category-button{cursor:pointer;transition:background var(--ng-doc-transition)}button.ng-doc-sidebar-category-button:hover{background:var(--ng-doc-hover-background)}button.ng-doc-sidebar-category-button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}.ng-doc-sidebar-category-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-category-chevron{flex:none;margin-left:auto;color:var(--ng-doc-text-muted);transform:rotate(-90deg);transition:transform var(--ng-doc-transition) var(--ng-doc-easing)}[aria-expanded=true]>.ng-doc-sidebar-category-chevron{transform:none}.ng-doc-sidebar-category-children{display:grid;gap:1px;padding-top:2px;--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}@media(prefers-reduced-motion:reduce){.ng-doc-sidebar-category-chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: NgDocExpanderComponent, selector: "ng-doc-expander", inputs: ["expanded", "content", "collapseMod"], outputs: ["expandedChange"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidebarCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-sidebar-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocRouteActiveDirective,
-                        NgDocDotComponent,
-                        NgDocTextComponent,
-                        NgDocIconComponent,
-                        NgDocTextLeftDirective,
-                        NgDocRotatorDirective,
-                        NgDocExpanderComponent,
-                        PolymorpheusOutlet,
-                    ], 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
-            }] } });
+            args: [{ selector: 'ng-doc-sidebar-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocExpanderComponent, PolymorpheusOutlet], host: {
+                        '[attr.data-ng-doc-is-root]': 'isRoot()',
+                        '[attr.data-ng-doc-expandable]': 'expandable()',
+                        '[attr.data-ng-doc-expanded]': 'isExpanded()',
+                    }, template: "@if (expandable()) {\n  <button\n    type=\"button\"\n    class=\"ng-doc-sidebar-category-button\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"childrenId\"\n    (click)=\"toggle()\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n    <svg\n      class=\"ng-doc-sidebar-category-chevron\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\">\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n} @else {\n  <div class=\"ng-doc-sidebar-category-button\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n  </div>\n}\n<ng-doc-expander [expanded]=\"isExpanded()\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n<ng-template #contentTemplate>\n  <!-- The content comes through a template, so the child components keep their state. -->\n  <div class=\"ng-doc-sidebar-category-children\" [id]=\"childrenId\">\n    <ng-content></ng-content>\n    <ng-container *polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc(var(--ng-doc-sidebar-item-indent) + var(--ng-doc-space-3))}.ng-doc-sidebar-category-button{display:flex;align-items:center;gap:var(--ng-doc-space-2);width:100%;min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border:0;border-radius:var(--ng-doc-radius-md);background:none;color:var(--ng-doc-heading-color);font:inherit;font-weight:600;text-align:left}button.ng-doc-sidebar-category-button{cursor:pointer;transition:background var(--ng-doc-transition)}button.ng-doc-sidebar-category-button:hover{background:var(--ng-doc-hover-background)}button.ng-doc-sidebar-category-button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}.ng-doc-sidebar-category-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-category-chevron{flex:none;margin-left:auto;color:var(--ng-doc-text-muted);transform:rotate(-90deg);transition:transform var(--ng-doc-transition) var(--ng-doc-easing)}[aria-expanded=true]>.ng-doc-sidebar-category-chevron{transform:none}.ng-doc-sidebar-category-children{display:grid;gap:1px;padding-top:2px;--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}@media(prefers-reduced-motion:reduce){.ng-doc-sidebar-category-chevron{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], isRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRoot", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }] } });
+/**
+ * A page link in the sidebar, with the status badges of the page.
+ */
 class NgDocSidebarItemComponent {
     constructor() {
+        /** The page. */
         this.item = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        /** Whether the page sits at the top level of the sidebar, beside the categories. */
+        this.isRoot = input(false, { ...(ngDevMode ? { debugName: "isRoot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The badges of the page: one per JSDoc status tag, in the tag's colour (green without one)
+         * and with its text in sentence case.
+         */
         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 };
+                // The tag reads `:<colour> <text>`; a tag without the colour is all text.
+                const [type, text = ''] = status.startsWith(':')
+                    ? status.slice(1).split(/\s+(.+)/)
+                    : ['', status];
+                return { type: (type || 'success'), text: sentenceCase(text) };
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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", "browserUrl", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidebarItemComponent, isStandalone: true, selector: "ng-doc-sidebar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-is-root": "isRoot()" } }, ngImport: i0, template: "<a\n  class=\"ng-doc-sidebar-link\"\n  [routerLink]=\"[item().route]\"\n  routerLinkActive=\"active\"\n  ariaCurrentWhenActive=\"page\">\n  <span class=\"ng-doc-sidebar-link-title\">{{ item().title }}</span>\n  @for (status of statuses(); track $index) {\n    <span class=\"ng-doc-sidebar-status\" [attr.data-ng-doc-color]=\"status.type\">{{\n      status.text\n    }}</span>\n  }\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border-radius:var(--ng-doc-radius-md);color:var(--ng-doc-text);font-weight:400;text-decoration:none;transition:background var(--ng-doc-transition),color var(--ng-doc-transition)}.ng-doc-sidebar-link:hover{background:var(--ng-doc-hover-background);color:var(--ng-doc-heading-color)}.ng-doc-sidebar-link.active{background:var(--ng-doc-primary-soft);color:var(--ng-doc-primary-strong);font-weight:600}.ng-doc-sidebar-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}:host([data-ng-doc-is-root=true]) .ng-doc-sidebar-link:not(.active){color:var(--ng-doc-heading-color);font-weight:600}.ng-doc-sidebar-link-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-status{--_status-hue: var(--ng-doc-success);display:inline-flex;flex:none;align-items:center;height:18px;margin-left:auto;padding:0 6px;border-radius:var(--ng-doc-radius-full);color:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-strong),var(--ng-doc-heading-color));background:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-chip),var(--ng-doc-background));font-size:11px;line-height:1;font-weight:500;white-space:nowrap}.ng-doc-sidebar-status+.ng-doc-sidebar-status{margin-left:var(--ng-doc-space-1)}.ng-doc-sidebar-status[data-ng-doc-color=primary]{--_status-hue: var(--ng-doc-primary)}.ng-doc-sidebar-status[data-ng-doc-color=info]{--_status-hue: var(--ng-doc-info)}.ng-doc-sidebar-status[data-ng-doc-color=warning]{--_status-hue: var(--ng-doc-warning)}.ng-doc-sidebar-status[data-ng-doc-color=alert]{--_status-hue: var(--ng-doc-alert)}\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", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidebarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", 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"] }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+            args: [{ selector: 'ng-doc-sidebar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink], host: {
+                        '[attr.data-ng-doc-is-root]': 'isRoot()',
+                    }, template: "<a\n  class=\"ng-doc-sidebar-link\"\n  [routerLink]=\"[item().route]\"\n  routerLinkActive=\"active\"\n  ariaCurrentWhenActive=\"page\">\n  <span class=\"ng-doc-sidebar-link-title\">{{ item().title }}</span>\n  @for (status of statuses(); track $index) {\n    <span class=\"ng-doc-sidebar-status\" [attr.data-ng-doc-color]=\"status.type\">{{\n      status.text\n    }}</span>\n  }\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border-radius:var(--ng-doc-radius-md);color:var(--ng-doc-text);font-weight:400;text-decoration:none;transition:background var(--ng-doc-transition),color var(--ng-doc-transition)}.ng-doc-sidebar-link:hover{background:var(--ng-doc-hover-background);color:var(--ng-doc-heading-color)}.ng-doc-sidebar-link.active{background:var(--ng-doc-primary-soft);color:var(--ng-doc-primary-strong);font-weight:600}.ng-doc-sidebar-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}:host([data-ng-doc-is-root=true]) .ng-doc-sidebar-link:not(.active){color:var(--ng-doc-heading-color);font-weight:600}.ng-doc-sidebar-link-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-status{--_status-hue: var(--ng-doc-success);display:inline-flex;flex:none;align-items:center;height:18px;margin-left:auto;padding:0 6px;border-radius:var(--ng-doc-radius-full);color:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-strong),var(--ng-doc-heading-color));background:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-chip),var(--ng-doc-background));font-size:11px;line-height:1;font-weight:500;white-space:nowrap}.ng-doc-sidebar-status+.ng-doc-sidebar-status{margin-left:var(--ng-doc-space-1)}.ng-doc-sidebar-status[data-ng-doc-color=primary]{--_status-hue: var(--ng-doc-primary)}.ng-doc-sidebar-status[data-ng-doc-color=info]{--_status-hue: var(--ng-doc-info)}.ng-doc-sidebar-status[data-ng-doc-color=warning]{--_status-hue: var(--ng-doc-warning)}.ng-doc-sidebar-status[data-ng-doc-color=alert]{--_status-hue: var(--ng-doc-alert)}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRoot", required: false }] }] } });
+/**
+ * Writes a badge text in sentence case ("NEW STYLES" becomes "New styles").
+ * @param text - The text of the status tag.
+ * @returns The text in sentence case.
+ */
+function sentenceCase(text) {
+    const lower = text.trim().toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+}
 class NgDocSidebarComponent {
     constructor() {
@@ -102,10 +127,10 @@ class NgDocSidebarComponent {
     matchRoute(route) {
         return this.location.path().includes(route ?? '', 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidebarComponent, isStandalone: true, selector: "ng-doc-sidebar", ngImport: i0, template: "<nav class=\"ng-doc-side-bar-wrapper\" aria-label=\"Documentation\">\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\" [isRoot]=\"!!root\"></ng-doc-sidebar-item>\n      }\n    }\n  </ng-template>\n</nav>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;background:var(--ng-doc-sidebar-background);border-right:1px solid var(--ng-doc-border-color);box-shadow:var(--ng-doc-sidebar-shadow);font-family:var(--ng-doc-font-family);font-size:var(--ng-doc-text-sm-size);line-height:20px;--ng-doc-sidebar-item-indent: var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%;padding:calc(var(--ng-doc-sidebar-padding) + var(--ng-doc-space-1)) calc(var(--ng-doc-sidebar-horizontal-padding) / 2) calc(var(--ng-doc-sidebar-padding) * 2.5)}.ng-doc-side-bar-wrapper>*+*,ng-doc-sidebar-category+ng-doc-sidebar-category{margin-top:2px}.ng-doc-side-bar-wrapper ng-doc-sidebar-category[data-ng-doc-expanded=true]+*,.ng-doc-side-bar-wrapper *+ng-doc-sidebar-category[data-ng-doc-expanded=true]{margin-top:var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper ng-doc-sidebar-category ng-doc-sidebar-item+ng-doc-sidebar-item{margin-top:0}\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", "isRoot"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -113,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         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"] }]
+                    ], template: "<nav class=\"ng-doc-side-bar-wrapper\" aria-label=\"Documentation\">\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\" [isRoot]=\"!!root\"></ng-doc-sidebar-item>\n      }\n    }\n  </ng-template>\n</nav>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;background:var(--ng-doc-sidebar-background);border-right:1px solid var(--ng-doc-border-color);box-shadow:var(--ng-doc-sidebar-shadow);font-family:var(--ng-doc-font-family);font-size:var(--ng-doc-text-sm-size);line-height:20px;--ng-doc-sidebar-item-indent: var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%;padding:calc(var(--ng-doc-sidebar-padding) + var(--ng-doc-space-1)) calc(var(--ng-doc-sidebar-horizontal-padding) / 2) calc(var(--ng-doc-sidebar-padding) * 2.5)}.ng-doc-side-bar-wrapper>*+*,ng-doc-sidebar-category+ng-doc-sidebar-category{margin-top:2px}.ng-doc-side-bar-wrapper ng-doc-sidebar-category[data-ng-doc-expanded=true]+*,.ng-doc-side-bar-wrapper *+ng-doc-sidebar-category[data-ng-doc-expanded=true]{margin-top:var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper ng-doc-sidebar-category ng-doc-sidebar-item+ng-doc-sidebar-item{margin-top:0}\n"] }]
         }] });
 /**

package/fesm2022/ng-doc-app-components-sidebar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-app-components-sidebar.mjs","sources":["../../../../libs/app/components/sidebar/sidebar-category/sidebar-category.component.ts","../../../../libs/app/components/sidebar/sidebar-category/sidebar-category.component.html","../../../../libs/app/components/sidebar/sidebar-item/sidebar-item.component.ts","../../../../libs/app/components/sidebar/sidebar-item/sidebar-item.component.html","../../../../libs/app/components/sidebar/sidebar.component.ts","../../../../libs/app/components/sidebar/sidebar.component.html","../../../../libs/app/components/sidebar/ng-doc-app-components-sidebar.ts"],"sourcesContent":["import { Location } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n HostBinding,\n inject,\n Input,\n} from '@angular/core';\nimport { NgDocRouteActiveDirective } from '@ng-doc/app/directives/route-active';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport {\n NgDocContent,\n NgDocDotComponent,\n NgDocExpanderComponent,\n NgDocIconComponent,\n NgDocRotatorDirective,\n NgDocTextComponent,\n NgDocTextLeftDirective,\n} from '@ng-doc/ui-kit';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\n@Component({\n selector: 'ng-doc-sidebar-category',\n templateUrl: './sidebar-category.component.html',\n styleUrls: ['./sidebar-category.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgDocRouteActiveDirective,\n NgDocDotComponent,\n NgDocTextComponent,\n NgDocIconComponent,\n NgDocTextLeftDirective,\n NgDocRotatorDirective,\n NgDocExpanderComponent,\n PolymorpheusOutlet,\n ],\n})\nexport class NgDocSidebarCategoryComponent {\n @Input({ required: true })\n category!: NgDocNavigation;\n\n @Input()\n @HostBinding('attr.data-ng-doc-is-root')\n isRoot: boolean = false;\n\n @Input()\n content: NgDocContent = '';\n\n @Input()\n @HostBinding('attr.data-ng-doc-expandable')\n expandable: boolean = true;\n\n @Input()\n expanded: boolean = true;\n\n protected readonly location = inject(Location);\n protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n constructor() {\n this.location.onUrlChange(() => {\n if (this.location.path().includes(this.category.route ?? '', 0)) {\n this.expand();\n }\n });\n }\n\n toggle(): void {\n this.expanded ? this.collapse() : this.expand();\n }\n\n expand(): void {\n if (this.category?.expandable) {\n this.expanded = true;\n this.changeDetectorRef.markForCheck();\n }\n }\n\n collapse(): void {\n if (this.category?.expandable) {\n this.expanded = false;\n this.changeDetectorRef.markForCheck();\n }\n }\n}\n","<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","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport {\n NgDocColor,\n NgDocDotComponent,\n NgDocTagComponent,\n NgDocTextComponent,\n} from '@ng-doc/ui-kit';\n\n@Component({\n selector: 'ng-doc-sidebar-item',\n templateUrl: './sidebar-item.component.html',\n styleUrls: ['./sidebar-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RouterLinkActive, RouterLink, NgDocDotComponent, NgDocTextComponent, NgDocTagComponent],\n})\nexport class NgDocSidebarItemComponent {\n item = input.required<NgDocNavigation>();\n statuses = computed(() => {\n const statuses = this.item().metadata?.tags['status'] ?? [];\n\n return statuses.map((status) => {\n const [type, text] = status.split(/\\s+(.+)/);\n\n return { type: type.replace(/^:/, '') as NgDocColor, text };\n });\n });\n}\n","<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","import { Location, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport { NG_DOC_CONTEXT } from '@ng-doc/app/tokens';\nimport { NgDocBindPipe, NgDocExecutePipe } from '@ng-doc/ui-kit';\n\nimport { NgDocSidebarCategoryComponent } from './sidebar-category/sidebar-category.component';\nimport { NgDocSidebarItemComponent } from './sidebar-item/sidebar-item.component';\n\n@Component({\n selector: 'ng-doc-sidebar',\n templateUrl: './sidebar.component.html',\n styleUrls: ['./sidebar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n NgDocSidebarCategoryComponent,\n NgDocSidebarItemComponent,\n NgDocExecutePipe,\n NgDocBindPipe,\n ],\n})\nexport class NgDocSidebarComponent {\n protected readonly location = inject(Location);\n protected readonly context = inject(NG_DOC_CONTEXT);\n\n getNavigation(nav?: NgDocNavigation): NgDocNavigation[] {\n return nav ? nav.children ?? [] : this.context.navigation;\n }\n\n matchRoute(route: string): boolean {\n return this.location.path().includes(route ?? '', 0);\n }\n}\n","<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","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ng-doc-app-components-sidebar.mjs","sources":["../../../../libs/app/components/sidebar/sidebar-category/sidebar-category.component.ts","../../../../libs/app/components/sidebar/sidebar-category/sidebar-category.component.html","../../../../libs/app/components/sidebar/sidebar-item/sidebar-item.component.ts","../../../../libs/app/components/sidebar/sidebar-item/sidebar-item.component.html","../../../../libs/app/components/sidebar/sidebar.component.ts","../../../../libs/app/components/sidebar/sidebar.component.html","../../../../libs/app/components/sidebar/ng-doc-app-components-sidebar.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n input,\n linkedSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport { NgDocContent, NgDocExpanderComponent } from '@ng-doc/ui-kit';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\nimport { filter } from 'rxjs/operators';\n\nlet nextId = 0;\n\n/*\n A category of the sidebar: a header row that expands and collapses the pages below it.\n \n An expandable category opens by itself when the reader navigates to one of its pages.\n /\n@Component({\n selector: 'ng-doc-sidebar-category',\n templateUrl: './sidebar-category.component.html',\n styleUrls: ['./sidebar-category.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgDocExpanderComponent, PolymorpheusOutlet],\n host: {\n '[attr.data-ng-doc-is-root]': 'isRoot()',\n '[attr.data-ng-doc-expandable]': 'expandable()',\n '[attr.data-ng-doc-expanded]': 'isExpanded()',\n },\n})\nexport class NgDocSidebarCategoryComponent {\n /* The category. /\n readonly category = input.required<NgDocNavigation>();\n\n /* Whether the category sits at the top level of the sidebar. /\n readonly isRoot = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n /* The pages and categories inside the category. /\n readonly content = input<NgDocContent>('');\n\n /* Whether the reader can collapse the category. A category that cannot is always open. /\n readonly expandable = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n /* Whether the category starts open. /\n readonly expanded = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n /* Whether the category is open: it starts from `expanded` and follows the reader. /\n readonly isExpanded = linkedSignal(() => this.expanded() \|\| !this.expandable());\n\n /* Id of the element that holds the pages, for the header's `aria-controls`. /\n protected readonly childrenId = `ng-doc-sidebar-category-${nextId++}`;\n\n constructor() {\n const router = inject(Router);\n\n router.events\n .pipe(\n filter((event) => event instanceof NavigationEnd),\n takeUntilDestroyed(),\n )\n .subscribe(() => {\n const route: string = this.category().route ?? '';\n\n if (router.url.includes(route)) {\n this.expand();\n }\n });\n }\n\n /* Opens the category if it is open, or closes it otherwise. /\n toggle(): void {\n this.isExpanded() ? this.collapse() : this.expand();\n }\n\n /* Opens the category. /\n expand(): void {\n if (this.expandable()) {\n this.isExpanded.set(true);\n }\n }\n\n /* Closes the category, unless it cannot be collapsed. /\n collapse(): void {\n if (this.expandable()) {\n this.isExpanded.set(false);\n }\n }\n}\n","@if (expandable()) {\n <button\n type=\"button\"\n class=\"ng-doc-sidebar-category-button\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"childrenId\"\n (click)=\"toggle()\">\n <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n <svg\n class=\"ng-doc-sidebar-category-chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </button>\n} @else {\n <div class=\"ng-doc-sidebar-category-button\">\n <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n </div>\n}\n<ng-doc-expander [expanded]=\"isExpanded()\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n<ng-template #contentTemplate>\n <!-- The content comes through a template, so the child components keep their state. -->\n <div class=\"ng-doc-sidebar-category-children\" [id]=\"childrenId\">\n <ng-content></ng-content>\n <ng-container polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n </div>\n</ng-template>\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport { NgDocColor } from '@ng-doc/ui-kit';\n\n/** A status badge of a sidebar item, from the page's JSDoc status tag. /\nexport interface NgDocSidebarItemStatus {\n /* Colour of the badge. /\n type: NgDocColor;\n /* Text of the badge, in sentence case. /\n text: string;\n}\n\n/\n A page link in the sidebar, with the status badges of the page.\n /\n@Component({\n selector: 'ng-doc-sidebar-item',\n templateUrl: './sidebar-item.component.html',\n styleUrls: ['./sidebar-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RouterLinkActive, RouterLink],\n host: {\n '[attr.data-ng-doc-is-root]': 'isRoot()',\n },\n})\nexport class NgDocSidebarItemComponent {\n /* The page. /\n readonly item = input.required<NgDocNavigation>();\n\n /* Whether the page sits at the top level of the sidebar, beside the categories. /\n readonly isRoot = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n /\n The badges of the page: one per JSDoc status tag, in the tag's colour (green without one)\n * and with its text in sentence case.\n /\n readonly statuses = computed<NgDocSidebarItemStatus[]>(() => {\n const statuses: string[] = this.item().metadata?.tags['status'] ?? [];\n\n return statuses.map((status: string) => {\n // The tag reads `:<colour> <text>`; a tag without the colour is all text.\n const [type, text = ''] = status.startsWith(':')\n ? status.slice(1).split(/\\s+(.+)/)\n : ['', status];\n\n return { type: (type \|\| 'success') as NgDocColor, text: sentenceCase(text) };\n });\n });\n}\n\n/\n Writes a badge text in sentence case (\"NEW STYLES\" becomes \"New styles\").\n * @param text - The text of the status tag.\n * @returns The text in sentence case.\n /\nfunction sentenceCase(text: string): string {\n const lower: string = text.trim().toLowerCase();\n\n return lower.charAt(0).toUpperCase() + lower.slice(1);\n}\n","<a\n class=\"ng-doc-sidebar-link\"\n [routerLink]=\"[item().route]\"\n routerLinkActive=\"active\"\n ariaCurrentWhenActive=\"page\">\n <span class=\"ng-doc-sidebar-link-title\">{{ item().title }}</span>\n @for (status of statuses(); track $index) {\n <span class=\"ng-doc-sidebar-status\" [attr.data-ng-doc-color]=\"status.type\">{{\n status.text\n }}</span>\n }\n</a>\n","import { Location, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport { NG_DOC_CONTEXT } from '@ng-doc/app/tokens';\nimport { NgDocBindPipe, NgDocExecutePipe } from '@ng-doc/ui-kit';\n\nimport { NgDocSidebarCategoryComponent } from './sidebar-category/sidebar-category.component';\nimport { NgDocSidebarItemComponent } from './sidebar-item/sidebar-item.component';\n\n@Component({\n selector: 'ng-doc-sidebar',\n templateUrl: './sidebar.component.html',\n styleUrls: ['./sidebar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n NgDocSidebarCategoryComponent,\n NgDocSidebarItemComponent,\n NgDocExecutePipe,\n NgDocBindPipe,\n ],\n})\nexport class NgDocSidebarComponent {\n protected readonly location = inject(Location);\n protected readonly context = inject(NG_DOC_CONTEXT);\n\n getNavigation(nav?: NgDocNavigation): NgDocNavigation[] {\n return nav ? nav.children ?? [] : this.context.navigation;\n }\n\n matchRoute(route: string): boolean {\n return this.location.path().includes(route ?? '', 0);\n }\n}\n","<nav class=\"ng-doc-side-bar-wrapper\" aria-label=\"Documentation\">\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\" [isRoot]=\"!!root\"></ng-doc-sidebar-item>\n }\n }\n </ng-template>\n</nav>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAeA,IAAI,MAAM,GAAG,CAAC;AAEd;;;;AAIG;MAaU,6BAA6B,CAAA;AAsBxC,IAAA,WAAA,GAAA;;QApBS,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ;qFAAmB;;QAG5C,IAAA,CAAA,MAAM,GAAG,KAAK,CAAmB,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;QAGxE,IAAA,CAAA,OAAO,GAAG,KAAK,CAAe,EAAE;oFAAC;;QAGjC,IAAA,CAAA,UAAU,GAAG,KAAK,CAAmB,IAAI,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;QAG3E,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAmB,IAAI,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;AAGzE,QAAA,IAAA,CAAA,UAAU,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;uFAAC;;AAG5D,QAAA,IAAA,CAAA,UAAU,GAAG,CAAA,wBAAA,EAA2B,MAAM,EAAE,EAAE;AAGnE,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AAE7B,QAAA,MAAM,CAAC;AACJ,aAAA,IAAI,CACH,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,YAAY,aAAa,CAAC,EACjD,kBAAkB,EAAE;aAErB,SAAS,CAAC,MAAK;YACd,MAAM,KAAK,GAAW,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE;YAEjD,IAAI,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;gBAC9B,IAAI,CAAC,MAAM,EAAE;YACf;AACF,QAAA,CAAC,CAAC;IACN;;IAGA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;IACrD;;IAGA,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;QAC3B;IACF;;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;QAC5B;IACF;8GAxDW,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,0BAAA,EAAA,UAAA,EAAA,6BAAA,EAAA,cAAA,EAAA,2BAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClC1C,kuCAmCA,EAAA,MAAA,EAAA,CAAA,27CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,sBAAsB,yIAAE,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAOzC,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAZzC,SAAS;+BACE,yBAAyB,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,EAAA,IAAA,EAC/C;AACJ,wBAAA,4BAA4B,EAAE,UAAU;AACxC,wBAAA,+BAA+B,EAAE,cAAc;AAC/C,wBAAA,6BAA6B,EAAE,cAAc;AAC9C,qBAAA,EAAA,QAAA,EAAA,kuCAAA,EAAA,MAAA,EAAA,CAAA,27CAAA,CAAA,EAAA;;;AEbH;;AAEG;MAWU,yBAAyB,CAAA;AAVtC,IAAA,WAAA,GAAA;;QAYW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ;iFAAmB;;QAGxC,IAAA,CAAA,MAAM,GAAG,KAAK,CAAmB,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEjF;;;AAGG;AACM,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAA2B,MAAK;AAC1D,YAAA,MAAM,QAAQ,GAAa,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AAErE,YAAA,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAc,KAAI;;AAErC,gBAAA,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG;sBAC3C,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS;AACjC,sBAAE,CAAC,EAAE,EAAE,MAAM,CAAC;AAEhB,gBAAA,OAAO,EAAE,IAAI,GAAG,IAAI,IAAI,SAAS,CAAe,EAAE,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE;AAC9E,YAAA,CAAC,CAAC;QACJ,CAAC;qFAAC;AACH,IAAA;8GAvBY,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,0BAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChCtC,sYAYA,EAAA,MAAA,EAAA,CAAA,41DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDeY,gBAAgB,8MAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK3B,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAA,IAAA,EACjC;AACJ,wBAAA,4BAA4B,EAAE,UAAU;AACzC,qBAAA,EAAA,QAAA,EAAA,sYAAA,EAAA,MAAA,EAAA,CAAA,41DAAA,CAAA,EAAA;;AA2BH;;;;AAIG;AACH,SAAS,YAAY,CAAC,IAAY,EAAA;IAChC,MAAM,KAAK,GAAW,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;AAE/C,IAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACvD;;ME5Ca,qBAAqB,CAAA;AAblC,IAAA,WAAA,GAAA;AAcqB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC;AASpD,IAAA;AAPC,IAAA,aAAa,CAAC,GAAqB,EAAA;AACjC,QAAA,OAAO,GAAG,GAAG,GAAG,CAAC,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU;IAC3D;AAEA,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD;8GAVW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtBlC,yvCAmCA,EAAA,MAAA,EAAA,CAAA,m+BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDpBI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,6BAA6B,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC7B,yBAAyB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACzB,gBAAgB,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAChB,aAAa,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGJ,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,gBAAgB;wBAChB,6BAA6B;wBAC7B,yBAAyB;wBACzB,gBAAgB;wBAChB,aAAa;AACd,qBAAA,EAAA,QAAA,EAAA,yvCAAA,EAAA,MAAA,EAAA,CAAA,m+BAAA,CAAA,EAAA;;;AEpBH;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-tabs.mjs CHANGED Viewed

@@ -1,26 +1,50 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocTabGroupComponent, NgDocTabComponent, NgDocIconComponent, NgDocExecutePipe } from '@ng-doc/ui-kit';
+/**
+ * Tabs of a page: grouped code blocks, or any content that Markdown wraps in
+ * `<ng-doc-tab group="…" name="…">` elements.
+ */
 class NgDocTabsComponent {
     constructor() {
-        this.tabs = [];
+        /** The tabs; their content is moved into the open panel. */
+        this.tabs = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        /** Index of the tab that opens first: the one marked active, or the first. */
+        this.activeIndex = computed(() => Math.max(this.tabs().findIndex((tab) => tab.active), 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the tabs hold page content rather than a code group. A code group has one code block
+         * per tab and is drawn as one framed code surface; content tabs are only a tab bar over their
+         * content, so a framed demo or code block inside them doesn't sit in a second frame.
+         */
+        this.contentTabs = computed(() => this.tabs().some((tab) => tab.content.childElementCount !== 1 ||
+            !tab.content.firstElementChild?.matches('ng-doc-code, pre')), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTabs" }] : /* istanbul ignore next */ []));
     }
-    getActiveIndex(tabs) {
-        return Math.max(tabs.findIndex((tab) => tab.active), 0);
+    ngOnInit() {
+        // The tabs processor leaves the contents on the page until every processor has run on them;
+        // only the open tab's content is shown, in the panel.
+        this.tabs().forEach((tab) => tab.content.remove());
     }
+    /**
+     * Moves a tab's content into its panel.
+     * @param element - Content of the tab.
+     * @param parent - The panel element.
+     */
     appendElement(element, parent) {
         parent.appendChild(element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocTabsComponent, isStandalone: true, selector: "ng-doc-tabs", inputs: { tabs: "tabs" }, ngImport: i0, template: "<ng-doc-tab-group [openedTab]=\"getActiveIndex | execute: tabs\">\n  @for (tab of tabs; track tab; let i = $index) {\n    <ng-doc-tab [label]=\"label\" [content]=\"content\" [id]=\"i\">\n      <ng-template #label>\n        @if (tab.icon) {\n          <ng-doc-icon [customIcon]=\"tab.icon\"></ng-doc-icon>\n        }\n        {{ tab.title }}\n      </ng-template>\n      <ng-template #content>\n        <div #element>\n          {{ appendElement | execute: tab.content : element }}\n        </div>\n      </ng-template>\n    </ng-doc-tab>\n  }\n</ng-doc-tab-group>\n", styles: [":host{display:block;border-radius:var(--ng-doc-tabs-border-radius);border:var(--ng-doc-tabs-border);margin:var(--ng-doc-tabs-margin);overflow:hidden;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-header-background: var(--ng-doc-base-2)}:host ng-doc-icon{margin-right:calc(var(--ng-doc-base-gutter) / 2)}\n"], dependencies: [{ kind: "component", type: NgDocTabGroupComponent, selector: "ng-doc-tab-group", inputs: ["openedTab"] }, { kind: "component", type: NgDocTabComponent, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: ["label", "id", "content"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocTabsComponent, isStandalone: true, selector: "ng-doc-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng-doc-content-tabs": "contentTabs()" } }, ngImport: i0, template: "<ng-doc-tab-group [openedTab]=\"activeIndex()\" [appearance]=\"contentTabs() ? 'plain' : 'framed'\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    <ng-doc-tab [label]=\"label\" [content]=\"content\" [id]=\"i\">\n      <ng-template #label>\n        @if (tab.icon) {\n          <ng-doc-icon [customIcon]=\"tab.icon\"></ng-doc-icon>\n        }\n        {{ tab.title }}\n      </ng-template>\n      <ng-template #content>\n        <div #element [class.ng-doc-tabs-content]=\"contentTabs()\">\n          {{ appendElement | execute: tab.content : element }}\n        </div>\n      </ng-template>\n    </ng-doc-tab>\n  }\n</ng-doc-tab-group>\n", styles: [":host{display:block;margin:var(--ng-doc-tabs-margin)}:host(:not(.ng-doc-content-tabs)){border-radius:var(--ng-doc-tabs-border-radius);border:var(--ng-doc-tabs-border, 1px solid var(--ng-doc-border-color));overflow:hidden;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-background: var(--ng-doc-code-background);--ng-doc-tab-group-header-background: var(--ng-doc-code-background);--ng-doc-tab-group-tabs-background: var(--ng-doc-code-header-background, transparent)}.ng-doc-tabs-content ::ng-deep>*>:first-child{margin-top:0}.ng-doc-tabs-content ::ng-deep>*>:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: NgDocTabGroupComponent, selector: "ng-doc-tab-group", inputs: ["appearance", "openedTab"] }, { kind: "component", type: NgDocTabComponent, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: ["label", "id", "content"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-tabs', imports: [NgDocTabGroupComponent, NgDocTabComponent, NgDocExecutePipe, NgDocIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-doc-tab-group [openedTab]=\"getActiveIndex | execute: tabs\">\n  @for (tab of tabs; track tab; let i = $index) {\n    <ng-doc-tab [label]=\"label\" [content]=\"content\" [id]=\"i\">\n      <ng-template #label>\n        @if (tab.icon) {\n          <ng-doc-icon [customIcon]=\"tab.icon\"></ng-doc-icon>\n        }\n        {{ tab.title }}\n      </ng-template>\n      <ng-template #content>\n        <div #element>\n          {{ appendElement | execute: tab.content : element }}\n        </div>\n      </ng-template>\n    </ng-doc-tab>\n  }\n</ng-doc-tab-group>\n", styles: [":host{display:block;border-radius:var(--ng-doc-tabs-border-radius);border:var(--ng-doc-tabs-border);margin:var(--ng-doc-tabs-margin);overflow:hidden;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-header-background: var(--ng-doc-base-2)}:host ng-doc-icon{margin-right:calc(var(--ng-doc-base-gutter) / 2)}\n"] }]
-        }], propDecorators: { tabs: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-doc-tabs', imports: [NgDocTabGroupComponent, NgDocTabComponent, NgDocExecutePipe, NgDocIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ng-doc-content-tabs]': 'contentTabs()',
+                    }, template: "<ng-doc-tab-group [openedTab]=\"activeIndex()\" [appearance]=\"contentTabs() ? 'plain' : 'framed'\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    <ng-doc-tab [label]=\"label\" [content]=\"content\" [id]=\"i\">\n      <ng-template #label>\n        @if (tab.icon) {\n          <ng-doc-icon [customIcon]=\"tab.icon\"></ng-doc-icon>\n        }\n        {{ tab.title }}\n      </ng-template>\n      <ng-template #content>\n        <div #element [class.ng-doc-tabs-content]=\"contentTabs()\">\n          {{ appendElement | execute: tab.content : element }}\n        </div>\n      </ng-template>\n    </ng-doc-tab>\n  }\n</ng-doc-tab-group>\n", styles: [":host{display:block;margin:var(--ng-doc-tabs-margin)}:host(:not(.ng-doc-content-tabs)){border-radius:var(--ng-doc-tabs-border-radius);border:var(--ng-doc-tabs-border, 1px solid var(--ng-doc-border-color));overflow:hidden;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-background: var(--ng-doc-code-background);--ng-doc-tab-group-header-background: var(--ng-doc-code-background);--ng-doc-tab-group-tabs-background: var(--ng-doc-code-header-background, transparent)}.ng-doc-tabs-content ::ng-deep>*>:first-child{margin-top:0}.ng-doc-tabs-content ::ng-deep>*>:last-child{margin-bottom:0}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-app-components-tabs.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-app-components-tabs.mjs","sources":["../../../../libs/app/components/tabs/tabs.component.ts","../../../../libs/app/components/tabs/tabs.component.html","../../../../libs/app/components/tabs/ng-doc-app-components-tabs.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ~~Input~~ } from '@angular/core';\nimport { NgDocTab } from '@ng-doc/app/interfaces';\nimport {\n NgDocExecutePipe,\n NgDocIconComponent,\n NgDocTabComponent,\n NgDocTabGroupComponent,\n} from '@ng-doc/ui-kit';\n\n@Component({\n selector: 'ng-doc-tabs',\n imports: [NgDocTabGroupComponent, NgDocTabComponent, NgDocExecutePipe, NgDocIconComponent],\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabsComponent {\n ~~@Input()\~~n tabs: NgDocTab[] = [];\n\n ~~getActiveIndex(tabs~~: ~~NgDocTab[])~~: number {\n ~~return~~ Math.max(\n tabs.findIndex((tab: NgDocTab) => tab.active),\n 0,\n );\n }\n\n appendElement(element: Element, parent: Element): void {\n parent.appendChild(element);\n }\n}\n","<ng-doc-tab-group [openedTab]=\"~~getActiveIndex~~ \| ~~execute~~: ~~tabs~~\">\n @for (tab of tabs; track tab; let i = $index) {\n <ng-doc-tab [label]=\"label\" [content]=\"content\" [id]=\"i\">\n <ng-template #label>\n @if (tab.icon) {\n <ng-doc-icon [customIcon]=\"tab.icon\"></ng-doc-icon>\n }\n {{ tab.title }}\n </ng-template>\n <ng-template #content>\n <div #element>\n {{ appendElement \| execute: tab.content : element }}\n </div>\n </ng-template>\n </ng-doc-tab>\n }\n</ng-doc-tab-group>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;~~MAgBa~~,kBAAkB,CAAA;~~AAP~~/B,IAAA,WAAA,GAAA~~;QASE~~,IAAA,CAAA,IAAI,~~GAAe~~,EAAE;~~AAYtB~~,~~IAAA;AAVC~~,IAAA,~~cAAc~~,~~CAAC~~,~~IAAgB~~,~~EAAA;QAC7B~~,~~OAAO~~,IAAI,CAAC,GAAG,~~CACb~~,IAAI,CAAC,SAAS,CAAC,CAAC,GAAa,KAAK,GAAG,CAAC,MAAM,CAAC,~~EAC7C~~,CAAC,CACF;~~IACH~~;~~IAEA~~,aAAa,CAAC,OAAgB,EAAE,MAAe,EAAA;AAC7C,QAAA,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC;IAC7B;~~8GAbW~~,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EChB~~/B,~~ujBAiBA~~,EAAA,MAAA,EAAA,CAAA,~~yWAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDNY~~,sBAAsB,~~oFAAE~~,iBAAiB,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAoB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAApC,gBAAgB,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAK1D~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;~~kBAP9B~~,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EACd,CAAC,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EAAA,eAAA,EAGzE,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,~~ujBAAA~~,EAAA,MAAA,EAAA,CAAA,~~yWAAA~~,CAAA,EAAA~~;;sBAG9C~~;;;~~AEjBH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-app-components-tabs.mjs","sources":["../../../../libs/app/components/tabs/tabs.component.ts","../../../../libs/app/components/tabs/tabs.component.html","../../../../libs/app/components/tabs/ng-doc-app-components-tabs.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, OnInit, Signal } from '@angular/core';\nimport { NgDocTab } from '@ng-doc/app/interfaces';\nimport {\n NgDocExecutePipe,\n NgDocIconComponent,\n NgDocTabComponent,\n NgDocTabGroupComponent,\n} from '@ng-doc/ui-kit';\n\n/*\n Tabs of a page: grouped code blocks, or any content that Markdown wraps in\n * `<ng-doc-tab group=\"…\" name=\"…\">` elements.\n /\n@Component({\n selector: 'ng-doc-tabs',\n imports: [NgDocTabGroupComponent, NgDocTabComponent, NgDocExecutePipe, NgDocIconComponent],\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.ng-doc-content-tabs]': 'contentTabs()',\n },\n})\nexport class NgDocTabsComponent implements OnInit {\n /* The tabs; their content is moved into the open panel. /\n readonly tabs = input<NgDocTab[]>([]);\n\n /* Index of the tab that opens first: the one marked active, or the first. /\n protected readonly activeIndex: Signal<number> = computed(() =>\n Math.max(\n this.tabs().findIndex((tab: NgDocTab) => tab.active),\n 0,\n ),\n );\n\n /\n Whether the tabs hold page content rather than a code group. A code group has one code block\n * per tab and is drawn as one framed code surface; content tabs are only a tab bar over their\n * content, so a framed demo or code block inside them doesn't sit in a second frame.\n /\n protected readonly contentTabs: Signal<boolean> = computed(() =>\n this.tabs().some(\n (tab: NgDocTab) =>\n tab.content.childElementCount !== 1 \|\|\n !tab.content.firstElementChild?.matches('ng-doc-code, pre'),\n ),\n );\n\n ngOnInit(): void {\n // The tabs processor leaves the contents on the page until every processor has run on them;\n // only the open tab's content is shown, in the panel.\n this.tabs().forEach((tab: NgDocTab) => tab.content.remove());\n }\n\n /\n Moves a tab's content into its panel.\n * @param element - Content of the tab.\n * @param parent - The panel element.\n /\n appendElement(element: Element, parent: Element): void {\n parent.appendChild(element);\n }\n}\n","<ng-doc-tab-group [openedTab]=\"activeIndex()\" [appearance]=\"contentTabs() ? 'plain' : 'framed'\">\n @for (tab of tabs(); track tab; let i = $index) {\n <ng-doc-tab [label]=\"label\" [content]=\"content\" [id]=\"i\">\n <ng-template #label>\n @if (tab.icon) {\n <ng-doc-icon [customIcon]=\"tab.icon\"></ng-doc-icon>\n }\n {{ tab.title }}\n </ng-template>\n <ng-template #content>\n <div #element [class.ng-doc-tabs-content]=\"contentTabs()\">\n {{ appendElement \| execute: tab.content : element }}\n </div>\n </ng-template>\n </ng-doc-tab>\n }\n</ng-doc-tab-group>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;AASA;;;AAGG;MAWU,kBAAkB,CAAA;AAV/B,IAAA,WAAA,GAAA;;QAYW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAa,EAAE;iFAAC;;AAGlB,QAAA,IAAA,CAAA,WAAW,GAAmB,QAAQ,CAAC,MACxD,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,GAAa,KAAK,GAAG,CAAC,MAAM,CAAC,EACpD,CAAC,CACF;wFACF;AAED;;;;AAIG;QACgB,IAAA,CAAA,WAAW,GAAoB,QAAQ,CAAC,MACzD,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CACd,CAAC,GAAa,KACZ,GAAG,CAAC,OAAO,CAAC,iBAAiB,KAAK,CAAC;YACnC,CAAC,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAC9D;wFACF;AAgBF,IAAA;IAdC,QAAQ,GAAA;;;AAGN,QAAA,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,CAAC,GAAa,KAAK,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAC9D;AAEA;;;;AAIG;IACH,aAAa,CAAC,OAAgB,EAAE,MAAe,EAAA;AAC7C,QAAA,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC;IAC7B;8GAtCW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvB/B,0oBAiBA,EAAA,MAAA,EAAA,CAAA,koBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDFY,sBAAsB,kGAAE,iBAAiB,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAoB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAApC,gBAAgB,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAQ1D,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EACd,CAAC,sBAAsB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EAAA,eAAA,EAGzE,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,6BAA6B,EAAE,eAAe;AAC/C,qBAAA,EAAA,QAAA,EAAA,0oBAAA,EAAA,MAAA,EAAA,CAAA,koBAAA,CAAA,EAAA;;;AErBH;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-theme-toggle.mjs CHANGED Viewed

@@ -1,36 +1,48 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocThemeService } from '@ng-doc/app/services/theme';
-import { NgDocButtonIconComponent, NgDocTooltipDirective, NgDocIconComponent } from '@ng-doc/ui-kit';
+import { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';
+const THEMES = [
+    { name: 'Auto', theme: 'auto' },
+    { name: 'Light', theme: null },
+    { name: 'Dark', theme: 'dark' },
+];
+/**
+ * Button that switches the theme in turn: Auto (follows the system), Light and Dark.
+ *
+ * It shows the current theme and follows theme changes made elsewhere through the theme service.
+ */
 class NgDocThemeToggleComponent {
     constructor() {
-        this.themes = [
-            { name: 'Auto', theme: 'auto' },
-            { name: 'Light', theme: null },
-            { name: 'Dark', theme: 'dark' },
-        ];
-        this.documentElement = inject(DOCUMENT).documentElement;
         this.themeService = inject(NgDocThemeService);
+        /**
+         * The current theme. A custom theme id counts as Auto, because the toggle does not offer it.
+         */
+        this.currentTheme = computed(() => {
+            const theme = this.themeService.theme();
+            return THEMES.find(({ theme: t }) => t === theme) ?? THEMES[0];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
+        /**
+         * The theme the next press switches to.
+         */
+        this.nextTheme = computed(() => THEMES[(THEMES.indexOf(this.currentTheme()) + 1) % THEMES.length], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextTheme" }] : /* istanbul ignore next */ []));
     }
-    get currentTheme() {
-        const theme = this.documentElement.getAttribute('data-theme');
-        return this.themes.find(({ theme: t }) => t === theme) ?? this.themes[0];
-    }
-    get nextTheme() {
-        const index = this.themes.findIndex(({ theme }) => theme === this.currentTheme.theme);
-        return this.themes[(index + 1) % this.themes.length];
-    }
+    /**
+     * Switches to the next theme.
+     */
     toggleTheme() {
-        const { theme } = this.nextTheme;
+        const { theme } = this.nextTheme();
         this.themeService.set(theme ?? undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocThemeToggleComponent, isStandalone: true, selector: "ng-doc-theme-toggle", ngImport: i0, template: "<button ng-doc-button-icon size=\"large\" (click)=\"toggleTheme()\" [ngDocTooltip]=\"tooltipContent\">\n  <ng-template #tooltipContent> \"{{ currentTheme.name }}\" theme </ng-template>\n\n  @if (currentTheme === themes[0]) {\n    <div class=\"letter\">A</div>\n  } @else if (currentTheme === themes[1]) {\n    <ng-doc-icon icon=\"sun\" size=\"24\"></ng-doc-icon>\n  } @else {\n    <ng-doc-icon icon=\"moon\" size=\"24\"></ng-doc-icon>\n  }\n</button>\n", styles: [":host{display:inline-block;height:40px;width:40px}:host .letter{font-family:var(--ng-doc-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);--ng-doc-font-size: 26px;--ng-doc-font-weight: 600}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocThemeToggleComponent, isStandalone: true, selector: "ng-doc-theme-toggle", ngImport: i0, template: "<button\n  type=\"button\"\n  ng-doc-button-icon\n  size=\"large\"\n  [rounded]=\"false\"\n  [attr.aria-label]=\"currentTheme().name + ' theme. Switch to ' + nextTheme().name.toLowerCase()\"\n  [ngDocTooltip]=\"currentTheme().name + ' theme'\"\n  (click)=\"toggleTheme()\">\n  @switch (currentTheme().name) {\n    @case ('Light') {\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path\n          d=\"M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n      </svg>\n    }\n    @case ('Dark') {\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z\" />\n      </svg>\n    }\n    @default {\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"M12 3a9 9 0 0 0 0 18z\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</button>\n", styles: [":host{display:inline-flex;flex:none}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocThemeToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocThemeToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocButtonIconComponent, NgDocTooltipDirective, NgDocIconComponent], template: "<button ng-doc-button-icon size=\"large\" (click)=\"toggleTheme()\" [ngDocTooltip]=\"tooltipContent\">\n  <ng-template #tooltipContent> \"{{ currentTheme.name }}\" theme </ng-template>\n\n  @if (currentTheme === themes[0]) {\n    <div class=\"letter\">A</div>\n  } @else if (currentTheme === themes[1]) {\n    <ng-doc-icon icon=\"sun\" size=\"24\"></ng-doc-icon>\n  } @else {\n    <ng-doc-icon icon=\"moon\" size=\"24\"></ng-doc-icon>\n  }\n</button>\n", styles: [":host{display:inline-block;height:40px;width:40px}:host .letter{font-family:var(--ng-doc-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);--ng-doc-font-size: 26px;--ng-doc-font-weight: 600}\n"] }]
+            args: [{ selector: 'ng-doc-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocButtonIconComponent, NgDocTooltipDirective], template: "<button\n  type=\"button\"\n  ng-doc-button-icon\n  size=\"large\"\n  [rounded]=\"false\"\n  [attr.aria-label]=\"currentTheme().name + ' theme. Switch to ' + nextTheme().name.toLowerCase()\"\n  [ngDocTooltip]=\"currentTheme().name + ' theme'\"\n  (click)=\"toggleTheme()\">\n  @switch (currentTheme().name) {\n    @case ('Light') {\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path\n          d=\"M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n      </svg>\n    }\n    @case ('Dark') {\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z\" />\n      </svg>\n    }\n    @default {\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"M12 3a9 9 0 0 0 0 18z\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</button>\n", styles: [":host{display:inline-flex;flex:none}\n"] }]
         }] });
 /**