@taiga-ui/kit
Version:
Taiga UI Angular main components kit
86 lines • 12.7 kB
JavaScript
import { __decorate, __param } from "tslib";
import { DOCUMENT } from '@angular/common';
import { Directive, ElementRef, Inject, NgZone, Renderer2, ViewContainerRef, } from '@angular/core';
import { ANIMATION_FRAME, CSS } from '@ng-web-apis/common';
import { CHAR_ELLIPSIS, TuiDestroyService, tuiZonefree } from '@taiga-ui/cdk';
import { setRangeOffset } from '@taiga-ui/kit/utils/dom';
import { Observable } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { TuiLineClampComponent } from './line-clamp.component';
const HIDDEN_LEFT = -200;
// @dynamic
let TuiLineClampDirective = class TuiLineClampDirective {
constructor(component, viewContainerRef, documentRef, renderer, ngZone, { nativeElement }, destroy$, animationFrame$,
/**
* TODO: remove "any" in new TS version; https://github.com/ng-web-apis/common/pull/6
*/
cssRef) {
if (cssRef.supports('-webkit-line-clamp', '1') ||
!(nativeElement.parentElement instanceof HTMLElement)) {
return;
}
const range = documentRef.createRange();
const ellipsis = renderer.createElement('div');
const { parentElement } = nativeElement;
const { style } = ellipsis;
style.position = 'absolute';
style.bottom = '0';
style.left = `${HIDDEN_LEFT}px`;
ellipsis.textContent = CHAR_ELLIPSIS;
viewContainerRef.element.nativeElement.appendChild(ellipsis);
animationFrame$
.pipe(map(() => {
// 4px buffer for IE/Edge incorrectly rounding scrollHeight
if (component.oneLine ||
nativeElement.scrollHeight - parentElement.clientHeight < 4) {
return HIDDEN_LEFT;
}
let result = 0;
const length = nativeElement.textContent
? nativeElement.textContent.length
: 0;
for (let char = 0; char < length - 2; char++) {
setRangeOffset(range, nativeElement, char, 'setStart');
setRangeOffset(range, nativeElement, char + 1, 'setEnd');
const rangeRect = range.getBoundingClientRect();
const clientRect = parentElement.getBoundingClientRect();
if (Math.round(rangeRect.top - clientRect.bottom) >= 0) {
break;
}
result = rangeRect.right - clientRect.left;
}
return result;
}), tuiZonefree(ngZone), takeUntil(destroy$))
.subscribe(left => {
style.left = `${left}px`;
});
}
};
TuiLineClampDirective.ctorParameters = () => [
{ type: TuiLineClampComponent, decorators: [{ type: Inject, args: [TuiLineClampComponent,] }] },
{ type: ViewContainerRef, decorators: [{ type: Inject, args: [ViewContainerRef,] }] },
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
{ type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: TuiDestroyService, decorators: [{ type: Inject, args: [TuiDestroyService,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [ANIMATION_FRAME,] }] },
{ type: undefined, decorators: [{ type: Inject, args: [CSS,] }] }
];
TuiLineClampDirective = __decorate([
Directive({
selector: '[lineClamp]',
providers: [TuiDestroyService],
}),
__param(0, Inject(TuiLineClampComponent)),
__param(1, Inject(ViewContainerRef)),
__param(2, Inject(DOCUMENT)),
__param(3, Inject(Renderer2)),
__param(4, Inject(NgZone)),
__param(5, Inject(ElementRef)),
__param(6, Inject(TuiDestroyService)),
__param(7, Inject(ANIMATION_FRAME)),
__param(8, Inject(CSS))
], TuiLineClampDirective);
export { TuiLineClampDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluZS1jbGFtcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvbGluZS1jbGFtcC8iLCJzb3VyY2VzIjpbImxpbmUtY2xhbXAuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDekMsT0FBTyxFQUNILFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNOLE1BQU0sRUFDTixTQUFTLEVBQ1QsZ0JBQWdCLEdBQ25CLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxlQUFlLEVBQUUsR0FBRyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDekQsT0FBTyxFQUFDLGFBQWEsRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDaEMsT0FBTyxFQUFDLEdBQUcsRUFBRSxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUU5QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUU3RCxNQUFNLFdBQVcsR0FBRyxDQUFDLEdBQUcsQ0FBQztBQUV6QixXQUFXO0FBS1gsSUFBYSxxQkFBcUIsR0FBbEMsTUFBYSxxQkFBcUI7SUFDOUIsWUFDbUMsU0FBZ0MsRUFDckMsZ0JBQWtDLEVBQzFDLFdBQXFCLEVBQ3BCLFFBQW1CLEVBQ3RCLE1BQWMsRUFDVixFQUFDLGFBQWEsRUFBMEIsRUFDakMsUUFBMkIsRUFDN0IsZUFBbUM7SUFDNUQ7O09BRUc7SUFDVSxNQUFXO1FBRXhCLElBQ0ksTUFBTSxDQUFDLFFBQVEsQ0FBQyxvQkFBb0IsRUFBRSxHQUFHLENBQUM7WUFDMUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxhQUFhLFlBQVksV0FBVyxDQUFDLEVBQ3ZEO1lBQ0UsT0FBTztTQUNWO1FBRUQsTUFBTSxLQUFLLEdBQUcsV0FBVyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3hDLE1BQU0sUUFBUSxHQUFnQixRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVELE1BQU0sRUFBQyxhQUFhLEVBQUMsR0FBRyxhQUFhLENBQUM7UUFDdEMsTUFBTSxFQUFDLEtBQUssRUFBQyxHQUFHLFFBQVEsQ0FBQztRQUV6QixLQUFLLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztRQUM1QixLQUFLLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztRQUNuQixLQUFLLENBQUMsSUFBSSxHQUFHLEdBQUcsV0FBVyxJQUFJLENBQUM7UUFDaEMsUUFBUSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUM7UUFFckMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUM7UUFFN0QsZUFBZTthQUNWLElBQUksQ0FDRCxHQUFHLENBQUMsR0FBRyxFQUFFO1lBQ0wsMkRBQTJEO1lBQzNELElBQ0ksU0FBUyxDQUFDLE9BQU87Z0JBQ2pCLGFBQWEsQ0FBQyxZQUFZLEdBQUcsYUFBYSxDQUFDLFlBQVksR0FBRyxDQUFDLEVBQzdEO2dCQUNFLE9BQU8sV0FBVyxDQUFDO2FBQ3RCO1lBRUQsSUFBSSxNQUFNLEdBQUcsQ0FBQyxDQUFDO1lBQ2YsTUFBTSxNQUFNLEdBQUcsYUFBYSxDQUFDLFdBQVc7Z0JBQ3BDLENBQUMsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLE1BQU07Z0JBQ2xDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFFUixLQUFLLElBQUksSUFBSSxHQUFHLENBQUMsRUFBRSxJQUFJLEdBQUcsTUFBTSxHQUFHLENBQUMsRUFBRSxJQUFJLEVBQUUsRUFBRTtnQkFDMUMsY0FBYyxDQUFDLEtBQUssRUFBRSxhQUFhLEVBQUUsSUFBSSxFQUFFLFVBQVUsQ0FBQyxDQUFDO2dCQUN2RCxjQUFjLENBQUMsS0FBSyxFQUFFLGFBQWEsRUFBRSxJQUFJLEdBQUcsQ0FBQyxFQUFFLFFBQVEsQ0FBQyxDQUFDO2dCQUV6RCxNQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMscUJBQXFCLEVBQUUsQ0FBQztnQkFDaEQsTUFBTSxVQUFVLEdBQUcsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7Z0JBRXpELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUU7b0JBQ3BELE1BQU07aUJBQ1Q7Z0JBRUQsTUFBTSxHQUFHLFNBQVMsQ0FBQyxLQUFLLEdBQUcsVUFBVSxDQUFDLElBQUksQ0FBQzthQUM5QztZQUVELE9BQU8sTUFBTSxDQUFDO1FBQ2xCLENBQUMsQ0FBQyxFQUNGLFdBQVcsQ0FBQyxNQUFNLENBQUMsRUFDbkIsU0FBUyxDQUFDLFFBQVEsQ0FBQyxDQUN0QjthQUNBLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNkLEtBQUssQ0FBQyxJQUFJLEdBQUcsR0FBRyxJQUFJLElBQUksQ0FBQztRQUM3QixDQUFDLENBQUMsQ0FBQztJQUNYLENBQUM7Q0FDSixDQUFBOztZQXZFaUQscUJBQXFCLHVCQUE5RCxNQUFNLFNBQUMscUJBQXFCO1lBQ2UsZ0JBQWdCLHVCQUEzRCxNQUFNLFNBQUMsZ0JBQWdCO1lBQ08sUUFBUSx1QkFBdEMsTUFBTSxTQUFDLFFBQVE7WUFDYSxTQUFTLHVCQUFyQyxNQUFNLFNBQUMsU0FBUztZQUNPLE1BQU0sdUJBQTdCLE1BQU0sU0FBQyxNQUFNO1lBQ3VCLFVBQVUsdUJBQTlDLE1BQU0sU0FBQyxVQUFVO1lBQ21CLGlCQUFpQix1QkFBckQsTUFBTSxTQUFDLGlCQUFpQjtZQUNpQixVQUFVLHVCQUFuRCxNQUFNLFNBQUMsZUFBZTs0Q0FJdEIsTUFBTSxTQUFDLEdBQUc7O0FBYk4scUJBQXFCO0lBSmpDLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFBRSxhQUFhO1FBQ3ZCLFNBQVMsRUFBRSxDQUFDLGlCQUFpQixDQUFDO0tBQ2pDLENBQUM7SUFHTyxXQUFBLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFBO0lBQzdCLFdBQUEsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUE7SUFDeEIsV0FBQSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUE7SUFDaEIsV0FBQSxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUE7SUFDakIsV0FBQSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDZCxXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtJQUNsQixXQUFBLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFBO0lBQ3pCLFdBQUEsTUFBTSxDQUFDLGVBQWUsQ0FBQyxDQUFBO0lBSXZCLFdBQUEsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFBO0dBYlAscUJBQXFCLENBeUVqQztTQXpFWSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0RPQ1VNRU5UfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICBEaXJlY3RpdmUsXG4gICAgRWxlbWVudFJlZixcbiAgICBJbmplY3QsXG4gICAgTmdab25lLFxuICAgIFJlbmRlcmVyMixcbiAgICBWaWV3Q29udGFpbmVyUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QU5JTUFUSU9OX0ZSQU1FLCBDU1N9IGZyb20gJ0BuZy13ZWItYXBpcy9jb21tb24nO1xuaW1wb3J0IHtDSEFSX0VMTElQU0lTLCBUdWlEZXN0cm95U2VydmljZSwgdHVpWm9uZWZyZWV9IGZyb20gJ0B0YWlnYS11aS9jZGsnO1xuaW1wb3J0IHtzZXRSYW5nZU9mZnNldH0gZnJvbSAnQHRhaWdhLXVpL2tpdC91dGlscy9kb20nO1xuaW1wb3J0IHtPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcbmltcG9ydCB7bWFwLCB0YWtlVW50aWx9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuaW1wb3J0IHtUdWlMaW5lQ2xhbXBDb21wb25lbnR9IGZyb20gJy4vbGluZS1jbGFtcC5jb21wb25lbnQnO1xuXG5jb25zdCBISURERU5fTEVGVCA9IC0yMDA7XG5cbi8vIEBkeW5hbWljXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1tsaW5lQ2xhbXBdJyxcbiAgICBwcm92aWRlcnM6IFtUdWlEZXN0cm95U2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUxpbmVDbGFtcERpcmVjdGl2ZSB7XG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBJbmplY3QoVHVpTGluZUNsYW1wQ29tcG9uZW50KSBjb21wb25lbnQ6IFR1aUxpbmVDbGFtcENvbXBvbmVudCxcbiAgICAgICAgQEluamVjdChWaWV3Q29udGFpbmVyUmVmKSB2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmLFxuICAgICAgICBASW5qZWN0KERPQ1VNRU5UKSBkb2N1bWVudFJlZjogRG9jdW1lbnQsXG4gICAgICAgIEBJbmplY3QoUmVuZGVyZXIyKSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgICAgICBASW5qZWN0KE5nWm9uZSkgbmdab25lOiBOZ1pvbmUsXG4gICAgICAgIEBJbmplY3QoRWxlbWVudFJlZikge25hdGl2ZUVsZW1lbnR9OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICAgICAgQEluamVjdChUdWlEZXN0cm95U2VydmljZSkgZGVzdHJveSQ6IFR1aURlc3Ryb3lTZXJ2aWNlLFxuICAgICAgICBASW5qZWN0KEFOSU1BVElPTl9GUkFNRSkgYW5pbWF0aW9uRnJhbWUkOiBPYnNlcnZhYmxlPG51bWJlcj4sXG4gICAgICAgIC8qKlxuICAgICAgICAgKiBUT0RPOiByZW1vdmUgXCJhbnlcIiBpbiBuZXcgVFMgdmVyc2lvbjsgaHR0cHM6Ly9naXRodWIuY29tL25nLXdlYi1hcGlzL2NvbW1vbi9wdWxsLzZcbiAgICAgICAgICovXG4gICAgICAgIEBJbmplY3QoQ1NTKSBjc3NSZWY6IGFueSxcbiAgICApIHtcbiAgICAgICAgaWYgKFxuICAgICAgICAgICAgY3NzUmVmLnN1cHBvcnRzKCctd2Via2l0LWxpbmUtY2xhbXAnLCAnMScpIHx8XG4gICAgICAgICAgICAhKG5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudCBpbnN0YW5jZW9mIEhUTUxFbGVtZW50KVxuICAgICAgICApIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IHJhbmdlID0gZG9jdW1lbnRSZWYuY3JlYXRlUmFuZ2UoKTtcbiAgICAgICAgY29uc3QgZWxsaXBzaXM6IEhUTUxFbGVtZW50ID0gcmVuZGVyZXIuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG4gICAgICAgIGNvbnN0IHtwYXJlbnRFbGVtZW50fSA9IG5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgIGNvbnN0IHtzdHlsZX0gPSBlbGxpcHNpcztcblxuICAgICAgICBzdHlsZS5wb3NpdGlvbiA9ICdhYnNvbHV0ZSc7XG4gICAgICAgIHN0eWxlLmJvdHRvbSA9ICcwJztcbiAgICAgICAgc3R5bGUubGVmdCA9IGAke0hJRERFTl9MRUZUfXB4YDtcbiAgICAgICAgZWxsaXBzaXMudGV4dENvbnRlbnQgPSBDSEFSX0VMTElQU0lTO1xuXG4gICAgICAgIHZpZXdDb250YWluZXJSZWYuZWxlbWVudC5uYXRpdmVFbGVtZW50LmFwcGVuZENoaWxkKGVsbGlwc2lzKTtcblxuICAgICAgICBhbmltYXRpb25GcmFtZSRcbiAgICAgICAgICAgIC5waXBlKFxuICAgICAgICAgICAgICAgIG1hcCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIC8vIDRweCBidWZmZXIgZm9yIElFL0VkZ2UgaW5jb3JyZWN0bHkgcm91bmRpbmcgc2Nyb2xsSGVpZ2h0XG4gICAgICAgICAgICAgICAgICAgIGlmIChcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbXBvbmVudC5vbmVMaW5lIHx8XG4gICAgICAgICAgICAgICAgICAgICAgICBuYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodCAtIHBhcmVudEVsZW1lbnQuY2xpZW50SGVpZ2h0IDwgNFxuICAgICAgICAgICAgICAgICAgICApIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBISURERU5fTEVGVDtcbiAgICAgICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgICAgIGxldCByZXN1bHQgPSAwO1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBsZW5ndGggPSBuYXRpdmVFbGVtZW50LnRleHRDb250ZW50XG4gICAgICAgICAgICAgICAgICAgICAgICA/IG5hdGl2ZUVsZW1lbnQudGV4dENvbnRlbnQubGVuZ3RoXG4gICAgICAgICAgICAgICAgICAgICAgICA6IDA7XG5cbiAgICAgICAgICAgICAgICAgICAgZm9yIChsZXQgY2hhciA9IDA7IGNoYXIgPCBsZW5ndGggLSAyOyBjaGFyKyspIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldFJhbmdlT2Zmc2V0KHJhbmdlLCBuYXRpdmVFbGVtZW50LCBjaGFyLCAnc2V0U3RhcnQnKTtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldFJhbmdlT2Zmc2V0KHJhbmdlLCBuYXRpdmVFbGVtZW50LCBjaGFyICsgMSwgJ3NldEVuZCcpO1xuXG4gICAgICAgICAgICAgICAgICAgICAgICBjb25zdCByYW5nZVJlY3QgPSByYW5nZS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnN0IGNsaWVudFJlY3QgPSBwYXJlbnRFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuXG4gICAgICAgICAgICAgICAgICAgICAgICBpZiAoTWF0aC5yb3VuZChyYW5nZVJlY3QudG9wIC0gY2xpZW50UmVjdC5ib3R0b20pID49IDApIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgICAgICAgICAgcmVzdWx0ID0gcmFuZ2VSZWN0LnJpZ2h0IC0gY2xpZW50UmVjdC5sZWZ0O1xuICAgICAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHJlc3VsdDtcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICB0dWlab25lZnJlZShuZ1pvbmUpLFxuICAgICAgICAgICAgICAgIHRha2VVbnRpbChkZXN0cm95JCksXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuc3Vic2NyaWJlKGxlZnQgPT4ge1xuICAgICAgICAgICAgICAgIHN0eWxlLmxlZnQgPSBgJHtsZWZ0fXB4YDtcbiAgICAgICAgICAgIH0pO1xuICAgIH1cbn1cbiJdfQ==