CngxPopoverAction
projects/common/popover/popover-action.component.ts
Import#
import { CngxPopoverAction } from '@cngx/common/popover'
Description#
Action button for use inside cngx-popover-panel footer.
Two roles:
'dismiss'- closes the panel on click (no async action).'confirm'- executes an async action, shows status templates, optionally auto-closes the panel on success.
Supports the same cngxPending/cngxSucceeded/cngxFailed templates
as CngxActionButton, or use status() + @switch for full control.
Dismiss button
<cngx-popover-action role="dismiss">Cancel</cngx-popover-action>Confirm with templates
<cngx-popover-action role="confirm" [action]="save" variant="primary">
Save
<ng-template cngxPending>Saving...</ng-template>
<ng-template cngxSucceeded>Saved!</ng-template>
<ng-template cngxFailed let-err>{{ err }}</ng-template>
</cngx-popover-action>With @switch
<cngx-popover-action role="confirm" [action]="save" #act="cngxPopoverAction">
@switch (act.status()) {
@case ('pending') { Saving... }
@case ('success') { Done }
@default { Save }
}
</cngx-popover-action>Metadata#
Host#
Relationships
Index#
Properties
Methods
Inputs#
"dismiss" | "confirm"Button role: 'dismiss' closes immediately, 'confirm' runs an async action.
'confirm'Instance Properties#
Methods#
Default visuals for CngxPopoverAction. The component host has
display: contents and renders a <button> carrying
.cngx-popover-action plus a variant modifier. Designed to live
inside a cngx-popover-panel footer - it picks up the parent
panel's --cngx-popover-panel-accent / -text via CSS inheritance
so variant colors flow through automatically.
State modifiers
:hover- wash applied via--cngx-popover-action-hover-bg:focus-visible- outline ring in--cngx-popover-panel-accent-text:disabled/[aria-disabled="true"]- opacity 0.5, cursor: not-allowed
Variants
--primary- accent fill from the parent panel, white-on-accent--danger- danger surface, white text--ghost- transparent border, hover-only wash
Slots
.cngx-popover-action__sr-only- sibling announcement span; lives outside the @scope wrap, duplicates the canonical.cngx-sr-onlyutility for standalone use
Inheritance
--cngx-popover-action-*(padding, gap, radius, font, transition)- leaf tokens, no fallback chain
- Primary variant fill:
--cngx-popover-panel-accent->--cngx-color-primary - Primary variant text:
--cngx-popover-panel-accent-text(parent panel) - Danger variant fill:
--cngx-color-danger - Outer border:
--cngx-popover-panel-border(parent panel)
Dark mode
Three hooks flip the hover wash from a 4% black overlay to a 6% white overlay so the wash stays visible against the dark panel surface:
prefers-color-scheme: dark[data-color-scheme="dark"]/.darkclass[data-color-scheme="light"]/.lightclass (explicit pin)
Pair with
@cngx/themes/material/popover-panel-theme- Material 3 button-on-surface palette
Index#
Layout
<length>6pxBlock-axis padding of the action button.
<length>14pxInline-axis padding of the action button.
Typography
Motion
<time>150msTransition duration for the hover / focus state changes.
State / Hover
<color>oklch(0 0 0 / 0.04)Hover-state surface - neutral default + ghost variant share this token so a single dark-mode swap covers both. Light: 4% black wash; dark: 6% white wash.