@taiga-ui/addon-doc 4.52.0-canary.a4e325d → 4.52.0-canary.e444d19

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.
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, Pipe, Input, Directive, EventEmitter, Output, PLATFORM_ID, signal, computed, ContentChild, ViewChild, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, ElementRef } from '@angular/core';
3
3
  import { TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_ICONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_CODE_EDITOR, TUI_DOC_CODE_ACTIONS, TUI_DOC_TITLE, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEARCH_ENABLED, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_DIRECTION_ENABLED, TUI_DOC_SEE_ALSO, TUI_DOC_SUPPORT_LANGUAGE, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
4
- import { Location, NgForOf, NgIf, NgSwitch, NgSwitchCase, isPlatformServer, JsonPipe, NgTemplateOutlet, DOCUMENT, AsyncPipe, NgComponentOutlet, TitleCasePipe, KeyValuePipe } from '@angular/common';
4
+ import { Location, isPlatformServer, JsonPipe, NgTemplateOutlet, DOCUMENT, AsyncPipe, NgComponentOutlet, NgForOf, NgIf, TitleCasePipe, KeyValuePipe } from '@angular/common';
5
5
  import * as i1 from '@angular/forms';
6
6
  import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
7
7
  import { ActivatedRoute, UrlSerializer, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
@@ -83,10 +83,10 @@ class TuiDocAPI {
83
83
  constructor() {
84
84
  this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
85
85
  }
86
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
87
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocAPI, isStandalone: true, selector: "table[tuiDocAPI]", ngImport: i0, template: "<thead>\n <tr>\n <th>{{ texts[2] }}</th>\n <th>{{ texts[1] }}</th>\n <th>{{ texts[3] }}</th>\n </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;color:var(--tui-text-secondary);padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 47.9625em){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
86
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
87
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocAPI, isStandalone: true, selector: "table[tuiDocAPI]", ngImport: i0, template: "<thead>\n <tr>\n <th>{{ texts[2] }}</th>\n <th>{{ texts[1] }}</th>\n <th>{{ texts[3] }}</th>\n </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;color:var(--tui-text-secondary);padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 47.9625em){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
88
88
  }
89
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocAPI, decorators: [{
89
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPI, decorators: [{
90
90
  type: Component,
91
91
  args: [{ standalone: true, selector: 'table[tuiDocAPI]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<thead>\n <tr>\n <th>{{ texts[2] }}</th>\n <th>{{ texts[1] }}</th>\n <th>{{ texts[3] }}</th>\n </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;color:var(--tui-text-secondary);padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 47.9625em){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"] }]
92
92
  }] });
@@ -108,10 +108,10 @@ class TuiInspectPipe {
108
108
  }
109
109
  return value instanceof TemplateRef ? 'TemplateRef' : tuiInspectAny(value, depth);
110
110
  }
111
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
112
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspectAny" }); }
111
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
112
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspectAny" }); }
113
113
  }
114
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiInspectPipe, decorators: [{
114
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInspectPipe, decorators: [{
115
115
  type: Pipe,
116
116
  args: [{
117
117
  standalone: true,
@@ -133,10 +133,10 @@ class TuiDocTypeReferencePipe {
133
133
  }))
134
134
  .sort((a, b) => b.reference?.localeCompare(a.reference ?? '') ?? -1);
135
135
  }
136
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
137
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiDocTypeReferencePipe, isStandalone: true, name: "tuiDocTypeReference" }); }
136
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
137
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTypeReferencePipe, isStandalone: true, name: "tuiDocTypeReference" }); }
138
138
  }
139
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocTypeReferencePipe, decorators: [{
139
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTypeReferencePipe, decorators: [{
140
140
  type: Pipe,
141
141
  args: [{
142
142
  standalone: true,
@@ -149,10 +149,10 @@ class TuiDocAPINumberItem {
149
149
  this.min = null;
150
150
  this.max = null;
151
151
  }
152
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
153
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: "min", max: "max" }, ngImport: i0 }); }
152
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
153
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: "min", max: "max" }, ngImport: i0 }); }
154
154
  }
155
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
155
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
156
156
  type: Directive,
157
157
  args: [{
158
158
  standalone: true,
@@ -227,17 +227,13 @@ class TuiDocAPIItem {
227
227
  };
228
228
  this.locationRef.go(this.urlStateHandler(tree));
229
229
  }
230
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
231
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n <tui-icon\n *ngIf=\"icons.externalLink\"\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n </ng-container>\n </code>\n</td>\n<td class=\"t-td\">\n <tui-textfield\n *ngIf=\"items.length; else noItems\"\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n >\n <select\n placeholder=\"null\"\n tuiTextfield\n [ngModel]=\"value ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n ></select>\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n [itemContent]=\"content\"\n [items]=\"items\"\n />\n </tui-textfield>\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n </ng-template>\n <ng-template #noItems>\n <ng-container\n *ngIf=\"value !== undefined\"\n [ngSwitch]=\"type\"\n >\n <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiTextfield\n [id]=\"name\"\n [ngModel]=\"value || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-textfield\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiInputNumber\n [id]=\"name\"\n [max]=\"numberItem?.max ?? null\"\n [min]=\"numberItem?.min ?? null\"\n [ngModel]=\"value\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n </ng-container>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
230
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
231
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type | tuiDocTypeReference; track item; let last = $last) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n @if (icons.externalLink) {\n <tui-icon\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n }\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!last) {\n <span>&nbsp;|&nbsp;</span>\n }\n }\n </code>\n</td>\n<td class=\"t-td\">\n @if (items.length) {\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n >\n <select\n placeholder=\"null\"\n tuiTextfield\n [ngModel]=\"value ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n ></select>\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n [itemContent]=\"content\"\n [items]=\"items\"\n />\n </tui-textfield>\n } @else {\n @if (value !== undefined) {\n @switch (type) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiTextfield\n [id]=\"name\"\n [ngModel]=\"value || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"name\"\n [max]=\"numberItem?.max ?? null\"\n [min]=\"numberItem?.min ?? null\"\n [ngModel]=\"value\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n }\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
232
232
  }
