@taiga-ui/kit
Version:
Taiga UI Angular main components kit
232 lines (226 loc) • 10.4 kB
JavaScript
import { __read, __decorate, __param } from 'tslib';
import { ElementRef, Inject, Renderer2, Input, ViewChild, HostBinding, HostListener, Component, ChangeDetectionStrategy, ViewContainerRef, NgZone, Directive, NgModule } from '@angular/core';
import { typedFromEvent, isCurrentTarget, tuiDefaultProp, tuiPure, CHAR_ELLIPSIS, tuiZonefree, TuiDestroyService, TuiResizeModule } from '@taiga-ui/cdk';
import { PolymorpheusOutletComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { BehaviorSubject, of, Observable } from 'rxjs';
import { startWith, pairwise, switchMap, filter, mapTo, map, takeUntil } from 'rxjs/operators';
import { DOCUMENT, CommonModule } from '@angular/common';
import { TuiHintModule } from '@taiga-ui/core';
import { ANIMATION_FRAME, CSS } from '@ng-web-apis/common';
import { setRangeOffset } from '@taiga-ui/kit/utils/dom';
var TuiLineClampComponent = /** @class */ (function () {
function TuiLineClampComponent(elementRef, renderer) {
var _this = this;
this.elementRef = elementRef;
this.lineHeight = 24;
this.content = '';
this.linesLimit$ = new BehaviorSubject(1);
this.initialized = false;
// Skipping initial transition
setTimeout(function () {
renderer.addClass(_this.elementRef.nativeElement, '_initialized');
});
}
Object.defineProperty(TuiLineClampComponent.prototype, "linesLimit", {
set: function (linesLimit) {
this.linesLimit$.next(linesLimit);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiLineClampComponent.prototype, "lineClamp$", {
get: function () {
var _this = this;
return this.linesLimit$.pipe(startWith(1), pairwise(), switchMap(function (_a) {
var _b = __read(_a, 2), prev = _b[0], next = _b[1];
return next >= prev
? of(next)
: typedFromEvent(_this.elementRef.nativeElement, 'transitionend').pipe(filter(isCurrentTarget), mapTo(next));
}));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiLineClampComponent.prototype, "overflown", {
get: function () {
if (!this.outlet) {
return false;
}
var _a = this.outlet.nativeElement, scrollHeight = _a.scrollHeight, scrollWidth = _a.scrollWidth;
var _b = this.elementRef.nativeElement, clientHeight = _b.clientHeight, clientWidth = _b.clientWidth;
// 4px buffer for IE/Edge incorrectly rounding scrollHeight
return scrollHeight - clientHeight > 4 || scrollWidth - clientWidth > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiLineClampComponent.prototype, "computedContent", {
get: function () {
return this.overflown ? this.content : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiLineClampComponent.prototype, "oneLine", {
get: function () {
return this.linesLimit$.value === 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiLineClampComponent.prototype, "maxHeight", {
get: function () {
return this.initialized ? this.lineHeight * this.linesLimit$.value : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiLineClampComponent.prototype, "height", {
get: function () {
return !this.outlet ? 0 : this.outlet.nativeElement.scrollHeight + 4 || null;
},
enumerable: true,
configurable: true
});
TuiLineClampComponent.prototype.ngAfterViewInit = function () {
this.initialized = true;
};
// Change detection
TuiLineClampComponent.prototype.markForCheck = function () { };
TuiLineClampComponent.ctorParameters = function () { return [
{ 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);
return TuiLineClampComponent;
}());
var HIDDEN_LEFT = -200;
// @dynamic
var TuiLineClampDirective = /** @class */ (function () {
function TuiLineClampDirective(component, viewContainerRef, documentRef, renderer, ngZone, _a, destroy$, animationFrame$,
/**
* TODO: remove "any" in new TS version; https://github.com/ng-web-apis/common/pull/6
*/
cssRef) {
var nativeElement = _a.nativeElement;
if (cssRef.supports('-webkit-line-clamp', '1') ||
!(nativeElement.parentElement instanceof HTMLElement)) {
return;
}
var range = documentRef.createRange();
var ellipsis = renderer.createElement('div');
var parentElement = nativeElement.parentElement;
var style = ellipsis.style;
style.position = 'absolute';
style.bottom = '0';
style.left = HIDDEN_LEFT + "px";
ellipsis.textContent = CHAR_ELLIPSIS;
viewContainerRef.element.nativeElement.appendChild(ellipsis);
animationFrame$
.pipe(map(function () {
// 4px buffer for IE/Edge incorrectly rounding scrollHeight
if (component.oneLine ||
nativeElement.scrollHeight - parentElement.clientHeight < 4) {
return HIDDEN_LEFT;
}
var result = 0;
var length = nativeElement.textContent
? nativeElement.textContent.length
: 0;
for (var char = 0; char < length - 2; char++) {
setRangeOffset(range, nativeElement, char, 'setStart');
setRangeOffset(range, nativeElement, char + 1, 'setEnd');
var rangeRect = range.getBoundingClientRect();
var clientRect = parentElement.getBoundingClientRect();
if (Math.round(rangeRect.top - clientRect.bottom) >= 0) {
break;
}
result = rangeRect.right - clientRect.left;
}
return result;
}), tuiZonefree(ngZone), takeUntil(destroy$))
.subscribe(function (left) {
style.left = left + "px";
});
}
TuiLineClampDirective.ctorParameters = function () { return [
{ 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);
return TuiLineClampDirective;
}());
var TuiLineClampModule = /** @class */ (function () {
function TuiLineClampModule() {
}
TuiLineClampModule = __decorate([
NgModule({
imports: [CommonModule, PolymorpheusModule, TuiHintModule, TuiResizeModule],
declarations: [TuiLineClampComponent, TuiLineClampDirective],
exports: [TuiLineClampComponent],
})
], TuiLineClampModule);
return TuiLineClampModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiLineClampComponent, TuiLineClampDirective, TuiLineClampModule };
//# sourceMappingURL=taiga-ui-kit-components-line-clamp.js.map