@vismaux/ngx-nordic-cool
Version:
Common Nordic-Cool components for Angular.
81 lines • 11.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NcTooltipComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.mouseLeaveSubject = new Subject();
this.afterMouseLeave = () => this.mouseLeaveSubject.asObservable();
this.mouseOver = false;
}
set content(content) {
if (content instanceof TemplateRef) {
this.template = content;
}
else {
this.text = content;
}
}
get inlineStyle() {
if (!this.position || !this.offset) {
return '';
}
return `--offset-${this.position}: -${this.offset}px;`;
}
handleMouseEnter() {
this.mouseOver = true;
}
handleMouseLeave() {
this.mouseOver = false;
this.mouseLeaveSubject.next();
}
_markForCheck() {
this.cdRef.markForCheck();
}
projectComponent(componentType) {
return this.contentContainerRef.createComponent(componentType).instance;
}
}
NcTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NcTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NcTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NcTooltipComponent, selector: "nc-tooltip", inputs: { content: "content", position: "position", offset: "offset", style: "style" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "this.inlineStyle" } }, viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"tooltip in\"\n [class.tooltip-error]=\"style === 'error'\"\n [ngClass]=\"position\"\n @fadeIn\n>\n <div class=\"tooltip-arrow\"></div>\n <div #content class=\"tooltip-inner\">\n <ng-container *ngIf=\"text\">{{ text }}</ng-container>\n <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\"></ng-container>\n </div>\n</div>\n", styles: [".tooltip{position:relative}.tooltip:after{content:\"\";position:absolute;left:0px;left:calc(var(--offset-right, 11px) - 11px);right:0px;right:calc(var(--offset-left, 11px) - 11px);bottom:0px;bottom:calc(var(--offset-top, 11px) - 11px);top:0px;top:calc(var(--offset-bottom, 11px) - 11px)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
trigger('fadeIn', [
transition(':enter', [
style({ opacity: '0' }),
animate('200ms ease-out', style({ opacity: '1' })),
]),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NcTooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
trigger('fadeIn', [
transition(':enter', [
style({ opacity: '0' }),
animate('200ms ease-out', style({ opacity: '1' })),
]),
]),
], template: "<div\n class=\"tooltip in\"\n [class.tooltip-error]=\"style === 'error'\"\n [ngClass]=\"position\"\n @fadeIn\n>\n <div class=\"tooltip-arrow\"></div>\n <div #content class=\"tooltip-inner\">\n <ng-container *ngIf=\"text\">{{ text }}</ng-container>\n <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\"></ng-container>\n </div>\n</div>\n", styles: [".tooltip{position:relative}.tooltip:after{content:\"\";position:absolute;left:0px;left:calc(var(--offset-right, 11px) - 11px);right:0px;right:calc(var(--offset-left, 11px) - 11px);bottom:0px;bottom:calc(var(--offset-top, 11px) - 11px);top:0px;top:calc(var(--offset-bottom, 11px) - 11px)}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { contentContainerRef: [{
type: ViewChild,
args: ['content', { read: ViewContainerRef, static: true }]
}], content: [{
type: Input
}], position: [{
type: Input
}], offset: [{
type: Input
}], style: [{
type: Input
}], inlineStyle: [{
type: HostBinding,
args: ['attr.style']
}], handleMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], handleMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbm9yZGljLWNvb2wvc3JjL2xpYi90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5vcmRpYy1jb29sL3NyYy9saWIvdG9vbHRpcC90b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUNMLFdBQVcsRUFFWCxTQUFTLEVBQ1QsZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUFnQi9CLE1BQU0sT0FBTyxrQkFBa0I7SUEwQzdCLFlBQW9CLEtBQXdCO1FBQXhCLFVBQUssR0FBTCxLQUFLLENBQW1CO1FBekNwQyxzQkFBaUIsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO1FBQ2pDLG9CQUFlLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBSXZFLGNBQVMsR0FBWSxLQUFLLENBQUM7SUFvQ29CLENBQUM7SUEvQmhELElBQWEsT0FBTyxDQUFDLE9BQWtDO1FBQ3JELElBQUksT0FBTyxZQUFZLFdBQVcsRUFBRTtZQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQztTQUN6QjthQUFNO1lBQ0wsSUFBSSxDQUFDLElBQUksR0FBRyxPQUFPLENBQUM7U0FDckI7SUFDSCxDQUFDO0lBTUQsSUFBK0IsV0FBVztRQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDbEMsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUVELE9BQU8sWUFBWSxJQUFJLENBQUMsUUFBUSxNQUFNLElBQUksQ0FBQyxNQUFNLEtBQUssQ0FBQztJQUN6RCxDQUFDO0lBR0QsZ0JBQWdCO1FBQ2QsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7SUFDeEIsQ0FBQztJQUdELGdCQUFnQjtRQUNkLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBSUQsYUFBYTtRQUNYLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVELGdCQUFnQixDQUFJLGFBQXNCO1FBQ3hDLE9BQU8sSUFBSSxDQUFDLG1CQUFtQixDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDMUUsQ0FBQzs7K0dBbERVLGtCQUFrQjttR0FBbEIsa0JBQWtCLHdYQVFDLGdCQUFnQiwyQ0NyQ2hELDRXQVlBLCtsQkRRYztRQUNWLE9BQU8sQ0FBQyxRQUFRLEVBQUU7WUFDaEIsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQkFDbkIsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDO2dCQUN2QixPQUFPLENBQUMsZ0JBQWdCLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7YUFDbkQsQ0FBQztTQUNILENBQUM7S0FDSDsyRkFFVSxrQkFBa0I7a0JBZDlCLFNBQVM7K0JBQ0UsWUFBWSxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DO3dCQUNWLE9BQU8sQ0FBQyxRQUFRLEVBQUU7NEJBQ2hCLFVBQVUsQ0FBQyxRQUFRLEVBQUU7Z0NBQ25CLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQztnQ0FDdkIsT0FBTyxDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDOzZCQUNuRCxDQUFDO3lCQUNILENBQUM7cUJBQ0g7d0dBV1EsbUJBQW1CO3NCQUQzQixTQUFTO3VCQUFDLFNBQVMsRUFBRSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQUdqRCxPQUFPO3NCQUFuQixLQUFLO2dCQVFHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFFeUIsV0FBVztzQkFBekMsV0FBVzt1QkFBQyxZQUFZO2dCQVN6QixnQkFBZ0I7c0JBRGYsWUFBWTt1QkFBQyxZQUFZO2dCQU0xQixnQkFBZ0I7c0JBRGYsWUFBWTt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEhvc3RCaW5kaW5nLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBUZW1wbGF0ZVJlZixcbiAgVHlwZSxcbiAgVmlld0NoaWxkLFxuICBWaWV3Q29udGFpbmVyUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGFuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25jLXRvb2x0aXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9vbHRpcC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Rvb2x0aXAuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdmYWRlSW4nLCBbXG4gICAgICB0cmFuc2l0aW9uKCc6ZW50ZXInLCBbXG4gICAgICAgIHN0eWxlKHsgb3BhY2l0eTogJzAnIH0pLFxuICAgICAgICBhbmltYXRlKCcyMDBtcyBlYXNlLW91dCcsIHN0eWxlKHsgb3BhY2l0eTogJzEnIH0pKSxcbiAgICAgIF0pLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOY1Rvb2x0aXBDb21wb25lbnQge1xuICBwcml2YXRlIG1vdXNlTGVhdmVTdWJqZWN0ID0gbmV3IFN1YmplY3QoKTtcbiAgcmVhZG9ubHkgYWZ0ZXJNb3VzZUxlYXZlID0gKCkgPT4gdGhpcy5tb3VzZUxlYXZlU3ViamVjdC5hc09ic2VydmFibGUoKTtcblxuICB0ZXh0OiBzdHJpbmc7XG4gIHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBtb3VzZU92ZXI6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAVmlld0NoaWxkKCdjb250ZW50JywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmLCBzdGF0aWM6IHRydWUgfSlcbiAgcmVhZG9ubHkgY29udGVudENvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZjtcblxuICBASW5wdXQoKSBzZXQgY29udGVudChjb250ZW50OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+KSB7XG4gICAgaWYgKGNvbnRlbnQgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZikge1xuICAgICAgdGhpcy50ZW1wbGF0ZSA9IGNvbnRlbnQ7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMudGV4dCA9IGNvbnRlbnQ7XG4gICAgfVxuICB9XG5cbiAgQElucHV0KCkgcG9zaXRpb246IHN0cmluZztcbiAgQElucHV0KCkgb2Zmc2V0OiBudW1iZXI7XG4gIEBJbnB1dCgpIHN0eWxlOiAnZGVmYXVsdCcgfCAnZXJyb3InO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5zdHlsZScpIGdldCBpbmxpbmVTdHlsZSgpIHtcbiAgICBpZiAoIXRoaXMucG9zaXRpb24gfHwgIXRoaXMub2Zmc2V0KSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuXG4gICAgcmV0dXJuIGAtLW9mZnNldC0ke3RoaXMucG9zaXRpb259OiAtJHt0aGlzLm9mZnNldH1weDtgO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpXG4gIGhhbmRsZU1vdXNlRW50ZXIoKTogdm9pZCB7XG4gICAgdGhpcy5tb3VzZU92ZXIgPSB0cnVlO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpXG4gIGhhbmRsZU1vdXNlTGVhdmUoKTogdm9pZCB7XG4gICAgdGhpcy5tb3VzZU92ZXIgPSBmYWxzZTtcbiAgICB0aGlzLm1vdXNlTGVhdmVTdWJqZWN0Lm5leHQoKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIF9tYXJrRm9yQ2hlY2soKTogdm9pZCB7XG4gICAgdGhpcy5jZFJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIHByb2plY3RDb21wb25lbnQ8VD4oY29tcG9uZW50VHlwZTogVHlwZTxUPik6IFQge1xuICAgIHJldHVybiB0aGlzLmNvbnRlbnRDb250YWluZXJSZWYuY3JlYXRlQ29tcG9uZW50KGNvbXBvbmVudFR5cGUpLmluc3RhbmNlO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwidG9vbHRpcCBpblwiXG4gIFtjbGFzcy50b29sdGlwLWVycm9yXT1cInN0eWxlID09PSAnZXJyb3InXCJcbiAgW25nQ2xhc3NdPVwicG9zaXRpb25cIlxuICBAZmFkZUluXG4+XG4gIDxkaXYgY2xhc3M9XCJ0b29sdGlwLWFycm93XCI+PC9kaXY+XG4gIDxkaXYgI2NvbnRlbnQgY2xhc3M9XCJ0b29sdGlwLWlubmVyXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRleHRcIj57eyB0ZXh0IH19PC9uZy1jb250YWluZXI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRlbXBsYXRlXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwidGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==