@taiga-ui/kit
Version:
Taiga UI Angular main components kit
130 lines • 14.1 kB
JavaScript
import { __decorate, __param, __read } 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';
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;
}());
export { TuiLineClampComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluZS1jbGFtcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvbGluZS1jbGFtcC8iLCJzb3VyY2VzIjpbImxpbmUtY2xhbXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsYUFBYSxFQUNiLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxTQUFTLEVBQ1QsU0FBUyxHQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxlQUFlLEVBQUUsY0FBYyxFQUFFLE9BQU8sRUFBRSxjQUFjLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUFzQiwyQkFBMkIsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQzFGLE9BQU8sRUFBQyxlQUFlLEVBQWMsRUFBRSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQ3JELE9BQU8sRUFBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFRN0U7SUFzQkksK0JBQ3lDLFVBQW1DLEVBQ3JELFFBQW1CO1FBRjFDLGlCQVFDO1FBUHdDLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBZDVFLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFJaEIsWUFBTyxHQUF3QixFQUFFLENBQUM7UUFFakIsZ0JBQVcsR0FBRyxJQUFJLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUs5QyxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQU14Qiw4QkFBOEI7UUFDOUIsVUFBVSxDQUFDO1lBQ1AsUUFBUSxDQUFDLFFBQVEsQ0FBQyxLQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxjQUFjLENBQUMsQ0FBQztRQUNyRSxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUEzQkQsc0JBQUksNkNBQVU7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O0lBcEZSLHFCQUFxQjtRQU5qQyxTQUFTLENBQUM7WUFDUCxRQUFRLEVBQUUsZ0JBQWdCO1lBQzFCLDBWQUF5QztZQUV6QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7U0FDbEQsQ0FBQztRQXdCTyxXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtRQUNsQixXQUFBLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQTtPQXhCYixxQkFBcUIsQ0FxRmpDO0lBQUQsNEJBQUM7Q0FBQSxBQXJGRCxJQXFGQztTQXJGWSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgSG9zdEJpbmRpbmcsXG4gICAgSG9zdExpc3RlbmVyLFxuICAgIEluamVjdCxcbiAgICBJbnB1dCxcbiAgICBSZW5kZXJlcjIsXG4gICAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7aXNDdXJyZW50VGFyZ2V0LCB0dWlEZWZhdWx0UHJvcCwgdHVpUHVyZSwgdHlwZWRGcm9tRXZlbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsnO1xuaW1wb3J0IHtQb2x5bW9ycGhldXNDb250ZW50LCBQb2x5bW9ycGhldXNPdXRsZXRDb21wb25lbnR9IGZyb20gJ0B0aW5rb2ZmL25nLXBvbHltb3JwaGV1cyc7XG5pbXBvcnQge0JlaGF2aW9yU3ViamVjdCwgT2JzZXJ2YWJsZSwgb2Z9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtmaWx0ZXIsIG1hcFRvLCBwYWlyd2lzZSwgc3RhcnRXaXRoLCBzd2l0Y2hNYXB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0dWktbGluZS1jbGFtcCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2xpbmUtY2xhbXAudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbGluZS1jbGFtcC5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFR1aUxpbmVDbGFtcENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBzZXQgbGluZXNMaW1pdChsaW5lc0xpbWl0OiBudW1iZXIpIHtcbiAgICAgICAgdGhpcy5saW5lc0xpbWl0JC5uZXh0KGxpbmVzTGltaXQpO1xuICAgIH1cblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBsaW5lSGVpZ2h0ID0gMjQ7XG5cbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgY29udGVudDogUG9seW1vcnBoZXVzQ29udGVudCA9ICcnO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBsaW5lc0xpbWl0JCA9IG5ldyBCZWhhdmlvclN1YmplY3QoMSk7XG5cbiAgICBAVmlld0NoaWxkKFBvbHltb3JwaGV1c091dGxldENvbXBvbmVudCwge3JlYWQ6IEVsZW1lbnRSZWZ9KVxuICAgIHByaXZhdGUgcmVhZG9ubHkgb3V0bGV0PzogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XG5cbiAgICBwcml2YXRlIGluaXRpYWxpemVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChFbGVtZW50UmVmKSBwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgICAgICBASW5qZWN0KFJlbmRlcmVyMikgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICApIHtcbiAgICAgICAgLy8gU2tpcHBpbmcgaW5pdGlhbCB0cmFuc2l0aW9uXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgcmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdfaW5pdGlhbGl6ZWQnKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgQHR1aVB1cmVcbiAgICBnZXQgbGluZUNsYW1wJCgpOiBPYnNlcnZhYmxlPG51bWJlcj4ge1xuICAgICAgICByZXR1cm4gdGhpcy5saW5lc0xpbWl0JC5waXBlKFxuICAgICAgICAgICAgc3RhcnRXaXRoKDEpLFxuICAgICAgICAgICAgcGFpcndpc2UoKSxcbiAgICAgICAgICAgIHN3aXRjaE1hcCgoW3ByZXYsIG5leHRdKSA9PlxuICAgICAgICAgICAgICAgIG5leHQgPj0gcHJldlxuICAgICAgICAgICAgICAgICAgICA/IG9mKG5leHQpXG4gICAgICAgICAgICAgICAgICAgIDogdHlwZWRGcm9tRXZlbnQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICd0cmFuc2l0aW9uZW5kJykucGlwZShcbiAgICAgICAgICAgICAgICAgICAgICAgICAgZmlsdGVyKGlzQ3VycmVudFRhcmdldCksXG4gICAgICAgICAgICAgICAgICAgICAgICAgIG1hcFRvKG5leHQpLFxuICAgICAgICAgICAgICAgICAgICAgICksXG4gICAgICAgICAgICApLFxuICAgICAgICApO1xuICAgIH1cblxuICAgIGdldCBvdmVyZmxvd24oKTogYm9vbGVhbiB7XG4gICAgICAgIGlmICghdGhpcy5vdXRsZXQpIHtcbiAgICAgICAgICAgIHJldHVybiBmYWxzZTtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IHtzY3JvbGxIZWlnaHQsIHNjcm9sbFdpZHRofSA9IHRoaXMub3V0bGV0Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgIGNvbnN0IHtjbGllbnRIZWlnaHQsIGNsaWVudFdpZHRofSA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuXG4gICAgICAgIC8vIDRweCBidWZmZXIgZm9yIElFL0VkZ2UgaW5jb3JyZWN0bHkgcm91bmRpbmcgc2Nyb2xsSGVpZ2h0XG4gICAgICAgIHJldHVybiBzY3JvbGxIZWlnaHQgLSBjbGllbnRIZWlnaHQgPiA0IHx8IHNjcm9sbFdpZHRoIC0gY2xpZW50V2lkdGggPiAwO1xuICAgIH1cblxuICAgIGdldCBjb21wdXRlZENvbnRlbnQoKTogUG9seW1vcnBoZXVzQ29udGVudCB7XG4gICAgICAgIHJldHVybiB0aGlzLm92ZXJmbG93biA/IHRoaXMuY29udGVudCA6ICcnO1xuICAgIH1cblxuICAgIGdldCBvbmVMaW5lKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5saW5lc0xpbWl0JC52YWx1ZSA9PT0gMTtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLm1heEhlaWdodC5weCcpXG4gICAgZ2V0IG1heEhlaWdodCgpOiBudW1iZXIgfCBudWxsIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuaW5pdGlhbGl6ZWQgPyB0aGlzLmxpbmVIZWlnaHQgKiB0aGlzLmxpbmVzTGltaXQkLnZhbHVlIDogbnVsbDtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodC5weCcpXG4gICAgZ2V0IGhlaWdodCgpOiBudW1iZXIgfCBudWxsIHtcbiAgICAgICAgcmV0dXJuICF0aGlzLm91dGxldCA/IDAgOiB0aGlzLm91dGxldC5uYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodCArIDQgfHwgbnVsbDtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgICAgIHRoaXMuaW5pdGlhbGl6ZWQgPSB0cnVlO1xuICAgIH1cblxuICAgIC8vIENoYW5nZSBkZXRlY3Rpb25cbiAgICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJylcbiAgICBtYXJrRm9yQ2hlY2soKSB7fVxufVxuIl19