@taiga-ui/addon-doc 4.52.0-canary.a59c4d0 → 4.52.0-canary.aaf153c
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 +31 -41
- package/components/code/index.d.ts +2 -1
- package/components/copy/index.d.ts +1 -1
- package/components/example/example.component.d.ts +1 -1
- package/fesm2022/taiga-ui-addon-doc-components.mjs +11 -16
- package/fesm2022/taiga-ui-addon-doc-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc-utils.mjs +1 -1
- package/fesm2022/taiga-ui-addon-doc-utils.mjs.map +1 -1
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
Install main packages:
|
|
12
12
|
|
|
13
13
|
```
|
|
14
|
-
npm i @taiga-ui/{cdk,core,kit
|
|
14
|
+
npm i @taiga-ui/{cdk,core,kit}
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
Install doc:
|
|
@@ -24,24 +24,22 @@ npm i @taiga-ui/addon-doc
|
|
|
24
24
|
|
|
25
25
|
> You can also see [community made guide](https://habr.com/ru/company/europlan/blog/559804/) in Russian
|
|
26
26
|
|
|
27
|
-
1. Include `
|
|
27
|
+
1. Include `TuiDocMain` in your App imports and use in your template:
|
|
28
28
|
|
|
29
29
|
```html
|
|
30
30
|
<tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
2. Configure languages to highlight in your
|
|
33
|
+
2. Configure languages to highlight in your root providers:
|
|
34
34
|
|
|
35
35
|
```typescript
|
|
36
36
|
import {Component} from '@angular/core';
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
|
|
37
|
+
import {TuiDocMain} from '@taiga-ui/addon-doc';
|
|
38
|
+
import {HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
|
|
40
39
|
import {App} from './app.component';
|
|
41
40
|
|
|
42
41
|
@Component({
|
|
43
|
-
|
|
44
|
-
imports: [TuiDocMainModule],
|
|
42
|
+
imports: [TuiDocMain],
|
|
45
43
|
providers: [
|
|
46
44
|
{
|
|
47
45
|
provide: HIGHLIGHT_OPTIONS,
|
|
@@ -81,10 +79,10 @@ npm i @taiga-ui/addon-doc
|
|
|
81
79
|
|
|
82
80
|
const appRoutes: Routes = [
|
|
83
81
|
{
|
|
84
|
-
path: '
|
|
85
|
-
|
|
82
|
+
path: 'doc-page-1',
|
|
83
|
+
loadComponent: async () => (await import('../doc-page-1')).DocPage,
|
|
86
84
|
data: {
|
|
87
|
-
title: '
|
|
85
|
+
title: 'Documentation page #1',
|
|
88
86
|
},
|
|
89
87
|
},
|
|
90
88
|
// ...
|
|
@@ -96,42 +94,34 @@ npm i @taiga-ui/addon-doc
|
|
|
96
94
|
|
|
97
95
|
5. Create pages.
|
|
98
96
|
|
|
99
|
-
_Module:_
|
|
100
|
-
|
|
101
|
-
```ts
|
|
102
|
-
import {TuiAddonDoc} from '@taiga-ui/addon-doc';
|
|
103
|
-
|
|
104
|
-
@Component({
|
|
105
|
-
standalone: true,
|
|
106
|
-
imports: [TuiAddonDoc, SuperComponent],
|
|
107
|
-
})
|
|
108
|
-
export class App {}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
97
|
_Component:_
|
|
112
98
|
|
|
113
99
|
```ts
|
|
114
100
|
// ..
|
|
115
101
|
|
|
116
102
|
@Component({
|
|
117
|
-
|
|
118
|
-
selector: 'super',
|
|
103
|
+
selector: 'first-doc-page',
|
|
119
104
|
templateUrl: './super.component.html',
|
|
105
|
+
imports: [TuiAddonDoc],
|
|
120
106
|
})
|
|
121
|
-
export class
|
|
107
|
+
export class DocPage {
|
|
122
108
|
// Keys would be used as tabs for code example
|
|
123
109
|
readonly example = {
|
|
124
110
|
// import a file as a string
|
|
125
|
-
TypeScript: import('./examples/1/index.ts?raw'),
|
|
126
|
-
HTML: import('./examples/1/index.html
|
|
111
|
+
TypeScript: import('./examples/1/index.ts?raw', {with: {loader: 'text'}}),
|
|
112
|
+
HTML: import('./examples/1/index.html', {with: {loader: 'text'}}),
|
|
113
|
+
LESS: '.box { color: red }',
|
|
127
114
|
};
|
|
128
115
|
|
|
129
116
|
readonly inputVariants = ['input 1', 'input 2'];
|
|
130
117
|
}
|
|
131
118
|
```
|
|
132
119
|
|
|
133
|
-
> You can use any tool to import a file as a string. For example, you can use
|
|
134
|
-
>
|
|
120
|
+
> You can use any tool to import a file as a string. For example, you can use:
|
|
121
|
+
>
|
|
122
|
+
> - [Esbuild loaders](https://angular.dev/tools/cli/build-system-migration#file-extension-loader-customization)
|
|
123
|
+
> (recommended)
|
|
124
|
+
> - [Webpack Asset Modules](https://webpack.js.org/guides/asset-modules)
|
|
135
125
|
|
|
136
126
|
_Template:_
|
|
137
127
|
|
|
@@ -139,7 +129,6 @@ npm i @taiga-ui/addon-doc
|
|
|
139
129
|
<tui-doc-page
|
|
140
130
|
header="Super"
|
|
141
131
|
package="SUPER-PACKAGE"
|
|
142
|
-
deprecated
|
|
143
132
|
>
|
|
144
133
|
<ng-template pageTab>
|
|
145
134
|
<!-- default tab name would be used -->
|
|
@@ -158,17 +147,18 @@ npm i @taiga-ui/addon-doc
|
|
|
158
147
|
<tui-doc-demo>
|
|
159
148
|
<super-component [input]="input"></super-component>
|
|
160
149
|
</tui-doc-demo>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
[
|
|
150
|
+
|
|
151
|
+
<table tuiDocAPI>
|
|
152
|
+
<tr
|
|
153
|
+
name="[input]"
|
|
154
|
+
tuiDocAPIItem
|
|
155
|
+
type="T"
|
|
156
|
+
[items]="inputVariants"
|
|
157
|
+
[(value)]="input"
|
|
168
158
|
>
|
|
169
|
-
Some input
|
|
170
|
-
</
|
|
171
|
-
</
|
|
159
|
+
Some input description
|
|
160
|
+
</tr>
|
|
161
|
+
</table>
|
|
172
162
|
</ng-template>
|
|
173
163
|
</tui-doc-page>
|
|
174
164
|
```
|
|
@@ -5,10 +5,11 @@ import * as i0 from "@angular/core";
|
|
|
5
5
|
export declare class TuiDocCode {
|
|
6
6
|
private readonly icons;
|
|
7
7
|
private readonly rawLoader$$;
|
|
8
|
+
private readonly texts;
|
|
8
9
|
protected readonly isServer: boolean;
|
|
9
10
|
protected readonly markdownCodeProcessor: TuiHandler<string, readonly string[]>;
|
|
10
11
|
protected readonly copy$: Subject<void>;
|
|
11
|
-
protected readonly copyText: import("@angular/core").Signal<string
|
|
12
|
+
protected readonly copyText: import("@angular/core").Signal<string>;
|
|
12
13
|
protected readonly icon: import("@angular/core").Signal<string>;
|
|
13
14
|
protected readonly processor: import("@angular/core").Signal<readonly string[] | readonly []>;
|
|
14
15
|
filename: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare class TuiDocCopy {
|
|
3
3
|
private readonly copy$;
|
|
4
|
-
protected readonly texts: import("@angular/core").Signal<readonly [copy: string, copied: string]
|
|
4
|
+
protected readonly texts: import("@angular/core").Signal<readonly [copy: string, copied: string]>;
|
|
5
5
|
protected readonly copied: import("@angular/core").Signal<boolean>;
|
|
6
6
|
protected onClick(): void;
|
|
7
7
|
static ɵfac: i0.ɵɵFactoryDeclaration<TuiDocCopy, never>;
|
|
@@ -8,7 +8,7 @@ export declare class TuiDocExample {
|
|
|
8
8
|
private readonly clipboard;
|
|
9
9
|
private readonly alerts;
|
|
10
10
|
private readonly location;
|
|
11
|
-
private readonly copyTexts
|
|
11
|
+
private readonly copyTexts;
|
|
12
12
|
private readonly processContent;
|
|
13
13
|
private readonly rawLoader$$;
|
|
14
14
|
protected readonly fullscreenEnabled: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, Pipe, Input, Directive, EventEmitter, Output, PLATFORM_ID,
|
|
2
|
+
import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, Pipe, Input, Directive, EventEmitter, Output, PLATFORM_ID, computed, signal, ContentChild, ViewChild, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, ElementRef, effect } from '@angular/core';
|
|
3
3
|
import { TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_ICONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_CODE_EDITOR, TUI_DOC_CODE_ACTIONS, TUI_DOC_TITLE, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEARCH_ENABLED, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_DIRECTION_ENABLED, TUI_DOC_SEE_ALSO, TUI_DOC_SUPPORT_LANGUAGE, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
|
|
4
4
|
import { Location, isPlatformServer, JsonPipe, NgTemplateOutlet, DOCUMENT, AsyncPipe, NgComponentOutlet, TitleCasePipe, KeyValuePipe } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
@@ -28,7 +28,7 @@ import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-i
|
|
|
28
28
|
import { TuiButton } from '@taiga-ui/core/components/button';
|
|
29
29
|
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
|
|
30
30
|
import { Highlight } from 'ngx-highlightjs';
|
|
31
|
-
import { BehaviorSubject, Subject,
|
|
31
|
+
import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip, merge, filter, mergeMap, ReplaySubject, take, debounceTime, combineLatest, fromEvent, of } from 'rxjs';
|
|
32
32
|
import { TUI_FALSE_HANDLER, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
|
|
33
33
|
import { __decorate } from 'tslib';
|
|
34
34
|
import * as i4 from '@taiga-ui/cdk/directives/item';
|
|
@@ -55,7 +55,6 @@ import * as i3$1 from '@taiga-ui/core/components/data-list';
|
|
|
55
55
|
import { TuiDataList } from '@taiga-ui/core/components/data-list';
|
|
56
56
|
import { tuiRgbToHex } from '@taiga-ui/cdk/utils/color';
|
|
57
57
|
import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
|
|
58
|
-
import { TuiLet } from '@taiga-ui/cdk/directives/let';
|
|
59
58
|
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
|
|
60
59
|
import { TuiLink, tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
|
|
61
60
|
import { TuiLoader } from '@taiga-ui/core/components/loader';
|
|
@@ -263,10 +262,11 @@ class TuiDocCode {
|
|
|
263
262
|
constructor() {
|
|
264
263
|
this.icons = inject(TUI_DOC_ICONS);
|
|
265
264
|
this.rawLoader$$ = new BehaviorSubject('');
|
|
265
|
+
this.texts = inject(TUI_COPY_TEXTS);
|
|
266
266
|
this.isServer = isPlatformServer(inject(PLATFORM_ID));
|
|
267
267
|
this.markdownCodeProcessor = inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
|
|
268
268
|
this.copy$ = new Subject();
|
|
269
|
-
this.copyText =
|
|
269
|
+
this.copyText = computed(() => this.texts()[0]);
|
|
270
270
|
this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
|
|
271
271
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
|
|
272
272
|
this.filename = '';
|
|
@@ -278,14 +278,14 @@ class TuiDocCode {
|
|
|
278
278
|
return !!this.filename;
|
|
279
279
|
}
|
|
280
280
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
281
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, 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 [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\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-text-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;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
281
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, 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 [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\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-text-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;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
282
282
|
}
|
|
283
283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, decorators: [{
|
|
284
284
|
type: Component,
|
|
285
285
|
args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
286
286
|
'[style.visibility]': 'isServer ? "hidden" : "visible"',
|
|
287
287
|
'[class._has-filename]': 'hasFilename',
|
|
288
|
-
}, 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 [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\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-text-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;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
|
|
288
|
+
}, 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 [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\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-text-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;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
|
|
289
289
|
}], propDecorators: { filename: [{
|
|
290
290
|
type: Input
|
|
291
291
|
}], code: [{
|
|
@@ -296,9 +296,7 @@ const COPIED_TIMEOUT = 1500;
|
|
|
296
296
|
class TuiDocCopy {
|
|
297
297
|
constructor() {
|
|
298
298
|
this.copy$ = new Subject();
|
|
299
|
-
this.texts =
|
|
300
|
-
initialValue: ['', ''],
|
|
301
|
-
});
|
|
299
|
+
this.texts = inject(TUI_COPY_TEXTS);
|
|
302
300
|
this.copied = toSignal(this.copy$.pipe(switchMap(() => timer(COPIED_TIMEOUT).pipe(map(TUI_FALSE_HANDLER), startWith(true)))), { initialValue: false });
|
|
303
301
|
}
|
|
304
302
|
onClick() {
|
|
@@ -816,7 +814,7 @@ class TuiDocExample {
|
|
|
816
814
|
this.clipboard = inject(Clipboard);
|
|
817
815
|
this.alerts = inject(TuiAlertService);
|
|
818
816
|
this.location = inject(WA_LOCATION);
|
|
819
|
-
this.copyTexts
|
|
817
|
+
this.copyTexts = inject(TUI_COPY_TEXTS);
|
|
820
818
|
this.processContent = inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR);
|
|
821
819
|
this.rawLoader$$ = new BehaviorSubject({});
|
|
822
820
|
this.fullscreenEnabled = inject(DOCUMENT).fullscreenEnabled;
|
|
@@ -830,9 +828,7 @@ class TuiDocExample {
|
|
|
830
828
|
this.defaultTab = this.texts[this.defaultTabIndex];
|
|
831
829
|
this.activeItemIndex = this.defaultTabIndex;
|
|
832
830
|
this.fullscreen = false;
|
|
833
|
-
this.copy =
|
|
834
|
-
initialValue: '',
|
|
835
|
-
});
|
|
831
|
+
this.copy = computed(() => this.copyTexts()[0]);
|
|
836
832
|
this.loading = signal(false);
|
|
837
833
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoadRecord), map((value) => this.processContent(value))), { initialValue: {} });
|
|
838
834
|
this.id = null;
|
|
@@ -859,7 +855,7 @@ class TuiDocExample {
|
|
|
859
855
|
.finally(() => this.loading.set(false));
|
|
860
856
|
}
|
|
861
857
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
862
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", component: "component", content: "content" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n @if (heading) {\n <h2 class=\"t-title\">\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n }\n @if (id) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n }\n</div>\n@if (description) {\n <h3 class=\"t-description\">\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n </h3>\n}\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n @if (tabs.length > 1) {\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-tabs-with-more>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [
|
|
858
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", component: "component", content: "content" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n @if (heading) {\n <h2 class=\"t-title\">\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n }\n @if (id) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n }\n</div>\n@if (description) {\n <h3 class=\"t-description\">\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n </h3>\n}\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n @if (tabs.length > 1) {\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-tabs-with-more>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [loading]=\"loading()\"\n [overlay]=\"true\"\n (click)=\"edit(processor())\"\n >\n @if (codeEditor?.content; as content) {\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n } @else {\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n }\n </tui-loader>\n }\n @if (fullscreenEnabled) {\n <button\n appearance=\"flat\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n (click)=\"fullscreen = !fullscreen\"\n >\n Fullscreen\n </button>\n }\n </div>\n }\n @for (tab of tabs; track tab) {\n <div class=\"t-content\">\n @if ($index === defaultTabIndex) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === $index && $index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *ngComponentOutlet=\"component | async\" />\n </section>\n }\n @let code = processor()[tabs[$index] || 0] || '';\n <tui-doc-code\n [code]=\"code\"\n [style.display]=\"activeItemIndex === $index && $index !== defaultTabIndex ? 'block' : 'none'\"\n >\n @for (action of codeActions; track action) {\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n }\n </tui-doc-code>\n </div>\n }\n }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i4.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
863
859
|
}
|
|
864
860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
865
861
|
type: Component,
|
|
@@ -873,7 +869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
873
869
|
TuiDocCode,
|
|
874
870
|
TuiDocExampleGetTabsPipe,
|
|
875
871
|
TuiFullscreen,
|
|
876
|
-
TuiLet,
|
|
877
872
|
TuiLink,
|
|
878
873
|
TuiLoader,
|
|
879
874
|
TuiMapperPipe,
|
|
@@ -881,7 +876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
881
876
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
882
877
|
'[attr.id]': 'id',
|
|
883
878
|
'[class._fullsize]': 'fullsize',
|
|
884
|
-
}, template: "<div class=\"t-title-block\">\n @if (heading) {\n <h2 class=\"t-title\">\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n }\n @if (id) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n }\n</div>\n@if (description) {\n <h3 class=\"t-description\">\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n </h3>\n}\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n @if (tabs.length > 1) {\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-tabs-with-more>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [
|
|
879
|
+
}, template: "<div class=\"t-title-block\">\n @if (heading) {\n <h2 class=\"t-title\">\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n }\n @if (id) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n }\n</div>\n@if (description) {\n <h3 class=\"t-description\">\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n </h3>\n}\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n @if (tabs.length > 1) {\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-tabs-with-more>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [loading]=\"loading()\"\n [overlay]=\"true\"\n (click)=\"edit(processor())\"\n >\n @if (codeEditor?.content; as content) {\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n } @else {\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n }\n </tui-loader>\n }\n @if (fullscreenEnabled) {\n <button\n appearance=\"flat\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n (click)=\"fullscreen = !fullscreen\"\n >\n Fullscreen\n </button>\n }\n </div>\n }\n @for (tab of tabs; track tab) {\n <div class=\"t-content\">\n @if ($index === defaultTabIndex) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === $index && $index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *ngComponentOutlet=\"component | async\" />\n </section>\n }\n @let code = processor()[tabs[$index] || 0] || '';\n <tui-doc-code\n [code]=\"code\"\n [style.display]=\"activeItemIndex === $index && $index !== defaultTabIndex ? 'block' : 'none'\"\n >\n @for (action of codeActions; track action) {\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n }\n </tui-doc-code>\n </div>\n }\n }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
|
|
885
880
|
}], propDecorators: { id: [{
|
|
886
881
|
type: Input
|
|
887
882
|
}], heading: [{
|