npm - @taiga-ui/addon-doc - Versions diffs - 4.48.0 → 4.49.0-canary.5696ef0 - Mend

@taiga-ui/addon-doc 4.48.0 → 4.49.0-canary.5696ef0

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.

Files changed (88) hide show

package/esm2022/utils/to-flat-map-pages.mjs CHANGED Viewed

@@ -19,4 +19,4 @@ export function tuiToFlatMapPages(pages) {
     });
     return map;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG8tZmxhdC1tYXAtcGFnZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1kb2MvdXRpbHMvdG8tZmxhdC1tYXAtcGFnZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0EsU0FBUyxXQUFXLENBQUMsSUFBcUIsRUFBRSxHQUFpQztJQUN6RSxJQUFJLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLEtBQUssS0FBSyxJQUFJLENBQUMsS0FBSyxFQUFFO1FBQ2xFLE9BQU8sQ0FBQyxLQUFLLENBQ1QscUVBQXFFLEVBQ3JFLElBQUksRUFDSiw0QkFBNEIsRUFDNUIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQ3RCLENBQUM7S0FDTDtBQUNMLENBQUM7QUFFRCxNQUFNLFVBQVUsaUJBQWlCLENBQUMsS0FBdUI7SUFDckQsTUFBTSxHQUFHLEdBQUcsSUFBSSxHQUFHLEVBQTJCLENBQUM7SUFFL0MsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1FBQ25CLElBQUksVUFBVSxJQUFJLElBQUksRUFBRTtZQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO2dCQUM5QixTQUFTLElBQUksV0FBVyxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztnQkFDdkMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQ3BDLENBQUMsQ0FBQyxDQUFDO1NBQ047YUFBTTtZQUNILFNBQVMsSUFBSSxXQUFXLENBQUMsSUFBSSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ3BDLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQztTQUM3QjtJQUNMLENBQUMsQ0FBQyxDQUFDO0lBRUgsT0FBTyxHQUFHLENBQUM7QUFDZixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8vIDxyZWZlcmVuY2UgdHlwZXM9XCJAdGFpZ2EtdWkvdHNjb25maWcvbmctZGV2LW1vZGVcIiAvPlxuaW1wb3J0IHR5cGUge1R1aURvY1JvdXRlUGFnZSwgVHVpRG9jUm91dGVQYWdlc30gZnJvbSAnQHRhaWdhLXVpL2FkZG9uLWRvYy90eXBlcyc7XG5cbmZ1bmN0aW9uIGFzc2VydFRpdGxlKHBhZ2U6IFR1aURvY1JvdXRlUGFnZSwgbWFwOiBNYXA8c3RyaW5nLCBUdWlEb2NSb3V0ZVBhZ2U+KTogdm9pZCB7XG4gICAgaWYgKG1hcC5oYXMocGFnZS50aXRsZSkgJiYgbWFwLmdldChwYWdlLnRpdGxlKT8ucm91dGUgIT09IHBhZ2Uucm91dGUpIHtcbiAgICAgICAgY29uc29sZS5lcnJvcihcbiAgICAgICAgICAgICdUaXRsZSBmb3IgcGFnZSBzaG91bGQgYmUgdW5pcXVlIGZvciBwcmV2ZW50IGluY29uc2lzdGVudCBwYWdlIG5hbWVzJyxcbiAgICAgICAgICAgIHBhZ2UsXG4gICAgICAgICAgICAnPD09IENvbGxpc2lvbnMgYmV0d2VlbiA9PT4nLFxuICAgICAgICAgICAgbWFwLmdldChwYWdlLnRpdGxlKSxcbiAgICAgICAgKTtcbiAgICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiB0dWlUb0ZsYXRNYXBQYWdlcyhwYWdlczogVHVpRG9jUm91dGVQYWdlcyk6IE1hcDxzdHJpbmcsIFR1aURvY1JvdXRlUGFnZT4ge1xuICAgIGNvbnN0IG1hcCA9IG5ldyBNYXA8c3RyaW5nLCBUdWlEb2NSb3V0ZVBhZ2U+KCk7XG5cbiAgICBwYWdlcy5mb3JFYWNoKChwYWdlKSA9PiB7XG4gICAgICAgIGlmICgnc3ViUGFnZXMnIGluIHBhZ2UpIHtcbiAgICAgICAgICAgIHBhZ2Uuc3ViUGFnZXMuZm9yRWFjaCgoc3ViUGFnZSkgPT4ge1xuICAgICAgICAgICAgICAgIG5nRGV2TW9kZSAmJiBhc3NlcnRUaXRsZShzdWJQYWdlLCBtYXApO1xuICAgICAgICAgICAgICAgIG1hcC5zZXQoc3ViUGFnZS50aXRsZSwgc3ViUGFnZSk7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIG5nRGV2TW9kZSAmJiBhc3NlcnRUaXRsZShwYWdlLCBtYXApO1xuICAgICAgICAgICAgbWFwLnNldChwYWdlLnRpdGxlLCBwYWdlKTtcbiAgICAgICAgfVxuICAgIH0pO1xuXG4gICAgcmV0dXJuIG1hcDtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG8tZmxhdC1tYXAtcGFnZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1kb2MvdXRpbHMvdG8tZmxhdC1tYXAtcGFnZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0EsU0FBUyxXQUFXLENBQUMsSUFBcUIsRUFBRSxHQUFpQztJQUN6RSxJQUFJLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLEtBQUssS0FBSyxJQUFJLENBQUMsS0FBSyxFQUFFO1FBQ2xFLE9BQU8sQ0FBQyxLQUFLLENBQ1QscUVBQXFFLEVBQ3JFLElBQUksRUFDSiw0QkFBNEIsRUFDNUIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQ3RCLENBQUM7S0FDTDtBQUNMLENBQUM7QUFFRCxNQUFNLFVBQVUsaUJBQWlCLENBQUMsS0FBdUI7SUFDckQsTUFBTSxHQUFHLEdBQUcsSUFBSSxHQUFHLEVBQTJCLENBQUM7SUFFL0MsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1FBQ25CLElBQUksVUFBVSxJQUFJLElBQUksRUFBRTtZQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO2dCQUM5QixTQUFTLElBQUksV0FBVyxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztnQkFDdkMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQ3BDLENBQUMsQ0FBQyxDQUFDO1NBQ047YUFBTTtZQUNILFNBQVMsSUFBSSxXQUFXLENBQUMsSUFBSSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ3BDLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQztTQUM3QjtJQUNMLENBQUMsQ0FBQyxDQUFDO0lBRUgsT0FBTyxHQUFHLENBQUM7QUFDZixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8vIDxyZWZlcmVuY2UgdHlwZXM9XCJAdGFpZ2EtdWkvdHNjb25maWcvbmctZGV2LW1vZGVcIiAvPlxuaW1wb3J0IHt0eXBlIFR1aURvY1JvdXRlUGFnZSwgdHlwZSBUdWlEb2NSb3V0ZVBhZ2VzfSBmcm9tICdAdGFpZ2EtdWkvYWRkb24tZG9jL3R5cGVzJztcblxuZnVuY3Rpb24gYXNzZXJ0VGl0bGUocGFnZTogVHVpRG9jUm91dGVQYWdlLCBtYXA6IE1hcDxzdHJpbmcsIFR1aURvY1JvdXRlUGFnZT4pOiB2b2lkIHtcbiAgICBpZiAobWFwLmhhcyhwYWdlLnRpdGxlKSAmJiBtYXAuZ2V0KHBhZ2UudGl0bGUpPy5yb3V0ZSAhPT0gcGFnZS5yb3V0ZSkge1xuICAgICAgICBjb25zb2xlLmVycm9yKFxuICAgICAgICAgICAgJ1RpdGxlIGZvciBwYWdlIHNob3VsZCBiZSB1bmlxdWUgZm9yIHByZXZlbnQgaW5jb25zaXN0ZW50IHBhZ2UgbmFtZXMnLFxuICAgICAgICAgICAgcGFnZSxcbiAgICAgICAgICAgICc8PT0gQ29sbGlzaW9ucyBiZXR3ZWVuID09PicsXG4gICAgICAgICAgICBtYXAuZ2V0KHBhZ2UudGl0bGUpLFxuICAgICAgICApO1xuICAgIH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHR1aVRvRmxhdE1hcFBhZ2VzKHBhZ2VzOiBUdWlEb2NSb3V0ZVBhZ2VzKTogTWFwPHN0cmluZywgVHVpRG9jUm91dGVQYWdlPiB7XG4gICAgY29uc3QgbWFwID0gbmV3IE1hcDxzdHJpbmcsIFR1aURvY1JvdXRlUGFnZT4oKTtcblxuICAgIHBhZ2VzLmZvckVhY2goKHBhZ2UpID0+IHtcbiAgICAgICAgaWYgKCdzdWJQYWdlcycgaW4gcGFnZSkge1xuICAgICAgICAgICAgcGFnZS5zdWJQYWdlcy5mb3JFYWNoKChzdWJQYWdlKSA9PiB7XG4gICAgICAgICAgICAgICAgbmdEZXZNb2RlICYmIGFzc2VydFRpdGxlKHN1YlBhZ2UsIG1hcCk7XG4gICAgICAgICAgICAgICAgbWFwLnNldChzdWJQYWdlLnRpdGxlLCBzdWJQYWdlKTtcbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgbmdEZXZNb2RlICYmIGFzc2VydFRpdGxlKHBhZ2UsIG1hcCk7XG4gICAgICAgICAgICBtYXAuc2V0KHBhZ2UudGl0bGUsIHBhZ2UpO1xuICAgICAgICB9XG4gICAgfSk7XG5cbiAgICByZXR1cm4gbWFwO1xufVxuIl19

