@taiga-ui/addon-doc 2.41.1 → 2.44.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 (38) hide show
  1. package/bundles/taiga-ui-addon-doc.umd.js +14 -6
  2. package/bundles/taiga-ui-addon-doc.umd.js.map +1 -1
  3. package/bundles/taiga-ui-addon-doc.umd.min.js +1 -1
  4. package/bundles/taiga-ui-addon-doc.umd.min.js.map +1 -1
  5. package/components/demo/demo.component.d.ts +2 -2
  6. package/components/documentation/documentation-property-connector.directive.d.ts +5 -5
  7. package/components/example/example.component.d.ts +6 -4
  8. package/components/page/page-tab.directive.d.ts +3 -3
  9. package/esm2015/components/copy/copy.component.js +1 -1
  10. package/esm2015/components/demo/demo.component.js +3 -2
  11. package/esm2015/components/documentation/documentation-property-connector.directive.js +1 -2
  12. package/esm2015/components/documentation/documentation.component.js +2 -2
  13. package/esm2015/components/example/example.component.js +10 -4
  14. package/esm2015/components/main/main.component.js +1 -1
  15. package/esm2015/components/navigation/navigation.component.js +1 -1
  16. package/esm2015/components/page/page-tab.directive.js +1 -1
  17. package/esm2015/interfaces/code-editor.js +1 -1
  18. package/esm2015/internal/header/header.component.js +2 -2
  19. package/esm2015/tokens/code-editor.js +1 -1
  20. package/esm5/components/copy/copy.component.js +1 -1
  21. package/esm5/components/demo/demo.component.js +3 -2
  22. package/esm5/components/documentation/documentation-property-connector.directive.js +1 -2
  23. package/esm5/components/documentation/documentation.component.js +2 -2
  24. package/esm5/components/example/example.component.js +12 -4
  25. package/esm5/components/main/main.component.js +1 -1
  26. package/esm5/components/navigation/navigation.component.js +1 -1
  27. package/esm5/components/page/page-tab.directive.js +1 -1
  28. package/esm5/interfaces/code-editor.js +1 -1
  29. package/esm5/internal/header/header.component.js +2 -2
  30. package/esm5/tokens/code-editor.js +1 -1
  31. package/fesm2015/taiga-ui-addon-doc.js +12 -6
  32. package/fesm2015/taiga-ui-addon-doc.js.map +1 -1
  33. package/fesm5/taiga-ui-addon-doc.js +14 -6
  34. package/fesm5/taiga-ui-addon-doc.js.map +1 -1
  35. package/interfaces/code-editor.d.ts +10 -1
  36. package/package.json +11 -11
  37. package/taiga-ui-addon-doc.metadata.json +1 -1
  38. package/tokens/code-editor.d.ts +2 -2
@@ -426,6 +426,7 @@
426
426
  this.initialX = 0;
427
427
  this.wrapperWidth = 0;
428
428
  this.control = null;
429
+ this.template = null;
429
430
  this.updateOnVariants = ['change', 'blur', 'submit'];
430
431
  this.updateOn = 'change';
431
432
  this.expanded = false;
@@ -507,7 +508,7 @@
507
508
  { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] },
508
509
  { type: cdk.TuiDestroyService, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }] },
509
510
  { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] },
