@xui/components
Version:
xUI Components for Angular
68 lines • 11.3 kB
JavaScript
import { booleanAttribute, Directive, ElementRef, input } from '@angular/core';
import { ConnectionPositionPair, Overlay } from '@angular/cdk/overlay';
import { Tooltip } from './tooltip';
import { ComponentPortal } from '@angular/cdk/portal';
import { TOOLTIP_MODULE, XuiConfigService } from '../config';
import { TranslateService } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "../config";
import * as i2 from "@angular/cdk/overlay";
import * as i3 from "@ngx-translate/core";
export class XuiTooltip {
constructor(configService, elementRef, overlay, translate) {
this.configService = configService;
this.elementRef = elementRef;
this.overlay = overlay;
this.translate = translate;
this._moduleName = TOOLTIP_MODULE;
this.message = input.required({ alias: 'xuiTooltip' });
this.position = input('right', { alias: 'xuiTooltipPosition' });
this.disabled = input(false, { transform: booleanAttribute, alias: 'xuiTooltipDisabled' });
this._overlayRef = overlay.create();
this.portal = new ComponentPortal(Tooltip);
}
show() {
if (this.disabled()) {
return;
}
if (!this._overlayRef.hasAttached()) {
this._overlayRef.updatePositionStrategy(this.calculatePositionStrategy(this.elementRef));
const ref = this._overlayRef.attach(this.portal);
ref.setInput('message', this.translate.instant(this.message()));
ref.setInput('position', this.position());
}
}
calculatePositionStrategy(anchor) {
return this.overlay
.position()
.flexibleConnectedTo(anchor?.elementRef ?? anchor)
.withPositions([this.getPositionStrategy()])
.withPush(false);
}
getPositionStrategy() {
switch (this.position()) {
case 'right':
return new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' });
case 'left':
return new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' });
case 'top':
return new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' });
case 'bottom':
return new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiTooltip, deps: [{ token: i1.XuiConfigService }, { token: i0.ElementRef }, { token: i2.Overlay }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.1", type: XuiTooltip, selector: "[xuiTooltip]", inputs: { message: { classPropertyName: "message", publicName: "xuiTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "xuiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "xuiTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "_overlayRef.detach()" } }, exportAs: ["xuiTooltip"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiTooltip, decorators: [{
type: Directive,
args: [{
selector: '[xuiTooltip]',
exportAs: 'xuiTooltip',
host: {
'(mouseenter)': 'show()',
'(mouseleave)': '_overlayRef.detach()'
}
}]
}], ctorParameters: () => [{ type: i1.XuiConfigService }, { type: i0.ElementRef }, { type: i2.Overlay }, { type: i3.TranslateService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvdG9vbHRpcC90b29sdGlwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE9BQU8sRUFBYyxNQUFNLHNCQUFzQixDQUFDO0FBQ25GLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDcEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRXRELE9BQU8sRUFBRSxjQUFjLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDN0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7Ozs7O0FBVXZELE1BQU0sT0FBTyxVQUFVO0lBVXJCLFlBQ1UsYUFBK0IsRUFDL0IsVUFBc0IsRUFDdEIsT0FBZ0IsRUFDaEIsU0FBMkI7UUFIM0Isa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBQy9CLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQUNoQixjQUFTLEdBQVQsU0FBUyxDQUFrQjtRQWJwQixnQkFBVyxHQUFHLGNBQWMsQ0FBQztRQUs5QyxZQUFPLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBUyxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsQ0FBQyxDQUFDO1FBQzFELGFBQVEsR0FBRyxLQUFLLENBQWtCLE9BQU8sRUFBRSxFQUFFLEtBQUssRUFBRSxvQkFBb0IsRUFBRSxDQUFDLENBQUM7UUFDNUUsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLG9CQUFvQixFQUFFLENBQUMsQ0FBQztRQVFwRixJQUFJLENBQUMsV0FBVyxHQUFHLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUNwQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFTSxJQUFJO1FBQ1QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQztZQUNwQixPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsRUFBRSxFQUFFLENBQUM7WUFDcEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUM7WUFDekYsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBRWpELEdBQUcsQ0FBQyxRQUFRLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDaEUsR0FBRyxDQUFDLFFBQVEsQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7UUFDNUMsQ0FBQztJQUNILENBQUM7SUFFTyx5QkFBeUIsQ0FBQyxNQUFxQjtRQUNyRCxPQUFPLElBQUksQ0FBQyxPQUFPO2FBQ2hCLFFBQVEsRUFBRTthQUNWLG1CQUFtQixDQUFFLE1BQWMsRUFBRSxVQUFVLElBQUksTUFBTSxDQUFDO2FBQzFELGFBQWEsQ0FBQyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDLENBQUM7YUFDM0MsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFTyxtQkFBbUI7UUFDekIsUUFBUSxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQztZQUN4QixLQUFLLE9BQU87Z0JBQ1YsT0FBTyxJQUFJLHNCQUFzQixDQUMvQixFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxFQUNyQyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUMxQyxDQUFDO1lBQ0osS0FBSyxNQUFNO2dCQUNULE9BQU8sSUFBSSxzQkFBc0IsQ0FDL0IsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFDdkMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsQ0FDeEMsQ0FBQztZQUNKLEtBQUssS0FBSztnQkFDUixPQUFPLElBQUksc0JBQXNCLENBQy9CLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEVBQ3JDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLENBQzNDLENBQUM7WUFDSixLQUFLLFFBQVE7Z0JBQ1gsT0FBTyxJQUFJLHNCQUFzQixDQUMvQixFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxFQUN4QyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUN4QyxDQUFDO1FBQ04sQ0FBQztJQUNILENBQUM7OEdBakVVLFVBQVU7a0dBQVYsVUFBVTs7MkZBQVYsVUFBVTtrQkFSdEIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLElBQUksRUFBRTt3QkFDSixjQUFjLEVBQUUsUUFBUTt3QkFDeEIsY0FBYyxFQUFFLHNCQUFzQjtxQkFDdkM7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBib29sZWFuQXR0cmlidXRlLCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb25uZWN0aW9uUG9zaXRpb25QYWlyLCBPdmVybGF5LCBPdmVybGF5UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4vdG9vbHRpcCc7XG5pbXBvcnQgeyBDb21wb25lbnRQb3J0YWwgfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7IFRvb2x0aXBBbmNob3IsIFRvb2x0aXBQb3NpdGlvbiB9IGZyb20gJy4vdG9vbHRpcC50eXBlcyc7XG5pbXBvcnQgeyBUT09MVElQX01PRFVMRSwgWHVpQ29uZmlnU2VydmljZSB9IGZyb20gJy4uL2NvbmZpZyc7XG5pbXBvcnQgeyBUcmFuc2xhdGVTZXJ2aWNlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1t4dWlUb29sdGlwXScsXG4gIGV4cG9ydEFzOiAneHVpVG9vbHRpcCcsXG4gIGhvc3Q6IHtcbiAgICAnKG1vdXNlZW50ZXIpJzogJ3Nob3coKScsXG4gICAgJyhtb3VzZWxlYXZlKSc6ICdfb3ZlcmxheVJlZi5kZXRhY2goKSdcbiAgfVxufSlcbmV4cG9ydCBjbGFzcyBYdWlUb29sdGlwIHtcbiAgcHJpdmF0ZSByZWFkb25seSBfbW9kdWxlTmFtZSA9IFRPT0xUSVBfTU9EVUxFO1xuXG4gIHJlYWRvbmx5IF9vdmVybGF5UmVmOiBPdmVybGF5UmVmO1xuICBwcml2YXRlIHJlYWRvbmx5IHBvcnRhbDogQ29tcG9uZW50UG9ydGFsPFRvb2x0aXA+O1xuXG4gIG1lc3NhZ2UgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KHsgYWxpYXM6ICd4dWlUb29sdGlwJyB9KTtcbiAgcG9zaXRpb24gPSBpbnB1dDxUb29sdGlwUG9zaXRpb24+KCdyaWdodCcsIHsgYWxpYXM6ICd4dWlUb29sdGlwUG9zaXRpb24nIH0pO1xuICBkaXNhYmxlZCA9IGlucHV0KGZhbHNlLCB7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSwgYWxpYXM6ICd4dWlUb29sdGlwRGlzYWJsZWQnIH0pO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY29uZmlnU2VydmljZTogWHVpQ29uZmlnU2VydmljZSxcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgcHJpdmF0ZSBvdmVybGF5OiBPdmVybGF5LFxuICAgIHByaXZhdGUgdHJhbnNsYXRlOiBUcmFuc2xhdGVTZXJ2aWNlXG4gICkge1xuICAgIHRoaXMuX292ZXJsYXlSZWYgPSBvdmVybGF5LmNyZWF0ZSgpO1xuICAgIHRoaXMucG9ydGFsID0gbmV3IENvbXBvbmVudFBvcnRhbChUb29sdGlwKTtcbiAgfVxuXG4gIHB1YmxpYyBzaG93KCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAoIXRoaXMuX292ZXJsYXlSZWYuaGFzQXR0YWNoZWQoKSkge1xuICAgICAgdGhpcy5fb3ZlcmxheVJlZi51cGRhdGVQb3NpdGlvblN0cmF0ZWd5KHRoaXMuY2FsY3VsYXRlUG9zaXRpb25TdHJhdGVneSh0aGlzLmVsZW1lbnRSZWYpKTtcbiAgICAgIGNvbnN0IHJlZiA9IHRoaXMuX292ZXJsYXlSZWYuYXR0YWNoKHRoaXMucG9ydGFsKTtcblxuICAgICAgcmVmLnNldElucHV0KCdtZXNzYWdlJywgdGhpcy50cmFuc2xhdGUuaW5zdGFudCh0aGlzLm1lc3NhZ2UoKSkpO1xuICAgICAgcmVmLnNldElucHV0KCdwb3NpdGlvbicsIHRoaXMucG9zaXRpb24oKSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBjYWxjdWxhdGVQb3NpdGlvblN0cmF0ZWd5KGFuY2hvcjogVG9vbHRpcEFuY2hvcikge1xuICAgIHJldHVybiB0aGlzLm92ZXJsYXlcbiAgICAgIC5wb3NpdGlvbigpXG4gICAgICAuZmxleGlibGVDb25uZWN0ZWRUbygoYW5jaG9yIGFzIGFueSk/LmVsZW1lbnRSZWYgPz8gYW5jaG9yKVxuICAgICAgLndpdGhQb3NpdGlvbnMoW3RoaXMuZ2V0UG9zaXRpb25TdHJhdGVneSgpXSlcbiAgICAgIC53aXRoUHVzaChmYWxzZSk7XG4gIH1cblxuICBwcml2YXRlIGdldFBvc2l0aW9uU3RyYXRlZ3koKTogQ29ubmVjdGlvblBvc2l0aW9uUGFpciB7XG4gICAgc3dpdGNoICh0aGlzLnBvc2l0aW9uKCkpIHtcbiAgICAgIGNhc2UgJ3JpZ2h0JzpcbiAgICAgICAgcmV0dXJuIG5ldyBDb25uZWN0aW9uUG9zaXRpb25QYWlyKFxuICAgICAgICAgIHsgb3JpZ2luWDogJ2VuZCcsIG9yaWdpblk6ICdjZW50ZXInIH0sXG4gICAgICAgICAgeyBvdmVybGF5WDogJ3N0YXJ0Jywgb3ZlcmxheVk6ICdjZW50ZXInIH1cbiAgICAgICAgKTtcbiAgICAgIGNhc2UgJ2xlZnQnOlxuICAgICAgICByZXR1cm4gbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoXG4gICAgICAgICAgeyBvcmlnaW5YOiAnc3RhcnQnLCBvcmlnaW5ZOiAnY2VudGVyJyB9LFxuICAgICAgICAgIHsgb3ZlcmxheVg6ICdlbmQnLCBvdmVybGF5WTogJ2NlbnRlcicgfVxuICAgICAgICApO1xuICAgICAgY2FzZSAndG9wJzpcbiAgICAgICAgcmV0dXJuIG5ldyBDb25uZWN0aW9uUG9zaXRpb25QYWlyKFxuICAgICAgICAgIHsgb3JpZ2luWDogJ2NlbnRlcicsIG9yaWdpblk6ICd0b3AnIH0sXG4gICAgICAgICAgeyBvdmVybGF5WDogJ2NlbnRlcicsIG92ZXJsYXlZOiAnYm90dG9tJyB9XG4gICAgICAgICk7XG4gICAgICBjYXNlICdib3R0b20nOlxuICAgICAgICByZXR1cm4gbmV3IENvbm5lY3Rpb25Qb3NpdGlvblBhaXIoXG4gICAgICAgICAgeyBvcmlnaW5YOiAnY2VudGVyJywgb3JpZ2luWTogJ2JvdHRvbScgfSxcbiAgICAgICAgICB7IG92ZXJsYXlYOiAnY2VudGVyJywgb3ZlcmxheVk6ICd0b3AnIH1cbiAgICAgICAgKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==