@taiga-ui/addon-doc 2.21.0 → 2.22.0

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

@@ -2,7 +2,7 @@ import { __decorate, __param } from 'tslib';
 import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ContentChild, TemplateRef, ViewChild, HostListener, forwardRef, Optional, ElementRef, Directive, EventEmitter, Output, ChangeDetectorRef, ContentChildren, Attribute, ViewEncapsulation } from '@angular/core';
 import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } from '@angular/common';
 import { HighlightModule } from 'ngx-highlightjs';
-import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, isPresent, uniqBy, getElementObscurers, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, tuiDefaultProp } from '@taiga-ui/cdk';
+import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, isPresent, uniqBy, getElementObscurers, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, TuiSwipeService, tuiDefaultProp } from '@taiga-ui/cdk';
 import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiAccordionModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiTagModule } from '@taiga-ui/kit';
 import { Subject, timer, Observable, merge } from 'rxjs';
 import { switchMapTo, mapTo, startWith, takeUntil, filter, map, mergeMap, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
@@ -264,7 +264,7 @@ TuiDocDemoComponent = TuiDocDemoComponent_1 = __decorate([
                 useExisting: forwardRef(() => TuiDocDemoComponent_1),
             },
         ],
-        styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.wrapper_gray{background-color:#e5e7ea}.t-wrapper.wrapper_dark.wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.wrapper_gray.wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width:47.9375em){.t-wrapper{min-height:auto}.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:0;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:after,.t-resizer:before{content:'';position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translateX(.125rem)}.t-resizer:after{transform:translateX(-.1875rem)}@media screen and (max-width:47.9375em){.t-resizer{display:none}}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}@supports ((position:-webkit-sticky) or (position:sticky)){@media screen and (min-height:37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}"]
+        styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.wrapper_gray{background-color:#e5e7ea}.t-wrapper.wrapper_dark.wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.wrapper_gray.wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width:47.9375em){.t-wrapper{min-height:auto}.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:0;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:after,.t-resizer:before{content:'';position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translateX(.125rem)}.t-resizer:after{transform:translateX(-.1875rem)}@media screen and (max-width:47.9375em){.t-resizer{display:none}}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}@supports (position:sticky){@media screen and (min-height:37.5rem){:host{position:sticky;top:4.625rem;z-index:2}}}"]
     }),
     __param(0, Inject(TUI_IS_MOBILE)),
     __param(1, Inject(TuiDestroyService)),
@@ -492,7 +492,7 @@ let TuiDocNavigationComponent = class TuiDocNavigationComponent {
                     page.subPages.forEach(subPage => {
                         if (this.isActiveRoute(subPage.route)) {
                             this.openPagesArr[pagesIndex] = true;
-                            this.openPagesGroupsArr[pagesIndex + pageIndex] = true;
+                            this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
                             this.active = subPage.route;
                         }
                     });
@@ -537,7 +537,7 @@ __decorate([
 TuiDocNavigationComponent = __decorate([
     Component({
         selector: 'tui-doc-navigation',
-        template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    class=\"input\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\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 [tuiMode]=\"mode$ | async\" class=\"scrollbar\">\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 + subIndex}\"\n                            >\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                >\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                class=\"sublink\"\n                routerLinkActive=\"sublink_active\"\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                                class=\"sublink sublink_small\"\n                                routerLinkActive=\"sublink_active\"\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",
+        template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    class=\"input\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\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 [tuiMode]=\"mode$ | async\" class=\"scrollbar\">\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                            >\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                >\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                class=\"sublink\"\n                routerLinkActive=\"sublink_active\"\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                                class=\"sublink sublink_small\"\n                                routerLinkActive=\"sublink_active\"\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{display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01);z-index:1}.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)}"]
@@ -1163,6 +1163,7 @@ TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
                 provide: TuiModeDirective,
                 useExisting: forwardRef(() => TuiDocMainComponent_1),
             },
+            TuiSwipeService,
         ],
         styles: ["html{scroll-padding-top:4rem;height:auto}@-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}"]
     }),
@@ -1175,12 +1176,13 @@ const TUI_DOC_LOGO = new InjectionToken('Main logo', {
 });
 
 let TuiDocHeaderComponent = class TuiDocHeaderComponent {
-    constructor(logo, menu, router) {
+    constructor(logo, menu, router, swipes$) {
         this.logo = logo;
         this.menu = menu;
         this.router = router;
+        this.swipes$ = swipes$;
         this.stream$ = new Subject();
-        this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$).pipe(startWith(false), distinctUntilChanged());
+        this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$, this.swipes$.pipe(filter(swipe => swipe.direction === 'left' || swipe.direction === 'right'), map(swipe => swipe.direction === 'right'))).pipe(startWith(false), distinctUntilChanged());
     }
     onClick() {
         this.stream$.next(true);
@@ -1194,18 +1196,20 @@ let TuiDocHeaderComponent = class TuiDocHeaderComponent {
 TuiDocHeaderComponent.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_LOGO,] }] },
     { type: String, decorators: [{ type: Inject, args: [TUI_DOC_MENU_TEXT,] }] },
-    { type: Router, decorators: [{ type: Inject, args: [Router,] }] }
+    { type: Router, decorators: [{ type: Inject, args: [Router,] }] },
+    { type: TuiSwipeService, decorators: [{ type: Inject, args: [TuiSwipeService,] }] }
 ];
 TuiDocHeaderComponent = __decorate([
     Component({
         selector: 'header[tuiDocHeader]',
         template: "<button\n    tuiIconButton\n    class=\"menu\"\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open$ | async\"\n        class=\"navigation\"\n    ></tui-doc-navigation>\n</button>\n<div polymorpheus-outlet class=\"logo tui-text_h5\" [content]=\"logo\">\n    <ng-template let-src>\n        <img class=\"img\" alt=\"Logo\" [src]=\"src\" />\n    </ng-template>\n</div>\n<ng-content></ng-content>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03);z-index:1}.logo{margin-right:auto}.img{display:block}.menu{margin-left:-1.25rem}@media screen and (min-width:80em){.menu{display:none}}.navigation{min-height:100%}"]
+        styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03);z-index:1}.logo{margin-right:auto}.img{display:block}.menu{margin-left:-1.25rem}@media screen and (min-width:48em){.menu{display:none}}.navigation{min-height:100%}"]
     }),
     __param(0, Inject(TUI_DOC_LOGO)),
     __param(1, Inject(TUI_DOC_MENU_TEXT)),
-    __param(2, Inject(Router))
+    __param(2, Inject(Router)),
+    __param(3, Inject(TuiSwipeService))
 ], TuiDocHeaderComponent);
 
 let TuiDocHeaderModule = class TuiDocHeaderModule {