@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>
96 lines (91 loc) • 10 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, QueryList, ChangeDetectorRef, ViewChildren, ContentChildren } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
import { NgFor } from '@angular/common';
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 { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
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: "19.0.3", ngImport: i0, type: NgDocTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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: "19.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
}] } });
let NgDocTabGroupComponent = class NgDocTabGroupComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.tabElements = new QueryList();
this.tabs = new QueryList();
}
ngAfterContentInit() {
this.tabs.changes.pipe(startWith(this.tabs), untilDestroyed(this)).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), untilDestroyed(this))
.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: "19.0.3", ngImport: i0, type: NgDocTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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\t<ng-doc-selection></ng-doc-selection>\n\t<div\n\t\tclass=\"ng-doc-tab\"\n\t\t[class.selected]=\"tab === selectedTab\"\n\t\t*ngFor=\"let tab of tabs\"\n\t\t(click)=\"selectTab(tab)\"\n\t\t[ngDocSelectionOrigin]=\"tab === selectedTab\"\n\t\t#headerTab>\n\t\t<div class=\"ng-doc-tab-text\">\n\t\t\t<ng-container *polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n\t\t</div>\n\t</div>\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n\t<ng-doc-smooth-resize [trigger]=\"selectedTab?.content ?? ''\">\n\t\t<div *polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\" @tabFadeAnimation>\n\t\t\t{{ text }}\n\t\t</div>\n\t</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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }); }
};
NgDocTabGroupComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [ChangeDetectorRef])
], NgDocTabGroupComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocTabGroupComponent, decorators: [{
type: Component,
args: [{ animations: [tabFadeAnimation], selector: 'ng-doc-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocSelectionHostDirective,
NgDocSelectionComponent,
NgFor,
NgDocSelectionOriginDirective,
PolymorpheusModule,
NgDocSmoothResizeComponent,
], template: "<div class=\"ng-doc-tabs-wrapper\" ngDocSelectionHost>\n\t<ng-doc-selection></ng-doc-selection>\n\t<div\n\t\tclass=\"ng-doc-tab\"\n\t\t[class.selected]=\"tab === selectedTab\"\n\t\t*ngFor=\"let tab of tabs\"\n\t\t(click)=\"selectTab(tab)\"\n\t\t[ngDocSelectionOrigin]=\"tab === selectedTab\"\n\t\t#headerTab>\n\t\t<div class=\"ng-doc-tab-text\">\n\t\t\t<ng-container *polymorpheusOutlet=\"tab.label; context: {}\">{{ tab.label }}</ng-container>\n\t\t</div>\n\t</div>\n</div>\n\n<div class=\"ng-doc-body-wrapper\">\n\t<ng-doc-smooth-resize [trigger]=\"selectedTab?.content ?? ''\">\n\t\t<div *polymorpheusOutlet=\"selectedTab?.content ?? '' as text; context: {}\" @tabFadeAnimation>\n\t\t\t{{ text }}\n\t\t</div>\n\t</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: () => [{ type: i0.ChangeDetectorRef }], 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