@taiga-ui/kit
Version:
Taiga UI Angular main components kit
247 lines (240 loc) • 13.3 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { TemplateRef, Inject, Self, ChangeDetectorRef, Directive, EventEmitter, Input, HostBinding, Output, ContentChild, ViewChild, Component, ChangeDetectionStrategy, forwardRef, ContentChildren, NgModule } from '@angular/core';
import { AbstractTuiInteractive, isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, EMPTY_QUERY, itemsQueryListObservable, isPresent, identity, TuiDestroyService, TuiFocusedModule, TuiFocusVisibleModule, TuiFocusableModule, TuiHoveredModule } from '@taiga-ui/cdk';
import { Observable, merge } from 'rxjs';
import { pairwise, map, filter, switchMap, mapTo, takeUntil } from 'rxjs/operators';
import { TUI_MODE, MODE_PROVIDER, TuiSvgModule, TuiGroupModule, TuiExpandModule } from '@taiga-ui/core';
import { PolymorpheusTemplate, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { CommonModule } from '@angular/common';
// TODO: do not rebuild the template, think about "lazy" flag
let TuiAccordionItemContentDirective = class TuiAccordionItemContentDirective extends PolymorpheusTemplate {
constructor(templateRef, changeDetectorRef) {
super(templateRef, changeDetectorRef);
}
};
TuiAccordionItemContentDirective.ctorParameters = () => [
{ type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }, { type: Self }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
];
TuiAccordionItemContentDirective = __decorate([
Directive({
selector: '[tuiAccordionItemContent]',
}),
__param(0, Inject(TemplateRef)),
__param(0, Self()),
__param(1, Inject(ChangeDetectorRef))
], TuiAccordionItemContentDirective);
var TuiAccordionItemComponent_1;
let TuiAccordionItemComponent = TuiAccordionItemComponent_1 = class TuiAccordionItemComponent extends AbstractTuiInteractive {
constructor(changeDetectorRef, mode$) {
super();
this.changeDetectorRef = changeDetectorRef;
this.mode$ = mode$;
this.noPadding = false;
this.showArrow = true;
this.borders = "all" /* All */;
this.size = 'm';
this.disabled = false;
this.disableHover = false;
this.open = false;
this.async = false;
this.openChange = new EventEmitter();
}
get nativeFocusableElement() {
return this.disabled || !this.focusableElement
? null
: this.focusableElement.nativeElement;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
onHovered(hovered) {
if (!this.disableHover) {
this.updateHovered(hovered);
}
}
onFocused(focused) {
this.updateFocused(focused);
}
onFocusVisible(focusVisible) {
this.updateFocusVisible(focusVisible);
}
onRowToggle() {
if (this.disabled) {
return;
}
this.updateOpen(!this.open);
}
onItemKeyDownEsc(event) {
if (!this.focused || !this.open) {
return;
}
event.stopPropagation();
this.updateOpen(false);
}
onItemKeyDownSpace(event) {
if (!this.focused) {
return;
}
event.preventDefault();
this.onRowToggle();
}
close() {
this.updateOpen(false);
this.changeDetectorRef.markForCheck();
}
updateOpen(open) {
if (this.open === open) {
return;
}
this.open = open;
this.openChange.emit(open);
}
};
TuiAccordionItemComponent.ctorParameters = () => [
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] }
];
__decorate([
Input(),
HostBinding('class._no-padding'),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "noPadding", void 0);
__decorate([
Input(),
HostBinding('class._has-arrow'),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "showArrow", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-borders'),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "borders", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-size'),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "size", void 0);
__decorate([
Input(),
HostBinding('class._disabled'),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "disabled", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "disableHover", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "open", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiAccordionItemComponent.prototype, "async", void 0);
__decorate([
Output()
], TuiAccordionItemComponent.prototype, "openChange", void 0);
__decorate([
ContentChild(TuiAccordionItemContentDirective)
], TuiAccordionItemComponent.prototype, "content", void 0);
__decorate([
ViewChild('focusableElement')
], TuiAccordionItemComponent.prototype, "focusableElement", void 0);
TuiAccordionItemComponent = TuiAccordionItemComponent_1 = __decorate([
Component({
selector: 'tui-accordion-item',
template: "<div\n #focusableElement\n automation-id=\"tui-accordion__item-wrapper\"\n class=\"wrapper\"\n [tuiFocusable]=\"computedFocusable\"\n (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n (tuiFocusedChange)=\"onFocused($event)\"\n (keydown.space)=\"onItemKeyDownSpace($event)\"\n (keydown.enter)=\"onItemKeyDownSpace($event)\"\n (keydown.esc)=\"onItemKeyDownEsc($event)\"\n>\n <div\n automation-id=\"tui-accordion__item-header\"\n class=\"header\"\n [class.header_open]=\"open\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (click)=\"onRowToggle()\"\n >\n <div class=\"title\" automation-id=\"tui-accordion__item-title\">\n <ng-content></ng-content>\n </div>\n <tui-svg\n *ngIf=\"showArrow\"\n automation-id=\"tui-accordion__item-arrow\"\n class=\"icon\"\n src=\"tuiIconChevronDownLarge\"\n [class.icon_open]=\"open\"\n ></tui-svg>\n </div>\n <tui-expand [async]=\"async\" [expanded]=\"open\">\n <ng-template tuiExpandContent>\n <div\n polymorpheus-outlet\n automation-id=\"tui-accordion__item-content\"\n class=\"content\"\n [content]=\"content\"\n ></div>\n </ng-template>\n </tui-expand>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiAccordionItemComponent_1),
},
MODE_PROVIDER,
],
host: {
'($.data-mode.attr)': 'mode$',
},
styles: [":host{position:relative;display:block;overflow:hidden;border-radius:var(--tui-radius-l)}:host[data-tui-host-borders=top-bottom]{border-radius:0!important}.wrapper{position:relative;border-radius:inherit}.wrapper:focus{outline:0}.wrapper:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';box-sizing:border-box;border-radius:inherit;border:1px solid var(--tui-base-04);pointer-events:none}:host:not([data-tui-host-borders]) .wrapper:after{border-width:0}:host[data-tui-host-borders=all] .wrapper:after{border-width:1px}:host[data-tui-host-borders=top-bottom] .wrapper:after{border-left-width:0;border-right-width:0}:host[data-tui-host-borders=top] .wrapper:after{border-left-width:0;border-right-width:0;border-bottom-width:0}:host[data-tui-host-borders=bottom] .wrapper:after{border-left-width:0;border-right-width:0;border-top-width:0}:host[data-mode=onDark] .wrapper:after{border-color:var(--tui-base-03)}:host[data-mode=onLight] .wrapper:after{border-color:var(--tui-text-01)}:host._focus-visible .wrapper:after{border:2px solid var(--tui-focus)}:host:not([data-mode]) .wrapper{background:var(--tui-base-01)}.header{font:var(--tui-font-text-l);transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;border-bottom:1px solid var(--tui-base-04);min-height:var(--tui-height-l);padding:12px 20px;color:var(--tui-text-01);cursor:pointer}:host[data-mode=onDark] .header{color:var(--tui-text-01-night);border-color:var(--tui-base-03)}:host[data-mode=onLight] .header{border-color:var(--tui-text-01)}:host:not([data-tui-host-borders]) .header{border-bottom-width:0;box-shadow:none}:host._has-arrow .header{padding-right:12px}:host._hovered:not([data-mode]) .header{background:var(--tui-base-02)}:host._hovered[data-mode=onDark] .header,:host[data-mode=onDark] .header_open{background:var(--tui-clear-inverse)}:host._hovered[data-mode=onLight] .header,:host[data-mode=onLight] .header_open{background:var(--tui-clear)}:host[data-tui-host-size='s'] .header{font:var(--tui-font-text-m);min-height:var(--tui-height-m);padding:10px 12px 10px 16px}:host._no-padding .header{padding-left:0;padding-right:0}:host._disabled .header{cursor:default}.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;flex-grow:1}:host._has-arrow .title{margin-right:8px}.icon{transition-property:transform,color;transition-duration:.3s;transition-timing-function:ease-in-out;width:24px;height:24px;margin-left:auto;color:var(--tui-base-06)}.icon_open{transform:rotate(180deg)}:host[data-mode] .icon{opacity:var(--tui-disabled-opacity)}:host._hovered[data-mode] .icon{opacity:.8}:host[data-mode=onDark] .icon{color:var(--tui-text-01-night)}:host[data-mode=onLight] .icon{color:var(--tui-text-01)}:host._hovered:not([data-mode]) .icon{color:var(--tui-base-07)}.content{font:var(--tui-font-text-m);padding:20px;word-wrap:break-word}:host[data-tui-host-size='s'] .content{font:var(--tui-font-text-s);padding:16px}"]
}),
__param(0, Inject(ChangeDetectorRef)),
__param(1, Inject(TUI_MODE))
], TuiAccordionItemComponent);
let TuiAccordionComponent = class TuiAccordionComponent {
constructor(destroy$) {
this.destroy$ = destroy$;
this.closeOthers = true;
this.rounded = true;
this.accordionItems = EMPTY_QUERY;
}
ngAfterContentInit() {
const { accordionItems } = this;
const rows$ = itemsQueryListObservable(accordionItems);
const newOpenRow$ = rows$.pipe(pairwise(), map(([previous, current]) => current.find(item => previous.indexOf(item) === -1 && item.open)), filter(isPresent));
const rowsOpen$ = merge(rows$.pipe(switchMap(rows => merge(...rows.map(row => row.openChange.pipe(filter(identity), mapTo(row)))))), newOpenRow$).pipe(filter(() => this.closeOthers), takeUntil(this.destroy$));
rowsOpen$.subscribe(currentRow => {
accordionItems.forEach(row => {
if (currentRow !== row) {
row.close();
}
});
});
}
};
TuiAccordionComponent.ctorParameters = () => [
{ type: TuiDestroyService, decorators: [{ type: Inject, args: [TuiDestroyService,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiAccordionComponent.prototype, "closeOthers", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiAccordionComponent.prototype, "rounded", void 0);
__decorate([
ContentChildren(TuiAccordionItemComponent)
], TuiAccordionComponent.prototype, "accordionItems", void 0);
TuiAccordionComponent = __decorate([
Component({
selector: 'tui-accordion',
template: "<!--TODO: Unnecessary nesting, probably accordion can be a directive-->\n<div\n tuiGroup\n automation-id=\"tui-accordion__group\"\n class=\"group\"\n orientation=\"vertical\"\n size=\"l\"\n [collapsed]=\"true\"\n [rounded]=\"rounded\"\n>\n <ng-content select=\"tui-accordion-item\"></ng-content>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [TuiDestroyService],
styles: [":host{display:block}.group{display:flex}"]
}),
__param(0, Inject(TuiDestroyService))
], TuiAccordionComponent);
let TuiAccordionModule = class TuiAccordionModule {
};
TuiAccordionModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiFocusedModule,
TuiFocusVisibleModule,
TuiFocusableModule,
TuiHoveredModule,
PolymorpheusModule,
TuiSvgModule,
TuiGroupModule,
TuiExpandModule,
],
declarations: [
TuiAccordionComponent,
TuiAccordionItemComponent,
TuiAccordionItemContentDirective,
],
exports: [
TuiAccordionComponent,
TuiAccordionItemComponent,
TuiAccordionItemContentDirective,
],
})
], TuiAccordionModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiAccordionComponent, TuiAccordionItemComponent, TuiAccordionItemContentDirective, TuiAccordionModule };
//# sourceMappingURL=taiga-ui-kit-components-accordion.js.map