@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
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-highlightjs'), require('@taiga-ui/cdk'), require('@taiga-ui/kit'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/core'), require('@angular/forms'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('@ng-web-apis/common'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/addon-mobile')) :
3
- typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc', ['exports', '@angular/core', '@angular/common', 'ngx-highlightjs', '@taiga-ui/cdk', '@taiga-ui/kit', 'rxjs', 'rxjs/operators', '@taiga-ui/core', '@angular/forms', '@angular/router', '@angular/platform-browser', '@angular/cdk/clipboard', '@ng-web-apis/common', '@tinkoff/ng-polymorpheus', '@taiga-ui/addon-mobile'], factory) :
4
- (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui']['addon-doc'] = {}), global.ng.core, global.ng.common, global.ngxHighlightjs, global.cdk, global.kit, global.rxjs, global.rxjs.operators, global.core$1, global.ng.forms, global.ng.router, global.ng.platformBrowser, global.ng.cdk.clipboard, global.common$1, global.ngPolymorpheus, global.addonMobile));
5
- }(this, (function (exports, core, common, ngxHighlightjs, cdk, kit, rxjs, operators, core$1, forms, router, platformBrowser, clipboard, common$1, ngPolymorpheus, addonMobile) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-highlightjs'), require('@taiga-ui/cdk'), require('@taiga-ui/kit'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/core'), require('@angular/forms'), require('@angular/router'), require('@angular/platform-browser'), require('@taiga-ui/addon-mobile'), require('@angular/cdk/clipboard'), require('@ng-web-apis/common'), require('@tinkoff/ng-polymorpheus')) :
3
+ typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc', ['exports', '@angular/core', '@angular/common', 'ngx-highlightjs', '@taiga-ui/cdk', '@taiga-ui/kit', 'rxjs', 'rxjs/operators', '@taiga-ui/core', '@angular/forms', '@angular/router', '@angular/platform-browser', '@taiga-ui/addon-mobile', '@angular/cdk/clipboard', '@ng-web-apis/common', '@tinkoff/ng-polymorpheus'], factory) :
4
+ (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui']['addon-doc'] = {}), global.ng.core, global.ng.common, global.ngxHighlightjs, global.cdk, global.kit, global.rxjs, global.rxjs.operators, global.core$1, global.ng.forms, global.ng.router, global.ng.platformBrowser, global.addonMobile, global.ng.cdk.clipboard, global.common$1, global.ngPolymorpheus));
5
+ }(this, (function (exports, core, common, ngxHighlightjs, cdk, kit, rxjs, operators, core$1, forms, router, platformBrowser, addonMobile, clipboard, common$1, ngPolymorpheus) { 'use strict';
6
6
 
7
7
  /*! *****************************************************************************
8
8
  Copyright (c) Microsoft Corporation.
@@ -248,7 +248,7 @@
248
248
  core.Component({
249
249
  selector: 'tui-doc-code',
250
250
  template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre class=\"t-code\"><code [lineNumbers]=\"true\" [highlight]=\"code\"></code></pre>\n",
251
- 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}}"]
251
+ 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}}"]
252
252
  })
253
253
  ], TuiDocCodeComponent);
254
254
  return TuiDocCodeComponent;
@@ -489,7 +489,7 @@
489
489
  useExisting: core.forwardRef(function () { return TuiDocDemoComponent_1; }),
490
490
  },
491
491
  ],
492
- 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}}}"]
492
+ 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}}}"]
493
493
  }),
494
494
  __param(0, core.Inject(cdk.TUI_IS_MOBILE)),
495
495
  __param(1, core.Inject(cdk.TuiDestroyService)),
@@ -642,10 +642,11 @@
642
642
  var SCROLL_INTO_VIEW_DELAY = 200;
643
643
  // @dynamic
644
644
  var TuiDocNavigationComponent = /** @class */ (function () {
645
- function TuiDocNavigationComponent(titleService, title$, documentRef, mode, labels, items, searchText, router, activatedRoute) {
645
+ function TuiDocNavigationComponent(titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
646
646
  var _this = this;
647
647
  this.documentRef = documentRef;
648
648
  this.mode = mode;
649
+ this.sidebar = sidebar;
649
650
  this.labels = labels;
650
651
  this.items = items;
651
652
  this.searchText = searchText;
@@ -750,7 +751,7 @@
750
751
  page.subPages.forEach(function (subPage) {
751
752
  if (_this.isActiveRoute(subPage.route)) {
752
753
  _this.openPagesArr[pagesIndex] = true;
753
- _this.openPagesGroupsArr[pagesIndex + pageIndex] = true;
754
+ _this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
754
755
  _this.active = subPage.route;
755
756
  }
756
757
  });
@@ -775,6 +776,7 @@
775
776
  { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [NAVIGATION_TITLE,] }] },
776
777
  { type: Document, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
777
778
  { type: core$1.TuiModeDirective, decorators: [{ type: core.Inject, args: [core$1.TuiModeDirective,] }] },
779
+ { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [addonMobile.TuiSidebarDirective,] }] },
778
780
  { type: Array, decorators: [{ type: core.Inject, args: [NAVIGATION_LABELS,] }] },
779
781
  { type: undefined, decorators: [{ type: core.Inject, args: [NAVIGATION_ITEMS,] }] },
780
782
  { type: String, decorators: [{ type: core.Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
@@ -793,7 +795,7 @@
793
795
  TuiDocNavigationComponent = __decorate([
794
796
  core.Component({
795
797
  selector: 'tui-doc-navigation',
796
- 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",
798
+ 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",
797
799
  providers: NAVIGATION_PROVIDERS,
798
800
  changeDetection: core.ChangeDetectionStrategy.OnPush,
799
801
  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)}"]
@@ -802,11 +804,13 @@
802
804
  __param(1, core.Inject(NAVIGATION_TITLE)),
803
805
  __param(2, core.Inject(common.DOCUMENT)),
804
806
  __param(3, core.Inject(core$1.TuiModeDirective)),
805
- __param(4, core.Inject(NAVIGATION_LABELS)),
806
- __param(5, core.Inject(NAVIGATION_ITEMS)),
807
- __param(6, core.Inject(TUI_DOC_SEARCH_TEXT)),
808
- __param(7, core.Inject(router.Router)),
809
- __param(8, core.Inject(router.ActivatedRoute))
807
+ __param(4, core.Optional()),
808
+ __param(4, core.Inject(addonMobile.TuiSidebarDirective)),
809
+ __param(5, core.Inject(NAVIGATION_LABELS)),
810
+ __param(6, core.Inject(NAVIGATION_ITEMS)),
811
+ __param(7, core.Inject(TUI_DOC_SEARCH_TEXT)),
812
+ __param(8, core.Inject(router.Router)),
813
+ __param(9, core.Inject(router.ActivatedRoute))
810
814
  ], TuiDocNavigationComponent);
811
815
  return TuiDocNavigationComponent;
812
816
  }());
@@ -882,6 +886,7 @@
882
886
  core$1.TuiScrollbarModule,
883
887
  core$1.TuiSvgModule,
884
888
  core$1.TuiDataListModule,
889
+ cdk.TuiAutoFocusModule,
885
890
  ],
886
891
  declarations: [TuiDocNavigationComponent],
887
892
  exports: [TuiDocNavigationComponent],
@@ -1216,7 +1221,7 @@
1216
1221
  TuiDocDocumentationComponent = __decorate([
1217
1222
  core.Component({
1218
1223
  selector: 'tui-doc-documentation',
1219
- 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",
1224
+ 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",
1220
1225
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1221
1226
  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)}"]
1222
1227
  }),
@@ -1418,9 +1423,9 @@
1418
1423
  TuiDocExampleComponent = __decorate([
1419
1424
  core.Component({
1420
1425
  selector: 'tui-doc-example',
1421
- 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",
1426
+ 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",
1422
1427
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1423
- 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}"]
1428
+ 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}"]
1424
1429
  }),
1425
1430
  __param(0, core.Attribute('id')),
1426
1431
  __param(1, core.Inject(clipboard.Clipboard)),
@@ -1494,8 +1499,9 @@
1494
1499
  provide: core$1.TuiModeDirective,
1495
1500
  useExisting: core.forwardRef(function () { return TuiDocMainComponent_1; }),
1496
1501
  },
1502
+ cdk.TuiSwipeService,
1497
1503
  ],
1498
- 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}"]
1504
+ 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}"]
1499
1505
  }),
