File

src/ai-label/ai-label-popover.directive.ts

Description

Popover/toggletip behavior for cds-ai-label, applied to an inner wrapper so cds--popover-* classes are not merged onto the cds--ai-label host.

Extends

PopoverContainer

Implements

OnChanges

Metadata

Selector [cdsAILabelPopover]

Index

Constructor

constructor(elementRef: ElementRef, ngZone: NgZone, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef)

Defined in src/ai-label/ai-label-popover.directive.ts:20

Parameters :

Name	Type	Optional
elementRef	`ElementRef`	No
ngZone	`NgZone`	No
renderer	`Renderer2`	No
changeDetectorRef	`ChangeDetectorRef`	No

Inputs

align
Type : `oldPlacement \| Placement`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:45`
Set alignment of popover As of v5, `oldPlacements` are now deprecated in favor of Placements When `autoAlign` is set to `true`, alignment may change for best placement

alignmentAxisOffset
Type : `number`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:122`
Experimental: Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.

autoAlign
Type : `boolean`
Default value : `false`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:115`
Experimental: Use floating-ui to position the tooltip This is not toggleable - should be assigned once

caret
Type : `boolean`
Default value : `true`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:102`
Show caret at the alignment position

dropShadow
Type : `boolean`
Default value : `true`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:106`
Enable drop shadow around the popover container

highContrast
Type : `boolean`
Default value : `false`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:110`
Enable high contrast for popover container

isOpen
Type : `boolean`
Default value : `false`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:117`

Outputs

isOpenChange
Type : `EventEmitter`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:98`
Emits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound

onClose
Type : `EventEmitter<Event>`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:90`
Emits an event when the dialog is closed

onOpen
Type : `EventEmitter<Event>`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:94`
Emits an event when the dialog is opened

HostBindings

class.cds--popover-container

Type : boolean

Default value : true

Inherited from PopoverContainer

Defined in PopoverContainer:116

Methods

Private bindPopoverRefs

bindPopoverRefs()

Defined in src/ai-label/ai-label-popover.directive.ts:50

Returns : void

initializeReferences

initializeReferences()

Inherited from PopoverContainer

Defined in PopoverContainer:32

Returns : void

ngOnChanges

ngOnChanges(changes: SimpleChanges)

Inherited from PopoverContainer

Defined in PopoverContainer:38

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

Private resolveCaretRef

resolveCaretRef(panel: HTMLElement)

Defined in src/ai-label/ai-label-popover.directive.ts:60

Parameters :

Name	Type	Optional
panel	`HTMLElement`	No

Returns : HTMLElement | null

cleanUp

cleanUp()

Inherited from PopoverContainer

Defined in PopoverContainer:298

Clean up autoUpdate if auto alignment is enabled

Returns : void

handleChange

handleChange(open: boolean, event?: Event)

Inherited from PopoverContainer

Defined in PopoverContainer:142

Handles emitting open/close event

Parameters :

Name	Type	Optional	Description
open	`boolean`	No	Is the popover container open
event	`Event`	Yes	Event

Returns : void

ngAfterViewInit

ngAfterViewInit()

Inherited from PopoverContainer

Defined in PopoverContainer:273

Handle initialization of element

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from PopoverContainer

Defined in PopoverContainer:291

Clean up

Returns : void

recomputePosition

recomputePosition()

Inherited from PopoverContainer

Defined in PopoverContainer:190

Compute position of tooltip when autoAlign is enabled

Returns : void

roundByDPR

roundByDPR(value)

Inherited from PopoverContainer

Defined in PopoverContainer:182

Parameters :

Name	Optional
value	No

Returns : number

updateAlignmentClass

updateAlignmentClass(newAlignment: string, previousAlignment?: string)

Inherited from PopoverContainer

Defined in PopoverContainer:309

Replace existing previous alignment class with new

Parameters :

Name	Type	Optional
newAlignment	`string`	No
previousAlignment	`string`	Yes

Returns : void

Properties

_align

Type : Placement

Default value : "bottom"

Inherited from PopoverContainer

Defined in PopoverContainer:84

Readonly alignmentClassPrefix

Type : string

Default value : "cds--popover--"

Inherited from PopoverContainer

Defined in PopoverContainer:85

Protected caretHeight

Type : number

Inherited from PopoverContainer

Defined in PopoverContainer:127

Protected caretOffset

Type : number

Inherited from PopoverContainer

Defined in PopoverContainer:126

Protected caretRef

Type : HTMLElement

Inherited from PopoverContainer

Defined in PopoverContainer:125

containerClass

Default value : true

Decorators :


                            @HostBinding('class.cds--popover-container')

Inherited from PopoverContainer

Defined in PopoverContainer:116

Protected popoverContentRef

Type : HTMLElement

Inherited from PopoverContainer

Defined in PopoverContainer:124

Protected unmountFloatingElement

Type : Function

Inherited from PopoverContainer

Defined in PopoverContainer:128

import {
	ChangeDetectorRef,
	Directive,
	ElementRef,
	NgZone,
	OnChanges,
	Renderer2,
	SimpleChanges
} from "@angular/core";

import { PopoverContainer } from "carbon-components-angular/popover";

/**
 * Popover/toggletip behavior for `cds-ai-label`, applied to an inner wrapper so
 * `cds--popover-*` classes are not merged onto the `cds--ai-label` host.
 */
@Directive({
	selector: "[cdsAILabelPopover]"
})
export class AILabelPopoverDirective extends PopoverContainer implements OnChanges {
	constructor(
		protected elementRef: ElementRef,
		protected ngZone: NgZone,
		protected renderer: Renderer2,
		protected changeDetectorRef: ChangeDetectorRef
	) {
		super(elementRef, ngZone, renderer, changeDetectorRef);
		this.highContrast = true;
		this.dropShadow = false;
	}

	override initializeReferences(): void {
		this.updateAlignmentClass(this._align);
		this.bindPopoverRefs();
		this.handleChange(this.isOpen);
	}

	override ngOnChanges(changes: SimpleChanges): void {
		const originalState = this.isOpen;
		this.handleChange(false);

		if (changes.autoAlign && !changes.autoAlign.firstChange) {
			this.popoverContentRef?.setAttribute("style", "");
			this.bindPopoverRefs();
		}

		this.handleChange(originalState);
	}

	private bindPopoverRefs(): void {
		const host = this.elementRef.nativeElement;
		const panel = host.querySelector(":scope > span.cds--popover");
		if (!panel) {
			return;
		}
		this.popoverContentRef = panel.querySelector(":scope > span.cds--popover-content");
		this.caretRef = this.resolveCaretRef(panel);
	}

	private resolveCaretRef(panel: HTMLElement): HTMLElement | null {
		if (this.autoAlign) {
			return panel.querySelector(
				"span.cds--popover-content > span.cds--popover-caret.cds--popover--auto-align"
			);
		}
		return panel.querySelector(":scope > span.cds--popover-caret");
	}
}

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Constructor

Inputs

Outputs

HostBindings

Methods

Properties

results matching ""

No results matching ""