@taiga-ui/kit
Version:
Taiga UI Angular main components kit
273 lines (266 loc) • 15.4 kB
JavaScript
import { __extends, __decorate, __param, __read, __spread } from 'tslib';
import { TemplateRef, Inject, Self, ChangeDetectorRef, Directive, EventEmitter, Input, HostBinding, Output, ContentChild, ViewChild, Component, ChangeDetectionStrategy, forwardRef, ContentChildren, NgModule } from '@angular/core';
import { isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiInteractive, 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
var TuiAccordionItemContentDirective = /** @class */ (function (_super) {
__extends(TuiAccordionItemContentDirective, _super);
function TuiAccordionItemContentDirective(templateRef, changeDetectorRef) {
return _super.call(this, templateRef, changeDetectorRef) || this;
}
TuiAccordionItemContentDirective.ctorParameters = function () { return [
{ 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);
return TuiAccordionItemContentDirective;
}(PolymorpheusTemplate));
var TuiAccordionItemComponent = /** @class */ (function (_super) {
__extends(TuiAccordionItemComponent, _super);
function TuiAccordionItemComponent(changeDetectorRef, mode$) {
var _this = _super.call(this) || this;
_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();
return _this;
}
TuiAccordionItemComponent_1 = TuiAccordionItemComponent;
Object.defineProperty(TuiAccordionItemComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.disabled || !this.focusableElement
? null
: this.focusableElement.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiAccordionItemComponent.prototype, "focused", {
get: function () {
return isNativeFocused(this.nativeFocusableElement);
},
enumerable: true,
configurable: true
});
TuiAccordionItemComponent.prototype.onHovered = function (hovered) {
if (!this.disableHover) {
this.updateHovered(hovered);
}
};
TuiAccordionItemComponent.prototype.onFocused = function (focused) {
this.updateFocused(focused);
};
TuiAccordionItemComponent.prototype.onFocusVisible = function (focusVisible) {
this.updateFocusVisible(focusVisible);
};
TuiAccordionItemComponent.prototype.onRowToggle = function () {
if (this.disabled) {
return;
}
this.updateOpen(!this.open);
};
TuiAccordionItemComponent.prototype.onItemKeyDownEsc = function (event) {
if (!this.focused || !this.open) {
return;
}
event.stopPropagation();
this.updateOpen(false);
};
TuiAccordionItemComponent.prototype.onItemKeyDownSpace = function (event) {
if (!this.focused) {
return;
}
event.preventDefault();
this.onRowToggle();
};
TuiAccordionItemComponent.prototype.close = function () {
this.updateOpen(false);
this.changeDetectorRef.markForCheck();
};
TuiAccordionItemComponent.prototype.updateOpen = function (open) {
if (this.open === open) {
return;
}
this.open = open;
this.openChange.emit(open);
};
var TuiAccordionItemComponent_1;
TuiAccordionItemComponent.ctorParameters = function () { return [
{ 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(function () { return 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);
return TuiAccordionItemComponent;
}(AbstractTuiInteractive));
var TuiAccordionComponent = /** @class */ (function () {
function TuiAccordionComponent(destroy$) {
this.destroy$ = destroy$;
this.closeOthers = true;
this.rounded = true;
this.accordionItems = EMPTY_QUERY;
}
TuiAccordionComponent.prototype.ngAfterContentInit = function () {
var _this = this;
var accordionItems = this.accordionItems;
var rows$ = itemsQueryListObservable(accordionItems);
var newOpenRow$ = rows$.pipe(pairwise(), map(function (_a) {
var _b = __read(_a, 2), previous = _b[0], current = _b[1];
return current.find(function (item) { return previous.indexOf(item) === -1 && item.open; });
}), filter(isPresent));
var rowsOpen$ = merge(rows$.pipe(switchMap(function (rows) {
return merge.apply(void 0, __spread(rows.map(function (row) {
return row.openChange.pipe(filter(identity), mapTo(row));
})));
})), newOpenRow$).pipe(filter(function () { return _this.closeOthers; }), takeUntil(this.destroy$));
rowsOpen$.subscribe(function (currentRow) {
accordionItems.forEach(function (row) {
if (currentRow !== row) {
row.close();
}
});
});
};
TuiAccordionComponent.ctorParameters = function () { return [
{ 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);
return TuiAccordionComponent;
}());
var TuiAccordionModule = /** @class */ (function () {
function TuiAccordionModule() {
}
TuiAccordionModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiFocusedModule,
TuiFocusVisibleModule,
TuiFocusableModule,
TuiHoveredModule,
PolymorpheusModule,
TuiSvgModule,
TuiGroupModule,
TuiExpandModule,
],
declarations: [
TuiAccordionComponent,
TuiAccordionItemComponent,
TuiAccordionItemContentDirective,
],
exports: [
TuiAccordionComponent,
TuiAccordionItemComponent,
TuiAccordionItemContentDirective,
],
})
], TuiAccordionModule);
return TuiAccordionModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiAccordionComponent, TuiAccordionItemComponent, TuiAccordionItemContentDirective, TuiAccordionModule };
//# sourceMappingURL=taiga-ui-kit-components-accordion.js.map