carbon-components-angular
Version:
Next generation components
132 lines • 12.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, HostListener, Input, TemplateRef } from "@angular/core";
import { PopoverContainer } from "carbon-components-angular/popover";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Get started with importing the module:
*
* ```typescript
* import { TooltipModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tooltip-definition--basic)
*/
export class TooltipDefinition extends PopoverContainer {
constructor(elementRef, ngZone, renderer, changeDetectorRef) {
super(elementRef, ngZone, renderer, changeDetectorRef);
this.elementRef = elementRef;
this.ngZone = ngZone;
this.renderer = renderer;
this.changeDetectorRef = changeDetectorRef;
this.id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;
this.openOnHover = false;
this.highContrast = true;
this.dropShadow = false;
}
onBlur(event) {
this.handleChange(false, event);
}
onClick(event) {
this.handleChange(!this.isOpen, event);
}
hostkeys(event) {
if (this.isOpen && event.key === "Escape") {
event.stopPropagation();
this.handleChange(false, event);
}
}
mouseleave(event) {
this.handleChange(false, event);
}
mouseenter(event) {
if (this.openOnHover) {
this.handleChange(true, event);
}
}
onFocus(event) {
this.handleChange(true, event);
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
TooltipDefinition.tooltipCount = 0;
TooltipDefinition.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDefinition, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TooltipDefinition.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDefinition, selector: "cds-tooltip-definition, ibm-tooltip-definition", inputs: { id: "id", description: "description", templateContext: "templateContext", openOnHover: "openOnHover" }, host: { listeners: { "keyup": "hostkeys($event)", "mouseleave": "mouseleave($event)", "mouseenter": "mouseenter($event)", "focusin": "onFocus($event)" } }, usesInheritance: true, ngImport: i0, template: `
<button
class="cds--definition-term"
[attr.aria-controls]="id"
[attr.aria-expanded]="isOpen"
[attr.aria-describedby]="isOpen ? id : null"
(blur)="onBlur($event)"
(click)="onClick($event)"
type="button">
<ng-content></ng-content>
</button>
<span
*ngIf="description"
class="cds--popover"
[id]="id"
[attr.aria-hidden]="!isOpen"
role="tooltip">
<span class="cds--popover-content cds--definition-tooltip" aria-live="polite">
<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
</span>
<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
</span>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDefinition, decorators: [{
type: Component,
args: [{
selector: "cds-tooltip-definition, ibm-tooltip-definition",
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<button
class="cds--definition-term"
[attr.aria-controls]="id"
[attr.aria-expanded]="isOpen"
[attr.aria-describedby]="isOpen ? id : null"
(blur)="onBlur($event)"
(click)="onClick($event)"
type="button">
<ng-content></ng-content>
</button>
<span
*ngIf="description"
class="cds--popover"
[id]="id"
[attr.aria-hidden]="!isOpen"
role="tooltip">
<span class="cds--popover-content cds--definition-tooltip" aria-live="polite">
<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
</span>
<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
</span>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
type: Input
}], description: [{
type: Input
}], templateContext: [{
type: Input
}], openOnHover: [{
type: Input
}], hostkeys: [{
type: HostListener,
args: ["keyup", ["$event"]]
}], mouseleave: [{
type: HostListener,
args: ["mouseleave", ["$event"]]
}], mouseenter: [{
type: HostListener,
args: ["mouseenter", ["$event"]]
}], onFocus: [{
type: HostListener,
args: ["focusin", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmaW5pdGlvbi10b29wdGlwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90b29sdGlwL2RlZmluaXRpb24tdG9vcHRpcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLHVCQUF1QixFQUV2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFHTCxXQUFXLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7OztBQUVyRTs7Ozs7Ozs7R0FRRztBQThCSCxNQUFNLE9BQU8saUJBQWtCLFNBQVEsZ0JBQWdCO0lBZ0J0RCxZQUNXLFVBQXNCLEVBQ3RCLE1BQWMsRUFDZCxRQUFtQixFQUNuQixpQkFBb0M7UUFFOUMsS0FBSyxDQUFDLFVBQVUsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixDQUFDLENBQUM7UUFMN0MsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBakJ0QyxPQUFFLEdBQUcsc0JBQXNCLGlCQUFpQixDQUFDLFlBQVksRUFBRSxFQUFFLENBQUM7UUFXOUQsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFTNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFZO1FBQ2xCLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFFRCxPQUFPLENBQUMsS0FBWTtRQUNuQixJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBR0QsUUFBUSxDQUFDLEtBQW9CO1FBQzVCLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUMxQyxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDeEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7U0FDaEM7SUFDRixDQUFDO0lBR0QsVUFBVSxDQUFDLEtBQUs7UUFDZixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBR0QsVUFBVSxDQUFDLEtBQUs7UUFDZixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUM7U0FDL0I7SUFDRixDQUFDO0lBR0QsT0FBTyxDQUFDLEtBQUs7UUFDWixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRU0sVUFBVSxDQUFDLEtBQUs7UUFDdEIsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO0lBQ3JDLENBQUM7O0FBN0RNLDhCQUFZLEdBQUcsQ0FBQyxDQUFDOzhHQURaLGlCQUFpQjtrR0FBakIsaUJBQWlCLDJYQTFCbkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXdCVDsyRkFFVyxpQkFBaUI7a0JBN0I3QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxnREFBZ0Q7b0JBQzFELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXdCVDtpQkFDRDs4S0FJUyxFQUFFO3NCQUFWLEtBQUs7Z0JBS0csV0FBVztzQkFBbkIsS0FBSztnQkFJRyxlQUFlO3NCQUF2QixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBc0JOLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBU2pDLFVBQVU7c0JBRFQsWUFBWTt1QkFBQyxZQUFZLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBTXRDLFVBQVU7c0JBRFQsWUFBWTt1QkFBQyxZQUFZLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBUXRDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxTQUFTLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcblx0Q2hhbmdlRGV0ZWN0b3JSZWYsXG5cdENvbXBvbmVudCxcblx0RWxlbWVudFJlZixcblx0SG9zdExpc3RlbmVyLFxuXHRJbnB1dCxcblx0Tmdab25lLFxuXHRSZW5kZXJlcjIsXG5cdFRlbXBsYXRlUmVmXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBQb3BvdmVyQ29udGFpbmVyIH0gZnJvbSBcImNhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXIvcG9wb3ZlclwiO1xuXG4vKipcbiAqIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgVG9vbHRpcE1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy10b29sdGlwLWRlZmluaXRpb24tLWJhc2ljKVxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLXRvb2x0aXAtZGVmaW5pdGlvbiwgaWJtLXRvb2x0aXAtZGVmaW5pdGlvblwiLFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcblx0dGVtcGxhdGU6IGBcblx0XHQ8YnV0dG9uXG5cdFx0XHRjbGFzcz1cImNkcy0tZGVmaW5pdGlvbi10ZXJtXCJcblx0XHRcdFthdHRyLmFyaWEtY29udHJvbHNdPVwiaWRcIlxuXHRcdFx0W2F0dHIuYXJpYS1leHBhbmRlZF09XCJpc09wZW5cIlxuXHRcdFx0W2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCJpc09wZW4gPyBpZCA6IG51bGxcIlxuXHRcdFx0KGJsdXIpPVwib25CbHVyKCRldmVudClcIlxuXHRcdFx0KGNsaWNrKT1cIm9uQ2xpY2soJGV2ZW50KVwiXG5cdFx0XHR0eXBlPVwiYnV0dG9uXCI+XG5cdFx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0PC9idXR0b24+XG5cdFx0PHNwYW5cblx0XHRcdCpuZ0lmPVwiZGVzY3JpcHRpb25cIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLXBvcG92ZXJcIlxuXHRcdFx0W2lkXT1cImlkXCJcblx0XHRcdFthdHRyLmFyaWEtaGlkZGVuXT1cIiFpc09wZW5cIlxuXHRcdFx0cm9sZT1cInRvb2x0aXBcIj5cblx0XHRcdDxzcGFuIGNsYXNzPVwiY2RzLS1wb3BvdmVyLWNvbnRlbnQgY2RzLS1kZWZpbml0aW9uLXRvb2x0aXBcIiBhcmlhLWxpdmU9XCJwb2xpdGVcIj5cblx0XHRcdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1RlbXBsYXRlKGRlc2NyaXB0aW9uKVwiPnt7ZGVzY3JpcHRpb259fTwvbmctY29udGFpbmVyPlxuXHRcdFx0XHQ8bmctdGVtcGxhdGUgKm5nSWY9XCJpc1RlbXBsYXRlKGRlc2NyaXB0aW9uKVwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImRlc2NyaXB0aW9uXCIgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiB0ZW1wbGF0ZUNvbnRleHQgfVwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHRcdDxzcGFuICpuZ0lmPVwiYXV0b0FsaWduXCIgY2xhc3M9XCJjZHMtLXBvcG92ZXItY2FyZXQgY2RzLS1wb3BvdmVyLS1hdXRvLWFsaWduXCI+PC9zcGFuPlxuXHRcdFx0PC9zcGFuPlxuXHRcdFx0PHNwYW4gKm5nSWY9XCIhYXV0b0FsaWduXCIgY2xhc3M9XCJjZHMtLXBvcG92ZXItY2FyZXRcIj48L3NwYW4+XG5cdFx0PC9zcGFuPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFRvb2x0aXBEZWZpbml0aW9uIGV4dGVuZHMgUG9wb3ZlckNvbnRhaW5lciB7XG5cdHN0YXRpYyB0b29sdGlwQ291bnQgPSAwO1xuXG5cdEBJbnB1dCgpIGlkID0gYHRvb2x0aXAtZGVmaW5pdGlvbi0ke1Rvb2x0aXBEZWZpbml0aW9uLnRvb2x0aXBDb3VudCsrfWA7XG5cblx0LyoqXG5cdCAqIFRoZSBzdHJpbmcgb3IgdGVtcGxhdGUgY29udGVudCB0byBiZSBleHBvc2VkIGJ5IHRoZSB0b29sdGlwLlxuXHQgKi9cblx0QElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT47XG5cdC8qKlxuXHQgKiBPcHRpb25hbCBkYXRhIGZvciB0ZW1wbGF0ZXMgcGFzc2VkIGFzIGltcGxpY2l0IGNvbnRleHRcblx0ICovXG5cdEBJbnB1dCgpIHRlbXBsYXRlQ29udGV4dDogYW55O1xuXG5cdEBJbnB1dCgpIG9wZW5PbkhvdmVyID0gZmFsc2U7XG5cblx0Y29uc3RydWN0b3IoXG5cdFx0cHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG5cdFx0cHJvdGVjdGVkIG5nWm9uZTogTmdab25lLFxuXHRcdHByb3RlY3RlZCByZW5kZXJlcjogUmVuZGVyZXIyLFxuXHRcdHByb3RlY3RlZCBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWZcblx0KSB7XG5cdFx0c3VwZXIoZWxlbWVudFJlZiwgbmdab25lLCByZW5kZXJlciwgY2hhbmdlRGV0ZWN0b3JSZWYpO1xuXHRcdHRoaXMuaGlnaENvbnRyYXN0ID0gdHJ1ZTtcblx0XHR0aGlzLmRyb3BTaGFkb3cgPSBmYWxzZTtcblx0fVxuXG5cdG9uQmx1cihldmVudDogRXZlbnQpIHtcblx0XHR0aGlzLmhhbmRsZUNoYW5nZShmYWxzZSwgZXZlbnQpO1xuXHR9XG5cblx0b25DbGljayhldmVudDogRXZlbnQpIHtcblx0XHR0aGlzLmhhbmRsZUNoYW5nZSghdGhpcy5pc09wZW4sIGV2ZW50KTtcblx0fVxuXG5cdEBIb3N0TGlzdGVuZXIoXCJrZXl1cFwiLCBbXCIkZXZlbnRcIl0pXG5cdGhvc3RrZXlzKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG5cdFx0aWYgKHRoaXMuaXNPcGVuICYmIGV2ZW50LmtleSA9PT0gXCJFc2NhcGVcIikge1xuXHRcdFx0ZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cdFx0XHR0aGlzLmhhbmRsZUNoYW5nZShmYWxzZSwgZXZlbnQpO1xuXHRcdH1cblx0fVxuXG5cdEBIb3N0TGlzdGVuZXIoXCJtb3VzZWxlYXZlXCIsIFtcIiRldmVudFwiXSlcblx0bW91c2VsZWF2ZShldmVudCkge1xuXHRcdHRoaXMuaGFuZGxlQ2hhbmdlKGZhbHNlLCBldmVudCk7XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKFwibW91c2VlbnRlclwiLCBbXCIkZXZlbnRcIl0pXG5cdG1vdXNlZW50ZXIoZXZlbnQpIHtcblx0XHRpZiAodGhpcy5vcGVuT25Ib3Zlcikge1xuXHRcdFx0dGhpcy5oYW5kbGVDaGFuZ2UodHJ1ZSwgZXZlbnQpO1xuXHRcdH1cblx0fVxuXG5cdEBIb3N0TGlzdGVuZXIoXCJmb2N1c2luXCIsIFtcIiRldmVudFwiXSlcblx0b25Gb2N1cyhldmVudCkge1xuXHRcdHRoaXMuaGFuZGxlQ2hhbmdlKHRydWUsIGV2ZW50KTtcblx0fVxuXG5cdHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlKSB7XG5cdFx0cmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG5cdH1cbn1cbiJdfQ==