@taiga-ui/addon-doc 2.25.0 → 2.28.0

package/README.md

@@ -26,142 +26,142 @@ npm i @taiga-ui/addon-doc
 
 1. Include `TuiDocMainModule` in your App module and use in your template:
 
-    ```html
-    <tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
-    ```
+   ```html
+   <tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
+   ```
 
 2. Configure languages to highlight in your main module:
 
-    ```typescript
-    import {NgModule} from '@angular/core';
-    import {TuiDocMainModule} from '@taiga-ui/addon-doc';
-    import {hljsLanguages} from './hljsLanguages';
-    import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
-    import {AppComponent} from './app.component';
-
-    @NgModule({
-        bootstrap: [AppComponent],
-        imports: [TuiDocMainModule],
-        declarations: [AppComponent],
-        providers: [
-            {
-                provide: HIGHLIGHT_OPTIONS,
-                useValue: {
-                    coreLibraryLoader: () => import('highlight.js/lib/core' as string),
-                    lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers
-                    languages: {
-                        typescript: () => import('highlight.js/lib/languages/typescript' as string),
-                        less: () => import('highlight.js/lib/languages/less' as string),
-                        xml: () => import('highlight.js/lib/languages/xml' as string),
-                    },
-                },
-            },
-        ],
-    })
-    export class AppBrowserModule {}
-    ```
+   ```typescript
+   import {NgModule} from '@angular/core';
+   import {TuiDocMainModule} from '@taiga-ui/addon-doc';
+   import {hljsLanguages} from './hljsLanguages';
+   import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
+   import {AppComponent} from './app.component';
+
+   @NgModule({
+     bootstrap: [AppComponent],
+     imports: [TuiDocMainModule],
+     declarations: [AppComponent],
+     providers: [
+       {
+         provide: HIGHLIGHT_OPTIONS,
+         useValue: {
+           coreLibraryLoader: () => import('highlight.js/lib/core' as string),
+           lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers
+           languages: {
+             typescript: () => import('highlight.js/lib/languages/typescript' as string),
+             less: () => import('highlight.js/lib/languages/less' as string),
+             xml: () => import('highlight.js/lib/languages/xml' as string),
+           },
+         },
+       },
+     ],
+   })
+   export class AppBrowserModule {}
+   ```
 
 3. Configure documentation providers:
 
-    `TUI_DOC_PAGES` — an array of pages, see `TuiDocPages` type
+   `TUI_DOC_PAGES` — an array of pages, see `TuiDocPages` type
 
-    `TUI_DOC_LOGO` — an src for the SVG logo in the sidebar
+   `TUI_DOC_LOGO` — an src for the SVG logo in the sidebar
 
-    `TUI_DOC_DEFAULT_TABS` — an array of default named for tabs on your typical page
+   `TUI_DOC_DEFAULT_TABS` — an array of default named for tabs on your typical page
 
-    `TUI_DOC_TITLE` — a title prefix for the browser tab
+   `TUI_DOC_TITLE` — a title prefix for the browser tab
 
-    `TUI_DOC_SEE_ALSO` — a two dimensional array of related pages by their titles
+   `TUI_DOC_SEE_ALSO` — a two dimensional array of related pages by their titles
 
 4. Configure routing:
 
-    ```typescript
-    import {Routes} from '@angular/router';
+   ```typescript
+   import {Routes} from '@angular/router';
 
-    const appRoutes: Routes = [
-        {
-            path: 'super-page',
-            loadChildren: '../super-page/super-page.module#SuperModule',
-            data: {
-                title: 'Super Page',
-            },
-        },
-        // ...
-    ];
-    ```
+   const appRoutes: Routes = [
+     {
+       path: 'super-page',
+       loadChildren: '../super-page/super-page.module#SuperModule',
+       data: {
+         title: 'Super Page',
+       },
+     },
+     // ...
+   ];
+   ```
 
-    > You must have title in route data in order for `TUI_DOC_SEE_ALSO` to work. It would also be automatically added to
-    > `TUI_DOC_TITLE` for browser tab title when navigating to that route.
+   > You must have title in route data in order for `TUI_DOC_SEE_ALSO` to work. It would also be automatically added to
+   > `TUI_DOC_TITLE` for browser tab title when navigating to that route.
 
 5. Create pages.
 
