@taiga-ui/addon-doc 2.51.1 → 2.52.0

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

@@ -1084,6 +1084,10 @@
         return TuiDocDocumentationModule;
     }());
 
+    var TUI_DOC_CODE_ACTIONS = new core.InjectionToken('Code actions for the opened tab with code example', {
+        factory: function () { return ''; },
+    });
+
     var TUI_DOC_CODE_EDITOR = new core.InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
 
     var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken('Processes content in example', { factory: function () { return rxjs.identity; } });
@@ -1134,7 +1138,7 @@
     // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
     // @dynamic
     var TuiDocExampleComponent = /** @class */ (function () {
-        function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress) {
+        function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions) {
             var _this = this;
             this.id = id;
             this.clipboard = clipboard;
@@ -1145,6 +1149,7 @@
             this.codeEditor = codeEditor;
             this.processContent = processContent;
             this.isCypress = isCypress;
+            this.codeActions = codeActions;
             this.rawLoader$$ = new rxjs.BehaviorSubject({});
             this.heading = '';
             this.description = '';
@@ -1195,7 +1200,8 @@
             { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
             { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
             { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] },
-            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_CYPRESS,] }] }
+            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_CYPRESS,] }] },
+            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_CODE_ACTIONS,] }] }
         ]; };
         __decorate([
             core.Input()
@@ -1212,9 +1218,9 @@
         TuiDocExampleComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-example',
-                template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        polymorpheus-outlet\n        [content]=\"heading | tuiDocExampleCapitalize\"\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    polymorpheus-outlet\n    class=\"t-description\"\n    [content]=\"description | tuiDocExampleCapitalize\"\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                        *tuiTab\n                        tuiTab\n                    >\n                        {{tab}}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\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 *ngIf=\"index === defaultTabIndex; else anotherTab\">\n                <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n            </ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    *ngTemplateOutlet=\"codeSection; context: { $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    <tui-doc-copy\n        class=\"t-copy-code\"\n        [cdkCopyToClipboard]=\"code\"\n    ></tui-doc-copy>\n    <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n",
+                template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        polymorpheus-outlet\n        [content]=\"heading | tuiDocExampleCapitalize\"\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    polymorpheus-outlet\n    class=\"t-description\"\n    [content]=\"description | tuiDocExampleCapitalize\"\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                        *tuiTab\n                        tuiTab\n                    >\n                        {{tab}}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\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 *ngIf=\"index === defaultTabIndex; else anotherTab\">\n                <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n            </ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    *ngTemplateOutlet=\"codeSection; context: { $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            <div\n                polymorpheus-outlet\n                [content]=\"action\"\n                [context]=\"{$implicit: code}\"\n            ></div>\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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                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:400;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:0.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-copy-code{position:absolute;top:4.375rem;right:1rem}.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}"]
+                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:400;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:0.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}"]
             }),
             __param(0, core.Attribute('id')),
             __param(1, core.Inject(clipboard.Clipboard)),
@@ -1225,7 +1231,8 @@
             __param(6, core.Optional()),
             __param(6, core.Inject(TUI_DOC_CODE_EDITOR)),
             __param(7, core.Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR)),
-            __param(8, core.Inject(cdk.TUI_IS_CYPRESS))
+            __param(8, core.Inject(cdk.TUI_IS_CYPRESS)),
+            __param(9, core.Inject(TUI_DOC_CODE_ACTIONS))
         ], TuiDocExampleComponent);
         return TuiDocExampleComponent;
     }());
@@ -1334,16 +1341,19 @@
         return TuiDocMainComponent;
     }());
 
