Popover component

import { DAYPopoverComponent } from '/popover';
import { DAYPopoverContentComponent } from '/popover';
import { DAYPopoverHeaderComponent } from '/popover';
import { DAYPopoverBodyComponent } from '/popover';
import { DAYPopoverFooterComponent } from '/popover';

Selectors

Popover: day-popover

Popover content: day-popover-content

Popover header: day-popover-header

Popover body: day-popover-body

Popover footer: day-popover-footer

Installation and Usage

npm install @dayerlin-bustamante/popover

import { DAYPopoverComponent } from '@dayerlin-bustamante/popover';

<day-popover>
    <day-popover-content>Content</day-popover-content>
</day-popover>

Injector

Injection token for providing the popover configuration. This token is used to inject an instance of `IDAYPopoverConfiguration` into Angular components or services. It has a default configuration, injecting a new configuration is optional.

Injection token to access the popover helper, enabling dynamic text handling. Through this mechanism, the displayed content can adapt to different cultures, ensuring that labels and messages are properly translated according to the user's language settings.

Inputs trigger directive

Name	Description
DAYPopover: IDAYDialogTmpl \| any	Template or component reference to be rendered inside the popover.
DAYPopoverConfig: IPopoverConfiguration	Optional configuration object that controls behavior, positioning, spacing, customPosition, styling and receive data of the popover.

Output

Not included.

Directives

The DAYPopoverTriggerDirective enables any element to trigger a popover, rendering the defined template or component with its configured behavior and style.

Public methods

Name	Description
onCheckboxChange()	Method called on click. Changes the value if it is not disabled.

The DAYPopoverContainer component manages the display, positioning, and animations of a popover in Angular. It adapts dynamically to the available screen space, applies configurable styles, and coordinates smooth open/close animations. It is complemented by the DAYPopoverTrigger directive, which allows any element to easily trigger a popover.

Dependencies

'/core'

'/overlay'

Example

Html

Demo

Description

Implements the IDAYDialogElement interface to integrate with the internal dialog system.
Dynamically calculates positioning (top, left) based on behavior (inject, dropdown, fill), spacing configuration, and anchor dimensions.
Uses ResizeObserver and reactive signals to track content size changes.
Manages enter/leave animations via AnimationBuilder, supporting fade, open, and close transitions.
Exposes custom CSS properties to control dimensions and the arrow polygon styling.
Listens to global resize events with fromEvent and debounceTime to recalculate positioning.
Applies dynamic CSS classes based on configuration (cssClasses) and computed position.
The DAYPopoverTrigger directive uses DAYPopoverService to create popovers with dynamic templates and configuration.
Supports multiple popover behaviors including inject, dropdown, and fill for versatile UI integration.
CustomPosition support for precise control over popover placement.