-    _Module:_
-
-    ```typescript
-    import {NgModule} from '@angular/core';
-    import {RouterModule} from '@angular/router';
-    import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
-    import {SuperComponent} from './super.component';
-
-    @NgModule({
-        imports: [TuiAddonDocModule, RouterModule.forChild(generateRoutes(SuperComponent))],
-        declarations: [SuperComponent],
-        exports: [SuperComponent],
-    })
-    export class SuperModule {}
-    ```
-
-    _Component:_
-
-    ```typescript
-    import {Component} from '@angular/core';
-
-    import {default as exampleHtml} from '!!raw-loader!./examples/1/index.html';
-    import {default as exampleTs} from '!!raw-loader!./examples/1/index.ts';
-
-    @Component({
-        selector: 'super-component',
-        templateUrl: './account.template.html',
-    })
-    export class SuperComponent {
-        // Keys would be used as tabs for code example
-        readonly example = {
-            TypeScript: exampleTs,
-            HTML: exampleHtml,
-        };
-
-        readonly inputVariants = ['input 1', 'input 2'];
-    }
-    ```
-
-    _Template:_
-
-    ```html
-    <tui-doc-page header="Super" package="SUPER-PACKAGE" deprecated>
-        <ng-template pageTab>
-            <!-- default tab name would be used -->
-            This would be the content of a first tab
-
-            <tui-doc-example id="basic-example" heading="Example of usage" [content]="example">
-                <example-1></example-1>
-            </tui-doc-example>
-        </ng-template>
-
-        <ng-template pageTab="Documentation">
-            <tui-doc-demo>
-                <super-component [input]="input"></super-component>
-            </tui-doc-demo>
-            <tui-doc-documentation>
-                <ng-template
-                    documentationPropertyName="input"
-                    documentationPropertyMode="input"
-                    documentationPropertyType="T"
-                    [documentationPropertyValues]="inputVariants"
-                    [(documentationPropertyValue)]="input"
-                >
-                    Some input
-                </ng-template>
-            </tui-doc-documentation>
-        </ng-template>
-    </tui-doc-page>
-    ```
+   _Module:_
+
+   ```typescript
+   import {NgModule} from '@angular/core';
+   import {RouterModule} from '@angular/router';
+   import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
+   import {SuperComponent} from './super.component';
+
+   @NgModule({
+     imports: [TuiAddonDocModule, RouterModule.forChild(generateRoutes(SuperComponent))],
+     declarations: [SuperComponent],
+     exports: [SuperComponent],
+   })
+   export class SuperModule {}
+   ```
+
+   _Component:_
+
+   ```typescript
+   import {Component} from '@angular/core';
+
+   import {default as exampleHtml} from '!!raw-loader!./examples/1/index.html';
+   import {default as exampleTs} from '!!raw-loader!./examples/1/index.ts';
+
+   @Component({
+     selector: 'super-component',
+     templateUrl: './account.template.html',
+   })
+   export class SuperComponent {
+     // Keys would be used as tabs for code example
+     readonly example = {
+       TypeScript: exampleTs,
+       HTML: exampleHtml,
+     };
+
+     readonly inputVariants = ['input 1', 'input 2'];
+   }
+   ```
+
+   _Template:_
+
+   ```html
+   <tui-doc-page header="Super" package="SUPER-PACKAGE" deprecated>
+     <ng-template pageTab>
+       <!-- default tab name would be used -->
+       This would be the content of a first tab
+
+       <tui-doc-example id="basic-example" heading="Example of usage" [content]="example">
+         <example-1></example-1>
+       </tui-doc-example>
+     </ng-template>
+
+     <ng-template pageTab="Documentation">
+       <tui-doc-demo>
+         <super-component [input]="input"></super-component>
+       </tui-doc-demo>
+       <tui-doc-documentation>
+         <ng-template
+           documentationPropertyName="input"
+           documentationPropertyMode="input"
+           documentationPropertyType="T"
+           [documentationPropertyValues]="inputVariants"
+           [(documentationPropertyValue)]="input"
+         >
+           Some input
+         </ng-template>
+       </tui-doc-documentation>
+     </ng-template>
+   </tui-doc-page>
+   ```

package/bundles/taiga-ui-addon-doc.umd.js

@@ -246,8 +246,8 @@
     var TuiDocCodeComponent = /** @class */ (function () {
         function TuiDocCodeComponent() {
             this.rawLoader$$ = new rxjs.BehaviorSubject('');
-            this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoad));
             this.filename = '';
+            this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoad));
         }
         Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
             set: function (code) {
@@ -406,6 +406,8 @@
             this.destroy$ = destroy$;
             this.renderer = renderer;
             this.texts = texts;
+            this.initialX = 0;
+            this.wrapperWidth = 0;
             this.control = null;
             this.updateOnVariants = ['change', 'blur', 'submit'];
             this.updateOn = 'change';
@@ -415,8 +417,6 @@
             this.mode = null;
             this.change$ = new rxjs.Subject();
             this.items = ['onLight', 'onDark'];
-            this.initialX = 0;
-            this.wrapperWidth = 0;
             this.isBrowser = common.isPlatformBrowser(platformId);
             var parsedMode = locationRef.path().match(/tui-mode=(onDark|onLight)/);
             if (parsedMode !== null && parsedMode.length > 0) {
@@ -433,6 +433,9 @@
             });
         }
         TuiDocDemoComponent_1 = TuiDocDemoComponent;
