@taiga-ui/kit
Version:
Taiga UI Angular main components kit
112 lines (105 loc) • 10.6 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ChangeDetectionStrategy, Component, Directive, viewChild, ElementRef, computed, input } from '@angular/core';
import { outputFromObservable, toSignal, toObservable } from '@angular/core/rxjs-interop';
import * as i1 from '@taiga-ui/cdk/directives/transitioned';
import { TuiTransitioned } from '@taiga-ui/cdk/directives/transitioned';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i2 from '@taiga-ui/core/portals/hint';
import { TuiHintComponent, TUI_HINT_PROVIDERS, TuiHintDirective, TUI_HINT_COMPONENT, TuiHint } from '@taiga-ui/core/portals/hint';
import { TUI_FONT_OFFSET } from '@taiga-ui/core/utils/miscellaneous';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { Subject, debounceTime, distinctUntilChanged, startWith, pairwise, switchMap, of, fromEvent, filter, map } from 'rxjs';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { TuiPositionAccessor, tuiAsPositionAccessor } from '@taiga-ui/core/classes';
const TUI_LINE_CLAMP_DEFAULT_OPTIONS = { showHint: true };
/**
* Default parameters for LineClamp component
*/
const [TUI_LINE_CLAMP_OPTIONS, tuiLineClampOptionsProvider] = tuiCreateOptions(TUI_LINE_CLAMP_DEFAULT_OPTIONS);
class TuiLineClampBox extends TuiHintComponent {
constructor() {
super(...arguments);
this.host = inject(TuiLineClamp);
}
get width() {
return this.accessor.getClientRect().width;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLineClampBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TuiLineClampBox, isStandalone: true, selector: "tui-line-clamp-box", host: { properties: { "style.line-height.px": "host.line()", "style.min-width.px": "width" } }, providers: TUI_HINT_PROVIDERS, usesInheritance: true, ngImport: i0, template: '<ng-container *polymorpheusOutlet="content() as text">{{ text }}</ng-container>', isInline: true, styles: [":host{position:absolute;box-shadow:var(--tui-shadow-medium);inline-size:min-content;padding:.75rem 1rem;margin-inline-start:calc(-1px - 1rem);margin-block-start:calc(-1px - .75rem);border-radius:var(--tui-radius-l);box-sizing:content-box;border:1px solid var(--tui-border-normal);background:var(--tui-background-base);color:var(--tui-text-primary);overflow-wrap:break-word}:host.tui-enter,:host.tui-leave{animation-name:tuiFade}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLineClampBox, decorators: [{
type: Component,
args: [{ selector: 'tui-line-clamp-box', imports: [PolymorpheusOutlet], template: '<ng-container *polymorpheusOutlet="content() as text">{{ text }}</ng-container>', changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_HINT_PROVIDERS, host: { '[style.line-height.px]': 'host.line()', '[style.min-width.px]': 'width' }, styles: [":host{position:absolute;box-shadow:var(--tui-shadow-medium);inline-size:min-content;padding:.75rem 1rem;margin-inline-start:calc(-1px - 1rem);margin-block-start:calc(-1px - .75rem);border-radius:var(--tui-radius-l);box-sizing:content-box;border:1px solid var(--tui-border-normal);background:var(--tui-background-base);color:var(--tui-text-primary);overflow-wrap:break-word}:host.tui-enter,:host.tui-leave{animation-name:tuiFade}\n"] }]
}] });
class TuiLineClampPositionDirective extends TuiPositionAccessor {
constructor() {
super(...arguments);
this.accessor = inject(TuiHintDirective);
this.type = 'hint';
}
getPosition() {
const { top, left } = this.accessor.getClientRect();
return [left, top];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLineClampPositionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiLineClampPositionDirective, isStandalone: true, selector: "[tuiLineClampPosition]", providers: [tuiAsPositionAccessor(TuiLineClampPositionDirective)], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLineClampPositionDirective, decorators: [{
type: Directive,
args: [{
selector: '[tuiLineClampPosition]',
providers: [tuiAsPositionAccessor(TuiLineClampPositionDirective)],
}]
}] });
class TuiLineClamp {
constructor() {
this.offset = inject(TUI_FONT_OFFSET);
this.outlet = viewChild.required(TuiHintDirective, { read: ElementRef });
this.options = inject(TUI_LINE_CLAMP_OPTIONS);
this.el = tuiInjectElement();
this.isOverflown$ = new Subject();
this.maxHeight = computed(() => this.line() * this.linesLimit());
this.line = computed(() => this.lineHeight() + this.offset());
this.lineHeight = input(24);
this.linesLimit = input(1);
this.content = input();
this.overflownChange = outputFromObservable(this.isOverflown$.pipe(debounceTime(0), distinctUntilChanged()));
this.lineClamp = toSignal(toObservable(this.linesLimit).pipe(startWith(1), pairwise(), switchMap(([prev, next]) => next >= prev
? of(next)
: fromEvent(this.el, 'transitionend').pipe(filter((e) => e.target === e.currentTarget), map(() => next)))), { initialValue: 0 });
}
ngAfterViewChecked() {
this.update();
this.isOverflown$.next(this.overflown);
}
get overflown() {
const { scrollHeight, scrollWidth } = this.outlet().nativeElement;
const { clientWidth } = this.el;
return scrollHeight > this.maxHeight() || scrollWidth > clientWidth;
}
get computedContent() {
return this.options.showHint && this.overflown ? this.content() : '';
}
update() {
this.el.style.height = tuiPx(this.outlet().nativeElement.scrollHeight);
this.el.style.maxHeight = tuiPx(this.maxHeight());
this.el.classList.toggle('_overflown', this.overflown);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLineClamp, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", type: TuiLineClamp, isStandalone: true, selector: "tui-line-clamp", inputs: { lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, linesLimit: { classPropertyName: "linesLimit", publicName: "linesLimit", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflownChange: "overflownChange" }, host: { listeners: { "mouseenter": "update()", "resize": "update()", "transitionend": "update()" }, properties: { "style.line-height.px": "line()" } }, providers: [{ provide: TUI_HINT_COMPONENT, useValue: TuiLineClampBox }], viewQueries: [{ propertyName: "outlet", first: true, predicate: TuiHintDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.TuiTransitioned }], ngImport: i0, template: "<div\n tuiLineClampPosition\n class=\"t-wrapper\"\n [style.-webkit-line-clamp]=\"lineClamp()\"\n [style.word-break]=\"lineClamp() > 1 ? 'break-word' : 'break-all'\"\n [tuiHint]=\"computedContent\"\n>\n <ng-container *polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n</div>\n", styles: [":host{transition-property:max-height;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:block;overflow:hidden}:host._overflown .t-wrapper{-webkit-box-orient:vertical}.t-wrapper{display:-webkit-box;overflow:hidden;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: TuiLineClampPositionDirective, selector: "[tuiLineClampPosition]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiLineClamp, decorators: [{
type: Component,
args: [{ selector: 'tui-line-clamp', imports: [PolymorpheusOutlet, TuiHint, TuiLineClampPositionDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TUI_HINT_COMPONENT, useValue: TuiLineClampBox }], hostDirectives: [TuiTransitioned], host: {
'[style.line-height.px]': 'line()',
'(mouseenter)': 'update()',
'(resize)': 'update()',
'(transitionend)': 'update()',
}, template: "<div\n tuiLineClampPosition\n class=\"t-wrapper\"\n [style.-webkit-line-clamp]=\"lineClamp()\"\n [style.word-break]=\"lineClamp() > 1 ? 'break-word' : 'break-all'\"\n [tuiHint]=\"computedContent\"\n>\n <ng-container *polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n</div>\n", styles: [":host{transition-property:max-height;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:block;overflow:hidden}:host._overflown .t-wrapper{-webkit-box-orient:vertical}.t-wrapper{display:-webkit-box;overflow:hidden;overflow-wrap:anywhere}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_LINE_CLAMP_DEFAULT_OPTIONS, TUI_LINE_CLAMP_OPTIONS, TuiLineClamp, TuiLineClampBox, tuiLineClampOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-line-clamp.mjs.map