@taiga-ui/addon-doc
Version:
Taiga UI based library for developing documentation portals for Angular libraries.
409 lines (401 loc) • 214 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, TemplateRef, Pipe, Directive, Input, EventEmitter, Output, PLATFORM_ID, signal, computed, ViewChild, ContentChild, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, ElementRef } from '@angular/core';
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';
import { Location, NgForOf, NgIf, NgSwitch, NgSwitchCase, isPlatformServer, JsonPipe, NgTemplateOutlet, DOCUMENT, TitleCasePipe, KeyValuePipe } from '@angular/common';
import * as i1 from '@angular/forms';
import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
import { ActivatedRoute, UrlSerializer, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
import { tuiInspectAny, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiRawLoadRecord, tuiTransliterateKeyboardLayout } from '@taiga-ui/addon-doc/utils';
import { tuiIsNumber, tuiPx, tuiPure, tuiIsString, tuiProvideOptions, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiAlertService } from '@taiga-ui/core/components/alert';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import * as i4 from '@taiga-ui/core/components/textfield';
import { TuiTextfield, TuiTextfieldDirective } from '@taiga-ui/core/components/textfield';
import * as i2 from '@taiga-ui/kit/components/data-list-wrapper';
import { TuiDataListWrapper } from '@taiga-ui/kit/components/data-list-wrapper';
import * as i3 from '@taiga-ui/kit/components/input-number';
import { TuiInputNumber } from '@taiga-ui/kit/components/input-number';
import { TuiSwitch } from '@taiga-ui/kit/components/switch';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
import { TUI_IS_E2E } from '@taiga-ui/cdk/tokens';
import * as i1$1 from '@angular/cdk/clipboard';
import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
import { Highlight } from 'ngx-highlightjs';
import { BehaviorSubject, Subject, map, switchMap, timer, startWith, skip, merge, ReplaySubject, switchAll, filter, mergeMap, take, debounceTime, combineLatest, fromEvent, of, distinctUntilChanged } from 'rxjs';
import { TUI_FALSE_HANDLER, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { __decorate } from 'tslib';
import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
import { tuiToInteger, tuiClamp } from '@taiga-ui/cdk/utils/math';
import * as i4$1 from '@taiga-ui/core/components/expand';
import { TuiExpand } from '@taiga-ui/core/components/expand';
import { TuiGroup } from '@taiga-ui/core/directives/group';
import { TUI_DARK_MODE, TUI_COMMON_ICONS, TUI_THEME } from '@taiga-ui/core/tokens';
import * as i5 from '@taiga-ui/legacy/components/select';
import { TuiSelectModule } from '@taiga-ui/legacy/components/select';
import * as i8 from '@taiga-ui/legacy/directives/textfield-controller';
import { TuiTextfieldControllerModule } from '@taiga-ui/legacy/directives/textfield-controller';
import * as i3$1 from '@taiga-ui/core/components/data-list';
import { TuiDataList } from '@taiga-ui/core/components/data-list';
import { trigger, transition, style, animate } from '@angular/animations';
import { tuiQueryListChanges, tuiWatch, tuiZonefreeScheduler, tuiControlValue } from '@taiga-ui/cdk/observables';
import { TuiFilterPipe } from '@taiga-ui/cdk/pipes/filter';
import { TuiToArrayPipe } from '@taiga-ui/cdk/pipes/to-array';
import { TuiNotification } from '@taiga-ui/core/components/notification';
import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
import * as i4$2 from '@taiga-ui/core/directives/dropdown';
import { TuiDropdown } from '@taiga-ui/core/directives/dropdown';
import { TuiBadge } from '@taiga-ui/kit/components/badge';
import { tuiRgbToHex } from '@taiga-ui/cdk/utils/color';
import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
import { TuiLet } from '@taiga-ui/cdk/directives/let';
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
import { TuiFullscreen } from '@taiga-ui/core/components/fullscreen';
import { TuiLink, tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
import { TuiLoader } from '@taiga-ui/core/components/loader';
import * as i2$1 from '@taiga-ui/kit/components/tabs';
import { TuiTabs } from '@taiga-ui/kit/components/tabs';
import { PolymorpheusComponent, PolymorpheusOutlet, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
import { TUI_EXAMPLE_PRIMARY_FILE_NAME } from '@taiga-ui/addon-doc/types';
import * as i1$2 from '@taiga-ui/cdk/directives/item';
import * as i1$3 from '@taiga-ui/addon-mobile/directives/sidebar';
import { TuiSidebarDirective, TuiSidebar } from '@taiga-ui/addon-mobile/directives/sidebar';
import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
import { Title } from '@angular/platform-browser';
import { tuiAutoFocusOptionsProvider, TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
import * as i2$2 from '@taiga-ui/kit/components/accordion';
import { TuiAccordion } from '@taiga-ui/kit/components/accordion';
import { TuiInputModule } from '@taiga-ui/legacy/components/input';
import { TuiFlagPipe } from '@taiga-ui/core/pipes/flag';
import { TuiLanguageSwitcherService } from '@taiga-ui/i18n/utils';
import * as i2$3 from '@taiga-ui/kit/components/badged-content';
import { TuiBadgedContent } from '@taiga-ui/kit/components/badged-content';
import { TuiButtonSelect } from '@taiga-ui/kit/directives/button-select';
import { TuiRoot } from '@taiga-ui/core/components/root';
import { TuiReplacePipe } from '@taiga-ui/cdk/pipes/replace';
import { TuiAutoColorPipe } from '@taiga-ui/core/pipes/auto-color';
import { TuiChip } from '@taiga-ui/kit/components/chip';
class TuiDocAPI {
constructor() {
this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPI, decorators: [{
type: Component,
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"] }]
}] });
class TuiInspectPipe {
constructor() {
this.isE2E = inject(TUI_IS_E2E);
}
transform(value, depth = 2) {
if (this.isE2E && typeof value === 'function') {
/**
* @description:
* When developing in production mode the webpack bundler minify
* functions in different ways, then due to which the string content
* of the function may differ from build to build, which can be to
* various problems when screenshot testing on e2e.
*/
return 'λ(x) => y';
}
return value instanceof TemplateRef ? 'TemplateRef' : tuiInspectAny(value, depth);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspectAny" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInspectPipe, decorators: [{
type: Pipe,
args: [{
standalone: true,
name: 'tuiInspectAny',
}]
}] });
class TuiDocTypeReferencePipe {
constructor() {
this.parser = inject(TUI_DOC_TYPE_REFERENCE_PARSER);
this.linkHandler = inject(TUI_DOC_TYPE_REFERENCE_HANDLER);
}
transform(original) {
return this.parser(original)
.map(({ type, extracted }) => ({
type,
extracted,
reference: this.linkHandler?.(extracted) ?? null,
}))
.sort((a, b) => b.reference?.localeCompare(a.reference ?? '') ?? -1);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTypeReferencePipe, isStandalone: true, name: "tuiDocTypeReference" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTypeReferencePipe, decorators: [{
type: Pipe,
args: [{
standalone: true,
name: 'tuiDocTypeReference',
}]
}] });
class TuiDocAPINumberItem {
constructor() {
this.min = null;
this.max = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: "min", max: "max" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'tr[tuiDocAPIItem][type=number]',
}]
}], propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}] } });
const SERIALIZED_SUFFIX$1 = '$';
class TuiDocAPIItem {
constructor() {
this.locationRef = inject(Location);
this.activatedRoute = inject(ActivatedRoute);
this.urlSerializer = inject(UrlSerializer);
this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
this.alerts = inject(TuiAlertService);
this.icons = inject(TUI_DOC_ICONS);
this.numberItem = inject(TuiDocAPINumberItem, {
self: true,
optional: true,
});
this.name = '';
this.type = '';
this.items = [];
this.valueChange = new EventEmitter();
}
ngAfterViewInit() {
this.parseParams(this.activatedRoute.snapshot.queryParams);
}
onValueChange(value) {
this.value = value;
this.valueChange.emit(value);
this.setQueryParam(value);
}
emitEvent(event) {
console.info('emitEvent', event);
const alert = !event || event?.toString() === '[object Object]'
? tuiInspectAny(event, 2)
: event;
this.alerts.open(alert, { label: this.name }).subscribe();
}
clearBrackets(value) {
return value.replaceAll(/[()[\]]/g, '');
}
parseParams(params) {
const name = this.clearBrackets(this.name);
const propertyValue = params[name];
const propertyValueWithSuffix = params[`${name}${SERIALIZED_SUFFIX$1}`];
if (!propertyValue && !propertyValueWithSuffix) {
return;
}
let value = !!propertyValueWithSuffix && this.items
? this.items[propertyValueWithSuffix]
: tuiCoerceValue(propertyValue);
if (this.type === 'string' && tuiIsNumber(value)) {
value = value.toString();
}
this.onValueChange(value);
}
setQueryParam(value) {
const tree = this.urlSerializer.parse(this.locationRef.path());
const isValueAvailableByKey = value instanceof Object;
const computedValue = isValueAvailableByKey && this.items ? this.items.indexOf(value) : value;
const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX$1 : '';
const propName = this.clearBrackets(this.name) + suffix;
tree.queryParams = {
...tree.queryParams,
[propName]: computedValue,
};
this.locationRef.go(this.urlStateHandler(tree));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\"> | </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:-webkit-fit-content;inline-size:-moz-fit-content;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:3px}.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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tr[tuiDocAPIItem]', imports: [
FormsModule,
NgForOf,
NgIf,
NgSwitch,
NgSwitchCase,
TuiChevron,
TuiDataListWrapper,
TuiDocTypeReferencePipe,
TuiIcon,
TuiInputNumber,
TuiInspectPipe,
TuiSwitch,
TuiTextfield,
], 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\"> | </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:-webkit-fit-content;inline-size:-moz-fit-content;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:3px}.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"] }]
}], propDecorators: { name: [{
type: Input
}], type: [{
type: Input
}], value: [{
type: Input
}], items: [{
type: Input
}], valueChange: [{
type: Output
}] } });
class TuiDocCode {
constructor() {
this.icons = inject(TUI_DOC_ICONS);
this.rawLoader$$ = new BehaviorSubject('');
this.isServer = isPlatformServer(inject(PLATFORM_ID));
this.markdownCodeProcessor = inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
this.copy$ = new Subject();
this.copyText = toSignal(inject(TUI_COPY_TEXTS).pipe(map(([copy]) => copy)));
this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
this.filename = '';
}
set code(code) {
this.rawLoader$$.next(code);
}
get hasFilename() {
return !!this.filename;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 (-webkit-min-device-pixel-ratio: 0),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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCode, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[style.visibility]': 'isServer ? "hidden" : "visible"',
'[class._has-filename]': 'hasFilename',
}, 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 (-webkit-min-device-pixel-ratio: 0),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"] }]
}], propDecorators: { filename: [{
type: Input
}], code: [{
type: Input
}] } });
const COPIED_TIMEOUT = 1500;
class TuiDocCopy {
constructor() {
this.copy$ = new Subject();
this.texts = toSignal(inject(TUI_COPY_TEXTS), {
initialValue: ['', ''],
});
this.copied = toSignal(this.copy$.pipe(switchMap(() => timer(COPIED_TIMEOUT).pipe(map(TUI_FALSE_HANDLER), startWith(true)))), { initialValue: false });
}
onClick() {
this.copy$.next();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCopy, decorators: [{
type: Component,
args: [{ standalone: true, 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"] }]
}] });
const MIN_WIDTH = 160;
class TuiDocDemo {
constructor() {
this.el = tuiInjectElement();
this.locationRef = inject(Location);
this.urlSerializer = inject(UrlSerializer);
this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
this.darkMode = inject(TUI_DARK_MODE);
this.template = null;
this.rendered = signal(false);
this.theme = computed(() => (this.dark() ? 'dark' : 'light'));
this.dark = signal(tuiCoerceValueIsTrue(this.params.darkMode ?? this.darkMode()));
this.$ = toObservable(this.darkMode)
.pipe(skip(1), takeUntilDestroyed())
.subscribe((mode) => this.onModeChange(mode));
this.updateOnVariants = ['change', 'blur', 'submit'];
this.updateOn = this.params.updateOn || this.updateOnVariants[0];
this.opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
this.expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
this.sandboxWidth = tuiToInteger(this.params.sandboxWidth);
this.texts = inject(TUI_DOC_DEMO_TEXTS);
this.control = null;
this.sticky = true;
}
ngAfterViewInit() {
this.createForm();
this.updateWidth(this.sandboxWidth + this.delta);
this.rendered.set(true);
}
onResize() {
this.updateWidth();
this.onMouseUp();
}
onMouseUp() {
this.updateUrl({ sandboxWidth: this.sandboxWidth });
}
onModeChange(darkMode) {
this.dark.set(darkMode);
this.updateUrl({ sandboxWidth: this.sandboxWidth, darkMode });
}
toggleDetails() {
this.expanded = !this.expanded;
this.updateUrl({ sandboxExpanded: this.expanded });
}
changeOpaque(opaque) {
this.opaque = opaque;
this.updateUrl({ sandboxOpaque: this.opaque });
}
updateOnChange(updateOn) {
this.updateOn = updateOn;
this.updateUrl({ updateOn });
this.createForm();
}
updateWidth(width = NaN) {
if (!this.resizer || !this.resizable || !this.content) {
return;
}
const safe = width || this.resizable.nativeElement.clientWidth;
const total = this.el.clientWidth;
const clamped = Math.round(tuiClamp(safe, MIN_WIDTH, total)) - this.delta;
const validated = safe < total ? clamped : NaN;
this.resizer.nativeElement.textContent = String(clamped || '-');
this.resizable.nativeElement.style.width = validated ? tuiPx(safe) : '';
this.sandboxWidth = validated;
}
get delta() {
return this.resizable && this.content
? this.resizable.nativeElement.clientWidth -
this.content.nativeElement.clientWidth
: 0;
}
get params() {
return this.getUrlTree().queryParams;
}
updateUrl(params) {
const tree = this.getUrlTree();
const { queryParams } = tree;
delete queryParams.sandboxWidth;
tree.queryParams = {
...queryParams,
...tuiCleanObject({ ...params }),
};
this.locationRef.go(this.urlStateHandler(tree));
}
createForm() {
const { control, updateOn } = this;
if (control) {
this.testForm = new FormGroup({ testValue: control }, { updateOn });
}
}
getUrlTree() {
return this.urlSerializer.parse(this.locationRef.path());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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;pa