+        TuiDocDemoComponent.prototype.onResize = function () {
+            this.setResizerTextContent();
+        };
         TuiDocDemoComponent.prototype.ngOnInit = function () {
             this.createForm();
         };
@@ -449,9 +452,6 @@
             var offsetWidth = this.content.nativeElement.offsetWidth;
             this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || '0', 10) * 2);
         };
-        TuiDocDemoComponent.prototype.onResize = function () {
-            this.setResizerTextContent();
-        };
         TuiDocDemoComponent.prototype.onDragStart = function (event) {
             event.preventDefault();
             this.initialX = event.clientX;
@@ -495,12 +495,6 @@
             { type: router.UrlSerializer, decorators: [{ type: core.Inject, args: [router.UrlSerializer,] }] },
             { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
         ]; };
-        __decorate([
-            core.Input()
-        ], TuiDocDemoComponent.prototype, "control", void 0);
-        __decorate([
-            core.ContentChild(core.TemplateRef)
-        ], TuiDocDemoComponent.prototype, "template", void 0);
         __decorate([
             core.ViewChild('content')
         ], TuiDocDemoComponent.prototype, "content", void 0);
@@ -510,6 +504,12 @@
         __decorate([
             core.ViewChild('resizerText')
         ], TuiDocDemoComponent.prototype, "resizerText", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDemoComponent.prototype, "control", void 0);
+        __decorate([
+            core.ContentChild(core.TemplateRef)
+        ], TuiDocDemoComponent.prototype, "template", void 0);
         __decorate([
             core.HostListener('window:resize')
         ], TuiDocDemoComponent.prototype, "onResize", null);
@@ -717,6 +717,11 @@
             this.documentationPropertyValueChange.emit(value);
             this.setQueryParam(value);
         };
+        TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
+            // For more convenient debugging
+            console.log(this.attrName, event);
+            this.emits$.next(this.emits$.value + 1);
+        };
         TuiDocDocumentationPropertyConnectorDirective.prototype.parseParams = function (params) {
             if (!params[this.documentationPropertyName] &&
                 !params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
@@ -743,11 +748,6 @@
             tree.queryParams = __assign(__assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
             this.locationRef.go(String(tree));
         };
-        TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
-            // For more convenient debugging
-            console.log(this.attrName, event);
-            this.emits$.next(this.emits$.value + 1);
-        };
         TuiDocDocumentationPropertyConnectorDirective.ctorParameters = function () { return [
             { type: core.TemplateRef, decorators: [{ type: core.Inject, args: [core.TemplateRef,] }] },
             { type: common.Location, decorators: [{ type: core.Inject, args: [common.Location,] }] },
@@ -904,7 +904,7 @@
         TuiDocDocumentationComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-documentation',
-                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=\"\n                tui-table__th tui-table__th_last tui-table__th_text_right\n                t-cell t-cell_value\n            \"\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=\"\n                tui-table__td tui-table__td_first tui-table__td_align_center\n                t-cell\n            \"\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/TinkoffCreditSystems/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=\"\n                tui-table__td\n                tui-table__td_align_center\n                tui-table__td_last\n                tui-table__td_text_right\n                t-cell\n            \"\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",
+                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/TinkoffCreditSystems/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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 animations: [
                     animations.trigger('emitEvent', [
@@ -1208,7 +1208,7 @@
                     },
                     cdk.TuiSwipeService,
                 ],
-                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}"]
+                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([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}"]
             }),
             __param(0, core.Inject(common$1.LOCAL_STORAGE)),
             __param(1, core.Inject(common$1.WINDOW))
@@ -1380,12 +1380,12 @@
             this.searchText = searchText;
             this.router = router;
             this.activatedRoute = activatedRoute;
+            this.menuOpen = false;
             this.search = '';
             this.open = false;
             this.openPagesArr = [];
             this.openPagesGroupsArr = [];
             this.active = '';
-            this.menuOpen = false;
             this.mode$ = this.mode.change$.pipe(operators.startWith(null), operators.map(function () { return _this.mode.mode || 'onLight'; }));
             // Angular can't navigate no anchor links
             // https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
@@ -1722,8 +1722,8 @@
             this.package = '';
             this.type = '';
             this.path = '';
-            this.activeItemIndex = NaN;
             this.tabConnectors = cdk.EMPTY_QUERY;
+            this.activeItemIndex = NaN;
         }
         Object.defineProperty(TuiDocPageComponent.prototype, "showSeeAlso", {
             get: function () {