@agorapulse/ui-components 22.0.32 → 22.1.0

package/types/agorapulse-ui-components-directives.d.ts

@@ -56,6 +56,48 @@ declare class CheckboxDirective implements OnInit, OnDestroy {
     static ngAcceptInputType_indeterminateInput: unknown;
 }
 
+/**
+ * Turns a non-interactive element into a control: it receives an ARIA role, enters the
+ * tab order and activates with the keyboard, through the `(apClick)` binding alone.
+ *
+ * Prefer a real `<button>` whenever the layout allows one. Reach for this directive when
+ * the element cannot be a button — a table row, a card, a styled anchor with no href.
+ *
+ * @example
+ * ```html
+ * <div (apClick)="openPost()">…</div>
+ * <span (apClick)="openDocs()" apClickRole="link">…</span>
+ * <tr (apClick)="openRow()" [apClickDisabled]="editing()">…</tr>
+ * ```
+ */
+declare class ClickDirective {
+    /** Turns the host back into a plain element: no role, no tab stop, no activation at all. */
+    apClickDisabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /** ARIA role applied while the host is interactive. */
+    apClickRole: i0.InputSignal<string>;
+    apClick: i0.OutputEmitterRef<MouseEvent | KeyboardEvent>;
+    private host;
+    constructor();
+    protected isInteractive(): boolean;
+    /** The two checks are independent, so an anchor without `href` still gets its contenteditable read. */
+    private isNativelyActivated;
+    /**
+     * `routerLink` counts as an `href`, and is read as a written attribute so the answer does not
+     * depend on whether this directive's host bindings run before RouterLink's. A bound
+     * `[routerLink]` leaves no attribute, so such an anchor stays plain until RouterLink writes one.
+     */
+    private isNativeAnchor;
+    /** `contenteditable="false"` is explicitly opted out, so only a present, non-"false" value counts. */
+    private isContentEditable;
+    private warnRedundant;
+    protected onClick(event: MouseEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    /** A link activates on Enter only; every other role also answers Space. */
+    private activationKeys;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClickDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickDirective, "[apClick]", never, { "apClickDisabled": { "alias": "apClickDisabled"; "required": false; "isSignal": true; }; "apClickRole": { "alias": "apClickRole"; "required": false; "isSignal": true; }; }, { "apClick": "apClick"; }, never, never, true, never>;
+}
+
 declare class DefaultImageDirective {
     src: string;
     default: string;
@@ -148,6 +190,26 @@ declare class MultiStyleTextDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MultiStyleTextDirective, "[multiStyleText]", never, { "multiStyleText": { "alias": "multiStyleText"; "required": false; }; }, { "partEvent": "partEvent"; }, never, never, true, never>;
 }
 
+/**
+ * Stops a click from reaching the ancestors, without altering the host semantics.
+ *
+ * Use it on an element nested inside a clickable container — the container's handler
+ * must not fire when the inner control is used.
+ *
+ * @example
+ * ```html
+ * <div class="row" (click)="openRow()">
+ *     <div class="row__actions" apStopPropagation>
+ *         <ap-icon-button symbolId="more" />
+ *     </div>
+ * </div>
+ * ```
+ */
+declare class StopPropagationDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<StopPropagationDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StopPropagationDirective, "[apStopPropagation]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Moves a column's body cells with its header cell while columns are reordered.
  *
@@ -172,4 +234,4 @@ declare class TableColumnDragDirective implements OnInit, OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<TableColumnDragDirective, "table[apTableColumnDrag]", never, {}, {}, never, never, true, never>;
 }
 
-export { AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective, TableColumnDragDirective };
+export { AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, ClickDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective, StopPropagationDirective, TableColumnDragDirective };

package/types/agorapulse-ui-components-popover.d.ts