+    var TUI_DOC_PAGE_LOADED = new core.InjectionToken('[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)', { factory: function () { return rxjs.defer(function () { return rxjs.timer(200).pipe(operators.switchMapTo(rxjs.of(true))); }); } });
+
     /**
      * @deprecated: use {@link TuiScrollIntoViewLinkDirective}
      * TODO: remove in v3.0
      */
     var ScrollIntoViewDirective = /** @class */ (function () {
-        function ScrollIntoViewDirective(destroy$, _a) {
+        function ScrollIntoViewDirective(destroy$, _a, readyToScroll$) {
             var nativeElement = _a.nativeElement;
-            this.scroll$ = new rxjs.Subject();
-            this.scroll$
-                .pipe(operators.debounceTime(750), operators.filter(function (shallWe) { return shallWe && !!cdk.getElementObscurers(nativeElement); }), operators.takeUntil(destroy$))
+            this.readyToScroll$ = readyToScroll$;
+            this.scroll$ = new rxjs.ReplaySubject(1);
+            this.readyToScroll$
+                .pipe(operators.filter(Boolean), operators.switchMapTo(this.scroll$), operators.debounceTime(750), operators.filter(function (shallWe) { return shallWe && !!cdk.getElementObscurers(nativeElement); }), operators.takeUntil(destroy$))
                 .subscribe(function () {
                 nativeElement.scrollIntoView();
             });
@@ -1357,7 +1367,8 @@
         });
         ScrollIntoViewDirective.ctorParameters = function () { return [
             { type: cdk.TuiDestroyService, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }] },
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TUI_DOC_PAGE_LOADED,] }] }
         ]; };
         __decorate([
             core.Input()
@@ -1370,7 +1381,8 @@
             // eslint-disable-next-line @typescript-eslint/naming-convention
             ,
             __param(0, core.Inject(cdk.TuiDestroyService)),
-            __param(1, core.Inject(core.ElementRef))
+            __param(1, core.Inject(core.ElementRef)),
+            __param(2, core.Inject(TUI_DOC_PAGE_LOADED))
         ], ScrollIntoViewDirective);
         return ScrollIntoViewDirective;
     }());
@@ -1521,10 +1533,9 @@
         ]);
     }
 
-    var SCROLL_INTO_VIEW_DELAY = 200;
     // @dynamic
     var TuiDocNavigationComponent = /** @class */ (function () {
-        function TuiDocNavigationComponent(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
+        function TuiDocNavigationComponent(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute, destroy$, readyToScroll$) {
             var _this = this;
             this.documentRef = documentRef;
             this.mode = mode;
@@ -1534,6 +1545,8 @@
             this.searchText = searchText;
             this.router = router;
             this.activatedRoute = activatedRoute;
+            this.destroy$ = destroy$;
+            this.readyToScroll$ = readyToScroll$;
             this.menuOpen = false;
             this.search = '';
             this.open = false;
@@ -1618,9 +1631,9 @@
         };
         TuiDocNavigationComponent.prototype.handleAnchorLink = function (hash) {
             var _this = this;
-            setTimeout(function () {
-                _this.navigateToAnchorLink(hash);
-            }, SCROLL_INTO_VIEW_DELAY);
+            this.readyToScroll$
+                .pipe(operators.filter(Boolean), operators.take(1), operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.navigateToAnchorLink(hash); });
         };
         TuiDocNavigationComponent.prototype.openActivePageGroup = function () {
             var _this = this;
@@ -1665,7 +1678,9 @@
             { type: undefined, decorators: [{ type: core.Inject, args: [NAVIGATION_ITEMS,] }] },
             { type: String, decorators: [{ type: core.Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
             { type: router.Router, decorators: [{ type: core.Inject, args: [router.Router,] }] },
-            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] }
+            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TUI_DOC_PAGE_LOADED,] }] }
         ]; };
         __decorate([
             core.HostBinding('class._open')
@@ -1695,7 +1710,9 @@
             __param(7, core.Inject(NAVIGATION_ITEMS)),
             __param(8, core.Inject(TUI_DOC_SEARCH_TEXT)),
             __param(9, core.Inject(router.Router)),
-            __param(10, core.Inject(router.ActivatedRoute))
+            __param(10, core.Inject(router.ActivatedRoute)),
+            __param(11, core.Inject(cdk.TuiDestroyService)),
+            __param(12, core.Inject(TUI_DOC_PAGE_LOADED))
         ], TuiDocNavigationComponent);
         return TuiDocNavigationComponent;
     }());
@@ -2158,6 +2175,7 @@
     exports.EXAMPLE_TEXTS = EXAMPLE_TEXTS;
     exports.ScrollIntoViewDirective = ScrollIntoViewDirective;
     exports.ScrollIntoViewModule = ScrollIntoViewModule;
+    exports.TUI_DOC_CODE_ACTIONS = TUI_DOC_CODE_ACTIONS;
     exports.TUI_DOC_CODE_EDITOR = TUI_DOC_CODE_EDITOR;
     exports.TUI_DOC_DEFAULT_TABS = TUI_DOC_DEFAULT_TABS;
     exports.TUI_DOC_DEMO_TEXTS = TUI_DOC_DEMO_TEXTS;
@@ -2167,6 +2185,7 @@
     exports.TUI_DOC_LOGO = TUI_DOC_LOGO;
     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;
     exports.TUI_DOC_RUSSIAN = TUI_DOC_RUSSIAN;
     exports.TUI_DOC_SEARCH_TEXT = TUI_DOC_SEARCH_TEXT;
     exports.TUI_DOC_SEE_ALSO = TUI_DOC_SEE_ALSO;