@taiga-ui/addon-doc 4.39.2 → 4.40.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.
|
@@ -75,7 +75,7 @@ class TuiDocExample {
|
|
|
75
75
|
.finally(() => this.loading.set(false));
|
|
76
76
|
}
|
|
77
77
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
78
|
-
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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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:
|
|
78
|
+
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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
79
79
|
}
|
|
80
80
|
export { TuiDocExample };
|
|
81
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
@@ -98,7 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
98
98
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
99
99
|
'[attr.id]': 'id',
|
|
100
100
|
'[class._fullsize]': 'fullsize',
|
|
101
|
-
}, 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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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:
|
|
101
|
+
}, 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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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"] }]
|
|
102
102
|
}], propDecorators: { id: [{
|
|
103
103
|
type: Input
|
|
104
104
|
}], heading: [{
|
|
@@ -863,7 +863,7 @@ class TuiDocExample {
|
|
|
863
863
|
.finally(() => this.loading.set(false));
|
|
864
864
|
}
|
|
865
865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
866
|
-
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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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:
|
|
866
|
+
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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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 }); }
|
|
867
867
|
}
|
|
868
868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, decorators: [{
|
|
869
869
|
type: Component,
|
|
@@ -885,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
885
885
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
886
886
|
'[attr.id]': 'id',
|
|
887
887
|
'[class._fullsize]': 'fullsize',
|
|
888
|
-
}, 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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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:
|
|
888
|
+
}, 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 [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-top:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top: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-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-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-top: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-top:.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:1.5rem}@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"] }]
|
|
889
889
|
}], propDecorators: { id: [{
|
|
890
890
|
type: Input
|
|
891
891
|
}], heading: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/addon-doc",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.40.0",
|
|
4
4
|
"description": "Taiga UI based library for developing documentation portals for Angular libraries.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
"@angular/forms": ">=16.0.0",
|
|
21
21
|
"@angular/router": ">=16.0.0",
|
|
22
22
|
"@ng-web-apis/common": "^4.12.0",
|
|
23
|
-
"@taiga-ui/addon-mobile": "^4.
|
|
24
|
-
"@taiga-ui/cdk": "^4.
|
|
25
|
-
"@taiga-ui/core": "^4.
|
|
26
|
-
"@taiga-ui/kit": "^4.
|
|
27
|
-
"@taiga-ui/legacy": "^4.
|
|
23
|
+
"@taiga-ui/addon-mobile": "^4.40.0",
|
|
24
|
+
"@taiga-ui/cdk": "^4.40.0",
|
|
25
|
+
"@taiga-ui/core": "^4.40.0",
|
|
26
|
+
"@taiga-ui/kit": "^4.40.0",
|
|
27
|
+
"@taiga-ui/legacy": "^4.40.0",
|
|
28
28
|
"@taiga-ui/polymorpheus": "^4.9.0",
|
|
29
29
|
"markdown-it": "^14.1.0",
|
|
30
30
|
"ngx-highlightjs": "^10.0.0"
|
|
@@ -47,18 +47,18 @@
|
|
|
47
47
|
"esm": "./esm2022/components/taiga-ui-addon-doc-components.mjs",
|
|
48
48
|
"default": "./fesm2022/taiga-ui-addon-doc-components.mjs"
|
|
49
49
|
},
|
|
50
|
-
"./services": {
|
|
51
|
-
"types": "./services/index.d.ts",
|
|
52
|
-
"esm2022": "./esm2022/services/taiga-ui-addon-doc-services.mjs",
|
|
53
|
-
"esm": "./esm2022/services/taiga-ui-addon-doc-services.mjs",
|
|
54
|
-
"default": "./fesm2022/taiga-ui-addon-doc-services.mjs"
|
|
55
|
-
},
|
|
56
50
|
"./directives": {
|
|
57
51
|
"types": "./directives/index.d.ts",
|
|
58
52
|
"esm2022": "./esm2022/directives/taiga-ui-addon-doc-directives.mjs",
|
|
59
53
|
"esm": "./esm2022/directives/taiga-ui-addon-doc-directives.mjs",
|
|
60
54
|
"default": "./fesm2022/taiga-ui-addon-doc-directives.mjs"
|
|
61
55
|
},
|
|
56
|
+
"./services": {
|
|
57
|
+
"types": "./services/index.d.ts",
|
|
58
|
+
"esm2022": "./esm2022/services/taiga-ui-addon-doc-services.mjs",
|
|
59
|
+
"esm": "./esm2022/services/taiga-ui-addon-doc-services.mjs",
|
|
60
|
+
"default": "./fesm2022/taiga-ui-addon-doc-services.mjs"
|
|
61
|
+
},
|
|
62
62
|
"./tokens": {
|
|
63
63
|
"types": "./tokens/index.d.ts",
|
|
64
64
|
"esm2022": "./esm2022/tokens/taiga-ui-addon-doc-tokens.mjs",
|