@taiga-ui/addon-doc 2.27.0 → 2.30.0

package/esm5/components/navigation/navigation.component.js

@@ -172,7 +172,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
             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",
             providers: NAVIGATION_PROVIDERS,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            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;line-height:2.75rem}.sublink_small{margin-left:1rem;line-height:1.5rem}.sublink_small:not(:first-child){margin-top:1rem}.sublink_subsection{margin-left:0;line-height:2.75rem}.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)}"]
+            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)}"]
         }),
         __param(0, Inject(ChangeDetectorRef)),
         __param(1, Inject(Title)),

package/fesm2015/taiga-ui-addon-doc.js

@@ -1,7 +1,8 @@
 import { __awaiter, __decorate, __param } from 'tslib';
 import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ViewChild, ContentChild, TemplateRef, HostListener, forwardRef, EventEmitter, Output, Directive, ChangeDetectorRef, ContentChildren, Attribute, Optional, Pipe, ViewEncapsulation, ElementRef } from '@angular/core';
 import { BehaviorSubject, Subject, timer, Observable, merge } from 'rxjs';
-import { switchMap, switchMapTo, mapTo, startWith, takeUntil, map, debounceTime, filter, mergeMap, distinctUntilChanged } from 'rxjs/operators';
+import { switchMap, map, switchMapTo, mapTo, startWith, takeUntil, debounceTime, filter, mergeMap, distinctUntilChanged } from 'rxjs/operators';
+import MarkdownIt from 'markdown-it';
 import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } from '@angular/common';
 import { HighlightModule } from 'ngx-highlightjs';
 import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, TuiSwipeService, getElementObscurers, isPresent, uniqBy, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, tuiDefaultProp } from '@taiga-ui/cdk';
@@ -22,11 +23,17 @@ function rawLoad(content) {
     });
 }
 
+function tryParseMarkdownCodeBlock(text) {
+    const tokens = new MarkdownIt().parse(text, {});
+    const result = tokens.filter(({ tag }) => tag === 'code').map(({ content }) => content);
+    return result.length ? result : [text];
+}
+
 let TuiDocCodeComponent = class TuiDocCodeComponent {
     constructor() {
         this.rawLoader$$ = new BehaviorSubject('');
         this.filename = '';
-        this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoad));
+        this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoad), map(tryParseMarkdownCodeBlock));
     }
     set code(code) {
         this.rawLoader$$.next(code);
@@ -47,8 +54,8 @@ __decorate([
 TuiDocCodeComponent = __decorate([
     Component({
         selector: 'tui-doc-code',
-        template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre\n    class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"processor$ | async\"></code></pre>\n",
-        styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-code{margin:0}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._has-filename .hljs:not(:empty){border-radius:.75rem}@media screen and (max-width:47.9375em){.hljs:not(:empty){padding:1rem}}"]
+        template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre\n    *ngFor=\"let content of processor$ | async\"\n    class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n",
+        styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-code{margin:0}.t-code+.t-code{margin-top:1rem}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._has-filename .hljs:not(:empty){border-radius:.75rem}@media screen and (max-width:47.9375em){.hljs:not(:empty){padding:1rem}}"]
     })
 ], TuiDocCodeComponent);
 
@@ -460,7 +467,7 @@ let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPro
     }
     emitEvent(event) {
         // For more convenient debugging
-        console.log(this.attrName, event);
+        console.info(this.attrName, event);
         this.emits$.next(this.emits$.value + 1);
     }
     parseParams(params) {
@@ -637,7 +644,7 @@ __decorate([
 TuiDocDocumentationComponent = __decorate([
     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=\"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",
+        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",
         changeDetection: ChangeDetectionStrategy.OnPush,
         animations: [
             trigger('emitEvent', [
@@ -878,7 +885,7 @@ TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
             },
             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>.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}"]
     }),
     __param(0, Inject(LOCAL_STORAGE)),
     __param(1, Inject(WINDOW))
@@ -1159,7 +1166,7 @@ TuiDocNavigationComponent = __decorate([
         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",
         providers: NAVIGATION_PROVIDERS,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        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;line-height:2.75rem}.sublink_small{margin-left:1rem;line-height:1.5rem}.sublink_small:not(:first-child){margin-top:1rem}.sublink_subsection{margin-left:0;line-height:2.75rem}.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)}"]
+        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)}"]
     }),
     __param(0, Inject(ChangeDetectorRef)),
     __param(1, Inject(Title)),