@taiga-ui/addon-doc 2.18.0 → 2.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/bundles/taiga-ui-addon-doc.umd.js +32 -23
  2. package/bundles/taiga-ui-addon-doc.umd.js.map +1 -1
  3. package/bundles/taiga-ui-addon-doc.umd.min.js +2 -2
  4. package/bundles/taiga-ui-addon-doc.umd.min.js.map +1 -1
  5. package/components/navigation/navigation.component.d.ts +2 -1
  6. package/esm2015/components/code/code.component.js +1 -1
  7. package/esm2015/components/demo/demo.component.js +1 -1
  8. package/esm2015/components/documentation/documentation-property-connector.directive.js +1 -1
  9. package/esm2015/components/documentation/documentation.component.js +2 -2
  10. package/esm2015/components/example/example.component.js +3 -3
  11. package/esm2015/components/main/main.component.js +4 -2
  12. package/esm2015/components/navigation/navigation.component.js +15 -10
  13. package/esm2015/components/navigation/navigation.module.js +3 -2
  14. package/esm2015/components/navigation/navigation.providers.js +1 -1
  15. package/esm2015/internal/header/header.component.js +11 -7
  16. package/esm5/components/code/code.component.js +1 -1
  17. package/esm5/components/demo/demo.component.js +1 -1
  18. package/esm5/components/documentation/documentation-property-connector.directive.js +1 -1
  19. package/esm5/components/documentation/documentation.component.js +2 -2
  20. package/esm5/components/example/example.component.js +3 -3
  21. package/esm5/components/main/main.component.js +4 -2
  22. package/esm5/components/navigation/navigation.component.js +15 -10
  23. package/esm5/components/navigation/navigation.module.js +3 -2
  24. package/esm5/components/navigation/navigation.providers.js +1 -1
  25. package/esm5/internal/header/header.component.js +11 -7
  26. package/fesm2015/taiga-ui-addon-doc.js +31 -22
  27. package/fesm2015/taiga-ui-addon-doc.js.map +1 -1
  28. package/fesm5/taiga-ui-addon-doc.js +31 -22
  29. package/fesm5/taiga-ui-addon-doc.js.map +1 -1
  30. package/internal/header/header.component.d.ts +3 -1
  31. package/package.json +6 -6
  32. package/taiga-ui-addon-doc.metadata.json +1 -1
@@ -1,8 +1,8 @@
1
1
  import { __decorate, __param, __assign, __spread, __read } from 'tslib';
2
- import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ContentChild, TemplateRef, ViewChild, HostListener, forwardRef, ElementRef, Directive, EventEmitter, Output, ChangeDetectorRef, ContentChildren, Attribute, Optional, ViewEncapsulation } from '@angular/core';
2
+ 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';
3
3
  import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } from '@angular/common';
4
4
  import { HighlightModule } from 'ngx-highlightjs';
5
- import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, isPresent, uniqBy, getElementObscurers, TuiActiveZoneModule, TuiLetModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, tuiDefaultProp } from '@taiga-ui/cdk';
5
+ 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';
6
6
  import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiAccordionModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiTagModule } from '@taiga-ui/kit';
7
7
  import { Subject, timer, Observable, merge } from 'rxjs';
8
8
  import { switchMapTo, mapTo, startWith, takeUntil, filter, map, mergeMap, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
@@ -10,10 +10,10 @@ import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiG
10
10
  import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
11
11
  import { UrlSerializer, RouterModule, Router, ActivatedRoute, NavigationEnd } from '@angular/router';
12
12
  import { Title } from '@angular/platform-browser';
13
+ import { TuiSidebarDirective, TuiSidebarModule } from '@taiga-ui/addon-mobile';
13
14
  import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
14
15
  import { LOCATION, LOCAL_STORAGE, WINDOW } from '@ng-web-apis/common';
15
16
  import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
16
- import { TuiSidebarModule } from '@taiga-ui/addon-mobile';
17
17
 
18
18
  var TuiDocCodeComponent = /** @class */ (function () {
19
19
  function TuiDocCodeComponent() {
@@ -40,7 +40,7 @@ var TuiDocCodeComponent = /** @class */ (function () {
40
40
  Component({
41
41
  selector: 'tui-doc-code',
42
42
  template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre class=\"t-code\"><code [lineNumbers]=\"true\" [highlight]=\"code\"></code></pre>\n",
43
- 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-color:var(--tui-base-02);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}}"]
43
+ 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}}"]
44
44
  })
45
45
  ], TuiDocCodeComponent);