233
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocAPIItem, decorators: [{
233
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPIItem, decorators: [{
234
234
  type: Component,
235
235
  args: [{ selector: 'tr[tuiDocAPIItem]', imports: [
236
236
  FormsModule,
237
- NgForOf,
238
- NgIf,
239
- NgSwitch,
240
- NgSwitchCase,
241
237
  TuiChevron,
242
238
  TuiDataListWrapper,
243
239
  TuiDocTypeReferencePipe,
@@ -246,7 +242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
246
242
  TuiInspectPipe,
247
243
  TuiSwitch,
248
244
  TuiTextfield,
249
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n <tui-icon\n *ngIf=\"icons.externalLink\"\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n </ng-container>\n </code>\n</td>\n<td class=\"t-td\">\n <tui-textfield\n *ngIf=\"items.length; else noItems\"\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n >\n <select\n placeholder=\"null\"\n tuiTextfield\n [ngModel]=\"value ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n ></select>\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n [itemContent]=\"content\"\n [items]=\"items\"\n />\n </tui-textfield>\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n </ng-template>\n <ng-template #noItems>\n <ng-container\n *ngIf=\"value !== undefined\"\n [ngSwitch]=\"type\"\n >\n <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiTextfield\n [id]=\"name\"\n [ngModel]=\"value || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-textfield\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiInputNumber\n [id]=\"name\"\n [max]=\"numberItem?.max ?? null\"\n [min]=\"numberItem?.min ?? null\"\n [ngModel]=\"value\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n </ng-container>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
245
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type | tuiDocTypeReference; track item; let last = $last) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n @if (icons.externalLink) {\n <tui-icon\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n }\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!last) {\n <span>&nbsp;|&nbsp;</span>\n }\n }\n </code>\n</td>\n<td class=\"t-td\">\n @if (items.length) {\n <tui-textfield\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n >\n <select\n placeholder=\"null\"\n tuiTextfield\n [ngModel]=\"value ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n ></select>\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n [itemContent]=\"content\"\n [items]=\"items\"\n />\n </tui-textfield>\n } @else {\n @if (value !== undefined) {\n @switch (type) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiTextfield\n [id]=\"name\"\n [ngModel]=\"value || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"name\"\n [max]=\"numberItem?.max ?? null\"\n [min]=\"numberItem?.min ?? null\"\n [ngModel]=\"value\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n }\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
250
246
  }], propDecorators: { name: [{
251
247
  type: Input
252
248
  }], type: [{
@@ -277,15 +273,15 @@ class TuiDocCode {
277
273
  get hasFilename() {
278
274
  return !!this.filename;
279
275
  }
280
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
281
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor()\"\n class=\"t-code\"\n>\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText()}}\n </button>\n <ng-content />\n </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
276
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
277
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "@if (filename) {\n <p class=\"t-header\">\n {{ filename }}\n </p>\n}\n@for (content of processor(); track content) {\n <pre class=\"t-code\">\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText()}}\n </button>\n <ng-content />\n </div>\n </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
282
278
  }
283
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocCode, decorators: [{
279
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, decorators: [{
284
280
  type: Component,
285
- args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
281
+ args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
286
282
  '[style.visibility]': 'isServer ? "hidden" : "visible"',
287
283
  '[class._has-filename]': 'hasFilename',
288
- }, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor()\"\n class=\"t-code\"\n>\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText()}}\n </button>\n <ng-content />\n </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
284
+ }, template: "@if (filename) {\n <p class=\"t-header\">\n {{ filename }}\n </p>\n}\n@for (content of processor(); track content) {\n <pre class=\"t-code\">\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText()}}\n </button>\n <ng-content />\n </div>\n </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
289
285
  }], propDecorators: { filename: [{
290
286
  type: Input
291
287
  }], code: [{
@@ -304,12 +300,12 @@ class TuiDocCopy {
304
300
  onClick() {
305
301
  this.copy$.next();
306
302
  }
307
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
308
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocCopy, isStandalone: true, selector: "tui-doc-copy", ngImport: i0, template: "<button\n appearance=\"\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-copy\"\n (click)=\"onClick()\"\n>\n <span class=\"t-content\">\n <span\n class=\"t-initial\"\n [attr.data-text]=\"copied() ? '' : texts()[0]\"\n >\n <ng-container *ngIf=\"!copied()\">\n <ng-content />\n </ng-container>\n </span>\n {{ copied() ? texts()[1] : '' }}\n </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
303
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
304
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocCopy, isStandalone: true, selector: "tui-doc-copy", ngImport: i0, template: "<button\n appearance=\"\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-copy\"\n (click)=\"onClick()\"\n>\n <span class=\"t-content\">\n <span\n class=\"t-initial\"\n [attr.data-text]=\"copied() ? '' : texts()[0]\"\n >\n @if (!copied()) {\n <ng-content />\n }\n </span>\n {{ copied() ? texts()[1] : '' }}\n </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
309
305
  }
310
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocCopy, decorators: [{
306
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCopy, decorators: [{
311
307
  type: Component,
312
- args: [{ selector: 'tui-doc-copy', imports: [NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n appearance=\"\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-copy\"\n (click)=\"onClick()\"\n>\n <span class=\"t-content\">\n <span\n class=\"t-initial\"\n [attr.data-text]=\"copied() ? '' : texts()[0]\"\n >\n <ng-container *ngIf=\"!copied()\">\n <ng-content />\n </ng-container>\n </span>\n {{ copied() ? texts()[1] : '' }}\n </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"] }]
308
+ args: [{ selector: 'tui-doc-copy', imports: [TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n appearance=\"\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-copy\"\n (click)=\"onClick()\"\n>\n <span class=\"t-content\">\n <span\n class=\"t-initial\"\n [attr.data-text]=\"copied() ? '' : texts()[0]\"\n >\n @if (!copied()) {\n <ng-content />\n }\n </span>\n {{ copied() ? texts()[1] : '' }}\n </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"] }]
313
309
  }] });
314
310
 
315
311
  const MIN_WIDTH = 160;
@@ -405,18 +401,17 @@ class TuiDocDemo {
405
401
  getUrlTree() {
406
402
  return this.urlSerializer.parse(this.locationRef.path());
407
403
  }
408
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
409
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4$1.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
404
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
405
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (testForm) {\n <form\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4$1.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
410
406
  }
411
407
  __decorate([
412
408
  tuiPure
413
409
  ], TuiDocDemo.prototype, "updateUrl", null);
414
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocDemo, decorators: [{
410
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDemo, decorators: [{
415
411
  type: Component,
416
412
  args: [{ selector: 'tui-doc-demo', imports: [
417
413
  FormsModule,
418
414
  JsonPipe,
419
- NgIf,
420
415
  NgTemplateOutlet,
421
416
  ReactiveFormsModule,
422
417
  TuiButton,
@@ -433,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
433
428
  '[class._sticky]': 'sticky',
434
429
  '(window:resize)': 'onResize()',
435
430
  '(document:mouseup.zoneless)': 'onMouseUp()',
436
- }, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
431
+ }, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (testForm) {\n <form\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
437
432
  }], propDecorators: { resizable: [{
438
433
  type: ViewChild,
439
434
  args: [TuiResizable, { static: true }]
@@ -456,10 +451,10 @@ class TuiDocTab {
456
451
  constructor() {
457
452
  this.src = '';
458
453
  }
459
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
460
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: "src" }, ngImport: i0, template: "<div class=\"t-tab\">\n <img\n alt=\"Documentation tab icon\"\n class=\"t-icon\"\n [src]=\"src\"\n />\n <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
454
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
455
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: "src" }, ngImport: i0, template: "<div class=\"t-tab\">\n <img\n alt=\"Documentation tab icon\"\n class=\"t-icon\"\n [src]=\"src\"\n />\n <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
461
456
  }
462
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocTab, decorators: [{
457
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTab, decorators: [{
463
458
  type: Component,
464
459
  args: [{ standalone: true, selector: 'tui-doc-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-tab\">\n <img\n alt=\"Documentation tab icon\"\n class=\"t-icon\"\n [src]=\"src\"\n />\n <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"] }]
465
460
  }], propDecorators: { src: [{
@@ -564,10 +559,10 @@ class TuiDocDocumentationPropertyConnector {
564
559
  });
565
560
  this.locationRef.go(this.urlStateHandler(tree));
566
561
  }
567
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocDocumentationPropertyConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
568
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocDocumentationPropertyConnector, isStandalone: true, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 }); }
562
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentationPropertyConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
563
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocDocumentationPropertyConnector, isStandalone: true, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 }); }
569
564
  }
570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocDocumentationPropertyConnector, decorators: [{
565
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentationPropertyConnector, decorators: [{
571
566
  type: Directive,
572
567
  args: [{
573
568
  standalone: true,
@@ -594,10 +589,10 @@ class TuiShowCleanerPipe {
594
589
  transform(type) {
595
590
  return type.includes('null');
596
591
  }
597
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiShowCleanerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
598
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiShowCleanerPipe, isStandalone: true, name: "tuiShowCleanerPipe" }); }
592
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiShowCleanerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
593
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiShowCleanerPipe, isStandalone: true, name: "tuiShowCleanerPipe" }); }
599
594
  }
600
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiShowCleanerPipe, decorators: [{
595
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiShowCleanerPipe, decorators: [{
601
596
  type: Pipe,
602
597
  args: [{
603
598
  standalone: true,
@@ -609,10 +604,10 @@ class TuiIsOptionalPipe {
609
604
  transform(name) {
610
605
  return name.includes('?');
611
606
  }
612
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiIsOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
613
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiIsOptionalPipe, isStandalone: true, name: "tuiIsOptionalPipe" }); }
607
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
608
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiIsOptionalPipe, isStandalone: true, name: "tuiIsOptionalPipe" }); }
614
609
  }
615
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiIsOptionalPipe, decorators: [{
610
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsOptionalPipe, decorators: [{
616
611
  type: Pipe,
617
612
  args: [{
618
613
  standalone: true,
@@ -624,10 +619,10 @@ class TuiStripOptionalPipe {
624
619
  transform(name) {
625
620
  return name.replace('?', '');
626
621
  }
627
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiStripOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
628
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiStripOptionalPipe, isStandalone: true, name: "tuiStripOptionalPipe" }); }
622
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiStripOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
623
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiStripOptionalPipe, isStandalone: true, name: "tuiStripOptionalPipe" }); }
629
624
  }
630
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiStripOptionalPipe, decorators: [{
625
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiStripOptionalPipe, decorators: [{
631
626
  type: Pipe,
632
627
  args: [{
633
628
  standalone: true,
@@ -658,21 +653,17 @@ class TuiDocDocumentation {
658
653
  get type() {
659
654
  return this.isAPI ? this.texts[0] : this.texts[1];
660
655
  }
661
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
662
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n <table\n *ngIf=\"properties.length\"\n class=\"t-table\"\n >\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-th_value\"\n >\n {{ texts[3] }}\n </th>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of properties\"\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell t-no-overflow\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-additional-info\"\n >\n <code\n *ngIf=\"propertyConnector.attrName\"\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n <tui-badge\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell t-no-overflow\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n <ng-container\n *ngFor=\"\n let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n let last = last\n \"\n >\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n </ng-container>\n </code>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"t-cell t-cell_value\"\n >\n <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\n </tui-select>\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n\n <ng-template #noItems>\n <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-textfield\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiInputNumber\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\n </tui-textfield>\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()\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
656
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
657
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "@if (heading) {\n <h1 class=\"t-heading\">\n {{ heading }}\n </h1>\n}\n<ng-content />\n@if (propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties; as properties) {\n @if (properties.length) {\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 @if (showValues && !isAPI) {\n <th class=\"t-th t-cell t-th_value\">\n {{ texts[3] }}\n </th>\n }\n </tr>\n @for (propertyConnector of properties; track propertyConnector) {\n <tr\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell t-no-overflow\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-additional-info\"\n >\n @if (propertyConnector.attrName) {\n <code\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n }\n @if (propertyConnector.attrName | tuiIsOptionalPipe) {\n <tui-badge\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n }\n @if (propertyConnector.documentationPropertyDeprecated) {\n <tui-badge\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n }\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell t-no-overflow\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n @for (\n item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n track item;\n let last = $last\n ) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!last) {\n <span>&nbsp;|&nbsp;</span>\n }\n }\n </code>\n </span>\n </td>\n @if (showValues) {\n <td class=\"t-cell t-cell_value\">\n @if (propertyConnector.shouldShowValues) {\n @if (propertyConnector.hasItems) {\n <tui-select\n tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"\n propertyConnector.documentationPropertyType | tuiShowCleanerPipe\n \"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\n </tui-select>\n } @else {\n @switch (propertyConnector.documentationPropertyType) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n } @else {\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits()\"\n >\n Emit!\n </tui-notification>\n }\n </td>\n }\n </tr>\n }\n </table>\n }\n}\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
663
658
  trigger('emitEvent', [
664
659
  transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
665
660
  ]),
666
661
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
667
662
  }
668
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocDocumentation, decorators: [{
663
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentation, decorators: [{
669
664
  type: Component,
670
665
  args: [{ selector: 'tui-doc-documentation', imports: [
671
666
  FormsModule,
672
- NgForOf,
673
- NgIf,
674
- NgSwitch,
675
- NgSwitchCase,
676
667
  NgTemplateOutlet,
677
668
  TuiBadge,
678
669
  TuiDataListWrapper,
@@ -694,7 +685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
694
685
  trigger('emitEvent', [
695
686
  transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
696
687
  ]),
697
- ], template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n <table\n *ngIf=\"properties.length\"\n class=\"t-table\"\n >\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-th_value\"\n >\n {{ texts[3] }}\n </th>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of properties\"\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell t-no-overflow\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-additional-info\"\n >\n <code\n *ngIf=\"propertyConnector.attrName\"\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n <tui-badge\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell t-no-overflow\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n <ng-container\n *ngFor=\"\n let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n let last = last\n \"\n >\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n </ng-container>\n </code>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"t-cell t-cell_value\"\n >\n <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\n </tui-select>\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n\n <ng-template #noItems>\n <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-textfield\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiInputNumber\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\n </tui-textfield>\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()\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"] }]
688
+ ], template: "@if (heading) {\n <h1 class=\"t-heading\">\n {{ heading }}\n </h1>\n}\n<ng-content />\n@if (propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties; as properties) {\n @if (properties.length) {\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 @if (showValues && !isAPI) {\n <th class=\"t-th t-cell t-th_value\">\n {{ texts[3] }}\n </th>\n }\n </tr>\n @for (propertyConnector of properties; track propertyConnector) {\n <tr\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell t-no-overflow\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property t-additional-info\"\n >\n @if (propertyConnector.attrName) {\n <code\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n }\n @if (propertyConnector.attrName | tuiIsOptionalPipe) {\n <tui-badge\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n }\n @if (propertyConnector.documentationPropertyDeprecated) {\n <tui-badge\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n }\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell t-no-overflow\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n @for (\n item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n track item;\n let last = $last\n ) {\n @if (item.reference) {\n <a\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!last) {\n <span>&nbsp;|&nbsp;</span>\n }\n }\n </code>\n </span>\n </td>\n @if (showValues) {\n <td class=\"t-cell t-cell_value\">\n @if (propertyConnector.shouldShowValues) {\n @if (propertyConnector.hasItems) {\n <tui-select\n tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"\n propertyConnector.documentationPropertyType | tuiShowCleanerPipe\n \"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\n </tui-select>\n } @else {\n @switch (propertyConnector.documentationPropertyType) {\n @case ('boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n }\n @case ('string') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n }\n @case ('number') {\n <tui-textfield tuiTextfieldSize=\"m\">\n <input\n tuiInputNumber\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\n </tui-textfield>\n }\n }\n }\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n } @else {\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits()\"\n >\n Emit!\n </tui-notification>\n }\n </td>\n }\n </tr>\n }\n </table>\n }\n}\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"] }]
698
689
  }], propDecorators: { propertiesConnectors: [{
699
690
  type: ContentChildren,
700
691
  args: [TuiDocDocumentationPropertyConnector]
@@ -730,10 +721,10 @@ class TuiGetColorPipe {
730
721
  .map((v) => Number.parseInt(v, 10));
731
722
  return tuiRgbToHex(...parsed);
732
723
  }
733
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
734
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiGetColorPipe, isStandalone: true, name: "tuiGetColorPipe" }); }
724
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
725
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiGetColorPipe, isStandalone: true, name: "tuiGetColorPipe" }); }
735
726
  }
736
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiGetColorPipe, decorators: [{
727
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetColorPipe, decorators: [{
737
728
  type: Pipe,
738
729
  args: [{
739
730
  standalone: true,
@@ -757,10 +748,10 @@ class TuiGetOpacityPipe {
757
748
  .replace(',', '');
758
749
  return Math.round(Number.parseFloat(parsed) * 100);
759
750
  }
760
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
761
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiGetOpacityPipe, isStandalone: true, name: "tuiGetOpacity" }); }
751
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
752
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiGetOpacityPipe, isStandalone: true, name: "tuiGetOpacity" }); }
762
753
  }
763
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
754
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
764
755
  type: Pipe,
765
756
  args: [{
766
757
  standalone: true,
@@ -772,10 +763,10 @@ class TuiIsPrimitivePolymorpheusContentPipe {
772
763
  transform(value) {
773
764
  return tuiIsString(value) || tuiIsNumber(value);
774
765
  }
775
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
776
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, isStandalone: true, name: "tuiIsPrimitivePolymorpheusContentPipe" }); }
766
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
767
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, isStandalone: true, name: "tuiIsPrimitivePolymorpheusContentPipe" }); }
777
768
  }
778
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
769
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
779
770
  type: Pipe,
780
771
  args: [{
781
772
  standalone: true,
@@ -803,10 +794,10 @@ class TuiDocExampleGetTabsPipe {
803
794
  transform(content, defaultTab) {
804
795
  return [defaultTab, ...Object.keys(content).filter((tab) => content[tab])];
805
796
  }
806
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocExampleGetTabsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
807
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: TuiDocExampleGetTabsPipe, isStandalone: true, name: "tuiDocExampleGetTabs" }); }
797
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExampleGetTabsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
798
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExampleGetTabsPipe, isStandalone: true, name: "tuiDocExampleGetTabs" }); }
808
799
  }
809
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocExampleGetTabsPipe, decorators: [{
800
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExampleGetTabsPipe, decorators: [{
810
801
  type: Pipe,
811
802
  args: [{
812
803
  standalone: true,
@@ -861,16 +852,14 @@ class TuiDocExample {
861
852
  ?.edit(this.componentName, this.id || '', files)
862
853
  .finally(() => this.loading.set(false));
863
854
  }
864
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
865
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", component: "component", content: "content" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n <h2\n *ngIf=\"heading\"\n class=\"t-title\"\n >\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n <a\n *ngIf=\"id\"\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n</div>\n<h3\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n</h3>\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n <div\n *ngIf=\"tabs.length > 1\"\n class=\"t-tabs-wrapper\"\n >\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <tui-loader\n *ngIf=\"processor() | tuiMapper: visible\"\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n </ng-container>\n\n <ng-template #defaultEditContent>\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </ng-template>\n </tui-loader>\n\n <button\n *ngIf=\"fullscreenEnabled\"\n appearance=\"flat\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n (click)=\"fullscreen = !fullscreen\"\n >\n Fullscreen\n </button>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n >\n <section\n *ngIf=\"index === defaultTabIndex\"\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *ngComponentOutlet=\"component | async\" />\n </section>\n\n <tui-doc-code\n *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n [code]=\"code\"\n [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-container *ngFor=\"let action of codeActions\">\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n </ng-container>\n </tui-doc-code>\n </div>\n </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
855
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
856
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", component: "component", content: "content" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n @if (heading) {\n <h2 class=\"t-title\">\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n }\n @if (id) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n }\n</div>\n@if (description) {\n <h3 class=\"t-description\">\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n </h3>\n}\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n @if (tabs.length > 1) {\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-tabs-with-more>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n @if (codeEditor?.content; as content) {\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n } @else {\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n }\n </tui-loader>\n }\n @if (fullscreenEnabled) {\n <button\n appearance=\"flat\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n (click)=\"fullscreen = !fullscreen\"\n >\n Fullscreen\n </button>\n }\n </div>\n }\n @for (tab of tabs; track tab; let index = $index) {\n <div class=\"t-content\">\n @if (index === defaultTabIndex) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *ngComponentOutlet=\"component | async\" />\n </section>\n }\n <tui-doc-code\n *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n [code]=\"code\"\n [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n >\n @for (action of codeActions; track action) {\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n }\n </tui-doc-code>\n </div>\n }\n }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
866
857
  }
867
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocExample, decorators: [{
858
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExample, decorators: [{
868
859
  type: Component,
869
860
  args: [{ selector: 'tui-doc-example', imports: [
870
861
  AsyncPipe,
871
862
  NgComponentOutlet,
872
- NgForOf,
873
- NgIf,
874
863
  PolymorpheusOutlet,
875
864
  RouterLink,
876
865
  RouterLinkActive,
@@ -886,7 +875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
886
875
  ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
887
876
  '[attr.id]': 'id',
888
877
  '[class._fullsize]': 'fullsize',
889
- }, template: "<div class=\"t-title-block\">\n <h2\n *ngIf=\"heading\"\n class=\"t-title\"\n >\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n <a\n *ngIf=\"id\"\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n</div>\n<h3\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n</h3>\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n <div\n *ngIf=\"tabs.length > 1\"\n class=\"t-tabs-wrapper\"\n >\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <tui-loader\n *ngIf=\"processor() | tuiMapper: visible\"\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n </ng-container>\n\n <ng-template #defaultEditContent>\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </ng-template>\n </tui-loader>\n\n <button\n *ngIf=\"fullscreenEnabled\"\n appearance=\"flat\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n (click)=\"fullscreen = !fullscreen\"\n >\n Fullscreen\n </button>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n >\n <section\n *ngIf=\"index === defaultTabIndex\"\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *ngComponentOutlet=\"component | async\" />\n </section>\n\n <tui-doc-code\n *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n [code]=\"code\"\n [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-container *ngFor=\"let action of codeActions\">\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n </ng-container>\n </tui-doc-code>\n </div>\n </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
878
+ }, template: "<div class=\"t-title-block\">\n @if (heading) {\n <h2 class=\"t-title\">\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n }\n @if (id) {\n <a\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [relativeTo]=\"route.firstChild ?? route\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n }\n</div>\n@if (description) {\n <h3 class=\"t-description\">\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n </h3>\n}\n\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n @if (tabs.length > 1) {\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-tabs-with-more>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n @if (codeEditor?.content; as content) {\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n } @else {\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n }\n </tui-loader>\n }\n @if (fullscreenEnabled) {\n <button\n appearance=\"flat\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n (click)=\"fullscreen = !fullscreen\"\n >\n Fullscreen\n </button>\n }\n </div>\n }\n @for (tab of tabs; track tab; let index = $index) {\n <div class=\"t-content\">\n @if (index === defaultTabIndex) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *ngComponentOutlet=\"component | async\" />\n </section>\n }\n <tui-doc-code\n *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n [code]=\"code\"\n [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n >\n @for (action of codeActions; track action) {\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n }\n </tui-doc-code>\n </div>\n }\n }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
890
879
  }], propDecorators: { id: [{
891
880
  type: Input
892
881
  }], heading: [{
@@ -964,10 +953,10 @@ class TuiDocScrollIntoViewLink {
964
953
  set tuiDocScrollIntoViewLink(shallWe) {
965
954
  this.scroll$.next(shallWe);
966
955
  }
967
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocScrollIntoViewLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
968
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocScrollIntoViewLink, isStandalone: true, selector: "[tuiDocScrollIntoViewLink]", inputs: { tuiDocScrollIntoViewLink: "tuiDocScrollIntoViewLink" }, ngImport: i0 }); }
956
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocScrollIntoViewLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
957
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocScrollIntoViewLink, isStandalone: true, selector: "[tuiDocScrollIntoViewLink]", inputs: { tuiDocScrollIntoViewLink: "tuiDocScrollIntoViewLink" }, ngImport: i0 }); }
969
958
  }
970
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocScrollIntoViewLink, decorators: [{
959
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocScrollIntoViewLink, decorators: [{
971
960
  type: Directive,
972
961
  args: [{
973
962
  standalone: true,
@@ -1108,8 +1097,8 @@ class TuiDocNavigation {
1108
1097
  target.click();
1109
1098
  target.remove();
1110
1099
  }
1111
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1112
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n *ngIf=\"searchEnabled()\"\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n>\n <code\n *ngIf=\"!search.value\"\n class=\"t-slash\"\n >\n /\n </code>\n <input\n tuiTextfield\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!sidebar\"\n />\n <ng-container *ngIf=\"canOpen\">\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group\n *ngFor=\"let group of filtered(); let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <ng-container *ngFor=\"let item of group\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </tui-opt-group>\n </tui-data-list>\n </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n [rounded]=\"false\"\n >\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [open]=\"!!openPagesArr[index]\"\n (openChange)=\"openPagesArr[index] = $event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"t-section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n />\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"t-items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n />\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #subPagesTemplate>\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_bordered\">\n <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n <a\n *ngIf=\"subPage.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </div>\n </tui-expand>\n </div>\n </ng-template>\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.5rem}.t-sublink{font:var(--tui-font-text-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$2.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1100
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1101
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n *ngIf=\"searchEnabled()\"\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n>\n <code\n *ngIf=\"!search.value\"\n class=\"t-slash\"\n >\n /\n </code>\n <input\n tuiTextfield\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!sidebar\"\n />\n <ng-container *ngIf=\"canOpen\">\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group\n *ngFor=\"let group of filtered(); let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <ng-container *ngFor=\"let item of group\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </tui-opt-group>\n </tui-data-list>\n </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n [rounded]=\"false\"\n >\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [open]=\"!!openPagesArr[index]\"\n (openChange)=\"openPagesArr[index] = $event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"t-section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n />\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"t-items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n />\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #subPagesTemplate>\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_bordered\">\n <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n <a\n *ngIf=\"subPage.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </div>\n </tui-expand>\n </div>\n </ng-template>\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.5rem}.t-sublink{font:var(--tui-font-text-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$2.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1113
1102
  }
1114
1103
  __decorate([
1115
1104
  tuiPure
@@ -1117,7 +1106,7 @@ __decorate([
1117
1106
  __decorate([
1118
1107
  tuiPure
1119
1108
  ], TuiDocNavigation.prototype, "flattenSubPages", null);
1120
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocNavigation, decorators: [{
1109
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocNavigation, decorators: [{
1121
1110
  type: Component,
1122
1111
  args: [{ selector: 'tui-doc-navigation', imports: [
1123
1112
  NgForOf,
@@ -1164,10 +1153,10 @@ class TuiDocHeader {
1164
1153
  this.stream$.next(false);
1165
1154
  }
1166
1155
  }
1167
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1168
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "<button\n appearance=\"icon\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"open()\"\n class=\"t-navigation\"\n />\n</button>\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:var(--tui-shadow-small);block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);border-block-end:1px solid var(--tui-border-normal)}@supports (background: color-mix(in srgb,var(--tui-background-base),transparent 50%)){:host{background:color-mix(in srgb,var(--tui-background-base),transparent 50%);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem)}}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-block-size:100%}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "directive", type: i1$3.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1156
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1157
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "<button\n appearance=\"icon\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"open()\"\n class=\"t-navigation\"\n />\n</button>\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:var(--tui-shadow-small);block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);border-block-end:1px solid var(--tui-border-normal)}@supports (background: color-mix(in srgb,var(--tui-background-base),transparent 50%)){:host{background:color-mix(in srgb,var(--tui-background-base),transparent 50%);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem)}}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-block-size:100%}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "directive", type: i1$3.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1169
1158
  }
1170
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocHeader, decorators: [{
1159
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocHeader, decorators: [{
1171
1160
  type: Component,
1172
1161
  args: [{ selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiActiveZone, TuiButton, TuiDocNavigation, TuiSidebar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n appearance=\"icon\"\n tuiIconButton\n type=\"button\"\n class=\"t-menu\"\n [iconStart]=\"icons.menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"open()\"\n class=\"t-navigation\"\n />\n</button>\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:var(--tui-shadow-small);block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);border-block-end:1px solid var(--tui-border-normal)}@supports (background: color-mix(in srgb,var(--tui-background-base),transparent 50%)){:host{background:color-mix(in srgb,var(--tui-background-base),transparent 50%);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem)}}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-block-size:100%}\n"] }]
1173
1162
  }] });
@@ -1181,12 +1170,12 @@ class TuiDocSeeAlso {
1181
1170
  getRouterLink(pageTitle) {
1182
1171
  return this.pages.get(pageTitle)?.route ?? '';
1183
1172
  }
1184
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocSeeAlso, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1185
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocSeeAlso, isStandalone: true, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1173
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSeeAlso, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1174
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocSeeAlso, isStandalone: true, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso; track item) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1186
1175
  }
1187
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocSeeAlso, decorators: [{
1176
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSeeAlso, decorators: [{
1188
1177
  type: Component,
1189
- args: [{ selector: 'tui-doc-see-also', imports: [NgForOf, NgIf, RouterLink, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"] }]
1178
+ args: [{ selector: 'tui-doc-see-also', imports: [RouterLink, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso; track item) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"] }]
1190
1179
  }], propDecorators: { seeAlso: [{
1191
1180
  type: Input
1192
1181
  }] } });
@@ -1215,8 +1204,8 @@ class TuiDocSourceCode {
1215
1204
  path,
1216
1205
  };
1217
1206
  }
1218
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocSourceCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1219
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0, template: "<a\n *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n appearance=\"icon\"\n size=\"s\"\n target=\"_blank\"\n tuiIconButton\n type=\"button\"\n [href]=\"link\"\n [iconStart]=\"icons.code\"\n [style.height]=\"'var(--tui-height-l)'\"\n>\n {{ text }}\n</a>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1207
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSourceCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1208
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0, template: "<a\n *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n appearance=\"icon\"\n size=\"s\"\n target=\"_blank\"\n tuiIconButton\n type=\"button\"\n [href]=\"link\"\n [iconStart]=\"icons.code\"\n [style.height]=\"'var(--tui-height-l)'\"\n>\n {{ text }}\n</a>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1220
1209
  }
1221
1210
  __decorate([
1222
1211
  tuiPure
@@ -1224,7 +1213,7 @@ __decorate([
1224
1213
  __decorate([
1225
1214
  tuiPure
1226
1215
  ], TuiDocSourceCode.prototype, "getPathOptions", null);
1227
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocSourceCode, decorators: [{
1216
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSourceCode, decorators: [{
1228
1217
  type: Component,
1229
1218
  args: [{ selector: 'tui-doc-source-code', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n appearance=\"icon\"\n size=\"s\"\n target=\"_blank\"\n tuiIconButton\n type=\"button\"\n [href]=\"link\"\n [iconStart]=\"icons.code\"\n [style.height]=\"'var(--tui-height-l)'\"\n>\n {{ text }}\n</a>\n" }]
1230
1219
  }], propDecorators: { header: [{
@@ -1273,13 +1262,12 @@ class TuiDocLanguageSwitcher {
1273
1262
  this.switcher.setLanguage(lang);
1274
1263
  this.open = false;
1275
1264
  }
1276
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1277
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group label=\"Language of components\">\n <button\n *ngFor=\"let name of names\"\n new\n tuiOption\n type=\"button\"\n [value]=\"name | titlecase\"\n (click)=\"setLang(name)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"flags.get(name) | tuiFlag\"\n />\n {{ name | titlecase }}\n </button>\n </tui-opt-group>\n </tui-data-list>\n </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: i2$3.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i2$3.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOptionNew, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1265
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1266
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group label=\"Language of components\">\n @for (name of names; track name) {\n <button\n new\n tuiOption\n type=\"button\"\n [value]=\"name | titlecase\"\n (click)=\"setLang(name)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"flags.get(name) | tuiFlag\"\n />\n {{ name | titlecase }}\n </button>\n }\n </tui-opt-group>\n </tui-data-list>\n </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: i2$3.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i2$3.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOptionNew, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1278
1267
  }
1279
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocLanguageSwitcher, decorators: [{
1268
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocLanguageSwitcher, decorators: [{
1280
1269
  type: Component,
1281
1270
  args: [{ selector: 'tui-doc-language-switcher', imports: [
1282
- NgForOf,
1283
1271
  ReactiveFormsModule,
1284
1272
  TitleCasePipe,
1285
1273
  TuiBadge,
@@ -1289,7 +1277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
1289
1277
  TuiDataList,
1290
1278
  TuiFlagPipe,
1291
1279
  TuiTextfield,
1292
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group label=\"Language of components\">\n <button\n *ngFor=\"let name of names\"\n new\n tuiOption\n type=\"button\"\n [value]=\"name | titlecase\"\n (click)=\"setLang(name)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"flags.get(name) | tuiFlag\"\n />\n {{ name | titlecase }}\n </button>\n </tui-opt-group>\n </tui-data-list>\n </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"] }]
1280
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<tui-badged-content>\n <img\n alt=\"\"\n size=\"s\"\n tuiBadge\n tuiSlot=\"bottom\"\n [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n />\n\n <button\n appearance=\"outline-grayscale\"\n size=\"s\"\n tuiButtonSelect\n tuiIconButton\n type=\"button\"\n [formControl]=\"language\"\n [iconStart]=\"icons.languages\"\n >\n Language\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group label=\"Language of components\">\n @for (name of names; track name) {\n <button\n new\n tuiOption\n type=\"button\"\n [value]=\"name | titlecase\"\n (click)=\"setLang(name)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"flags.get(name) | tuiFlag\"\n />\n {{ name | titlecase }}\n </button>\n }\n </tui-opt-group>\n </tui-data-list>\n </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"] }]
1293
1281
  }] });
1294
1282
  function capitalize(value) {
1295
1283
  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
@@ -1308,20 +1296,12 @@ class TuiDocMain {
1308
1296
  const dir = this.doc.documentElement.getAttribute('dir') ?? 'ltr';
1309
1297
  this.doc.documentElement.setAttribute('dir', dir === 'ltr' ? 'rtl' : 'ltr');
1310
1298
  }
1311
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1312
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n <button\n *ngIf=\"dir && icons.ltr\"\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n\n <button\n appearance=\"secondary\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDialogs\">\n <ng-content select=\"tuiOverDialogs\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverAlerts\">\n <ng-content select=\"tuiOverAlerts\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDropdowns\">\n <ng-content select=\"tuiOverDropdowns\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverHints\">\n <ng-content select=\"tuiOverHints\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1299
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1300
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n @if (dir && icons.ltr) {\n <button\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n }\n\n <button\n appearance=\"secondary\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDialogs\">\n <ng-content select=\"tuiOverDialogs\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverAlerts\">\n <ng-content select=\"tuiOverAlerts\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDropdowns\">\n <ng-content select=\"tuiOverDropdowns\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverHints\">\n <ng-content select=\"tuiOverHints\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1313
1301
  }
1314
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocMain, decorators: [{
1302
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocMain, decorators: [{
1315
1303
  type: Component,
1316
- args: [{ selector: 'tui-doc-main', imports: [
1317
- NgIf,
1318
- RouterOutlet,
1319
- TuiButton,
1320
- TuiDocHeader,
1321
- TuiDocNavigation,
1322
- TuiIcon,
1323
- TuiRoot,
1324
- ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n <button\n *ngIf=\"dir && icons.ltr\"\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n\n <button\n appearance=\"secondary\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDialogs\">\n <ng-content select=\"tuiOverDialogs\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverAlerts\">\n <ng-content select=\"tuiOverAlerts\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDropdowns\">\n <ng-content select=\"tuiOverDropdowns\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverHints\">\n <ng-content select=\"tuiOverHints\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}\n"] }]
1304
+ args: [{ selector: 'tui-doc-main', imports: [RouterOutlet, TuiButton, TuiDocHeader, TuiDocNavigation, TuiIcon, TuiRoot], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n @if (dir && icons.ltr) {\n <button\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n }\n\n <button\n appearance=\"secondary\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDialogs\">\n <ng-content select=\"tuiOverDialogs\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverAlerts\">\n <ng-content select=\"tuiOverAlerts\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDropdowns\">\n <ng-content select=\"tuiOverDropdowns\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverHints\">\n <ng-content select=\"tuiOverHints\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}\n"] }]
1325
1305
  }] });
1326
1306
 
1327
1307
  const TUI_DOC_TABS = new InjectionToken(ngDevMode ? 'TUI_DOC_TABS' : '', {
@@ -1351,10 +1331,10 @@ class TuiDocPageTabConnector {
1351
1331
  constructor() {
1352
1332
  this.template = inject((TemplateRef));
1353
1333
  }
1354
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocPageTabConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1355
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0 }); }
1334
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPageTabConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1335
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0 }); }
1356
1336
  }
1357
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocPageTabConnector, decorators: [{
1337
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPageTabConnector, decorators: [{
1358
1338
  type: Directive,
1359
1339
  args: [{
1360
1340
  standalone: true,
@@ -1384,15 +1364,13 @@ class TuiDocPage {
1384
1364
  get showSeeAlso() {
1385
1365
  return !!this.seeAlso.length && this.activeItemIndex === 0;
1386
1366
  }
1387
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1388
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n <h1\n *ngIf=\"header\"\n class=\"t-title\"\n >\n {{ header }}\n <tui-chip\n *ngIf=\"!!deprecated || deprecated === ''\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n <tui-chip\n *ngIf=\"package\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package | tuiAutoColor\"\n >\n {{ package }}\n </tui-chip>\n <tui-chip\n *ngFor=\"let tag of tags\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n </h1>\n <tui-tabs-with-more\n *ngIf=\"tabConnectors.length\"\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n [routerLinkActiveOptions]=\"{exact: first}\"\n >\n {{ tabName }}\n </a>\n </ng-container>\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n </ng-container>\n </tui-tabs-with-more>\n\n <div\n *ngIf=\"package || path || type\"\n class=\"t-right-side\"\n >\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header\"\n [package]=\"package\"\n [path]=\"path\"\n [type]=\"type\"\n />\n\n <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n </div>\n</header>\n<div class=\"t-content\">\n <ng-content />\n <tui-doc-see-also\n *ngIf=\"showSeeAlso\"\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n />\n <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n <ng-container\n *ngIf=\"index === activeItemIndex\"\n [ngTemplateOutlet]=\"tab.template\"\n />\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue; index as index\">\n <ng-container *ngIf=\"index + tabConnectors.length === activeItemIndex\">\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "pipe", type: TuiReplacePipe, name: "tuiReplace" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1367
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1368
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n @if (header) {\n <h1 class=\"t-title\">\n {{ header }}\n @if (!!deprecated || deprecated === '') {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n }\n @if (package) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package | tuiAutoColor\"\n >\n {{ package }}\n </tui-chip>\n }\n @for (tag of tags; track tag) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n }\n </h1>\n }\n @if (tabConnectors.length) {\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabConnectors; track tab) {\n @if (tab.pageTab || defaultTabs[$index]; as tabName) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"$first ? './' : (tabName | tuiReplace: from : to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-tabs-with-more>\n }\n\n @if (package || path || type) {\n <div class=\"t-right-side\">\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header\"\n [package]=\"package\"\n [path]=\"path\"\n [type]=\"type\"\n />\n @if (supportLanguage.has(header)) {\n <tui-doc-language-switcher />\n }\n </div>\n }\n</header>\n<div class=\"t-content\">\n <ng-content />\n @if (showSeeAlso) {\n <tui-doc-see-also\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n />\n }\n @for (tab of tabConnectors; track tab; let index = $index) {\n @if (index === activeItemIndex) {\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n }\n @for (tab of tabs | keyvalue; track tab; let index = $index) {\n @if (index + tabConnectors.length === activeItemIndex) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "pipe", type: TuiReplacePipe, name: "tuiReplace" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1389
1369
  }
1390
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocPage, decorators: [{
1370
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPage, decorators: [{
1391
1371
  type: Component,
1392
1372
  args: [{ selector: 'tui-doc-page', imports: [
1393
1373
  KeyValuePipe,
1394
- NgForOf,
1395
- NgIf,
1396
1374
  NgTemplateOutlet,
1397
1375
  PolymorpheusOutlet,
1398
1376
  RouterLink,
@@ -1404,7 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
1404
1382
  TuiDocSourceCode,
1405
1383
  TuiReplacePipe,
1406
1384
  TuiTabs,
1407
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n <h1\n *ngIf=\"header\"\n class=\"t-title\"\n >\n {{ header }}\n <tui-chip\n *ngIf=\"!!deprecated || deprecated === ''\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n <tui-chip\n *ngIf=\"package\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package | tuiAutoColor\"\n >\n {{ package }}\n </tui-chip>\n <tui-chip\n *ngFor=\"let tag of tags\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n </h1>\n <tui-tabs-with-more\n *ngIf=\"tabConnectors.length\"\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n [routerLinkActiveOptions]=\"{exact: first}\"\n >\n {{ tabName }}\n </a>\n </ng-container>\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n </ng-container>\n </tui-tabs-with-more>\n\n <div\n *ngIf=\"package || path || type\"\n class=\"t-right-side\"\n >\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header\"\n [package]=\"package\"\n [path]=\"path\"\n [type]=\"type\"\n />\n\n <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n </div>\n</header>\n<div class=\"t-content\">\n <ng-content />\n <tui-doc-see-also\n *ngIf=\"showSeeAlso\"\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n />\n <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n <ng-container\n *ngIf=\"index === activeItemIndex\"\n [ngTemplateOutlet]=\"tab.template\"\n />\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue; index as index\">\n <ng-container *ngIf=\"index + tabConnectors.length === activeItemIndex\">\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
1385
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n @if (header) {\n <h1 class=\"t-title\">\n {{ header }}\n @if (!!deprecated || deprecated === '') {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n }\n @if (package) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package | tuiAutoColor\"\n >\n {{ package }}\n </tui-chip>\n }\n @for (tag of tags; track tag) {\n <tui-chip\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n }\n </h1>\n }\n @if (tabConnectors.length) {\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabConnectors; track tab) {\n @if (tab.pageTab || defaultTabs[$index]; as tabName) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"$first ? './' : (tabName | tuiReplace: from : to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-tabs-with-more>\n }\n\n @if (package || path || type) {\n <div class=\"t-right-side\">\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header\"\n [package]=\"package\"\n [path]=\"path\"\n [type]=\"type\"\n />\n @if (supportLanguage.has(header)) {\n <tui-doc-language-switcher />\n }\n </div>\n }\n</header>\n<div class=\"t-content\">\n <ng-content />\n @if (showSeeAlso) {\n <tui-doc-see-also\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n />\n }\n @for (tab of tabConnectors; track tab; let index = $index) {\n @if (index === activeItemIndex) {\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n }\n @for (tab of tabs | keyvalue; track tab; let index = $index) {\n @if (index + tabConnectors.length === activeItemIndex) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
1408
1386
  }], propDecorators: { header: [{
1409
1387
  type: Input
1410
1388
  }], package: [{
@@ -1447,12 +1425,12 @@ class TuiDocThemeSwitcher {
1447
1425
  this.storage?.setItem(this.key, theme);
1448
1426
  this.location.reload();
1449
1427
  }
1450
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1451
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-select\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n>\n <ng-content />\n <tui-data-list *tuiDataList>\n <button\n *ngFor=\"let key of keys\"\n tuiOption\n type=\"button\"\n [value]=\"key\"\n >\n <img\n alt=\"\"\n [src]=\"themes[key]\"\n [style.margin-inline-end.rem]=\"0.5\"\n [style.width.rem]=\"1.75\"\n />\n {{ key }}\n </button>\n </tui-data-list>\n</tui-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1428
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1429
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-select\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n>\n <ng-content />\n <tui-data-list *tuiDataList>\n @for (key of keys; track key) {\n <button\n tuiOption\n type=\"button\"\n [value]=\"key\"\n >\n <img\n alt=\"\"\n [src]=\"themes[key]\"\n [style.margin-inline-end.rem]=\"0.5\"\n [style.width.rem]=\"1.75\"\n />\n {{ key }}\n </button>\n }\n </tui-data-list>\n</tui-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1452
1430
  }
1453
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiDocThemeSwitcher, decorators: [{
1431
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocThemeSwitcher, decorators: [{
1454
1432
  type: Component,
1455
- args: [{ selector: 'tui-doc-theme-switcher', imports: [FormsModule, NgForOf, TuiDataList, TuiSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-select\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n>\n <ng-content />\n <tui-data-list *tuiDataList>\n <button\n *ngFor=\"let key of keys\"\n tuiOption\n type=\"button\"\n [value]=\"key\"\n >\n <img\n alt=\"\"\n [src]=\"themes[key]\"\n [style.margin-inline-end.rem]=\"0.5\"\n [style.width.rem]=\"1.75\"\n />\n {{ key }}\n </button>\n </tui-data-list>\n</tui-select>\n" }]
1433
+ args: [{ selector: 'tui-doc-theme-switcher', imports: [FormsModule, TuiDataList, TuiSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-select\n [ngModel]=\"theme\"\n (ngModelChange)=\"onTheme($event)\"\n>\n <ng-content />\n <tui-data-list *tuiDataList>\n @for (key of keys; track key) {\n <button\n tuiOption\n type=\"button\"\n [value]=\"key\"\n >\n <img\n alt=\"\"\n [src]=\"themes[key]\"\n [style.margin-inline-end.rem]=\"0.5\"\n [style.width.rem]=\"1.75\"\n />\n {{ key }}\n </button>\n }\n </tui-data-list>\n</tui-select>\n" }]
1456
1434
  }] });
1457
1435
 
1458
1436
  /**