@taiga-ui/addon-doc 2.37.1 → 2.40.0

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

@@ -1156,9 +1156,9 @@
         TuiDocExampleComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-example',
-                template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n    <span polymorpheus-outlet [content]=\"heading\"></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\"\n></h4>\n\n<div *ngIf=\"processor$ | async as content\" class=\"t-example\">\n    <ng-container *ngIf=\"content | 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 *tuiTab tuiTab>{{tab}}</button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                (click)=\"codeEditor.open(componentName, id || '',  content)\"\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: content[tabs[activeItemIndex]] || '' }\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div automation-id=\"tui-doc-example\" class=\"t-demo\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #codeSection let-code>\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 *ngIf=\"heading\" class=\"t-title\">\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 *ngIf=\"processor$ | async as content\" class=\"t-example\">\n    <ng-container *ngIf=\"content | 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 *tuiTab tuiTab>{{tab}}</button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                (click)=\"codeEditor.open(componentName, id || '',  content)\"\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: content[tabs[activeItemIndex]] || '' }\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div automation-id=\"tui-doc-example\" class=\"t-demo\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #codeSection let-code>\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",
                 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-description:first-letter,.t-title:first-letter{text-transform:capitalize}.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:6px 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:6px 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}"]
             }),
             __param(0, core.Attribute('id')),
             __param(1, core.Inject(clipboard.Clipboard)),
@@ -1174,6 +1174,18 @@
         return TuiDocExampleComponent;
     }());
 
+    var TuiDocExampleCapitalizePipe = /** @class */ (function () {
+        function TuiDocExampleCapitalizePipe() {
+        }
+        TuiDocExampleCapitalizePipe.prototype.transform = function (content) {
+            return typeof content === 'string' ? core$1.capitalizeFirstLetter(content) : content;
+        };
+        TuiDocExampleCapitalizePipe = __decorate([
+            core.Pipe({ name: 'tuiDocExampleCapitalize' })
+        ], TuiDocExampleCapitalizePipe);
+        return TuiDocExampleCapitalizePipe;
+    }());
+
     var TuiDocExampleGetTabsPipe = /** @class */ (function () {
         function TuiDocExampleGetTabsPipe() {
         }
@@ -1200,8 +1212,16 @@
                     TuiDocCodeModule,
                     ngPolymorpheus.PolymorpheusModule,
                 ],
-                declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
-                exports: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+                declarations: [
+                    TuiDocExampleComponent,
+                    TuiDocExampleGetTabsPipe,
+                    TuiDocExampleCapitalizePipe,
+                ],
+                exports: [
+                    TuiDocExampleComponent,
+                    TuiDocExampleGetTabsPipe,
+                    TuiDocExampleCapitalizePipe,
+                ],
             })
         ], TuiDocExampleModule);
         return TuiDocExampleModule;
@@ -2086,22 +2106,23 @@
     exports.ɵa = TuiInputOpacityModule;
     exports.ɵb = TuiInputOpacityDirective;
     exports.ɵc = TuiDocExampleGetTabsPipe;
-    exports.ɵd = TuiDocHeaderModule;
-    exports.ɵe = NAVIGATION_TITLE;
-    exports.ɵf = NAVIGATION_LABELS;
-    exports.ɵg = NAVIGATION_ITEMS;
-    exports.ɵh = NAVIGATION_PROVIDERS;
-    exports.ɵi = titleProviderFactory;
-    exports.ɵj = labelsProviderFactory;
-    exports.ɵk = itemsProviderFactory;
-    exports.ɵl = TuiDocHeaderComponent;
-    exports.ɵm = PAGE_SEE_ALSO;
-    exports.ɵn = PAGE_PROVIDERS;
-    exports.ɵo = seeAlsoProviderFactory;
-    exports.ɵp = TuiDocSeeAlsoModule;
-    exports.ɵq = TuiDocSeeAlsoComponent;
-    exports.ɵr = TuiDocSourceCodeModule;
-    exports.ɵs = TuiDocSourceCodeComponent;
+    exports.ɵd = TuiDocExampleCapitalizePipe;
+    exports.ɵe = TuiDocHeaderModule;
+    exports.ɵf = NAVIGATION_TITLE;
+    exports.ɵg = NAVIGATION_LABELS;
+    exports.ɵh = NAVIGATION_ITEMS;
+    exports.ɵi = NAVIGATION_PROVIDERS;
+    exports.ɵj = titleProviderFactory;
+    exports.ɵk = labelsProviderFactory;
+    exports.ɵl = itemsProviderFactory;
+    exports.ɵm = TuiDocHeaderComponent;
+    exports.ɵn = PAGE_SEE_ALSO;
+    exports.ɵo = PAGE_PROVIDERS;
+    exports.ɵp = seeAlsoProviderFactory;
+    exports.ɵq = TuiDocSeeAlsoModule;
+    exports.ɵr = TuiDocSeeAlsoComponent;
+    exports.ɵs = TuiDocSourceCodeModule;
+    exports.ɵt = TuiDocSourceCodeComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });