@taiga-ui/addon-doc 5.0.0-canary.3420efb → 5.0.0-canary.47548da
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.
package/README.md
CHANGED
|
@@ -35,24 +35,21 @@ npm i @taiga-ui/addon-doc
|
|
|
35
35
|
```typescript
|
|
36
36
|
import {Component} from '@angular/core';
|
|
37
37
|
import {TuiDocMain} from '@taiga-ui/addon-doc';
|
|
38
|
-
import {
|
|
38
|
+
import {provideHighlightOptions} from 'ngx-highlightjs';
|
|
39
39
|
import {App} from './app.component';
|
|
40
40
|
|
|
41
41
|
@Component({
|
|
42
42
|
imports: [TuiDocMain],
|
|
43
43
|
providers: [
|
|
44
|
-
{
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
less: () => import('highlight.js/lib/languages/less' as string),
|
|
52
|
-
xml: () => import('highlight.js/lib/languages/xml' as string),
|
|
53
|
-
},
|
|
44
|
+
provideHighlightOptions({
|
|
45
|
+
coreLibraryLoader: () => import('highlight.js/lib/core' as string),
|
|
46
|
+
lineNumbersLoader: () => import('ngx-highlightjs/line-numbers' as string), // Optional, only if you want the line numbers
|
|
47
|
+
languages: {
|
|
48
|
+
typescript: () => import('highlight.js/lib/languages/typescript' as string),
|
|
49
|
+
less: () => import('highlight.js/lib/languages/less' as string),
|
|
50
|
+
xml: () => import('highlight.js/lib/languages/xml' as string),
|
|
54
51
|
},
|
|
55
|
-
},
|
|
52
|
+
}),
|
|
56
53
|
],
|
|
57
54
|
})
|
|
58
55
|
export class App {}
|
|
@@ -29,7 +29,8 @@ import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
|
|
|
29
29
|
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
30
30
|
import { TuiButton } from '@taiga-ui/core/components/button';
|
|
31
31
|
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
|
|
32
|
-
import {
|
|
32
|
+
import { HighlightAuto } from 'ngx-highlightjs';
|
|
33
|
+
import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
|
|
33
34
|
import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip, filter, mergeMap, ReplaySubject, take, debounceTime, combineLatest, fromEvent, of } from 'rxjs';
|
|
34
35
|
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
|
|
35
36
|
import * as i4$1 from '@taiga-ui/cdk/directives/item';
|
|
@@ -70,6 +71,7 @@ import { TuiBadge } from '@taiga-ui/kit/components/badge';
|
|
|
70
71
|
import { TuiButtonSelect } from '@taiga-ui/kit/directives/button-select';
|
|
71
72
|
import { TuiFlagPipe } from '@taiga-ui/kit/pipes/flag';
|
|
72
73
|
import { TuiRoot } from '@taiga-ui/core/components/root';
|
|
74
|
+
import { TuiFade } from '@taiga-ui/kit/directives/fade';
|
|
73
75
|
import { TuiAutoColorPipe } from '@taiga-ui/kit/pipes/auto-color';
|
|
74
76
|
|
|
75
77
|
class TuiDocAPI {
|
|
@@ -266,14 +268,14 @@ class TuiDocCode {
|
|
|
266
268
|
this.rawLoader$$.next(this.code());
|
|
267
269
|
}
|
|
268
270
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
269
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, usesOnChanges: true, ngImport: i0, template: "@if (filename()) {\n <p class=\"t-header\">\n {{ filename() }}\n </p>\n}\n@for (content of processor(); track content) {\n <pre class=\"t-code\">\n <code [
|
|
271
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, usesOnChanges: true, ngImport: i0, template: "@if (filename()) {\n <p class=\"t-header\">\n {{ filename() }}\n </p>\n}\n@for (content of processor(); track content) {\n <pre class=\"t-code\">\n @if (lineNumbers()) {\n <code [highlightAuto]=\"content\" lineNumbers></code>\n } @else {\n <code [highlightAuto]=\"content\"></code>\n }\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText() }}\n </button>\n <ng-content />\n </div>\n </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-body-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;display:flex;inset-block-start:.75rem;inset-inline-end:.75rem;justify-content:center;align-items:center;flex-direction:row-reverse;background:var(--tui-background-base-alt);border-radius:var(--tui-radius-xs);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-code-actions{background:var(--tui-background-elevation-2)}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-body-m);font-size:.875rem;padding:1rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: HighlightAuto, selector: "[highlightAuto]", inputs: ["highlightAuto", "languages"], outputs: ["highlighted"] }, { kind: "directive", type: HighlightLineNumbers, selector: "[highlight][lineNumbers], [highlightAuto][lineNumbers]", inputs: ["startFrom", "singleLine"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
270
272
|
}
|
|
271
273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocCode, decorators: [{
|
|
272
274
|
type: Component,
|
|
273
|
-
args: [{ selector: 'tui-doc-code', imports: [ClipboardModule,
|
|
275
|
+
args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, HighlightAuto, HighlightLineNumbers, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
274
276
|
'[style.visibility]': 'isServer ? "hidden" : "visible"',
|
|
275
277
|
'[class._has-filename]': 'hasFilename',
|
|
276
|
-
}, template: "@if (filename()) {\n <p class=\"t-header\">\n {{ filename() }}\n </p>\n}\n@for (content of processor(); track content) {\n <pre class=\"t-code\">\n <code [
|
|
278
|
+
}, template: "@if (filename()) {\n <p class=\"t-header\">\n {{ filename() }}\n </p>\n}\n@for (content of processor(); track content) {\n <pre class=\"t-code\">\n @if (lineNumbers()) {\n <code [highlightAuto]=\"content\" lineNumbers></code>\n } @else {\n <code [highlightAuto]=\"content\"></code>\n }\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText() }}\n </button>\n <ng-content />\n </div>\n </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-body-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;display:flex;inset-block-start:.75rem;inset-inline-end:.75rem;justify-content:center;align-items:center;flex-direction:row-reverse;background:var(--tui-background-base-alt);border-radius:var(--tui-radius-xs);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-code-actions{background:var(--tui-background-elevation-2)}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-body-m);font-size:.875rem;padding:1rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}\n"] }]
|
|
277
279
|
}] });
|
|
278
280
|
|
|
279
281
|
const COPIED_TIMEOUT = 1500;
|
|
@@ -754,7 +756,7 @@ class TuiDocNavigation {
|
|
|
754
756
|
target.remove();
|
|
755
757
|
}
|
|
756
758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;background:var(--tui-background-base);--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{font:var(--tui-font-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$2.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i2$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i6$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-font-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$2.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i2$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i6$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
758
760
|
}
|
|
759
761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocNavigation, decorators: [{
|
|
760
762
|
type: Component,
|
|
@@ -776,7 +778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
776
778
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
|
|
777
779
|
'[class._open]': 'menuOpen',
|
|
778
780
|
'(window:keydown)': 'onFocusSearch($event)',
|
|
779
|
-
}, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;background:var(--tui-background-base);--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{font:var(--tui-font-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
|
|
781
|
+
}, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-font-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
|
|
780
782
|
}], ctorParameters: () => [] });
|
|
781
783
|
|
|
782
784
|
class TuiDocHeader {
|
|
@@ -791,11 +793,11 @@ class TuiDocHeader {
|
|
|
791
793
|
effect(() => this.routeEvents() && this.open.set(false));
|
|
792
794
|
}
|
|
793
795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
794
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "@if (breakpoint() === 'mobile') {\n <button\n appearance=\"flat-grayscale\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"open.set(true)\"\n ></button>\n}\n\n<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"start\"\n class=\"t-drawer\"\n [overlay]=\"true\"\n (click.self)=\"open.set(false)\"\n>\n <tui-doc-navigation />\n</tui-drawer>\n\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;z-index:1;display:flex;inset:0 0 auto;block-size:4.125rem;align-items:center;padding:0 1.5rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}:host:after{content:\"\";position:fixed;inset:3.
|
|
796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "@if (breakpoint() === 'mobile') {\n <button\n appearance=\"flat-grayscale\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"open.set(true)\"\n ></button>\n}\n\n<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"start\"\n class=\"t-drawer\"\n [overlay]=\"true\"\n (click.self)=\"open.set(false)\"\n>\n <tui-doc-navigation />\n</tui-drawer>\n\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;z-index:1;display:flex;inset:0 0 auto;block-size:4.125rem;align-items:center;padding:0 1.5rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}:host:after{content:\"\";position:fixed;inset:3.625rem 0 0;pointer-events:none;border-radius:var(--tui-radius-xl);border:.5rem solid var(--tui-background-base-alt);box-shadow:-5rem 0 var(--tui-background-base-alt),5rem 0 var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) :host:after{border:.5rem solid var(--tui-background-elevation-2);box-shadow:-5rem 0 var(--tui-background-elevation-2),5rem 0 var(--tui-background-elevation-2)}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-h6)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}.t-drawer{inline-size:17.25rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiDrawer, selector: "tui-drawer", inputs: ["direction", "overlay"] }, { kind: "directive", type: TuiPopup, selector: "ng-template[tuiPopup]", inputs: ["tuiPopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
795
797
|
}
|
|
796
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocHeader, decorators: [{
|
|
797
799
|
type: Component,
|
|
798
|
-
args: [{ selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiButton, TuiDocNavigation, TuiDrawer, TuiPopup], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (breakpoint() === 'mobile') {\n <button\n appearance=\"flat-grayscale\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"open.set(true)\"\n ></button>\n}\n\n<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"start\"\n class=\"t-drawer\"\n [overlay]=\"true\"\n (click.self)=\"open.set(false)\"\n>\n <tui-doc-navigation />\n</tui-drawer>\n\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;z-index:1;display:flex;inset:0 0 auto;block-size:4.125rem;align-items:center;padding:0 1.5rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}:host:after{content:\"\";position:fixed;inset:3.
|
|
800
|
+
args: [{ selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiButton, TuiDocNavigation, TuiDrawer, TuiPopup], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (breakpoint() === 'mobile') {\n <button\n appearance=\"flat-grayscale\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"open.set(true)\"\n ></button>\n}\n\n<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"start\"\n class=\"t-drawer\"\n [overlay]=\"true\"\n (click.self)=\"open.set(false)\"\n>\n <tui-doc-navigation />\n</tui-drawer>\n\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;z-index:1;display:flex;inset:0 0 auto;block-size:4.125rem;align-items:center;padding:0 1.5rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}:host:after{content:\"\";position:fixed;inset:3.625rem 0 0;pointer-events:none;border-radius:var(--tui-radius-xl);border:.5rem solid var(--tui-background-base-alt);box-shadow:-5rem 0 var(--tui-background-base-alt),5rem 0 var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) :host:after{border:.5rem solid var(--tui-background-elevation-2);box-shadow:-5rem 0 var(--tui-background-elevation-2),5rem 0 var(--tui-background-elevation-2)}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-h6)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}.t-drawer{inline-size:17.25rem}\n"] }]
|
|
799
801
|
}], ctorParameters: () => [] });
|
|
800
802
|
|
|
801
803
|
class TuiDocSourceCode {
|
|
@@ -893,11 +895,11 @@ class TuiDocMain {
|
|
|
893
895
|
this.doc.documentElement.setAttribute('dir', dir === 'ltr' ? 'rtl' : 'ltr');
|
|
894
896
|
}
|
|
895
897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
896
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root>\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n @if (dir) {\n <button\n appearance=\"\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [style.border-radius.%]=\"100\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon\n [badge]=\"icons.ltr.direction\"\n [icon]=\"icons.ltr.preview\"\n />\n </button>\n }\n\n <button\n appearance=\"\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n >\n <tui-icon [icon]=\"icon()\" />\n </button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["html
|
|
898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root>\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n @if (dir) {\n <button\n appearance=\"\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [style.border-radius.%]=\"100\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon\n [badge]=\"icons.ltr.direction\"\n [icon]=\"icons.ltr.preview\"\n />\n </button>\n }\n\n <button\n appearance=\"\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n >\n <tui-icon [icon]=\"icon()\" />\n </button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["html:has(body[tuiTheme=dark]){background:#222}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4.125rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4.125rem;bottom:0;inline-size:16.5rem;box-sizing:border-box}tui-doc-navigation.tui-doc-navigation:before,tui-doc-navigation.tui-doc-navigation:after{content:\"\";position:absolute;inset:-.25rem 0 .25rem;pointer-events:none;border-radius:var(--tui-radius-m);border:.25rem solid var(--tui-background-base-alt)}[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:before,[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:after{border-color:var(--tui-background-elevation-2)}tui-doc-navigation.tui-doc-navigation:after{inset-inline-start:100%;inline-size:200vw;margin-inline-start:-.25rem}@media screen and (max-width: 767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.5rem}@media screen and (max-width: 767.4px){.tui-doc-content{margin-inline:0}}.tui-doc-outlet+*{display:block}button.tui-doc-switch-direction,button.tui-doc-dark-mode-switch{margin-inline-start:1rem;background:var(--tui-background-base)}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary)}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}tui-root>tui-scroll-controls .t-bar.t-bar_vertical{inset-block:4.5rem 1rem;transform:translate(-.75rem);opacity:.5}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
897
899
|
}
|
|
898
900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocMain, decorators: [{
|
|
899
901
|
type: Component,
|
|
900
|
-
args: [{ selector: 'tui-doc-main', imports: [RouterOutlet, TuiButton, TuiDocHeader, TuiDocNavigation, TuiIcon, TuiRoot], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root>\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n @if (dir) {\n <button\n appearance=\"\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [style.border-radius.%]=\"100\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon\n [badge]=\"icons.ltr.direction\"\n [icon]=\"icons.ltr.preview\"\n />\n </button>\n }\n\n <button\n appearance=\"\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n >\n <tui-icon [icon]=\"icon()\" />\n </button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["html
|
|
902
|
+
args: [{ selector: 'tui-doc-main', imports: [RouterOutlet, TuiButton, TuiDocHeader, TuiDocNavigation, TuiIcon, TuiRoot], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root>\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n @if (dir) {\n <button\n appearance=\"\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [style.border-radius.%]=\"100\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon\n [badge]=\"icons.ltr.direction\"\n [icon]=\"icons.ltr.preview\"\n />\n </button>\n }\n\n <button\n appearance=\"\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n >\n <tui-icon [icon]=\"icon()\" />\n </button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["html:has(body[tuiTheme=dark]){background:#222}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4.125rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4.125rem;bottom:0;inline-size:16.5rem;box-sizing:border-box}tui-doc-navigation.tui-doc-navigation:before,tui-doc-navigation.tui-doc-navigation:after{content:\"\";position:absolute;inset:-.25rem 0 .25rem;pointer-events:none;border-radius:var(--tui-radius-m);border:.25rem solid var(--tui-background-base-alt)}[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:before,[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:after{border-color:var(--tui-background-elevation-2)}tui-doc-navigation.tui-doc-navigation:after{inset-inline-start:100%;inline-size:200vw;margin-inline-start:-.25rem}@media screen and (max-width: 767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.5rem}@media screen and (max-width: 767.4px){.tui-doc-content{margin-inline:0}}.tui-doc-outlet+*{display:block}button.tui-doc-switch-direction,button.tui-doc-dark-mode-switch{margin-inline-start:1rem;background:var(--tui-background-base)}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary)}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}tui-root>tui-scroll-controls .t-bar.t-bar_vertical{inset-block:4.5rem 1rem;transform:translate(-.75rem);opacity:.5}\n"] }]
|
|
901
903
|
}] });
|
|
902
904
|
|
|
903
905
|
class TuiDocToc {
|
|
@@ -983,7 +985,7 @@ class TuiDocPage {
|
|
|
983
985
|
this.activeItemIndex = model(0);
|
|
984
986
|
}
|
|
985
987
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector, isSignal: true }], ngImport: i0, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p
|
|
988
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector, isSignal: true }], ngImport: i0, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p\n tuiFade\n class=\"t-navigation\"\n >\n @if (tabConnectors().length > 1) {\n <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n routerLinkActive\n [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n routerLinkActive\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-segmented>\n }\n\n @if (package() || path() || type()) {\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n }\n </p>\n </hgroup>\n }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\n <tui-doc-toc />\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n}\n@for (tab of tabs | keyvalue; track tab) {\n @if ($index + tabConnectors().length === activeItemIndex()) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{scrollbar-width:none;-ms-overflow-style:none;display:flex;gap:.625rem;margin-block-start:1rem;overflow:auto}.t-navigation::-webkit-scrollbar,.t-navigation::-webkit-scrollbar-thumb{display:none}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}.t-source-code{display:flex}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "component", type: TuiDocToc, selector: "tui-doc-toc" }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
987
989
|
}
|
|
988
990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPage, decorators: [{
|
|
989
991
|
type: Component,
|
|
@@ -998,10 +1000,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
998
1000
|
TuiDocLanguageSwitcher,
|
|
999
1001
|
TuiDocSourceCode,
|
|
1000
1002
|
TuiDocToc,
|
|
1003
|
+
TuiFade,
|
|
1001
1004
|
TuiHeader,
|
|
1002
1005
|
TuiSegmented,
|
|
1003
1006
|
TuiTitle,
|
|
1004
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p
|
|
1007
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p\n tuiFade\n class=\"t-navigation\"\n >\n @if (tabConnectors().length > 1) {\n <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n routerLinkActive\n [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n routerLinkActive\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-segmented>\n }\n\n @if (package() || path() || type()) {\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n }\n </p>\n </hgroup>\n }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\n <tui-doc-toc />\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n}\n@for (tab of tabs | keyvalue; track tab) {\n @if ($index + tabConnectors().length === activeItemIndex()) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{scrollbar-width:none;-ms-overflow-style:none;display:flex;gap:.625rem;margin-block-start:1rem;overflow:auto}.t-navigation::-webkit-scrollbar,.t-navigation::-webkit-scrollbar-thumb{display:none}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}.t-source-code{display:flex}\n"] }]
|
|
1005
1008
|
}] });
|
|
1006
1009
|
|
|
1007
1010
|
const TUI_THEME_KEY = new InjectionToken(ngDevMode ? 'TUI_THEME_KEY' : '', {
|