@taiga-ui/layout
Version:
A package with Taiga UI layout components
59 lines • 12.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, computed, ContentChild, inject, Input, Output, signal, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAsDataListHost, TuiDataList } from '@taiga-ui/core/components/data-list';
import { TuiExpand } from '@taiga-ui/core/components/expand';
import { TuiDropdownDirective, TuiDropdownHover, TuiDropdownOpen, TuiDropdownPositionSided, } from '@taiga-ui/core/directives/dropdown';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { skip } from 'rxjs';
import { TuiAsideComponent } from './aside.component';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/directives/dropdown";
import * as i2 from "@taiga-ui/core/components/data-list";
import * as i3 from "@taiga-ui/core/components/expand";
class TuiAsideGroupComponent {
constructor() {
this.aside = inject(TuiAsideComponent);
this.open = signal(false);
this.template = null;
this.expanded = computed(() => this.aside.expanded() && this.open());
this.binding = tuiDirectiveBinding(TuiDropdownDirective, 'tuiDropdown', computed(() => (this.aside.expanded() ? null : this.datalist)));
this.openChange = toObservable(this.open).pipe(skip(1));
this.size = 's';
}
set openSetter(open) {
this.toggle(open);
}
toggle(open = !this.open()) {
this.open.set(open && this.aside.expanded());
this.chevron?.chevron.set(this.open());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAsideGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAsideGroupComponent, isStandalone: true, selector: "tui-aside-group", inputs: { openSetter: ["open", "openSetter"] }, outputs: { openChange: "openChange" }, providers: [tuiAsDataListHost(TuiAsideGroupComponent)], queries: [{ propertyName: "chevron", first: true, predicate: TuiChevron, descendants: true, static: true }, { propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "datalist", first: true, predicate: ["datalist"], descendants: true, static: true }], hostDirectives: [{ directive: i1.TuiDropdownDirective }, { directive: i1.TuiDropdownHover }, { directive: i1.TuiDropdownPositionSided }, { directive: i1.TuiDropdownOpen }], ngImport: i0, template: "<div\n #host\n (click)=\"toggle()\"\n>\n <ng-content />\n</div>\n<tui-expand [expanded]=\"expanded()\">\n <ng-container *polymorpheusOutlet=\"template\" />\n</tui-expand>\n<ng-template #datalist>\n <tui-data-list>\n <tui-opt-group [label]=\"host.textContent\">\n <ng-container *polymorpheusOutlet=\"template\" />\n </tui-opt-group>\n </tui-data-list>\n</ng-template>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "component", type: i3.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiAsideGroupComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAsideGroupComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-aside-group', imports: [PolymorpheusOutlet, TuiDataList, TuiExpand], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsDataListHost(TuiAsideGroupComponent)], hostDirectives: [
TuiDropdownDirective,
TuiDropdownHover,
TuiDropdownPositionSided,
TuiDropdownOpen,
], template: "<div\n #host\n (click)=\"toggle()\"\n>\n <ng-content />\n</div>\n<tui-expand [expanded]=\"expanded()\">\n <ng-container *polymorpheusOutlet=\"template\" />\n</tui-expand>\n<ng-template #datalist>\n <tui-data-list>\n <tui-opt-group [label]=\"host.textContent\">\n <ng-container *polymorpheusOutlet=\"template\" />\n </tui-opt-group>\n </tui-data-list>\n</ng-template>\n" }]
}], propDecorators: { datalist: [{
type: ViewChild,
args: ['datalist', { static: true }]
}], chevron: [{
type: ContentChild,
args: [TuiChevron, { static: true }]
}], template: [{
type: ContentChild,
args: [TemplateRef]
}], openChange: [{
type: Output
}], openSetter: [{
type: Input,
args: ['open']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNpZGUtZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGF5b3V0L2NvbXBvbmVudHMvbmF2aWdhdGlvbi9hc2lkZS1ncm91cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvY29tcG9uZW50cy9uYXZpZ2F0aW9uL2FzaWRlLWdyb3VwLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsUUFBUSxFQUNSLFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLEVBQ04sV0FBVyxFQUNYLFNBQVMsRUFDVCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBRXRFLE9BQU8sRUFBQyxpQkFBaUIsRUFBRSxXQUFXLEVBQUMsTUFBTSxxQ0FBcUMsQ0FBQztBQUNuRixPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDM0QsT0FBTyxFQUNILG9CQUFvQixFQUNwQixnQkFBZ0IsRUFDaEIsZUFBZSxFQUNmLHdCQUF3QixHQUMzQixNQUFNLG9DQUFvQyxDQUFDO0FBQzVDLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUU1RCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUMxRCxPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBRTFCLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLG1CQUFtQixDQUFDOzs7OztBQUVwRCxNQWVhLHNCQUFzQjtJQWZuQztRQXNCcUIsVUFBSyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQ2xDLFNBQUksR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFHbkIsYUFBUSxHQUE0QixJQUFJLENBQUM7UUFFekMsYUFBUSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBQ2hFLFlBQU8sR0FBRyxtQkFBbUIsQ0FDNUMsb0JBQW9CLEVBQ3BCLGFBQWEsRUFDYixRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUNqRSxDQUFDO1FBR2MsZUFBVSxHQUFHLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRW5ELFNBQUksR0FBRyxHQUFHLENBQUM7S0FXOUI7SUFURyxJQUNXLFVBQVUsQ0FBQyxJQUFhO1FBQy9CLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVTLE1BQU0sQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFO1FBQ2hDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7UUFDN0MsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQzNDLENBQUM7K0dBakNRLHNCQUFzQjttR0FBdEIsc0JBQXNCLHFKQVJwQixDQUFDLGlCQUFpQixDQUFDLHNCQUFzQixDQUFDLENBQUMsK0RBWXhDLFVBQVUseUZBTVYsV0FBVyxpVkN4RDdCLDZaQWdCQSw0Q0RrQmMsa0JBQWtCOztTQVluQixzQkFBc0I7NEZBQXRCLHNCQUFzQjtrQkFmbEMsU0FBUztpQ0FDTSxJQUFJLFlBQ04saUJBQWlCLFdBQ2xCLENBQUMsa0JBQWtCLEVBQUUsV0FBVyxFQUFFLFNBQVMsQ0FBQyxpQkFFdEMsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxDQUFDLGlCQUFpQix3QkFBd0IsQ0FBQyxrQkFDdEM7d0JBQ1osb0JBQW9CO3dCQUNwQixnQkFBZ0I7d0JBQ2hCLHdCQUF3Qjt3QkFDeEIsZUFBZTtxQkFDbEI7OEJBSWdCLFFBQVE7c0JBRHhCLFNBQVM7dUJBQUMsVUFBVSxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQztnQkFJcEIsT0FBTztzQkFEdkIsWUFBWTt1QkFBQyxVQUFVLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQU9yQixRQUFRO3NCQUQxQixZQUFZO3VCQUFDLFdBQVc7Z0JBV1QsVUFBVTtzQkFEekIsTUFBTTtnQkFNSSxVQUFVO3NCQURwQixLQUFLO3VCQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBjb21wdXRlZCxcbiAgICBDb250ZW50Q2hpbGQsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBzaWduYWwsXG4gICAgVGVtcGxhdGVSZWYsXG4gICAgVmlld0NoaWxkLFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dG9PYnNlcnZhYmxlfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge3R1aURpcmVjdGl2ZUJpbmRpbmd9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQgdHlwZSB7VHVpRGF0YUxpc3RIb3N0fSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2RhdGEtbGlzdCc7XG5pbXBvcnQge3R1aUFzRGF0YUxpc3RIb3N0LCBUdWlEYXRhTGlzdH0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9kYXRhLWxpc3QnO1xuaW1wb3J0IHtUdWlFeHBhbmR9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvZXhwYW5kJztcbmltcG9ydCB7XG4gICAgVHVpRHJvcGRvd25EaXJlY3RpdmUsXG4gICAgVHVpRHJvcGRvd25Ib3ZlcixcbiAgICBUdWlEcm9wZG93bk9wZW4sXG4gICAgVHVpRHJvcGRvd25Qb3NpdGlvblNpZGVkLFxufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2Ryb3Bkb3duJztcbmltcG9ydCB7VHVpQ2hldnJvbn0gZnJvbSAnQHRhaWdhLXVpL2tpdC9kaXJlY3RpdmVzL2NoZXZyb24nO1xuaW1wb3J0IHR5cGUge1BvbHltb3JwaGV1c0NvbnRlbnR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuaW1wb3J0IHtQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuaW1wb3J0IHtza2lwfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUdWlBc2lkZUNvbXBvbmVudH0gZnJvbSAnLi9hc2lkZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWFzaWRlLWdyb3VwJyxcbiAgICBpbXBvcnRzOiBbUG9seW1vcnBoZXVzT3V0bGV0LCBUdWlEYXRhTGlzdCwgVHVpRXhwYW5kXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYXNpZGUtZ3JvdXAudGVtcGxhdGUuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt0dWlBc0RhdGFMaXN0SG9zdChUdWlBc2lkZUdyb3VwQ29tcG9uZW50KV0sXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtcbiAgICAgICAgVHVpRHJvcGRvd25EaXJlY3RpdmUsXG4gICAgICAgIFR1aURyb3Bkb3duSG92ZXIsXG4gICAgICAgIFR1aURyb3Bkb3duUG9zaXRpb25TaWRlZCxcbiAgICAgICAgVHVpRHJvcGRvd25PcGVuLFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFzaWRlR3JvdXBDb21wb25lbnQgaW1wbGVtZW50cyBUdWlEYXRhTGlzdEhvc3Q8dW5rbm93bj4ge1xuICAgIEBWaWV3Q2hpbGQoJ2RhdGFsaXN0Jywge3N0YXRpYzogdHJ1ZX0pXG4gICAgcHJpdmF0ZSByZWFkb25seSBkYXRhbGlzdDogUG9seW1vcnBoZXVzQ29udGVudDtcblxuICAgIEBDb250ZW50Q2hpbGQoVHVpQ2hldnJvbiwge3N0YXRpYzogdHJ1ZX0pXG4gICAgcHJpdmF0ZSByZWFkb25seSBjaGV2cm9uPzogVHVpQ2hldnJvbjtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgYXNpZGUgPSBpbmplY3QoVHVpQXNpZGVDb21wb25lbnQpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3BlbiA9IHNpZ25hbChmYWxzZSk7XG5cbiAgICBAQ29udGVudENoaWxkKFRlbXBsYXRlUmVmKVxuICAgIHByb3RlY3RlZCByZWFkb25seSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IG51bGwgPSBudWxsO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGV4cGFuZGVkID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5hc2lkZS5leHBhbmRlZCgpICYmIHRoaXMub3BlbigpKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgYmluZGluZyA9IHR1aURpcmVjdGl2ZUJpbmRpbmcoXG4gICAgICAgIFR1aURyb3Bkb3duRGlyZWN0aXZlLFxuICAgICAgICAndHVpRHJvcGRvd24nLFxuICAgICAgICBjb21wdXRlZCgoKSA9PiAodGhpcy5hc2lkZS5leHBhbmRlZCgpID8gbnVsbCA6IHRoaXMuZGF0YWxpc3QpKSxcbiAgICApO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IG9wZW5DaGFuZ2UgPSB0b09ic2VydmFibGUodGhpcy5vcGVuKS5waXBlKHNraXAoMSkpO1xuXG4gICAgcHVibGljIHJlYWRvbmx5IHNpemUgPSAncyc7XG5cbiAgICBASW5wdXQoJ29wZW4nKVxuICAgIHB1YmxpYyBzZXQgb3BlblNldHRlcihvcGVuOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMudG9nZ2xlKG9wZW4pO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCB0b2dnbGUob3BlbiA9ICF0aGlzLm9wZW4oKSk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wZW4uc2V0KG9wZW4gJiYgdGhpcy5hc2lkZS5leHBhbmRlZCgpKTtcbiAgICAgICAgdGhpcy5jaGV2cm9uPy5jaGV2cm9uLnNldCh0aGlzLm9wZW4oKSk7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgICNob3N0XG4gICAgKGNsaWNrKT1cInRvZ2dsZSgpXCJcbj5cbiAgICA8bmctY29udGVudCAvPlxuPC9kaXY+XG48dHVpLWV4cGFuZCBbZXhwYW5kZWRdPVwiZXhwYW5kZWQoKVwiPlxuICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cInRlbXBsYXRlXCIgLz5cbjwvdHVpLWV4cGFuZD5cbjxuZy10ZW1wbGF0ZSAjZGF0YWxpc3Q+XG4gICAgPHR1aS1kYXRhLWxpc3Q+XG4gICAgICAgIDx0dWktb3B0LWdyb3VwIFtsYWJlbF09XCJob3N0LnRleHRDb250ZW50XCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpwb2x5bW9ycGhldXNPdXRsZXQ9XCJ0ZW1wbGF0ZVwiIC8+XG4gICAgICAgIDwvdHVpLW9wdC1ncm91cD5cbiAgICA8L3R1aS1kYXRhLWxpc3Q+XG48L25nLXRlbXBsYXRlPlxuIl19