carbon-components-angular
Version:
Next generation components
108 lines • 13 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, HostBinding, HostListener, Input } from "@angular/core";
import { fromEvent } from "rxjs";
import { PopoverContainer } from "carbon-components-angular/popover";
import { ToggletipButton } from "./toggletip-button.directive";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/popover";
/**
* Get started with importing the module:
*
* ```typescript
* import { ToggletipModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-toggletip--basic)
*/
export class Toggletip extends PopoverContainer {
constructor(hostElement, ngZone, renderer, changeDetectorRef) {
super(hostElement, ngZone, renderer, changeDetectorRef);
this.hostElement = hostElement;
this.ngZone = ngZone;
this.renderer = renderer;
this.changeDetectorRef = changeDetectorRef;
this.id = `tooltip-${Toggletip.toggletipCounter++}`;
this.toggletipClass = true;
this.isOpen = false;
this.documentClick = this.handleFocusOut.bind(this);
this.highContrast = true;
this.dropShadow = false;
}
ngAfterViewInit() {
this.initializeReferences();
// Listen for click events on trigger
fromEvent(this.btn.nativeElement, "click")
.subscribe((event) => {
// Add/Remove event listener based on isOpen to improve performance when there
// are a lot of toggletips
if (this.isOpen) {
document.removeEventListener("click", this.documentClick);
}
else {
document.addEventListener("click", this.documentClick);
}
this.handleExpansion(!this.isOpen, event);
});
// Toggletip is open on initial render, add 'click' event listener to document so users can close
if (this.isOpen) {
document.addEventListener("click", this.documentClick);
}
if (this.btn) {
this.renderer.setAttribute(this.btn.nativeElement, "aria-controls", this.id);
}
}
hostkeys(event) {
if (open && event.key === "Escape") {
event.stopPropagation();
this.handleExpansion(false, event);
}
}
handleFocusOut(event) {
if (!this.hostElement.nativeElement.contains(event.target)) {
this.handleExpansion(false, event);
}
}
handleExpansion(state = false, event) {
this.handleChange(state, event);
if (this.btn) {
this.renderer.setAttribute(this.btn.nativeElement, "aria-expanded", this.isOpen.toString());
}
}
}
Toggletip.toggletipCounter = 0;
Toggletip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggletip, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
Toggletip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: { id: "id", isOpen: "isOpen" }, host: { listeners: { "keyup": "hostkeys($event)" }, properties: { "class.cds--toggletip": "this.toggletipClass", "class.cds--toggletip--open": "this.isOpen" } }, queries: [{ propertyName: "btn", first: true, predicate: ToggletipButton, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
<ng-content select="[cdsToggletipButton]"></ng-content>
<cds-popover-content>
<ng-content select="[cdsToggletipContent]"></ng-content>
</cds-popover-content>
`, isInline: true, dependencies: [{ kind: "component", type: i1.PopoverContent, selector: "cds-popover-content, ibm-popover-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Toggletip, decorators: [{
type: Component,
args: [{
selector: "cds-toggletip, ibm-toggletip",
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-content select="[cdsToggletipButton]"></ng-content>
<cds-popover-content>
<ng-content select="[cdsToggletipContent]"></ng-content>
</cds-popover-content>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
type: Input
}], toggletipClass: [{
type: HostBinding,
args: ["class.cds--toggletip"]
}], isOpen: [{
type: HostBinding,
args: ["class.cds--toggletip--open"]
}, {
type: Input
}], btn: [{
type: ContentChild,
args: [ToggletipButton, { read: ElementRef }]
}], hostkeys: [{
type: HostListener,
args: ["keyup", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xldGlwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90b2dnbGV0aXAvdG9nZ2xldGlwLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRU4sdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osVUFBVSxFQUNWLFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUdMLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDakMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDckUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7QUFFL0Q7Ozs7Ozs7O0dBUUc7QUFXSCxNQUFNLE9BQU8sU0FBVSxTQUFRLGdCQUFnQjtJQVk5QyxZQUNXLFdBQXVCLEVBQ3ZCLE1BQWMsRUFDZCxRQUFtQixFQUNuQixpQkFBb0M7UUFFOUMsS0FBSyxDQUFDLFdBQVcsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixDQUFDLENBQUM7UUFMOUMsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUNkLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDbkIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQWJ0QyxPQUFFLEdBQUcsV0FBVyxTQUFTLENBQUMsZ0JBQWdCLEVBQUUsRUFBRSxDQUFDO1FBRW5CLG1CQUFjLEdBQUcsSUFBSSxDQUFDO1FBQ1AsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUluRSxrQkFBYSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBUzlDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxlQUFlO1FBQ2QsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7UUFFNUIscUNBQXFDO1FBQ3JDLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxPQUFPLENBQUM7YUFDeEMsU0FBUyxDQUFDLENBQUMsS0FBWSxFQUFFLEVBQUU7WUFDM0IsOEVBQThFO1lBQzlFLDBCQUEwQjtZQUMxQixJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7Z0JBQ2hCLFFBQVEsQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO2FBQzFEO2lCQUFNO2dCQUNOLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO2FBQ3ZEO1lBRUQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDM0MsQ0FBQyxDQUFDLENBQUM7UUFFSixpR0FBaUc7UUFDakcsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2hCLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ3ZEO1FBRUQsSUFBSSxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ2IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsZUFBZSxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUM3RTtJQUNGLENBQUM7SUFHRCxRQUFRLENBQUMsS0FBb0I7UUFDNUIsSUFBSSxJQUFJLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxRQUFRLEVBQUU7WUFDbkMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ25DO0lBQ0YsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFLO1FBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQzNELElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ25DO0lBQ0YsQ0FBQztJQUVPLGVBQWUsQ0FBQyxLQUFLLEdBQUcsS0FBSyxFQUFFLEtBQVk7UUFDbEQsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDaEMsSUFBSSxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ2IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsZUFBZSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztTQUM1RjtJQUNGLENBQUM7O0FBcEVNLDBCQUFnQixHQUFHLENBQUMsQ0FBQztzR0FEaEIsU0FBUzswRkFBVCxTQUFTLCtTQVFQLGVBQWUsMkJBQVUsVUFBVSxvREFmdkM7Ozs7O0VBS1Q7MkZBRVcsU0FBUztrQkFWckIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsOEJBQThCO29CQUN4QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsUUFBUSxFQUFFOzs7OztFQUtUO2lCQUNEOzhLQUlTLEVBQUU7c0JBQVYsS0FBSztnQkFFK0IsY0FBYztzQkFBbEQsV0FBVzt1QkFBQyxzQkFBc0I7Z0JBQ2lCLE1BQU07c0JBQXpELFdBQVc7dUJBQUMsNEJBQTRCOztzQkFBRyxLQUFLO2dCQUVJLEdBQUc7c0JBQXZELFlBQVk7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtnQkEyQ25ELFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRBZnRlclZpZXdJbml0LFxuXHRDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcblx0Q2hhbmdlRGV0ZWN0b3JSZWYsXG5cdENvbXBvbmVudCxcblx0Q29udGVudENoaWxkLFxuXHRFbGVtZW50UmVmLFxuXHRIb3N0QmluZGluZyxcblx0SG9zdExpc3RlbmVyLFxuXHRJbnB1dCxcblx0Tmdab25lLFxuXHRSZW5kZXJlcjJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IGZyb21FdmVudCB9IGZyb20gXCJyeGpzXCI7XG5pbXBvcnQgeyBQb3BvdmVyQ29udGFpbmVyIH0gZnJvbSBcImNhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXIvcG9wb3ZlclwiO1xuaW1wb3J0IHsgVG9nZ2xldGlwQnV0dG9uIH0gZnJvbSBcIi4vdG9nZ2xldGlwLWJ1dHRvbi5kaXJlY3RpdmVcIjtcblxuLyoqXG4gKiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IFRvZ2dsZXRpcE1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy10b2dnbGV0aXAtLWJhc2ljKVxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLXRvZ2dsZXRpcCwgaWJtLXRvZ2dsZXRpcFwiLFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcblx0dGVtcGxhdGU6IGBcblx0XHQ8bmctY29udGVudCBzZWxlY3Q9XCJbY2RzVG9nZ2xldGlwQnV0dG9uXVwiPjwvbmctY29udGVudD5cblx0XHQ8Y2RzLXBvcG92ZXItY29udGVudD5cblx0XHRcdDxuZy1jb250ZW50IHNlbGVjdD1cIltjZHNUb2dnbGV0aXBDb250ZW50XVwiPjwvbmctY29udGVudD5cblx0XHQ8L2Nkcy1wb3BvdmVyLWNvbnRlbnQ+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgVG9nZ2xldGlwIGV4dGVuZHMgUG9wb3ZlckNvbnRhaW5lciBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuXHRzdGF0aWMgdG9nZ2xldGlwQ291bnRlciA9IDA7XG5cblx0QElucHV0KCkgaWQgPSBgdG9vbHRpcC0ke1RvZ2dsZXRpcC50b2dnbGV0aXBDb3VudGVyKyt9YDtcblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLXRvZ2dsZXRpcFwiKSB0b2dnbGV0aXBDbGFzcyA9IHRydWU7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tdG9nZ2xldGlwLS1vcGVuXCIpIEBJbnB1dCgpIGlzT3BlbiA9IGZhbHNlO1xuXG5cdEBDb250ZW50Q2hpbGQoVG9nZ2xldGlwQnV0dG9uLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgYnRuITogRWxlbWVudFJlZjtcblxuXHRkb2N1bWVudENsaWNrID0gdGhpcy5oYW5kbGVGb2N1c091dC5iaW5kKHRoaXMpO1xuXG5cdGNvbnN0cnVjdG9yKFxuXHRcdHByb3RlY3RlZCBob3N0RWxlbWVudDogRWxlbWVudFJlZixcblx0XHRwcm90ZWN0ZWQgbmdab25lOiBOZ1pvbmUsXG5cdFx0cHJvdGVjdGVkIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG5cdFx0cHJvdGVjdGVkIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZlxuXHQpIHtcblx0XHRzdXBlcihob3N0RWxlbWVudCwgbmdab25lLCByZW5kZXJlciwgY2hhbmdlRGV0ZWN0b3JSZWYpO1xuXHRcdHRoaXMuaGlnaENvbnRyYXN0ID0gdHJ1ZTtcblx0XHR0aGlzLmRyb3BTaGFkb3cgPSBmYWxzZTtcblx0fVxuXG5cdG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcblx0XHR0aGlzLmluaXRpYWxpemVSZWZlcmVuY2VzKCk7XG5cblx0XHQvLyBMaXN0ZW4gZm9yIGNsaWNrIGV2ZW50cyBvbiB0cmlnZ2VyXG5cdFx0ZnJvbUV2ZW50KHRoaXMuYnRuLm5hdGl2ZUVsZW1lbnQsIFwiY2xpY2tcIilcblx0XHRcdC5zdWJzY3JpYmUoKGV2ZW50OiBFdmVudCkgPT4ge1xuXHRcdFx0XHQvLyBBZGQvUmVtb3ZlIGV2ZW50IGxpc3RlbmVyIGJhc2VkIG9uIGlzT3BlbiB0byBpbXByb3ZlIHBlcmZvcm1hbmNlIHdoZW4gdGhlcmVcblx0XHRcdFx0Ly8gYXJlIGEgbG90IG9mIHRvZ2dsZXRpcHNcblx0XHRcdFx0aWYgKHRoaXMuaXNPcGVuKSB7XG5cdFx0XHRcdFx0ZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIHRoaXMuZG9jdW1lbnRDbGljayk7XG5cdFx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdFx0ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIHRoaXMuZG9jdW1lbnRDbGljayk7XG5cdFx0XHRcdH1cblxuXHRcdFx0XHR0aGlzLmhhbmRsZUV4cGFuc2lvbighdGhpcy5pc09wZW4sIGV2ZW50KTtcblx0XHRcdH0pO1xuXG5cdFx0Ly8gVG9nZ2xldGlwIGlzIG9wZW4gb24gaW5pdGlhbCByZW5kZXIsIGFkZCAnY2xpY2snIGV2ZW50IGxpc3RlbmVyIHRvIGRvY3VtZW50IHNvIHVzZXJzIGNhbiBjbG9zZVxuXHRcdGlmICh0aGlzLmlzT3Blbikge1xuXHRcdFx0ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsIHRoaXMuZG9jdW1lbnRDbGljayk7XG5cdFx0fVxuXG5cdFx0aWYgKHRoaXMuYnRuKSB7XG5cdFx0XHR0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZSh0aGlzLmJ0bi5uYXRpdmVFbGVtZW50LCBcImFyaWEtY29udHJvbHNcIiwgdGhpcy5pZCk7XG5cdFx0fVxuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImtleXVwXCIsIFtcIiRldmVudFwiXSlcblx0aG9zdGtleXMoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcblx0XHRpZiAob3BlbiAmJiBldmVudC5rZXkgPT09IFwiRXNjYXBlXCIpIHtcblx0XHRcdGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuXHRcdFx0dGhpcy5oYW5kbGVFeHBhbnNpb24oZmFsc2UsIGV2ZW50KTtcblx0XHR9XG5cdH1cblxuXHRoYW5kbGVGb2N1c091dChldmVudCkge1xuXHRcdGlmICghdGhpcy5ob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkpIHtcblx0XHRcdHRoaXMuaGFuZGxlRXhwYW5zaW9uKGZhbHNlLCBldmVudCk7XG5cdFx0fVxuXHR9XG5cblx0cHJpdmF0ZSBoYW5kbGVFeHBhbnNpb24oc3RhdGUgPSBmYWxzZSwgZXZlbnQ6IEV2ZW50KSB7XG5cdFx0dGhpcy5oYW5kbGVDaGFuZ2Uoc3RhdGUsIGV2ZW50KTtcblx0XHRpZiAodGhpcy5idG4pIHtcblx0XHRcdHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuYnRuLm5hdGl2ZUVsZW1lbnQsIFwiYXJpYS1leHBhbmRlZFwiLCB0aGlzLmlzT3Blbi50b1N0cmluZygpKTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==