carbon-components-angular
Version:
Next generation components
364 lines (357 loc) • 16.3 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, ChangeDetectionStrategy, HostBinding, Input, ViewChild, HostListener, NgModule } from '@angular/core';
import { PopoverContainer, PopoverModule } from 'carbon-components-angular/popover';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
/**
* Default tooltip configuration for components to populate missing interface attributes
*/
const DEFAULT_TOOLTIP_CONFIG = {
align: "bottom",
caret: true,
dropShadow: true,
highContrast: true,
isOpen: false,
enterDelayMs: 100,
leaveDelayMs: 300
};
/**
* Get started with importing the module:
*
* ```typescript
* import { TooltipModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tooltip--basic)
*/
class Tooltip 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.tooltipClass = true;
this.id = `tooltip-${Tooltip.tooltipCount++}`;
/**
* Set delay before tooltip is shown
*/
this.enterDelayMs = 100;
/**
* Set delay when tooltip disappears
*/
this.leaveDelayMs = 300;
/**
* Prevent tooltip from showing, used by icon button
*/
this.disabled = false;
this.highContrast = true;
this.dropShadow = false;
}
mouseenter(event) {
// If a mouseleave is triggered before the tooltip is displayed (before setTimeout of mouseenter completes)
// we trigger the mouseleave only avoiding having to unecessary show the tooltip
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.handleChange(true, event);
}, this.enterDelayMs);
}
mouseleave(event) {
// If a mouseleave is triggered before the tooltip is displayed (before setTimeout of mouseenter completes)
// we trigger the mouseleave only avoiding having to unecessary show the tooltip
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.handleChange(false, event);
}, this.leaveDelayMs);
}
hostkeys(event) {
if (open && event.key === "Escape") {
event.stopPropagation();
this.handleChange(false, event);
}
}
// We are not focusing on entire popover, only the trigger
handleFocus(event) {
this.handleChange(true, event);
}
handleFocusOut(event) {
this.handleChange(false, event);
}
isTemplate(value) {
return value instanceof TemplateRef;
}
/**
* Close the popover and reopen it with updated values without emitting an event
* @param changes
*/
ngOnChanges(changes) {
var _a;
// Close and reopen the popover, handle alignment/programmatic open/close
const originalState = this.isOpen;
this.handleChange(false);
// Ignore first change since content is not initialized
if ((changes.autoAlign && !changes.autoAlign.firstChange)
|| (changes.disabled && !changes.disabled.firstChange && !changes.disabled.currentValue)
// If description is set to empty string when open & autoAlign is true then set to a new value
// positioning of popover is broken because popover content ref/caret no longer exists
|| changes.description) {
/**
* When `disabled` is `true`, popover content node is removed. So when re-enabling `disabled`,
* we manually update view so querySelector can detect the popover content node.
* Otherwise, the position of the popover will be incorrect when autoAlign is enabled.
*/
this.changeDetectorRef.detectChanges();
// Reset the inline styles
this.popoverContentRef = this.elementRef.nativeElement.querySelector(".cds--popover-content");
(_a = this.popoverContentRef) === null || _a === void 0 ? void 0 : _a.setAttribute("style", "");
this.caretRef = this.elementRef.nativeElement.querySelector("span.cds--popover-caret");
}
this.handleChange(originalState);
}
/**
* Check for any changes in the projected content & apply accessibility attribute if needed
*/
ngAfterContentChecked() {
if (this.wrapper) {
const buttonElement = this.wrapper.nativeElement.querySelector("button");
if (buttonElement && !buttonElement.getAttribute("aria-labelledby")) {
buttonElement.setAttribute("aria-labelledby", this.id);
}
}
}
}
Tooltip.tooltipCount = 0;
Tooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tooltip, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
Tooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: { id: "id", enterDelayMs: "enterDelayMs", leaveDelayMs: "leaveDelayMs", disabled: "disabled", description: "description", templateContext: "templateContext" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)", "keyup": "hostkeys($event)", "focusin": "handleFocus($event)", "focusout": "handleFocusOut($event)" }, properties: { "class.cds--tooltip": "this.tooltipClass" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<span #contentWrapper>
<ng-content></ng-content>
</span>
<span
*ngIf="description"
class="cds--popover"
[id]="id"
[attr.aria-hidden]="!isOpen"
role="tooltip">
<ng-container *ngIf="!disabled">
<span class="cds--popover-content cds--tooltip-content">
<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>
</ng-container>
</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: Tooltip, decorators: [{
type: Component,
args: [{
selector: "cds-tooltip, ibm-tooltip",
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<span #contentWrapper>
<ng-content></ng-content>
</span>
<span
*ngIf="description"
class="cds--popover"
[id]="id"
[attr.aria-hidden]="!isOpen"
role="tooltip">
<ng-container *ngIf="!disabled">
<span class="cds--popover-content cds--tooltip-content">
<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>
</ng-container>
</span>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tooltipClass: [{
type: HostBinding,
args: ["class.cds--tooltip"]
}], id: [{
type: Input
}], enterDelayMs: [{
type: Input
}], leaveDelayMs: [{
type: Input
}], disabled: [{
type: Input
}], description: [{
type: Input
}], templateContext: [{
type: Input
}], wrapper: [{
type: ViewChild,
args: ["contentWrapper"]
}], mouseenter: [{
type: HostListener,
args: ["mouseenter", ["$event"]]
}], mouseleave: [{
type: HostListener,
args: ["mouseleave", ["$event"]]
}], hostkeys: [{
type: HostListener,
args: ["keyup", ["$event"]]
}], handleFocus: [{
type: HostListener,
args: ["focusin", ["$event"]]
}], handleFocusOut: [{
type: HostListener,
args: ["focusout", ["$event"]]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { TooltipModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tooltip-definition--basic)
*/
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"]]
}] } });
class TooltipModule {
}
TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, declarations: [Tooltip,
TooltipDefinition], imports: [CommonModule, PopoverModule], exports: [Tooltip,
TooltipDefinition] });
TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, imports: [CommonModule, PopoverModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Tooltip,
TooltipDefinition
],
exports: [
Tooltip,
TooltipDefinition
],
imports: [CommonModule, PopoverModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DEFAULT_TOOLTIP_CONFIG, Tooltip, TooltipDefinition, TooltipModule };
//# sourceMappingURL=carbon-components-angular-tooltip.mjs.map