@taiga-ui/layout
Version:
A package with Taiga UI layout components
59 lines • 12.4 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNpZGUtZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGF5b3V0L2NvbXBvbmVudHMvbmF2aWdhdGlvbi9hc2lkZS1ncm91cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9sYXlvdXQvY29tcG9uZW50cy9uYXZpZ2F0aW9uL2FzaWRlLWdyb3VwLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsUUFBUSxFQUNSLFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLEVBQ04sV0FBVyxFQUNYLFNBQVMsRUFDVCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQ3RFLE9BQU8sRUFDSCxpQkFBaUIsRUFDakIsV0FBVyxHQUVkLE1BQU0scUNBQXFDLENBQUM7QUFDN0MsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQzNELE9BQU8sRUFDSCxvQkFBb0IsRUFDcEIsZ0JBQWdCLEVBQ2hCLGVBQWUsRUFDZix3QkFBd0IsR0FDM0IsTUFBTSxvQ0FBb0MsQ0FBQztBQUM1QyxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDNUQsT0FBTyxFQUEyQixrQkFBa0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQ3BGLE9BQU8sRUFBQyxJQUFJLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFMUIsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sbUJBQW1CLENBQUM7Ozs7O0FBRXBELE1BZWEsc0JBQXNCO0lBZm5DO1FBc0JxQixVQUFLLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFDbEMsU0FBSSxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUduQixhQUFRLEdBQTRCLElBQUksQ0FBQztRQUV6QyxhQUFRLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7UUFDaEUsWUFBTyxHQUFHLG1CQUFtQixDQUM1QyxvQkFBb0IsRUFDcEIsYUFBYSxFQUNiLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQ2pFLENBQUM7UUFHYyxlQUFVLEdBQUcsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFbkQsU0FBSSxHQUFHLEdBQUcsQ0FBQztLQVc5QjtJQVRHLElBQ1csVUFBVSxDQUFDLElBQWE7UUFDL0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN0QixDQUFDO0lBRVMsTUFBTSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUU7UUFDaEMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7SUFDM0MsQ0FBQzsrR0FqQ1Esc0JBQXNCO21HQUF0QixzQkFBc0IscUpBUnBCLENBQUMsaUJBQWlCLENBQUMsc0JBQXNCLENBQUMsQ0FBQywrREFZeEMsVUFBVSx5RkFNVixXQUFXLGlWQzFEN0IsNlpBZ0JBLDRDRG9CYyxrQkFBa0I7O1NBWW5CLHNCQUFzQjs0RkFBdEIsc0JBQXNCO2tCQWZsQyxTQUFTO2lDQUNNLElBQUksWUFDTixpQkFBaUIsV0FDbEIsQ0FBQyxrQkFBa0IsRUFBRSxXQUFXLEVBQUUsU0FBUyxDQUFDLGlCQUV0QyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsaUJBQWlCLHdCQUF3QixDQUFDLGtCQUN0Qzt3QkFDWixvQkFBb0I7d0JBQ3BCLGdCQUFnQjt3QkFDaEIsd0JBQXdCO3dCQUN4QixlQUFlO3FCQUNsQjs4QkFJZ0IsUUFBUTtzQkFEeEIsU0FBUzt1QkFBQyxVQUFVLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUlwQixPQUFPO3NCQUR2QixZQUFZO3VCQUFDLFVBQVUsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBT3JCLFFBQVE7c0JBRDFCLFlBQVk7dUJBQUMsV0FBVztnQkFXVCxVQUFVO3NCQUR6QixNQUFNO2dCQU1JLFVBQVU7c0JBRHBCLEtBQUs7dUJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIGNvbXB1dGVkLFxuICAgIENvbnRlbnRDaGlsZCxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxuICAgIHNpZ25hbCxcbiAgICBUZW1wbGF0ZVJlZixcbiAgICBWaWV3Q2hpbGQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0b09ic2VydmFibGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7dHVpRGlyZWN0aXZlQmluZGluZ30gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7XG4gICAgdHVpQXNEYXRhTGlzdEhvc3QsXG4gICAgVHVpRGF0YUxpc3QsXG4gICAgdHlwZSBUdWlEYXRhTGlzdEhvc3QsXG59IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvZGF0YS1saXN0JztcbmltcG9ydCB7VHVpRXhwYW5kfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2V4cGFuZCc7XG5pbXBvcnQge1xuICAgIFR1aURyb3Bkb3duRGlyZWN0aXZlLFxuICAgIFR1aURyb3Bkb3duSG92ZXIsXG4gICAgVHVpRHJvcGRvd25PcGVuLFxuICAgIFR1aURyb3Bkb3duUG9zaXRpb25TaWRlZCxcbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9kcm9wZG93bic7XG5pbXBvcnQge1R1aUNoZXZyb259IGZyb20gJ0B0YWlnYS11aS9raXQvZGlyZWN0aXZlcy9jaGV2cm9uJztcbmltcG9ydCB7dHlwZSBQb2x5bW9ycGhldXNDb250ZW50LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuaW1wb3J0IHtza2lwfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUdWlBc2lkZUNvbXBvbmVudH0gZnJvbSAnLi9hc2lkZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWFzaWRlLWdyb3VwJyxcbiAgICBpbXBvcnRzOiBbUG9seW1vcnBoZXVzT3V0bGV0LCBUdWlEYXRhTGlzdCwgVHVpRXhwYW5kXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYXNpZGUtZ3JvdXAudGVtcGxhdGUuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt0dWlBc0RhdGFMaXN0SG9zdChUdWlBc2lkZUdyb3VwQ29tcG9uZW50KV0sXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtcbiAgICAgICAgVHVpRHJvcGRvd25EaXJlY3RpdmUsXG4gICAgICAgIFR1aURyb3Bkb3duSG92ZXIsXG4gICAgICAgIFR1aURyb3Bkb3duUG9zaXRpb25TaWRlZCxcbiAgICAgICAgVHVpRHJvcGRvd25PcGVuLFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFzaWRlR3JvdXBDb21wb25lbnQgaW1wbGVtZW50cyBUdWlEYXRhTGlzdEhvc3Q8dW5rbm93bj4ge1xuICAgIEBWaWV3Q2hpbGQoJ2RhdGFsaXN0Jywge3N0YXRpYzogdHJ1ZX0pXG4gICAgcHJpdmF0ZSByZWFkb25seSBkYXRhbGlzdDogUG9seW1vcnBoZXVzQ29udGVudDtcblxuICAgIEBDb250ZW50Q2hpbGQoVHVpQ2hldnJvbiwge3N0YXRpYzogdHJ1ZX0pXG4gICAgcHJpdmF0ZSByZWFkb25seSBjaGV2cm9uPzogVHVpQ2hldnJvbjtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgYXNpZGUgPSBpbmplY3QoVHVpQXNpZGVDb21wb25lbnQpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3BlbiA9IHNpZ25hbChmYWxzZSk7XG5cbiAgICBAQ29udGVudENoaWxkKFRlbXBsYXRlUmVmKVxuICAgIHByb3RlY3RlZCByZWFkb25seSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IG51bGwgPSBudWxsO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGV4cGFuZGVkID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5hc2lkZS5leHBhbmRlZCgpICYmIHRoaXMub3BlbigpKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgYmluZGluZyA9IHR1aURpcmVjdGl2ZUJpbmRpbmcoXG4gICAgICAgIFR1aURyb3Bkb3duRGlyZWN0aXZlLFxuICAgICAgICAndHVpRHJvcGRvd24nLFxuICAgICAgICBjb21wdXRlZCgoKSA9PiAodGhpcy5hc2lkZS5leHBhbmRlZCgpID8gbnVsbCA6IHRoaXMuZGF0YWxpc3QpKSxcbiAgICApO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IG9wZW5DaGFuZ2UgPSB0b09ic2VydmFibGUodGhpcy5vcGVuKS5waXBlKHNraXAoMSkpO1xuXG4gICAgcHVibGljIHJlYWRvbmx5IHNpemUgPSAncyc7XG5cbiAgICBASW5wdXQoJ29wZW4nKVxuICAgIHB1YmxpYyBzZXQgb3BlblNldHRlcihvcGVuOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMudG9nZ2xlKG9wZW4pO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCB0b2dnbGUob3BlbiA9ICF0aGlzLm9wZW4oKSk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wZW4uc2V0KG9wZW4gJiYgdGhpcy5hc2lkZS5leHBhbmRlZCgpKTtcbiAgICAgICAgdGhpcy5jaGV2cm9uPy5jaGV2cm9uLnNldCh0aGlzLm9wZW4oKSk7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgICNob3N0XG4gICAgKGNsaWNrKT1cInRvZ2dsZSgpXCJcbj5cbiAgICA8bmctY29udGVudCAvPlxuPC9kaXY+XG48dHVpLWV4cGFuZCBbZXhwYW5kZWRdPVwiZXhwYW5kZWQoKVwiPlxuICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cInRlbXBsYXRlXCIgLz5cbjwvdHVpLWV4cGFuZD5cbjxuZy10ZW1wbGF0ZSAjZGF0YWxpc3Q+XG4gICAgPHR1aS1kYXRhLWxpc3Q+XG4gICAgICAgIDx0dWktb3B0LWdyb3VwIFtsYWJlbF09XCJob3N0LnRleHRDb250ZW50XCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpwb2x5bW9ycGhldXNPdXRsZXQ9XCJ0ZW1wbGF0ZVwiIC8+XG4gICAgICAgIDwvdHVpLW9wdC1ncm91cD5cbiAgICA8L3R1aS1kYXRhLWxpc3Q+XG48L25nLXRlbXBsYXRlPlxuIl19