package/fesm2022/taiga-ui-addon-doc-components.mjs CHANGED Viewed

@@ -867,7 +867,7 @@ class TuiDocExample {
             .finally(() => this.loading.set(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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        [relativeTo]=\"route.firstChild ?? route\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"processor() | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"loading()\"\n                (click)=\"edit(processor())\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n\n            <button\n                *ngIf=\"fullscreenEnabled\"\n                appearance=\"flat\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                (click)=\"fullscreen = !fullscreen\"\n            >\n                Fullscreen\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <section\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *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-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-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:21rem}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: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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        [relativeTo]=\"route.firstChild ?? route\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"processor() | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"loading()\"\n                (click)=\"edit(processor())\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n\n            <button\n                *ngIf=\"fullscreenEnabled\"\n                appearance=\"flat\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                (click)=\"fullscreen = !fullscreen\"\n            >\n                Fullscreen\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <section\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *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-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-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:21rem}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: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, decorators: [{
             type: Component,
@@ -889,7 +889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'id',
                         '[class._fullsize]': 'fullsize',
-                    }, template: "<div class=\"t-title-block\">\n    <h2\n        *ngIf=\"heading\"\n        class=\"t-title\"\n    >\n        <span\n            *polymorpheusOutlet=\"heading as text\"\n            [textContent]=\"text\"\n        ></span>\n    </h2>\n    <a\n        *ngIf=\"id\"\n        routerLink=\".\"\n        routerLinkActive=\"t-link-active\"\n        tuiLink\n        type=\"button\"\n        class=\"t-link\"\n        [attr.title]=\"copy()\"\n        [fragment]=\"id\"\n        [relativeTo]=\"route.firstChild ?? route\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"processor() | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"loading()\"\n                (click)=\"edit(processor())\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n\n            <button\n                *ngIf=\"fullscreenEnabled\"\n                appearance=\"flat\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                (click)=\"fullscreen = !fullscreen\"\n            >\n                Fullscreen\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <section\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *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-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-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:21rem}tui-doc-code{overflow:hidden}\n"] }]
+                    }, template: "<div class=\"t-title-block\">\n    <h2\n        *ngIf=\"heading\"\n        class=\"t-title\"\n    >\n        <span\n            *polymorpheusOutlet=\"heading as text\"\n            [textContent]=\"text\"\n        ></span>\n    </h2>\n    <a\n        *ngIf=\"id\"\n        routerLink=\".\"\n        routerLinkActive=\"t-link-active\"\n        tuiLink\n        type=\"button\"\n        class=\"t-link\"\n        [attr.title]=\"copy()\"\n        [fragment]=\"id\"\n        [relativeTo]=\"route.firstChild ?? route\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"processor() | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"loading()\"\n                (click)=\"edit(processor())\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n\n            <button\n                *ngIf=\"fullscreenEnabled\"\n                appearance=\"flat\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                (click)=\"fullscreen = !fullscreen\"\n            >\n                Fullscreen\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <section\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *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-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-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:21rem}tui-doc-code{overflow:hidden}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], heading: [{