@taiga-ui/addon-doc 2.26.0 → 2.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -121
- package/bundles/taiga-ui-addon-doc.umd.js +22 -22
- package/bundles/taiga-ui-addon-doc.umd.js.map +1 -1
- package/bundles/taiga-ui-addon-doc.umd.min.js +2 -2
- package/bundles/taiga-ui-addon-doc.umd.min.js.map +1 -1
- package/components/code/code.component.d.ts +1 -1
- package/components/demo/demo.component.d.ts +8 -8
- package/components/documentation/documentation-property-connector.directive.d.ts +1 -1
- package/components/navigation/navigation.component.d.ts +1 -1
- package/components/page/page.component.d.ts +1 -1
- package/esm2015/components/code/code.component.js +2 -2
- package/esm2015/components/demo/demo.component.js +12 -12
- package/esm2015/components/documentation/documentation-property-connector.directive.js +6 -6
- package/esm2015/components/documentation/documentation.component.js +2 -2
- package/esm2015/components/example/example-get-tabs.pipe.js +1 -1
- package/esm2015/components/main/main.component.js +1 -1
- package/esm2015/components/navigation/navigation.component.js +3 -3
- package/esm2015/components/page/page.component.js +2 -2
- package/esm5/components/code/code.component.js +2 -2
- package/esm5/components/demo/demo.component.js +12 -12
- package/esm5/components/documentation/documentation-property-connector.directive.js +6 -6
- package/esm5/components/documentation/documentation.component.js +2 -2
- package/esm5/components/example/example-get-tabs.pipe.js +1 -1
- package/esm5/components/main/main.component.js +1 -1
- package/esm5/components/navigation/navigation.component.js +3 -3
- package/esm5/components/page/page.component.js +2 -2
- package/fesm2015/taiga-ui-addon-doc.js +23 -23
- package/fesm2015/taiga-ui-addon-doc.js.map +1 -1
- package/fesm5/taiga-ui-addon-doc.js +23 -23
- package/fesm5/taiga-ui-addon-doc.js.map +1 -1
- package/package.json +7 -7
- package/taiga-ui-addon-doc.metadata.json +1 -1
package/README.md
CHANGED
|
@@ -26,142 +26,142 @@ npm i @taiga-ui/addon-doc
|
|
|
26
26
|
|
|
27
27
|
1. Include `TuiDocMainModule` in your App module and use in your template:
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
```html
|
|
30
|
+
<tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
|
|
31
|
+
```
|
|
32
32
|
|
|
33
33
|
2. Configure languages to highlight in your main module:
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
35
|
+
```typescript
|
|
36
|
+
import {NgModule} from '@angular/core';
|
|
37
|
+
import {TuiDocMainModule} from '@taiga-ui/addon-doc';
|
|
38
|
+
import {hljsLanguages} from './hljsLanguages';
|
|
39
|
+
import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
|
|
40
|
+
import {AppComponent} from './app.component';
|
|
41
|
+
|
|
42
|
+
@NgModule({
|
|
43
|
+
bootstrap: [AppComponent],
|
|
44
|
+
imports: [TuiDocMainModule],
|
|
45
|
+
declarations: [AppComponent],
|
|
46
|
+
providers: [
|
|
47
|
+
{
|
|
48
|
+
provide: HIGHLIGHT_OPTIONS,
|
|
49
|
+
useValue: {
|
|
50
|
+
coreLibraryLoader: () => import('highlight.js/lib/core' as string),
|
|
51
|
+
lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers
|
|
52
|
+
languages: {
|
|
53
|
+
typescript: () => import('highlight.js/lib/languages/typescript' as string),
|
|
54
|
+
less: () => import('highlight.js/lib/languages/less' as string),
|
|
55
|
+
xml: () => import('highlight.js/lib/languages/xml' as string),
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
})
|
|
61
|
+
export class AppBrowserModule {}
|
|
62
|
+
```
|
|
63
63
|
|
|
64
64
|
3. Configure documentation providers:
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
`TUI_DOC_PAGES` — an array of pages, see `TuiDocPages` type
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
`TUI_DOC_LOGO` — an src for the SVG logo in the sidebar
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
`TUI_DOC_DEFAULT_TABS` — an array of default named for tabs on your typical page
|
|
71
71
|
|
|
72
|
-
|
|
72
|
+
`TUI_DOC_TITLE` — a title prefix for the browser tab
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
`TUI_DOC_SEE_ALSO` — a two dimensional array of related pages by their titles
|
|
75
75
|
|
|
76
76
|
4. Configure routing:
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
```typescript
|
|
79
|
+
import {Routes} from '@angular/router';
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
81
|
+
const appRoutes: Routes = [
|
|
82
|
+
{
|
|
83
|
+
path: 'super-page',
|
|
84
|
+
loadChildren: '../super-page/super-page.module#SuperModule',
|
|
85
|
+
data: {
|
|
86
|
+
title: 'Super Page',
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
// ...
|
|
90
|
+
];
|
|
91
|
+
```
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
> You must have title in route data in order for `TUI_DOC_SEE_ALSO` to work. It would also be automatically added to
|
|
94
|
+
> `TUI_DOC_TITLE` for browser tab title when navigating to that route.
|
|
95
95
|
|
|
96
96
|
5. Create pages.
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
98
|
+
_Module:_
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
import {NgModule} from '@angular/core';
|
|
102
|
+
import {RouterModule} from '@angular/router';
|
|
103
|
+
import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
|
|
104
|
+
import {SuperComponent} from './super.component';
|
|
105
|
+
|
|
106
|
+
@NgModule({
|
|
107
|
+
imports: [TuiAddonDocModule, RouterModule.forChild(generateRoutes(SuperComponent))],
|
|
108
|
+
declarations: [SuperComponent],
|
|
109
|
+
exports: [SuperComponent],
|
|
110
|
+
})
|
|
111
|
+
export class SuperModule {}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
_Component:_
|
|
115
|
+
|
|
116
|
+
```typescript
|
|
117
|
+
import {Component} from '@angular/core';
|
|
118
|
+
|
|
119
|
+
import {default as exampleHtml} from '!!raw-loader!./examples/1/index.html';
|
|
120
|
+
import {default as exampleTs} from '!!raw-loader!./examples/1/index.ts';
|
|
121
|
+
|
|
122
|
+
@Component({
|
|
123
|
+
selector: 'super-component',
|
|
124
|
+
templateUrl: './account.template.html',
|
|
125
|
+
})
|
|
126
|
+
export class SuperComponent {
|
|
127
|
+
// Keys would be used as tabs for code example
|
|
128
|
+
readonly example = {
|
|
129
|
+
TypeScript: exampleTs,
|
|
130
|
+
HTML: exampleHtml,
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
readonly inputVariants = ['input 1', 'input 2'];
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
_Template:_
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<tui-doc-page header="Super" package="SUPER-PACKAGE" deprecated>
|
|
141
|
+
<ng-template pageTab>
|
|
142
|
+
<!-- default tab name would be used -->
|
|
143
|
+
This would be the content of a first tab
|
|
144
|
+
|
|
145
|
+
<tui-doc-example id="basic-example" heading="Example of usage" [content]="example">
|
|
146
|
+
<example-1></example-1>
|
|
147
|
+
</tui-doc-example>
|
|
148
|
+
</ng-template>
|
|
149
|
+
|
|
150
|
+
<ng-template pageTab="Documentation">
|
|
151
|
+
<tui-doc-demo>
|
|
152
|
+
<super-component [input]="input"></super-component>
|
|
153
|
+
</tui-doc-demo>
|
|
154
|
+
<tui-doc-documentation>
|
|
155
|
+
<ng-template
|
|
156
|
+
documentationPropertyName="input"
|
|
157
|
+
documentationPropertyMode="input"
|
|
158
|
+
documentationPropertyType="T"
|
|
159
|
+
[documentationPropertyValues]="inputVariants"
|
|
160
|
+
[(documentationPropertyValue)]="input"
|
|
161
|
+
>
|
|
162
|
+
Some input
|
|
163
|
+
</ng-template>
|
|
164
|
+
</tui-doc-documentation>
|
|
165
|
+
</ng-template>
|
|
166
|
+
</tui-doc-page>
|
|
167
|
+
```
|
|
@@ -246,8 +246,8 @@
|
|
|
246
246
|
var TuiDocCodeComponent = /** @class */ (function () {
|
|
247
247
|
function TuiDocCodeComponent() {
|
|
248
248
|
this.rawLoader$$ = new rxjs.BehaviorSubject('');
|
|
249
|
-
this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoad));
|
|
250
249
|
this.filename = '';
|
|
250
|
+
this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoad));
|
|
251
251
|
}
|
|
252
252
|
Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
|
|
253
253
|
set: function (code) {
|
|
@@ -406,6 +406,8 @@
|
|
|
406
406
|
this.destroy$ = destroy$;
|
|
407
407
|
this.renderer = renderer;
|
|
408
408
|
this.texts = texts;
|
|
409
|
+
this.initialX = 0;
|
|
410
|
+
this.wrapperWidth = 0;
|
|
409
411
|
this.control = null;
|
|
410
412
|
this.updateOnVariants = ['change', 'blur', 'submit'];
|
|
411
413
|
this.updateOn = 'change';
|
|
@@ -415,8 +417,6 @@
|
|
|
415
417
|
this.mode = null;
|
|
416
418
|
this.change$ = new rxjs.Subject();
|
|
417
419
|
this.items = ['onLight', 'onDark'];
|
|
418
|
-
this.initialX = 0;
|
|
419
|
-
this.wrapperWidth = 0;
|
|
420
420
|
this.isBrowser = common.isPlatformBrowser(platformId);
|
|
421
421
|
var parsedMode = locationRef.path().match(/tui-mode=(onDark|onLight)/);
|
|
422
422
|
if (parsedMode !== null && parsedMode.length > 0) {
|
|
@@ -433,6 +433,9 @@
|
|
|
433
433
|
});
|
|
434
434
|
}
|
|
435
435
|
TuiDocDemoComponent_1 = TuiDocDemoComponent;
|
|
436
|
+
TuiDocDemoComponent.prototype.onResize = function () {
|
|
437
|
+
this.setResizerTextContent();
|
|
438
|
+
};
|
|
436
439
|
TuiDocDemoComponent.prototype.ngOnInit = function () {
|
|
437
440
|
this.createForm();
|
|
438
441
|
};
|
|
@@ -449,9 +452,6 @@
|
|
|
449
452
|
var offsetWidth = this.content.nativeElement.offsetWidth;
|
|
450
453
|
this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || '0', 10) * 2);
|
|
451
454
|
};
|
|
452
|
-
TuiDocDemoComponent.prototype.onResize = function () {
|
|
453
|
-
this.setResizerTextContent();
|
|
454
|
-
};
|
|
455
455
|
TuiDocDemoComponent.prototype.onDragStart = function (event) {
|
|
456
456
|
event.preventDefault();
|
|
457
457
|
this.initialX = event.clientX;
|
|
@@ -495,12 +495,6 @@
|
|
|
495
495
|
{ type: router.UrlSerializer, decorators: [{ type: core.Inject, args: [router.UrlSerializer,] }] },
|
|
496
496
|
{ type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
|
|
497
497
|
]; };
|
|
498
|
-
__decorate([
|
|
499
|
-
core.Input()
|
|
500
|
-
], TuiDocDemoComponent.prototype, "control", void 0);
|
|
501
|
-
__decorate([
|
|
502
|
-
core.ContentChild(core.TemplateRef)
|
|
503
|
-
], TuiDocDemoComponent.prototype, "template", void 0);
|
|
504
498
|
__decorate([
|
|
505
499
|
core.ViewChild('content')
|
|
506
500
|
], TuiDocDemoComponent.prototype, "content", void 0);
|
|
@@ -510,6 +504,12 @@
|
|
|
510
504
|
__decorate([
|
|
511
505
|
core.ViewChild('resizerText')
|
|
512
506
|
], TuiDocDemoComponent.prototype, "resizerText", void 0);
|
|
507
|
+
__decorate([
|
|
508
|
+
core.Input()
|
|
509
|
+
], TuiDocDemoComponent.prototype, "control", void 0);
|
|
510
|
+
__decorate([
|
|
511
|
+
core.ContentChild(core.TemplateRef)
|
|
512
|
+
], TuiDocDemoComponent.prototype, "template", void 0);
|
|
513
513
|
__decorate([
|
|
514
514
|
core.HostListener('window:resize')
|
|
515
515
|
], TuiDocDemoComponent.prototype, "onResize", null);
|
|
@@ -717,6 +717,11 @@
|
|
|
717
717
|
this.documentationPropertyValueChange.emit(value);
|
|
718
718
|
this.setQueryParam(value);
|
|
719
719
|
};
|
|
720
|
+
TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
|
|
721
|
+
// For more convenient debugging
|
|
722
|
+
console.info(this.attrName, event);
|
|
723
|
+
this.emits$.next(this.emits$.value + 1);
|
|
724
|
+
};
|
|
720
725
|
TuiDocDocumentationPropertyConnectorDirective.prototype.parseParams = function (params) {
|
|
721
726
|
if (!params[this.documentationPropertyName] &&
|
|
722
727
|
!params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
|
|
@@ -743,11 +748,6 @@
|
|
|
743
748
|
tree.queryParams = __assign(__assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
|
|
744
749
|
this.locationRef.go(String(tree));
|
|
745
750
|
};
|
|
746
|
-
TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
|
|
747
|
-
// For more convenient debugging
|
|
748
|
-
console.log(this.attrName, event);
|
|
749
|
-
this.emits$.next(this.emits$.value + 1);
|
|
750
|
-
};
|
|
751
751
|
TuiDocDocumentationPropertyConnectorDirective.ctorParameters = function () { return [
|
|
752
752
|
{ type: core.TemplateRef, decorators: [{ type: core.Inject, args: [core.TemplateRef,] }] },
|
|
753
753
|
{ type: common.Location, decorators: [{ type: core.Inject, args: [common.Location,] }] },
|
|
@@ -904,7 +904,7 @@
|
|
|
904
904
|
TuiDocDocumentationComponent = __decorate([
|
|
905
905
|
core.Component({
|
|
906
906
|
selector: 'tui-doc-documentation',
|
|
907
|
-
template: "<h1 *ngIf=\"heading\" class=\"tui-text_h4\">{{ heading }}</h1>\n<ng-content></ng-content>\n<table class=\"tui-table tui-table_layout_fixed tui-table_font-size_s\">\n <tr class=\"tui-table__tr tui-table__tr_hover_disabled t-row t-row_header\">\n <th class=\"tui-table__th tui-table__th_first t-cell t-cell_prop\">\n {{ texts[2] }}\n </th>\n <td class=\"tui-table__th\">{{ type }}</td>\n <td\n *ngIf=\"showValues && !isAPI\"\n class=\"
|
|
907
|
+
template: "<h1 *ngIf=\"heading\" class=\"tui-text_h4\">{{ heading }}</h1>\n<ng-content></ng-content>\n<table class=\"tui-table tui-table_layout_fixed tui-table_font-size_s\">\n <tr class=\"tui-table__tr tui-table__tr_hover_disabled t-row t-row_header\">\n <th class=\"tui-table__th tui-table__th_first t-cell t-cell_prop\">\n {{ texts[2] }}\n </th>\n <td class=\"tui-table__th\">{{ type }}</td>\n <td\n *ngIf=\"showValues && !isAPI\"\n class=\"tui-table__th tui-table__th_last tui-table__th_text_right t-cell t-cell_value\"\n >\n {{ texts[3] }}\n </td>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of propertiesConnectors; last as lastItem\"\n class=\"tui-table__tr tui-table__tr_hover_disabled t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n [class.tui-table__tr_border_none]=\"lastItem\"\n >\n <td\n class=\"tui-table__td tui-table__td_first tui-table__td_align_center t-cell\"\n >\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-cell\"\n >\n {{ stripOptional(propertyConnector.attrName) }}\n <tui-badge\n *ngIf=\"isOptional(propertyConnector.attrName)\"\n size=\"s\"\n value=\"Optional\"\n ></tui-badge>\n </div>\n <span\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n class=\"t-deprecated-label\"\n >\n deprecated\n </span>\n <ng-container\n *ngTemplateOutlet=\"propertyConnector.template\"\n ></ng-container>\n </td>\n <td class=\"tui-table__td tui-table__td_align_center t-cell\">\n <span class=\"type\">\n {{ propertyConnector.documentationPropertyType }}\n <tui-tooltip\n *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n [describeId]=\"propertyConnector.attrName\"\n [content]=\"content\"\n >\n <ng-template #content>\n {{ texts[4] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n target=\"_blank\"\n href=\"https://github.com/tinkoff/ng-polymorpheus\"\n >\n <code>ng-polymorpheus</code>\n </a>\n </ng-template>\n </tui-tooltip>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"tui-table__td tui-table__td_align_center tui-table__td_last tui-table__td_text_right t-cell\"\n >\n <ng-container\n *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\"\n >\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiTextfieldSize=\"m\"\n tuiDropdownLimitWidth=\"min\"\n [tuiTextfieldCleaner]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n [tuiTextfieldLabelOutside]=\"true\"\n [nativeId]=\"propertyConnector.attrName\"\n [valueContent]=\"selectContent\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"propertyConnector.documentationPropertyValues\"\n [itemContent]=\"selectContent\"\n ></tui-data-list-wrapper>\n </tui-select>\n <ng-template #selectContent let-data>\n <code>{{ inspectAny(data) }}</code>\n </ng-template>\n\n <ng-template #noItems>\n <ng-container\n [ngSwitch]=\"propertyConnector.documentationPropertyType\"\n >\n <tui-toggle\n *ngSwitchCase=\"'boolean'\"\n size=\"l\"\n [nativeId]=\"propertyConnector.attrName\"\n [showIcons]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-toggle>\n\n <tui-primitive-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"true\"\n [value]=\"propertyConnector.documentationPropertyValue || ''\"\n (valueChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-primitive-textfield>\n\n <div *ngSwitchCase=\"'color'\" tuiGroup>\n <tui-primitive-textfield\n tuiTextfieldType=\"color\"\n tuiTextfieldSize=\"m\"\n [attr.id]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n (valueChange)=\"onColorChange(propertyConnector, $event)\"\n ></tui-primitive-textfield>\n <tui-input-count\n tuiTextfieldSize=\"m\"\n [max]=\"100\"\n [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n >\n Opacity\n </tui-input-count>\n </div>\n\n <tui-input-count\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-input-count>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #elseEmitter>\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits$ | async\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n</table>\n",
|
|
908
908
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
909
909
|
animations: [
|
|
910
910
|
animations.trigger('emitEvent', [
|
|
@@ -1208,7 +1208,7 @@
|
|
|
1208
1208
|
},
|
|
1209
1209
|
cdk.TuiSwipeService,
|
|
1210
1210
|
],
|
|
1211
|
-
styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}:focus code:not(.exception){background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
|
|
1211
|
+
styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.bar_vertical{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=language-]):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}:focus code:not(.exception):not([class*=language-]){background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
|
|
1212
1212
|
}),
|
|
1213
1213
|
__param(0, core.Inject(common$1.LOCAL_STORAGE)),
|
|
1214
1214
|
__param(1, core.Inject(common$1.WINDOW))
|
|
@@ -1380,12 +1380,12 @@
|
|
|
1380
1380
|
this.searchText = searchText;
|
|
1381
1381
|
this.router = router;
|
|
1382
1382
|
this.activatedRoute = activatedRoute;
|
|
1383
|
+
this.menuOpen = false;
|
|
1383
1384
|
this.search = '';
|
|
1384
1385
|
this.open = false;
|
|
1385
1386
|
this.openPagesArr = [];
|
|
1386
1387
|
this.openPagesGroupsArr = [];
|
|
1387
1388
|
this.active = '';
|
|
1388
|
-
this.menuOpen = false;
|
|
1389
1389
|
this.mode$ = this.mode.change$.pipe(operators.startWith(null), operators.map(function () { return _this.mode.mode || 'onLight'; }));
|
|
1390
1390
|
// Angular can't navigate no anchor links
|
|
1391
1391
|
// https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
|
|
@@ -1528,7 +1528,7 @@
|
|
|
1528
1528
|
template: "<tui-hosted-dropdown\n *tuiLet=\"filteredItems as filtered\"\n tuiAutoFocus\n tuiDropdownLimitWidth=\"fixed\"\n class=\"input\"\n [autoFocus]=\"!!sidebar\"\n [content]=\"dropdown\"\n [canOpen]=\"canOpen\"\n [(open)]=\"open\"\n>\n <tui-primitive-textfield\n iconAlign=\"left\"\n tuiTextfieldSize=\"m\"\n iconContent=\"tuiIconSearch\"\n [pseudoFocused]=\"open || null\"\n [tuiTextfieldCleaner]=\"true\"\n [tuiTextfieldLabelOutside]=\"true\"\n [value]=\"search\"\n (valueChange)=\"onSearchChange($event)\"\n >\n {{ searchText }}\n </tui-primitive-textfield>\n <ng-template #dropdown let-activeZone>\n <tui-data-list>\n <tui-opt-group\n *ngFor=\"let group of filtered; let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <a\n *ngFor=\"let item of group\"\n tuiOption\n [routerLink]=\"item.route\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n </a>\n </tui-opt-group>\n </tui-data-list>\n </ng-template>\n</tui-hosted-dropdown>\n\n<nav class=\"navigation\">\n <tui-scrollbar class=\"scrollbar\" [tuiMode]=\"mode$ | async\">\n <tui-accordion [closeOthers]=\"false\" [rounded]=\"false\">\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [(open)]=\"!!openPagesArr[index]\"\n >\n <span class=\"tui-space_left-2\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n >\n <ng-container\n *ngTemplateOutlet=\"pages; context: {item: item, index: index * 100 + subIndex}\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n >\n <ng-container\n *ngTemplateOutlet=\"pages; context: {item: item, index: items.length - 1 + index}\"\n ></ng-container>\n </ng-container>\n </div>\n\n <ng-template #pages let-item=\"item\" let-index=\"index\">\n <a\n *ngIf=\"!item.subPages; else subPages\"\n tuiLink\n routerLinkActive=\"sublink_active\"\n class=\"sublink\"\n [routerLink]=\"item.route\"\n [scrollIntoView]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n </a>\n <ng-template #subPages>\n <div\n routerLinkActive\n class=\"subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\n tuiLink\n type=\"button\"\n class=\"sublink sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-svg\n src=\"tuiIconChevronRight\"\n class=\"chevron\"\n [class.chevron_active]=\"!!openPagesGroupsArr[index]\"\n ></tui-svg>\n {{ item.title }}\n </button>\n <tui-expand\n class=\"tui-space_left-1\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"section section_bordered\">\n <a\n *ngFor=\"let subPage of item.subPages\"\n tuiLink\n routerLinkActive=\"sublink_active\"\n class=\"sublink sublink_small\"\n [routerLink]=\"subPage.route\"\n [scrollIntoView]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n </a>\n </div>\n </tui-expand>\n </div>\n </ng-template>\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content></ng-content>\n",
|
|
1529
1529
|
providers: NAVIGATION_PROVIDERS,
|
|
1530
1530
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
1531
|
-
styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.input{display:block;margin:1.25rem}.navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.scrollbar{width:100%;scroll-behavior:smooth}.items-container{display:flex;flex-direction:column;padding:0 16px}.section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.subsection{margin-left:.5rem}.sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;font:var(--tui-font-text-m);margin-left:.5rem
|
|
1531
|
+
styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.input{display:block;margin:1.25rem}.navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.scrollbar{width:100%;scroll-behavior:smooth}.items-container{display:flex;flex-direction:column;padding:0 16px}.section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.subsection{margin-left:.5rem}.sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:1rem 0 0;border:0;background:0 0;font-size:inherit;line-height:inherit;font:var(--tui-font-text-m);margin-left:.5rem}.sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.sublink_subsection{margin-left:0;line-height:1.6rem}.sublink_active{color:var(--tui-text-01)}.chevron{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.chevron_active{transform:rotate(90deg)}"]
|
|
1532
1532
|
}),
|
|
1533
1533
|
__param(0, core.Inject(core.ChangeDetectorRef)),
|
|
1534
1534
|
__param(1, core.Inject(platformBrowser.Title)),
|
|
@@ -1722,8 +1722,8 @@
|
|
|
1722
1722
|
this.package = '';
|
|
1723
1723
|
this.type = '';
|
|
1724
1724
|
this.path = '';
|
|
1725
|
-
this.activeItemIndex = NaN;
|
|
1726
1725
|
this.tabConnectors = cdk.EMPTY_QUERY;
|
|
1726
|
+
this.activeItemIndex = NaN;
|
|
1727
1727
|
}
|
|
1728
1728
|
Object.defineProperty(TuiDocPageComponent.prototype, "showSeeAlso", {
|
|
1729
1729
|
get: function () {
|