@taiga-ui/addon-doc 4.24.0 → 4.25.0-canary.0b32519
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/code/index.d.ts +1 -0
- package/esm2022/components/code/index.mjs +5 -3
- package/esm2022/components/example/example.component.mjs +3 -3
- package/esm2022/components/navigation/navigation.component.mjs +6 -4
- package/esm2022/components/navigation/scroll-into-view.directive.mjs +3 -3
- package/esm2022/utils/clean-object.mjs +1 -2
- package/esm2022/utils/coerce-value.mjs +5 -1
- package/fesm2022/taiga-ui-addon-doc-components.mjs +15 -11
- package/fesm2022/taiga-ui-addon-doc-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc-utils.mjs +4 -1
- package/fesm2022/taiga-ui-addon-doc-utils.mjs.map +1 -1
- package/package.json +6 -6
|
@@ -21,10 +21,11 @@ import * as i1$1 from '@angular/cdk/clipboard';
|
|
|
21
21
|
import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
|
|
22
22
|
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
23
23
|
import { TuiButton } from '@taiga-ui/core/components/button';
|
|
24
|
+
import { TUI_COPY_TEXTS } from '@taiga-ui/kit';
|
|
24
25
|
import { Highlight } from 'ngx-highlightjs';
|
|
25
|
-
import { BehaviorSubject, Subject, switchMap, timer,
|
|
26
|
+
import { BehaviorSubject, Subject, map, switchMap, timer, startWith, skip, merge, ReplaySubject, switchAll, filter, mergeMap, take, debounceTime, combineLatest, fromEvent, of, distinctUntilChanged } from 'rxjs';
|
|
26
27
|
import { TUI_FALSE_HANDLER, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
|
|
27
|
-
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
|
|
28
|
+
import { TUI_COPY_TEXTS as TUI_COPY_TEXTS$1 } from '@taiga-ui/kit/tokens';
|
|
28
29
|
import { __decorate } from 'tslib';
|
|
29
30
|
import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
|
|
30
31
|
import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
|
|
@@ -237,6 +238,7 @@ class TuiDocCode {
|
|
|
237
238
|
this.isServer = isPlatformServer(inject(PLATFORM_ID));
|
|
238
239
|
this.markdownCodeProcessor = inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
|
|
239
240
|
this.copy$ = new Subject();
|
|
241
|
+
this.copyText = toSignal(inject(TUI_COPY_TEXTS).pipe(map(([copy]) => copy)));
|
|
240
242
|
this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
|
|
241
243
|
this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
|
|
242
244
|
this.filename = '';
|
|
@@ -248,14 +250,14 @@ class TuiDocCode {
|
|
|
248
250
|
return !!this.filename;
|
|
249
251
|
}
|
|
250
252
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor()\"\n class=\"t-code\"\n>\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button
|
|
253
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor()\"\n class=\"t-code\"\n>\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText()}}\n </button>\n <ng-content />\n </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
252
254
|
}
|
|
253
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCode, decorators: [{
|
|
254
256
|
type: Component,
|
|
255
257
|
args: [{ standalone: true, selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
256
258
|
'[style.visibility]': 'isServer ? "hidden" : "visible"',
|
|
257
259
|
'[class._has-filename]': 'hasFilename',
|
|
258
|
-
}, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor()\"\n class=\"t-code\"\n>\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button
|
|
260
|
+
}, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor()\"\n class=\"t-code\"\n>\n <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n <div class=\"t-code-actions\">\n <button\n tuiIconButton\n type=\"button\"\n appearance=\"outline-grayscale\"\n size=\"s\"\n class=\"t-copy-button\"\n [iconStart]=\"icon()\"\n [cdkCopyToClipboard]=\"content\"\n (click)=\"copy$.next()\"\n >\n {{ copyText()}}\n </button>\n <ng-content />\n </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
|
|
259
261
|
}], propDecorators: { filename: [{
|
|
260
262
|
type: Input
|
|
261
263
|
}], code: [{
|
|
@@ -266,7 +268,7 @@ const COPIED_TIMEOUT = 1500;
|
|
|
266
268
|
class TuiDocCopy {
|
|
267
269
|
constructor() {
|
|
268
270
|
this.copy$ = new Subject();
|
|
269
|
-
this.texts = toSignal(inject(TUI_COPY_TEXTS), {
|
|
271
|
+
this.texts = toSignal(inject(TUI_COPY_TEXTS$1), {
|
|
270
272
|
initialValue: ['', ''],
|
|
271
273
|
});
|
|
272
274
|
this.copied = toSignal(this.copy$.pipe(switchMap(() => timer(COPIED_TIMEOUT).pipe(map(TUI_FALSE_HANDLER), startWith(true)))), { initialValue: false });
|
|
@@ -787,7 +789,7 @@ class TuiDocExample {
|
|
|
787
789
|
this.clipboard = inject(Clipboard);
|
|
788
790
|
this.alerts = inject(TuiAlertService);
|
|
789
791
|
this.location = inject(WA_LOCATION);
|
|
790
|
-
this.copyTexts$ = inject(TUI_COPY_TEXTS);
|
|
792
|
+
this.copyTexts$ = inject(TUI_COPY_TEXTS$1);
|
|
791
793
|
this.processContent = inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR);
|
|
792
794
|
this.rawLoader$$ = new BehaviorSubject({});
|
|
793
795
|
this.lazyLoader$$ = new ReplaySubject(1);
|
|
@@ -832,7 +834,7 @@ class TuiDocExample {
|
|
|
832
834
|
.finally(() => this.loading.set(false));
|
|
833
835
|
}
|
|
834
836
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
835
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", content: "content", component: "component" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n <h2\n *ngIf=\"heading\"\n class=\"t-title\"\n >\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n <a\n *ngIf=\"id\"\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n</div>\n<h3\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n</h3>\n\n<div class=\"t-example\">\n <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n <div\n *ngIf=\"tabs.length > 1\"\n class=\"t-tabs-wrapper\"\n >\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <tui-loader\n *ngIf=\"processor() | tuiMapper: visible\"\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n </ng-container>\n\n <ng-template #defaultEditContent>\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </ng-template>\n </tui-loader>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n >\n <
|
|
837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", content: "content", component: "component" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n <h2\n *ngIf=\"heading\"\n class=\"t-title\"\n >\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n <a\n *ngIf=\"id\"\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n</div>\n<h3\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n</h3>\n\n<div class=\"t-example\">\n <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n <div\n *ngIf=\"tabs.length > 1\"\n class=\"t-tabs-wrapper\"\n >\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <tui-loader\n *ngIf=\"processor() | tuiMapper: visible\"\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n </ng-container>\n\n <ng-template #defaultEditContent>\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </ng-template>\n </tui-loader>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n >\n <section\n *ngIf=\"index === defaultTabIndex\"\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *polymorpheusOutlet=\"lazyComponent() as text\">\n {{ text }}\n </ng-container>\n </section>\n\n <tui-doc-code\n *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n [code]=\"code\"\n [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-container *ngFor=\"let action of codeActions\">\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n </ng-container>\n </tui-doc-code>\n </div>\n </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-1.6rem}.t-link:not(:hover):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-top:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:-webkit-min-content;inline-size:min-content;min-inline-size:20rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
836
838
|
}
|
|
837
839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
838
840
|
type: Component,
|
|
@@ -855,7 +857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
855
857
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
856
858
|
'[attr.id]': 'id',
|
|
857
859
|
'[class._fullsize]': 'fullsize',
|
|
858
|
-
}, template: "<div class=\"t-title-block\">\n <h2\n *ngIf=\"heading\"\n class=\"t-title\"\n >\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n <a\n *ngIf=\"id\"\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n</div>\n<h3\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n</h3>\n\n<div class=\"t-example\">\n <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n <div\n *ngIf=\"tabs.length > 1\"\n class=\"t-tabs-wrapper\"\n >\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <tui-loader\n *ngIf=\"processor() | tuiMapper: visible\"\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n </ng-container>\n\n <ng-template #defaultEditContent>\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </ng-template>\n </tui-loader>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n >\n <
|
|
860
|
+
}, template: "<div class=\"t-title-block\">\n <h2\n *ngIf=\"heading\"\n class=\"t-title\"\n >\n <span\n *polymorpheusOutlet=\"heading as text\"\n [textContent]=\"text\"\n ></span>\n </h2>\n <a\n *ngIf=\"id\"\n routerLink=\".\"\n routerLinkActive=\"t-link-active\"\n tuiLink\n type=\"button\"\n class=\"t-link\"\n [attr.title]=\"copy()\"\n [fragment]=\"id\"\n [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n (click)=\"copyExampleLink($event.currentTarget)\"\n >\n #\n </a>\n</div>\n<h3\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description as text\">\n {{ text }}\n </ng-container>\n</h3>\n\n<div class=\"t-example\">\n <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n <div\n *ngIf=\"tabs.length > 1\"\n class=\"t-tabs-wrapper\"\n >\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n type=\"button\"\n >\n <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n {{ text }}\n </ng-container>\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <tui-loader\n *ngIf=\"processor() | tuiMapper: visible\"\n size=\"xs\"\n class=\"t-code-editor\"\n [overlay]=\"true\"\n [showLoader]=\"loading()\"\n (click)=\"edit(processor())\"\n >\n <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n <ng-container *polymorpheusOutlet=\"content as editContent\">\n {{ editContent }}\n </ng-container>\n </ng-container>\n\n <ng-template #defaultEditContent>\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n type=\"button\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </ng-template>\n </tui-loader>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n >\n <section\n *ngIf=\"index === defaultTabIndex\"\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-content />\n <ng-container *polymorpheusOutlet=\"lazyComponent() as text\">\n {{ text }}\n </ng-container>\n </section>\n\n <tui-doc-code\n *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n [code]=\"code\"\n [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n >\n <ng-container *ngFor=\"let action of codeActions\">\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n </ng-container>\n </tui-doc-code>\n </div>\n </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-1.6rem}.t-link:not(:hover):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-top:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:-webkit-min-content;inline-size:min-content;min-inline-size:20rem}tui-doc-code{overflow:hidden}\n"] }]
|
|
859
861
|
}], propDecorators: { id: [{
|
|
860
862
|
type: Input
|
|
861
863
|
}], heading: [{
|
|
@@ -927,7 +929,7 @@ class TuiDocScrollIntoViewLink {
|
|
|
927
929
|
this.scroll$ = new ReplaySubject(1);
|
|
928
930
|
this.el = tuiInjectElement();
|
|
929
931
|
this.sub = inject(TUI_DOC_PAGE_LOADED)
|
|
930
|
-
.pipe(filter(Boolean), switchMap(() => this.scroll$), debounceTime(750, tuiZonefreeScheduler()), filter((shallWe) => shallWe && !!tuiGetElementObscures(this.el)), takeUntilDestroyed())
|
|
932
|
+
.pipe(filter(Boolean), take(1), switchMap(() => this.scroll$), debounceTime(750, tuiZonefreeScheduler()), filter((shallWe) => shallWe && !!tuiGetElementObscures(this.el)), takeUntilDestroyed())
|
|
931
933
|
.subscribe(() => this.el.scrollIntoView());
|
|
932
934
|
}
|
|
933
935
|
set tuiDocScrollIntoViewLink(shallWe) {
|
|
@@ -973,10 +975,12 @@ class TuiDocNavigation {
|
|
|
973
975
|
this.openActivePageGroup();
|
|
974
976
|
});
|
|
975
977
|
combineLatest([
|
|
976
|
-
this.router.events.pipe(filter((event) => event instanceof Scroll))
|
|
978
|
+
this.router.events.pipe(filter((event) => event instanceof Scroll), switchMap(({ anchor }) => 'onscrollend' in this.doc
|
|
979
|
+
? fromEvent(this.doc, 'scrollend').pipe(map(() => anchor))
|
|
980
|
+
: of(anchor))),
|
|
977
981
|
inject(NAVIGATION_TITLE).pipe(switchMap(() => readyToScroll$.pipe(filter(Boolean)))),
|
|
978
982
|
])
|
|
979
|
-
.pipe(take(1), map(([
|
|
983
|
+
.pipe(take(1), map(([anchor]) => anchor || ''), filter(Boolean), takeUntilDestroyed())
|
|
980
984
|
.subscribe((anchor) => this.navigateToAnchorLink(anchor));
|
|
981
985
|
}
|
|
982
986
|
get canOpen() {
|