carbon-components-angular
Version:
Next generation components
231 lines (222 loc) • 11.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, HostBinding, Input, ElementRef, Component, ChangeDetectionStrategy, ContentChild, HostListener, NgModule } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as i1 from 'carbon-components-angular/popover';
import { PopoverContainer, PopoverModule } from 'carbon-components-angular/popover';
import { CommonModule } from '@angular/common';
class ToggletipAction {
constructor() {
this.toggleTipActions = true;
}
}
ToggletipAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToggletipAction.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToggletipAction, selector: "[cdsToggletipAction], [ibmToggletipAction]", host: { properties: { "class.cds--toggletip-actions": "this.toggleTipActions" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipAction, decorators: [{
type: Directive,
args: [{
selector: "[cdsToggletipAction], [ibmToggletipAction]"
}]
}], propDecorators: { toggleTipActions: [{
type: HostBinding,
args: ["class.cds--toggletip-actions"]
}] } });
class ToggletipButton {
constructor() {
this.toggletipButton = true;
this.toggletipButtonType = "button";
this.ariaLabel = "Show information";
}
}
ToggletipButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToggletipButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: { ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--toggletip-button": "this.toggletipButton", "attr.type": "this.toggletipButtonType", "attr.aria-label": "this.ariaLabel" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipButton, decorators: [{
type: Directive,
args: [{
selector: "[cdsToggletipButton], [ibmToggletipButton]"
}]
}], propDecorators: { toggletipButton: [{
type: HostBinding,
args: ["class.cds--toggletip-button"]
}], toggletipButtonType: [{
type: HostBinding,
args: ["attr.type"]
}], ariaLabel: [{
type: HostBinding,
args: ["attr.aria-label"]
}, {
type: Input
}] } });
class ToggletipContent {
constructor() {
this.toggletipContent = true;
}
}
ToggletipContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToggletipContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]", host: { properties: { "class.cds--toggletip-content": "this.toggletipContent" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipContent, decorators: [{
type: Directive,
args: [{
selector: "[cdsToggletipContent], [ibmToggletipContent]"
}]
}], propDecorators: { toggletipContent: [{
type: HostBinding,
args: ["class.cds--toggletip-content"]
}] } });
class ToggletipLabel {
constructor() {
this.toggleTipLabel = true;
}
}
ToggletipLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ToggletipLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToggletipLabel, selector: "[cdsToggletipLabel], [ibmToggletipLabel]", host: { properties: { "class.cds--toggletip-label": "this.toggleTipLabel" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipLabel, decorators: [{
type: Directive,
args: [{
selector: "[cdsToggletipLabel], [ibmToggletipLabel]"
}]
}], propDecorators: { toggleTipLabel: [{
type: HostBinding,
args: ["class.cds--toggletip-label"]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { ToggletipModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-toggletip--basic)
*/
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"]]
}] } });
class ToggletipModule {
}
ToggletipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ToggletipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ToggletipModule, declarations: [Toggletip,
ToggletipLabel,
ToggletipAction,
ToggletipButton,
ToggletipContent], imports: [CommonModule, PopoverModule], exports: [Toggletip,
ToggletipLabel,
ToggletipAction,
ToggletipButton,
ToggletipContent] });
ToggletipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipModule, imports: [CommonModule, PopoverModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggletipModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Toggletip,
ToggletipLabel,
ToggletipAction,
ToggletipButton,
ToggletipContent
],
exports: [
Toggletip,
ToggletipLabel,
ToggletipAction,
ToggletipButton,
ToggletipContent
],
imports: [CommonModule, PopoverModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Toggletip, ToggletipAction, ToggletipButton, ToggletipContent, ToggletipLabel, ToggletipModule };
//# sourceMappingURL=carbon-components-angular-toggletip.mjs.map