carbon-components-angular
Version:
Next generation components
113 lines • 11.1 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.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);
}
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" }, host: { listeners: { "keyup": "hostkeys($event)", "mouseleave": "mouseleave($event)" } }, usesInheritance: true, ngImport: i0, template: `
<button
class="cds--definition-term"
[attr.aria-controls]="id"
[attr.aria-expanded]="isOpen"
(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">
<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"
(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">
<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
}], hostkeys: [{
type: HostListener,
args: ["keyup", ["$event"]]
}], mouseleave: [{
type: HostListener,
args: ["mouseleave", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmaW5pdGlvbi10b29wdGlwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90b29sdGlwL2RlZmluaXRpb24tdG9vcHRpcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLHVCQUF1QixFQUV2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFHTCxXQUFXLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7OztBQUVyRTs7Ozs7Ozs7R0FRRztBQTZCSCxNQUFNLE9BQU8saUJBQWtCLFNBQVEsZ0JBQWdCO0lBY3RELFlBQ1csVUFBc0IsRUFDdEIsTUFBYyxFQUNkLFFBQW1CLEVBQ25CLGlCQUFvQztRQUU5QyxLQUFLLENBQUMsVUFBVSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsaUJBQWlCLENBQUMsQ0FBQztRQUw3QyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ25CLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFmdEMsT0FBRSxHQUFHLHNCQUFzQixpQkFBaUIsQ0FBQyxZQUFZLEVBQUUsRUFBRSxDQUFDO1FBa0J0RSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQVk7UUFDbEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELE9BQU8sQ0FBQyxLQUFZO1FBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFHRCxRQUFRLENBQUMsS0FBb0I7UUFDNUIsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssUUFBUSxFQUFFO1lBQzFDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztTQUNoQztJQUNGLENBQUM7SUFHRCxVQUFVLENBQUMsS0FBSztRQUNmLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFFTSxVQUFVLENBQUMsS0FBSztRQUN0QixPQUFPLEtBQUssWUFBWSxXQUFXLENBQUM7SUFDckMsQ0FBQzs7QUEvQ00sOEJBQVksR0FBRyxDQUFDLENBQUM7OEdBRFosaUJBQWlCO2tHQUFqQixpQkFBaUIsNlJBekJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUF1QlQ7MkZBRVcsaUJBQWlCO2tCQTVCN0IsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsZ0RBQWdEO29CQUMxRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXVCVDtpQkFDRDs4S0FJUyxFQUFFO3NCQUFWLEtBQUs7Z0JBS0csV0FBVztzQkFBbkIsS0FBSztnQkFJRyxlQUFlO3NCQUF2QixLQUFLO2dCQXNCTixRQUFRO3NCQURQLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVNqQyxVQUFVO3NCQURULFlBQVk7dUJBQUMsWUFBWSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG5cdENoYW5nZURldGVjdG9yUmVmLFxuXHRDb21wb25lbnQsXG5cdEVsZW1lbnRSZWYsXG5cdEhvc3RMaXN0ZW5lcixcblx0SW5wdXQsXG5cdE5nWm9uZSxcblx0UmVuZGVyZXIyLFxuXHRUZW1wbGF0ZVJlZlxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgUG9wb3ZlckNvbnRhaW5lciB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL3BvcG92ZXJcIjtcblxuLyoqXG4gKiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IFRvb2x0aXBNb2R1bGUgfSBmcm9tICdjYXJib24tY29tcG9uZW50cy1hbmd1bGFyJztcbiAqIGBgYFxuICpcbiAqIFtTZWUgZGVtb10oLi4vLi4vP3BhdGg9L3N0b3J5L2NvbXBvbmVudHMtdG9vbHRpcC1kZWZpbml0aW9uLS1iYXNpYylcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy10b29sdGlwLWRlZmluaXRpb24sIGlibS10b29sdGlwLWRlZmluaXRpb25cIixcblx0Y2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGJ1dHRvblxuXHRcdFx0Y2xhc3M9XCJjZHMtLWRlZmluaXRpb24tdGVybVwiXG5cdFx0XHRbYXR0ci5hcmlhLWNvbnRyb2xzXT1cImlkXCJcblx0XHRcdFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiaXNPcGVuXCJcblx0XHRcdChibHVyKT1cIm9uQmx1cigkZXZlbnQpXCJcblx0XHRcdChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIlxuXHRcdFx0dHlwZT1cImJ1dHRvblwiPlxuXHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdDwvYnV0dG9uPlxuXHRcdDxzcGFuXG5cdFx0XHQqbmdJZj1cImRlc2NyaXB0aW9uXCJcblx0XHRcdGNsYXNzPVwiY2RzLS1wb3BvdmVyXCJcblx0XHRcdFtpZF09XCJpZFwiXG5cdFx0XHRbYXR0ci5hcmlhLWhpZGRlbl09XCJpc09wZW5cIlxuXHRcdFx0cm9sZT1cInRvb2x0aXBcIj5cblx0XHRcdDxzcGFuIGNsYXNzPVwiY2RzLS1wb3BvdmVyLWNvbnRlbnQgY2RzLS1kZWZpbml0aW9uLXRvb2x0aXBcIj5cblx0XHRcdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1RlbXBsYXRlKGRlc2NyaXB0aW9uKVwiPnt7ZGVzY3JpcHRpb259fTwvbmctY29udGFpbmVyPlxuXHRcdFx0XHQ8bmctdGVtcGxhdGUgKm5nSWY9XCJpc1RlbXBsYXRlKGRlc2NyaXB0aW9uKVwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImRlc2NyaXB0aW9uXCIgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiB0ZW1wbGF0ZUNvbnRleHQgfVwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHRcdDxzcGFuICpuZ0lmPVwiYXV0b0FsaWduXCIgY2xhc3M9XCJjZHMtLXBvcG92ZXItY2FyZXQgY2RzLS1wb3BvdmVyLS1hdXRvLWFsaWduXCI+PC9zcGFuPlxuXHRcdFx0PC9zcGFuPlxuXHRcdFx0PHNwYW4gKm5nSWY9XCIhYXV0b0FsaWduXCIgY2xhc3M9XCJjZHMtLXBvcG92ZXItY2FyZXRcIj48L3NwYW4+XG5cdFx0PC9zcGFuPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFRvb2x0aXBEZWZpbml0aW9uIGV4dGVuZHMgUG9wb3ZlckNvbnRhaW5lciB7XG5cdHN0YXRpYyB0b29sdGlwQ291bnQgPSAwO1xuXG5cdEBJbnB1dCgpIGlkID0gYHRvb2x0aXAtZGVmaW5pdGlvbi0ke1Rvb2x0aXBEZWZpbml0aW9uLnRvb2x0aXBDb3VudCsrfWA7XG5cblx0LyoqXG5cdCAqIFRoZSBzdHJpbmcgb3IgdGVtcGxhdGUgY29udGVudCB0byBiZSBleHBvc2VkIGJ5IHRoZSB0b29sdGlwLlxuXHQgKi9cblx0QElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT47XG5cdC8qKlxuXHQgKiBPcHRpb25hbCBkYXRhIGZvciB0ZW1wbGF0ZXMgcGFzc2VkIGFzIGltcGxpY2l0IGNvbnRleHRcblx0ICovXG5cdEBJbnB1dCgpIHRlbXBsYXRlQ29udGV4dDogYW55O1xuXG5cdGNvbnN0cnVjdG9yKFxuXHRcdHByb3RlY3RlZCBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuXHRcdHByb3RlY3RlZCBuZ1pvbmU6IE5nWm9uZSxcblx0XHRwcm90ZWN0ZWQgcmVuZGVyZXI6IFJlbmRlcmVyMixcblx0XHRwcm90ZWN0ZWQgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmXG5cdCkge1xuXHRcdHN1cGVyKGVsZW1lbnRSZWYsIG5nWm9uZSwgcmVuZGVyZXIsIGNoYW5nZURldGVjdG9yUmVmKTtcblx0XHR0aGlzLmhpZ2hDb250cmFzdCA9IHRydWU7XG5cdFx0dGhpcy5kcm9wU2hhZG93ID0gZmFsc2U7XG5cdH1cblxuXHRvbkJsdXIoZXZlbnQ6IEV2ZW50KSB7XG5cdFx0dGhpcy5oYW5kbGVDaGFuZ2UoZmFsc2UsIGV2ZW50KTtcblx0fVxuXG5cdG9uQ2xpY2soZXZlbnQ6IEV2ZW50KSB7XG5cdFx0dGhpcy5oYW5kbGVDaGFuZ2UoIXRoaXMuaXNPcGVuLCBldmVudCk7XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKFwia2V5dXBcIiwgW1wiJGV2ZW50XCJdKVxuXHRob3N0a2V5cyhldmVudDogS2V5Ym9hcmRFdmVudCkge1xuXHRcdGlmICh0aGlzLmlzT3BlbiAmJiBldmVudC5rZXkgPT09IFwiRXNjYXBlXCIpIHtcblx0XHRcdGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuXHRcdFx0dGhpcy5oYW5kbGVDaGFuZ2UoZmFsc2UsIGV2ZW50KTtcblx0XHR9XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKFwibW91c2VsZWF2ZVwiLCBbXCIkZXZlbnRcIl0pXG5cdG1vdXNlbGVhdmUoZXZlbnQpIHtcblx0XHR0aGlzLmhhbmRsZUNoYW5nZShmYWxzZSwgZXZlbnQpO1xuXHR9XG5cblx0cHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcblx0XHRyZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcblx0fVxufVxuIl19