@taiga-ui/kit
Version:
Taiga UI Angular main components kit
106 lines (100 loc) • 10.5 kB
JavaScript
import { TuiItem } from '@taiga-ui/cdk/directives/item';
import { TuiExpand } from '@taiga-ui/core/components/expand';
import * as i0 from '@angular/core';
import { inject, model, Directive, contentChildren, ElementRef, effect, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiGenerateId, tuiSetSignal } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1$1 from '@taiga-ui/core/directives/group';
import { tuiGroupOptionsProvider, TuiGroup } from '@taiga-ui/core/directives/group';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
import * as i1 from '@taiga-ui/core/components/button';
import { TuiButton, tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import * as i2 from '@taiga-ui/kit/directives/chevron';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
class TuiAccordionDirective {
constructor() {
this.accordion = inject(TuiAccordionComponent);
this.open = model(false, { alias: 'tuiAccordion' });
this.id = tuiGenerateId();
this.size = tuiDirectiveBinding(TuiButton, 'size', this.accordion.size);
this.chevron = tuiDirectiveBinding(TuiChevron, 'rotated', this.open);
}
ngOnChanges() {
this.accordion.toggle(this);
}
toggle() {
this.open.set(!this.open());
this.accordion.toggle(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiAccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiAccordionDirective, isStandalone: true, selector: "button[tuiAccordion]", inputs: { open: { classPropertyName: "open", publicName: "tuiAccordion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "tuiAccordionChange" }, host: { attributes: { "tuiAccordion": "", "tuiButton": "", "type": "button" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-controls": "id", "attr.aria-expanded": "open() || \"false\"" } }, providers: [
tuiAvatarOptionsProvider({ size: 's' }),
tuiButtonOptionsProvider({ appearance: 'outline-grayscale' }),
], usesOnChanges: true, hostDirectives: [{ directive: i1.TuiButton }, { directive: i2.TuiChevron }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiAccordionDirective, decorators: [{
type: Directive,
args: [{
selector: 'button[tuiAccordion]',
providers: [
tuiAvatarOptionsProvider({ size: 's' }),
tuiButtonOptionsProvider({ appearance: 'outline-grayscale' }),
],
hostDirectives: [TuiButton, TuiChevron],
host: {
tuiAccordion: '',
tuiButton: '',
type: 'button',
'[attr.aria-controls]': 'id',
'[attr.aria-expanded]': 'open() || "false"',
'(click)': 'toggle()',
},
}]
}] });
class TuiAccordionComponent {
constructor() {
this.expands = contentChildren(TuiExpand);
this.directives = contentChildren(TuiAccordionDirective);
this.elements = contentChildren(TuiExpand, { read: ElementRef });
this.sync = effect(() => this.elements().forEach(({ nativeElement }, index) => {
nativeElement.id = this.directives()[index]?.id;
}));
this.closeOthers = input(true);
this.size = input('l');
}
toggle(directive) {
if (this.closeOthers() && directive.open()) {
this.expands().forEach((expand) => tuiSetSignal(expand.expanded, false));
this.directives().forEach((dir) => {
if (dir !== directive) {
dir.open.set(false);
}
});
}
const expand = this.expands()[this.directives().indexOf(directive)];
if (expand) {
tuiSetSignal(expand.expanded, !!directive.open());
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", type: TuiAccordionComponent, isStandalone: true, selector: "tui-accordion", inputs: { closeOthers: { classPropertyName: "closeOthers", publicName: "closeOthers", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.7.0" }, properties: { "attr.data-size": "size()" } }, providers: [tuiGroupOptionsProvider({ orientation: 'vertical', collapsed: true })], queries: [{ propertyName: "expands", predicate: TuiExpand, isSignal: true }, { propertyName: "directives", predicate: TuiAccordionDirective, isSignal: true }, { propertyName: "elements", predicate: TuiExpand, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiGroup }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["tui-accordion:where(*[data-tui-version=\"5.7.0\"]){inline-size:100%;border-radius:var(--t-group-radius);font:var(--tui-typography-body-m);overflow:hidden}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]{text-align:start;justify-content:flex-start}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:last-of-type:not([aria-expanded=true]){-webkit-mask-image:var(--t-group-mask-end);mask-image:var(--t-group-mask-end);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:first-child{border-top-left-radius:inherit!important;border-top-right-radius:inherit!important}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:first-child:last-of-type:not([aria-expanded=true]){-webkit-mask-image:none;mask-image:none}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:after{margin-inline-start:auto!important}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]>[tuiAvatar]{margin:0}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>tui-expand{visibility:hidden;min-block-size:1px!important;padding:1.25rem;transition-property:grid-template-rows,padding,visibility!important;box-shadow:inset 0 0 0 1px var(--tui-border-normal)}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>tui-expand:last-child{border-bottom-left-radius:inherit!important;border-bottom-right-radius:inherit!important}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion][data-appearance=\"\"]+tui-expand{box-shadow:none}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{font:var(--tui-typography-body-s)}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=m]>tui-expand{padding:1rem}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{font:var(--tui-typography-body-s)}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=s]>tui-expand{padding:.625rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiAccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'tui-accordion', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiGroupOptionsProvider({ orientation: 'vertical', collapsed: true })], hostDirectives: [TuiGroup], host: {
'data-tui-version': TUI_VERSION,
'[attr.data-size]': 'size()',
}, styles: ["tui-accordion:where(*[data-tui-version=\"5.7.0\"]){inline-size:100%;border-radius:var(--t-group-radius);font:var(--tui-typography-body-m);overflow:hidden}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]{text-align:start;justify-content:flex-start}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:last-of-type:not([aria-expanded=true]){-webkit-mask-image:var(--t-group-mask-end);mask-image:var(--t-group-mask-end);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:first-child{border-top-left-radius:inherit!important;border-top-right-radius:inherit!important}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:first-child:last-of-type:not([aria-expanded=true]){-webkit-mask-image:none;mask-image:none}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]:after{margin-inline-start:auto!important}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion]>[tuiAvatar]{margin:0}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>tui-expand{visibility:hidden;min-block-size:1px!important;padding:1.25rem;transition-property:grid-template-rows,padding,visibility!important;box-shadow:inset 0 0 0 1px var(--tui-border-normal)}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>tui-expand:last-child{border-bottom-left-radius:inherit!important;border-bottom-right-radius:inherit!important}tui-accordion:where(*[data-tui-version=\"5.7.0\"])>[tuiAccordion][data-appearance=\"\"]+tui-expand{box-shadow:none}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{font:var(--tui-typography-body-s)}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=m]>tui-expand{padding:1rem}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{font:var(--tui-typography-body-s)}tui-accordion:where(*[data-tui-version=\"5.7.0\"])[data-size=s]>tui-expand{padding:.625rem}\n"] }]
}] });
const TuiAccordion = [
TuiAccordionComponent,
TuiAccordionDirective,
TuiExpand,
TuiItem,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiAccordion, TuiAccordionComponent, TuiAccordionDirective };
//# sourceMappingURL=taiga-ui-kit-components-accordion.mjs.map