@taiga-ui/addon-doc 4.52.0-canary.6ee9658 → 4.52.0-canary.7c53ccc
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/components/{documentation/pipes → api}/inspect.pipe.d.ts +1 -1
- package/components/{documentation/pipes → api}/type-reference.pipe.d.ts +3 -3
- package/components/code/index.d.ts +5 -3
- package/components/demo/index.d.ts +6 -6
- package/components/example/example.component.d.ts +5 -4
- package/components/index.d.ts +0 -10
- package/components/language-switcher/index.d.ts +1 -1
- package/components/navigation/navigation.component.d.ts +4 -3
- package/components/navigation/scroll-into-view.directive.d.ts +5 -3
- package/components/page/page.component.d.ts +1 -2
- package/fesm2022/taiga-ui-addon-doc-components.mjs +162 -478
- package/fesm2022/taiga-ui-addon-doc-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc-services.mjs +3 -3
- package/fesm2022/taiga-ui-addon-doc-utils.mjs +4 -4
- package/fesm2022/taiga-ui-addon-doc-utils.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc.mjs +1 -7
- package/fesm2022/taiga-ui-addon-doc.mjs.map +1 -1
- package/index.d.ts +2 -4
- package/package.json +5 -9
- package/utils/inspect.d.ts +1 -1
- package/components/documentation/documentation-property-connector.directive.d.ts +0 -31
- package/components/documentation/documentation.component.d.ts +0 -23
- package/components/documentation/pipes/cleaner.pipe.d.ts +0 -7
- package/components/documentation/pipes/color.pipe.d.ts +0 -7
- package/components/documentation/pipes/opacity.pipe.d.ts +0 -7
- package/components/documentation/pipes/optional.pipe.d.ts +0 -7
- package/components/documentation/pipes/primitive-polymorpheus-content.pipe.d.ts +0 -7
- package/components/documentation/pipes/strip-optional.pipe.d.ts +0 -7
- package/directives/index.d.ts +0 -1
- package/directives/text-code/text-code.directive.d.ts +0 -9
- package/fesm2022/taiga-ui-addon-doc-directives.mjs +0 -29
- package/fesm2022/taiga-ui-addon-doc-directives.mjs.map +0 -1
|
@@ -1,58 +1,45 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component,
|
|
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,
|
|
2
|
+
import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive, TemplateRef, Pipe, computed, model, PLATFORM_ID, viewChild, ElementRef, contentChild, signal, InjectionToken, effect, contentChildren } from '@angular/core';
|
|
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_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';
|
|
6
6
|
import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
7
7
|
import { ActivatedRoute, UrlSerializer, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
|
|
8
|
-
import {
|
|
9
|
-
import { tuiIsNumber, tuiPx,
|
|
8
|
+
import { tuiInspect, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiRawLoadRecord, tuiTransliterateKeyboardLayout } from '@taiga-ui/addon-doc/utils';
|
|
9
|
+
import { tuiIsNumber, tuiPx, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
10
10
|
import { TuiIcon } from '@taiga-ui/core/components/icon';
|
|
11
|
-
import * as
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
14
|
-
import { TuiTextfield, TuiTextfieldDirective } from '@taiga-ui/core/components/textfield';
|
|
11
|
+
import * as i5 from '@taiga-ui/core/components/input';
|
|
12
|
+
import { TuiInput, TuiInputDirective } from '@taiga-ui/core/components/input';
|
|
13
|
+
import { TuiNotificationService } from '@taiga-ui/core/components/notification';
|
|
15
14
|
import * as i2 from '@taiga-ui/kit/components/data-list-wrapper';
|
|
16
15
|
import { TuiDataListWrapper } from '@taiga-ui/kit/components/data-list-wrapper';
|
|
17
|
-
import * as
|
|
16
|
+
import * as i6 from '@taiga-ui/kit/components/input-number';
|
|
18
17
|
import { TuiInputNumber } from '@taiga-ui/kit/components/input-number';
|
|
19
18
|
import * as i3$1 from '@taiga-ui/kit/components/select';
|
|
20
19
|
import { TuiSelect } from '@taiga-ui/kit/components/select';
|
|
21
20
|
import { TuiSwitch } from '@taiga-ui/kit/components/switch';
|
|
22
21
|
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
|
|
23
22
|
import { TUI_IS_E2E } from '@taiga-ui/cdk/tokens';
|
|
24
|
-
import * as
|
|
25
|
-
import {
|
|
23
|
+
import * as i3 from '@taiga-ui/core/components/textfield';
|
|
24
|
+
import { TuiTextfield } from '@taiga-ui/core/components/textfield';
|
|
25
|
+
import * as i4 from '@taiga-ui/core/portals/dropdown';
|
|
26
26
|
import * as i1$1 from '@angular/cdk/clipboard';
|
|
27
27
|
import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
|
|
28
28
|
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
29
29
|
import { TuiButton } from '@taiga-ui/core/components/button';
|
|
30
30
|
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
|
|
31
31
|
import { Highlight } from 'ngx-highlightjs';
|
|
32
|
-
import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip,
|
|
33
|
-
import { TUI_FALSE_HANDLER
|
|
34
|
-
import { __decorate } from 'tslib';
|
|
32
|
+
import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip, filter, mergeMap, ReplaySubject, take, debounceTime, combineLatest, fromEvent, of } from 'rxjs';
|
|
33
|
+
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
|
|
35
34
|
import * as i1$2 from '@taiga-ui/cdk/directives/item';
|
|
36
35
|
import { TuiItem } from '@taiga-ui/cdk/directives/item';
|
|
37
36
|
import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
|
|
38
37
|
import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
|
|
39
|
-
import {
|
|
40
|
-
import * as i3$
|
|
38
|
+
import { tuiClamp } from '@taiga-ui/cdk/utils/math';
|
|
39
|
+
import * as i3$2 from '@taiga-ui/core/components/expand';
|
|
41
40
|
import { TuiExpand } from '@taiga-ui/core/components/expand';
|
|
42
41
|
import { TuiGroup } from '@taiga-ui/core/directives/group';
|
|
43
42
|
import { TUI_DARK_MODE, TUI_COMMON_ICONS, TUI_THEME } from '@taiga-ui/core/tokens';
|
|
44
|
-
import * as i9 from '@taiga-ui/legacy/directives/textfield-controller';
|
|
45
|
-
import { TuiTextfieldControllerModule } from '@taiga-ui/legacy/directives/textfield-controller';
|
|
46
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
47
|
-
import { tuiWatch, tuiZonefreeScheduler, tuiControlValue } from '@taiga-ui/cdk/observables';
|
|
48
|
-
import { TuiFilterPipe } from '@taiga-ui/cdk/pipes/filter';
|
|
49
|
-
import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
|
|
50
|
-
import { TuiBadge } from '@taiga-ui/kit/components/badge';
|
|
51
|
-
import * as i7 from '@taiga-ui/legacy/components/select';
|
|
52
|
-
import { TuiSelectModule } from '@taiga-ui/legacy/components/select';
|
|
53
|
-
import * as i3$2 from '@taiga-ui/core/components/data-list';
|
|
54
|
-
import { TuiDataList } from '@taiga-ui/core/components/data-list';
|
|
55
|
-
import { tuiRgbToHex } from '@taiga-ui/cdk/utils/color';
|
|
56
43
|
import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
|
|
57
44
|
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
|
|
58
45
|
import { TuiLink, tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
|
|
@@ -63,32 +50,52 @@ import { TuiTabs } from '@taiga-ui/kit/components/tabs';
|
|
|
63
50
|
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
|
|
64
51
|
import { TUI_EXAMPLE_PRIMARY_FILE_NAME } from '@taiga-ui/addon-doc/types';
|
|
65
52
|
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
|
|
66
|
-
import { TuiPopup } from '@taiga-ui/core/
|
|
53
|
+
import { TuiPopup } from '@taiga-ui/core/portals/popup';
|
|
67
54
|
import { TuiDrawer } from '@taiga-ui/kit/components/drawer';
|
|
68
55
|
import { Title } from '@angular/platform-browser';
|
|
69
56
|
import { tuiAutoFocusOptionsProvider, TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
|
|
57
|
+
import { tuiZonefreeScheduler, tuiControlValue, tuiWatch } from '@taiga-ui/cdk/observables';
|
|
58
|
+
import * as i3$3 from '@taiga-ui/core/components/data-list';
|
|
59
|
+
import { TuiDataList } from '@taiga-ui/core/components/data-list';
|
|
60
|
+
import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
|
|
70
61
|
import * as i2$2 from '@taiga-ui/kit/components/accordion';
|
|
71
62
|
import { TuiAccordion } from '@taiga-ui/kit/components/accordion';
|
|
72
|
-
import { TuiFlagPipe } from '@taiga-ui/core/pipes/flag';
|
|
73
63
|
import { TuiLanguageSwitcherService } from '@taiga-ui/i18n/utils';
|
|
64
|
+
import { TuiBadge } from '@taiga-ui/kit/components/badge';
|
|
74
65
|
import * as i2$3 from '@taiga-ui/kit/components/badged-content';
|
|
75
66
|
import { TuiBadgedContent } from '@taiga-ui/kit/components/badged-content';
|
|
76
67
|
import { TuiButtonSelect } from '@taiga-ui/kit/directives/button-select';
|
|
68
|
+
import { TuiFlagPipe } from '@taiga-ui/kit/pipes/flag';
|
|
77
69
|
import { TuiRoot } from '@taiga-ui/core/components/root';
|
|
78
|
-
import { TuiAutoColorPipe } from '@taiga-ui/core/pipes/auto-color';
|
|
79
70
|
import { TuiChip } from '@taiga-ui/kit/components/chip';
|
|
71
|
+
import { TuiAutoColorPipe } from '@taiga-ui/kit/pipes/auto-color';
|
|
80
72
|
import * as i4$1 from '@taiga-ui/core/components/label';
|
|
81
73
|
|
|
82
74
|
class TuiDocAPI {
|
|
83
75
|
constructor() {
|
|
84
76
|
this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
|
|
85
77
|
}
|
|
86
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
87
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
78
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
79
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiDocAPI, isStandalone: true, selector: "table[tuiDocAPI]", ngImport: i0, template: "<thead>\n <tr>\n <th>{{ texts[2] }}</th>\n <th>{{ texts[1] }}</th>\n <th>{{ texts[3] }}</th>\n </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 767.4px){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
88
80
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocAPI, decorators: [{
|
|
90
82
|
type: Component,
|
|
91
|
-
args: [{ selector: 'table[tuiDocAPI]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<thead>\n <tr>\n <th>{{ texts[2] }}</th>\n <th>{{ texts[1] }}</th>\n <th>{{ texts[3] }}</th>\n </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width:
|
|
83
|
+
args: [{ selector: 'table[tuiDocAPI]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<thead>\n <tr>\n <th>{{ texts[2] }}</th>\n <th>{{ texts[1] }}</th>\n <th>{{ texts[3] }}</th>\n </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 767.4px){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"] }]
|
|
84
|
+
}] });
|
|
85
|
+
|
|
86
|
+
class TuiDocAPINumberItem {
|
|
87
|
+
constructor() {
|
|
88
|
+
this.min = input(null);
|
|
89
|
+
this.max = input(null);
|
|
90
|
+
}
|
|
91
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
92
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
93
|
+
}
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
|
|
95
|
+
type: Directive,
|
|
96
|
+
args: [{
|
|
97
|
+
selector: 'tr[tuiDocAPIItem][type=number]',
|
|
98
|
+
}]
|
|
92
99
|
}] });
|
|
93
100
|
|
|
94
101
|
class TuiInspectPipe {
|
|
@@ -106,19 +113,19 @@ class TuiInspectPipe {
|
|
|
106
113
|
*/
|
|
107
114
|
return 'λ(x) => y';
|
|
108
115
|
}
|
|
109
|
-
return value instanceof TemplateRef ? 'TemplateRef' :
|
|
116
|
+
return value instanceof TemplateRef ? 'TemplateRef' : tuiInspect(value, depth);
|
|
110
117
|
}
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
112
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
119
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspect" }); }
|
|
113
120
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInspectPipe, decorators: [{
|
|
115
122
|
type: Pipe,
|
|
116
123
|
args: [{
|
|
117
|
-
name: '
|
|
124
|
+
name: 'tuiInspect',
|
|
118
125
|
}]
|
|
119
126
|
}] });
|
|
120
127
|
|
|
121
|
-
class
|
|
128
|
+
class TuiTypeReferencePipe {
|
|
122
129
|
constructor() {
|
|
123
130
|
this.parser = inject(TUI_DOC_TYPE_REFERENCE_PARSER);
|
|
124
131
|
this.linkHandler = inject(TUI_DOC_TYPE_REFERENCE_HANDLER);
|
|
@@ -132,32 +139,17 @@ class TuiDocTypeReferencePipe {
|
|
|
132
139
|
}))
|
|
133
140
|
.sort((a, b) => b.reference?.localeCompare(a.reference ?? '') ?? -1);
|
|
134
141
|
}
|
|
135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
136
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
143
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TuiTypeReferencePipe, isStandalone: true, name: "tuiTypeReference" }); }
|
|
137
144
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTypeReferencePipe, decorators: [{
|
|
139
146
|
type: Pipe,
|
|
140
147
|
args: [{
|
|
141
|
-
name: '
|
|
142
|
-
}]
|
|
143
|
-
}] });
|
|
144
|
-
|
|
145
|
-
class TuiDocAPINumberItem {
|
|
146
|
-
constructor() {
|
|
147
|
-
this.min = input(null);
|
|
148
|
-
this.max = input(null);
|
|
149
|
-
}
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
151
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
152
|
-
}
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
|
|
154
|
-
type: Directive,
|
|
155
|
-
args: [{
|
|
156
|
-
selector: 'tr[tuiDocAPIItem][type=number]',
|
|
148
|
+
name: 'tuiTypeReference',
|
|
157
149
|
}]
|
|
158
150
|
}] });
|
|
159
151
|
|
|
160
|
-
const SERIALIZED_SUFFIX
|
|
152
|
+
const SERIALIZED_SUFFIX = '$';
|
|
161
153
|
class TuiDocAPIItem {
|
|
162
154
|
constructor() {
|
|
163
155
|
this.locationRef = inject(Location);
|
|
@@ -189,7 +181,7 @@ class TuiDocAPIItem {
|
|
|
189
181
|
emitEvent(event) {
|
|
190
182
|
console.info('emitEvent', event);
|
|
191
183
|
const alert = !event || event?.toString() === '[object Object]'
|
|
192
|
-
?
|
|
184
|
+
? tuiInspect(event, 2)
|
|
193
185
|
: event;
|
|
194
186
|
this.alerts.open(alert, { label: this.name() }).subscribe();
|
|
195
187
|
}
|
|
@@ -199,7 +191,7 @@ class TuiDocAPIItem {
|
|
|
199
191
|
parseParams(params) {
|
|
200
192
|
const name = this.clearBrackets(this.name());
|
|
201
193
|
const propertyValue = params[name];
|
|
202
|
-
const propertyValueWithSuffix = params[`${name}${SERIALIZED_SUFFIX
|
|
194
|
+
const propertyValueWithSuffix = params[`${name}${SERIALIZED_SUFFIX}`];
|
|
203
195
|
if (!propertyValue && !propertyValueWithSuffix) {
|
|
204
196
|
return;
|
|
205
197
|
}
|
|
@@ -217,7 +209,7 @@ class TuiDocAPIItem {
|
|
|
217
209
|
const isValueAvailableByKey = value instanceof Object;
|
|
218
210
|
const items = this.items();
|
|
219
211
|
const computedValue = isValueAvailableByKey && items ? items.indexOf(value) : value;
|
|
220
|
-
const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX
|
|
212
|
+
const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
|
|
221
213
|
const propName = this.clearBrackets(this.name()) + suffix;
|
|
222
214
|
tree.queryParams = {
|
|
223
215
|
...tree.queryParams,
|
|
@@ -225,23 +217,23 @@ class TuiDocAPIItem {
|
|
|
225
217
|
};
|
|
226
218
|
this.locationRef.go(this.urlStateHandler(tree));
|
|
227
219
|
}
|
|
228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"isBananaBox()\"\n [class.t-name_input]=\"isInput()\"\n [class.t-name_output]=\"isOutput()\"\n >\n {{ name() }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type() | tuiTypeReference; track item) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n @if (icons.externalLink) {\n <tui-icon\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n }\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!$last) {\n <span> | </span>\n }\n }\n </code>\n</td>\n<td class=\"t-td\">\n @if (items().length) {\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"hasCleaner()\"\n >\n <input\n tuiSelect\n [ngModel]=\"value() ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [itemContent]=\"content\"\n [items]=\"items()\"\n />\n </tui-textfield>\n } @else {\n @if (value() !== undefined) {\n @switch (type()) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiInput\n [id]=\"name()\"\n [ngModel]=\"value() || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"name()\"\n [max]=\"numberItem?.max() ?? null\"\n [min]=\"numberItem?.min() ?? null\"\n [ngModel]=\"value()\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n }\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspect }}</code>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 767.4px){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i6.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i6.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspect" }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "pipe", type: TuiTypeReferencePipe, name: "tuiTypeReference" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
230
222
|
}
|
|
231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocAPIItem, decorators: [{
|
|
232
224
|
type: Component,
|
|
233
225
|
args: [{ selector: 'tr[tuiDocAPIItem]', imports: [
|
|
234
226
|
FormsModule,
|
|
235
227
|
TuiChevron,
|
|
236
228
|
TuiDataListWrapper,
|
|
237
|
-
TuiDocTypeReferencePipe,
|
|
238
229
|
TuiIcon,
|
|
230
|
+
TuiInput,
|
|
239
231
|
TuiInputNumber,
|
|
240
232
|
TuiInspectPipe,
|
|
241
233
|
TuiSelect,
|
|
242
234
|
TuiSwitch,
|
|
243
|
-
|
|
244
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"isBananaBox()\"\n [class.t-name_input]=\"isInput()\"\n [class.t-name_output]=\"isOutput()\"\n >\n {{ name() }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type() |
|
|
235
|
+
TuiTypeReferencePipe,
|
|
236
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"isBananaBox()\"\n [class.t-name_input]=\"isInput()\"\n [class.t-name_output]=\"isOutput()\"\n >\n {{ name() }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type() | tuiTypeReference; track item) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n @if (icons.externalLink) {\n <tui-icon\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n }\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!$last) {\n <span> | </span>\n }\n }\n </code>\n</td>\n<td class=\"t-td\">\n @if (items().length) {\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"hasCleaner()\"\n >\n <input\n tuiSelect\n [ngModel]=\"value() ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [itemContent]=\"content\"\n [items]=\"items()\"\n />\n </tui-textfield>\n } @else {\n @if (value() !== undefined) {\n @switch (type()) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiInput\n [id]=\"name()\"\n [ngModel]=\"value() || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"name()\"\n [max]=\"numberItem?.max() ?? null\"\n [min]=\"numberItem?.min() ?? null\"\n [ngModel]=\"value()\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n }\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspect }}</code>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 767.4px){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
|
|
245
237
|
}] });
|
|
246
238
|
|
|
247
239
|
class TuiDocCode {
|
|
@@ -256,25 +248,24 @@ class TuiDocCode {
|
|
|
256
248
|
this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
|
|
257
249
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
|
|
258
250
|
this.filename = input('');
|
|
259
|
-
|
|
260
|
-
set code(code) {
|
|
261
|
-
this.rawLoader$$.next(code);
|
|
251
|
+
this.code = input('');
|
|
262
252
|
}
|
|
263
253
|
get hasFilename() {
|
|
264
254
|
return !!this.filename();
|
|
265
255
|
}
|
|
266
|
-
|
|
267
|
-
|
|
256
|
+
ngOnChanges() {
|
|
257
|
+
this.rawLoader$$.next(this.code());
|
|
258
|
+
}
|
|
259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 } }, 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 [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-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;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-body-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media screen and (max-width: 767.4px){.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 }); }
|
|
268
261
|
}
|
|
269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocCode, decorators: [{
|
|
270
263
|
type: Component,
|
|
271
264
|
args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
272
265
|
'[style.visibility]': 'isServer ? "hidden" : "visible"',
|
|
273
266
|
'[class._has-filename]': 'hasFilename',
|
|
274
|
-
}, 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-
|
|
275
|
-
}]
|
|
276
|
-
type: Input
|
|
277
|
-
}] } });
|
|
267
|
+
}, 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-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;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-body-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media screen and (max-width: 767.4px){.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"] }]
|
|
268
|
+
}] });
|
|
278
269
|
|
|
279
270
|
const COPIED_TIMEOUT = 1500;
|
|
280
271
|
class TuiDocCopy {
|
|
@@ -286,10 +277,10 @@ class TuiDocCopy {
|
|
|
286
277
|
onClick() {
|
|
287
278
|
this.copy$.next();
|
|
288
279
|
}
|
|
289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
280
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
281
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocCopy, isStandalone: true, selector: "tui-doc-copy", ngImport: i0, template: "<button\n appearance=\"\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-copy\"\n (click)=\"onClick()\"\n>\n <span class=\"t-content\">\n <span\n class=\"t-initial\"\n [attr.data-text]=\"copied() ? '' : texts()[0]\"\n >\n @if (!copied()) {\n <ng-content />\n }\n </span>\n {{ copied() ? texts()[1] : '' }}\n </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
291
282
|
}
|
|
292
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocCopy, decorators: [{
|
|
293
284
|
type: Component,
|
|
294
285
|
args: [{ selector: 'tui-doc-copy', imports: [TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n appearance=\"\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-copy\"\n (click)=\"onClick()\"\n>\n <span class=\"t-content\">\n <span\n class=\"t-initial\"\n [attr.data-text]=\"copied() ? '' : texts()[0]\"\n >\n @if (!copied()) {\n <ng-content />\n }\n </span>\n {{ copied() ? texts()[1] : '' }}\n </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"] }]
|
|
295
286
|
}] });
|
|
@@ -297,12 +288,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
297
288
|
const MIN_WIDTH = 160;
|
|
298
289
|
class TuiDocDemo {
|
|
299
290
|
constructor() {
|
|
291
|
+
this.resizable = viewChild.required(TuiResizable, { read: ElementRef });
|
|
292
|
+
this.content = viewChild.required('content');
|
|
293
|
+
this.resizer = viewChild.required('resizer');
|
|
300
294
|
this.el = tuiInjectElement();
|
|
301
295
|
this.locationRef = inject(Location);
|
|
302
296
|
this.urlSerializer = inject(UrlSerializer);
|
|
303
297
|
this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
|
|
304
298
|
this.darkMode = inject(TUI_DARK_MODE);
|
|
305
|
-
this.template =
|
|
299
|
+
this.template = contentChild((TemplateRef));
|
|
306
300
|
this.rendered = signal(false);
|
|
307
301
|
this.theme = computed(() => (this.dark() ? 'dark' : 'light'));
|
|
308
302
|
this.dark = signal(tuiCoerceValueIsTrue(this.params.darkMode ?? this.darkMode()));
|
|
@@ -313,7 +307,7 @@ class TuiDocDemo {
|
|
|
313
307
|
this.updateOn = this.params.updateOn || this.updateOnVariants[0];
|
|
314
308
|
this.opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
|
|
315
309
|
this.expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
|
|
316
|
-
this.sandboxWidth =
|
|
310
|
+
this.sandboxWidth = parseInt(this.params.sandboxWidth, 10);
|
|
317
311
|
this.texts = inject(TUI_DOC_DEMO_TEXTS);
|
|
318
312
|
this.control = input(null);
|
|
319
313
|
this.sticky = input(true);
|
|
@@ -348,21 +342,21 @@ class TuiDocDemo {
|
|
|
348
342
|
this.createForm();
|
|
349
343
|
}
|
|
350
344
|
updateWidth(width = NaN) {
|
|
351
|
-
if (!this.resizer || !this.resizable || !this.content) {
|
|
345
|
+
if (!this.resizer() || !this.resizable() || !this.content()) {
|
|
352
346
|
return;
|
|
353
347
|
}
|
|
354
|
-
const safe = width || this.resizable.nativeElement.clientWidth;
|
|
348
|
+
const safe = width || this.resizable().nativeElement.clientWidth;
|
|
355
349
|
const total = this.el.clientWidth;
|
|
356
350
|
const clamped = Math.round(tuiClamp(safe, MIN_WIDTH, total)) - this.delta;
|
|
357
351
|
const validated = safe < total ? clamped : NaN;
|
|
358
|
-
this.resizer.nativeElement.textContent = String(clamped || '-');
|
|
359
|
-
this.resizable.nativeElement.style.width = validated ? tuiPx(safe) : '';
|
|
352
|
+
this.resizer().nativeElement.textContent = String(clamped || '-');
|
|
353
|
+
this.resizable().nativeElement.style.width = validated ? tuiPx(safe) : '';
|
|
360
354
|
this.sandboxWidth = validated;
|
|
361
355
|
}
|
|
362
356
|
get delta() {
|
|
363
|
-
return this.resizable && this.content
|
|
364
|
-
? this.resizable.nativeElement.clientWidth -
|
|
365
|
-
this.content.nativeElement.clientWidth
|
|
357
|
+
return this.resizable() && this.content()
|
|
358
|
+
? this.resizable().nativeElement.clientWidth -
|
|
359
|
+
this.content().nativeElement.clientWidth
|
|
366
360
|
: 0;
|
|
367
361
|
}
|
|
368
362
|
get params() {
|
|
@@ -387,13 +381,10 @@ class TuiDocDemo {
|
|
|
387
381
|
getUrlTree() {
|
|
388
382
|
return this.urlSerializer.parse(this.locationRef.path());
|
|
389
383
|
}
|
|
390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky()" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (testForm) {\n <form\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n\n <tui-data-list-wrapper\n *tuiDropdown\n new\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { 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: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i9.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i9.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
384
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
385
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky()" } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (testForm) {\n <form\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-body-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 767.4px){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 767.4px){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 767.4px){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-body-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
392
386
|
}
|
|
393
|
-
|
|
394
|
-
tuiPure
|
|
395
|
-
], TuiDocDemo.prototype, "updateUrl", null);
|
|
396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDemo, decorators: [{
|
|
387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocDemo, decorators: [{
|
|
397
388
|
type: Component,
|
|
398
389
|
args: [{ selector: 'tui-doc-demo', imports: [
|
|
399
390
|
FormsModule,
|
|
@@ -411,319 +402,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
411
402
|
TuiSelect,
|
|
412
403
|
TuiSwitch,
|
|
413
404
|
TuiTextfield,
|
|
414
|
-
TuiTextfieldControllerModule,
|
|
415
405
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
416
406
|
'[class._sticky]': 'sticky()',
|
|
417
407
|
'(window:resize)': 'onResize()',
|
|
418
408
|
'(document:mouseup.zoneless)': 'onMouseUp()',
|
|
419
|
-
}, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (testForm) {\n <form\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n\n <tui-data-list-wrapper\n *tuiDropdown\n
|
|
420
|
-
}]
|
|
421
|
-
type: ViewChild,
|
|
422
|
-
args: [TuiResizable, { static: true }]
|
|
423
|
-
}], content: [{
|
|
424
|
-
type: ViewChild,
|
|
425
|
-
args: ['content', { static: true }]
|
|
426
|
-
}], resizer: [{
|
|
427
|
-
type: ViewChild,
|
|
428
|
-
args: ['resizer', { static: true }]
|
|
429
|
-
}], template: [{
|
|
430
|
-
type: ContentChild,
|
|
431
|
-
args: [TemplateRef]
|
|
432
|
-
}], updateUrl: [] } });
|
|
409
|
+
}, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (testForm) {\n <form\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-body-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 767.4px){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 767.4px){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 767.4px){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-body-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
|
|
410
|
+
}] });
|
|
433
411
|
|
|
434
412
|
class TuiDocTab {
|
|
435
413
|
constructor() {
|
|
436
414
|
this.src = input('');
|
|
437
415
|
}
|
|
438
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"t-tab\">\n <img\n alt=\"Documentation tab icon\"\n class=\"t-icon\"\n [src]=\"src()\"\n />\n <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
440
418
|
}
|
|
441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocTab, decorators: [{
|
|
442
420
|
type: Component,
|
|
443
421
|
args: [{ selector: 'tui-doc-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-tab\">\n <img\n alt=\"Documentation tab icon\"\n class=\"t-icon\"\n [src]=\"src()\"\n />\n <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"] }]
|
|
444
422
|
}] });
|
|
445
423
|
|
|
446
|
-
const SERIALIZED_SUFFIX = '$';
|
|
447
|
-
// @bad TODO: refactor output and value sync
|
|
448
|
-
class TuiDocDocumentationPropertyConnector {
|
|
449
|
-
constructor() {
|
|
450
|
-
this.locationRef = inject(Location);
|
|
451
|
-
this.activatedRoute = inject(ActivatedRoute);
|
|
452
|
-
this.urlSerializer = inject(UrlSerializer);
|
|
453
|
-
this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
|
|
454
|
-
this.alerts = inject(TuiNotificationService);
|
|
455
|
-
this.documentationPropertyName = input('');
|
|
456
|
-
this.documentationPropertyMode = input(null);
|
|
457
|
-
this.documentationPropertyType = input('');
|
|
458
|
-
this.documentationPropertyValue = model();
|
|
459
|
-
this.documentationPropertyDeprecated = input(false);
|
|
460
|
-
this.documentationPropertyValues = input(null);
|
|
461
|
-
this.changed$ = new Subject();
|
|
462
|
-
this.emits = signal(1);
|
|
463
|
-
this.template = inject(TemplateRef);
|
|
464
|
-
this.attrName = computed(() => {
|
|
465
|
-
switch (this.documentationPropertyMode()) {
|
|
466
|
-
case 'input':
|
|
467
|
-
return `[${this.documentationPropertyName()}]`;
|
|
468
|
-
case 'input-output':
|
|
469
|
-
return `[(${this.documentationPropertyName()})]`;
|
|
470
|
-
case 'output':
|
|
471
|
-
return `(${this.documentationPropertyName()})`;
|
|
472
|
-
default:
|
|
473
|
-
return this.documentationPropertyName();
|
|
474
|
-
}
|
|
475
|
-
});
|
|
476
|
-
}
|
|
477
|
-
get shouldShowValues() {
|
|
478
|
-
return this.documentationPropertyMode() !== 'output';
|
|
479
|
-
}
|
|
480
|
-
get hasItems() {
|
|
481
|
-
return !!this.documentationPropertyValues();
|
|
482
|
-
}
|
|
483
|
-
ngOnInit() {
|
|
484
|
-
this.parseParams(this.activatedRoute.snapshot.queryParams);
|
|
485
|
-
}
|
|
486
|
-
ngOnChanges() {
|
|
487
|
-
this.changed$.next();
|
|
488
|
-
}
|
|
489
|
-
onValueChange(value) {
|
|
490
|
-
this.documentationPropertyValue.set(value);
|
|
491
|
-
this.setQueryParam(value);
|
|
492
|
-
}
|
|
493
|
-
emitEvent(event) {
|
|
494
|
-
// For more convenient debugging
|
|
495
|
-
console.info(this.attrName(), event);
|
|
496
|
-
this.emits.update((x) => ++x);
|
|
497
|
-
let content;
|
|
498
|
-
if (event !== undefined) {
|
|
499
|
-
content = tuiInspectAny(event, 2);
|
|
500
|
-
}
|
|
501
|
-
this.alerts.open(content, { label: this.attrName() }).subscribe();
|
|
502
|
-
}
|
|
503
|
-
parseParams(params) {
|
|
504
|
-
const propertyValue = params[this.documentationPropertyName()];
|
|
505
|
-
const propertyValueWithSuffix = params[`${this.documentationPropertyName()}${SERIALIZED_SUFFIX}`];
|
|
506
|
-
if (!propertyValue && !propertyValueWithSuffix) {
|
|
507
|
-
return;
|
|
508
|
-
}
|
|
509
|
-
const documentationPropertyValues = this.documentationPropertyValues();
|
|
510
|
-
let value = !!propertyValueWithSuffix && documentationPropertyValues
|
|
511
|
-
? documentationPropertyValues[propertyValueWithSuffix]
|
|
512
|
-
: tuiCoerceValue(propertyValue);
|
|
513
|
-
if (this.documentationPropertyType() === 'string' && tuiIsNumber(value)) {
|
|
514
|
-
value = value.toString();
|
|
515
|
-
}
|
|
516
|
-
this.onValueChange(value);
|
|
517
|
-
}
|
|
518
|
-
setQueryParam(value) {
|
|
519
|
-
const tree = this.urlSerializer.parse(this.locationRef.path());
|
|
520
|
-
const isValueAvailableByKey = value instanceof Object;
|
|
521
|
-
const name = this.documentationPropertyName();
|
|
522
|
-
const nameWithSuffix = `${name}${SERIALIZED_SUFFIX}`;
|
|
523
|
-
const documentationPropertyValues = this.documentationPropertyValues();
|
|
524
|
-
const computedValue = isValueAvailableByKey && documentationPropertyValues
|
|
525
|
-
? documentationPropertyValues.indexOf(value)
|
|
526
|
-
: value;
|
|
527
|
-
tree.queryParams = tuiCleanObject({
|
|
528
|
-
...tree.queryParams,
|
|
529
|
-
/**
|
|
530
|
-
* Caretaker note: reset previous conflicted param in route
|
|
531
|
-
* issue: https://github.com/taiga-family/taiga-ui/issues/9764
|
|
532
|
-
*/
|
|
533
|
-
...(isValueAvailableByKey
|
|
534
|
-
? {
|
|
535
|
-
[nameWithSuffix]: computedValue,
|
|
536
|
-
[name]: undefined,
|
|
537
|
-
}
|
|
538
|
-
: {
|
|
539
|
-
[nameWithSuffix]: undefined,
|
|
540
|
-
[name]: computedValue,
|
|
541
|
-
}),
|
|
542
|
-
});
|
|
543
|
-
this.locationRef.go(this.urlStateHandler(tree));
|
|
544
|
-
}
|
|
545
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentationPropertyConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
546
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocDocumentationPropertyConnector, isStandalone: true, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: { classPropertyName: "documentationPropertyName", publicName: "documentationPropertyName", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyMode: { classPropertyName: "documentationPropertyMode", publicName: "documentationPropertyMode", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyType: { classPropertyName: "documentationPropertyType", publicName: "documentationPropertyType", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyValue: { classPropertyName: "documentationPropertyValue", publicName: "documentationPropertyValue", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyDeprecated: { classPropertyName: "documentationPropertyDeprecated", publicName: "documentationPropertyDeprecated", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyValues: { classPropertyName: "documentationPropertyValues", publicName: "documentationPropertyValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { documentationPropertyValue: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 }); }
|
|
547
|
-
}
|
|
548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentationPropertyConnector, decorators: [{
|
|
549
|
-
type: Directive,
|
|
550
|
-
args: [{
|
|
551
|
-
selector: 'ng-template[documentationPropertyName]',
|
|
552
|
-
exportAs: 'documentationProperty',
|
|
553
|
-
}]
|
|
554
|
-
}] });
|
|
555
|
-
|
|
556
|
-
class TuiShowCleanerPipe {
|
|
557
|
-
transform(type) {
|
|
558
|
-
return type.includes('null');
|
|
559
|
-
}
|
|
560
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiShowCleanerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
561
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiShowCleanerPipe, isStandalone: true, name: "tuiShowCleanerPipe" }); }
|
|
562
|
-
}
|
|
563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiShowCleanerPipe, decorators: [{
|
|
564
|
-
type: Pipe,
|
|
565
|
-
args: [{
|
|
566
|
-
name: 'tuiShowCleanerPipe',
|
|
567
|
-
}]
|
|
568
|
-
}] });
|
|
569
|
-
|
|
570
|
-
class TuiIsOptionalPipe {
|
|
571
|
-
transform(name) {
|
|
572
|
-
return name.includes('?');
|
|
573
|
-
}
|
|
574
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
575
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiIsOptionalPipe, isStandalone: true, name: "tuiIsOptionalPipe" }); }
|
|
576
|
-
}
|
|
577
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsOptionalPipe, decorators: [{
|
|
578
|
-
type: Pipe,
|
|
579
|
-
args: [{
|
|
580
|
-
name: 'tuiIsOptionalPipe',
|
|
581
|
-
}]
|
|
582
|
-
}] });
|
|
583
|
-
|
|
584
|
-
class TuiStripOptionalPipe {
|
|
585
|
-
transform(name) {
|
|
586
|
-
return name.replace('?', '');
|
|
587
|
-
}
|
|
588
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiStripOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
589
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiStripOptionalPipe, isStandalone: true, name: "tuiStripOptionalPipe" }); }
|
|
590
|
-
}
|
|
591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiStripOptionalPipe, decorators: [{
|
|
592
|
-
type: Pipe,
|
|
593
|
-
args: [{
|
|
594
|
-
name: 'tuiStripOptionalPipe',
|
|
595
|
-
}]
|
|
596
|
-
}] });
|
|
597
|
-
|
|
598
|
-
// @bad TODO subscribe propertiesConnectors changes
|
|
599
|
-
// @bad TODO refactor to make more flexible
|
|
600
|
-
class TuiDocDocumentation {
|
|
601
|
-
constructor() {
|
|
602
|
-
this.cdr = inject(ChangeDetectorRef);
|
|
603
|
-
this.destroyRef = inject(DestroyRef);
|
|
604
|
-
this.propertiesConnectors = contentChildren(TuiDocDocumentationPropertyConnector);
|
|
605
|
-
this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
|
|
606
|
-
this.excludedProperties = inject(TUI_DOC_EXCLUDED_PROPERTIES);
|
|
607
|
-
this.activeItemIndex = 0;
|
|
608
|
-
this.type = computed(([argument, type] = this.texts) => this.isAPI() ? argument : type);
|
|
609
|
-
this.heading = input('');
|
|
610
|
-
this.showValues = input(true);
|
|
611
|
-
this.isAPI = input(false);
|
|
612
|
-
this.matcher = (item, exclusions) => !exclusions.has(item.documentationPropertyName());
|
|
613
|
-
}
|
|
614
|
-
ngAfterContentInit() {
|
|
615
|
-
toObservable(this.propertiesConnectors)
|
|
616
|
-
.pipe(switchMap((items) => merge(...items.map(({ changed$ }) => changed$))), tuiWatch(this.cdr), takeUntilDestroyed(this.destroyRef))
|
|
617
|
-
.subscribe();
|
|
618
|
-
}
|
|
619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
620
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, isAPI: { classPropertyName: "isAPI", publicName: "isAPI", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector, isSignal: true }], ngImport: i0, template: "@if (heading()) {\n <h1 class=\"t-heading\">\n {{ heading() }}\n </h1>\n}\n<ng-content />\n@if (propertiesConnectors() | tuiFilter: matcher : excludedProperties; as properties) {\n @if (properties.length) {\n <table class=\"t-table\">\n <tr class=\"t-row t-row_header\">\n <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n <th class=\"t-th\">{{ type() }}</th>\n @if (showValues() && !isAPI()) {\n <th class=\"t-th t-cell t-th_value\">\n {{ texts[3] }}\n </th>\n }\n </tr>\n @for (propertyConnector of properties; track propertyConnector) {\n <tr\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated()\"\n >\n <td class=\"t-cell t-no-overflow\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-additional-info\"\n >\n @if (propertyConnector.attrName()) {\n <code\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName() | tuiStripOptionalPipe }}\n </code>\n }\n @if (propertyConnector.attrName() | tuiIsOptionalPipe) {\n <tui-badge\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n }\n @if (propertyConnector.documentationPropertyDeprecated()) {\n <tui-badge\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n }\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell t-no-overflow\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n @for (\n item of propertyConnector.documentationPropertyType() | tuiDocTypeReference;\n track item;\n let last = $last\n ) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!last) {\n <span> | </span>\n }\n }\n </code>\n </span>\n </td>\n @if (showValues()) {\n <td class=\"t-cell t-cell_value\">\n @if (propertyConnector.shouldShowValues) {\n @if (propertyConnector.hasItems) {\n <tui-select\n tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n [tuiTextfieldCleaner]=\"\n propertyConnector.documentationPropertyType() | tuiShowCleanerPipe\n \"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues()\"\n />\n </tui-select>\n } @else {\n @switch (propertyConnector.documentationPropertyType()) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue() || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n [step]=\"1\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n } @else {\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits()\"\n >\n Emit!\n </tui-notification>\n }\n </td>\n }\n </tr>\n }\n </table>\n }\n}\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$2.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["prefix", "postfix", "min", "max"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: i6.TuiNotificationDirective, selector: "tui-notification,[tuiNotification]:not(ng-template)", inputs: ["appearance", "size", "icon"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i7.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i7.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldDirective, selector: "input[tuiTextfield]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i9.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i9.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i9.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], animations: [
|
|
621
|
-
trigger('emitEvent', [
|
|
622
|
-
transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
|
|
623
|
-
]),
|
|
624
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
625
|
-
}
|
|
626
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentation, decorators: [{
|
|
627
|
-
type: Component,
|
|
628
|
-
args: [{ selector: 'tui-doc-documentation', imports: [
|
|
629
|
-
FormsModule,
|
|
630
|
-
NgTemplateOutlet,
|
|
631
|
-
TuiBadge,
|
|
632
|
-
TuiDataListWrapper,
|
|
633
|
-
TuiDocTypeReferencePipe,
|
|
634
|
-
TuiDropdown,
|
|
635
|
-
TuiFilterPipe,
|
|
636
|
-
TuiInputNumber,
|
|
637
|
-
TuiInspectPipe,
|
|
638
|
-
TuiIsOptionalPipe,
|
|
639
|
-
TuiNotification,
|
|
640
|
-
TuiSelectModule,
|
|
641
|
-
TuiShowCleanerPipe,
|
|
642
|
-
TuiStripOptionalPipe,
|
|
643
|
-
TuiSwitch,
|
|
644
|
-
TuiTextfield,
|
|
645
|
-
TuiTextfieldControllerModule,
|
|
646
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], animations: [
|
|
647
|
-
trigger('emitEvent', [
|
|
648
|
-
transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
|
|
649
|
-
]),
|
|
650
|
-
], template: "@if (heading()) {\n <h1 class=\"t-heading\">\n {{ heading() }}\n </h1>\n}\n<ng-content />\n@if (propertiesConnectors() | tuiFilter: matcher : excludedProperties; as properties) {\n @if (properties.length) {\n <table class=\"t-table\">\n <tr class=\"t-row t-row_header\">\n <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n <th class=\"t-th\">{{ type() }}</th>\n @if (showValues() && !isAPI()) {\n <th class=\"t-th t-cell t-th_value\">\n {{ texts[3] }}\n </th>\n }\n </tr>\n @for (propertyConnector of properties; track propertyConnector) {\n <tr\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated()\"\n >\n <td class=\"t-cell t-no-overflow\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-additional-info\"\n >\n @if (propertyConnector.attrName()) {\n <code\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName() | tuiStripOptionalPipe }}\n </code>\n }\n @if (propertyConnector.attrName() | tuiIsOptionalPipe) {\n <tui-badge\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n }\n @if (propertyConnector.documentationPropertyDeprecated()) {\n <tui-badge\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n }\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell t-no-overflow\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n @for (\n item of propertyConnector.documentationPropertyType() | tuiDocTypeReference;\n track item;\n let last = $last\n ) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!last) {\n <span> | </span>\n }\n }\n </code>\n </span>\n </td>\n @if (showValues()) {\n <td class=\"t-cell t-cell_value\">\n @if (propertyConnector.shouldShowValues) {\n @if (propertyConnector.hasItems) {\n <tui-select\n tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n [tuiTextfieldCleaner]=\"\n propertyConnector.documentationPropertyType() | tuiShowCleanerPipe\n \"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues()\"\n />\n </tui-select>\n } @else {\n @switch (propertyConnector.documentationPropertyType()) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue() || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"propertyConnector.attrName()\"\n [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n [step]=\"1\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n } @else {\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits()\"\n >\n Emit!\n </tui-notification>\n }\n </td>\n }\n </tr>\n }\n </table>\n }\n}\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"] }]
|
|
651
|
-
}] });
|
|
652
|
-
|
|
653
|
-
class TuiGetColorPipe {
|
|
654
|
-
transform(color) {
|
|
655
|
-
if (color.length === 4) {
|
|
656
|
-
return color
|
|
657
|
-
.split('')
|
|
658
|
-
.reduce((result, current) => [...result, current, current], [])
|
|
659
|
-
.join('')
|
|
660
|
-
.replace('#', '');
|
|
661
|
-
}
|
|
662
|
-
if (color.startsWith('#')) {
|
|
663
|
-
return color;
|
|
664
|
-
}
|
|
665
|
-
if (color === 'transparent') {
|
|
666
|
-
return '#000000';
|
|
667
|
-
}
|
|
668
|
-
const parsed = color
|
|
669
|
-
.replace('rgb(', '')
|
|
670
|
-
.replace('rgba(', '')
|
|
671
|
-
.replace(')', '')
|
|
672
|
-
.replace(' ', '')
|
|
673
|
-
.split(',')
|
|
674
|
-
.map((v) => Number.parseInt(v, 10));
|
|
675
|
-
return tuiRgbToHex(...parsed);
|
|
676
|
-
}
|
|
677
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
678
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiGetColorPipe, isStandalone: true, name: "tuiGetColorPipe" }); }
|
|
679
|
-
}
|
|
680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetColorPipe, decorators: [{
|
|
681
|
-
type: Pipe,
|
|
682
|
-
args: [{
|
|
683
|
-
name: 'tuiGetColorPipe',
|
|
684
|
-
}]
|
|
685
|
-
}] });
|
|
686
|
-
|
|
687
|
-
class TuiGetOpacityPipe {
|
|
688
|
-
transform(color) {
|
|
689
|
-
if (color.startsWith('#') || color.startsWith('rgb(')) {
|
|
690
|
-
return 100;
|
|
691
|
-
}
|
|
692
|
-
if (color === 'transparent') {
|
|
693
|
-
return 0;
|
|
694
|
-
}
|
|
695
|
-
const lastComma = color.lastIndexOf(',');
|
|
696
|
-
const parsed = color
|
|
697
|
-
.slice(lastComma)
|
|
698
|
-
.replace(')', '')
|
|
699
|
-
.replace(' ', '')
|
|
700
|
-
.replace(',', '');
|
|
701
|
-
return Math.round(Number.parseFloat(parsed) * 100);
|
|
702
|
-
}
|
|
703
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
704
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiGetOpacityPipe, isStandalone: true, name: "tuiGetOpacity" }); }
|
|
705
|
-
}
|
|
706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
|
|
707
|
-
type: Pipe,
|
|
708
|
-
args: [{
|
|
709
|
-
name: 'tuiGetOpacity',
|
|
710
|
-
}]
|
|
711
|
-
}] });
|
|
712
|
-
|
|
713
|
-
class TuiIsPrimitivePolymorpheusContentPipe {
|
|
714
|
-
transform(value) {
|
|
715
|
-
return tuiIsString(value) || tuiIsNumber(value);
|
|
716
|
-
}
|
|
717
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
718
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, isStandalone: true, name: "tuiIsPrimitivePolymorpheusContentPipe" }); }
|
|
719
|
-
}
|
|
720
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
|
|
721
|
-
type: Pipe,
|
|
722
|
-
args: [{
|
|
723
|
-
name: 'tuiIsPrimitivePolymorpheusContentPipe',
|
|
724
|
-
}]
|
|
725
|
-
}] });
|
|
726
|
-
|
|
727
424
|
const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
|
|
728
425
|
codeEditorVisibilityHandler: (files) => Boolean(files[TUI_EXAMPLE_PRIMARY_FILE_NAME.TS] &&
|
|
729
426
|
files[TUI_EXAMPLE_PRIMARY_FILE_NAME.HTML]),
|
|
@@ -739,10 +436,10 @@ class TuiDocExampleGetTabsPipe {
|
|
|
739
436
|
transform(content, defaultTab) {
|
|
740
437
|
return [defaultTab, ...Object.keys(content).filter((tab) => content[tab])];
|
|
741
438
|
}
|
|
742
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
743
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
439
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocExampleGetTabsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
440
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TuiDocExampleGetTabsPipe, isStandalone: true, name: "tuiDocExampleGetTabs" }); }
|
|
744
441
|
}
|
|
745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocExampleGetTabsPipe, decorators: [{
|
|
746
443
|
type: Pipe,
|
|
747
444
|
args: [{
|
|
748
445
|
name: 'tuiDocExampleGetTabs',
|
|
@@ -777,10 +474,11 @@ class TuiDocExample {
|
|
|
777
474
|
this.fullsize = input(inject(TUI_DOC_EXAMPLE_OPTIONS).fullsize);
|
|
778
475
|
this.componentName = input(this.location.pathname.slice(1));
|
|
779
476
|
this.component = input();
|
|
477
|
+
this.content = input({});
|
|
780
478
|
this.visible = (files) => Boolean(this.codeEditor && this.options.codeEditorVisibilityHandler(files));
|
|
781
479
|
}
|
|
782
|
-
|
|
783
|
-
this.rawLoader$$.next(content);
|
|
480
|
+
ngOnChanges() {
|
|
481
|
+
this.rawLoader$$.next(this.content());
|
|
784
482
|
}
|
|
785
483
|
getTabTitle(fileName) {
|
|
786
484
|
return this.options.tabTitles.get(fileName) || fileName;
|
|
@@ -797,10 +495,10 @@ class TuiDocExample {
|
|
|
797
495
|
?.edit(this.componentName(), this.id() || '', files)
|
|
798
496
|
.finally(() => this.loading.set(false));
|
|
799
497
|
}
|
|
800
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fullsize: { classPropertyName: "fullsize", publicName: "fullsize", isSignal: true, isRequired: false, transformFunction: null }, componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, 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\n @let fragmentId = id();\n\n @if (fragmentId) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"fragmentId\"\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: i1$2.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 }); }
|
|
498
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fullsize: { classPropertyName: "fullsize", publicName: "fullsize", isSignal: true, isRequired: false, transformFunction: null }, componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class._fullsize": "fullsize()" } }, usesOnChanges: true, 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\n @let fragmentId = id();\n\n @if (fragmentId) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"fragmentId\"\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: 767.4px){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-h5);margin:0 auto .5rem 0}@media screen and (max-width: 767.4px){.t-title{font:var(--tui-font-heading-h6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-h6);padding-inline-end:.1rem}@media not screen and (max-width: 767.4px){.t-link{font:var(--tui-font-heading-h5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-body-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: 767.4px){.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: 767.4px){.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: 767.4px){.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 screen and (max-width: 767.4px){.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: ["tuiFullscreen", "tuiFullscreenOptions"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.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: ["activeItemIndex", "size", "underline", "itemsLimit", "moreContent", "dropdownContent"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
802
500
|
}
|
|
803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
804
502
|
type: Component,
|
|
805
503
|
args: [{ selector: 'tui-doc-example', imports: [
|
|
806
504
|
AsyncPipe,
|
|
@@ -819,10 +517,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
819
517
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
820
518
|
'[attr.id]': 'id()',
|
|
821
519
|
'[class._fullsize]': 'fullsize()',
|
|
822
|
-
}, 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\n @let fragmentId = id();\n\n @if (fragmentId) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"fragmentId\"\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:
|
|
823
|
-
}]
|
|
824
|
-
type: Input
|
|
825
|
-
}] } });
|
|
520
|
+
}, 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\n @let fragmentId = id();\n\n @if (fragmentId) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"fragmentId\"\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: 767.4px){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-h5);margin:0 auto .5rem 0}@media screen and (max-width: 767.4px){.t-title{font:var(--tui-font-heading-h6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-h6);padding-inline-end:.1rem}@media not screen and (max-width: 767.4px){.t-link{font:var(--tui-font-heading-h5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-body-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: 767.4px){.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: 767.4px){.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: 767.4px){.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 screen and (max-width: 767.4px){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
|
|
521
|
+
}] });
|
|
826
522
|
|
|
827
523
|
function labelsProviderFactory(pages) {
|
|
828
524
|
return pages
|
|
@@ -881,24 +577,29 @@ class TuiDocScrollIntoViewLink {
|
|
|
881
577
|
this.sub = inject(TUI_DOC_PAGE_LOADED)
|
|
882
578
|
.pipe(filter(Boolean), take(1), switchMap(() => this.scroll$), debounceTime(750, tuiZonefreeScheduler()), filter((shallWe) => shallWe && !!tuiGetElementObscures(this.el)), takeUntilDestroyed())
|
|
883
579
|
.subscribe(() => this.el.scrollIntoView());
|
|
580
|
+
this.tuiDocScrollIntoViewLink = input(false);
|
|
884
581
|
}
|
|
885
|
-
|
|
886
|
-
this.scroll$.next(
|
|
582
|
+
ngOnChanges() {
|
|
583
|
+
this.scroll$.next(this.tuiDocScrollIntoViewLink());
|
|
887
584
|
}
|
|
888
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
889
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocScrollIntoViewLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
586
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDocScrollIntoViewLink, isStandalone: true, selector: "[tuiDocScrollIntoViewLink]", inputs: { tuiDocScrollIntoViewLink: { classPropertyName: "tuiDocScrollIntoViewLink", publicName: "tuiDocScrollIntoViewLink", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
|
|
890
587
|
}
|
|
891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocScrollIntoViewLink, decorators: [{
|
|
892
589
|
type: Directive,
|
|
893
590
|
args: [{
|
|
894
591
|
selector: '[tuiDocScrollIntoViewLink]',
|
|
895
592
|
}]
|
|
896
|
-
}]
|
|
897
|
-
type: Input
|
|
898
|
-
}] } });
|
|
593
|
+
}] });
|
|
899
594
|
|
|
595
|
+
function tuiUniqBy(array, key) {
|
|
596
|
+
return Array.from(array
|
|
597
|
+
.reduce((map, item) => (map.has(item[key]) ? map : map.set(item[key], item)), new Map())
|
|
598
|
+
.values());
|
|
599
|
+
}
|
|
900
600
|
class TuiDocNavigation {
|
|
901
601
|
constructor() {
|
|
602
|
+
this.searchInput = viewChild(TuiInputDirective, { read: ElementRef });
|
|
902
603
|
this.router = inject(Router);
|
|
903
604
|
this.doc = inject(DOCUMENT);
|
|
904
605
|
this.open = signal(false);
|
|
@@ -910,11 +611,15 @@ class TuiDocNavigation {
|
|
|
910
611
|
this.searchEnabled = inject(TUI_DOC_SEARCH_ENABLED);
|
|
911
612
|
this.docIcons = inject(TUI_DOC_ICONS);
|
|
912
613
|
this.icons = inject(TUI_COMMON_ICONS);
|
|
614
|
+
this.flat = this.items.reduce((array, item) => [
|
|
615
|
+
...array,
|
|
616
|
+
item.reduce((pages, page) => 'subPages' in page ? [...pages, ...page.subPages] : [...pages, page], []),
|
|
617
|
+
], []);
|
|
913
618
|
this.openPagesArr = [];
|
|
914
619
|
this.openPagesGroupsArr = [];
|
|
915
620
|
this.active = '';
|
|
916
621
|
this.search = new FormControl('');
|
|
917
|
-
this.filtered = toSignal(tuiControlValue(this.search).pipe(filter((search) => search.trim().length > 2), map((search) => this.filterItems(this.
|
|
622
|
+
this.filtered = toSignal(tuiControlValue(this.search).pipe(filter((search) => search.trim().length > 2), map((search) => this.filterItems(this.flat, search))), { initialValue: [] });
|
|
918
623
|
const titleService = inject(Title);
|
|
919
624
|
const readyToScroll$ = inject(TUI_DOC_PAGE_LOADED);
|
|
920
625
|
inject(NAVIGATION_TITLE)
|
|
@@ -959,7 +664,7 @@ class TuiDocNavigation {
|
|
|
959
664
|
onFocusSearch(event) {
|
|
960
665
|
if (event.code === 'Slash' &&
|
|
961
666
|
!this.doc.activeElement?.matches('input,textarea,[contenteditable]')) {
|
|
962
|
-
this.searchInput?.nativeElement?.focus();
|
|
667
|
+
this.searchInput()?.nativeElement?.focus();
|
|
963
668
|
event.preventDefault();
|
|
964
669
|
}
|
|
965
670
|
}
|
|
@@ -978,14 +683,6 @@ class TuiDocNavigation {
|
|
|
978
683
|
search.split(/\s/).find((word) => title.includes(word)));
|
|
979
684
|
}), 'title'));
|
|
980
685
|
}
|
|
981
|
-
flattenSubPages(items) {
|
|
982
|
-
return items.reduce((array, item) => [
|
|
983
|
-
...array,
|
|
984
|
-
item.reduce((pages, page) => 'subPages' in page
|
|
985
|
-
? [...pages, ...page.subPages]
|
|
986
|
-
: [...pages, page], []),
|
|
987
|
-
], []);
|
|
988
|
-
}
|
|
989
686
|
isActiveRoute(route) {
|
|
990
687
|
return this.router.isActive(route, {
|
|
991
688
|
paths: 'subset',
|
|
@@ -1028,16 +725,10 @@ class TuiDocNavigation {
|
|
|
1028
725
|
target.click();
|
|
1029
726
|
target.remove();
|
|
1030
727
|
}
|
|
1031
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: TuiTextfieldDirective, descendants: true, read: ElementRef }], 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 tuiTextfield\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 >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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=\"m\"\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n >\n @for (label of labels; track $index) {\n <button\n appearance=\"\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\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 <div class=\"t-items-container\">\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + $index}\"\n />\n }\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\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_bordered\">\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 >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;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-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@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:.5rem}.t-sublink{font:var(--tui-font-text-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\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$2.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$3.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$2.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$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: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldDirective, selector: "input[tuiTextfield]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i9.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
728
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
729
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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=\"m\"\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n >\n @for (label of labels; track $index) {\n <button\n appearance=\"\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\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 <div class=\"t-items-container\">\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + $index}\"\n />\n }\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\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_bordered\">\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 >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;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-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@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:.5rem}.t-sublink{font:var(--tui-font-body-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\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$2.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$2.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$3.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$3.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$3.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: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5.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 }); }
|
|
1033
730
|
}
|
|
1034
|
-
|
|
1035
|
-
tuiPure
|
|
1036
|
-
], TuiDocNavigation.prototype, "filterItems", null);
|
|
1037
|
-
__decorate([
|
|
1038
|
-
tuiPure
|
|
1039
|
-
], TuiDocNavigation.prototype, "flattenSubPages", null);
|
|
1040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocNavigation, decorators: [{
|
|
731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocNavigation, decorators: [{
|
|
1041
732
|
type: Component,
|
|
1042
733
|
args: [{ selector: 'tui-doc-navigation', imports: [
|
|
1043
734
|
NgTemplateOutlet,
|
|
@@ -1051,18 +742,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1051
742
|
TuiDocScrollIntoViewLink,
|
|
1052
743
|
TuiExpand,
|
|
1053
744
|
TuiIcon,
|
|
745
|
+
TuiInput,
|
|
1054
746
|
TuiLink,
|
|
1055
747
|
TuiScrollbar,
|
|
1056
|
-
TuiTextfield,
|
|
1057
|
-
TuiTextfieldControllerModule,
|
|
1058
748
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
|
|
1059
749
|
'[class._open]': 'menuOpen',
|
|
1060
750
|
'(window:keydown)': 'onFocusSearch($event)',
|
|
1061
|
-
}, 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 tuiTextfield\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 >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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=\"m\"\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n >\n @for (label of labels; track $index) {\n <button\n appearance=\"\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\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 <div class=\"t-items-container\">\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + $index}\"\n />\n }\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\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_bordered\">\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 >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;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-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@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:.5rem}.t-sublink{font:var(--tui-font-text-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"] }]
|
|
1062
|
-
}], ctorParameters: () => []
|
|
1063
|
-
type: ViewChild,
|
|
1064
|
-
args: [TuiTextfieldDirective, { read: ElementRef }]
|
|
1065
|
-
}], filterItems: [], flattenSubPages: [] } });
|
|
751
|
+
}, 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 >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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=\"m\"\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n >\n @for (label of labels; track $index) {\n <button\n appearance=\"\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\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 <div class=\"t-items-container\">\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + $index}\"\n />\n }\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\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_bordered\">\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 >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;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-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@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:.5rem}.t-sublink{font:var(--tui-font-body-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"] }]
|
|
752
|
+
}], ctorParameters: () => [] });
|
|
1066
753
|
|
|
1067
754
|
class TuiDocHeader {
|
|
1068
755
|
constructor() {
|
|
@@ -1074,12 +761,12 @@ class TuiDocHeader {
|
|
|
1074
761
|
this.open = signal(false);
|
|
1075
762
|
effect(() => this.routeEvents() && this.open.set(false));
|
|
1076
763
|
}
|
|
1077
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1078
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
764
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
765
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "<button\n appearance=\"icon\"\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<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"left\"\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;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:0 .25rem 1.875rem #0000001a;block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);background:color-mix(in srgb,var(--tui-background-base) 70%,var(--tui-background-base) 0%);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem);border-radius:.9375rem;border:1px solid var(--tui-border-normal);margin:.4375rem 1rem}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-h5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 768px){.t-menu{display:none}}.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 }); }
|
|
1079
766
|
}
|
|
1080
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
767
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocHeader, decorators: [{
|
|
1081
768
|
type: Component,
|
|
1082
|
-
args: [{ selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiButton, TuiDocNavigation, TuiDrawer, TuiPopup], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n appearance=\"icon\"\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<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"left\"\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;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:
|
|
769
|
+
args: [{ selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiButton, TuiDocNavigation, TuiDrawer, TuiPopup], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n appearance=\"icon\"\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<tui-drawer\n *tuiPopup=\"open()\"\n direction=\"left\"\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;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:0 .25rem 1.875rem #0000001a;block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);background:color-mix(in srgb,var(--tui-background-base) 70%,var(--tui-background-base) 0%);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem);border-radius:.9375rem;border:1px solid var(--tui-border-normal);margin:.4375rem 1rem}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-h5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 768px){.t-menu{display:none}}.t-drawer{inline-size:17.25rem}\n"] }]
|
|
1083
770
|
}], ctorParameters: () => [] });
|
|
1084
771
|
|
|
1085
772
|
class TuiDocSeeAlso {
|
|
@@ -1091,10 +778,10 @@ class TuiDocSeeAlso {
|
|
|
1091
778
|
getRouterLink(pageTitle) {
|
|
1092
779
|
return this.pages.get(pageTitle)?.route ?? '';
|
|
1093
780
|
}
|
|
1094
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1095
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocSeeAlso, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocSeeAlso, isStandalone: true, selector: "tui-doc-see-also", inputs: { seeAlso: { classPropertyName: "seeAlso", publicName: "seeAlso", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso(); track item) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1096
783
|
}
|
|
1097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocSeeAlso, decorators: [{
|
|
1098
785
|
type: Component,
|
|
1099
786
|
args: [{ selector: 'tui-doc-see-also', imports: [RouterLink, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso(); track item) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"] }]
|
|
1100
787
|
}] });
|
|
@@ -1116,10 +803,10 @@ class TuiDocSourceCode {
|
|
|
1116
803
|
}));
|
|
1117
804
|
this.pathIsUrl = computed(() => this.path()?.startsWith('http') ?? false);
|
|
1118
805
|
}
|
|
1119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
806
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocSourceCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", 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 }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n *polymorpheusOutlet=\"pathIsUrl() ? path() : sourceCode as link; context: pathOptions()\"\n appearance=\"icon\"\n size=\"s\"\n target=\"_blank\"\n tuiIconButton\n type=\"button\"\n [href]=\"link\"\n [iconStart]=\"icons.code\"\n [style.height]=\"'var(--tui-height-l)'\"\n>\n {{ text }}\n</a>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1121
808
|
}
|
|
1122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocSourceCode, decorators: [{
|
|
1123
810
|
type: Component,
|
|
1124
811
|
args: [{ selector: 'tui-doc-source-code', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n *polymorpheusOutlet=\"pathIsUrl() ? path() : sourceCode as link; context: pathOptions()\"\n appearance=\"icon\"\n size=\"s\"\n target=\"_blank\"\n tuiIconButton\n type=\"button\"\n [href]=\"link\"\n [iconStart]=\"icons.code\"\n [style.height]=\"'var(--tui-height-l)'\"\n>\n {{ text }}\n</a>\n" }]
|
|
1125
812
|
}] });
|
|
@@ -1160,10 +847,10 @@ class TuiDocLanguageSwitcher {
|
|
|
1160
847
|
this.switcher.setLanguage(lang);
|
|
1161
848
|
this.open = false;
|
|
1162
849
|
}
|
|
1163
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
850
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiDropdown>\n <tui-opt-group label=\"Language of components\">\n @for (name of names; track name) {\n <button\n tuiOption\n type=\"button\"\n [value]=\"name | titlecase\"\n (click)=\"setLang(name)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"flags.get(name) | tuiFlag\"\n />\n {{ name | titlecase }}\n </button>\n }\n </tui-opt-group>\n </tui-data-list>\n </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: i2$3.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i2$3.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: i3$3.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$3.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$3.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$3.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1165
852
|
}
|
|
1166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocLanguageSwitcher, decorators: [{
|
|
1167
854
|
type: Component,
|
|
1168
855
|
args: [{ selector: 'tui-doc-language-switcher', imports: [
|
|
1169
856
|
ReactiveFormsModule,
|
|
@@ -1175,7 +862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1175
862
|
TuiDataList,
|
|
1176
863
|
TuiFlagPipe,
|
|
1177
864
|
TuiTextfield,
|
|
1178
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiDropdown>\n <tui-opt-group label=\"Language of components\">\n @for (name of names; track name) {\n <button\n
|
|
865
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiDropdown>\n <tui-opt-group label=\"Language of components\">\n @for (name of names; track name) {\n <button\n tuiOption\n type=\"button\"\n [value]=\"name | titlecase\"\n (click)=\"setLang(name)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"flags.get(name) | tuiFlag\"\n />\n {{ name | titlecase }}\n </button>\n }\n </tui-opt-group>\n </tui-data-list>\n </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"] }]
|
|
1179
866
|
}] });
|
|
1180
867
|
function capitalize(value) {
|
|
1181
868
|
return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
|
|
@@ -1193,12 +880,12 @@ class TuiDocMain {
|
|
|
1193
880
|
const dir = this.doc.documentElement.getAttribute('dir') ?? 'ltr';
|
|
1194
881
|
this.doc.documentElement.setAttribute('dir', dir === 'ltr' ? 'rtl' : 'ltr');
|
|
1195
882
|
}
|
|
1196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
883
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
884
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 && icons.ltr) {\n <button\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n }\n\n <button\n appearance=\"secondary\"\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 [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{background:var(--tui-background-base)}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:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 767.4px){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}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)}\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 }); }
|
|
1198
885
|
}
|
|
1199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocMain, decorators: [{
|
|
1200
887
|
type: Component,
|
|
1201
|
-
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 && icons.ltr) {\n <button\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n }\n\n <button\n appearance=\"secondary\"\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 [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{
|
|
888
|
+
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 && icons.ltr) {\n <button\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n }\n\n <button\n appearance=\"secondary\"\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 [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{background:var(--tui-background-base)}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:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 767.4px){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}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)}\n"] }]
|
|
1202
889
|
}] });
|
|
1203
890
|
|
|
1204
891
|
const TUI_DOC_TABS = new InjectionToken(ngDevMode ? 'TUI_DOC_TABS' : '', {
|
|
@@ -1229,10 +916,10 @@ class TuiDocPageTabConnector {
|
|
|
1229
916
|
this.pageTab = input();
|
|
1230
917
|
this.template = inject((TemplateRef));
|
|
1231
918
|
}
|
|
1232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1233
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
919
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocPageTabConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
920
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: { classPropertyName: "pageTab", publicName: "pageTab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1234
921
|
}
|
|
1235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
922
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocPageTabConnector, decorators: [{
|
|
1236
923
|
type: Directive,
|
|
1237
924
|
args: [{
|
|
1238
925
|
selector: 'ng-template[pageTab]',
|
|
@@ -1252,17 +939,17 @@ class TuiDocPage {
|
|
|
1252
939
|
this.tags = input([]);
|
|
1253
940
|
this.path = input('');
|
|
1254
941
|
this.deprecated = input(false);
|
|
1255
|
-
this.tabConnectors =
|
|
942
|
+
this.tabConnectors = contentChildren(TuiDocPageTabConnector);
|
|
1256
943
|
this.activeItemIndex = model(0);
|
|
1257
944
|
this.seeAlso = inject(PAGE_SEE_ALSO);
|
|
1258
945
|
this.showSeeAlso = computed(() => {
|
|
1259
946
|
return !!this.seeAlso().length && this.activeItemIndex() === 0;
|
|
1260
947
|
});
|
|
1261
948
|
}
|
|
1262
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
949
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
950
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 }, deprecated: { classPropertyName: "deprecated", publicName: "deprecated", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector, isSignal: true }], ngImport: i0, template: "<header class=\"t-header\">\n @if (header()) {\n <h1 class=\"t-title\">\n {{ header() }}\n @if (!!deprecated() || deprecated() === '') {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n }\n @if (package()) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </tui-chip>\n }\n @for (tag of tags(); track tag) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n }\n </h1>\n }\n @if (tabConnectors().length) {\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\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 *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-tabs-with-more>\n }\n\n @if (package() || path() || type()) {\n <div class=\"t-right-side\">\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n </div>\n }\n</header>\n<div class=\"t-content\">\n <ng-content />\n @if (showSeeAlso()) {\n <tui-doc-see-also\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso()\"\n />\n }\n @for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\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</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-body-m)}.t-header{display:flex;font:var(--tui-font-heading-h3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 767.4px){.t-header{font:var(--tui-font-heading-h4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 767.4px){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 767.4px){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 767.4px){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 767.4px){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\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: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "directive", type: i1$2.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: ["activeItemIndex", "size", "underline", "itemsLimit", "moreContent", "dropdownContent"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1264
951
|
}
|
|
1265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocPage, decorators: [{
|
|
1266
953
|
type: Component,
|
|
1267
954
|
args: [{ selector: 'tui-doc-page', imports: [
|
|
1268
955
|
KeyValuePipe,
|
|
@@ -1276,11 +963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1276
963
|
TuiDocSeeAlso,
|
|
1277
964
|
TuiDocSourceCode,
|
|
1278
965
|
TuiTabs,
|
|
1279
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n @if (header()) {\n <h1 class=\"t-title\">\n {{ header() }}\n @if (!!deprecated() || deprecated() === '') {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n }\n @if (package()) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </tui-chip>\n }\n @for (tag of tags(); track tag) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n }\n </h1>\n }\n @if (tabConnectors.length) {\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabConnectors; track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\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 *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-tabs-with-more>\n }\n\n @if (package() || path() || type()) {\n <div class=\"t-right-side\">\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n </div>\n }\n</header>\n<div class=\"t-content\">\n <ng-content />\n @if (showSeeAlso()) {\n <tui-doc-see-also\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso()\"\n />\n }\n @for (tab of tabConnectors; track tab) {\n @if ($index === activeItemIndex()) {\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</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-
|
|
1280
|
-
}]
|
|
1281
|
-
type: ContentChildren,
|
|
1282
|
-
args: [TuiDocPageTabConnector]
|
|
1283
|
-
}] } });
|
|
966
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n @if (header()) {\n <h1 class=\"t-title\">\n {{ header() }}\n @if (!!deprecated() || deprecated() === '') {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n }\n @if (package()) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </tui-chip>\n }\n @for (tag of tags(); track tag) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n }\n </h1>\n }\n @if (tabConnectors().length) {\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\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 *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-tabs-with-more>\n }\n\n @if (package() || path() || type()) {\n <div class=\"t-right-side\">\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n </div>\n }\n</header>\n<div class=\"t-content\">\n <ng-content />\n @if (showSeeAlso()) {\n <tui-doc-see-also\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso()\"\n />\n }\n @for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\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</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-body-m)}.t-header{display:flex;font:var(--tui-font-heading-h3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 767.4px){.t-header{font:var(--tui-font-heading-h4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 767.4px){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 767.4px){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 767.4px){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 767.4px){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
|
|
967
|
+
}] });
|
|
1284
968
|
|
|
1285
969
|
const TUI_THEME_KEY = new InjectionToken(ngDevMode ? 'TUI_THEME_KEY' : '', {
|
|
1286
970
|
factory: () => 'data-tui-theme',
|
|
@@ -1307,17 +991,17 @@ class TuiDocThemeSwitcher {
|
|
|
1307
991
|
this.storage?.setItem(this.key, theme);
|
|
1308
992
|
this.location.reload();
|
|
1309
993
|
}
|
|
1310
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
994
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
995
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-textfield\n tuiChevron\n [tuiTextfieldCleaner]=\"false\"\n>\n <label tuiLabel>\n <ng-content />\n </label>\n <input\n tuiSelect\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n />\n <tui-data-list *tuiDropdown>\n @for (key of keys; track key) {\n <button\n tuiOption\n type=\"button\"\n [value]=\"key\"\n >\n <img\n alt=\"\"\n [src]=\"themes[key]\"\n [style.margin-inline-end.rem]=\"0.5\"\n [style.width.rem]=\"1.75\"\n />\n {{ key }}\n </button>\n }\n </tui-data-list>\n</tui-textfield>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i3$3.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$3.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$3.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4$1.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1312
996
|
}
|
|
1313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDocThemeSwitcher, decorators: [{
|
|
1314
998
|
type: Component,
|
|
1315
|
-
args: [{ selector: 'tui-doc-theme-switcher', imports: [FormsModule, TuiChevron, TuiDataList, TuiSelect, TuiTextfield], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-textfield\n tuiChevron\n [tuiTextfieldCleaner]=\"false\"\n>\n <label tuiLabel>\n <ng-content />\n </label>\n <input\n tuiSelect\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n />\n <tui-data-list
|
|
999
|
+
args: [{ selector: 'tui-doc-theme-switcher', imports: [FormsModule, TuiChevron, TuiDataList, TuiSelect, TuiTextfield], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-textfield\n tuiChevron\n [tuiTextfieldCleaner]=\"false\"\n>\n <label tuiLabel>\n <ng-content />\n </label>\n <input\n tuiSelect\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n />\n <tui-data-list *tuiDropdown>\n @for (key of keys; track key) {\n <button\n tuiOption\n type=\"button\"\n [value]=\"key\"\n >\n <img\n alt=\"\"\n [src]=\"themes[key]\"\n [style.margin-inline-end.rem]=\"0.5\"\n [style.width.rem]=\"1.75\"\n />\n {{ key }}\n </button>\n }\n </tui-data-list>\n</tui-textfield>\n" }]
|
|
1316
1000
|
}] });
|
|
1317
1001
|
|
|
1318
1002
|
/**
|
|
1319
1003
|
* Generated bundle index. Do not edit.
|
|
1320
1004
|
*/
|
|
1321
1005
|
|
|
1322
|
-
export { NAVIGATION_ITEMS, NAVIGATION_LABELS, NAVIGATION_PROVIDERS, NAVIGATION_TITLE, PAGE_PROVIDERS, PAGE_SEE_ALSO, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_OPTIONS, TUI_DOC_TABS, TUI_THEMES, TUI_THEME_KEY, TuiDocAPI, TuiDocAPIItem, TuiDocAPINumberItem, TuiDocCode, TuiDocCopy, TuiDocDemo,
|
|
1006
|
+
export { NAVIGATION_ITEMS, NAVIGATION_LABELS, NAVIGATION_PROVIDERS, NAVIGATION_TITLE, PAGE_PROVIDERS, PAGE_SEE_ALSO, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_OPTIONS, TUI_DOC_TABS, TUI_THEMES, TUI_THEME_KEY, TuiDocAPI, TuiDocAPIItem, TuiDocAPINumberItem, TuiDocCode, TuiDocCopy, TuiDocDemo, TuiDocExample, TuiDocExampleGetTabsPipe, TuiDocHeader, TuiDocLanguageSwitcher, TuiDocMain, TuiDocNavigation, TuiDocPage, TuiDocPageTabConnector, TuiDocScrollIntoViewLink, TuiDocSeeAlso, TuiDocSourceCode, TuiDocTab, TuiDocThemeSwitcher, tuiDocExampleOptionsProvider, tuiDocThemeProvider };
|
|
1323
1007
|
//# sourceMappingURL=taiga-ui-addon-doc-components.mjs.map
|