@taiga-ui/kit
Version:
Taiga UI Angular main components kit
96 lines • 12.4 kB
JavaScript
import { __decorate, __param } from "tslib";
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Inject, Input, Renderer2, ViewChild, } from '@angular/core';
import { isCurrentTarget, tuiDefaultProp, tuiPure, typedFromEvent } from '@taiga-ui/cdk';
import { PolymorpheusOutletComponent } from '@tinkoff/ng-polymorpheus';
import { BehaviorSubject, of } from 'rxjs';
import { filter, mapTo, pairwise, startWith, switchMap } from 'rxjs/operators';
let TuiLineClampComponent = class TuiLineClampComponent {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.lineHeight = 24;
this.content = '';
this.linesLimit$ = new BehaviorSubject(1);
this.initialized = false;
// Skipping initial transition
setTimeout(() => {
renderer.addClass(this.elementRef.nativeElement, '_initialized');
});
}
set linesLimit(linesLimit) {
this.linesLimit$.next(linesLimit);
}
get lineClamp$() {
return this.linesLimit$.pipe(startWith(1), pairwise(), switchMap(([prev, next]) => next >= prev
? of(next)
: typedFromEvent(this.elementRef.nativeElement, 'transitionend').pipe(filter(isCurrentTarget), mapTo(next))));
}
get overflown() {
if (!this.outlet) {
return false;
}
const { scrollHeight, scrollWidth } = this.outlet.nativeElement;
const { clientHeight, clientWidth } = this.elementRef.nativeElement;
// 4px buffer for IE/Edge incorrectly rounding scrollHeight
return scrollHeight - clientHeight > 4 || scrollWidth - clientWidth > 0;
}
get computedContent() {
return this.overflown ? this.content : '';
}
get oneLine() {
return this.linesLimit$.value === 1;
}
get maxHeight() {
return this.initialized ? this.lineHeight * this.linesLimit$.value : null;
}
get height() {
return !this.outlet ? 0 : this.outlet.nativeElement.scrollHeight + 4 || null;
}
ngAfterViewInit() {
this.initialized = true;
}
// Change detection
markForCheck() { }
};
TuiLineClampComponent.ctorParameters = () => [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiLineClampComponent.prototype, "linesLimit", null);
__decorate([
Input(),
tuiDefaultProp()
], TuiLineClampComponent.prototype, "lineHeight", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiLineClampComponent.prototype, "content", void 0);
__decorate([
ViewChild(PolymorpheusOutletComponent, { read: ElementRef })
], TuiLineClampComponent.prototype, "outlet", void 0);
__decorate([
tuiPure
], TuiLineClampComponent.prototype, "lineClamp$", null);
__decorate([
HostBinding('style.maxHeight.px')
], TuiLineClampComponent.prototype, "maxHeight", null);
__decorate([
HostBinding('style.height.px')
], TuiLineClampComponent.prototype, "height", null);
__decorate([
HostListener('mouseenter')
], TuiLineClampComponent.prototype, "markForCheck", null);
TuiLineClampComponent = __decorate([
Component({
selector: 'tui-line-clamp',
template: "<div\n polymorpheus-outlet\n class=\"wrapper\"\n lineClamp\n tuiHintId=\"unnecessary\"\n tuiHintMode=\"overflow\"\n [tuiHint]=\"computedContent\"\n [class.wrapper_ellipsis]=\"oneLine\"\n [style.-webkit-line-clamp]=\"lineClamp$ | async\"\n [content]=\"content\"\n (tuiResize)=\"markForCheck()\"\n></div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{position:relative;display:block;overflow:hidden}:host._initialized{transition-property:max-height;transition-duration:.3s;transition-timing-function:ease-in-out}.wrapper{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.wrapper_ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}"]
}),
__param(0, Inject(ElementRef)),
__param(1, Inject(Renderer2))
], TuiLineClampComponent);
export { TuiLineClampComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluZS1jbGFtcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvbGluZS1jbGFtcC8iLCJzb3VyY2VzIjpbImxpbmUtY2xhbXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsYUFBYSxFQUNiLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxTQUFTLEVBQ1QsU0FBUyxHQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxlQUFlLEVBQUUsY0FBYyxFQUFFLE9BQU8sRUFBRSxjQUFjLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUFzQiwyQkFBMkIsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQzFGLE9BQU8sRUFBQyxlQUFlLEVBQWMsRUFBRSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQ3JELE9BQU8sRUFBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFRN0UsSUFBYSxxQkFBcUIsR0FBbEMsTUFBYSxxQkFBcUI7SUFzQjlCLFlBQ3lDLFVBQW1DLEVBQ3JELFFBQW1CO1FBREQsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7UUFkNUUsZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUloQixZQUFPLEdBQXdCLEVBQUUsQ0FBQztRQUVqQixnQkFBVyxHQUFHLElBQUksZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBSzlDLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBTXhCLDhCQUE4QjtRQUM5QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ1osUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxjQUFjLENBQUMsQ0FBQztRQUNyRSxDQUFDLENBQUMsQ0FBQztJ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QUF5QztRQUV6QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7S0FDbEQsQ0FBQztJQXdCTyxXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtJQUNsQixXQUFBLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQTtHQXhCYixxQkFBcUIsQ0FxRmpDO1NBckZZLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQWZ0ZXJWaWV3SW5pdCxcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRWxlbWVudFJlZixcbiAgICBIb3N0QmluZGluZyxcbiAgICBIb3N0TGlzdGVuZXIsXG4gICAgSW5qZWN0LFxuICAgIElucHV0LFxuICAgIFJlbmRlcmVyMixcbiAgICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtpc0N1cnJlbnRUYXJnZXQsIHR1aURlZmF1bHRQcm9wLCB0dWlQdXJlLCB0eXBlZEZyb21FdmVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge1BvbHltb3JwaGV1c0NvbnRlbnQsIFBvbHltb3JwaGV1c091dGxldENvbXBvbmVudH0gZnJvbSAnQHRpbmtvZmYvbmctcG9seW1vcnBoZXVzJztcbmltcG9ydCB7QmVoYXZpb3JTdWJqZWN0LCBPYnNlcnZhYmxlLCBvZn0gZnJvbSAncnhqcyc7XG5pbXBvcnQge2ZpbHRlciwgbWFwVG8sIHBhaXJ3aXNlLCBzdGFydFdpdGgsIHN3aXRjaE1hcH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1saW5lLWNsYW1wJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbGluZS1jbGFtcC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9saW5lLWNsYW1wLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVHVpTGluZUNsYW1wQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIHNldCBsaW5lc0xpbWl0KGxpbmVzTGltaXQ6IG51bWJlcikge1xuICAgICAgICB0aGlzLmxpbmVzTGltaXQkLm5leHQobGluZXNMaW1pdCk7XG4gICAgfVxuXG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIGxpbmVIZWlnaHQgPSAyNDtcblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBjb250ZW50OiBQb2x5bW9ycGhldXNDb250ZW50ID0gJyc7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IGxpbmVzTGltaXQkID0gbmV3IEJlaGF2aW9yU3ViamVjdCgxKTtcblxuICAgIEBWaWV3Q2hpbGQoUG9seW1vcnBoZXVzT3V0bGV0Q29tcG9uZW50LCB7cmVhZDogRWxlbWVudFJlZn0pXG4gICAgcHJpdmF0ZSByZWFkb25seSBvdXRsZXQ/OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcblxuICAgIHByaXZhdGUgaW5pdGlhbGl6ZWQgPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBASW5qZWN0KEVsZW1lbnRSZWYpIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICAgICAgIEBJbmplY3QoUmVuZGVyZXIyKSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgICkge1xuICAgICAgICAvLyBTa2lwcGluZyBpbml0aWFsIHRyYW5zaXRpb25cbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICByZW5kZXJlci5hZGRDbGFzcyh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ19pbml0aWFsaXplZCcpO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBAdHVpUHVyZVxuICAgIGdldCBsaW5lQ2xhbXAkKCk6IE9ic2VydmFibGU8bnVtYmVyPiB7XG4gICAgICAgIHJldHVybiB0aGlzLmxpbmVzTGltaXQkLnBpcGUoXG4gICAgICAgICAgICBzdGFydFdpdGgoMSksXG4gICAgICAgICAgICBwYWlyd2lzZSgpLFxuICAgICAgICAgICAgc3dpdGNoTWFwKChbcHJldiwgbmV4dF0pID0+XG4gICAgICAgICAgICAgICAgbmV4dCA+PSBwcmV2XG4gICAgICAgICAgICAgICAgICAgID8gb2YobmV4dClcbiAgICAgICAgICAgICAgICAgICAgOiB0eXBlZEZyb21FdmVudCh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ3RyYW5zaXRpb25lbmQnKS5waXBlKFxuICAgICAgICAgICAgICAgICAgICAgICAgICBmaWx0ZXIoaXNDdXJyZW50VGFyZ2V0KSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgbWFwVG8obmV4dCksXG4gICAgICAgICAgICAgICAgICAgICAgKSxcbiAgICAgICAgICAgICksXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgZ2V0IG92ZXJmbG93bigpOiBib29sZWFuIHtcbiAgICAgICAgaWYgKCF0aGlzLm91dGxldCkge1xuICAgICAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc3Qge3Njcm9sbEhlaWdodCwgc2Nyb2xsV2lkdGh9ID0gdGhpcy5vdXRsZXQubmF0aXZlRWxlbWVudDtcbiAgICAgICAgY29uc3Qge2NsaWVudEhlaWdodCwgY2xpZW50V2lkdGh9ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICAgICAgLy8gNHB4IGJ1ZmZlciBmb3IgSUUvRWRnZSBpbmNvcnJlY3RseSByb3VuZGluZyBzY3JvbGxIZWlnaHRcbiAgICAgICAgcmV0dXJuIHNjcm9sbEhlaWdodCAtIGNsaWVudEhlaWdodCA+IDQgfHwgc2Nyb2xsV2lkdGggLSBjbGllbnRXaWR0aCA+IDA7XG4gICAgfVxuXG4gICAgZ2V0IGNvbXB1dGVkQ29udGVudCgpOiBQb2x5bW9ycGhldXNDb250ZW50IHtcbiAgICAgICAgcmV0dXJuIHRoaXMub3ZlcmZsb3duID8gdGhpcy5jb250ZW50IDogJyc7XG4gICAgfVxuXG4gICAgZ2V0IG9uZUxpbmUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmxpbmVzTGltaXQkLnZhbHVlID09PSAxO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZygnc3R5bGUubWF4SGVpZ2h0LnB4JylcbiAgICBnZXQgbWF4SGVpZ2h0KCk6IG51bWJlciB8IG51bGwge1xuICAgICAgICByZXR1cm4gdGhpcy5pbml0aWFsaXplZCA/IHRoaXMubGluZUhlaWdodCAqIHRoaXMubGluZXNMaW1pdCQudmFsdWUgOiBudWxsO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZygnc3R5bGUuaGVpZ2h0LnB4JylcbiAgICBnZXQgaGVpZ2h0KCk6IG51bWJlciB8IG51bGwge1xuICAgICAgICByZXR1cm4gIXRoaXMub3V0bGV0ID8gMCA6IHRoaXMub3V0bGV0Lm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSGVpZ2h0ICsgNCB8fCBudWxsO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICAgICAgdGhpcy5pbml0aWFsaXplZCA9IHRydWU7XG4gICAgfVxuXG4gICAgLy8gQ2hhbmdlIGRldGVjdGlvblxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxuICAgIG1hcmtGb3JDaGVjaygpIHt9XG59XG4iXX0=