510
- { type: Object, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
511
+ { type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
511
512
  { type: common.Location, decorators: [{ type: core.Inject, args: [common.Location,] }] },
512
513
  { type: router.UrlSerializer, decorators: [{ type: core.Inject, args: [router.UrlSerializer,] }] },
513
514
  { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
@@ -706,7 +707,6 @@
706
707
  this.documentationPropertyName = '';
707
708
  this.documentationPropertyMode = null;
708
709
  this.documentationPropertyType = '';
709
- this.documentationPropertyValue = null;
710
710
  this.documentationPropertyDeprecated = false;
711
711
  this.documentationPropertyValues = null;
712
712
  this.documentationPropertyValueChange = new core.EventEmitter();
@@ -938,7 +938,7 @@
938
938
  TuiDocDocumentationComponent = __decorate([
939
939
  core.Component({
940
940
  selector: 'tui-doc-documentation',
941
- template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n <tr class=\"t-row t-row_header\">\n <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n <th class=\"t-th\">{{ type }}</th>\n <th\n *ngIf=\"showValues && !isAPI\"\n class=\"t-th t-cell t-cell_value\"\n >\n {{ texts[3] }}\n </th>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of propertiesConnectors\"\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property\"\n >\n {{ stripOptional(propertyConnector.attrName) }}\n <tui-badge\n *ngIf=\"isOptional(propertyConnector.attrName)\"\n size=\"s\"\n value=\"Optional\"\n ></tui-badge>\n </div>\n <span\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n class=\"t-deprecated-label\"\n >\n deprecated\n </span>\n <ng-container\n *ngTemplateOutlet=\"propertyConnector.template\"\n ></ng-container>\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n {{ propertyConnector.documentationPropertyType }}\n <tui-tooltip\n *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n [describeId]=\"propertyConnector.attrName\"\n [content]=\"content\"\n >\n <ng-template #content>\n {{ texts[4] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n target=\"_blank\"\n href=\"https://github.com/tinkoff/ng-polymorpheus\"\n >\n <code>ng-polymorpheus</code>\n </a>\n </ng-template>\n </tui-tooltip>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"t-cell\"\n >\n <ng-container\n *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\"\n >\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiTextfieldSize=\"m\"\n tuiDropdownLimitWidth=\"min\"\n [tuiTextfieldCleaner]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n [tuiTextfieldLabelOutside]=\"true\"\n [nativeId]=\"propertyConnector.attrName\"\n [valueContent]=\"selectContent\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"propertyConnector.documentationPropertyValues\"\n [itemContent]=\"selectContent\"\n ></tui-data-list-wrapper>\n </tui-select>\n <ng-template\n #selectContent\n let-data\n >\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\n *ngSwitchCase=\"'color'\"\n tuiGroup\n >\n <tui-primitive-textfield\n tuiTextfieldType=\"color\"\n tuiTextfieldSize=\"m\"\n [attr.id]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n (valueChange)=\"onColorChange(propertyConnector, $event)\"\n ></tui-primitive-textfield>\n <tui-input-count\n tuiTextfieldSize=\"m\"\n [max]=\"100\"\n [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n >\n Opacity\n </tui-input-count>\n </div>\n\n <tui-input-count\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-input-count>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #elseEmitter>\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits$ | async\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n</table>\n",
941
+ template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n <tr class=\"t-row t-row_header\">\n <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n <th class=\"t-th\">{{ type }}</th>\n <th\n *ngIf=\"showValues && !isAPI\"\n class=\"t-th t-cell t-cell_value\"\n >\n {{ texts[3] }}\n </th>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of propertiesConnectors\"\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property\"\n >\n {{ stripOptional(propertyConnector.attrName) }}\n <tui-badge\n *ngIf=\"isOptional(propertyConnector.attrName)\"\n size=\"s\"\n value=\"Optional\"\n ></tui-badge>\n </div>\n <span\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n class=\"t-deprecated-label\"\n >\n deprecated\n </span>\n <ng-container\n *ngTemplateOutlet=\"propertyConnector.template\"\n ></ng-container>\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n {{ propertyConnector.documentationPropertyType }}\n <tui-tooltip\n *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n [describeId]=\"propertyConnector.attrName\"\n [content]=\"content\"\n >\n <ng-template #content>\n {{ texts[4] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n target=\"_blank\"\n href=\"https://github.com/tinkoff/ng-polymorpheus\"\n >\n <code>ng-polymorpheus</code>\n </a>\n </ng-template>\n </tui-tooltip>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"t-cell\"\n >\n <ng-container\n *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\"\n >\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiTextfieldSize=\"m\"\n tuiDropdownLimitWidth=\"min\"\n [tuiTextfieldCleaner]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n [tuiTextfieldLabelOutside]=\"true\"\n [nativeId]=\"propertyConnector.attrName\"\n [valueContent]=\"selectContent\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"propertyConnector.documentationPropertyValues\"\n [itemContent]=\"selectContent\"\n ></tui-data-list-wrapper>\n </tui-select>\n <ng-template\n #selectContent\n let-data\n >\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\n *ngSwitchCase=\"'color'\"\n tuiGroup\n >\n <tui-primitive-textfield\n tuiTextfieldType=\"text\"\n tuiTextfieldSize=\"m\"\n [attr.id]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n (valueChange)=\"onColorChange(propertyConnector, $event)\"\n ></tui-primitive-textfield>\n <tui-input-count\n tuiTextfieldSize=\"m\"\n [max]=\"100\"\n [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n >\n Opacity\n </tui-input-count>\n </div>\n\n <tui-input-count\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-input-count>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #elseEmitter>\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits$ | async\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n</table>\n",
942
942
  changeDetection: core.ChangeDetectionStrategy.OnPush,
943
943
  animations: [
944
944
  animations.trigger('emitEvent', [
@@ -1087,6 +1087,7 @@
1087
1087
  // @dynamic
1088
1088
  var TuiDocExampleComponent = /** @class */ (function () {
1089
1089
  function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress) {
1090
+ var _this = this;
1090
1091
  this.id = id;
1091
1092
  this.clipboard = clipboard;
1092
1093
  this.notifications = notifications;
@@ -1107,7 +1108,8 @@
1107
1108
  var _b = __read(_a, 1), copy = _b[0];
1108
1109
  return copy;
1109
1110
  }));
1110
- this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoadRecord), operators.map(this.processContent));
1111
+ this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoadRecord), operators.map(function (value) { return _this.processContent(value); }));
1112
+ this.loading$ = new rxjs.Subject();
1111
1113
  }
1112
1114
  Object.defineProperty(TuiDocExampleComponent.prototype, "content", {
1113
1115
  set: function (content) {
@@ -1130,6 +1132,12 @@
1130
1132
  })
1131
1133
  .subscribe();
1132
1134
  };
1135
+ TuiDocExampleComponent.prototype.edit = function (files) {
1136
+ var _this = this;
1137
+ var _a, _b;
1138
+ this.loading$.next(true);
1139
+ (_a = this.codeEditor) === null || _a === void 0 ? void 0 : _a.edit(this.componentName, (_b = this.id) !== null && _b !== void 0 ? _b : '', files).finally(function () { return _this.loading$.next(false); });
1140
+ };
1133
1141
  TuiDocExampleComponent.ctorParameters = function () { return [
1134
1142
  { type: String, decorators: [{ type: core.Attribute, args: ['id',] }] },
1135
1143
  { type: clipboard.Clipboard, decorators: [{ type: core.Inject, args: [clipboard.Clipboard,] }] },
@@ -1156,7 +1164,7 @@
1156
1164
  TuiDocExampleComponent = __decorate([
1157
1165
  core.Component({
1158
1166
  selector: 'tui-doc-example',
1159
- template: "<h3\n *ngIf=\"heading\"\n class=\"t-title\"\n>\n <span\n polymorpheus-outlet\n [content]=\"heading | tuiDocExampleCapitalize\"\n ></span>\n <button\n *ngIf=\"id\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n icon=\"tuiIconLinkLarge\"\n appearance=\"icon\"\n class=\"t-link-icon\"\n [title]=\"copy$ | async\"\n (click)=\"copyExampleLink()\"\n ></button>\n</h3>\n<h4\n *ngIf=\"description\"\n polymorpheus-outlet\n class=\"t-description\"\n [content]=\"description | tuiDocExampleCapitalize\"\n></h4>\n\n<div\n *ngIf=\"processor$ | async as content\"\n class=\"t-example\"\n>\n <ng-container *ngIf=\"content | tuiDocExampleGetTabs: defaultTab as tabs\">\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\n *tuiTab\n tuiTab\n >\n {{tab}}\n </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 || '', content)\"\n >\n Edit on {{codeEditor.name}}\n </button>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n [class.t-content_animated]=\"!isCypress\"\n [class.t-content_visible]=\"activeItemIndex === index\"\n >\n <ng-container *ngIf=\"index === defaultTabIndex; else anotherTab\">\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n </ng-container>\n <ng-template #anotherTab>\n <ng-container\n *ngTemplateOutlet=\"codeSection; context: { $implicit: content[tabs[activeItemIndex]] || '' }\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-container>\n</div>\n\n<ng-template #preview>\n <div\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n >\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n<ng-template\n #codeSection\n let-code\n>\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",
1167
+ template: "<h3\n *ngIf=\"heading\"\n class=\"t-title\"\n>\n <span\n polymorpheus-outlet\n [content]=\"heading | tuiDocExampleCapitalize\"\n ></span>\n <button\n *ngIf=\"id\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n icon=\"tuiIconLinkLarge\"\n appearance=\"icon\"\n class=\"t-link-icon\"\n [title]=\"copy$ | async\"\n (click)=\"copyExampleLink()\"\n ></button>\n</h3>\n<h4\n *ngIf=\"description\"\n polymorpheus-outlet\n class=\"t-description\"\n [content]=\"description | tuiDocExampleCapitalize\"\n></h4>\n\n<div\n *ngIf=\"processor$ | async as files\"\n class=\"t-example\"\n>\n <ng-container *ngIf=\"files | tuiDocExampleGetTabs: defaultTab as tabs\">\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\n *tuiTab\n tuiTab\n >\n {{tab}}\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <button\n *ngIf=\"codeEditor\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n [showLoader]=\"!!(loading$ | async)\"\n (click)=\"edit(files)\"\n >\n Edit on {{codeEditor.name}}\n </button>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n [class.t-content_animated]=\"!isCypress\"\n [class.t-content_visible]=\"activeItemIndex === index\"\n >\n <ng-container *ngIf=\"index === defaultTabIndex; else anotherTab\">\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n </ng-container>\n <ng-template #anotherTab>\n <ng-container\n *ngTemplateOutlet=\"codeSection; context: { $implicit: files[tabs[activeItemIndex]] || '' }\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-container>\n</div>\n\n<ng-template #preview>\n <div\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n >\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n<ng-template\n #codeSection\n let-code\n>\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",
1160
1168
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1161
1169
  styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.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)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .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)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}"]
1162
1170
  }),
@@ -1671,7 +1679,7 @@
1671
1679
  TuiDocHeaderComponent = __decorate([
1672
1680
  core.Component({
1673
1681
  selector: 'header[tuiDocHeader]',
1674
- template: "<button\n tuiIconButton\n icon=\"tuiIconMenuLarge\"\n appearance=\"icon\"\n class=\"t-menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"open$ | async\"\n class=\"t-navigation\"\n ></tui-doc-navigation>\n</button>\n<div\n polymorpheus-outlet\n class=\"t-logo\"\n [content]=\"logo\"\n>\n <ng-template let-src>\n <img\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n </ng-template>\n</div>\n<ng-content></ng-content>\n",
1682
+ template: "<button\n tuiIconButton\n icon=\"tuiIconMenuLarge\"\n appearance=\"icon\"\n class=\"t-menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"!!(open$ | async)\"\n class=\"t-navigation\"\n ></tui-doc-navigation>\n</button>\n<div\n polymorpheus-outlet\n class=\"t-logo\"\n [content]=\"logo\"\n>\n <ng-template let-src>\n <img\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n </ng-template>\n</div>\n<ng-content></ng-content>\n",
1675
1683
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1676
1684
  styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;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)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width:48em){.t-menu{display:none}}.t-navigation{min-height:100%}"]
1677
1685
  }),