flexacore-ui-dev
Version:
Universal UI Framework for CDN, React, Angular, Vue, Svelte with TypeScript support
103 lines (102 loc) • 4.11 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FCTooltipComponent = void 0;
const core_1 = require("@angular/core");
let FCTooltipComponent = class FCTooltipComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.content = '';
this.placement = 'top';
this.show = false;
this.showChange = new core_1.EventEmitter();
this.position = { x: 0, y: 0 };
}
onMouseEnter() {
this.show = true;
this.showChange.emit(true);
this.updatePosition();
}
onMouseLeave() {
this.show = false;
this.showChange.emit(false);
}
updatePosition() {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
const tooltip = this.elementRef.nativeElement.querySelector('.fc-tooltip');
if (tooltip) {
const tooltipRect = tooltip.getBoundingClientRect();
switch (this.placement) {
case 'top':
this.position.x = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
this.position.y = rect.top - tooltipRect.height - 8;
break;
case 'bottom':
this.position.x = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
this.position.y = rect.bottom + 8;
break;
case 'left':
this.position.x = rect.left - tooltipRect.width - 8;
this.position.y = rect.top + (rect.height / 2) - (tooltipRect.height / 2);
break;
case 'right':
this.position.x = rect.right + 8;
this.position.y = rect.top + (rect.height / 2) - (tooltipRect.height / 2);
break;
}
}
}
};
exports.FCTooltipComponent = FCTooltipComponent;
__decorate([
(0, core_1.Input)(),
__metadata("design:type", String)
], FCTooltipComponent.prototype, "content", void 0);
__decorate([
(0, core_1.Input)(),
__metadata("design:type", String)
], FCTooltipComponent.prototype, "placement", void 0);
__decorate([
(0, core_1.Input)(),
__metadata("design:type", Boolean)
], FCTooltipComponent.prototype, "show", void 0);
__decorate([
(0, core_1.Output)(),
__metadata("design:type", Object)
], FCTooltipComponent.prototype, "showChange", void 0);
__decorate([
(0, core_1.HostListener)('mouseenter'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], FCTooltipComponent.prototype, "onMouseEnter", null);
__decorate([
(0, core_1.HostListener)('mouseleave'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], FCTooltipComponent.prototype, "onMouseLeave", null);
exports.FCTooltipComponent = FCTooltipComponent = __decorate([
(0, core_1.Component)({
selector: 'fc-tooltip',
template: `
<div
[ngClass]="['fc-tooltip', show ? 'fc-tooltip-show' : '']"
[style.left.px]="position.x"
[style.top.px]="position.y"
role="tooltip"
>
{{ content }}
</div>
`
}),
__metadata("design:paramtypes", [core_1.ElementRef])
], FCTooltipComponent);