@taiga-ui/addon-doc 3.21.0 → 3.22.0-dev.main-a08b721

package/bundles/taiga-ui-addon-doc.umd.js

@@ -583,14 +583,19 @@
         factory: function () { return "Source code"; },
     });
 
+    var TUI_DOC_URL_STATE_HANDLER = new i0.InjectionToken("[TUI_DOC_URL_STATE_HANDLER]", {
+        factory: function () { return String; },
+    });
+
     var MIN_WIDTH = 160;
     var TuiDocDemoComponent = /** @class */ (function () {
-        function TuiDocDemoComponent(isMobile, elementRef, locationRef, urlSerializer, texts) {
+        function TuiDocDemoComponent(isMobile, elementRef, locationRef, urlSerializer, texts, urlStateHandler) {
             this.isMobile = isMobile;
             this.elementRef = elementRef;
             this.locationRef = locationRef;
             this.urlSerializer = urlSerializer;
             this.texts = texts;
+            this.urlStateHandler = urlStateHandler;
             this.control = null;
             this.template = null;
             this.updateOnVariants = ['change', 'blur', 'submit'];
@@ -649,14 +654,14 @@
             configurable: true
         });
         TuiDocDemoComponent.prototype.updateUrl = function (tuiMode, sandboxWidth) {
-            var urlTree = this.getUrlTree();
-            var queryParams = urlTree.queryParams;
+            var tree = this.getUrlTree();
+            var queryParams = tree.queryParams;
             var modeParam = tuiMode ? { tuiMode: tuiMode } : {};
             var resizeParam = !Number.isNaN(sandboxWidth) ? { sandboxWidth: sandboxWidth } : {};
             delete queryParams.sandboxWidth;
             delete queryParams.tuiMode;
-            urlTree.queryParams = Object.assign(Object.assign(Object.assign({}, queryParams), modeParam), resizeParam);
-            this.locationRef.replaceState(String(urlTree));
+            tree.queryParams = Object.assign(Object.assign(Object.assign({}, queryParams), modeParam), resizeParam);
+            this.locationRef.go(this.urlStateHandler(tree));
         };
         TuiDocDemoComponent.prototype.createForm = function () {
             var _a = this, control = _a.control, updateOn = _a.updateOn;
@@ -669,7 +674,7 @@
         };
         return TuiDocDemoComponent;
     }());
