@taiga-ui/addon-doc
Version:
Taiga UI based library for developing documentation portals for Angular libraries.
402 lines (394 loc) • 164 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive, inject, TemplateRef, Pipe, computed, model, PLATFORM_ID, viewChild, ElementRef, contentChild, signal, resource, InjectionToken, effect, contentChildren } from '@angular/core';
import * as i3 from '@taiga-ui/core/portals/hint';
import { tuiHintOptionsProvider, TuiHint } from '@taiga-ui/core/portals/hint';
import { Location, NgTemplateOutlet, isPlatformServer, DOCUMENT, NgComponentOutlet, KeyValuePipe } from '@angular/common';
import * as i1 from '@angular/forms';
import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
import { ActivatedRoute, UrlSerializer, RouterLink, Router, NavigationEnd, Scroll, RouterLinkActive, RouterOutlet } from '@angular/router';
import { TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_ICONS, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_PREVIEW_TEXT, 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_PAGES_ICONS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_TOC_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
import { tuiInspect, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiToKebab, tuiRawLoadRecord, tuiTransliterateKeyboardLayout, TuiDocKebabPipe } from '@taiga-ui/addon-doc/utils';
import { tuiIsNumber, tuiPx, tuiIsPresent, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i6$1 from '@taiga-ui/core/components/input';
import { TuiInput, TuiInputDirective } from '@taiga-ui/core/components/input';
import { TuiNotificationService } from '@taiga-ui/core/components/notification';
import * as i2 from '@taiga-ui/kit/components/data-list-wrapper';
import { TuiDataListWrapper } from '@taiga-ui/kit/components/data-list-wrapper';
import * as i7 from '@taiga-ui/kit/components/input-number';
import { TuiInputNumber } from '@taiga-ui/kit/components/input-number';
import * as i3$1 from '@taiga-ui/kit/components/select';
import { TuiSelect } from '@taiga-ui/kit/components/select';
import { TuiSwitch } from '@taiga-ui/kit/components/switch';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
import { WA_IS_E2E } from '@ng-web-apis/platform';
import * as i5 from '@taiga-ui/core/components/textfield';
import { TuiTextfield } from '@taiga-ui/core/components/textfield';
import * as i6 from '@taiga-ui/core/portals/dropdown';
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_COMMON_ICONS, TUI_DARK_MODE } from '@taiga-ui/core/tokens';
import { TUI_COPY_OPTIONS } from '@taiga-ui/kit/components/copy';
import { TUI_COPY_TEXTS, TUI_DONE_WORD } from '@taiga-ui/kit/tokens';
import { HighlightAuto } from 'ngx-highlightjs';
import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip, filter, mergeMap, ReplaySubject, take, debounceTime, combineLatest, fromEvent, of } from 'rxjs';
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
import * as i4$1 from '@taiga-ui/cdk/directives/item';
import { TuiItem } from '@taiga-ui/cdk/directives/item';
import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
import { tuiClamp } from '@taiga-ui/cdk/utils/math';
import * as i3$2 from '@taiga-ui/core/components/expand';
import { TuiExpand } from '@taiga-ui/core/components/expand';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import * as i4 from '@taiga-ui/core/components/label';
import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
import * as i1$2 from '@ng-web-apis/intersection-observer';
import { WaIntersectionObserverDirective, WaIntersectionObservee } from '@ng-web-apis/intersection-observer';
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
import { TuiLink, tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
import { TuiLoader } from '@taiga-ui/core/components/loader';
import { TuiTitle } from '@taiga-ui/core/components/title';
import { TuiFullscreen } from '@taiga-ui/kit/components/fullscreen';
import { TuiSegmented } from '@taiga-ui/kit/components/segmented';
import { TuiHeader } from '@taiga-ui/layout/components/header';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { TUI_EXAMPLE_PRIMARY_FILE_NAME } from '@taiga-ui/addon-doc/types';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { TuiPopup } from '@taiga-ui/core/portals/popup';
import { TuiDrawer } from '@taiga-ui/kit/components/drawer';
import { Title } from '@angular/platform-browser';
import { tuiAutoFocusOptionsProvider, TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
import { tuiZonefreeScheduler, tuiControlValue, tuiWatch } from '@taiga-ui/cdk/observables';
import * as i5$1 from '@taiga-ui/core/components/data-list';
import { TuiDataList } from '@taiga-ui/core/components/data-list';
import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
import * as i2$1 from '@taiga-ui/kit/components/accordion';
import { TuiAccordion } from '@taiga-ui/kit/components/accordion';
import { TuiRoot } from '@taiga-ui/core/components/root';
import { TuiBadge } from '@taiga-ui/kit/components/badge';
import { TuiFade } from '@taiga-ui/kit/directives/fade';
import { TuiAutoColorPipe } from '@taiga-ui/kit/pipes/auto-color';
class TuiDocAPI {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TuiDocAPI, isStandalone: true, selector: "table[tuiDocAPI]", providers: [tuiHintOptionsProvider({ appearance: 'floating' })], ngImport: i0, template: `
<thead>
<tr>
<ng-content select="th" />
</tr>
</thead>
<tbody><ng-content /></tbody>
<ng-content select="tbody" />
`, isInline: true, styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiTheme=dark] [tuiDocAPI] tbody [tuiTitle]{background:var(--tui-background-elevation-2)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font:var(--tui-typography-body-s);text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width:767.4px){[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: "19.2.21", ngImport: i0, type: TuiDocAPI, decorators: [{
type: Component,
args: [{ selector: 'table[tuiDocAPI]', template: `
<thead>
<tr>
<ng-content select="th" />
</tr>
</thead>
<tbody><ng-content /></tbody>
<ng-content select="tbody" />
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHintOptionsProvider({ appearance: 'floating' })], styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiTheme=dark] [tuiDocAPI] tbody [tuiTitle]{background:var(--tui-background-elevation-2)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font:var(--tui-typography-body-s);text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width:767.4px){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"] }]
}] });
class TuiDocAPINumberItem {
constructor() {
this.min = input(null);
this.max = input(null);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
type: Directive,
args: [{ selector: 'tr[tuiDocAPIItem][type=number]' }]
}] });
class TuiInspectPipe {
constructor() {
this.isE2E = inject(WA_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' : tuiInspect(value, depth);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspect" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInspectPipe, decorators: [{
type: Pipe,
args: [{ name: 'tuiInspect' }]
}] });
class TuiTypeReferencePipe {
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: "19.2.21", ngImport: i0, type: TuiTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TuiTypeReferencePipe, isStandalone: true, name: "tuiTypeReference" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTypeReferencePipe, decorators: [{
type: Pipe,
args: [{ name: 'tuiTypeReference' }]
}] });
const SERIALIZED_SUFFIX = '$';
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(TuiNotificationService);
this.numberItem = inject(TuiDocAPINumberItem, {
self: true,
optional: true,
});
this.isBananaBox = computed(() => this.name().startsWith('[('));
this.isInput = computed(() => this.name().startsWith('['));
this.isOutput = computed(() => this.name().startsWith('('));
this.name = input('');
this.type = input('');
this.value = model();
this.items = input([], { transform: (v) => v || [] });
this.hasCleaner = computed(() => this.type().includes('null') || this.type().includes('PolymorpheusContent'));
}
ngOnInit() {
this.parseParams(this.activatedRoute.snapshot.queryParams);
}
onValueChange(value) {
this.value.set(value);
this.setQueryParam(value);
}
emitEvent(event) {
console.info('emitEvent', event);
const alert = !event || event?.toString() === '[object Object]'
? tuiInspect(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}`];
if (!propertyValue && !propertyValueWithSuffix) {
return;
}
const items = this.items();
let value = !!propertyValueWithSuffix && items
? 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 items = this.items();
const computedValue = isValueAvailableByKey && items ? items.indexOf(value) : value;
const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
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: "19.2.21", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n <code\n tuiHintDirection=\"top-end\"\n class=\"t-name\"\n [class.t-name_banana]=\"isBananaBox()\"\n [class.t-name_input]=\"isInput()\"\n [class.t-name_output]=\"isOutput()\"\n [tuiHint]=\"hint\"\n >\n {{ name() }}\n </code>\n <ng-template #hint>\n <ng-content>{{ name() }}</ng-content>\n </ng-template>\n <div class=\"t-description\">\n <ng-container *ngTemplateOutlet=\"hint\" />\n </div>\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type() | tuiTypeReference; track item) {\n @if (item.reference) {\n <a\n rel=\"noreferrer\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!$last) {\n <span> | </span>\n }\n }\n </code>\n</td>\n<td\n tuiTextfieldSize=\"m\"\n class=\"t-td\"\n>\n @if (items().length) {\n <tui-textfield\n tuiChevron\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"hasCleaner()\"\n >\n <input\n tuiSelect\n [ngModel]=\"value() ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [itemContent]=\"content\"\n [items]=\"items()\"\n />\n </tui-textfield>\n } @else {\n @if (value() !== undefined) {\n @if (type() === 'boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n }\n\n @if (type() === 'string') {\n <tui-textfield class=\"t-input\">\n <input\n tuiInput\n [id]=\"name()\"\n [ngModel]=\"value() || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n }\n\n @if (type() === 'number' || type() === 'bigint' || type() === 'number | bigint') {\n <tui-textfield class=\"t-input\">\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 <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspect }}</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-td .t-name,.t-td .t-type{outline:none;font-weight:700;margin:0}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;-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}.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:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}.t-description{display:none}@media screen and (max-width:767.4px){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}.t-name{pointer-events:none}.t-description{display:block;margin-block-start:1rem}}\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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i6$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i7.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "directive", type: i7.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspect" }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "pipe", type: TuiTypeReferencePipe, name: "tuiTypeReference" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiDocAPIItem, decorators: [{
type: Component,
args: [{ selector: 'tr[tuiDocAPIItem]', imports: [
FormsModule,
NgTemplateOutlet,
TuiChevron,
TuiDataListWrapper,
TuiHint,
TuiInput,
TuiInputNumber,
TuiInspectPipe,
TuiSelect,
TuiSwitch,
TuiTypeReferencePipe,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n tuiHintDirection=\"top-end\"\n class=\"t-name\"\n [class.t-name_banana]=\"isBananaBox()\"\n [class.t-name_input]=\"isInput()\"\n [class.t-name_output]=\"isOutput()\"\n [tuiHint]=\"hint\"\n >\n {{ name() }}\n </code>\n <ng-template #hint>\n <ng-content>{{ name() }}</ng-content>\n </ng-template>\n <div class=\"t-description\">\n <ng-container *ngTemplateOutlet=\"hint\" />\n </div>\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n @for (item of type() | tuiTypeReference; track item) {\n @if (item.reference) {\n <a\n rel=\"noreferrer\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n } @else {\n {{ item.type }}\n }\n @if (!$last) {\n <span> | </span>\n }\n }\n </code>\n</td>\n<td\n tuiTextfieldSize=\"m\"\n class=\"t-td\"\n>\n @if (items().length) {\n <tui-textfield\n tuiChevron\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"hasCleaner()\"\n >\n <input\n tuiSelect\n [ngModel]=\"value() ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [itemContent]=\"content\"\n [items]=\"items()\"\n />\n </tui-textfield>\n } @else {\n @if (value() !== undefined) {\n @if (type() === 'boolean') {\n <input\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n }\n\n @if (type() === 'string') {\n <tui-textfield class=\"t-input\">\n <input\n tuiInput\n [id]=\"name()\"\n [ngModel]=\"value() || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n }\n\n @if (type() === 'number' || type() === 'bigint' || type() === 'number | bigint') {\n <tui-textfield class=\"t-input\">\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 <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspect }}</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-td .t-name,.t-td .t-type{outline:none;font-weight:700;margin:0}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:fit-content;-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}.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:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}.t-description{display:none}@media screen and (max-width:767.4px){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}.t-name{pointer-events:none}.t-description{display:block;margin-block-start:1rem}}\n"] }]
}] });
class TuiDocCode {
constructor() {
this.copy = inject(TUI_COPY_OPTIONS).icon;
this.icons = inject(TUI_COMMON_ICONS);
this.rawLoader$$ = new BehaviorSubject('');
this.texts = inject(TUI_COPY_TEXTS);
this.isServer = isPlatformServer(inject(PLATFORM_ID));
this.markdownCodeProcessor = inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
this.copy$ = new Subject();
this.copyText = computed(() => this.texts()[0]);
this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.copy), startWith(this.icons.check)))), { initialValue: this.copy });
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
this.filename = input('');
this.code = input('');
this.lineNumbers = input(true);
}
get hasFilename() {
return !!this.filename();
}
ngOnChanges() {
this.rawLoader$$.next(this.code());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._has-filename": "hasFilename" } }, usesOnChanges: true, 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 @if (lineNumbers()) {\n <code [highlightAuto]=\"content\" lineNumbers>{{isServer ? content : ''}}</code>\n } @else {\n <code [highlightAuto]=\"content\">{{isServer ? content : ''}}</code>\n }\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"\"\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-typography-body-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;display:flex;inset-block-start:.75rem;inset-inline-end:.75rem;justify-content:center;align-items:center;flex-direction:row-reverse;background:var(--tui-background-base-alt);border-radius:var(--tui-radius-xs);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-code-actions{background:var(--tui-background-elevation-2)}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-typography-body-m);font-size:.875rem;padding:1rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: HighlightAuto, selector: "[highlightAuto]", inputs: ["highlightAuto", "languages"], outputs: ["highlighted"] }, { kind: "directive", type: HighlightLineNumbers, selector: "[highlight][lineNumbers], [highlightAuto][lineNumbers]", inputs: ["startFrom", "singleLine"] }, { 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: "19.2.21", ngImport: i0, type: TuiDocCode, decorators: [{
type: Component,
args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, HighlightAuto, HighlightLineNumbers, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class._has-filename]': 'hasFilename' }, 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 @if (lineNumbers()) {\n <code [highlightAuto]=\"content\" lineNumbers>{{isServer ? content : ''}}</code>\n } @else {\n <code [highlightAuto]=\"content\">{{isServer ? content : ''}}</code>\n }\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"\"\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-typography-body-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;display:flex;inset-block-start:.75rem;inset-inline-end:.75rem;justify-content:center;align-items:center;flex-direction:row-reverse;background:var(--tui-background-base-alt);border-radius:var(--tui-radius-xs);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-code-actions{background:var(--tui-background-elevation-2)}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-typography-body-m);font-size:.875rem;padding:1rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}\n"] }]
}] });
const COPIED_TIMEOUT = 1500;
class TuiDocCopy {
constructor() {
this.copy$ = new Subject();
this.texts = inject(TUI_COPY_TEXTS);
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: "19.2.21", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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;font-variant-ligatures:none}.t-initial:empty:before{content:attr(data-text)}.t-content{display:flex;flex-direction:column;text-align:center;padding:.375rem 0}\n"], dependencies: [{ 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: "19.2.21", ngImport: i0, type: TuiDocCopy, decorators: [{
type: Component,
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;font-variant-ligatures:none}.t-initial:empty:before{content:attr(data-text)}.t-content{display:flex;flex-direction:column;text-align:center;padding:.375rem 0}\n"] }]
}] });
const MIN_WIDTH = 160;
class TuiJsonPipe {
transform(value) {
return JSON.stringify(value, (_, x) => (typeof x === 'bigint' ? `${String(x)}n` : x), 2);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TuiJsonPipe, isStandalone: true, name: "json" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiJsonPipe, decorators: [{
type: Pipe,
args: [{ name: 'json' }]
}] });
class TuiDocDemo {
constructor() {
this.resizable = viewChild.required(TuiResizable, { read: ElementRef });
this.content = viewChild.required('content');
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 = contentChild((TemplateRef));
this.rendered = signal(false);
this.theme = computed(() => (this.dark() ? 'dark' : 'light'));
this.icons = inject(TUI_DOC_ICONS);
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 = Number.parseInt(this.params.sandboxWidth, 10);
this.texts = inject(TUI_DOC_DEMO_TEXTS);
this.control = input(null);
this.sticky = input(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 = Number.NaN) {
if (!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 : Number.NaN;
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 = this.control();
if (control) {
this.form = new FormGroup({ value: control }, { updateOn: this.updateOn });
}
}
getUrlTree() {
return this.urlSerializer.parse(this.locationRef.path());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mouseup.zoneless": "onMouseUp()", "window:resize": "onResize()" }, properties: { "attr.tuiTheme": "theme()", "class._sticky": "sticky()" } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n <small>{{ texts()[0] }}</small>\n </label>\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n <small>{{ texts()[1] }}</small>\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\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 (form) {\n <form\n id=\"tui-demo-form\"\n [formGroup]=\"form\"\n >\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n >\n <tui-icon [icon]=\"icons.resizer\" />\n </div>\n</div>\n@if (form) {\n <tui-expand [expanded]=\"expanded\">\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n </ng-template>\n </tui-expand>\n <div class=\"t-footer\">\n <button\n appearance=\"flat-grayscale\"\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-textfield\n tuiChevron\n tuiTextfieldAppearance=\"secondary-grayscale\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__reset-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n >\n Reset\n </button>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__submit-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n >\n Submit\n </button>\n </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-typography-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;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);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.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:767.4px){.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:767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width:767.4px){.t-resizer{display:none}}@media screen and (min-height:37.5rem){:host._sticky{position:sticky;z-index:2;inset-block-start:4.625rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "in