@taiga-ui/addon-doc 5.3.0 → 5.4.0-canary.d26a6e2
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.
- package/components/demo/index.d.ts +1 -0
- package/components/example/example.component.d.ts +11 -7
- package/fesm2022/taiga-ui-addon-doc-components.mjs +26 -15
- package/fesm2022/taiga-ui-addon-doc-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc-tokens.mjs +1 -0
- package/fesm2022/taiga-ui-addon-doc-tokens.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc-utils.mjs.map +1 -1
- package/package.json +9 -9
- package/tokens/doc-icons.d.ts +1 -0
|
@@ -17,6 +17,7 @@ export declare class TuiDocDemo implements AfterViewInit {
|
|
|
17
17
|
protected readonly template: Signal<TemplateRef<any> | undefined>;
|
|
18
18
|
protected readonly rendered: import("@angular/core").WritableSignal<boolean>;
|
|
19
19
|
protected readonly theme: Signal<"dark" | "light">;
|
|
20
|
+
protected readonly icons: import("@taiga-ui/addon-doc/tokens").TuiDocIcons;
|
|
20
21
|
protected readonly dark: import("@angular/core").WritableSignal<boolean>;
|
|
21
22
|
protected readonly $: import("rxjs").Subscription;
|
|
22
23
|
protected form?: FormGroup;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type OnChanges, type Type } from '@angular/core';
|
|
1
|
+
import { type OnChanges, type Signal, type Type } from '@angular/core';
|
|
2
2
|
import { ActivatedRoute } from '@angular/router';
|
|
3
3
|
import { type TuiRawLoaderContent } from '@taiga-ui/addon-doc/types';
|
|
4
4
|
import { type TuiContext } from '@taiga-ui/cdk/types';
|
|
@@ -17,20 +17,24 @@ export declare class TuiDocExample implements OnChanges {
|
|
|
17
17
|
protected readonly fullscreenEnabled: boolean;
|
|
18
18
|
protected readonly icons: import("@taiga-ui/addon-doc/tokens").TuiDocIcons;
|
|
19
19
|
protected readonly options: import("./example.options").TuiDocExampleOptions;
|
|
20
|
-
protected readonly defaultTab:
|
|
20
|
+
protected readonly defaultTab: Signal<string>;
|
|
21
21
|
protected readonly codeEditor: import("@taiga-ui/addon-doc/types").TuiCodeEditor | null;
|
|
22
22
|
protected readonly codeActions: readonly PolymorpheusContent<TuiContext<string>>[];
|
|
23
23
|
protected readonly route: ActivatedRoute;
|
|
24
24
|
protected activeItemIndex: number;
|
|
25
25
|
protected fullscreen: boolean;
|
|
26
|
-
protected readonly copy:
|
|
26
|
+
protected readonly copy: Signal<string>;
|
|
27
27
|
protected readonly loading: import("@angular/core").WritableSignal<boolean>;
|
|
28
|
-
protected readonly
|
|
29
|
-
protected readonly processor:
|
|
28
|
+
protected readonly resolvedId: Signal<string>;
|
|
29
|
+
protected readonly processor: Signal<Record<string, string>>;
|
|
30
|
+
protected readonly lazyComponent: import("@angular/core").ResourceRef<Type<unknown> | null | undefined>;
|
|
30
31
|
readonly heading: import("@angular/core").InputSignal<string>;
|
|
32
|
+
readonly id: import("@angular/core").InputSignal<string>;
|
|
31
33
|
readonly description: import("@angular/core").InputSignal<PolymorpheusContent>;
|
|
32
34
|
readonly fullsize: import("@angular/core").InputSignal<boolean>;
|
|
33
|
-
readonly component: import("@angular/core").InputSignal<Promise<Type<unknown
|
|
35
|
+
readonly component: import("@angular/core").InputSignal<Promise<Type<unknown> | {
|
|
36
|
+
default: Type<unknown>;
|
|
37
|
+
}> | undefined>;
|
|
34
38
|
readonly content: import("@angular/core").InputSignal<Record<string, TuiRawLoaderContent>>;
|
|
35
39
|
readonly preview: import("@angular/core").InputSignal<boolean>;
|
|
36
40
|
ngOnChanges(): void;
|
|
@@ -40,5 +44,5 @@ export declare class TuiDocExample implements OnChanges {
|
|
|
40
44
|
protected edit(files: Record<string, string>): void;
|
|
41
45
|
protected onIntersection(): void;
|
|
42
46
|
static ɵfac: i0.ɵɵFactoryDeclaration<TuiDocExample, never>;
|
|
43
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TuiDocExample, "tui-doc-example", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "fullsize": { "alias": "fullsize"; "required": false; "isSignal": true; }; "component": { "alias": "component"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.WaIntersectionObserverDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.WaIntersectionObservee; inputs: {}; outputs: { "waIntersectionObservee": "waIntersectionObservee"; }; }]>;
|
|
47
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TuiDocExample, "tui-doc-example", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "fullsize": { "alias": "fullsize"; "required": false; "isSignal": true; }; "component": { "alias": "component"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.WaIntersectionObserverDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.WaIntersectionObservee; inputs: {}; outputs: { "waIntersectionObservee": "waIntersectionObservee"; }; }]>;
|
|
44
48
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive, inject, TemplateRef, Pipe, computed, model, PLATFORM_ID, viewChild, ElementRef, contentChild, signal, InjectionToken, effect, contentChildren } from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive, inject, TemplateRef, Pipe, computed, model, PLATFORM_ID, viewChild, ElementRef, contentChild, signal, resource, InjectionToken, effect, contentChildren } from '@angular/core';
|
|
3
3
|
import * as i3 from '@taiga-ui/core/portals/hint';
|
|
4
4
|
import { tuiHintOptionsProvider, TuiHint } from '@taiga-ui/core/portals/hint';
|
|
5
|
-
import { Location, NgTemplateOutlet, isPlatformServer, DOCUMENT,
|
|
5
|
+
import { Location, NgTemplateOutlet, isPlatformServer, DOCUMENT, NgComponentOutlet, KeyValuePipe } from '@angular/common';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
8
8
|
import { ActivatedRoute, UrlSerializer, RouterLink, Router, NavigationEnd, Scroll, RouterLinkActive, RouterOutlet } from '@angular/router';
|
|
9
|
-
import { TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,
|
|
9
|
+
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';
|
|
10
10
|
import { tuiInspect, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiToKebab, tuiRawLoadRecord, tuiTransliterateKeyboardLayout, TuiDocKebabPipe } from '@taiga-ui/addon-doc/utils';
|
|
11
11
|
import { tuiIsNumber, tuiPx, tuiIsPresent, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
12
12
|
import * as i6$1 from '@taiga-ui/core/components/input';
|
|
@@ -316,6 +316,7 @@ class TuiDocDemo {
|
|
|
316
316
|
this.template = contentChild((TemplateRef));
|
|
317
317
|
this.rendered = signal(false);
|
|
318
318
|
this.theme = computed(() => (this.dark() ? 'dark' : 'light'));
|
|
319
|
+
this.icons = inject(TUI_DOC_ICONS);
|
|
319
320
|
this.dark = signal(tuiCoerceValueIsTrue(this.params.darkMode ?? this.darkMode()));
|
|
320
321
|
this.$ = toObservable(this.darkMode)
|
|
321
322
|
.pipe(skip(1), takeUntilDestroyed())
|
|
@@ -398,7 +399,7 @@ class TuiDocDemo {
|
|
|
398
399
|
return this.urlSerializer.parse(this.locationRef.path());
|
|
399
400
|
}
|
|
400
401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
401
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky()", "attr.tuiTheme": "theme()" } }, 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=\"@tui.grip-vertical\" />\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: "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: "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])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiJsonPipe, name: "json" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4.TuiLabel, selector: "label[tuiLabel]" }, { 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: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: "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: "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])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiJsonPipe, name: "json" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4.TuiLabel, selector: "label[tuiLabel]" }, { 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: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
402
403
|
}
|
|
403
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDocDemo, decorators: [{
|
|
404
405
|
type: Component,
|
|
@@ -419,11 +420,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
419
420
|
TuiSwitch,
|
|
420
421
|
TuiTextfield,
|
|
421
422
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
422
|
-
'[class._sticky]': 'sticky()',
|
|
423
423
|
'[attr.tuiTheme]': 'theme()',
|
|
424
|
-
'
|
|
424
|
+
'[class._sticky]': 'sticky()',
|
|
425
425
|
'(document:mouseup.zoneless)': 'onMouseUp()',
|
|
426
|
-
|
|
426
|
+
'(window:resize)': 'onResize()',
|
|
427
|
+
}, 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"] }]
|
|
427
428
|
}] });
|
|
428
429
|
|
|
429
430
|
class TuiDocTab {
|
|
@@ -482,9 +483,20 @@ class TuiDocExample {
|
|
|
482
483
|
this.fullscreen = false;
|
|
483
484
|
this.copy = computed(() => this.copyTexts()[0]);
|
|
484
485
|
this.loading = signal(false);
|
|
485
|
-
this.
|
|
486
|
+
this.resolvedId = computed(() => this.id() || tuiToKebab(this.heading()));
|
|
486
487
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoadRecord), map((value) => this.processContent(value))), { initialValue: {} });
|
|
488
|
+
this.lazyComponent = resource({
|
|
489
|
+
request: async () => this.component(),
|
|
490
|
+
loader: async ({ request }) => {
|
|
491
|
+
if (!request) {
|
|
492
|
+
return null;
|
|
493
|
+
}
|
|
494
|
+
const component = await request;
|
|
495
|
+
return component && 'default' in component ? component.default : component;
|
|
496
|
+
},
|
|
497
|
+
});
|
|
487
498
|
this.heading = input('');
|
|
499
|
+
this.id = input('');
|
|
488
500
|
this.description = input();
|
|
489
501
|
this.fullsize = input(inject(TUI_DOC_EXAMPLE_OPTIONS).fullsize);
|
|
490
502
|
this.component = input();
|
|
@@ -507,19 +519,18 @@ class TuiDocExample {
|
|
|
507
519
|
edit(files) {
|
|
508
520
|
this.loading.set(true);
|
|
509
521
|
this.codeEditor
|
|
510
|
-
?.edit(this.location.pathname.slice(1), this.
|
|
522
|
+
?.edit(this.location.pathname.slice(1), this.resolvedId() || '', files)
|
|
511
523
|
.finally(() => this.loading.set(false));
|
|
512
524
|
}
|
|
513
525
|
onIntersection() {
|
|
514
|
-
this.doc.dispatchEvent(new CustomEvent('tui-example', { detail: this.
|
|
526
|
+
this.doc.dispatchEvent(new CustomEvent('tui-example', { detail: this.resolvedId() }));
|
|
515
527
|
}
|
|
516
528
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fullsize: { classPropertyName: "fullsize", publicName: "fullsize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "waIntersectionThreshold": "1", "waIntersectionRootMargin": "-40px 0px 1000000% 0px" }, listeners: { "waIntersectionObservee": "onIntersection()" }, properties: { "attr.id": "id()", "class._fullsize": "fullsize()" } }, usesOnChanges: true, hostDirectives: [{ directive: i1$2.WaIntersectionObserverDirective }, { directive: i1$2.WaIntersectionObservee, outputs: ["waIntersectionObservee", "waIntersectionObservee"] }], ngImport: i0, template: "@if (heading()) {\n <header tuiHeader=\"h6\">\n <hgroup tuiTitle>\n <h3>\n <a\n appearance=\"\"\n routerLink=\".\"\n tuiLink\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id()\"\n [iconEnd]=\"icons.link\"\n [relativeTo]=\"route.firstChild ?? route\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n {{ heading() }}\n </a>\n </h3>\n </hgroup>\n </header>\n\n @if (description()) {\n <div tuiDescription>\n <ng-container *polymorpheusOutlet=\"description() as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n}\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n @let tabs = preview() ? all : all.slice(1);\n @if (tabs.length) {\n <div class=\"t-header\">\n <tui-segmented\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button type=\"button\">\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-segmented>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [loading]=\"loading()\"\n [overlay]=\"true\"\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 && preview()) {\n <button\n appearance=\"flat-grayscale\"\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) {\n <div class=\"t-content\">\n @if (!$index && preview()) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <ng-container *ngComponentOutlet=\"component() | async\" />\n </section>\n }\n @let code = processor()[tab] || '';\n <tui-doc-code\n [code]=\"code\"\n [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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 } @empty {\n <div class=\"t-content\">\n <section class=\"t-demo\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </section>\n </div>\n }\n }\n</div>\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width: 1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width: 767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width: 767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}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: 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: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code", "lineNumbers"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreen", "tuiFullscreenOptions"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fullsize: { classPropertyName: "fullsize", publicName: "fullsize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "waIntersectionRootMargin": "-40px 0px 1000000% 0px", "waIntersectionThreshold": "1" }, listeners: { "waIntersectionObservee": "onIntersection()" }, properties: { "attr.id": "resolvedId()", "class._fullsize": "fullsize()" } }, usesOnChanges: true, hostDirectives: [{ directive: i1$2.WaIntersectionObserverDirective }, { directive: i1$2.WaIntersectionObservee, outputs: ["waIntersectionObservee", "waIntersectionObservee"] }], ngImport: i0, template: "@if (heading()) {\n <header tuiHeader=\"h6\">\n <hgroup tuiTitle>\n <h3>\n <a\n appearance=\"\"\n routerLink=\".\"\n tuiLink\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"resolvedId()\"\n [iconEnd]=\"icons.link\"\n [relativeTo]=\"route.firstChild ?? route\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n {{ heading() }}\n </a>\n </h3>\n </hgroup>\n </header>\n\n @if (description()) {\n <div tuiDescription>\n <ng-container *polymorpheusOutlet=\"description() as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n}\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n @let tabs = preview() ? all : all.slice(1);\n @if (tabs.length) {\n <div class=\"t-header\">\n <tui-segmented\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button type=\"button\">\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-segmented>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [loading]=\"loading()\"\n [overlay]=\"true\"\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 && preview()) {\n <button\n appearance=\"flat-grayscale\"\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) {\n <div class=\"t-content\">\n @if (!$index && preview()) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <ng-container *ngComponentOutlet=\"lazyComponent.value() ?? null\" />\n </section>\n }\n @let code = processor()[tab] || '';\n <tui-doc-code\n [code]=\"code\"\n [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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 } @empty {\n <div class=\"t-content\">\n <section class=\"t-demo\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </section>\n </div>\n }\n }\n</div>\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width: 1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width: 767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width: 767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code", "lineNumbers"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreen", "tuiFullscreenOptions"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
518
530
|
}
|
|
519
531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
520
532
|
type: Component,
|
|
521
533
|
args: [{ selector: 'tui-doc-example', imports: [
|
|
522
|
-
AsyncPipe,
|
|
523
534
|
NgComponentOutlet,
|
|
524
535
|
NgTemplateOutlet,
|
|
525
536
|
PolymorpheusOutlet,
|
|
@@ -541,12 +552,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
541
552
|
outputs: ['waIntersectionObservee'],
|
|
542
553
|
},
|
|
543
554
|
], host: {
|
|
544
|
-
waIntersectionThreshold: '1',
|
|
545
555
|
waIntersectionRootMargin: '-40px 0px 1000000% 0px',
|
|
546
|
-
|
|
556
|
+
waIntersectionThreshold: '1',
|
|
557
|
+
'[attr.id]': 'resolvedId()',
|
|
547
558
|
'[class._fullsize]': 'fullsize()',
|
|
548
559
|
'(waIntersectionObservee)': 'onIntersection()',
|
|
549
|
-
}, template: "@if (heading()) {\n <header tuiHeader=\"h6\">\n <hgroup tuiTitle>\n <h3>\n <a\n appearance=\"\"\n routerLink=\".\"\n tuiLink\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"
|
|
560
|
+
}, template: "@if (heading()) {\n <header tuiHeader=\"h6\">\n <hgroup tuiTitle>\n <h3>\n <a\n appearance=\"\"\n routerLink=\".\"\n tuiLink\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"resolvedId()\"\n [iconEnd]=\"icons.link\"\n [relativeTo]=\"route.firstChild ?? route\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n {{ heading() }}\n </a>\n </h3>\n </hgroup>\n </header>\n\n @if (description()) {\n <div tuiDescription>\n <ng-container *polymorpheusOutlet=\"description() as text\">\n {{ text }}\n </ng-container>\n </div>\n }\n}\n<div\n class=\"t-example\"\n [(tuiFullscreen)]=\"fullscreen\"\n>\n @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n @let tabs = preview() ? all : all.slice(1);\n @if (tabs.length) {\n <div class=\"t-header\">\n <tui-segmented\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n @for (tab of tabs; track tab) {\n <button type=\"button\">\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n }\n </tui-segmented>\n @if (processor() | tuiMapper: visible) {\n <tui-loader\n size=\"xs\"\n class=\"t-code-editor\"\n [loading]=\"loading()\"\n [overlay]=\"true\"\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 && preview()) {\n <button\n appearance=\"flat-grayscale\"\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) {\n <div class=\"t-content\">\n @if (!$index && preview()) {\n <section\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <ng-container *ngComponentOutlet=\"lazyComponent.value() ?? null\" />\n </section>\n }\n @let code = processor()[tab] || '';\n <tui-doc-code\n [code]=\"code\"\n [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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 } @empty {\n <div class=\"t-content\">\n <section class=\"t-demo\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </section>\n </div>\n }\n }\n</div>\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width: 1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width: 767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width: 767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}tui-doc-code{overflow:hidden}\n"] }]
|
|
550
561
|
}] });
|
|
551
562
|
|
|
552
563
|
function labelsProviderFactory(pages) {
|