-    TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i0.ElementRef }, { token: i4.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i0.ElementRef }, { token: i4.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }, { token: TUI_DOC_URL_STATE_HANDLER }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiDocDemoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" } }, providers: [
             i6.TuiDestroyService,
             {
@@ -711,6 +716,9 @@
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_DOC_DEMO_TEXTS]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_DOC_URL_STATE_HANDLER]
                         }] }];
         }, propDecorators: { resizeable: [{
                     type: i0.ViewChild,
@@ -857,11 +865,12 @@
     var SERIALIZED_SUFFIX = '$';
     // @bad TODO: refactor output and value sync
     var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
-        function TuiDocDocumentationPropertyConnectorDirective(template, locationRef, activatedRoute, urlSerializer) {
+        function TuiDocDocumentationPropertyConnectorDirective(template, locationRef, activatedRoute, urlSerializer, urlStateHandler) {
             this.template = template;
             this.locationRef = locationRef;
             this.activatedRoute = activatedRoute;
             this.urlSerializer = urlSerializer;
+            this.urlStateHandler = urlStateHandler;
             this.documentationPropertyName = '';
             this.documentationPropertyMode = null;
             this.documentationPropertyType = '';
@@ -941,11 +950,11 @@
             var suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
             var propName = this.documentationPropertyName + suffix;
             tree.queryParams = Object.assign(Object.assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
-            this.locationRef.go(String(tree));
+            this.locationRef.go(this.urlStateHandler(tree));
         };
         return TuiDocDocumentationPropertyConnectorDirective;
     }());
-    TuiDocDocumentationPropertyConnectorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, deps: [{ token: i0.TemplateRef }, { token: i4.Location }, { token: i6$1.ActivatedRoute }, { token: i6$1.UrlSerializer }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDocDocumentationPropertyConnectorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, deps: [{ token: i0.TemplateRef }, { token: i4.Location }, { token: i6$1.ActivatedRoute }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_URL_STATE_HANDLER }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDocDocumentationPropertyConnectorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDocumentationPropertyConnectorDirective, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, decorators: [{
                 type: i0.Directive,
@@ -966,6 +975,9 @@
                         }] }, { type: i6__namespace.UrlSerializer, decorators: [{
                             type: i0.Inject,
                             args: [i6$1.UrlSerializer]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_DOC_URL_STATE_HANDLER]
                         }] }];
         }, propDecorators: { documentationPropertyName: [{
                     type: i0.Input
@@ -1650,7 +1662,7 @@
         return TuiDocExampleComponent;
     }());
     TuiDocExampleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleComponent, deps: [{ token: i8.Clipboard }, { token: i2$1.TuiAlertService }, { token: common.LOCATION }, { token: i1.TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: i6.TUI_IS_CYPRESS }, { token: TUI_DOC_CODE_ACTIONS }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i4.Location }, { token: TUI_DOC_EXAMPLE_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0__namespace, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs : defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\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                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"files | tuiMapper : visible\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                type=\"button\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                Edit on {{ codeEditor!.name }}\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isCypress\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <section class=\"t-code-actions\">\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-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1__namespace.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1__namespace.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0__namespace, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs : defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\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                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"files | tuiMapper : visible\"\n                size=\"xs\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\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                        tuiButton\n                        appearance=\"flat\"\n                        size=\"s\"\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            [class.t-content_animated]=\"!isCypress\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <section class=\"t-code-actions\">\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-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1__namespace.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1__namespace.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: i2__namespace$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1729,7 +1741,8 @@
             TuiDocCopyModule,
             TuiDocCodeModule,
             i6$2.PolymorpheusModule,
-            i6.TuiMapperPipeModule], exports: [TuiDocExampleComponent,
+            i6.TuiMapperPipeModule,
+            i2$1.TuiLoaderModule], exports: [TuiDocExampleComponent,
             TuiDocExampleGetTabsPipe,
             TuiDocExampleCapitalizePipe] });
     TuiDocExampleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleModule, imports: [[
@@ -1741,6 +1754,7 @@
                 TuiDocCodeModule,
                 i6$2.PolymorpheusModule,
                 i6.TuiMapperPipeModule,
+                i2$1.TuiLoaderModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleModule, decorators: [{
                 type: i0.NgModule,
@@ -1754,6 +1768,7 @@
                             TuiDocCodeModule,
                             i6$2.PolymorpheusModule,
                             i6.TuiMapperPipeModule,
+                            i2$1.TuiLoaderModule,
                         ],
                         declarations: [
                             TuiDocExampleComponent,
@@ -1916,12 +1931,62 @@
         return newStr;
     }
 
+    function tuiToFlatMapPages(pages) {
+        var e_1, _b, e_2, _c;
+        var map = new Map();
+        try {
+            for (var pages_1 = __values(pages), pages_1_1 = pages_1.next(); !pages_1_1.done; pages_1_1 = pages_1.next()) {
+                var page = pages_1_1.value;
+                if ("subPages" in page) {
+                    try {
+                        for (var _d = (e_2 = void 0, __values(page.subPages)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                            var subPage = _e.value;
+                            tuiPageCheckUniqueTitle(subPage, map);
+                            map.set(subPage.title, subPage);
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+                else {
+                    tuiPageCheckUniqueTitle(page, map);
+                    map.set(page.title, page);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (pages_1_1 && !pages_1_1.done && (_b = pages_1.return)) _b.call(pages_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return map;
+    }
+    function tuiPageCheckUniqueTitle(page, map) {
+        var _a;
+        if (map.has(page.title) && ((_a = map.get(page.title)) === null || _a === void 0 ? void 0 : _a.route) !== page.route) {
+            console.error("Title for page should be unique for prevent inconsistent page names", page, "<== Collisions between ==>", map.get(page.title));
+        }
+    }
+
     /**
      * Documentation pages
      */
     var TUI_DOC_PAGES = new i0.InjectionToken("[TUI_DOC_PAGES]", {
         factory: function () { return []; },
     });
+    var TUI_DOC_MAP_PAGES = new i0.InjectionToken("[TUI_DOC_MAP_PAGES]", {
+        factory: function () {
+            var pages = i0.inject(TUI_DOC_PAGES);
+            return tuiToFlatMapPages(pages);
+        },
+    });
 
     /**
      * Page title prefix
@@ -1953,7 +2018,7 @@
                     return data;
                 }), operators.map(function (_a) {
                     var title = _a.title;
-                    return titlePrefix + title;
+                    return "" + titlePrefix + title;
                 }), operators.takeUntil(destroy$));
             },
         },
@@ -2652,20 +2717,12 @@
             this.seeAlso = [];
         }
         TuiDocSeeAlsoComponent.prototype.getRouterLink = function (pageTitle) {
-            for (var i = 0; i < this.pages.length; i++) {
-                var page = this.pages
-                    .map(function (page) { return ('subPages' in page ? page.subPages : [page]); })
-                    .reduce(function (pages, subPages) { return __spreadArray(__spreadArray([], __read(pages)), __read(subPages)); }, [])
-                    .find(function (page) { return page.title === pageTitle; });
-                if (page === null || page === void 0 ? void 0 : page.route) {
-                    return page.route;
-                }
-            }
-            return '';
+            var _a, _b;
+            return (_b = (_a = this.pages.get(pageTitle)) === null || _a === void 0 ? void 0 : _a.route) !== null && _b !== void 0 ? _b : '';
         };
         return TuiDocSeeAlsoComponent;
     }());
-    TuiDocSeeAlsoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, deps: [{ token: TUI_DOC_SEE_ALSO_TEXT }, { token: TUI_DOC_PAGES }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocSeeAlsoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, deps: [{ token: TUI_DOC_SEE_ALSO_TEXT }, { token: TUI_DOC_MAP_PAGES }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiDocSeeAlsoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0__namespace, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [routerLink]=\"getRouterLink(item)\"\n        [innerText]=\"item\"\n    ></a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, decorators: [{
                 type: i0.Component,
@@ -2679,9 +2736,9 @@
             return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_DOC_SEE_ALSO_TEXT]
-                        }] }, { type: undefined, decorators: [{
+                        }] }, { type: Map, decorators: [{
                             type: i0.Inject,
-                            args: [TUI_DOC_PAGES]
+                            args: [TUI_DOC_MAP_PAGES]
                         }] }];
         }, propDecorators: { seeAlso: [{
                     type: i0.Input
@@ -2917,6 +2974,7 @@
     exports.TUI_DOC_EXAMPLE_TEXTS = TUI_DOC_EXAMPLE_TEXTS;
     exports.TUI_DOC_EXCLUDED_PROPERTIES = TUI_DOC_EXCLUDED_PROPERTIES;
     exports.TUI_DOC_LOGO = TUI_DOC_LOGO;
+    exports.TUI_DOC_MAP_PAGES = TUI_DOC_MAP_PAGES;
     exports.TUI_DOC_MENU_TEXT = TUI_DOC_MENU_TEXT;
     exports.TUI_DOC_PAGES = TUI_DOC_PAGES;
     exports.TUI_DOC_PAGE_LOADED = TUI_DOC_PAGE_LOADED;
@@ -2928,6 +2986,7 @@
     exports.TUI_DOC_SOURCE_CODE = TUI_DOC_SOURCE_CODE;
     exports.TUI_DOC_SOURCE_CODE_TEXT = TUI_DOC_SOURCE_CODE_TEXT;
     exports.TUI_DOC_TITLE = TUI_DOC_TITLE;
+    exports.TUI_DOC_URL_STATE_HANDLER = TUI_DOC_URL_STATE_HANDLER;
     exports.TUI_EXAMPLE_PRIMARY_FILE_NAME = TUI_EXAMPLE_PRIMARY_FILE_NAME;
     exports.TuiAddonDocModule = TuiAddonDocModule;
     exports.TuiDocCodeComponent = TuiDocCodeComponent;