@taiga-ui/addon-doc 3.25.0-dev.main-165117e → 3.26.0

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.
@@ -1288,6 +1288,7 @@
1288
1288
  var TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
1289
1289
  codeEditorVisibilityHandler: function (files) { return Boolean(files[interfaces.TUI_EXAMPLE_PRIMARY_FILE_NAME.TS] &&
1290
1290
  files[interfaces.TUI_EXAMPLE_PRIMARY_FILE_NAME.HTML]); },
1291
+ tabTitles: new Map(),
1291
1292
  };
1292
1293
  /**
1293
1294
  * Default parameters for DocExample component
@@ -1350,8 +1351,6 @@
1350
1351
  this.options = options;
1351
1352
  this.rawLoader$$ = new i9.BehaviorSubject({});
1352
1353
  this.id = null;
1353
- this.heading = '';
1354
- this.description = '';
1355
1354
  this.componentName = this.location.pathname.slice(1);
1356
1355
  this.defaultTabIndex = 0;
1357
1356
  this.defaultTab = this.texts[this.defaultTabIndex];
@@ -1371,6 +1370,9 @@
1371
1370
  enumerable: false,
1372
1371
  configurable: true
1373
1372
  });
1373
+ TuiDocExampleComponent.prototype.getTabTitle = function (fileName) {
1374
+ return this.options.tabTitles.get(fileName) || fileName;
1375
+ };
1374
1376
  TuiDocExampleComponent.prototype.copyExampleLink = function () {
1375
1377
  var hashPosition = this.location.href.indexOf('#');
1376
1378
  var currentUrl = hashPosition > -1
@@ -1401,7 +1403,7 @@
1401
1403
  return TuiDocExampleComponent;
1402
1404
  }());
1403
1405
  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: tokens.TUI_DOC_EXAMPLE_TEXTS }, { token: tokens.TUI_DOC_CODE_EDITOR, optional: true }, { token: tokens.TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: i6.TUI_IS_CYPRESS }, { token: tokens.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 });
1404
- 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 #0000001a}: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 });
1406
+ 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 <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=\"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 #0000001a}: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 });
1405
1407
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleComponent, decorators: [{
1406
1408
  type: i0.Component,
1407
1409
  args: [{