npm - @ng-doc/ui-kit - Versions diffs - 22.0.0-beta.1 → 22.0.0 - Mend

@ng-doc/ui-kit 22.0.0-beta.1 → 22.0.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 (210) hide show

package/fesm2022/ng-doc-ui-kit-components-tab-group.mjs CHANGED Viewed

@@ -1,83 +1,108 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, QueryList, DestroyRef, ContentChildren, ViewChildren } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgDocSelectionHostDirective, NgDocSelectionComponent, NgDocSelectionOriginDirective } from '@ng-doc/ui-kit/components/selection';
+import { input, ChangeDetectionStrategy, Component, contentChildren, viewChildren, linkedSignal, computed, untracked } from '@angular/core';
+import { NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective } from '@ng-doc/ui-kit/components/selection';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { startWith } from 'rxjs/operators';
+/** One tab of an `ng-doc-tab-group`: its label, its id and the content of its panel. */
 class NgDocTabComponent {
     constructor() {
-        this.label = '';
-        this.id = 0;
-        /** Expander content */
-        this.content = '';
+        /** Label of the tab: a string or a template. */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Id the group's `openedTab` refers to. */
+        this.id = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Content of the tab's panel. */
+        this.content = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTabComponent, isStandalone: true, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: { label: "label", id: "id", content: "content" }, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocTabComponent, isStandalone: true, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-tab, a[ng-doc-tab]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-doc-tab, a[ng-doc-tab]', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
+let nextId = 0;
+/**
+ * Tabs as a segmented control over one panel. It follows the WAI-ARIA tabs pattern: the arrow keys,
+ * Home and End move between the tabs and select them. The highlight of the open tab slides to
+ * the newly opened one.
+ */
 class NgDocTabGroupComponent {
     constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.tabElements = new QueryList();
-        this.tabs = new QueryList();
-        this.destroyRef = inject(DestroyRef);
-    }
-    ngAfterContentInit() {
-        this.tabs.changes
-            .pipe(startWith(this.tabs), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            const tabToOpen = this.openedTab
-                ? this.tabs.find((tab) => tab.id === this.openedTab)
-                : this.tabs.get(0);
-            tabToOpen && this.selectTab(tabToOpen);
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    ngAfterViewInit() {
-        this.tabElements.changes
-            .pipe(startWith(this.tabElements), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.changeDetectorRef.detectChanges());
-    }
-    get selectedIndex() {
-        return this.selectedTab ? this.tabs.toArray().indexOf(this.selectedTab) : -1;
-    }
-    get selectedHeaderTab() {
-        return this.selectedTab ? this.tabElements.get(this.selectedIndex) ?? null : null;
+        /** Id of the tab to open; the first tab opens when it is not set or matches no tab. */
+        this.openedTab = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openedTab" }] : /* istanbul ignore next */ []));
+        /** The tabs of the group. */
+        this.tabs = contentChildren(NgDocTabComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        /** Header buttons of the tabs, in order. */
+        this.tabElements = viewChildren('headerTab', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabElements" }] : /* istanbul ignore next */ []));
+        /**
+         * The open tab. It follows `openedTab` and the tab list; a tab the user selects stays open as
+         * long as it is in the group and `openedTab` does not change.
+         */
+        this.selectedTab = linkedSignal({ ...(ngDevMode ? { debugName: "selectedTab" } : /* istanbul ignore next */ {}), source: () => ({ tabs: this.tabs(), opened: this.openedTab() }),
+            computation: ({ tabs, opened }, previous) => {
+                const kept = previous?.value && previous.source.opened === opened && tabs.includes(previous.value)
+                    ? previous.value
+                    : undefined;
+                return (kept ??
+                    (opened !== undefined && opened !== null
+                        ? tabs.find((tab) => tab.id() === opened)
+                        : undefined) ??
+                    tabs[0]);
+            } });
+        /** Index of the open tab, or -1. */
+        this.selectedIndex = computed(() => {
+            const selected = this.selectedTab();
+            return selected ? this.tabs().indexOf(selected) : -1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+        /** Prefix of the ids that tie the tabs to the panel. */
+        this.idPrefix = `ng-doc-tab-group-${nextId++}`;
     }
+    /**
+     * Opens a tab.
+     * @param tab - The tab to open.
+     */
     selectTab(tab) {
-        this.selectedTab = tab;
+        untracked(() => this.selectedTab.set(tab));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocTabGroupComponent, isStandalone: true, selector: "ng-doc-tab-group", inputs: { openedTab: "openedTab" }, queries: [{ propertyName: "tabs", predicate: NgDocTabComponent }], viewQueries: [{ propertyName: "tabElements", predicate: ["headerTab"], descendants: true }], ngImport: i0, template: "<div class=\"ng-doc-tabs-wrapper\" ngDocSelectionHost>\n  <ng-doc-selection></ng-doc-selection>\n  @for (tab of tabs; track tab) {\n    <div\n      class=\"ng-doc-tab\"\n      [class.selected]=\"tab === selectedTab\"\n      (click)=\"selectTab(tab)\"\n      [ngDocSelectionOrigin]=\"tab === selectedTab\"\n      #headerTab>\n      <div class=\"ng-doc-tab-text\">\n        <ng-container *polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n      </div>\n    </div>\n  }\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n  <div *polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\">\n    {{ text }}\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-wrapper{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);position:relative;width:100%;display:inline-flex;overflow-x:auto;line-height:18px;font-size:14px;flex-shrink:0;background:var(--ng-doc-tab-group-tabs-background)}:host .ng-doc-tabs-wrapper .ng-doc-tab{position:relative;padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap}:host .ng-doc-tabs-wrapper .ng-doc-tab .ng-doc-tab-text{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);position:relative;--ng-doc-font-size: 13px;--ng-doc-font-weight: 500}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden;border-top:1px solid var(--ng-doc-border-color)}\n"], dependencies: [{ kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /**
+     * Moves the selection with the keyboard and focuses the new tab.
+     * @param event - The key press on a tab.
+     */
+    onKeydown(event) {
+        const tabs = this.tabs();
+        const current = Math.max(this.selectedIndex(), 0);
+        const next = {
+            ArrowRight: (current + 1) % tabs.length,
+            ArrowLeft: (current - 1 + tabs.length) % tabs.length,
+            Home: 0,
+            End: tabs.length - 1,
+        }[event.key];
+        if (next !== undefined && tabs[next]) {
+            event.preventDefault();
+            this.selectTab(tabs[next]);
+            this.tabElements()[next]?.nativeElement.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocTabGroupComponent, isStandalone: true, selector: "ng-doc-tab-group", inputs: { openedTab: { classPropertyName: "openedTab", publicName: "openedTab", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: NgDocTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabElements", predicate: ["headerTab"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ng-doc-tabs-header\">\n  <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n    <ng-doc-selection [align]=\"null\" />\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"ng-doc-tab\"\n        role=\"tab\"\n        [id]=\"idPrefix + '-tab-' + i\"\n        [attr.aria-selected]=\"tab === selectedTab()\"\n        [attr.aria-controls]=\"idPrefix + '-panel'\"\n        [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n        [class.selected]=\"tab === selectedTab()\"\n        [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n        (click)=\"selectTab(tab)\"\n        (keydown)=\"onKeydown($event)\"\n        #headerTab>\n        <span class=\"ng-doc-tab-text\">\n          <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n            text\n          }}</ng-container>\n        </span>\n      </button>\n    }\n  </div>\n</div>\n\n<div\n  class=\"ng-doc-body-wrapper\"\n  role=\"tabpanel\"\n  [id]=\"idPrefix + '-panel'\"\n  [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n  <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n    {{ text }}\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-header{display:flex;align-items:center;flex-shrink:0;min-height:var(--ng-doc-code-header-height, 40px);padding:var(--ng-doc-space-1) var(--ng-doc-space-2);background:var(--ng-doc-tab-group-tabs-background, transparent);border-bottom:1px solid var(--ng-doc-border-color)}:host .ng-doc-tabs-wrapper{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);position:relative;display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}:host ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer}:host .ng-doc-tab:hover{color:var(--ng-doc-heading-color)}:host .ng-doc-tab:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-tab.selected{color:var(--ng-doc-heading-color)}:host .ng-doc-tab .ng-doc-tab-text{display:inline-flex;align-items:center;gap:6px}:host ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocSelectionHostDirective,
+                        PolymorpheusOutlet,
                         NgDocSelectionComponent,
+                        NgDocSelectionHostDirective,
                         NgDocSelectionOriginDirective,
-                        PolymorpheusOutlet,
-                    ], template: "<div class=\"ng-doc-tabs-wrapper\" ngDocSelectionHost>\n  <ng-doc-selection></ng-doc-selection>\n  @for (tab of tabs; track tab) {\n    <div\n      class=\"ng-doc-tab\"\n      [class.selected]=\"tab === selectedTab\"\n      (click)=\"selectTab(tab)\"\n      [ngDocSelectionOrigin]=\"tab === selectedTab\"\n      #headerTab>\n      <div class=\"ng-doc-tab-text\">\n        <ng-container *polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n      </div>\n    </div>\n  }\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n  <div *polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\">\n    {{ text }}\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-wrapper{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);position:relative;width:100%;display:inline-flex;overflow-x:auto;line-height:18px;font-size:14px;flex-shrink:0;background:var(--ng-doc-tab-group-tabs-background)}:host .ng-doc-tabs-wrapper .ng-doc-tab{position:relative;padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap}:host .ng-doc-tabs-wrapper .ng-doc-tab .ng-doc-tab-text{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);position:relative;--ng-doc-font-size: 13px;--ng-doc-font-weight: 500}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden;border-top:1px solid var(--ng-doc-border-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { openedTab: [{
-                type: Input
-            }], tabElements: [{
-                type: ViewChildren,
-                args: ['headerTab']
-            }], tabs: [{
-                type: ContentChildren,
-                args: [NgDocTabComponent]
-            }] } });
+                    ], template: "<div class=\"ng-doc-tabs-header\">\n  <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n    <ng-doc-selection [align]=\"null\" />\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        class=\"ng-doc-tab\"\n        role=\"tab\"\n        [id]=\"idPrefix + '-tab-' + i\"\n        [attr.aria-selected]=\"tab === selectedTab()\"\n        [attr.aria-controls]=\"idPrefix + '-panel'\"\n        [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n        [class.selected]=\"tab === selectedTab()\"\n        [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n        (click)=\"selectTab(tab)\"\n        (keydown)=\"onKeydown($event)\"\n        #headerTab>\n        <span class=\"ng-doc-tab-text\">\n          <ng-container *polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n            text\n          }}</ng-container>\n        </span>\n      </button>\n    }\n  </div>\n</div>\n\n<div\n  class=\"ng-doc-body-wrapper\"\n  role=\"tabpanel\"\n  [id]=\"idPrefix + '-panel'\"\n  [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n  <div *polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n    {{ text }}\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-header{display:flex;align-items:center;flex-shrink:0;min-height:var(--ng-doc-code-header-height, 40px);padding:var(--ng-doc-space-1) var(--ng-doc-space-2);background:var(--ng-doc-tab-group-tabs-background, transparent);border-bottom:1px solid var(--ng-doc-border-color)}:host .ng-doc-tabs-wrapper{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);position:relative;display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}:host ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer}:host .ng-doc-tab:hover{color:var(--ng-doc-heading-color)}:host .ng-doc-tab:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:host .ng-doc-tab.selected{color:var(--ng-doc-heading-color)}:host .ng-doc-tab .ng-doc-tab-text{display:inline-flex;align-items:center;gap:6px}:host ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~.ng-doc-tab.selected{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}\n"] }]
+        }], propDecorators: { openedTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedTab", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgDocTabComponent), { isSignal: true }] }], tabElements: [{ type: i0.ViewChildren, args: ['headerTab', { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-tab-group.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-tab-group.mjs","sources":["../../../../libs/ui-kit/components/tab-group/tab/tab.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.html","../../../../libs/ui-kit/components/tab-group/ng-doc-ui-kit-components-tab-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { NgDocContent } from '@ng-doc/ui-kit/types';\n\n@Component({\n selector: 'ng-doc-tab, a[ng-doc-tab]',\n template: '',\n styleUrls: ['./tab.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n})\nexport class NgDocTabComponent<T> {\n @Input()\n label: NgDocContent = '';\n\n @Input()\n id: T \| number = 0;\n\n /** Expander content /\n @Input()\n content: NgDocContent = '';\n}\n","import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n DestroyRef,\n ElementRef,\n inject,\n Input,\n QueryList,\n ViewChildren,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n} from '@ng-doc/ui-kit/components/selection';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\nimport { startWith } from 'rxjs/operators';\n\nimport { NgDocTabComponent } from './tab/tab.component';\n\n@Component({\n selector: 'ng-doc-tab-group',\n templateUrl: './tab-group.component.html',\n styleUrls: ['./tab-group.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgDocSelectionHostDirective,\n NgDocSelectionComponent,\n NgDocSelectionOriginDirective,\n PolymorpheusOutlet,\n ],\n})\nexport class NgDocTabGroupComponent<T = number> implements AfterContentInit, AfterViewInit {\n private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n @Input()\n openedTab!: T;\n\n @ViewChildren('headerTab')\n tabElements: QueryList<ElementRef> = new QueryList<ElementRef>();\n\n @ContentChildren(NgDocTabComponent)\n tabs: QueryList<NgDocTabComponent<T>> = new QueryList<NgDocTabComponent<T>>();\n\n selectedTab?: NgDocTabComponent<T>;\n\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {}\n\n ngAfterContentInit(): void {\n this.tabs.changes\n .pipe(startWith(this.tabs), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n const tabToOpen: NgDocTabComponent<T> \| undefined = this.openedTab\n ? this.tabs.find((tab: NgDocTabComponent<T>) => tab.id === this.openedTab)\n : this.tabs.get(0);\n\n tabToOpen && this.selectTab(tabToOpen);\n\n this.changeDetectorRef.markForCheck();\n });\n }\n\n ngAfterViewInit(): void {\n this.tabElements.changes\n .pipe(startWith(this.tabElements), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.changeDetectorRef.detectChanges());\n }\n\n get selectedIndex(): number {\n return this.selectedTab ? this.tabs.toArray().indexOf(this.selectedTab) : -1;\n }\n\n get selectedHeaderTab(): ElementRef \| null {\n return this.selectedTab ? this.tabElements.get(this.selectedIndex) ?? null : null;\n }\n\n selectTab(tab: NgDocTabComponent<T>) {\n this.selectedTab = tab;\n }\n}\n","<div class=\"ng-doc-tabs-wrapper\" ngDocSelectionHost>\n <ng-doc-selection></ng-doc-selection>\n @for (tab of tabs; track tab) {\n <div\n class=\"ng-doc-tab\"\n [class.selected]=\"tab === selectedTab\"\n (click)=\"selectTab(tab)\"\n [ngDocSelectionOrigin]=\"tab === selectedTab\"\n #headerTab>\n <div class=\"ng-doc-tab-text\">\n <ng-container polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n </div>\n </div>\n }\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n <div polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\">\n {{ text }}\n </div>\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-ui-kit-components-tab-group.mjs","sources":["../../../../libs/ui-kit/components/tab-group/tab/tab.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.ts","../../../../libs/ui-kit/components/tab-group/tab-group.component.html","../../../../libs/ui-kit/components/tab-group/ng-doc-ui-kit-components-tab-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocContent } from '@ng-doc/ui-kit/types';\n\n/** One tab of an `ng-doc-tab-group`: its label, its id and the content of its panel. /\n@Component({\n selector: 'ng-doc-tab, a[ng-doc-tab]',\n template: '',\n styleUrls: ['./tab.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabComponent<T> {\n /* Label of the tab: a string or a template. /\n readonly label = input<NgDocContent>('');\n\n /* Id the group's `openedTab` refers to. /\n readonly id = input<T \| number>(0);\n\n /* Content of the tab's panel. /\n readonly content = input<NgDocContent>('');\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n ElementRef,\n input,\n linkedSignal,\n Signal,\n untracked,\n viewChildren,\n} from '@angular/core';\nimport {\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n} from '@ng-doc/ui-kit/components/selection';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\n\nimport { NgDocTabComponent } from './tab/tab.component';\n\nlet nextId = 0;\n\n/\n Tabs as a segmented control over one panel. It follows the WAI-ARIA tabs pattern: the arrow keys,\n * Home and End move between the tabs and select them. The highlight of the open tab slides to\n * the newly opened one.\n /\n@Component({\n selector: 'ng-doc-tab-group',\n templateUrl: './tab-group.component.html',\n styleUrls: ['./tab-group.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n PolymorpheusOutlet,\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n NgDocSelectionOriginDirective,\n ],\n})\nexport class NgDocTabGroupComponent<T = number> {\n /* Id of the tab to open; the first tab opens when it is not set or matches no tab. /\n readonly openedTab = input<T \| undefined>(undefined);\n\n /* The tabs of the group. /\n readonly tabs: Signal<ReadonlyArray<NgDocTabComponent<T>>> =\n contentChildren<NgDocTabComponent<T>>(NgDocTabComponent);\n\n /* Header buttons of the tabs, in order. /\n readonly tabElements: Signal<ReadonlyArray<ElementRef<HTMLElement>>> =\n viewChildren<ElementRef<HTMLElement>>('headerTab');\n\n /\n The open tab. It follows `openedTab` and the tab list; a tab the user selects stays open as\n * long as it is in the group and `openedTab` does not change.\n /\n readonly selectedTab = linkedSignal<\n { tabs: ReadonlyArray<NgDocTabComponent<T>>; opened: T \| undefined },\n NgDocTabComponent<T> \| undefined\n >({\n source: () => ({ tabs: this.tabs(), opened: this.openedTab() }),\n computation: ({ tabs, opened }, previous) => {\n const kept: NgDocTabComponent<T> \| undefined =\n previous?.value && previous.source.opened === opened && tabs.includes(previous.value)\n ? previous.value\n : undefined;\n\n return (\n kept ??\n (opened !== undefined && opened !== null\n ? tabs.find((tab: NgDocTabComponent<T>) => tab.id() === opened)\n : undefined) ??\n tabs[0]\n );\n },\n });\n\n /* Index of the open tab, or -1. /\n readonly selectedIndex: Signal<number> = computed(() => {\n const selected: NgDocTabComponent<T> \| undefined = this.selectedTab();\n\n return selected ? this.tabs().indexOf(selected) : -1;\n });\n\n /* Prefix of the ids that tie the tabs to the panel. /\n protected readonly idPrefix: string = `ng-doc-tab-group-${nextId++}`;\n\n /\n Opens a tab.\n * @param tab - The tab to open.\n /\n selectTab(tab: NgDocTabComponent<T>): void {\n untracked(() => this.selectedTab.set(tab));\n }\n\n /\n Moves the selection with the keyboard and focuses the new tab.\n * @param event - The key press on a tab.\n /\n protected onKeydown(event: KeyboardEvent): void {\n const tabs: ReadonlyArray<NgDocTabComponent<T>> = this.tabs();\n const current: number = Math.max(this.selectedIndex(), 0);\n const next: number \| undefined = {\n ArrowRight: (current + 1) % tabs.length,\n ArrowLeft: (current - 1 + tabs.length) % tabs.length,\n Home: 0,\n End: tabs.length - 1,\n }[event.key];\n\n if (next !== undefined && tabs[next]) {\n event.preventDefault();\n this.selectTab(tabs[next]);\n this.tabElements()[next]?.nativeElement.focus();\n }\n }\n}\n","<div class=\"ng-doc-tabs-header\">\n <div class=\"ng-doc-tabs-wrapper\" role=\"tablist\" ngDocSelectionHost>\n <ng-doc-selection [align]=\"null\" />\n @for (tab of tabs(); track tab; let i = $index) {\n <button\n type=\"button\"\n class=\"ng-doc-tab\"\n role=\"tab\"\n [id]=\"idPrefix + '-tab-' + i\"\n [attr.aria-selected]=\"tab === selectedTab()\"\n [attr.aria-controls]=\"idPrefix + '-panel'\"\n [attr.tabindex]=\"tab === selectedTab() ? 0 : -1\"\n [class.selected]=\"tab === selectedTab()\"\n [ngDocSelectionOrigin]=\"tab === selectedTab()\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onKeydown($event)\"\n #headerTab>\n <span class=\"ng-doc-tab-text\">\n <ng-container polymorpheusOutlet=\"tab.label() as text; context: {}\">{{\n text\n }}</ng-container>\n </span>\n </button>\n }\n </div>\n</div>\n\n<div\n class=\"ng-doc-body-wrapper\"\n role=\"tabpanel\"\n [id]=\"idPrefix + '-panel'\"\n [attr.aria-labelledby]=\"selectedIndex() >= 0 ? idPrefix + '-tab-' + selectedIndex() : null\">\n <div polymorpheusOutlet=\"selectedTab()?.content() ?? '' as text; context: {}\">\n {{ text }}\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;AAGA;MAOa,iBAAiB,CAAA;AAN9B,IAAA,WAAA,GAAA;;QAQW,IAAA,CAAA,KAAK,GAAG,KAAK,CAAe,EAAE;kFAAC;;QAG/B,IAAA,CAAA,EAAE,GAAG,KAAK,CAAa,CAAC;+EAAC;;QAGzB,IAAA,CAAA,OAAO,GAAG,KAAK,CAAe,EAAE;oFAAC;AAC3C,IAAA;8GATY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,scAJlB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAID,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,EAAA,QAAA,EAC3B,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA;;;ACajD,IAAI,MAAM,GAAG,CAAC;AAEd;;;;AAIG;MAaU,sBAAsB,CAAA;AAZnC,IAAA,WAAA,GAAA;;QAcW,IAAA,CAAA,SAAS,GAAG,KAAK,CAAgB,SAAS;sFAAC;;QAG3C,IAAA,CAAA,IAAI,GACX,eAAe,CAAuB,iBAAiB;iFAAC;;QAGjD,IAAA,CAAA,WAAW,GAClB,YAAY,CAA0B,WAAW;wFAAC;AAEpD;;;AAGG;QACM,IAAA,CAAA,WAAW,GAAG,YAAY,CAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,aAAA,EAAA,8BAAA,EAAA,CAAA,EAIjC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;YAC/D,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,KAAI;gBAC1C,MAAM,IAAI,GACR,QAAQ,EAAE,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK;sBAChF,QAAQ,CAAC;sBACT,SAAS;AAEf,gBAAA,QACE,IAAI;AACJ,qBAAC,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK;AAClC,0BAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAyB,KAAK,GAAG,CAAC,EAAE,EAAE,KAAK,MAAM;0BAC5D,SAAS,CAAC;AACd,oBAAA,IAAI,CAAC,CAAC,CAAC;AAEX,YAAA,CAAC,GACD;;AAGO,QAAA,IAAA,CAAA,aAAa,GAAmB,QAAQ,CAAC,MAAK;AACrD,YAAA,MAAM,QAAQ,GAAqC,IAAI,CAAC,WAAW,EAAE;AAErE,YAAA,OAAO,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACtD,CAAC;0FAAC;;AAGiB,QAAA,IAAA,CAAA,QAAQ,GAAW,CAAA,iBAAA,EAAoB,MAAM,EAAE,EAAE;AA8BrE,IAAA;AA5BC;;;AAGG;AACH,IAAA,SAAS,CAAC,GAAyB,EAAA;AACjC,QAAA,SAAS,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5C;AAEA;;;AAGG;AACO,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,MAAM,IAAI,GAAwC,IAAI,CAAC,IAAI,EAAE;AAC7D,QAAA,MAAM,OAAO,GAAW,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;AACzD,QAAA,MAAM,IAAI,GAAuB;YAC/B,UAAU,EAAE,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM;AACvC,YAAA,SAAS,EAAE,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM;AACpD,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;AACrB,SAAA,CAAC,KAAK,CAAC,GAAG,CAAC;QAEZ,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE;QACjD;IACF;8GA1EW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EAMO,iBAAiB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9C3D,kvCAoCA,EAAA,MAAA,EAAA,CAAA,o1EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDFI,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACvB,2BAA2B,EAAA,QAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC3B,6BAA6B,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGpB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAZlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,kBAAkB;wBAClB,uBAAuB;wBACvB,2BAA2B;wBAC3B,6BAA6B;AAC9B,qBAAA,EAAA,QAAA,EAAA,kvCAAA,EAAA,MAAA,EAAA,CAAA,o1EAAA,CAAA,EAAA;AAQuC,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAAA,iBAAiB,yEAIjB,WAAW,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AElDrD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-tab-routes-group.mjs CHANGED Viewed

@@ -1,31 +1,34 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@ng-doc/ui-kit/components/selection';
 import { NgDocSelectionOriginDirective, NgDocSelectionComponent, NgDocSelectionHostDirective } from '@ng-doc/ui-kit/components/selection';
+/** A link of an `ng-doc-tab-routes-group`; the active one is underlined and marked current. */
 class NgDocTabRouteComponent {
     constructor() {
-        this.isActive = false;
+        /** Whether the link's route is active. */
+        this.isActive = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTabRouteComponent, isStandalone: true, selector: "a[ng-doc-tab-route]", inputs: { isActive: "isActive" }, hostDirectives: [{ directive: i1.NgDocSelectionOriginDirective, inputs: ["ngDocSelectionOrigin", "isActive"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{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);position:relative;padding:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocTabRouteComponent, isStandalone: true, selector: "a[ng-doc-tab-route]", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-current": "isActive() ? \"page\" : null" } }, hostDirectives: [{ directive: i1.NgDocSelectionOriginDirective, inputs: ["ngDocSelectionOrigin", "isActive"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{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);position:relative;padding:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:500;flex-shrink:0;color:var(--ng-doc-text-muted)}:host[aria-current=page],:host:hover{color:var(--ng-doc-heading-color)}:host:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-focus-ring-color);border-radius:var(--ng-doc-radius-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabRouteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabRouteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[ng-doc-tab-route]', imports: [], hostDirectives: [
                         { directive: NgDocSelectionOriginDirective, inputs: ['ngDocSelectionOrigin: isActive'] },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{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);position:relative;padding:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:500}\n"] }]
-        }], propDecorators: { isActive: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.aria-current]': 'isActive() ? "page" : null',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{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);position:relative;padding:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:500;flex-shrink:0;color:var(--ng-doc-text-muted)}:host[aria-current=page],:host:hover{color:var(--ng-doc-heading-color)}:host:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-focus-ring-color);border-radius:var(--ng-doc-radius-sm)}\n"] }]
+        }], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }] } });
 class NgDocTabRoutesGroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabRoutesGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTabRoutesGroupComponent, isStandalone: true, selector: "ng-doc-tab-routes-group", hostDirectives: [{ directive: i1.NgDocSelectionHostDirective }], ngImport: i0, template: "<ng-doc-selection></ng-doc-selection>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;border-bottom:1px solid var(--ng-doc-base-4)}\n"], dependencies: [{ kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabRoutesGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocTabRoutesGroupComponent, isStandalone: true, selector: "ng-doc-tab-routes-group", hostDirectives: [{ directive: i1.NgDocSelectionHostDirective }], ngImport: i0, template: "<ng-doc-selection></ng-doc-selection>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;border-bottom:1px solid var(--ng-doc-base-4);overflow-x:auto;scrollbar-width:none}ng-doc-selection:not([data-ng-doc-placed])~::ng-deep [aria-current=page]:after{content:\"\";position:absolute;inset:auto 0 0;border-bottom:var(--ng-doc-selection-border)}\n"], dependencies: [{ kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTabRoutesGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTabRoutesGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-tab-routes-group', imports: [NgDocSelectionComponent], hostDirectives: [NgDocSelectionHostDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-doc-selection></ng-doc-selection>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;border-bottom:1px solid var(--ng-doc-base-4)}\n"] }]
+            args: [{ selector: 'ng-doc-tab-routes-group', imports: [NgDocSelectionComponent], hostDirectives: [NgDocSelectionHostDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-doc-selection></ng-doc-selection>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;border-bottom:1px solid var(--ng-doc-base-4);overflow-x:auto;scrollbar-width:none}ng-doc-selection:not([data-ng-doc-placed])~::ng-deep [aria-current=page]:after{content:\"\";position:absolute;inset:auto 0 0;border-bottom:var(--ng-doc-selection-border)}\n"] }]
         }] });
 /**

package/fesm2022/ng-doc-ui-kit-components-tab-routes-group.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-tab-routes-group.mjs","sources":["../../../../libs/ui-kit/components/tab-routes-group/tab-route/tab-route.component.ts","../../../../libs/ui-kit/components/tab-routes-group/tab-route/tab-route.component.html","../../../../libs/ui-kit/components/tab-routes-group/tab-routes-group.component.ts","../../../../libs/ui-kit/components/tab-routes-group/tab-routes-group.component.html","../../../../libs/ui-kit/components/tab-routes-group/ng-doc-ui-kit-components-tab-routes-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ~~Input~~ } from '@angular/core';\nimport { NgDocSelectionOriginDirective } from '@ng-doc/ui-kit/components/selection';\n\n@Component({\n selector: 'a[ng-doc-tab-route]',\n imports: [],\n templateUrl: './tab-route.component.html',\n styleUrl: './tab-route.component.scss',\n hostDirectives: [\n { directive: NgDocSelectionOriginDirective, inputs: ['ngDocSelectionOrigin: isActive'] },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabRouteComponent {\n ~~@Input()\~~n isActive = false;\n}\n","<ng-content></ng-content>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport {\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n} from '@ng-doc/ui-kit/components/selection';\n\n@Component({\n selector: 'ng-doc-tab-routes-group',\n templateUrl: './tab-routes-group.component.html',\n styleUrl: './tab-routes-group.component.scss',\n imports: [NgDocSelectionComponent],\n hostDirectives: [NgDocSelectionHostDirective],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabRoutesGroupComponent {}\n","<ng-doc-selection></ng-doc-selection>\n<ng-content></ng-content>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;~~MAaa~~,sBAAsB,CAAA;~~AAVnC~~,IAAA,WAAA,GAAA~~;QAYE~~,IAAA,CAAA,QAAQ,GAAG,KAAK;~~AACjB~~,IAAA;8GAHY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,~~kOCbnC~~,6BACA,EAAA,MAAA,EAAA,CAAA,~~uZAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FDYa~~,sBAAsB,EAAA,UAAA,EAAA,CAAA;~~kBAVlC~~,SAAS;+BACE,qBAAqB,EAAA,OAAA,EACtB,EAAE,EAAA,cAAA,EAGK;wBACd,EAAE,SAAS,EAAE,6BAA6B,EAAE,MAAM,EAAE,CAAC,gCAAgC,CAAC,EAAE;qBACzF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,~~uZAAA~~,CAAA,EAAA~~;;sBAG9C~~;;;~~MEAU~~,4BAA4B,CAAA;8GAA5B,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA5B,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdzC,oEAEA,EAAA,MAAA,EAAA,CAAA,~~sFAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAItB,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBARxC,SAAS;+BACE,yBAAyB,EAAA,OAAA,EAG1B,CAAC,uBAAuB,CAAC,EAAA,cAAA,EAClB,CAAC,2BAA2B,CAAC,EAAA,eAAA,EAC5B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,oEAAA,EAAA,MAAA,EAAA,CAAA,~~sFAAA~~,CAAA,EAAA;;;AEZjD;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-tab-routes-group.mjs","sources":["../../../../libs/ui-kit/components/tab-routes-group/tab-route/tab-route.component.ts","../../../../libs/ui-kit/components/tab-routes-group/tab-route/tab-route.component.html","../../../../libs/ui-kit/components/tab-routes-group/tab-routes-group.component.ts","../../../../libs/ui-kit/components/tab-routes-group/tab-routes-group.component.html","../../../../libs/ui-kit/components/tab-routes-group/ng-doc-ui-kit-components-tab-routes-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocSelectionOriginDirective } from '@ng-doc/ui-kit/components/selection';\n\n/** A link of an `ng-doc-tab-routes-group`; the active one is underlined and marked current. /\n@Component({\n selector: 'a[ng-doc-tab-route]',\n imports: [],\n templateUrl: './tab-route.component.html',\n styleUrl: './tab-route.component.scss',\n hostDirectives: [\n { directive: NgDocSelectionOriginDirective, inputs: ['ngDocSelectionOrigin: isActive'] },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.aria-current]': 'isActive() ? \"page\" : null',\n },\n})\nexport class NgDocTabRouteComponent {\n /* Whether the link's route is active. /\n readonly isActive = input<boolean>(false);\n}\n","<ng-content></ng-content>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport {\n NgDocSelectionComponent,\n NgDocSelectionHostDirective,\n} from '@ng-doc/ui-kit/components/selection';\n\n@Component({\n selector: 'ng-doc-tab-routes-group',\n templateUrl: './tab-routes-group.component.html',\n styleUrl: './tab-routes-group.component.scss',\n imports: [NgDocSelectionComponent],\n hostDirectives: [NgDocSelectionHostDirective],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocTabRoutesGroupComponent {}\n","<ng-doc-selection></ng-doc-selection>\n<ng-content></ng-content>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;AAGA;MAca,sBAAsB,CAAA;AAbnC,IAAA,WAAA,GAAA;;QAeW,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK;qFAAC;AAC1C,IAAA;8GAHY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,4ZCjBnC,6BACA,EAAA,MAAA,EAAA,CAAA,4oBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDgBa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAblC,SAAS;+BACE,qBAAqB,EAAA,OAAA,EACtB,EAAE,EAAA,cAAA,EAGK;wBACd,EAAE,SAAS,EAAE,6BAA6B,EAAE,MAAM,EAAE,CAAC,gCAAgC,CAAC,EAAE;qBACzF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,qBAAqB,EAAE,4BAA4B;AACpD,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,4oBAAA,CAAA,EAAA;;;MEDU,4BAA4B,CAAA;8GAA5B,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA5B,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdzC,oEAEA,EAAA,MAAA,EAAA,CAAA,qSAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAItB,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBARxC,SAAS;+BACE,yBAAyB,EAAA,OAAA,EAG1B,CAAC,uBAAuB,CAAC,EAAA,cAAA,EAClB,CAAC,2BAA2B,CAAC,EAAA,eAAA,EAC5B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,oEAAA,EAAA,MAAA,EAAA,CAAA,qSAAA,CAAA,EAAA;;;AEZjD;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-tag.mjs CHANGED Viewed

@@ -1,34 +1,33 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+/**
+ * A small label. The `default` mod is a solid fill of the colour; the `light` mod is a soft chip
+ * whose text mixes the colour toward the heading colour, so it stays readable in every theme.
+ */
 class NgDocTagComponent {
     constructor() {
-        this.color = 'primary';
-        this.size = 'medium';
-        this.mod = 'default';
+        /** Colour of the tag. */
+        this.color = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Size of the tag. */
+        this.size = input('medium', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** `default` fills the tag with the colour, `light` makes a soft chip of it. */
+        this.mod = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mod" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTagComponent, isStandalone: true, selector: "ng-doc-tag", inputs: { color: "color", size: "size", mod: "mod" }, host: { properties: { "attr.data-ng-doc-color": "this.color", "attr.data-ng-doc-size": "this.size", "attr.data-ng-doc-mod": "this.mod" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{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);display:inline-block;padding:0 var(--ng-doc-base-gutter);border-radius:calc(var(--ng-doc-base-gutter) / 2);border:var(--ng-doc-tag-border);color:var(--ng-doc-tag-color);background:color-mix(in srgb,var(--ng-doc-tag-background) var(--ng-doc-tag-background-opacity, 100%),transparent);--ng-doc-icon-color: var(--ng-doc-tag-color);--ng-doc-font-size: 14px}:host[data-ng-doc-size=small]{padding:0 calc(var(--ng-doc-base-gutter) / 2);border-radius:6px;--ng-doc-font-size: 10px;--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 2)}:host[data-ng-doc-color=info]{--ng-doc-tag-background: var(--ng-doc-info);--ng-doc-tag-color: var(--ng-doc-info-text)}:host[data-ng-doc-color=warning]{--ng-doc-tag-background: var(--ng-doc-warning);--ng-doc-tag-color: var(--ng-doc-warning-text)}:host[data-ng-doc-color=alert]{--ng-doc-tag-background: var(--ng-doc-alert);--ng-doc-tag-color: var(--ng-doc-alert-text)}:host[data-ng-doc-color=link]{--ng-doc-tag-background: var(--ng-doc-link-color);--ng-doc-tag-color: var(--ng-doc-primary-text)}:host[data-ng-doc-color=success]{--ng-doc-tag-background: var(--ng-doc-success);--ng-doc-tag-color: var(--ng-doc-success-text)}:host[data-ng-doc-mod=light]{--ng-doc-tag-background-opacity: 15%}:host[data-ng-doc-mod=light][data-ng-doc-color=primary]{--ng-doc-tag-color: var(--ng-doc-primary)}:host[data-ng-doc-mod=light][data-ng-doc-color=info]{--ng-doc-tag-color: var(--ng-doc-info)}:host[data-ng-doc-mod=light][data-ng-doc-color=warning]{--ng-doc-tag-color: var(--ng-doc-warning)}:host[data-ng-doc-mod=light][data-ng-doc-color=alert]{--ng-doc-tag-color: var(--ng-doc-alert)}:host[data-ng-doc-mod=light][data-ng-doc-color=link]{--ng-doc-tag-color: var(--ng-doc-link-color)}:host[data-ng-doc-mod=light][data-ng-doc-color=success]{--ng-doc-tag-color: var(--ng-doc-success)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocTagComponent, isStandalone: true, selector: "ng-doc-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mod: { classPropertyName: "mod", publicName: "mod", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-color": "color()", "attr.data-ng-doc-size": "size()", "attr.data-ng-doc-mod": "mod()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{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);display:inline-flex;align-items:center;padding:0 var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);border:var(--ng-doc-tag-border, none);color:var(--ng-doc-tag-color);background:color-mix(in srgb,var(--ng-doc-tag-background) var(--ng-doc-tag-background-opacity, 100%),transparent);white-space:nowrap;--ng-doc-icon-color: var(--ng-doc-tag-color);--ng-doc-font-size: 14px}:host[data-ng-doc-size=small]{height:18px;padding:0 6px;--ng-doc-font-size: 11px;--ng-doc-font-weight: 500;--ng-doc-line-height: 18px}:host[data-ng-doc-color=info]{--ng-doc-tag-background: var(--ng-doc-info);--ng-doc-tag-color: var(--ng-doc-info-text)}:host[data-ng-doc-color=warning]{--ng-doc-tag-background: var(--ng-doc-warning);--ng-doc-tag-color: var(--ng-doc-warning-text)}:host[data-ng-doc-color=alert]{--ng-doc-tag-background: var(--ng-doc-alert);--ng-doc-tag-color: var(--ng-doc-alert-text)}:host[data-ng-doc-color=link]{--ng-doc-tag-background: var(--ng-doc-link-color);--ng-doc-tag-color: var(--ng-doc-primary-text)}:host[data-ng-doc-color=success]{--ng-doc-tag-background: var(--ng-doc-success);--ng-doc-tag-color: var(--ng-doc-success-text)}:host[data-ng-doc-mod=light]{background:color-mix(in oklab,var(--ng-doc-tag-background) var(--ng-doc-tag-background-opacity, var(--ng-doc-mix-chip)),var(--ng-doc-background));--ng-doc-tag-color: color-mix( in oklab, var(--ng-doc-tag-background) var(--ng-doc-mix-strong), var(--ng-doc-heading-color) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{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);display:inline-block;padding:0 var(--ng-doc-base-gutter);border-radius:calc(var(--ng-doc-base-gutter) / 2);border:var(--ng-doc-tag-border);color:var(--ng-doc-tag-color);background:color-mix(in srgb,var(--ng-doc-tag-background) var(--ng-doc-tag-background-opacity, 100%),transparent);--ng-doc-icon-color: var(--ng-doc-tag-color);--ng-doc-font-size: 14px}:host[data-ng-doc-size=small]{padding:0 calc(var(--ng-doc-base-gutter) / 2);border-radius:6px;--ng-doc-font-size: 10px;--ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 2)}:host[data-ng-doc-color=info]{--ng-doc-tag-background: var(--ng-doc-info);--ng-doc-tag-color: var(--ng-doc-info-text)}:host[data-ng-doc-color=warning]{--ng-doc-tag-background: var(--ng-doc-warning);--ng-doc-tag-color: var(--ng-doc-warning-text)}:host[data-ng-doc-color=alert]{--ng-doc-tag-background: var(--ng-doc-alert);--ng-doc-tag-color: var(--ng-doc-alert-text)}:host[data-ng-doc-color=link]{--ng-doc-tag-background: var(--ng-doc-link-color);--ng-doc-tag-color: var(--ng-doc-primary-text)}:host[data-ng-doc-color=success]{--ng-doc-tag-background: var(--ng-doc-success);--ng-doc-tag-color: var(--ng-doc-success-text)}:host[data-ng-doc-mod=light]{--ng-doc-tag-background-opacity: 15%}:host[data-ng-doc-mod=light][data-ng-doc-color=primary]{--ng-doc-tag-color: var(--ng-doc-primary)}:host[data-ng-doc-mod=light][data-ng-doc-color=info]{--ng-doc-tag-color: var(--ng-doc-info)}:host[data-ng-doc-mod=light][data-ng-doc-color=warning]{--ng-doc-tag-color: var(--ng-doc-warning)}:host[data-ng-doc-mod=light][data-ng-doc-color=alert]{--ng-doc-tag-color: var(--ng-doc-alert)}:host[data-ng-doc-mod=light][data-ng-doc-color=link]{--ng-doc-tag-color: var(--ng-doc-link-color)}:host[data-ng-doc-mod=light][data-ng-doc-color=success]{--ng-doc-tag-color: var(--ng-doc-success)}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-color']
-            }], size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-size']
-            }], mod: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-mod']
-            }] } });
+            args: [{ selector: 'ng-doc-tag', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-color]': 'color()',
+                        '[attr.data-ng-doc-size]': 'size()',
+                        '[attr.data-ng-doc-mod]': 'mod()',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{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);display:inline-flex;align-items:center;padding:0 var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);border:var(--ng-doc-tag-border, none);color:var(--ng-doc-tag-color);background:color-mix(in srgb,var(--ng-doc-tag-background) var(--ng-doc-tag-background-opacity, 100%),transparent);white-space:nowrap;--ng-doc-icon-color: var(--ng-doc-tag-color);--ng-doc-font-size: 14px}:host[data-ng-doc-size=small]{height:18px;padding:0 6px;--ng-doc-font-size: 11px;--ng-doc-font-weight: 500;--ng-doc-line-height: 18px}:host[data-ng-doc-color=info]{--ng-doc-tag-background: var(--ng-doc-info);--ng-doc-tag-color: var(--ng-doc-info-text)}:host[data-ng-doc-color=warning]{--ng-doc-tag-background: var(--ng-doc-warning);--ng-doc-tag-color: var(--ng-doc-warning-text)}:host[data-ng-doc-color=alert]{--ng-doc-tag-background: var(--ng-doc-alert);--ng-doc-tag-color: var(--ng-doc-alert-text)}:host[data-ng-doc-color=link]{--ng-doc-tag-background: var(--ng-doc-link-color);--ng-doc-tag-color: var(--ng-doc-primary-text)}:host[data-ng-doc-color=success]{--ng-doc-tag-background: var(--ng-doc-success);--ng-doc-tag-color: var(--ng-doc-success-text)}:host[data-ng-doc-mod=light]{background:color-mix(in oklab,var(--ng-doc-tag-background) var(--ng-doc-tag-background-opacity, var(--ng-doc-mix-chip)),var(--ng-doc-background));--ng-doc-tag-color: color-mix( in oklab, var(--ng-doc-tag-background) var(--ng-doc-mix-strong), var(--ng-doc-heading-color) )}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mod: [{ type: i0.Input, args: [{ isSignal: true, alias: "mod", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-ui-kit-components-tag.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-ui-kit-components-tag.mjs","sources":["../../../../libs/ui-kit/components/tag/tag.component.ts","../../../../libs/ui-kit/components/tag/tag.component.html","../../../../libs/ui-kit/components/tag/ng-doc-ui-kit-components-tag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ~~HostBinding,~~ ~~Input~~ } from '@angular/core';\nimport { NgDocColor, NgDocTagSize } from '@ng-doc/ui-kit/types';\n\n@Component({\n~~\tselector~~: 'ng-doc-tag',\n~~\ttemplateUrl~~: './tag.component.html',\n~~\tstyleUrls~~: ['./tag.component.scss'],\n~~\tchangeDetection~~: ChangeDetectionStrategy.OnPush,\n~~\tstandalone~~: ~~true,\n})\nexport class NgDocTagComponent~~ {\n~~\t@Input()\n\t@HostBinding(~~'attr.data-ng-doc-color'~~)\n\tcolor~~: ~~NgDocColor =~~ '~~primary';\n\n\t@Input~~()\n~~\t@HostBinding(~~'attr.data-ng-doc-size'~~)\n\tsize~~: ~~NgDocTagSize =~~ '~~medium';\n\n\t@Input~~()\n~~\t@HostBinding(~~'attr.data-ng-doc-mod')\n\~~tmod:~~ 'default' \| 'light' = 'default';\n}\n","<ng-content></ng-content>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;~~MAUa~~,iBAAiB,CAAA;~~AAP9B~~,IAAA,WAAA,GAAA~~;QAUC~~,IAAA,CAAA,KAAK,~~GAAe~~,SAAS;~~QAI7B~~,IAAA,CAAA,IAAI,~~GAAiB~~,QAAQ;~~QAI7B~~,IAAA,CAAA,GAAG,~~GAAwB~~,SAAS;~~AACpC~~,IAAA;~~8GAZY~~,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,~~wQCV9B~~,6BACA,EAAA,MAAA,EAAA,CAAA,~~o9DAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FDSa~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;~~kBAP7B~~,SAAS;~~AACC~~,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,eAAA,EAGL,uBAAuB,CAAC,MAAM,~~cACnC~~,~~IAAI~~,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,~~o9DAAA~~,CAAA,EAAA~~;;sBAGf;;sBACA,WAAW;uBAAC,wBAAwB;;sBAGpC;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;sBACA,WAAW;uBAAC,sBAAsB~~;;;~~AEpBpC~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-doc-ui-kit-components-tag.mjs","sources":["../../../../libs/ui-kit/components/tag/tag.component.ts","../../../../libs/ui-kit/components/tag/tag.component.html","../../../../libs/ui-kit/components/tag/ng-doc-ui-kit-components-tag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocColor, NgDocTagSize } from '@ng-doc/ui-kit/types';\n\n/*\n A small label. The `default` mod is a solid fill of the colour; the `light` mod is a soft chip\n * whose text mixes the colour toward the heading colour, so it stays readable in every theme.\n /\n@Component({\n selector: 'ng-doc-tag',\n templateUrl: './tag.component.html',\n styleUrls: ['./tag.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-ng-doc-color]': 'color()',\n '[attr.data-ng-doc-size]': 'size()',\n '[attr.data-ng-doc-mod]': 'mod()',\n },\n})\nexport class NgDocTagComponent {\n /* Colour of the tag. /\n readonly color = input<NgDocColor>('primary');\n\n /* Size of the tag. /\n readonly size = input<NgDocTagSize>('medium');\n\n /* `default` fills the tag with the colour, `light` makes a soft chip of it. /\n readonly mod = input<'default' \| 'light'>('default');\n}\n","<ng-content></ng-content>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;AAGA;;;AAGG;MAYU,iBAAiB,CAAA;AAX9B,IAAA,WAAA,GAAA;;QAaW,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,SAAS;kFAAC;;QAGpC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAe,QAAQ;iFAAC;;QAGpC,IAAA,CAAA,GAAG,GAAG,KAAK,CAAsB,SAAS;gFAAC;AACrD,IAAA;8GATY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,ojBClB9B,6BACA,EAAA,MAAA,EAAA,CAAA,6mDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDiBa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,eAAA,EAGL,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,0BAA0B,EAAE,SAAS;AACrC,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,wBAAwB,EAAE,OAAO;AAClC,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,6mDAAA,CAAA,EAAA;;;AEhBH;;AAEG;;;;"}

package/fesm2022/ng-doc-ui-kit-components-text.mjs CHANGED Viewed

@@ -1,83 +1,68 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, ChangeDetectorRef, HostBinding, ContentChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Directive, input, contentChild, ChangeDetectionStrategy, Component } from '@angular/core';
 /** Using to display content on the left side */
 class NgDocTextLeftDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTextLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTextLeftDirective, isStandalone: true, selector: "[ngDocTextLeft]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTextLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: NgDocTextLeftDirective, isStandalone: true, selector: "[ngDocTextLeft]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTextLeftDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTextLeftDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocTextLeft]',
-                    standalone: true,
                 }]
         }] });
 /** Using to display content on the right side */
 class NgDocTextRightDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTextRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocTextRightDirective, isStandalone: true, selector: "[ngDocTextRight]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTextRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: NgDocTextRightDirective, isStandalone: true, selector: "[ngDocTextRight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTextRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTextRightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocTextRight]',
-                    standalone: true,
                 }]
         }] });
+/**
+ * Text with the UI Kit typography, optionally with content on its left or right side
+ * (`ngDocTextLeft`, `ngDocTextRight`).
+ */
 class NgDocTextComponent {
     constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         /** Text size */
-        this.size = 'medium';
+        this.size = input('medium', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /** Text color */
-        this.color = 'normal';
+        this.color = input('normal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /** Text align */
-        this.align = 'left';
-        this.absoluteContent = false;
-        this.ngDocElement = true;
-    }
-    ngAfterContentChecked() {
-        this.changeDetectorRef.detectChanges();
+        this.align = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /** Positions the side content absolutely, so it does not take space from the text. */
+        this.absoluteContent = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "absoluteContent" }] : /* istanbul ignore next */ []));
+        /** Content projected with `ngDocTextLeft`. */
+        this.leftContent = contentChild(NgDocTextLeftDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leftContent" }] : /* istanbul ignore next */ []));
+        /** Content projected with `ngDocTextRight`. */
+        this.rightContent = contentChild(NgDocTextRightDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rightContent" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocTextComponent, isStandalone: true, selector: "[ng-doc-text]", inputs: { size: "size", color: "color", align: "align", absoluteContent: "absoluteContent" }, host: { properties: { "attr.data-ng-doc-text-size": "this.size", "attr.data-ng-doc-text-color": "this.color", "attr.data-ng-doc-text-align": "this.align", "attr.data-ng-doc-text-absolute": "this.absoluteContent", "class.ngde": "this.ngDocElement" } }, queries: [{ propertyName: "leftContent", first: true, predicate: NgDocTextLeftDirective, descendants: true }, { propertyName: "rightContent", first: true, predicate: NgDocTextRightDirective, descendants: true }], ngImport: i0, template: "@if (leftContent) {\n  <span class=\"ng-doc-text-left\">\n    <ng-content select=\"[ngDocTextLeft]\"></ng-content>\n  </span>\n}\n<span class=\"ng-doc-text\">\n  <ng-content></ng-content>\n</span>\n@if (rightContent) {\n  <span class=\"ng-doc-text-right\">\n    <ng-content select=\"[ngDocTextRight]\"></ng-content>\n  </span>\n}\n", styles: ["::ng-deep :root{--ng-doc-text-left-width: auto;--ng-doc-text-right-width: auto}:host{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);position:relative;display:flex;align-items:center}:host[data-ng-doc-text-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 18px}:host[data-ng-doc-text-color=muted]{--ng-doc-text: var(--ng-doc-text-muted)}:host[data-ng-doc-text-align=center] .ng-doc-text{text-align:center}:host[data-ng-doc-text-align=right] .ng-doc-text{text-align:right}:host[data-ng-doc-text-absolute=true] .ng-doc-text-left{position:absolute;transform:translate(calc(-100% - var(--ng-doc-base-gutter)))}:host[data-ng-doc-text-absolute=true] .ng-doc-text-right{position:absolute;right:0;transform:translate(calc(100% + var(--ng-doc-base-gutter)))}:hostspan{display:inline-flex}:hostspan .ng-doc-text{width:auto}:host .ng-doc-text-left,:host .ng-doc-text-right{display:flex;justify-content:center;flex-shrink:0;min-height:var(--ng-doc-line-height);align-items:center}:host .ng-doc-text-left ::ng-deep>ng-doc-svg-icon,:host .ng-doc-text-right ::ng-deep>ng-doc-svg-icon{display:flex;min-height:var(--ng-doc-line-height)}:host .ng-doc-text{width:100%}:host .ng-doc-text:empty{display:none}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty){width:var(--ng-doc-text-left-width)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty)~.ng-doc-text{margin-left:var(--ng-doc-base-gutter)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-right:not(:empty){width:var(--ng-doc-text-right-width);margin-left:var(--ng-doc-base-gutter)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocTextComponent, isStandalone: true, selector: "[ng-doc-text]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, absoluteContent: { classPropertyName: "absoluteContent", publicName: "absoluteContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-text-size": "size()", "attr.data-ng-doc-text-color": "color()", "attr.data-ng-doc-text-align": "align()", "attr.data-ng-doc-text-absolute": "absoluteContent()" }, classAttribute: "ngde" }, queries: [{ propertyName: "leftContent", first: true, predicate: NgDocTextLeftDirective, descendants: true, isSignal: true }, { propertyName: "rightContent", first: true, predicate: NgDocTextRightDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (leftContent()) {\n  <span class=\"ng-doc-text-left\">\n    <ng-content select=\"[ngDocTextLeft]\"></ng-content>\n  </span>\n}\n<span class=\"ng-doc-text\">\n  <ng-content></ng-content>\n</span>\n@if (rightContent()) {\n  <span class=\"ng-doc-text-right\">\n    <ng-content select=\"[ngDocTextRight]\"></ng-content>\n  </span>\n}\n", styles: ["::ng-deep :root{--ng-doc-text-left-width: auto;--ng-doc-text-right-width: auto}:host{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);position:relative;display:flex;align-items:center}:host[data-ng-doc-text-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 18px}:host[data-ng-doc-text-color=muted]{--ng-doc-text: var(--ng-doc-text-muted)}:host[data-ng-doc-text-align=center] .ng-doc-text{text-align:center}:host[data-ng-doc-text-align=right] .ng-doc-text{text-align:right}:host[data-ng-doc-text-absolute=true] .ng-doc-text-left{position:absolute;transform:translate(calc(-100% - var(--ng-doc-base-gutter)))}:host[data-ng-doc-text-absolute=true] .ng-doc-text-right{position:absolute;right:0;transform:translate(calc(100% + var(--ng-doc-base-gutter)))}:hostspan{display:inline-flex}:hostspan .ng-doc-text{width:auto}:host .ng-doc-text-left,:host .ng-doc-text-right{display:flex;justify-content:center;flex-shrink:0;min-height:var(--ng-doc-line-height);align-items:center}:host .ng-doc-text-left ::ng-deep>ng-doc-svg-icon,:host .ng-doc-text-right ::ng-deep>ng-doc-svg-icon{display:flex;min-height:var(--ng-doc-line-height)}:host .ng-doc-text{width:100%}:host .ng-doc-text:empty{display:none}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty){width:var(--ng-doc-text-left-width)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty)~.ng-doc-text{margin-left:var(--ng-doc-base-gutter)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-right:not(:empty){width:var(--ng-doc-text-right-width);margin-left:var(--ng-doc-base-gutter)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng-doc-text]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@if (leftContent) {\n  <span class=\"ng-doc-text-left\">\n    <ng-content select=\"[ngDocTextLeft]\"></ng-content>\n  </span>\n}\n<span class=\"ng-doc-text\">\n  <ng-content></ng-content>\n</span>\n@if (rightContent) {\n  <span class=\"ng-doc-text-right\">\n    <ng-content select=\"[ngDocTextRight]\"></ng-content>\n  </span>\n}\n", styles: ["::ng-deep :root{--ng-doc-text-left-width: auto;--ng-doc-text-right-width: auto}:host{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);position:relative;display:flex;align-items:center}:host[data-ng-doc-text-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 18px}:host[data-ng-doc-text-color=muted]{--ng-doc-text: var(--ng-doc-text-muted)}:host[data-ng-doc-text-align=center] .ng-doc-text{text-align:center}:host[data-ng-doc-text-align=right] .ng-doc-text{text-align:right}:host[data-ng-doc-text-absolute=true] .ng-doc-text-left{position:absolute;transform:translate(calc(-100% - var(--ng-doc-base-gutter)))}:host[data-ng-doc-text-absolute=true] .ng-doc-text-right{position:absolute;right:0;transform:translate(calc(100% + var(--ng-doc-base-gutter)))}:hostspan{display:inline-flex}:hostspan .ng-doc-text{width:auto}:host .ng-doc-text-left,:host .ng-doc-text-right{display:flex;justify-content:center;flex-shrink:0;min-height:var(--ng-doc-line-height);align-items:center}:host .ng-doc-text-left ::ng-deep>ng-doc-svg-icon,:host .ng-doc-text-right ::ng-deep>ng-doc-svg-icon{display:flex;min-height:var(--ng-doc-line-height)}:host .ng-doc-text{width:100%}:host .ng-doc-text:empty{display:none}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty){width:var(--ng-doc-text-left-width)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty)~.ng-doc-text{margin-left:var(--ng-doc-base-gutter)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-right:not(:empty){width:var(--ng-doc-text-right-width);margin-left:var(--ng-doc-base-gutter)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-text-size']
-            }], color: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-text-color']
-            }], align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-text-align']
-            }], absoluteContent: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-text-absolute']
-            }], leftContent: [{
-                type: ContentChild,
-                args: [NgDocTextLeftDirective]
-            }], rightContent: [{
-                type: ContentChild,
-                args: [NgDocTextRightDirective]
-            }], ngDocElement: [{
-                type: HostBinding,
-                args: ['class.ngde']
-            }] } });
+            args: [{ selector: '[ng-doc-text]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngde',
+                        '[attr.data-ng-doc-text-size]': 'size()',
+                        '[attr.data-ng-doc-text-color]': 'color()',
+                        '[attr.data-ng-doc-text-align]': 'align()',
+                        '[attr.data-ng-doc-text-absolute]': 'absoluteContent()',
+                    }, template: "@if (leftContent()) {\n  <span class=\"ng-doc-text-left\">\n    <ng-content select=\"[ngDocTextLeft]\"></ng-content>\n  </span>\n}\n<span class=\"ng-doc-text\">\n  <ng-content></ng-content>\n</span>\n@if (rightContent()) {\n  <span class=\"ng-doc-text-right\">\n    <ng-content select=\"[ngDocTextRight]\"></ng-content>\n  </span>\n}\n", styles: ["::ng-deep :root{--ng-doc-text-left-width: auto;--ng-doc-text-right-width: auto}:host{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);position:relative;display:flex;align-items:center}:host[data-ng-doc-text-size=small]{--ng-doc-font-size: 14px;--ng-doc-line-height: 18px}:host[data-ng-doc-text-color=muted]{--ng-doc-text: var(--ng-doc-text-muted)}:host[data-ng-doc-text-align=center] .ng-doc-text{text-align:center}:host[data-ng-doc-text-align=right] .ng-doc-text{text-align:right}:host[data-ng-doc-text-absolute=true] .ng-doc-text-left{position:absolute;transform:translate(calc(-100% - var(--ng-doc-base-gutter)))}:host[data-ng-doc-text-absolute=true] .ng-doc-text-right{position:absolute;right:0;transform:translate(calc(100% + var(--ng-doc-base-gutter)))}:hostspan{display:inline-flex}:hostspan .ng-doc-text{width:auto}:host .ng-doc-text-left,:host .ng-doc-text-right{display:flex;justify-content:center;flex-shrink:0;min-height:var(--ng-doc-line-height);align-items:center}:host .ng-doc-text-left ::ng-deep>ng-doc-svg-icon,:host .ng-doc-text-right ::ng-deep>ng-doc-svg-icon{display:flex;min-height:var(--ng-doc-line-height)}:host .ng-doc-text{width:100%}:host .ng-doc-text:empty{display:none}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty){width:var(--ng-doc-text-left-width)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-left:not(:empty)~.ng-doc-text{margin-left:var(--ng-doc-base-gutter)}:host[data-ng-doc-text-absolute=false] .ng-doc-text-right:not(:empty){width:var(--ng-doc-text-right-width);margin-left:var(--ng-doc-base-gutter)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], absoluteContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteContent", required: false }] }], leftContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgDocTextLeftDirective), { isSignal: true }] }], rightContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgDocTextRightDirective), { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.