46
46
  return TuiDocCodeComponent;
@@ -281,7 +281,7 @@ var TuiDocDemoComponent = /** @class */ (function () {
281
281
  useExisting: forwardRef(function () { return TuiDocDemoComponent_1; }),
282
282
  },
283
283
  ],
284
- 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(51,51,51,.2);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(51,51,51,.2);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:.0625rem;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}}}"]
284
+ 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}}}"]
285
285
  }),
286
286
  __param(0, Inject(TUI_IS_MOBILE)),
287
287
  __param(1, Inject(TuiDestroyService)),
@@ -434,10 +434,11 @@ function itemsProviderFactory(pages) {
434
434
  var SCROLL_INTO_VIEW_DELAY = 200;
435
435
  // @dynamic
436
436
  var TuiDocNavigationComponent = /** @class */ (function () {
437
- function TuiDocNavigationComponent(titleService, title$, documentRef, mode, labels, items, searchText, router, activatedRoute) {
437
+ function TuiDocNavigationComponent(titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
438
438
  var _this = this;
439
439
  this.documentRef = documentRef;
440
440
  this.mode = mode;
441
+ this.sidebar = sidebar;
441
442
  this.labels = labels;
442
443
  this.items = items;
443
444
  this.searchText = searchText;
@@ -542,7 +543,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
542
543
  page.subPages.forEach(function (subPage) {
543
544
  if (_this.isActiveRoute(subPage.route)) {
544
545
  _this.openPagesArr[pagesIndex] = true;
545
- _this.openPagesGroupsArr[pagesIndex + pageIndex] = true;
546
+ _this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
546
547
  _this.active = subPage.route;
547
548
  }
548
549
  });
@@ -567,6 +568,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
567
568
  { type: Observable, decorators: [{ type: Inject, args: [NAVIGATION_TITLE,] }] },
568
569
  { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
569
570
  { type: TuiModeDirective, decorators: [{ type: Inject, args: [TuiModeDirective,] }] },
571
+ { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TuiSidebarDirective,] }] },
570
572
  { type: Array, decorators: [{ type: Inject, args: [NAVIGATION_LABELS,] }] },
571
573
  { type: undefined, decorators: [{ type: Inject, args: [NAVIGATION_ITEMS,] }] },
572
574
  { type: String, decorators: [{ type: Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
@@ -585,7 +587,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
585
587
  TuiDocNavigationComponent = __decorate([
586
588
  Component({
587
589
  selector: 'tui-doc-navigation',
588
- template: "<tui-hosted-dropdown\n *tuiLet=\"filteredItems as filtered\"\n class=\"input\"\n tuiDropdownLimitWidth=\"fixed\"\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",
590
+ 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",
589
591
  providers: NAVIGATION_PROVIDERS,
590
592
  changeDetection: ChangeDetectionStrategy.OnPush,
591
593
  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)}"]
@@ -594,11 +596,13 @@ var TuiDocNavigationComponent = /** @class */ (function () {
594
596
  __param(1, Inject(NAVIGATION_TITLE)),
595
597
  __param(2, Inject(DOCUMENT)),
596
598
  __param(3, Inject(TuiModeDirective)),
597
- __param(4, Inject(NAVIGATION_LABELS)),
598
- __param(5, Inject(NAVIGATION_ITEMS)),
599
- __param(6, Inject(TUI_DOC_SEARCH_TEXT)),
600
- __param(7, Inject(Router)),
601
- __param(8, Inject(ActivatedRoute))
599
+ __param(4, Optional()),
600
+ __param(4, Inject(TuiSidebarDirective)),
601
+ __param(5, Inject(NAVIGATION_LABELS)),
602
+ __param(6, Inject(NAVIGATION_ITEMS)),
603
+ __param(7, Inject(TUI_DOC_SEARCH_TEXT)),
604
+ __param(8, Inject(Router)),
605
+ __param(9, Inject(ActivatedRoute))
602
606
  ], TuiDocNavigationComponent);
603
607
  return TuiDocNavigationComponent;
604
608
  }());
@@ -674,6 +678,7 @@ var TuiDocNavigationModule = /** @class */ (function () {
674
678
  TuiScrollbarModule,
675
679
  TuiSvgModule,
676
680
  TuiDataListModule,
681
+ TuiAutoFocusModule,
677
682
  ],
678
683
  declarations: [TuiDocNavigationComponent],
679
684
  exports: [TuiDocNavigationComponent],
@@ -1008,7 +1013,7 @@ var TuiDocDocumentationComponent = /** @class */ (function () {
1008
1013
  TuiDocDocumentationComponent = __decorate([
1009
1014
  Component({
1010
1015
  selector: 'tui-doc-documentation',
1011
- 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 class=\"t-property t-cell\"\n automation-id=\"tui-documentation__property-name\"\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 >deprecated</span\n >\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 ><code>ng-polymorpheus</code></a\n >\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 *ngIf=\"propertyConnector.shouldShowValues\">\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 </td>\n </tr>\n</table>\n",
1016
+ 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 class=\"t-property t-cell\"\n automation-id=\"tui-documentation__property-name\"\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 >deprecated</span\n >\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 ><code>ng-polymorpheus</code></a\n >\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 *ngIf=\"propertyConnector.shouldShowValues\">\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 </td>\n </tr>\n</table>\n",
1012
1017
  changeDetection: ChangeDetectionStrategy.OnPush,
1013
1018
  styles: [":host{display:block;min-width:100%}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}@media screen and (max-width:47.9375em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}.t-cell_value{width:9.375rem}.t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}"]
1014
1019
  }),
@@ -1210,9 +1215,9 @@ var TuiDocExampleComponent = /** @class */ (function () {
1210
1215
  TuiDocExampleComponent = __decorate([
1211
1216
  Component({
1212
1217
  selector: 'tui-doc-example',
1213
- template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n <span polymorpheus-outlet [content]=\"heading\"></span>\n <button\n *ngIf=\"id\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n class=\"t-link-icon\"\n icon=\"tuiIconLinkLarge\"\n appearance=\"icon\"\n [title]=\"copy$ | async\"\n (click)=\"copyExampleLink()\"\n ></button>\n</h3>\n<h4\n *ngIf=\"description\"\n class=\"t-description\"\n polymorpheus-outlet\n [content]=\"description\"\n></h4>\n<div class=\"t-example\">\n <div class=\"t-tabs\">\n <tui-tabs [(activeItemIndex)]=\"activeItemIndex\">\n <button *ngFor=\"let tab of tabs\" tuiTab>{{tab}}</button>\n </tui-tabs>\n\n <button\n *ngIf=\"codeEditor\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n (click)=\"codeEditor.open(componentName, id || '', processedContent)\"\n >\n Edit on {{codeEditor.name}}\n </button>\n </div>\n <ng-container [ngSwitch]=\"activeItem\">\n <div\n *ngIf=\"isDefaultItem; else codeTab\"\n class=\"t-demo\"\n automation-id=\"tui-doc-example\"\n >\n <ng-content></ng-content>\n </div>\n <ng-template #codeTab>\n <tui-doc-copy\n class=\"t-copy-code\"\n [cdkCopyToClipboard]=\"code\"\n ></tui-doc-copy>\n <tui-doc-code [code]=\"code\"></tui-doc-code>\n </ng-template>\n </ng-container>\n</div>\n",
1218
+ template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n <span polymorpheus-outlet [content]=\"heading\"></span>\n <button\n *ngIf=\"id\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n class=\"t-link-icon\"\n icon=\"tuiIconLinkLarge\"\n appearance=\"icon\"\n [title]=\"copy$ | async\"\n (click)=\"copyExampleLink()\"\n ></button>\n</h3>\n<h4\n *ngIf=\"description\"\n class=\"t-description\"\n polymorpheus-outlet\n [content]=\"description\"\n></h4>\n<div class=\"t-example\">\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button *tuiTab tuiTab>{{tab}}</button>\n </ng-container>\n </tui-tabs-with-more>\n\n <button\n *ngIf=\"codeEditor\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n (click)=\"codeEditor.open(componentName, id || '', processedContent)\"\n >\n Edit on {{codeEditor.name}}\n </button>\n </div>\n <ng-container [ngSwitch]=\"activeItem\">\n <div\n *ngIf=\"isDefaultItem; else codeTab\"\n class=\"t-demo\"\n automation-id=\"tui-doc-example\"\n >\n <ng-content></ng-content>\n </div>\n <ng-template #codeTab>\n <tui-doc-copy\n class=\"t-copy-code\"\n [cdkCopyToClipboard]=\"code\"\n ></tui-doc-copy>\n <tui-doc-code [code]=\"code\"></tui-doc-code>\n </ng-template>\n </ng-container>\n</div>\n",
1214
1219
  changeDetection: ChangeDetectionStrategy.OnPush,
1215
- styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}.t-tabs{padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);display:flex;justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.t-tabs{padding:0 1rem}}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
1220
+ styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}.t-tabs-wrapper{padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);display:flex;justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.t-tabs-wrapper{padding:0 1rem}}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
1216
1221
  }),
1217
1222
  __param(0, Attribute('id')),
1218
1223
  __param(1, Inject(Clipboard)),
@@ -1286,8 +1291,9 @@ var TuiDocMainComponent = /** @class */ (function () {
1286
1291
  provide: TuiModeDirective,
1287
1292
  useExisting: forwardRef(function () { return TuiDocMainComponent_1; }),
1288
1293
  },
1294
+ TuiSwipeService,
1289
1295
  ],
1290
- 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-base-02)}.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}"]
1296
+ 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}"]
1291
1297
  }),
1292
1298
  __param(0, Inject(LOCAL_STORAGE)),
1293
1299
  __param(1, Inject(WINDOW))
@@ -1300,12 +1306,13 @@ var TUI_DOC_LOGO = new InjectionToken('Main logo', {
1300
1306
  });
1301
1307
 
1302
1308
  var TuiDocHeaderComponent = /** @class */ (function () {
1303
- function TuiDocHeaderComponent(logo, menu, router) {
1309
+ function TuiDocHeaderComponent(logo, menu, router, swipes$) {
1304
1310
  this.logo = logo;
1305
1311
  this.menu = menu;
1306
1312
  this.router = router;
1313
+ this.swipes$ = swipes$;
1307
1314
  this.stream$ = new Subject();
1308
- this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$).pipe(startWith(false), distinctUntilChanged());
1315
+ this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$, this.swipes$.pipe(filter(function (swipe) { return swipe.direction === 'left' || swipe.direction === 'right'; }), map(function (swipe) { return swipe.direction === 'right'; }))).pipe(startWith(false), distinctUntilChanged());
1309
1316
  }
1310
1317
  TuiDocHeaderComponent.prototype.onClick = function () {
1311
1318
  this.stream$.next(true);
@@ -1318,18 +1325,20 @@ var TuiDocHeaderComponent = /** @class */ (function () {
1318
1325
  TuiDocHeaderComponent.ctorParameters = function () { return [
1319
1326
  { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_LOGO,] }] },
1320
1327
  { type: String, decorators: [{ type: Inject, args: [TUI_DOC_MENU_TEXT,] }] },
1321
- { type: Router, decorators: [{ type: Inject, args: [Router,] }] }
1328
+ { type: Router, decorators: [{ type: Inject, args: [Router,] }] },
1329
+ { type: TuiSwipeService, decorators: [{ type: Inject, args: [TuiSwipeService,] }] }
1322
1330
  ]; };
1323
1331
  TuiDocHeaderComponent = __decorate([
1324
1332
  Component({
1325
1333
  selector: 'header[tuiDocHeader]',
1326
1334
  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",
1327
1335
  changeDetection: ChangeDetectionStrategy.OnPush,
1328
- 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%}"]
1336
+ 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%}"]
1329
1337
  }),
1330
1338
  __param(0, Inject(TUI_DOC_LOGO)),
1331
1339
  __param(1, Inject(TUI_DOC_MENU_TEXT)),
1332
- __param(2, Inject(Router))
1340
+ __param(2, Inject(Router)),
1341
+ __param(3, Inject(TuiSwipeService))
1333
1342
  ], TuiDocHeaderComponent);
1334
1343
  return TuiDocHeaderComponent;
1335
1344
  }());