@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>
51 lines (47 loc) • 4.64 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, ChangeDetectorRef, QueryList, DestroyRef, ContentChildren, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NgDocOptionComponent } from '@ng-doc/ui-kit/components/option';
import { NgDocTextComponent } from '@ng-doc/ui-kit/components/text';
import { startWith } from 'rxjs/operators';
class NgDocOptionGroupHeaderDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocOptionGroupHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocOptionGroupHeaderDirective, isStandalone: true, selector: "[ngDocOptionGroupHeader]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocOptionGroupHeaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocOptionGroupHeader]',
standalone: true,
}]
}] });
class NgDocOptionGroupComponent {
constructor() {
this.changeDetectorRef = inject(ChangeDetectorRef);
this.options = new QueryList();
this.hasHeader = false;
this.destroyRef = inject(DestroyRef);
}
ngAfterContentInit() {
this.options.changes
.pipe(startWith(this.options), takeUntilDestroyed(this.destroyRef))
.subscribe((options) => {
this.hasHeader = !!options.length;
this.changeDetectorRef.markForCheck();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocOptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocOptionGroupComponent, isStandalone: true, selector: "ng-doc-option-group", queries: [{ propertyName: "options", predicate: NgDocOptionComponent, descendants: true }], ngImport: i0, template: "<div class=\"ng-doc-option-group-wrapper\">\n @if (hasHeader) {\n <div class=\"ng-doc-option-group-header\" ng-doc-text>\n <ng-content select=\"[ngDocOptionGroupHeader]\"></ng-content>\n </div>\n }\n <div class=\"ng-doc-option-group\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}.ng-doc-option-group-header{position:sticky;top:0;display:flex;background-color:var(--ng-doc-base-1);padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);z-index:1;--ng-doc-font-size: 13px;--ng-doc-font-weight: 700;--ng-doc-font-line-height: 18px;--ng-doc-text: var(--ng-doc-base-9)}.ng-doc-option-group ::ng-deep ng-doc-option .ng-doc-option-wrapper{padding-left:calc(var(--ng-doc-base-gutter) * 2)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocOptionGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-option-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocTextComponent], template: "<div class=\"ng-doc-option-group-wrapper\">\n @if (hasHeader) {\n <div class=\"ng-doc-option-group-header\" ng-doc-text>\n <ng-content select=\"[ngDocOptionGroupHeader]\"></ng-content>\n </div>\n }\n <div class=\"ng-doc-option-group\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}.ng-doc-option-group-header{position:sticky;top:0;display:flex;background-color:var(--ng-doc-base-1);padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);z-index:1;--ng-doc-font-size: 13px;--ng-doc-font-weight: 700;--ng-doc-font-line-height: 18px;--ng-doc-text: var(--ng-doc-base-9)}.ng-doc-option-group ::ng-deep ng-doc-option .ng-doc-option-wrapper{padding-left:calc(var(--ng-doc-base-gutter) * 2)}\n"] }]
}], ctorParameters: () => [], propDecorators: { options: [{
type: ContentChildren,
args: [NgDocOptionComponent, { descendants: true }]
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocOptionGroupComponent, NgDocOptionGroupHeaderDirective };
//# sourceMappingURL=ng-doc-ui-kit-components-option-group.mjs.map