@agorapulse/ui-components 22.1.8 → 22.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@agorapulse/ui-components",
   "description": "Agorapulse UI Components Library",
-  "version": "22.1.8",
+  "version": "22.2.1",
   "author": "Benoit Hediard",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.8.0",
     "@ng-select/ng-select": "^23.0.0",
     "@agorapulse/ngx-daterangepicker-material": "^6.0.5",
-    "dayjs": "^1.11.6",
+    "dayjs": "^1.11.8",
     "es-toolkit": "1.39.8",
     "ngxtension": "7.2.0"
   },
@@ -81,10 +81,6 @@
       "types": "./types/agorapulse-ui-components-counter.d.ts",
       "default": "./fesm2022/agorapulse-ui-components-counter.mjs"
     },
-    "./date-range-picker": {
-      "types": "./types/agorapulse-ui-components-date-range-picker.d.ts",
-      "default": "./fesm2022/agorapulse-ui-components-date-range-picker.mjs"
-    },
     "./datepicker": {
       "types": "./types/agorapulse-ui-components-datepicker.d.ts",
       "default": "./fesm2022/agorapulse-ui-components-datepicker.mjs"

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

@@ -3,9 +3,107 @@ import * as _angular_core from '@angular/core';
 import { OnInit, OnChanges, AfterViewInit, ChangeDetectorRef, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
 import { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 import dayjs from 'dayjs';
+import { ButtonConfig } from '@agorapulse/ui-components/button';
 import { SymbolRegistry } from '@agorapulse/ui-symbol';
 import { DaterangepickerComponent } from '@agorapulse/ngx-daterangepicker-material';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
+
+/** The month a calendar should move to. */
+interface DatepickerMonth {
+    /** Zero-based, as dayjs and the vendor both count months. */
+    month: number;
+    year: number;
+}
+/** A cell of the grid, carrying the states the template would otherwise recompute on every render. */
+interface MonthOption {
+    month: number;
+    label: string;
+    ariaLabel: string;
+    disabled: boolean;
+    config: ButtonConfig;
+}
+/** A cell of the year grid the panel shows once the year is clicked. */
+interface YearOption {
+    year: number;
+    disabled: boolean;
+    config: ButtonConfig;
+}
+/**
+ * A year of months in a dropdown, so a calendar can be moved somewhere far without paging through
+ * the months in between. Driven by `apDropdownTrigger` on whatever the caller wants as a trigger.
+ *
+ * The year is browsable inside the panel; only clicking a month commits.
+ *
+ * @example
+ * ```html
+ * <ap-button [apDropdownTrigger]="picker">{{ label }}</ap-button>
+ * <ap-datepicker-month-picker
+ *     #picker
+ *     [month]="month"
+ *     [year]="year"
+ *     (monthSelected)="goTo($event)" />
+ * ```
+ */
+declare class DatepickerMonthPickerComponent implements DropdownOverlay {
+    /** The month the calendar is showing, zero-based. Highlighted in the grid. */
+    readonly month: _angular_core.InputSignal<number>;
+    /** The year the calendar is showing. The panel opens on it, and returns to it when it moves. */
+    readonly year: _angular_core.InputSignal<number>;
+    readonly locale: _angular_core.InputSignal<string>;
+    readonly minDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
+    readonly maxDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
+    readonly monthSelected: _angular_core.OutputEmitterRef<DatepickerMonth>;
+    /**
+     * Months until the year is clicked, years until one is picked. Reaching a distant year through
+     * the arrows alone costs one click per year; through the grid it costs one per page.
+     */
+    readonly showingYears: _angular_core.WritableSignal<boolean>;
+    private readonly panelTemplate;
+    private readonly overlay;
+    readonly isOpen: _angular_core.Signal<boolean>;
+    /** Browsable on its own, and re-anchored on the calendar's year whenever that moves. */
+    readonly displayedYear: _angular_core.WritableSignal<number>;
+    /**
+     * First year of the visible page. Pages are fixed blocks rather than a window around the
+     * displayed year, so the same year always sits in the same page and browsing back and forth
+     * lands on the same grid.
+     */
+    private readonly yearPageStart;
+    /** The page the years grid spans, for the header that replaces the year while it shows. */
+    readonly displayedYearRange: _angular_core.Signal<string>;
+    readonly canGoPrevious: _angular_core.Signal<boolean>;
+    readonly canGoNext: _angular_core.Signal<boolean>;
+    readonly months: _angular_core.Signal<MonthOption[]>;
+    readonly years: _angular_core.Signal<YearOption[]>;
+    open(triggerElement?: HTMLElement): void;
+    close(): void;
+    toggle(triggerElement?: HTMLElement): void;
+    onPrevious(): void;
+    onNext(): void;
+    /** Toggles the grid between the months of a year and the years of a page. */
+    onToggleYears(): void;
+    onSelectYear(year: number): void;
+    onSelectMonth(month: number): void;
+    /** One year at a time through the months, a whole page at a time through the years. */
+    private step;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerMonthPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerMonthPickerComponent, "ap-datepicker-month-picker", never, { "month": { "alias": "month"; "required": true; "isSignal": true; }; "year": { "alias": "year"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "monthSelected": "monthSelected"; }, never, never, true, never>;
+}
+
+/** One shortcut in the column beside the calendars. */
+interface DatepickerPreset {
+    /** Stable id, independent of the displayed label. */
+    key: string;
+    /** Text shown to the user. Already translated. */
+    label: string;
+    range: [dayjs.Dayjs, dayjs.Dayjs];
+}
+type DefaultPresetKey = 'yesterday' | 'lastWeek' | 'last30Days' | 'lastMonth' | 'thisMonth';
+/**
+ * The five shortcuts a picker offers by default. A function and not a constant, so the ranges are
+ * computed when shown: a session left open across midnight would otherwise offer yesterday's.
+ */
+declare function defaultDatepickerPresets(labels?: Partial<Record<DefaultPresetKey, string>>, today?: dayjs.Dayjs): DatepickerPreset[];
 
 declare enum DatepickerMode {
     Single = "Single",
@@ -16,44 +114,26 @@ interface Period {
     startDate?: dayjs.Dayjs;
     endDate?: dayjs.Dayjs;
 }
+/**
+ * A range just picked, and the preset it came from when there is one. A widened `Period` rather
+ * than a type of its own, so callers typing `periodSelected` as a `Period` keep compiling.
+ */
+interface SelectedPeriod extends Period {
+    preset?: DatepickerPreset;
+}
 interface StartDate {
     startDate: dayjs.Dayjs;
 }
-interface I18nDatePicker {
-    ranges: {
-        yesterday: string;
-        lastWeek: string;
-        last30Days: string;
-        lastMonth: string;
-        thisMonth: string;
-        [other: string]: string;
-    };
-    /** Label of the "Custom" range entry shown when `showCustomRangeLabel` is enabled. Defaults to 'Custom'. */
-    customRangeLabel?: string;
-}
 type FirstDayOfWeek = 'sunday' | 'monday';
 type Locale = 'en' | 'fr' | 'es' | 'de';
 type RangesConfigPresetType = {
     [periodText: string]: [dayjs.Dayjs, dayjs.Dayjs];
 };
-declare const RangesConfigPreset: {
-    yesterday: [dayjs.Dayjs, dayjs.Dayjs];
-    lastWeek: [dayjs.Dayjs, dayjs.Dayjs];
-    last30Days: [dayjs.Dayjs, dayjs.Dayjs];
-    lastMonth: [dayjs.Dayjs, dayjs.Dayjs];
-    thisMonth: [dayjs.Dayjs, dayjs.Dayjs];
-    lastWeekFromToday: [dayjs.Dayjs, dayjs.Dayjs];
-    lastMonthFromToday: [dayjs.Dayjs, dayjs.Dayjs];
-    last3MonthsFromToday: [dayjs.Dayjs, dayjs.Dayjs];
-    last6MonthsFromToday: [dayjs.Dayjs, dayjs.Dayjs];
-    lastYearFromToday: [dayjs.Dayjs, dayjs.Dayjs];
-};
 declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit {
     changeDetectorRef: ChangeDetectorRef;
     symbolRegistry: SymbolRegistry;
     datepickerRef: DaterangepickerComponent;
     firstDayOfWeek: string;
-    i18n: I18nDatePicker;
     locale: string;
     set maxDate(maxDate: dayjs.Dayjs | undefined);
     set minDate(minDate: dayjs.Dayjs | undefined);
@@ -63,45 +143,66 @@ declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit {
     selectedPeriod: Period;
     /** Maximum number of days between the start and the end date in Range mode. Undefined means no limit. */
     dateLimit: _angular_core.InputSignal<number | undefined>;
-    showRanges: boolean;
-    showCustomRangeLabel: _angular_core.InputSignal<boolean>;
+    /** Shortcuts listed beside the calendars. Empty by default, and ignored outside Range mode. */
+    presets: _angular_core.InputSignal<DatepickerPreset[]>;
     dateSelected: EventEmitter<any>;
-    periodSelected: EventEmitter<Period>;
+    periodSelected: EventEmitter<SelectedPeriod>;
     DatepickerMode: typeof DatepickerMode;
-    doubleCalendarWidth: number;
     localeConfig: {
         customRangeLabel: string;
         daysOfWeek: string[];
         monthNames: string[];
         firstDay: number;
     };
-    rangesConfig: _angular_core.InputSignal<RangesConfigPresetType | null>;
-    ranges: RangesConfigPresetType;
-    rangePickerWidth: number;
-    width: number;
     pageSet: boolean;
     maxDateStr: string;
     minDateStr: string;
+    /** The same bounds as `minDateStr`/`maxDateStr`, kept as dayjs for the month pickers. */
+    maxDateValue: dayjs.Dayjs | undefined;
+    minDateValue: dayjs.Dayjs | undefined;
+    /** A field and not an inline literal: the template would rebuild the object on every pass. */
+    readonly monthTriggerConfig: ButtonConfig;
+    /** A getter and not a `computed`: `mode` is a plain `@Input`, which a computed would not track. */
+    get hasPresets(): boolean;
+    /**
+     * Memoised, and a shared constant when empty, so the reference only changes when `presets` does.
+     * A fresh `ranges` object reaches the vendor's setter, which resets the calendars and drops the
+     * start anchor and the in-range preview of a selection still in progress.
+     */
+    private readonly presetRanges;
+    get vendorRanges(): RangesConfigPresetType;
     constructor(changeDetectorRef: ChangeDetectorRef, symbolRegistry: SymbolRegistry);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     initDatePickerLocale(): void;
-    private initRanges;
     isCustomDate: (date: any) => string[];
     private isSelected;
     onStartDateChanged(event: StartDate): void;
     onDatesUpdated(event: Period): void;
+    /**
+     * The preset the current range came from. The vendor keeps `chosenRange` up to date both ways —
+     * `clickRange` writes the clicked label, `clickDate` resets it to `customRangeLabel` — and those
+     * labels are the keys of its `ranges` table, so they are unique. Matching on the label rather
+     * than on a position survives a translated or reordered shortcut.
+     */
+    private chosenPreset;
     onNextMonth(): void;
+    onLeftMonthPicked(picked: DatepickerMonth): void;
+    onRightMonthPicked(picked: DatepickerMonth): void;
+    /**
+     * The vendor moves the view only — never the selection — and clamps to its own min/max on the
+     * way, so the picker's disabled months are a second line of defence rather than the only one.
+     */
+    private moveCalendarTo;
     onPreviousMonth(): void;
     /**
      * Ugly hack used here to open the calendar on the right day if they are selected dates
      *      * https://github.com/fetrarij/ngx-daterangepicker-material/issues/139
      */
     setCalendarCurrentPage(): void;
-    setWidth(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ap-datepicker", never, { "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "mode": { "alias": "mode"; "required": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedDates": { "alias": "selectedDates"; "required": false; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; }; "dateLimit": { "alias": "dateLimit"; "required": false; "isSignal": true; }; "showRanges": { "alias": "showRanges"; "required": false; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "rangesConfig": { "alias": "rangesConfig"; "required": false; "isSignal": true; }; }, { "dateSelected": "dateSelected"; "periodSelected": "periodSelected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ap-datepicker", never, { "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "mode": { "alias": "mode"; "required": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedDates": { "alias": "selectedDates"; "required": false; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; }; "dateLimit": { "alias": "dateLimit"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, { "dateSelected": "dateSelected"; "periodSelected": "periodSelected"; }, never, never, true, never>;
 }
 
 /**
@@ -109,7 +210,14 @@ declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit {
  * in an overlay. Exposes open/close/toggle so it can be driven by apDropdownTrigger.
  */
 declare class DatepickerDropdownComponent implements DropdownOverlay {
-    datepickerDropdownTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /**
+     * Stable id for the panel (`role="dialog"`), so a trigger can bind `aria-controls` to it.
+     * Combines the app id — several federated Angular apps can share one page — with a per-instance
+     * random suffix computed once at construction. No shared mutable counter, and no reliance on
+     * `crypto.randomUUID()`, which browsers refuse outside a secure (HTTPS/localhost) context.
+     */
+    readonly panelId: string;
+    private readonly panel;
     mode: _angular_core.InputSignal<DatepickerMode>;
     selectedDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
     selectedDates: _angular_core.InputSignal<dayjs.Dayjs[]>;
@@ -120,15 +228,20 @@ declare class DatepickerDropdownComponent implements DropdownOverlay {
     dateLimit: _angular_core.InputSignal<number | undefined>;
     /** Caption shown at the bottom of the panel, e.g. to explain a selection constraint. */
     hint: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Rendered under `hint`, for what a caption cannot carry — a banner with its own button. A
+     * `TemplateRef` and not an `ng-content`: the footer shows inside the overlay's embedded view.
+     */
+    panelFooter: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     firstDayOfWeek: _angular_core.InputSignal<"sunday" | "monday">;
     locale: _angular_core.InputSignal<string>;
-    i18n: _angular_core.InputSignal<I18nDatePicker | undefined>;
-    protected readonly effectiveI18n: _angular_core.Signal<I18nDatePicker>;
-    showRanges: _angular_core.InputSignal<boolean>;
-    showCustomRangeLabel: _angular_core.InputSignal<boolean>;
-    rangesConfig: _angular_core.InputSignal<RangesConfigPresetType | null>;
+    /** Shortcuts listed beside the calendars. Empty: no column at all. */
+    presets: _angular_core.InputSignal<DatepickerPreset[]>;
     showBackdrop: _angular_core.InputSignal<boolean>;
-    /** Close the overlay once a full period is selected. When false it stays open until backdrop click or Escape. */
+    /**
+     * Close the overlay once the selection is complete. When false it stays open until backdrop
+     * click or Escape — which lets the host vet a selection before anything closes.
+     */
     closeOnSelect: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
@@ -136,59 +249,171 @@ declare class DatepickerDropdownComponent implements DropdownOverlay {
     opened: _angular_core.OutputEmitterRef<void>;
     closed: _angular_core.OutputEmitterRef<void>;
     dateSelected: _angular_core.OutputEmitterRef<dayjs.Dayjs>;
-    periodSelected: _angular_core.OutputEmitterRef<Period>;
-    private readonly overlay;
+    periodSelected: _angular_core.OutputEmitterRef<SelectedPeriod>;
     readonly isOpen: _angular_core.Signal<boolean>;
     open(triggerElement?: HTMLElement): void;
+    /** `closed` is relayed from the panel, which fires it for a gesture as well as for this call. */
     close(): void;
     toggle(triggerElement?: HTMLElement): void;
     onDateSelected(date: dayjs.Dayjs): void;
-    onPeriodSelected(period: Period): void;
+    onPeriodSelected(period: SelectedPeriod): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerDropdownComponent, "ap-datepicker-dropdown", never, { "mode": { "alias": "mode"; "required": true; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "selectedDates": { "alias": "selectedDates"; "required": false; "isSignal": true; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateLimit": { "alias": "dateLimit"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "i18n": { "alias": "i18n"; "required": false; "isSignal": true; }; "showRanges": { "alias": "showRanges"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "rangesConfig": { "alias": "rangesConfig"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "dateSelected": "dateSelected"; "periodSelected": "periodSelected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerDropdownComponent, "ap-datepicker-dropdown", never, { "mode": { "alias": "mode"; "required": true; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "selectedDates": { "alias": "selectedDates"; "required": false; "isSignal": true; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateLimit": { "alias": "dateLimit"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "panelFooter": { "alias": "panelFooter"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "dateSelected": "dateSelected"; "periodSelected": "periodSelected"; }, never, never, true, never>;
 }
 
-declare const defaultPeriodSelected: Period;
-declare class InputDatepickerComponent implements ControlValueAccessor {
-    mode: _angular_core.InputSignal<DatepickerMode>;
-    label: _angular_core.InputSignal<string | undefined>;
-    placeholder: _angular_core.InputSignal<string>;
-    firstDayOfWeek: _angular_core.InputSignal<FirstDayOfWeek>;
-    locale: _angular_core.InputSignal<Locale>;
-    dateFormat: _angular_core.InputSignal<string>;
-    disabled: _angular_core.InputSignal<boolean>;
-    minDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
-    maxDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
-    selectedDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
-    selectedDates: _angular_core.InputSignal<dayjs.Dayjs[]>;
-    selectedPeriod: _angular_core.InputSignal<Period | undefined>;
-    i18n: _angular_core.InputSignal<I18nDatePicker | undefined>;
-    showRanges: _angular_core.InputSignal<boolean>;
-    showCustomRangeLabel: _angular_core.InputSignal<boolean>;
-    rangesConfig: _angular_core.InputSignal<RangesConfigPresetType | null>;
-    showBackdrop: _angular_core.InputSignal<boolean>;
+/**
+ * An `ap-datepicker-select` value. Its shape depends on the mode: a date in Single, a Period in
+ * Range, an array of dates in Multiple. TypeScript cannot tie the two together — `mode` is a
+ * runtime value — hence the guard below.
+ */
+type DatepickerValue = dayjs.Dayjs | Period | dayjs.Dayjs[];
+/** Tells a `Period` from the two other shapes, without an `as`. */
+declare function isPeriod(value: unknown): value is Period;
+/**
+ * Throws when the value does not match the mode. An empty value (`undefined`, `null`) is accepted
+ * everywhere: it means nothing is selected.
+ */
+declare function assertValueMatchesMode(mode: DatepickerMode, value: unknown): void;
+
+/** A selected date, as the field shows it in Multiple mode. */
+interface DateChip {
+    label: string;
+    date: dayjs.Dayjs;
+}
+/** What the field just committed, and the preset it came from. */
+interface DatepickerSelection {
+    /** The committed value, in the shape the mode requires. */
+    value: DatepickerValue | undefined;
+    /** The preset clicked, when the value came from one. Absent from a calendar pick. */
+    preset?: DatepickerPreset;
+}
+/**
+ * The design system's date field: it shows the value, opens the shared panel and binds to a form.
+ * It carries no label of its own — wrap it in an `ap-form-field`, as `ap-select` is.
+ *
+ * @example
+ * ```html
+ * <ap-form-field>
+ *     <label for="period">Reporting period</label>
+ *     <ap-datepicker-select [mode]="DatepickerMode.Range" [(value)]="period" [presets]="presets" />
+ * </ap-form-field>
+ * ```
+ */
+declare class DatepickerSelectComponent implements FormValueControl<DatepickerValue | undefined | null> {
+    readonly mode: _angular_core.InputSignal<DatepickerMode>;
+    /**
+     * The selection. Its shape follows the mode: a date in Single, a `Period` in Range, an array in
+     * Multiple. A shape that does not match the mode throws on the first render.
+     *
+     * Empty is `undefined`, and `null` is accepted for it: a form holding a nullable date has no
+     * other empty to offer, and this is the type a binding is checked against.
+     */
+    readonly value: _angular_core.ModelSignal<DatepickerValue | null | undefined>;
+    /** Disables the field. A form writes here too, rather than to a second flag of its own. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly minDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
+    readonly maxDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
+    /**
+     * Maximum number of days between the start and the end, in Range mode. It bars the days beyond
+     * the limit without saying so: pair it with a `panelHint` when the constraint deserves a word.
+     */
+    readonly maxRangeDays: _angular_core.InputSignal<number | undefined>;
+    /** Caption shown at the bottom of the panel, to explain a constraint for instance. */
+    readonly panelHint: _angular_core.InputSignal<string | undefined>;
+    /** Rendered under `panelHint`, for what a sentence cannot carry — a banner with its own button. */
+    readonly panelFooter: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    /**
+     * Consulted before a selection is committed. Returning `false` keeps the current value, keeps the
+     * panel open and emits `selectionRejected`.
+     *
+     * A constraint the panel can apply itself (`minDate`, `maxDate`, `maxRangeDays`) belongs there
+     * instead: it bars the days rather than letting them be clicked and then refused.
+     */
+    readonly canSelect: _angular_core.InputSignal<((value: DatepickerValue) => boolean) | undefined>;
+    /** Shortcuts listed beside the calendars. Empty: no column at all. */
+    readonly presets: _angular_core.InputSignal<DatepickerPreset[]>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name of the field, since `role="combobox"` is not a name-from-content role and the
+     * component carries no internal `<label>` — surround it with an `ap-form-field` for the visible
+     * label, and mirror its text here.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * dayjs format of the displayed text. Defaults to `'MM/DD/YYYY'`, which needs no plugin: the
+     * localized tokens (`ll`, `LL`) assume the host application loaded `dayjs/plugin/localizedFormat`.
+     */
+    readonly dateFormat: _angular_core.InputSignal<string>;
+    readonly locale: _angular_core.InputSignal<Locale>;
+    readonly firstDayOfWeek: _angular_core.InputSignal<FirstDayOfWeek>;
     /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
     readonly placement: _angular_core.InputSignal<_floating_ui_utils.Placement | undefined>;
-    /** Show a clear (X) inside the input when a value is selected. Off by default. */
-    clearable: _angular_core.InputSignal<boolean>;
-    periodRange: _angular_core.WritableSignal<Period>;
-    isDisabled: _angular_core.WritableSignal<boolean>;
-    periodChanged: _angular_core.OutputEmitterRef<Period>;
-    dateSelected: _angular_core.OutputEmitterRef<dayjs.Dayjs>;
-    displayedDate: _angular_core.Signal<string>;
-    initPeriodRange: _angular_core.EffectRef;
-    onTouched: () => void;
-    onChange: (value: Period) => void;
-    onPeriodSelected(period: Period): void;
-    /** Clear the selected period. Stops propagation so it doesn't reopen the calendar. */
-    onClear(event: Event): void;
-    writeValue(value: Period): void;
-    registerOnChange(fn: (value: Period) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputDatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputDatepickerComponent, "ap-input-datepicker", never, { "mode": { "alias": "mode"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "selectedDates": { "alias": "selectedDates"; "required": false; "isSignal": true; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; "isSignal": true; }; "i18n": { "alias": "i18n"; "required": false; "isSignal": true; }; "showRanges": { "alias": "showRanges"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "rangesConfig": { "alias": "rangesConfig"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "periodChanged": "periodChanged"; "dateSelected": "dateSelected"; }, never, never, true, never>;
+    /** Shows a clear cross in the field as soon as something is selected. */
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    /** IANA time zone name. When set, a chip shows its abbreviation beside the field. */
+    readonly timeZone: _angular_core.InputSignal<string | undefined>;
+    /** Tooltip carried by the info icon next to the chip. */
+    readonly timeZoneTooltip: _angular_core.InputSignal<string | undefined>;
+    /** Blur of the combobox. A form reads it to mark the field touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /** The committed value with the preset that produced it, beside `valueChange` — one event, not two halves to correlate. */
+    readonly selectionChange: _angular_core.OutputEmitterRef<DatepickerSelection>;
+    /** The selection `canSelect` just refused. The field's value has not moved. */
+    readonly selectionRejected: _angular_core.OutputEmitterRef<DatepickerValue>;
+    /** The panel just opened, just closed, so that what a host shows beside it can start over. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly DatepickerMode: typeof DatepickerMode;
+    /**
+     * The panel only closes itself without a refusal predicate: it emits the selection then closes,
+     * so a veto would land too late. With one, the field closes what it accepted.
+     */
+    protected readonly closesOnSelect: _angular_core.Signal<boolean>;
+    /** Fed by the dropdown's `opened`/`closed` rather than read back from it: a host class can only bind to our own members. */
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /** The dropdown driving the panel — held only to close it when the field becomes disabled. */
+    private readonly dropdown;
+    /**
+     * Closes an already-open panel the moment the field becomes disabled. The dropdown only guards
+     * *new* opens, and its panel is a CDK overlay detached from this component's DOM.
+     */
+    private readonly closeOnDisable;
+    /** Checks the value once, and sorts it into the three shapes the panel expects. */
+    private readonly shaped;
+    protected readonly selectedDate: _angular_core.Signal<dayjs.Dayjs | undefined>;
+    protected readonly selectedDates: _angular_core.Signal<dayjs.Dayjs[] | never[]>;
+    /**
+     * Bumped to re-impose the value a refusal kept. The panel only reacts to `selectedPeriod`
+     * changing identity, so putting it back takes a fresh object.
+     */
+    private readonly restoreNonce;
+    protected readonly selectedPeriod: _angular_core.Signal<{
+        startDate?: dayjs.Dayjs;
+        endDate?: dayjs.Dayjs;
+    }>;
+    protected readonly hasValue: _angular_core.Signal<boolean>;
+    /** The field's text. Empty in Multiple, where the field shows chips instead. */
+    readonly displayed: _angular_core.Signal<string>;
+    /** The chips shown in Multiple mode, one per selected date. */
+    readonly chips: _angular_core.Signal<DateChip[]>;
+    /** The zone abbreviation ("EST", "CEST"…), computed without touching dayjs globally. */
+    readonly timeZoneOffset: _angular_core.Signal<string>;
+    onDateSelected(date: dayjs.Dayjs): void;
+    /** Drops a date from the selection, from the chip the user closed. */
+    removeDate(chip: DateChip): void;
+    protected onPanelOpened(): void;
+    protected onPanelClosed(): void;
+    /** The preset is stripped from the value: it says where the value came from, it is not part of it. */
+    onPeriodSelected({ preset, ...period }: SelectedPeriod): void;
+    /** Clears the selection. Stops propagation so the panel does not reopen. */
+    clear(event: Event): void;
+    /** The single write point: the signal and the form get the same value, and a disabled field none. */
+    private commit;
+    /** True when nothing is left to pick — the panel's own closing criterion. */
+    private isComplete;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerSelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerSelectComponent, "ap-datepicker-select", never, { "mode": { "alias": "mode"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "maxRangeDays": { "alias": "maxRangeDays"; "required": false; "isSignal": true; }; "panelHint": { "alias": "panelHint"; "required": false; "isSignal": true; }; "panelFooter": { "alias": "panelFooter"; "required": false; "isSignal": true; }; "canSelect": { "alias": "canSelect"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "timeZoneTooltip": { "alias": "timeZoneTooltip"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; "selectionChange": "selectionChange"; "selectionRejected": "selectionRejected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
-export { DatepickerComponent, DatepickerDropdownComponent, DatepickerMode, InputDatepickerComponent, RangesConfigPreset, defaultPeriodSelected };
-export type { FirstDayOfWeek, I18nDatePicker, Locale, Period, RangesConfigPresetType, StartDate };
+export { DatepickerComponent, DatepickerDropdownComponent, DatepickerMode, DatepickerMonthPickerComponent, DatepickerSelectComponent, assertValueMatchesMode, defaultDatepickerPresets, isPeriod };
+export type { DateChip, DatepickerMonth, DatepickerPreset, DatepickerSelection, DatepickerValue, DefaultPresetKey, FirstDayOfWeek, Locale, Period, SelectedPeriod, StartDate };

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { AfterContentChecked, ElementRef, AfterViewInit, OnInit, OnDestroy, EventEmitter, OnChanges, InjectionToken, Renderer2 } from '@angular/core';
 import { Validator, AbstractControl } from '@angular/forms';
+import * as i1 from 'ngxtension/resize';
 
 declare class AutosizeTextareaDirective implements AfterContentChecked {
     element: ElementRef;
@@ -200,6 +201,77 @@ declare class MultiStyleTextDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MultiStyleTextDirective, "[multiStyleText]", never, { "multiStyleText": { "alias": "multiStyleText"; "required": false; }; }, { "partEvent": "partEvent"; }, never, never, true, never>;
 }
 
+/** Marks an element as one of the items the row may collapse. */
+declare class OverflowItemDirective {
+    readonly elementRef: ElementRef<HTMLElement>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverflowItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OverflowItemDirective, "[apOverflowItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks the "+N" badge so its width can be reserved. Optional, and the first pass never has it:
+ * the badge only enters the DOM once `hiddenCount()` is above zero, so `counterFallbackWidth` stands in.
+ */
+declare class OverflowCounterDirective {
+    readonly elementRef: ElementRef<HTMLElement>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverflowCounterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OverflowCounterDirective, "[apOverflowCounter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Lays a row of items out on a single line and collapses whatever overflows into a "+N" badge.
+ *
+ * Put it on the container, mark the items with `apOverflowItem` and the badge with
+ * `apOverflowCounter`; read `hiddenCount()` to render the badge and to derive the hidden data.
+ * The container is measured, so it must be the box that actually bounds the row — give it
+ * `overflow: hidden` and keep the items from shrinking.
+ *
+ * Specs that mock a consumer's dependencies have to keep this directive — ng-mocks stubs inputs
+ * and outputs, not plain signal members, so a mocked `hiddenCount` is not callable:
+ * `MockBuilder(MyComponent).keep(OverflowCountDirective)`.
+ *
+ * @example
+ * ```html
+ * <div class="chips" apOverflowCount #overflow="apOverflowCount">
+ *     @for (chip of chips(); track chip.id) {
+ *         <ap-tag apOverflowItem>{{ chip.label }}</ap-tag>
+ *     }
+ *     @if (overflow.hiddenCount() > 0) {
+ *         <ap-tag apOverflowCounter>+{{ overflow.hiddenCount() }}</ap-tag>
+ *     }
+ * </div>
+ * ```
+ */
+declare class OverflowCountDirective {
+    private readonly elementRef;
+    private readonly ngxResize;
+    /**
+     * Space between two items, in pixels. Read from the container's computed `column-gap` when left
+     * undefined, which is what a flex or grid row already declares — pass it only when the gap comes
+     * from somewhere the container doesn't express, such as item margins.
+     */
+    readonly gap: i0.InputSignalWithTransform<number | undefined, number | undefined>;
+    /** Width to reserve for the "+N" badge while it is not in the DOM to be measured. */
+    readonly counterFallbackWidth: i0.InputSignalWithTransform<number, unknown>;
+    /** Items kept visible whatever the width. A lone "+N" reads as an empty row, hence the default. */
+    readonly minVisible: i0.InputSignalWithTransform<number, unknown>;
+    private readonly items;
+    private readonly counter;
+    private readonly visible;
+    private readonly hidden;
+    /** How many items are currently laid out. */
+    readonly visibleCount: i0.Signal<number>;
+    /** How many items are collapsed — the number the "+N" badge shows. */
+    readonly hiddenCount: i0.Signal<number>;
+    constructor();
+    /** Measures the row and collapses its overflow. Public so a consumer resizing the container itself can force a pass. */
+    recompute(): void;
+    /** Guarded: these signals are written from a render effect, so an unchanged pass must be inert. */
+    private setCounts;
+    private resolvedGap;
+    private counterWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverflowCountDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OverflowCountDirective, "[apOverflowCount]", ["apOverflowCount"], { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "counterFallbackWidth": { "alias": "counterFallbackWidth"; "required": false; "isSignal": true; }; "minVisible": { "alias": "minVisible"; "required": false; "isSignal": true; }; }, {}, ["items", "counter"], never, true, [{ directive: typeof i1.NgxResize; inputs: {}; outputs: {}; }]>;
+}
+
 /**
  * Stops a click from reaching the ancestors, without altering the host semantics.
  *
@@ -244,5 +316,5 @@ declare class TableColumnDragDirective implements OnInit, OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<TableColumnDragDirective, "table[apTableColumnDrag]", never, {}, {}, never, never, true, never>;
 }
 
-export { AP_INTERACTIVE_ELEMENT, AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, ClickDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective, StopPropagationDirective, TableColumnDragDirective };
+export { AP_INTERACTIVE_ELEMENT, AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, ClickDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective, OverflowCountDirective, OverflowCounterDirective, OverflowItemDirective, StopPropagationDirective, TableColumnDragDirective };
 export type { ApInteractiveElement };