@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
28 lines • 6.26 kB
JavaScript
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Subject } from 'rxjs';
import { TooltipComponent } from '../tooltip/index';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../directives/click-outside/click-outside.directive";
let uniquePopoverId = 0;
export class PopoverComponent extends TooltipComponent {
constructor() {
super();
/** Define a unique id for each popover */
this.id = `ux-popover-${++uniquePopoverId}`;
/** This will emit an event any time the user clicks outside the popover */
this.clickOutside$ = new Subject();
}
/** This will update the title of the popover and trigger change detection */
setTitle(title) {
this.title = title;
this._changeDetectorRef.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: PopoverComponent, selector: "ux-popover", usesInheritance: true, ngImport: i0, template: "<div class=\"popover show\" [ngClass]=\"[positionClass, 'popover-align-' + alignment, customClass]\" [id]=\"id\" [attr.role]=\"role\" (uxClickOutside)=\"clickOutside$.next($event)\">\n <div class=\"arrow\"></div>\n @if (title) {\n <h3 class=\"popover-title\">{{ title }}</h3>\n }\n <div class=\"popover-content\" (uxResize)=\"reposition()\">\n @if (!isTemplateRef) {\n {{ content }}\n }\n @if (isTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"$any(content)\" [ngTemplateOutletContext]=\"context\"></ng-container>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[uxClickOutside]", outputs: ["uxClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PopoverComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"popover show\" [ngClass]=\"[positionClass, 'popover-align-' + alignment, customClass]\" [id]=\"id\" [attr.role]=\"role\" (uxClickOutside)=\"clickOutside$.next($event)\">\n <div class=\"arrow\"></div>\n @if (title) {\n <h3 class=\"popover-title\">{{ title }}</h3>\n }\n <div class=\"popover-content\" (uxResize)=\"reposition()\">\n @if (!isTemplateRef) {\n {{ content }}\n }\n @if (isTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"$any(content)\" [ngTemplateOutletContext]=\"context\"></ng-container>\n }\n </div>\n</div>\n" }]
}], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9wb3BvdmVyL3BvcG92ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcG9wb3Zlci9wb3BvdmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7OztBQUVwRCxJQUFJLGVBQWUsR0FBRyxDQUFDLENBQUM7QUFPeEIsTUFBTSxPQUFPLGdCQUFpQixTQUFRLGdCQUFnQjtJQVdwRDtRQUNFLEtBQUssRUFBRSxDQUFDO1FBVlYsMENBQTBDO1FBQzFDLE9BQUUsR0FBVyxjQUFjLEVBQUUsZUFBZSxFQUFFLENBQUM7UUFLL0MsMkVBQTJFO1FBQzNFLGtCQUFhLEdBQUcsSUFBSSxPQUFPLEVBQWMsQ0FBQztJQUkxQyxDQUFDO0lBRUQsNkVBQTZFO0lBQzdFLFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN6QyxDQUFDOytHQW5CVSxnQkFBZ0I7bUdBQWhCLGdCQUFnQix5RUNYN0IsNGpCQWNBOzs0RkRIYSxnQkFBZ0I7a0JBTDVCLFNBQVM7K0JBQ0UsWUFBWSxtQkFFTCx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgVG9vbHRpcENvbXBvbmVudCB9IGZyb20gJy4uL3Rvb2x0aXAvaW5kZXgnO1xuXG5sZXQgdW5pcXVlUG9wb3ZlcklkID0gMDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndXgtcG9wb3ZlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9wb3BvdmVyLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgUG9wb3ZlckNvbXBvbmVudCBleHRlbmRzIFRvb2x0aXBDb21wb25lbnQge1xuXG4gIC8qKiBEZWZpbmUgYSB1bmlxdWUgaWQgZm9yIGVhY2ggcG9wb3ZlciAqL1xuICBpZDogc3RyaW5nID0gYHV4LXBvcG92ZXItJHsrK3VuaXF1ZVBvcG92ZXJJZH1gO1xuXG4gIC8qKiBJZiBzcGVjaWZpZWQgYWxsb3dzIHRoZSBwb3BvdmVyIHRvIHNob3cgYSB0aXRsZSAqL1xuICB0aXRsZTogc3RyaW5nO1xuXG4gIC8qKiBUaGlzIHdpbGwgZW1pdCBhbiBldmVudCBhbnkgdGltZSB0aGUgdXNlciBjbGlja3Mgb3V0c2lkZSB0aGUgcG9wb3ZlciAqL1xuICBjbGlja091dHNpZGUkID0gbmV3IFN1YmplY3Q8TW91c2VFdmVudD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgLyoqIFRoaXMgd2lsbCB1cGRhdGUgdGhlIHRpdGxlIG9mIHRoZSBwb3BvdmVyIGFuZCB0cmlnZ2VyIGNoYW5nZSBkZXRlY3Rpb24gKi9cbiAgc2V0VGl0bGUodGl0bGU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMudGl0bGUgPSB0aXRsZTtcbiAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufSIsIjxkaXYgY2xhc3M9XCJwb3BvdmVyIHNob3dcIiBbbmdDbGFzc109XCJbcG9zaXRpb25DbGFzcywgJ3BvcG92ZXItYWxpZ24tJyArIGFsaWdubWVudCwgY3VzdG9tQ2xhc3NdXCIgW2lkXT1cImlkXCIgW2F0dHIucm9sZV09XCJyb2xlXCIgKHV4Q2xpY2tPdXRzaWRlKT1cImNsaWNrT3V0c2lkZSQubmV4dCgkZXZlbnQpXCI+XG4gIDxkaXYgY2xhc3M9XCJhcnJvd1wiPjwvZGl2PlxuICBAaWYgKHRpdGxlKSB7XG4gICAgPGgzIGNsYXNzPVwicG9wb3Zlci10aXRsZVwiPnt7IHRpdGxlIH19PC9oMz5cbiAgfVxuICA8ZGl2IGNsYXNzPVwicG9wb3Zlci1jb250ZW50XCIgKHV4UmVzaXplKT1cInJlcG9zaXRpb24oKVwiPlxuICAgIEBpZiAoIWlzVGVtcGxhdGVSZWYpIHtcbiAgICAgIHt7IGNvbnRlbnQgfX1cbiAgICB9XG4gICAgQGlmIChpc1RlbXBsYXRlUmVmKSB7XG4gICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIiRhbnkoY29udGVudClcIiBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwiY29udGV4dFwiPjwvbmctY29udGFpbmVyPlxuICAgIH1cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==