@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>
69 lines (65 loc) • 6.65 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocDataListComponent } from '@ng-doc/ui-kit/components/data-list';
import { NgDocListComponent } from '@ng-doc/ui-kit/components/list';
import { NgDocOptionComponent } from '@ng-doc/ui-kit/components/option';
import { NgDocOptionGroupComponent, NgDocOptionGroupHeaderDirective } from '@ng-doc/ui-kit/components/option-group';
import { NgDocTextComponent } from '@ng-doc/ui-kit/components/text';
import { NG_DOC_DEFAULT_STRINGIFY } from '@ng-doc/ui-kit/constants';
import { ngDocMakePure } from '@ng-doc/ui-kit/decorators';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
class NgDocDataListGroupComponent extends NgDocDataListComponent {
constructor() {
super(...arguments);
this.groupContent = ({ $implicit, }) => NG_DOC_DEFAULT_STRINGIFY($implicit);
this.groups = new Map();
this.groupItems = [];
}
getGroupContext($implicit) {
return { $implicit };
}
ngOnChanges({ items, itemGroupFn }) {
if (items || itemGroupFn) {
this.groups = new Map();
this.items?.forEach((item) => {
if (this.itemGroupFn) {
const itemGroup = this.itemGroupFn(item);
const itemsList = this.groups.get(itemGroup) || [];
itemsList.push(item);
this.groups.set(this.itemGroupFn(item), itemsList);
}
});
this.groupItems = Array.from(this.groups.keys());
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocDataListGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocDataListGroupComponent, isStandalone: true, selector: "ng-doc-data-list-group", inputs: { itemGroupFn: "itemGroupFn", groupContent: "groupContent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-doc-list>\n @if (items && items.length) {\n @for (group of groupItems; track group) {\n <ng-doc-option-group>\n <span\n *polymorpheusOutlet=\"groupContent as groupText; context: getGroupContext(group)\"\n ngDocOptionGroupHeader>\n {{ groupText }}\n </span>\n @for (item of groups.get(group); track trackByFn($index, item)) {\n <ng-doc-option [value]=\"defineValueFn(item)\" [disabled]=\"itemDisabledFn(item)\">\n <ng-container *polymorpheusOutlet=\"itemContent as text; context: getContext(item)\">\n {{ text }}\n </ng-container>\n </ng-doc-option>\n }\n </ng-doc-option-group>\n }\n } @else {\n <div class=\"ng-doc-empty-message\" ng-doc-text>\n @if (emptyContent) {\n <ng-container *polymorpheusOutlet=\"emptyContent as text\"> {{ text }} </ng-container>\n }\n </div>\n }\n</ng-doc-list>\n", styles: [":host{display:block;max-height:var(--ng-doc-list-size)}ng-doc-option-group:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}.ng-doc-empty-message{padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);--ng-doc-font-size: 13px;--ng-doc-line-height: 22px}\n"], dependencies: [{ kind: "component", type: NgDocListComponent, selector: "ng-doc-list" }, { kind: "component", type: NgDocOptionGroupComponent, selector: "ng-doc-option-group" }, { kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: NgDocOptionGroupHeaderDirective, selector: "[ngDocOptionGroupHeader]" }, { kind: "component", type: NgDocOptionComponent, selector: "ng-doc-option" }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
ngDocMakePure,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", Object)
], NgDocDataListGroupComponent.prototype, "getGroupContext", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocDataListGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-data-list-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocListComponent,
NgDocOptionGroupComponent,
PolymorpheusModule,
NgDocOptionGroupHeaderDirective,
NgDocOptionComponent,
NgDocTextComponent,
], template: "<ng-doc-list>\n @if (items && items.length) {\n @for (group of groupItems; track group) {\n <ng-doc-option-group>\n <span\n *polymorpheusOutlet=\"groupContent as groupText; context: getGroupContext(group)\"\n ngDocOptionGroupHeader>\n {{ groupText }}\n </span>\n @for (item of groups.get(group); track trackByFn($index, item)) {\n <ng-doc-option [value]=\"defineValueFn(item)\" [disabled]=\"itemDisabledFn(item)\">\n <ng-container *polymorpheusOutlet=\"itemContent as text; context: getContext(item)\">\n {{ text }}\n </ng-container>\n </ng-doc-option>\n }\n </ng-doc-option-group>\n }\n } @else {\n <div class=\"ng-doc-empty-message\" ng-doc-text>\n @if (emptyContent) {\n <ng-container *polymorpheusOutlet=\"emptyContent as text\"> {{ text }} </ng-container>\n }\n </div>\n }\n</ng-doc-list>\n", styles: [":host{display:block;max-height:var(--ng-doc-list-size)}ng-doc-option-group:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}.ng-doc-empty-message{padding:var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);--ng-doc-font-size: 13px;--ng-doc-line-height: 22px}\n"] }]
}], propDecorators: { itemGroupFn: [{
type: Input
}], groupContent: [{
type: Input
}], getGroupContext: [] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocDataListGroupComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-data-list-group.mjs.map