carbon-components-angular
Version:
Next generation components
111 lines • 13.5 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
this.subscription = 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);
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
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 [attr.id]="id" aria-live="polite">
<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 [attr.id]="id" aria-live="polite">
<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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xldGlwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90b2dnbGV0aXAvdG9nZ2xldGlwLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRU4sdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osVUFBVSxFQUNWLFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUlMLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQWdCLE1BQU0sTUFBTSxDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7O0FBRS9EOzs7Ozs7OztHQVFHO0FBV0gsTUFBTSxPQUFPLFNBQVUsU0FBUSxnQkFBZ0I7SUFhOUMsWUFDVyxXQUF1QixFQUN2QixNQUFjLEVBQ2QsUUFBbUIsRUFDbkIsaUJBQW9DO1FBRTlDLEtBQUssQ0FBQyxXQUFXLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO1FBTDlDLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ25CLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFkdEMsT0FBRSxHQUFHLFdBQVcsU0FBUyxDQUFDLGdCQUFnQixFQUFFLEVBQUUsQ0FBQztRQUVuQixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUNQLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFJbkUsa0JBQWEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQVU5QyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUN6QixD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QUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0QWZ0ZXJWaWV3SW5pdCxcblx0Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG5cdENoYW5nZURldGVjdG9yUmVmLFxuXHRDb21wb25lbnQsXG5cdENvbnRlbnRDaGlsZCxcblx0RWxlbWVudFJlZixcblx0SG9zdEJpbmRpbmcsXG5cdEhvc3RMaXN0ZW5lcixcblx0SW5wdXQsXG5cdE5nWm9uZSxcblx0T25EZXN0cm95LFxuXHRSZW5kZXJlcjJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IGZyb21FdmVudCwgU3Vic2NyaXB0aW9uIH0gZnJvbSBcInJ4anNcIjtcbmltcG9ydCB7IFBvcG92ZXJDb250YWluZXIgfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9wb3BvdmVyXCI7XG5pbXBvcnQgeyBUb2dnbGV0aXBCdXR0b24gfSBmcm9tIFwiLi90b2dnbGV0aXAtYnV0dG9uLmRpcmVjdGl2ZVwiO1xuXG4vKipcbiAqIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgVG9nZ2xldGlwTW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLXRvZ2dsZXRpcC0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtdG9nZ2xldGlwLCBpYm0tdG9nZ2xldGlwXCIsXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxuZy1jb250ZW50IHNlbGVjdD1cIltjZHNUb2dnbGV0aXBCdXR0b25dXCI+PC9uZy1jb250ZW50PlxuXHRcdDxjZHMtcG9wb3Zlci1jb250ZW50IFthdHRyLmlkXT1cImlkXCIgYXJpYS1saXZlPVwicG9saXRlXCI+XG5cdFx0XHQ8bmctY29udGVudCBzZWxlY3Q9XCJbY2RzVG9nZ2xldGlwQ29udGVudF1cIj48L25nLWNvbnRlbnQ+XG5cdFx0PC9jZHMtcG9wb3Zlci1jb250ZW50PlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFRvZ2dsZXRpcCBleHRlbmRzIFBvcG92ZXJDb250YWluZXIgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuXHRzdGF0aWMgdG9nZ2xldGlwQ291bnRlciA9IDA7XG5cblx0QElucHV0KCkgaWQgPSBgdG9vbHRpcC0ke1RvZ2dsZXRpcC50b2dnbGV0aXBDb3VudGVyKyt9YDtcblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLXRvZ2dsZXRpcFwiKSB0b2dnbGV0aXBDbGFzcyA9IHRydWU7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tdG9nZ2xldGlwLS1vcGVuXCIpIEBJbnB1dCgpIGlzT3BlbiA9IGZhbHNlO1xuXG5cdEBDb250ZW50Q2hpbGQoVG9nZ2xldGlwQnV0dG9uLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgYnRuITogRWxlbWVudFJlZjtcblxuXHRkb2N1bWVudENsaWNrID0gdGhpcy5oYW5kbGVGb2N1c091dC5iaW5kKHRoaXMpO1xuXHRwcml2YXRlIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG5cdGNvbnN0cnVjdG9yKFxuXHRcdHByb3RlY3RlZCBob3N0RWxlbWVudDogRWxlbWVudFJlZixcblx0XHRwcm90ZWN0ZWQgbmdab25lOiBOZ1pvbmUsXG5cdFx0cHJvdGVjdGVkIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG5cdFx0cHJvdGVjdGVkIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZlxuXHQpIHtcblx0XHRzdXBlcihob3N0RWxlbWVudCwgbmdab25lLCByZW5kZXJlciwgY2hhbmdlRGV0ZWN0b3JSZWYpO1xuXHRcdHRoaXMuaGlnaENvbnRyYXN0ID0gdHJ1ZTtcblx0XHR0aGlzLmRyb3BTaGFkb3cgPSBmYWxzZTtcblx0fVxuXG5cdG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcblx0XHR0aGlzLmluaXRpYWxpemVSZWZlcmVuY2VzKCk7XG5cblx0XHQvLyBMaXN0ZW4gZm9yIGNsaWNrIGV2ZW50cyBvbiB0cmlnZ2VyXG5cdFx0dGhpcy5zdWJzY3JpcHRpb24gPSBmcm9tRXZlbnQodGhpcy5idG4ubmF0aXZlRWxlbWVudCwgXCJjbGlja1wiKVxuXHRcdFx0LnN1YnNjcmliZSgoZXZlbnQ6IEV2ZW50KSA9PiB7XG5cdFx0XHRcdC8vIEFkZC9SZW1vdmUgZXZlbnQgbGlzdGVuZXIgYmFzZWQgb24gaXNPcGVuIHRvIGltcHJvdmUgcGVyZm9ybWFuY2Ugd2hlbiB0aGVyZVxuXHRcdFx0XHQvLyBhcmUgYSBsb3Qgb2YgdG9nZ2xldGlwc1xuXHRcdFx0XHRpZiAodGhpcy5pc09wZW4pIHtcblx0XHRcdFx0XHRkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgdGhpcy5kb2N1bWVudENsaWNrKTtcblx0XHRcdFx0fSBlbHNlIHtcblx0XHRcdFx0XHRkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgdGhpcy5kb2N1bWVudENsaWNrKTtcblx0XHRcdFx0fVxuXG5cdFx0XHRcdHRoaXMuaGFuZGxlRXhwYW5zaW9uKCF0aGlzLmlzT3BlbiwgZXZlbnQpO1xuXHRcdFx0fSk7XG5cblx0XHQvLyBUb2dnbGV0aXAgaXMgb3BlbiBvbiBpbml0aWFsIHJlbmRlciwgYWRkICdjbGljaycgZXZlbnQgbGlzdGVuZXIgdG8gZG9jdW1lbnQgc28gdXNlcnMgY2FuIGNsb3NlXG5cdFx0aWYgKHRoaXMuaXNPcGVuKSB7XG5cdFx0XHRkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgdGhpcy5kb2N1bWVudENsaWNrKTtcblx0XHR9XG5cblx0XHRpZiAodGhpcy5idG4pIHtcblx0XHRcdHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuYnRuLm5hdGl2ZUVsZW1lbnQsIFwiYXJpYS1jb250cm9sc1wiLCB0aGlzLmlkKTtcblx0XHR9XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKFwia2V5dXBcIiwgW1wiJGV2ZW50XCJdKVxuXHRob3N0a2V5cyhldmVudDogS2V5Ym9hcmRFdmVudCkge1xuXHRcdGlmIChvcGVuICYmIGV2ZW50LmtleSA9PT0gXCJFc2NhcGVcIikge1xuXHRcdFx0ZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cdFx0XHR0aGlzLmhhbmRsZUV4cGFuc2lvbihmYWxzZSwgZXZlbnQpO1xuXHRcdH1cblx0fVxuXG5cdGhhbmRsZUZvY3VzT3V0KGV2ZW50KSB7XG5cdFx0aWYgKCF0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KSkge1xuXHRcdFx0dGhpcy5oYW5kbGVFeHBhbnNpb24oZmFsc2UsIGV2ZW50KTtcblx0XHR9XG5cdH1cblxuXHRuZ09uRGVzdHJveSgpOiB2b2lkIHtcblx0XHR0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuXHR9XG5cblx0cHJpdmF0ZSBoYW5kbGVFeHBhbnNpb24oc3RhdGUgPSBmYWxzZSwgZXZlbnQ6IEV2ZW50KSB7XG5cdFx0dGhpcy5oYW5kbGVDaGFuZ2Uoc3RhdGUsIGV2ZW50KTtcblx0XHRpZiAodGhpcy5idG4pIHtcblx0XHRcdHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuYnRuLm5hdGl2ZUVsZW1lbnQsIFwiYXJpYS1leHBhbmRlZFwiLCB0aGlzLmlzT3Blbi50b1N0cmluZygpKTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==