@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
92 lines (87 loc) • 9.69 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, QueryList, DestroyRef, ContentChildren, ViewChildren } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tabFadeAnimation } from '@ng-doc/ui-kit/animations';
import { NgDocSelectionHostDirective, NgDocSelectionComponent, NgDocSelectionOriginDirective } from '@ng-doc/ui-kit/components/selection';
import { NgDocSmoothResizeComponent } from '@ng-doc/ui-kit/components/smooth-resize';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { startWith } from 'rxjs/operators';
class NgDocTabComponent {
constructor() {
this.label = '';
this.id = 0;
/** Expander content */
this.content = '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: NgDocTabComponent, isStandalone: true, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: { label: "label", id: "id", content: "content" }, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocTabComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-tab, a[ng-doc-tab]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true }]
}], propDecorators: { label: [{
type: Input
}], id: [{
type: Input
}], content: [{
type: Input
}] } });
class NgDocTabGroupComponent {
constructor() {
this.changeDetectorRef = inject(ChangeDetectorRef);
this.tabElements = new QueryList();
this.tabs = new QueryList();
this.destroyRef = inject(DestroyRef);
}
ngAfterContentInit() {
this.tabs.changes
.pipe(startWith(this.tabs), takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
const tabToOpen = this.openedTab
? this.tabs.find((tab) => tab.id === this.openedTab)
: this.tabs.get(0);
tabToOpen && this.selectTab(tabToOpen);
this.changeDetectorRef.markForCheck();
});
}
ngAfterViewInit() {
this.tabElements.changes
.pipe(startWith(this.tabElements), takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.changeDetectorRef.detectChanges());
}
get selectedIndex() {
return this.selectedTab ? this.tabs.toArray().indexOf(this.selectedTab) : -1;
}
get selectedHeaderTab() {
return this.selectedTab ? this.tabElements.get(this.selectedIndex) ?? null : null;
}
selectTab(tab) {
this.selectedTab = tab;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocTabGroupComponent, isStandalone: true, selector: "ng-doc-tab-group", inputs: { openedTab: "openedTab" }, queries: [{ propertyName: "tabs", predicate: NgDocTabComponent }], viewQueries: [{ propertyName: "tabElements", predicate: ["headerTab"], descendants: true }], ngImport: i0, template: "<div class=\"ng-doc-tabs-wrapper\" ngDocSelectionHost>\n <ng-doc-selection></ng-doc-selection>\n @for (tab of tabs; track tab) {\n <div\n class=\"ng-doc-tab\"\n [class.selected]=\"tab === selectedTab\"\n (click)=\"selectTab(tab)\"\n [ngDocSelectionOrigin]=\"tab === selectedTab\"\n #headerTab>\n <div class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n </div>\n </div>\n }\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n <ng-doc-smooth-resize [trigger]=\"selectedTab?.content ?? ''\">\n <div *polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\" @tabFadeAnimation>\n {{ text }}\n </div>\n </ng-doc-smooth-resize>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-wrapper{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;width:100%;display:inline-flex;overflow-x:auto;line-height:18px;font-size:14px;flex-shrink:0;background:var(--ng-doc-tab-group-tabs-background)}:host .ng-doc-tabs-wrapper .ng-doc-tab{position:relative;padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap}:host .ng-doc-tabs-wrapper .ng-doc-tab .ng-doc-tab-text{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;--ng-doc-font-size: 13px;--ng-doc-font-weight: 500}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden;border-top:1px solid var(--ng-doc-border-color)}\n"], dependencies: [{ kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: NgDocSmoothResizeComponent, selector: "ng-doc-smooth-resize", inputs: ["trigger", "animateOpacity"] }], animations: [tabFadeAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocTabGroupComponent, decorators: [{
type: Component,
args: [{ animations: [tabFadeAnimation], selector: 'ng-doc-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocSelectionHostDirective,
NgDocSelectionComponent,
NgDocSelectionOriginDirective,
PolymorpheusModule,
NgDocSmoothResizeComponent,
], template: "<div class=\"ng-doc-tabs-wrapper\" ngDocSelectionHost>\n <ng-doc-selection></ng-doc-selection>\n @for (tab of tabs; track tab) {\n <div\n class=\"ng-doc-tab\"\n [class.selected]=\"tab === selectedTab\"\n (click)=\"selectTab(tab)\"\n [ngDocSelectionOrigin]=\"tab === selectedTab\"\n #headerTab>\n <div class=\"ng-doc-tab-text\">\n <ng-container *polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n </div>\n </div>\n }\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n <ng-doc-smooth-resize [trigger]=\"selectedTab?.content ?? ''\">\n <div *polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\" @tabFadeAnimation>\n {{ text }}\n </div>\n </ng-doc-smooth-resize>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background:var(--ng-doc-tab-group-header-background, var(--ng-doc-tab-group-background));border-radius:var(--ng-doc-tab-group-border-radius);border:var(--ng-doc-tab-group-border);overflow:hidden}:host .ng-doc-tabs-wrapper{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;width:100%;display:inline-flex;overflow-x:auto;line-height:18px;font-size:14px;flex-shrink:0;background:var(--ng-doc-tab-group-tabs-background)}:host .ng-doc-tabs-wrapper .ng-doc-tab{position:relative;padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);cursor:pointer;white-space:nowrap}:host .ng-doc-tabs-wrapper .ng-doc-tab .ng-doc-tab-text{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);position:relative;--ng-doc-font-size: 13px;--ng-doc-font-weight: 500}:host .ng-doc-body-wrapper{position:relative;background-color:var(--ng-doc-tab-group-background);height:100%;overflow:hidden;border-top:1px solid var(--ng-doc-border-color)}\n"] }]
}], ctorParameters: () => [], propDecorators: { openedTab: [{
type: Input
}], tabElements: [{
type: ViewChildren,
args: ['headerTab']
}], tabs: [{
type: ContentChildren,
args: [NgDocTabComponent]
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocTabComponent, NgDocTabGroupComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-tab-group.mjs.map