@taiga-ui/addon-doc 4.52.0-canary.a59c4d0 → 4.52.0-canary.bf9131e
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 -14
- 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 +5 -6
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';
|
|
@@ -263,10 +263,11 @@ class TuiDocCode {
|
|
|
263
263
|
constructor() {
|
|
264
264
|
this.icons = inject(TUI_DOC_ICONS);
|
|
265
265
|
this.rawLoader$$ = new BehaviorSubject('');
|
|
266
|
+
this.texts = inject(TUI_COPY_TEXTS);
|
|
266
267
|
this.isServer = isPlatformServer(inject(PLATFORM_ID));
|
|
267
268
|
this.markdownCodeProcessor = inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
|
|
268
269
|
this.copy$ = new Subject();
|
|
269
|
-
this.copyText =
|
|
270
|
+
this.copyText = computed(() => this.texts()[0]);
|
|
270
271
|
this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
|
|
271
272
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
|
|
272
273
|
this.filename = '';
|
|
@@ -278,14 +279,14 @@ class TuiDocCode {
|
|
|
278
279
|
return !!this.filename;
|
|
279
280
|
}
|
|
280
281
|
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 }); }
|
|
282
|
+
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
283
|
}
|
|
283
284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, decorators: [{
|
|
284
285
|
type: Component,
|
|
285
286
|
args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
286
287
|
'[style.visibility]': 'isServer ? "hidden" : "visible"',
|
|
287
288
|
'[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"] }]
|
|
289
|
+
}, 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
290
|
}], propDecorators: { filename: [{
|
|
290
291
|
type: Input
|
|
291
292
|
}], code: [{
|
|
@@ -296,9 +297,7 @@ const COPIED_TIMEOUT = 1500;
|
|
|
296
297
|
class TuiDocCopy {
|
|
297
298
|
constructor() {
|
|
298
299
|
this.copy$ = new Subject();
|
|
299
|
-
this.texts =
|
|
300
|
-
initialValue: ['', ''],
|
|
301
|
-
});
|
|
300
|
+
this.texts = inject(TUI_COPY_TEXTS);
|
|
302
301
|
this.copied = toSignal(this.copy$.pipe(switchMap(() => timer(COPIED_TIMEOUT).pipe(map(TUI_FALSE_HANDLER), startWith(true)))), { initialValue: false });
|
|
303
302
|
}
|
|
304
303
|
onClick() {
|
|
@@ -816,7 +815,7 @@ class TuiDocExample {
|
|
|
816
815
|
this.clipboard = inject(Clipboard);
|
|
817
816
|
this.alerts = inject(TuiAlertService);
|
|
818
817
|
this.location = inject(WA_LOCATION);
|
|
819
|
-
this.copyTexts
|
|
818
|
+
this.copyTexts = inject(TUI_COPY_TEXTS);
|
|
820
819
|
this.processContent = inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR);
|
|
821
820
|
this.rawLoader$$ = new BehaviorSubject({});
|
|
822
821
|
this.fullscreenEnabled = inject(DOCUMENT).fullscreenEnabled;
|
|
@@ -830,9 +829,7 @@ class TuiDocExample {
|
|
|
830
829
|
this.defaultTab = this.texts[this.defaultTabIndex];
|
|
831
830
|
this.activeItemIndex = this.defaultTabIndex;
|
|
832
831
|
this.fullscreen = false;
|
|
833
|
-
this.copy =
|
|
834
|
-
initialValue: '',
|
|
835
|
-
});
|
|
832
|
+
this.copy = computed(() => this.copyTexts()[0]);
|
|
836
833
|
this.loading = signal(false);
|
|
837
834
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoadRecord), map((value) => this.processContent(value))), { initialValue: {} });
|
|
838
835
|
this.id = null;
|
|
@@ -859,7 +856,7 @@ class TuiDocExample {
|
|
|
859
856
|
.finally(() => this.loading.set(false));
|
|
860
857
|
}
|
|
861
858
|
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 [
|
|
859
|
+
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 <tui-doc-code\n *tuiLet=\"processor()[tabs[$index] || 0] || '' as 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: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { 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
860
|
}
|
|
864
861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
865
862
|
type: Component,
|
|
@@ -881,7 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
881
878
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
882
879
|
'[attr.id]': 'id',
|
|
883
880
|
'[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 [
|
|
881
|
+
}, 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 <tui-doc-code\n *tuiLet=\"processor()[tabs[$index] || 0] || '' as 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
882
|
}], propDecorators: { id: [{
|
|
886
883
|
type: Input
|
|
887
884
|
}], heading: [{
|