@agorapulse/ui-components 22.1.7 → 22.2.0

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

@@ -1,8 +1,37 @@
 import * as i0 from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { FocusableOption, Highlightable } from '@angular/cdk/a11y';
+import { ApInteractiveElement } from '@agorapulse/ui-components/directives';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { FloatingPlacement, FloatingAnchorMode } from '@agorapulse/ui-components/floating';
 
+/** Set on the active option by `ActiveDescendantKeyManager`, where focus stays in a search field. */
+declare const DROPDOWN_OPTION_ACTIVE_CLASS = "ap-dropdown-option--active";
+/**
+ * Marks an element a `ListKeyManager` can drive. It satisfies both managers, because the right one
+ * depends on the role: `FocusKeyManager` moves real focus through a menu or a plain listbox,
+ * `ActiveDescendantKeyManager` leaves focus in a combobox's input and only marks the active option.
+ *
+ * The panel is role-agnostic, so the host says which of its children are options.
+ */
+declare class DropdownOptionDirective implements FocusableOption, Highlightable {
+    private readonly element;
+    readonly label: i0.InputSignal<string>;
+    readonly isDisabled: i0.InputSignal<boolean>;
+    /** `ListKeyManager` skips disabled options on its own; a disabled button is unfocusable anyway. */
+    get disabled(): boolean;
+    /** The id `aria-activedescendant` points at. Only meaningful under the active-descendant manager. */
+    get id(): string;
+    focus(): void;
+    /** Clicks the option, for a combobox where focus stays in the input and Enter must still reach it. */
+    activate(): void;
+    getLabel(): string;
+    setActiveStyles(): void;
+    setInactiveStyles(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownOptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownOptionDirective, "[apDropdownOption]", never, { "label": { "alias": "apDropdownOption"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "apDropdownOptionDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 interface DropdownOverlay {
     open(triggerElement?: HTMLElement): void;
     close(): void;
@@ -27,6 +56,16 @@ declare class DropdownTriggerDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownTriggerDirective, "[apDropdownTrigger]", never, { "apDropdownTrigger": { "alias": "apDropdownTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * The element a trigger really exposes — what takes focus and carries `aria-expanded`.
+ *
+ * `apDropdownTrigger` usually sits on a component host, and `<ap-button>` is not a button: it wraps
+ * one, so writing on the host would be inert.
+ *
+ * @param declared what the host component provides through `AP_INTERACTIVE_ELEMENT`, if any.
+ */
+declare function interactiveTriggerElement(host: HTMLElement, declared?: ApInteractiveElement | null): HTMLElement;
+
 interface DropdownOverlayConfig {
     /** Defaults to `true` — the dropdown keeps its click catcher, unlike the primitive. */
     showBackdrop?: boolean;
@@ -56,5 +95,5 @@ declare function createDropdownOverlay(): {
 };
 type DropdownOverlayInstance = ReturnType<typeof createDropdownOverlay>;
 
-export { DropdownTriggerDirective, createDropdownOverlay };
+export { DROPDOWN_OPTION_ACTIVE_CLASS, DropdownOptionDirective, DropdownTriggerDirective, createDropdownOverlay, interactiveTriggerElement };
 export type { DropdownOverlay, DropdownOverlayConfig, DropdownOverlayInstance };

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

@@ -13,7 +13,9 @@ declare class DropdownContentDirective {
 
 /**
  * The surface a dropdown opens: white, rounded, elevated — and nothing more. No role and no focus
- * trap: the content brings its own semantics (`menu`, `listbox`…). A dialog wants the popover.
+ * trap: the content brings its own semantics (`menu`, `listbox`, and the `dialog` a combobox owns,
+ * as the datepicker's calendar is). A dialog that should take focus — heading, close button, Tab
+ * confined — wants the popover instead.
  *
  * @example
  * <button [apDropdownTrigger]="panel">Columns</button>
@@ -25,6 +27,7 @@ declare class DropdownPanelComponent implements DropdownOverlay {
     private readonly floating;
     protected readonly content: _angular_core.Signal<DropdownContentDirective>;
     private readonly surface;
+    private returnFocusTo;
     /** Unset means derived from the anchor mode, i.e. `bottom-start`. */
     readonly placement: _angular_core.InputSignal<_floating_ui_utils.Placement | undefined>;
     /** On by default: a dropdown keeps its click catcher. */
@@ -40,6 +43,18 @@ declare class DropdownPanelComponent implements DropdownOverlay {
     get overlayRef(): OverlayRef | null;
     open(triggerElement?: HTMLElement): void;
     close(): void;
+    /**
+     * The pane sits at the end of `body`, so Tab from the trigger would walk the whole page before
+     * reaching it. Focus the content root when it declares a tabindex — a host that wants something
+     * finer focuses it afterwards, and wins.
+     */
+    private focusIn;
+    private returnFocus;
+    /** Only give focus back if it is still ours to give: the user may have clicked elsewhere. */
+    private holdsFocus;
+    /** `<body>` means nobody holds focus: returning focus there would land on the page's first focusable element. */
+    private activeElement;
+    private surfaceElement;
     toggle(triggerElement?: HTMLElement): void;
     private dismiss;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanelComponent, never>;

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

@@ -315,6 +315,8 @@ declare class FilterDropdownComponent implements DropdownOverlay {
     readonly placement: _angular_core.InputSignal<_floating_ui_utils.Placement | undefined>;
     /** Extra class(es) set on the body-appended overlay pane, so a consumer can scope global styles to this dropdown. */
     panelClass: _angular_core.InputSignal<string | string[]>;
+    /** Names the dialog — a dialog owes a name. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     saveNewPresetsText: _angular_core.InputSignal<string>;
     saveAsNewPresetText: _angular_core.InputSignal<string>;
     savePresetText: _angular_core.InputSignal<string>;
@@ -376,7 +378,7 @@ declare class FilterDropdownComponent implements DropdownOverlay {
     onUpdatePresets(): void;
     protected onActionDropdownItemClick(item: ActionDropdownItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterDropdownComponent, "ap-filter-dropdown", never, { "infobox": { "alias": "infobox"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "savedValue": { "alias": "savedValue"; "required": false; "isSignal": true; }; "needApplyButton": { "alias": "needApplyButton"; "required": false; "isSignal": true; }; "needClearButton": { "alias": "needClearButton"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "expandOnOpen": { "alias": "expandOnOpen"; "required": false; "isSignal": true; }; "presetsFeatureLocked": { "alias": "presetsFeatureLocked"; "required": false; "isSignal": true; }; "savePresetsMode": { "alias": "savePresetsMode"; "required": false; "isSignal": true; }; "editingPresetsMode": { "alias": "editingPresetsMode"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "saveNewPresetsText": { "alias": "saveNewPresetsText"; "required": false; "isSignal": true; }; "saveAsNewPresetText": { "alias": "saveAsNewPresetText"; "required": false; "isSignal": true; }; "savePresetText": { "alias": "savePresetText"; "required": false; "isSignal": true; }; "updateExistingPresetText": { "alias": "updateExistingPresetText"; "required": false; "isSignal": true; }; "resetFilterText": { "alias": "resetFilterText"; "required": false; "isSignal": true; }; "applyFiltersText": { "alias": "applyFiltersText"; "required": false; "isSignal": true; }; "clearFilterText": { "alias": "clearFilterText"; "required": false; "isSignal": true; }; }, { "infoboxLinkClick": "infoboxLinkClick"; "opened": "opened"; "closed": "closed"; "presetsLockedClicked": "presetsLockedClicked"; "saveNewPresets": "saveNewPresets"; "updatePresets": "updatePresets"; "applyFilters": "applyFilters"; "clearFilters": "clearFilters"; "resetFilters": "resetFilters"; "lockedFeatureClicked": "lockedFeatureClicked"; "filterDropdownGroupLockedClicked": "filterDropdownGroupLockedClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterDropdownComponent, "ap-filter-dropdown", never, { "infobox": { "alias": "infobox"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "savedValue": { "alias": "savedValue"; "required": false; "isSignal": true; }; "needApplyButton": { "alias": "needApplyButton"; "required": false; "isSignal": true; }; "needClearButton": { "alias": "needClearButton"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "expandOnOpen": { "alias": "expandOnOpen"; "required": false; "isSignal": true; }; "presetsFeatureLocked": { "alias": "presetsFeatureLocked"; "required": false; "isSignal": true; }; "savePresetsMode": { "alias": "savePresetsMode"; "required": false; "isSignal": true; }; "editingPresetsMode": { "alias": "editingPresetsMode"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "saveNewPresetsText": { "alias": "saveNewPresetsText"; "required": false; "isSignal": true; }; "saveAsNewPresetText": { "alias": "saveAsNewPresetText"; "required": false; "isSignal": true; }; "savePresetText": { "alias": "savePresetText"; "required": false; "isSignal": true; }; "updateExistingPresetText": { "alias": "updateExistingPresetText"; "required": false; "isSignal": true; }; "resetFilterText": { "alias": "resetFilterText"; "required": false; "isSignal": true; }; "applyFiltersText": { "alias": "applyFiltersText"; "required": false; "isSignal": true; }; "clearFilterText": { "alias": "clearFilterText"; "required": false; "isSignal": true; }; }, { "infoboxLinkClick": "infoboxLinkClick"; "opened": "opened"; "closed": "closed"; "presetsLockedClicked": "presetsLockedClicked"; "saveNewPresets": "saveNewPresets"; "updatePresets": "updatePresets"; "applyFilters": "applyFilters"; "clearFilters": "clearFilters"; "resetFilters": "resetFilters"; "lockedFeatureClicked": "lockedFeatureClicked"; "filterDropdownGroupLockedClicked": "filterDropdownGroupLockedClicked"; }, never, never, true, never>;
 }
 
 declare class FilterDropdownButtonComponent {

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

@@ -2,8 +2,10 @@ import * as i0 from '@angular/core';
 
 declare class InputGroupComponent {
     symbolPosition: 'left' | 'right';
+    /** Paints the group in its disabled state. For when it holds no `<input disabled>`. */
+    disabled: i0.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupComponent, "ap-input-group", never, { "symbolPosition": { "alias": "symbolPosition"; "required": false; }; }, {}, never, ["ap-input-prefix", "ap-symbol", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupComponent, "ap-input-group", never, { "symbolPosition": { "alias": "symbolPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["ap-input-prefix", "ap-symbol", "*"], true, never>;
 }
 
 declare class InputPrefixComponent {

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

@@ -6,6 +6,10 @@ declare class InputSearchComponent implements ControlValueAccessor {
     id: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     clearable: _angular_core.InputSignal<boolean>;
+    /** Id of the list this field drives, when it drives one. */
+    ariaControls: _angular_core.InputSignal<string | null>;
+    /** Id of the option this field marks in that list, so focus can stay in the field. */
+    ariaActiveDescendant: _angular_core.InputSignal<string | null>;
     focus: _angular_core.OutputEmitterRef<FocusEvent>;
     blur: _angular_core.OutputEmitterRef<FocusEvent>;
     keyup: _angular_core.OutputEmitterRef<KeyboardEvent>;
@@ -29,7 +33,7 @@ declare class InputSearchComponent implements ControlValueAccessor {
     onBlurHandle($event: FocusEvent): void;
     onKeyup($event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputSearchComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputSearchComponent, "ap-input-search", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "focus": "focus"; "blur": "blur"; "keyup": "keyup"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputSearchComponent, "ap-input-search", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaActiveDescendant": { "alias": "ariaActiveDescendant"; "required": false; "isSignal": true; }; }, { "focus": "focus"; "blur": "blur"; "keyup": "keyup"; }, never, never, true, never>;
 }
 
 export { InputSearchComponent };

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

@@ -32,10 +32,10 @@ declare class NeoDatepickerComponent implements OnInit {
     }> | undefined;
     locale: NeoDatePickerLocale;
     private _maxDate;
-    set maxDate(maxDate: dayjs__default.Dayjs);
+    set maxDate(maxDate: dayjs__default.Dayjs | undefined);
     get maxDate(): dayjs__default.Dayjs | undefined;
     private _minDate;
-    set minDate(minDate: dayjs__default.Dayjs);
+    set minDate(minDate: dayjs__default.Dayjs | undefined);
     get minDate(): dayjs__default.Dayjs | undefined;
     previousMonthAvailable: boolean;
     private _mode;

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

@@ -48,6 +48,13 @@ declare class PopoverPanelComponent {
  * 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.
  *
+ * The panel does not cap its own height, and cannot: its content is a `TemplateRef`, so only the
+ * caller knows what may scroll. Content that can run long needs a `max-height` of
+ * `var(--ap-floating-available-height, none)` — the floating engine publishes what the viewport
+ * leaves once flip and shift have settled, and the fallback keeps a panel that already fits
+ * untouched. Then pick what scrolls: the whole surface when nothing in it is sticky, the body
+ * alone when a heading or an action row has to stay put.
+ *
  * @example
  * <button [apPopover]="shareTpl" apPopoverHeading="Share">Share</button>
  * <ng-template #shareTpl>…</ng-template>

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

@@ -125,6 +125,8 @@ declare class DropdownItemMultipleOneLineComponent {
     disabledTooltip?: string;
     badgeText?: string;
     dividerEnabled: boolean;
+    /** Passed through to the box: decoration, when the row around it is the real control. */
+    presentational: boolean;
     onlyEnabled: boolean;
     onlyText: string;
     isFeatureLocked: _angular_core.InputSignal<boolean>;
@@ -138,7 +140,8 @@ declare class DropdownItemMultipleOneLineComponent {
     onClick($event: MouseEvent): void;
     onSelectOnly(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemMultipleOneLineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemMultipleOneLineComponent, "ap-dropdown-item-multiple-one-line", never, { "text": { "alias": "text"; "required": true; }; "selected": { "alias": "selected"; "required": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "htmlId": { "alias": "htmlId"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "symbolId": { "alias": "symbolId"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "dividerEnabled": { "alias": "dividerEnabled"; "required": false; }; "onlyEnabled": { "alias": "onlyEnabled"; "required": false; }; "onlyText": { "alias": "onlyText"; "required": false; }; "isFeatureLocked": { "alias": "isFeatureLocked"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "network": { "alias": "network"; "required": false; "isSignal": true; }; "symbolColor": { "alias": "symbolColor"; "required": false; "isSignal": true; }; "symbolTooltipText": { "alias": "symbolTooltipText"; "required": false; "isSignal": true; }; }, { "selectOnly": "selectOnly"; "lockedFeatureClicked": "lockedFeatureClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemMultipleOneLineComponent, "ap-dropdown-item-multiple-one-line", never, { "text": { "alias": "text"; "required": true; }; "selected": { "alias": "selected"; "required": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "htmlId": { "alias": "htmlId"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "symbolId": { "alias": "symbolId"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "dividerEnabled": { "alias": "dividerEnabled"; "required": false; }; "presentational": { "alias": "presentational"; "required": false; }; "onlyEnabled": { "alias": "onlyEnabled"; "required": false; }; "onlyText": { "alias": "onlyText"; "required": false; }; "isFeatureLocked": { "alias": "isFeatureLocked"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "network": { "alias": "network"; "required": false; "isSignal": true; }; "symbolColor": { "alias": "symbolColor"; "required": false; "isSignal": true; }; "symbolTooltipText": { "alias": "symbolTooltipText"; "required": false; "isSignal": true; }; }, { "selectOnly": "selectOnly"; "lockedFeatureClicked": "lockedFeatureClicked"; }, never, never, true, never>;
+    static ngAcceptInputType_presentational: unknown;
 }
 
 declare class DropdownItemMultipleTwoLinesComponent {
@@ -197,6 +200,8 @@ declare class SelectLabelMultipleComponent {
     roundedAvatar: _angular_core.InputSignal<boolean>;
     bindNetwork: _angular_core.InputSignal<string>;
     bindTagColor: _angular_core.InputSignal<string>;
+    /** Turns chip removal off. Completes the parent ng-select's state, when there is one. */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     removeItem: _angular_core.OutputEmitterRef<any>;
     /**
      * Parent ng-select, resolved through the DI chain of the `ng-multi-label-tmp` template.
@@ -213,14 +218,11 @@ declare class SelectLabelMultipleComponent {
         network: any;
         tagColor: TagColor | undefined;
     }[]>;
-    hiddenCount: _angular_core.WritableSignal<number>;
     trackByItem: (_: number, item: any) => any;
     mainContainer: _angular_core.Signal<ElementRef<any>>;
-    itemsElement: _angular_core.Signal<readonly ElementRef<any>[]>;
-    private responsiveLayout;
     private pinHorizontalScroll;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectLabelMultipleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectLabelMultipleComponent, "ap-select-label-multiple", never, { "displayType": { "alias": "displayType"; "required": false; "isSignal": true; }; "tagColor": { "alias": "tagColor"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": true; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "bindAvatarUrl": { "alias": "bindAvatarUrl"; "required": false; "isSignal": true; }; "bindSymbolId": { "alias": "bindSymbolId"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "bindNetwork": { "alias": "bindNetwork"; "required": false; "isSignal": true; }; "bindTagColor": { "alias": "bindTagColor"; "required": false; "isSignal": true; }; }, { "removeItem": "removeItem"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectLabelMultipleComponent, "ap-select-label-multiple", never, { "displayType": { "alias": "displayType"; "required": false; "isSignal": true; }; "tagColor": { "alias": "tagColor"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": true; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "bindAvatarUrl": { "alias": "bindAvatarUrl"; "required": false; "isSignal": true; }; "bindSymbolId": { "alias": "bindSymbolId"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "bindNetwork": { "alias": "bindNetwork"; "required": false; "isSignal": true; }; "bindTagColor": { "alias": "bindTagColor"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removeItem": "removeItem"; }, never, never, true, never>;
 }
 
 /** Search input for an ng-select dropdown — place inside its `ng-header-tmp`. */

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

@@ -49,11 +49,33 @@ type RenderEntry = {
     label: string;
     items: SelectionDropdownItem[];
 };
+/** A run of consecutive ungrouped items, or a group. Each becomes one listbox of its own. */
+type RenderRun = {
+    kind: 'items';
+    items: SelectionDropdownItem[];
+} | Extract<RenderEntry, {
+    kind: 'group';
+}>;
 type SelectionDropdownMode = 'multiple' | 'single';
 /** A dropdown of options on any trigger. `multiple` = checkbox rows with search; `single` = rows, closes on pick. */
 declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
+    private static nextId;
     private readonly symbolRegistry;
     private readonly panel;
+    private readonly options;
+    /** Mirrors the key manager's active index, so the roving tabindex can be bound. */
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    private readonly injector;
+    /** Names the dialog. Falls back to the visible title, then to a generic label rather than none. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Names the listbox holding what is already selected. */
+    readonly selectedSectionText: _angular_core.InputSignal<string>;
+    /** Names a listbox of ungrouped options when the dropdown has no title. */
+    readonly optionsSectionText: _angular_core.InputSignal<string>;
+    protected readonly panelLabel: _angular_core.Signal<string>;
+    protected readonly listboxId: string;
+    private keyManager;
+    private primed;
     trigger: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     /** ID for the header button */
     headerButtonId: _angular_core.InputSignal<string | undefined>;
@@ -79,6 +101,8 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     searchPlaceholderText: _angular_core.InputSignal<string>;
     /** Text to display when no search results are found */
     noSearchResultsText: _angular_core.InputSignal<string>;
+    /** Announced once a search settles. `{count}` is replaced by how many options matched. */
+    searchResultsText: _angular_core.InputSignal<string>;
     /** Whether to show a backdrop that closes the dropdown when clicked */
     showBackdrop: _angular_core.InputSignal<boolean>;
     /** Whether the dropdown is disabled and cannot be opened */
@@ -109,6 +133,8 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     protected readonly inputSearchComponent: _angular_core.Signal<InputSearchComponent | undefined>;
     readonly isOpen: _angular_core.Signal<boolean>;
     focusInput: _angular_core.EffectRef;
+    /** Single-select opens on its first option; multi does not, since marking one the user never chose announces a selection. */
+    primeOptions: _angular_core.EffectRef;
     protected readonly isSingleSelect: _angular_core.Signal<boolean>;
     /** Always true in `multiple` mode, leaving that layout untouched; only `single` collapses the header. */
     protected readonly searchVisible: _angular_core.Signal<boolean>;
@@ -116,6 +142,8 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     protected readonly headerVisible: _angular_core.Signal<boolean>;
     private readonly internalItems;
     protected readonly filteredItems: _angular_core.WritableSignal<SelectionDropdownItem[]>;
+    /** What the live region holds. Empty outside a search: the list is on screen, unchanged. */
+    protected readonly resultsAnnouncement: _angular_core.WritableSignal<string>;
     protected readonly initiallySelectedItems: _angular_core.WritableSignal<SelectionDropdownItem[]>;
     protected readonly selectedItems: _angular_core.Signal<SelectionDropdownItem[]>;
     protected readonly unselectedItems: _angular_core.Signal<SelectionDropdownItem[]>;
@@ -125,6 +153,11 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
      * an already-seen group join that existing group entry.
      */
     protected readonly displayEntries: _angular_core.Signal<RenderEntry[]>;
+    /**
+     * A listbox owns only options, so a group's checkbox cannot sit inside one: each group gets its own
+     * listbox, and the ungrouped items between two groups are collected into one rather than one each.
+     */
+    protected readonly displayRuns: _angular_core.Signal<RenderRun[]>;
     protected readonly groupSelectionStates: _angular_core.Signal<Record<string, "selected" | "partial" | "unselected">>;
     constructor();
     ngOnDestroy(): void;
@@ -142,12 +175,37 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     private selectOnly;
     /** Handles footer button clicks */
     onFooterButtonClick(): void;
-    /** Handles footer button keyboard events */
-    onFooterButtonKeydown(event: KeyboardEvent): void;
+    /**
+     * A search field keeps focus, so the list is marked rather than focused and the field says which
+     * option through `aria-activedescendant`. Without a field, focus is the only affordance there is,
+     * and the type-ahead is free — it is only a rival to a field that does the same job.
+     */
+    private activeManager;
+    /** `@for` gives a per-loop index, and the options span several listboxes, so identity decides. */
+    protected runKey(run: RenderRun): string;
+    /** With a search field the list is no tab stop at all: the field owns it and reaches it by arrow. */
+    protected optionTabIndex(carriesIt: boolean): 0 | -1;
+    /**
+     * Roving tabindex across every listbox at once: the options are a single tab stop. Before any
+     * arrow key the first option carries it, or nothing in the list could be tabbed to.
+     */
+    protected tabbableOption(item: SelectionDropdownItem): boolean;
+    /** The option the search field names as active, or nothing until an arrow key marks one. */
+    protected readonly activeDescendantId: _angular_core.Signal<string | null>;
+    /** An option needs an id of its own: the consumer's htmlId is not unique across a page. */
+    protected optionId(item: SelectionDropdownItem): string;
+    /**
+     * The manager owns the arrows and Home/End. An option is a button, so it activates itself.
+     *
+     * Keys from the search field arrive here by bubbling, so only navigation crosses over: anything
+     * else is the text being typed, and the manager would answer it instead of the field.
+     */
+    onOptionsKeyDown(event: KeyboardEvent): void;
+    /** Leaving the field ends its hold on the list: a marker nothing can commit only misleads. */
+    protected onSearchBlur(): void;
+    private fromSearchField;
     /** Handles header button clicks */
     onHeaderButtonClick(): void;
-    /** Handles header button keyboard events */
-    onHeaderButtonKeydown(event: KeyboardEvent): void;
     /** Handles search input changes from the rendered field. Filtering is driven by the
      *  `searchTerm` effect, so this only updates the term and notifies listeners. */
     onSearchTermChange(term: string): void;
@@ -155,10 +213,15 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     onGroupToggle(groupLabel: string, checked: boolean): void;
     /** Stable track key for a render entry (item or group). */
     protected entryKey(entry: RenderEntry): string;
+    /**
+     * A filtered list changes under a screen reader with nothing said, and the field keeps the focus,
+     * so there is no new focus to read either. Announced after the debounce, once the count is final.
+     */
+    private announceResults;
     /** Updates the filtered items based on search term */
     private updateFilteredItems;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectionDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectionDropdownComponent, "ap-selection-dropdown", never, { "headerButtonId": { "alias": "headerButtonId"; "required": false; "isSignal": true; }; "footerButtonId": { "alias": "footerButtonId"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "footerButtonText": { "alias": "footerButtonText"; "required": false; "isSignal": true; }; "footerButtonSymbolId": { "alias": "footerButtonSymbolId"; "required": false; "isSignal": true; }; "headerButtonText": { "alias": "headerButtonText"; "required": false; "isSignal": true; }; "headerButtonSymbolId": { "alias": "headerButtonSymbolId"; "required": false; "isSignal": true; }; "searchPlaceholderText": { "alias": "searchPlaceholderText"; "required": false; "isSignal": true; }; "noSearchResultsText": { "alias": "noSearchResultsText"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "selectionChange": "selectionChange"; "footerButtonClick": "footerButtonClick"; "headerButtonClick": "headerButtonClick"; "searchInputChange": "searchInputChange"; "searchTerm": "searchTermChange"; }, ["trigger"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectionDropdownComponent, "ap-selection-dropdown", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "selectedSectionText": { "alias": "selectedSectionText"; "required": false; "isSignal": true; }; "optionsSectionText": { "alias": "optionsSectionText"; "required": false; "isSignal": true; }; "headerButtonId": { "alias": "headerButtonId"; "required": false; "isSignal": true; }; "footerButtonId": { "alias": "footerButtonId"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "footerButtonText": { "alias": "footerButtonText"; "required": false; "isSignal": true; }; "footerButtonSymbolId": { "alias": "footerButtonSymbolId"; "required": false; "isSignal": true; }; "headerButtonText": { "alias": "headerButtonText"; "required": false; "isSignal": true; }; "headerButtonSymbolId": { "alias": "headerButtonSymbolId"; "required": false; "isSignal": true; }; "searchPlaceholderText": { "alias": "searchPlaceholderText"; "required": false; "isSignal": true; }; "noSearchResultsText": { "alias": "noSearchResultsText"; "required": false; "isSignal": true; }; "searchResultsText": { "alias": "searchResultsText"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "selectionChange": "selectionChange"; "footerButtonClick": "footerButtonClick"; "headerButtonClick": "headerButtonClick"; "searchInputChange": "searchInputChange"; "searchTerm": "searchTermChange"; }, ["trigger"], never, true, never>;
 }
 
 /**

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

@@ -8,7 +8,7 @@ export { Step, StepperComponent } from '@agorapulse/ui-components/stepper';
 import * as i3 from '@agorapulse/ui-components/confirm-modal';
 export { ConfirmModalComponent, ConfirmModalTexts } from '@agorapulse/ui-components/confirm-modal';
 import * as i4 from '@agorapulse/ui-components/datepicker';
-export { DatepickerComponent, DatepickerMode, I18nDatePicker, Period } from '@agorapulse/ui-components/datepicker';
+export { DatepickerComponent, DatepickerMode, DatepickerPreset, DatepickerSelectComponent, DatepickerValue, Period, defaultDatepickerPresets, isPeriod } from '@agorapulse/ui-components/datepicker';
 import * as i5 from '@agorapulse/ui-components/dot-stepper';
 export { DotStepperComponent } from '@agorapulse/ui-components/dot-stepper';
 import * as i6 from '@agorapulse/ui-components/directives';
@@ -39,9 +39,7 @@ 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 { DropdownOptionDirective, DropdownOverlay, DropdownTriggerDirective, createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 export { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';
 export { ActionDropdownComponent, ActionDropdownItem, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
 export { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';
@@ -49,7 +47,6 @@ export { BadgeComponent } from '@agorapulse/ui-components/badge';
 export { ButtonComponent } from '@agorapulse/ui-components/button';
 export { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
 export { CounterComponent } from '@agorapulse/ui-components/counter';
-export { DateRangePickerComponent, DateRangePickerPreset, defaultDateRangePickerPresets } from '@agorapulse/ui-components/date-range-picker';
 export { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 export { InputComponent } from '@agorapulse/ui-components/legacy/input';
 export { SelectComponent } from '@agorapulse/ui-components/legacy/select';

package/fesm2022/agorapulse-ui-components-date-range-picker.mjs

@@ -1,163 +0,0 @@
-import { LOCALE_CONFIG, LocaleService } from '@agorapulse/ngx-daterangepicker-material';
-import { DatepickerMode, DatepickerDropdownComponent } from '@agorapulse/ui-components/datepicker';
-import { DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';
-import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
-import { SymbolComponent, withSymbols, apCalendar, apChevronDown, apChevronUp, apClock, apInfo } from '@agorapulse/ui-symbol';
-import * as i0 from '@angular/core';
-import { model, input, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import dayjs from 'dayjs';
-
-/** The default preset list (English labels), computed relative to `today` so ranges stay fresh. */
-function defaultDateRangePickerPresets(today = dayjs()) {
-    const yesterday = today.subtract(1, 'day');
-    return [
-        { key: 'yesterday', label: 'Yesterday', range: [yesterday, yesterday] },
-        { key: 'lastWeek', label: 'Last week', range: [today.subtract(7, 'day'), yesterday] },
-        { key: 'last30Days', label: 'Last 30 days', range: [today.subtract(30, 'day'), yesterday] },
-        {
-            key: 'lastMonth',
-            label: 'Previous month',
-            range: [today.subtract(1, 'month').startOf('month'), today.subtract(1, 'month').endOf('month')],
-        },
-        { key: 'last90Days', label: 'Last 90 days', range: [today.subtract(90, 'day'), yesterday] },
-        { key: 'last12Months', label: 'Last 12 months', range: [today.subtract(1, 'year'), yesterday] },
-        { key: 'thisMonth', label: 'This month', range: [yesterday.startOf('month'), yesterday] },
-        {
-            key: 'lastYear',
-            label: 'Previous year',
-            range: [today.subtract(1, 'year').startOf('year'), today.subtract(1, 'year').endOf('year')],
-        },
-    ];
-}
-function timeZoneAbbreviation(timeZone) {
-    return (new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'short' })
-        .formatToParts(new Date())
-        .find(({ type }) => type === 'timeZoneName')?.value ?? '');
-}
-/**
- * A compact date-range selector for toolbars: a trigger chip showing the selected
- * period that opens a dropdown with preset ranges and a dual-month calendar.
- *
- * @example
- * ```html
- * <ap-date-range-picker
- *     [(value)]="period"
- *     [maxDate]="yesterday"
- *     timeZone="Europe/Paris"
- *     (presetSelected)="onPreset($event)" />
- * ```
- */
-class DateRangePickerComponent {
-    /** The selected period. Supports two-way binding via `[(value)]`. */
-    value = model({ startDate: undefined, endDate: undefined }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** The preset ranges listed in the dropdown. Defaults to `defaultDateRangePickerPresets()`. */
-    presets = input(defaultDateRangePickerPresets(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
-    /** Earliest selectable date. */
-    minDate = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
-    /** Latest selectable date. */
-    maxDate = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** Maximum number of days between the start and the end date. Undefined means no limit. */
-    maxRangeDays = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxRangeDays" }] : /* istanbul ignore next */ []));
-    /** Caption shown in the panel when `maxRangeDays` is set. Defaults to an English sentence — pass a translated one. */
-    maxRangeDaysHint = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxRangeDaysHint" }] : /* istanbul ignore next */ []));
-    /** Locale used for the calendar and the trigger label. */
-    locale = input('en', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    firstDayOfWeek = input('monday', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
-    /** dayjs format of the trigger label. */
-    dateFormat = input('ll', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
-    /** Text shown on the trigger while no period is selected. */
-    placeholder = input('Select period', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
-    placement = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
-    /** Label of the "Custom" entry in the preset list. */
-    customRangeLabel = input('Custom', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customRangeLabel" }] : /* istanbul ignore next */ []));
-    /** IANA time zone name. When set, a chip with the zone's offset is shown next to the trigger. */
-    timeZone = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
-    /** Tooltip text of the info icon shown next to the time-zone chip. */
-    timeZoneTooltip = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "timeZoneTooltip" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Close the dropdown once a full period is selected. When false it stays open until backdrop click or Escape. */
-    closeOnSelect = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
-    /** Emits the `key` of the preset matching the picked period, or 'custom'. */
-    presetSelected = output();
-    DatepickerMode = DatepickerMode;
-    rangesConfig = computed(() => Object.fromEntries(this.presets().map(({ label, range }) => [label, range])), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangesConfig" }] : /* istanbul ignore next */ []));
-    i18n = computed(() => ({
-        ranges: {
-            yesterday: 'Yesterday',
-            lastWeek: 'Last Week',
-            last30Days: 'Last 30 days',
-            lastMonth: 'Previous month',
-            thisMonth: 'This month',
-        },
-        customRangeLabel: this.customRangeLabel(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "i18n" }] : /* istanbul ignore next */ []));
-    formattedValue = computed(() => {
-        const { startDate, endDate } = this.value();
-        if (!startDate || !endDate) {
-            return '';
-        }
-        const format = (date) => date.locale(this.locale()).format(this.dateFormat());
-        return `${format(startDate)} - ${format(endDate)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
-    rangeHint = computed(() => {
-        const days = this.maxRangeDays();
-        return days ? (this.maxRangeDaysHint() ?? `Maximum period: ${days} days`) : undefined;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangeHint" }] : /* istanbul ignore next */ []));
-    timeZoneOffset = computed(() => {
-        const timeZone = this.timeZone();
-        return timeZone ? timeZoneAbbreviation(timeZone) : '';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "timeZoneOffset" }] : /* istanbul ignore next */ []));
-    onPeriodSelected(period) {
-        this.value.set(period);
-        this.presetSelected.emit(this.matchPresetKey(period));
-    }
-    matchPresetKey({ startDate, endDate }) {
-        const match = this.presets().find(({ range: [start, end] }) => startDate?.isSame(start, 'day') && endDate?.isSame(end, 'day'));
-        return match?.key ?? 'custom';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DateRangePickerComponent, isStandalone: true, selector: "ap-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDays: { classPropertyName: "maxRangeDays", publicName: "maxRangeDays", isSignal: true, isRequired: false, transformFunction: null }, maxRangeDaysHint: { classPropertyName: "maxRangeDaysHint", publicName: "maxRangeDaysHint", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, customRangeLabel: { classPropertyName: "customRangeLabel", publicName: "customRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, timeZoneTooltip: { classPropertyName: "timeZoneTooltip", publicName: "timeZoneTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", presetSelected: "presetSelected" }, host: { classAttribute: "ap-date-range-picker" }, providers: [
-            withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apInfo),
-            { provide: LOCALE_CONFIG, useValue: {} },
-            LocaleService,
-        ], ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"ap-date-range-picker__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"dropdown.isOpen()\"\n    [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n    [disabled]=\"disabled()\"\n    [apDropdownTrigger]=\"dropdown\">\n    <ap-symbol\n        size=\"sm\"\n        symbolId=\"calendar\" />\n    @if (formattedValue()) {\n        <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n    } @else {\n        <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n    }\n    <ap-symbol\n        class=\"ap-date-range-picker__chevron\"\n        size=\"sm\"\n        [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n    <div\n        class=\"ap-date-range-picker__timezone\"\n        apTooltipPosition=\"bottom\"\n        [apTooltip]=\"timeZone()\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"clock\"\n            color=\"grey\" />\n        <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n    </div>\n    @if (timeZoneTooltip()) {\n        <ap-symbol\n            class=\"ap-date-range-picker__timezone-info\"\n            size=\"sm\"\n            symbolId=\"info\"\n            color=\"grey-blue\"\n            apTooltipPosition=\"bottom\"\n            [apTooltip]=\"timeZoneTooltip()\" />\n    }\n}\n\n<ap-datepicker-dropdown\n    #dropdown\n    [mode]=\"DatepickerMode.Range\"\n    [closeOnSelect]=\"closeOnSelect()\"\n    [dateLimit]=\"maxRangeDays()\"\n    [placement]=\"placement()\"\n    [hint]=\"rangeHint()\"\n    [disabled]=\"disabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [i18n]=\"i18n()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [rangesConfig]=\"rangesConfig()\"\n    [selectedPeriod]=\"value()\"\n    [showCustomRangeLabel]=\"true\"\n    [showRanges]=\"true\"\n    (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-date-range-picker{display:inline-flex;align-items:center;gap:var(--ref-spacing-sm)}.ap-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs);height:var(--sys-button-height);padding:0 var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);border-radius:var(--sys-border-radius-sm);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);cursor:pointer}.ap-date-range-picker__trigger .ap-symbol{color:var(--ref-color-grey-150)}.ap-date-range-picker__trigger:hover:not(:disabled){border-color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled{cursor:default;color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled .ap-symbol{color:inherit}.ap-date-range-picker__trigger--open{border-color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__trigger--open .ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__placeholder{color:var(--sys-text-color-light)}.ap-date-range-picker__chevron{padding-left:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone-info{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "firstDayOfWeek", "locale", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-date-range-picker', imports: [DatepickerDropdownComponent, DropdownTriggerDirective, SymbolComponent, TooltipDirective], providers: [
-                        withSymbols(apCalendar, apChevronDown, apChevronUp, apClock, apInfo),
-                        { provide: LOCALE_CONFIG, useValue: {} },
-                        LocaleService,
-                    ], host: {
-                        class: 'ap-date-range-picker',
-                    }, encapsulation: ViewEncapsulation.None, template: "<button\n    type=\"button\"\n    class=\"ap-date-range-picker__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"dropdown.isOpen()\"\n    [class.ap-date-range-picker__trigger--open]=\"dropdown.isOpen()\"\n    [disabled]=\"disabled()\"\n    [apDropdownTrigger]=\"dropdown\">\n    <ap-symbol\n        size=\"sm\"\n        symbolId=\"calendar\" />\n    @if (formattedValue()) {\n        <span class=\"ap-date-range-picker__value\">{{ formattedValue() }}</span>\n    } @else {\n        <span class=\"ap-date-range-picker__placeholder\">{{ placeholder() }}</span>\n    }\n    <ap-symbol\n        class=\"ap-date-range-picker__chevron\"\n        size=\"sm\"\n        [symbolId]=\"dropdown.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n</button>\n\n@if (timeZone()) {\n    <div\n        class=\"ap-date-range-picker__timezone\"\n        apTooltipPosition=\"bottom\"\n        [apTooltip]=\"timeZone()\">\n        <ap-symbol\n            size=\"sm\"\n            symbolId=\"clock\"\n            color=\"grey\" />\n        <span class=\"ap-date-range-picker__timezone-offset\">{{ timeZoneOffset() }}</span>\n    </div>\n    @if (timeZoneTooltip()) {\n        <ap-symbol\n            class=\"ap-date-range-picker__timezone-info\"\n            size=\"sm\"\n            symbolId=\"info\"\n            color=\"grey-blue\"\n            apTooltipPosition=\"bottom\"\n            [apTooltip]=\"timeZoneTooltip()\" />\n    }\n}\n\n<ap-datepicker-dropdown\n    #dropdown\n    [mode]=\"DatepickerMode.Range\"\n    [closeOnSelect]=\"closeOnSelect()\"\n    [dateLimit]=\"maxRangeDays()\"\n    [placement]=\"placement()\"\n    [hint]=\"rangeHint()\"\n    [disabled]=\"disabled()\"\n    [firstDayOfWeek]=\"firstDayOfWeek()\"\n    [i18n]=\"i18n()\"\n    [locale]=\"locale()\"\n    [maxDate]=\"maxDate()\"\n    [minDate]=\"minDate()\"\n    [rangesConfig]=\"rangesConfig()\"\n    [selectedPeriod]=\"value()\"\n    [showCustomRangeLabel]=\"true\"\n    [showRanges]=\"true\"\n    (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-date-range-picker{display:inline-flex;align-items:center;gap:var(--ref-spacing-sm)}.ap-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs);height:var(--sys-button-height);padding:0 var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);border-radius:var(--sys-border-radius-sm);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);cursor:pointer}.ap-date-range-picker__trigger .ap-symbol{color:var(--ref-color-grey-150)}.ap-date-range-picker__trigger:hover:not(:disabled){border-color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled{cursor:default;color:var(--ref-color-grey-40)}.ap-date-range-picker__trigger:disabled .ap-symbol{color:inherit}.ap-date-range-picker__trigger--open{border-color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__trigger--open .ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-date-range-picker__placeholder{color:var(--sys-text-color-light)}.ap-date-range-picker__chevron{padding-left:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-date-range-picker__timezone-info{display:inline-flex;align-items:center}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], maxRangeDaysHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDaysHint", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], customRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRangeLabel", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], presetSelected: [{ type: i0.Output, args: ["presetSelected"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DateRangePickerComponent, defaultDateRangePickerPresets };
-//# sourceMappingURL=agorapulse-ui-components-date-range-picker.mjs.map