@taiga-ui/kit
Version:
Taiga UI Angular main components kit
100 lines (95 loc) • 7.38 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, input, Directive } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiWatch } from '@taiga-ui/cdk/observables';
import { tuiWithStyles, tuiSetSignal } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiTextfieldComponent } from '@taiga-ui/core/components/textfield';
import * as i1 from '@taiga-ui/core/directives/appearance';
import { tuiAppearanceState, tuiAppearanceOptionsProvider, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
import * as i2 from '@taiga-ui/core/portals/hint';
import { TuiHintDescribe, TuiHintHover, TUI_HINT_OPTIONS, TuiHintDirective } from '@taiga-ui/core/portals/hint';
import { TUI_ICON_START } from '@taiga-ui/core/tokens';
import { map } from 'rxjs';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const [TUI_TOOLTIP_OPTIONS, tuiTooltipOptionsProvider] = tuiCreateOptions({
icon: '',
appearance: 'icon',
});
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-tooltip-5.7.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]){border-width:.125rem;border-radius:100%;cursor:pointer;pointer-events:auto;background-clip:content-box!important}[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]) [tuiBlock],[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]) [tuiCell][data-size=s],[tuiLabel][data-orientation=horizontal] [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]),[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{font-size:1.25rem}[tuiTitle] [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]){font-size:1rem;border:none}[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]):before{font-size:1rem}@media(hover:hover)and (pointer:fine){tui-textfield:hover [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=icon]:before,tui-textarea:hover [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=icon]:before{color:var(--tui-text-secondary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-tooltip-${TUI_VERSION}`, styles: ["[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]){border-width:.125rem;border-radius:100%;cursor:pointer;pointer-events:auto;background-clip:content-box!important}[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]) [tuiBlock],[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]) [tuiCell][data-size=s],[tuiLabel][data-orientation=horizontal] [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]),[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{font-size:1.25rem}[tuiTitle] [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]){font-size:1rem;border:none}[tuiTooltip]:where(*[data-tui-version=\"5.7.0\"]):before{font-size:1rem}@media(hover:hover)and (pointer:fine){tui-textfield:hover [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=icon]:before,tui-textarea:hover [tuiTooltip]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=icon]:before{color:var(--tui-text-secondary)}}\n"] }]
}] });
class TuiTooltip {
constructor() {
this.textfield = inject(TuiTextfieldComponent, { optional: true });
this.isMobile = inject(WA_IS_MOBILE);
this.describe = inject(TuiHintDescribe);
this.driver = inject(TuiHintHover);
this.nothing = tuiWithStyles(Styles);
this.state = tuiAppearanceState(toSignal(inject(TuiHintHover).pipe(map((hover) => (hover ? 'hover' : null)), tuiWatch()), { initialValue: null }));
this.size = input('m');
}
ngDoCheck() {
if (this.textfield?.id) {
tuiSetSignal(this.describe.id, this.textfield.id);
}
}
onClick(event) {
if (this.isMobile) {
event.preventDefault();
event.stopPropagation();
}
else {
this.driver.toggle();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiTooltip, isStandalone: true, selector: "tui-icon[tuiTooltip]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiTooltip": "" }, listeners: { "click.prevent": "0", "mousedown": "onClick($event)" }, properties: { "attr.data-size": "size()" } }, providers: [
tuiAppearanceOptionsProvider(TUI_TOOLTIP_OPTIONS),
{
provide: TUI_ICON_START,
useFactory: () => inject(TUI_TOOLTIP_OPTIONS).icon || inject(TUI_HINT_OPTIONS).icon,
},
], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiHintDescribe, inputs: ["tuiHintDescribe", "tuiTooltipDescribe"] }, { directive: i2.TuiHintDirective, inputs: ["tuiHint", "tuiTooltip", "tuiHintAppearance", "tuiHintAppearance", "tuiHintContext", "tuiHintContext"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTooltip, decorators: [{
type: Directive,
args: [{
selector: 'tui-icon[tuiTooltip]',
providers: [
tuiAppearanceOptionsProvider(TUI_TOOLTIP_OPTIONS),
{
provide: TUI_ICON_START,
useFactory: () => inject(TUI_TOOLTIP_OPTIONS).icon || inject(TUI_HINT_OPTIONS).icon,
},
],
hostDirectives: [
TuiWithAppearance,
{
directive: TuiHintDescribe,
inputs: ['tuiHintDescribe: tuiTooltipDescribe'],
},
{
directive: TuiHintDirective,
inputs: ['tuiHint: tuiTooltip', 'tuiHintAppearance', 'tuiHintContext'],
},
],
host: {
tuiTooltip: '',
'[attr.data-size]': 'size()',
'(click.prevent)': '0',
'(mousedown)': 'onClick($event)',
},
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_TOOLTIP_OPTIONS, TuiTooltip, tuiTooltipOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-directives-tooltip.mjs.map