1500
1506
  __param(0, core.Inject(common$1.LOCAL_STORAGE)),
1501
1507
  __param(1, core.Inject(common$1.WINDOW))
@@ -1508,12 +1514,13 @@
1508
1514
  });
1509
1515
 
1510
1516
  var TuiDocHeaderComponent = /** @class */ (function () {
1511
- function TuiDocHeaderComponent(logo, menu, router) {
1517
+ function TuiDocHeaderComponent(logo, menu, router, swipes$) {
1512
1518
  this.logo = logo;
1513
1519
  this.menu = menu;
1514
1520
  this.router = router;
1521
+ this.swipes$ = swipes$;
1515
1522
  this.stream$ = new rxjs.Subject();
1516
- this.open$ = rxjs.merge(this.router.events.pipe(operators.mapTo(false)), this.stream$).pipe(operators.startWith(false), operators.distinctUntilChanged());
1523
+ this.open$ = rxjs.merge(this.router.events.pipe(operators.mapTo(false)), this.stream$, this.swipes$.pipe(operators.filter(function (swipe) { return swipe.direction === 'left' || swipe.direction === 'right'; }), operators.map(function (swipe) { return swipe.direction === 'right'; }))).pipe(operators.startWith(false), operators.distinctUntilChanged());
1517
1524
  }
1518
1525
  TuiDocHeaderComponent.prototype.onClick = function () {
1519
1526
  this.stream$.next(true);
@@ -1526,18 +1533,20 @@
1526
1533
  TuiDocHeaderComponent.ctorParameters = function () { return [
1527
1534
  { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_LOGO,] }] },
1528
1535
  { type: String, decorators: [{ type: core.Inject, args: [TUI_DOC_MENU_TEXT,] }] },
1529
- { type: router.Router, decorators: [{ type: core.Inject, args: [router.Router,] }] }
1536
+ { type: router.Router, decorators: [{ type: core.Inject, args: [router.Router,] }] },
1537
+ { type: cdk.TuiSwipeService, decorators: [{ type: core.Inject, args: [cdk.TuiSwipeService,] }] }
1530
1538
  ]; };
1531
1539
  TuiDocHeaderComponent = __decorate([
1532
1540
  core.Component({
1533
1541
  selector: 'header[tuiDocHeader]',
1534
1542
  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",
1535
1543
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1536
- 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%}"]
1544
+ 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%}"]
1537
1545
  }),
1538
1546
  __param(0, core.Inject(TUI_DOC_LOGO)),
1539
1547
  __param(1, core.Inject(TUI_DOC_MENU_TEXT)),
1540
- __param(2, core.Inject(router.Router))
1548
+ __param(2, core.Inject(router.Router)),
1549
+ __param(3, core.Inject(cdk.TuiSwipeService))
1541
1550
  ], TuiDocHeaderComponent);
1542
1551
  return TuiDocHeaderComponent;
1543
1552
  }());