@@ -0,0 +1,92 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _floating_ui_utils from '@floating-ui/utils';
+import { FloatingAnchorMode } from '@agorapulse/ui-components/floating';
+
+/**
+ * The `role="dialog"` surface, its optional header and its focus trap. Instantiated by the popover
+ * directive, never by a consumer.
+ *
+ * Focus is the CDK's: `cdkTrapFocus` confines Tab, `autoCapture` focuses on open and restores the
+ * trigger on destruction. The cost is that Tab cannot leave the panel — Escape or the button do.
+ */
+declare class PopoverPanelComponent {
+    private static nextId;
+    /** The consumer's content. Always a template: the directive sits on the trigger, not here. */
+    readonly content: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /** Mirrors the popover's heading, and gives the dialog its accessible name. */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /** Mirrors the popover's input of the same name. */
+    readonly closable: _angular_core.InputSignal<boolean>;
+    /** Mirrors the popover's backdrop, which is what makes the page genuinely inert. */
+    readonly backdrop: _angular_core.InputSignal<boolean>;
+    /** Mirrors the popover's, and names the dialog when there is no heading. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly closeAriaLabel: _angular_core.InputSignal<string>;
+    /** Set by the directive, which needs it for the trigger's `aria-controls`. */
+    readonly panelId: _angular_core.InputSignal<string>;
+    /**
+     * The id of the element that names the dialog when nothing else does — the trigger, set by the
+     * directive. An id rather than its text, so the name is computed on the live DOM: that follows a
+     * label that changes, and reads a trigger whose own name is an `aria-label`.
+     */
+    readonly fallbackLabelId: _angular_core.InputSignal<string | undefined>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly headingId: string;
+    /** A dialog must be named. The heading does it, failing that the trigger. */
+    protected readonly labelledBy: _angular_core.Signal<string | null>;
+    protected readonly label: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverPanelComponent, "ap-popover-panel", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "panelId": { "alias": "panelId"; "required": false; "isSignal": true; }; "fallbackLabelId": { "alias": "fallbackLabelId"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * A click-triggered interactive panel: `role="dialog"`, managed focus, Escape, optional backdrop.
+ * A tooltip is the opposite — descriptive, hover-triggered, and never focusable.
+ *
+ * Sits on the **trigger**, so it owns the trigger's ARIA and the content is always a `TemplateRef`.
+ * Inputs are prefixed one by one rather than bundled: an inline config object would be recreated on
+ * every change-detection cycle and thrash the overlay.
+ *
+ * @example
+ * <button [apPopover]="shareTpl" apPopoverHeading="Share">Share</button>
+ * <ng-template #shareTpl>…</ng-template>
+ */
+declare class PopoverDirective {
+    private static nextId;
+    private readonly instanceId;
+    private readonly floating;
+    private readonly triggerElement;
+    private panelRef;
+    /** The panel's content. */
+    readonly apPopover: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /** Unset means derived from the anchor mode. There is no `'auto'` value. */
+    readonly apPopoverPlacement: _angular_core.InputSignal<_floating_ui_utils.Placement | undefined>;
+    readonly apPopoverAnchor: _angular_core.InputSignal<FloatingAnchorMode>;
+    readonly apPopoverArrow: _angular_core.InputSignal<boolean>;
+    readonly apPopoverArrowTarget: _angular_core.InputSignal<"anchor" | "pointer">;
+    /** Shows a close button — and, by doing so, makes it *the* way to close: no more outside click. */
+    readonly apPopoverClosable: _angular_core.InputSignal<boolean>;
+    /** Blocks the page behind. Non-modal by default — that is the point of a popover. */
+    readonly apPopoverBackdrop: _angular_core.InputSignal<boolean>;
+    /** Optional heading. When set, it becomes the dialog's accessible name. */
+    readonly apPopoverHeading: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name used when there is no heading. */
+    readonly apPopoverAriaLabel: _angular_core.InputSignal<string | undefined>;
+    /** An input rather than a hard-coded string: several of the DS's own labels read badly. */
+    readonly apPopoverCloseAriaLabel: _angular_core.InputSignal<string>;
+    readonly apPopoverPanelClass: _angular_core.InputSignal<string | string[] | undefined>;
+    readonly isOpen: _angular_core.Signal<boolean>;
+    protected readonly panelId: string;
+    open(event?: MouseEvent): void;
+    /** The dialog falls back to being named by its trigger, and `aria-labelledby` needs an id to point at. */
+    private ensureTriggerId;
+    /** The residual case the fallback cannot cover: a trigger that names nothing either. */
+    private warnWhenNameless;
+    close(): void;
+    toggle(event?: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[apPopover]", ["apPopover"], { "apPopover": { "alias": "apPopover"; "required": true; "isSignal": true; }; "apPopoverPlacement": { "alias": "apPopoverPlacement"; "required": false; "isSignal": true; }; "apPopoverAnchor": { "alias": "apPopoverAnchor"; "required": false; "isSignal": true; }; "apPopoverArrow": { "alias": "apPopoverArrow"; "required": false; "isSignal": true; }; "apPopoverArrowTarget": { "alias": "apPopoverArrowTarget"; "required": false; "isSignal": true; }; "apPopoverClosable": { "alias": "apPopoverClosable"; "required": false; "isSignal": true; }; "apPopoverBackdrop": { "alias": "apPopoverBackdrop"; "required": false; "isSignal": true; }; "apPopoverHeading": { "alias": "apPopoverHeading"; "required": false; "isSignal": true; }; "apPopoverAriaLabel": { "alias": "apPopoverAriaLabel"; "required": false; "isSignal": true; }; "apPopoverCloseAriaLabel": { "alias": "apPopoverCloseAriaLabel"; "required": false; "isSignal": true; }; "apPopoverPanelClass": { "alias": "apPopoverPanelClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { PopoverDirective, PopoverPanelComponent };

package/types/agorapulse-ui-components.d.ts

@@ -39,6 +39,8 @@ import * as i18 from '@agorapulse/ui-components/tooltip';
 export { CustomTooltipAvatarItem, CustomTooltipPresentationItem, CustomTooltipType, TooltipDirective, TooltipExternalTriggerDirective } from '@agorapulse/ui-components/tooltip';
 import * as i19 from '@agorapulse/ui-components/add-comment';
 export { AddCommentComponent } from '@agorapulse/ui-components/add-comment';
+export { PopoverDirective } from '@agorapulse/ui-components/popover';
+export { FloatingAnchorMode, FloatingPlacement, FloatingSide } from '@agorapulse/ui-components/floating';
 export { DropdownOverlay, DropdownTriggerDirective, createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 export { ActionDropdownComponent, ActionDropdownItem, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
 export { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';