@agorapulse/ui-components 20.4.10 → 20.4.12

package/filter-dropdown/index.d.ts

@@ -1,34 +1,32 @@
 import { AvatarNetwork } from '@agorapulse/ui-components/avatar';
 import { Period } from '@agorapulse/ui-components/datepicker';
 import dayjs from 'dayjs';
+import { SelectLabelSingleDisplayType } from '@agorapulse/ui-components/select';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 
-type FilterType = 'checkbox' | 'radio' | 'toggle' | 'select' | 'date-range';
-interface FilterItemCheckbox {
+type FilterDropdownType = 'checkbox' | 'radio' | 'toggle' | 'select' | 'date-range';
+interface FilterDropdownItemCheckbox {
     label: string;
     name: string;
     checked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
 }
-interface FilterItemRadio {
+interface FilterDropdownItemRadio {
     label: string;
     radioId: string;
     value: unknown;
     disabled?: boolean;
 }
-interface FilterItemToggle {
+interface FilterDropdownItemToggle {
     label: string;
     name: string;
     checked?: boolean;
     disabled?: boolean;
-    confirm?: boolean;
-    confirmMessage?: string;
-    confirmTitle?: string;
 }
-interface FilterItemSelect {
+interface FilterDropdownItemSelect {
     text: string;
     caption?: string;
     avatarUrl?: string;
@@ -38,7 +36,34 @@ interface FilterItemSelect {
     network?: AvatarNetwork;
     dividerEnabled?: boolean;
 }
-interface FilterGroupBase {
+interface FilterDropdownValueCheckbox {
+    filterType: 'checkbox';
+    /** Names of the checked items */
+    selected: string[];
+}
+interface FilterDropdownValueRadio {
+    filterType: 'radio';
+    selected: unknown;
+}
+interface FilterDropdownValueToggle {
+    filterType: 'toggle';
+    checked: boolean;
+}
+interface FilterDropdownValueSelect {
+    filterType: 'select';
+    /** Indices of selected items */
+    selected: number[];
+}
+interface FilterDropdownValueDateRange {
+    filterType: 'date-range';
+    selectedPeriod?: Period;
+}
+type FilterDropdownValue = FilterDropdownValueCheckbox | FilterDropdownValueRadio | FilterDropdownValueToggle | FilterDropdownValueSelect | FilterDropdownValueDateRange;
+/** The output emitted by filter-dropdown on apply: a map of filter key → value */
+type FilterDropdownOutput = Record<string, FilterDropdownValue>;
+interface FilterDropdownGroupBase {
+    /** Unique key to identify this filter in the output */
+    key: string;
     /** The title of the filter group to display in the UI */
     title: string;
     /** Whether the filter group is expanded (open) or collapsed by default. Only applicable if `closable` is true. */
@@ -50,46 +75,84 @@ interface FilterGroupBase {
     /** */
     placeholder?: string;
 }
-interface FilterGroupCheckbox extends FilterGroupBase {
-    /** The type of the FilterGroupBase */
+interface FilterDropdownGroupCheckbox extends FilterDropdownGroupBase {
+    /** The type of the FilterDropdownGroupBase */
     filterType: 'checkbox';
-    items: FilterItemCheckbox[];
+    items: FilterDropdownItemCheckbox[];
+    defaultSelected?: string[];
 }
-interface FilterGroupRadio extends FilterGroupBase {
-    /** The type of the FilterGroupBase */
+interface FilterDropdownGroupRadio extends FilterDropdownGroupBase {
+    /** The type of the FilterDropdownGroupBase */
     filterType: 'radio';
-    items: FilterItemRadio[];
+    items: FilterDropdownItemRadio[];
+    defaultSelected?: unknown;
 }
-interface FilterGroupToggle extends FilterGroupBase {
-    /** The type of the FilterGroupBase */
+interface FilterDropdownGroupToggle extends FilterDropdownGroupBase {
+    /** The type of the FilterDropdownGroupBase */
     filterType: 'toggle';
-    items: FilterItemToggle[];
+    item: FilterDropdownItemToggle;
+    defaultSelected?: boolean;
 }
-interface FilterGroupSelect extends FilterGroupBase {
+interface FilterDropdownGroupSelect extends FilterDropdownGroupBase {
     /** An optional label to display next to each filter item (e.g. "and", "or"). Only applicable for checkbox, radio and toggle filter groups. */
     inlineLabel?: string;
-    /** The type of the FilterGroupBase */
+    /** The type of the FilterDropdownGroupBase */
     filterType: 'select';
     /** Whether the select allows single or multiple selection */
     selectionType: 'single' | 'multiple';
     /** An optional type to determine the icon/avatar/symbol to display for each item. Only applicable for select filter groups. */
-    optionType: 'default' | 'user' | 'label' | 'network' | 'sentiment';
-    items: FilterItemSelect[];
+    displayType: SelectLabelSingleDisplayType;
+    items: FilterDropdownItemSelect[];
+    defaultSelected?: number[];
 }
-interface FilterGroupDateRange extends FilterGroupBase {
-    /** The type of the FilterGroupBase */
+interface FilterDropdownGroupDateRange extends FilterDropdownGroupBase {
+    /** The type of the FilterDropdownGroupBase */
     filterType: 'date-range';
     minDate?: dayjs.Dayjs;
     maxDate?: dayjs.Dayjs;
     selectedPeriod?: Period;
 }
-type FilterGroup = FilterGroupCheckbox | FilterGroupRadio | FilterGroupToggle | FilterGroupSelect | FilterGroupDateRange;
+type FilterDropdownGroup = FilterDropdownGroupCheckbox | FilterDropdownGroupRadio | FilterDropdownGroupToggle | FilterDropdownGroupSelect | FilterDropdownGroupDateRange;
+
+declare class FilterState {
+    private readonly _groups;
+    private readonly _draft;
+    readonly groups: _angular_core.Signal<FilterDropdownGroup[]>;
+    readonly draft: _angular_core.Signal<FilterDropdownOutput>;
+    /** Initialize groups and seed draft from config defaults */
+    initialize(groups: FilterDropdownGroup[]): void;
+    collapseHeader(key: string): void;
+    /** Get the draft value for a specific filter key */
+    getValue(key: string): FilterDropdownValue | undefined;
+    /** Update a single filter's draft value */
+    updateValue(key: string, value: FilterDropdownValue): void;
+    /** Toggle a checkbox item in a checkbox filter */
+    toggleCheckbox(key: string, name: string, checked: boolean): void;
+    /** Set the selected radio value */
+    setRadioValue(key: string, value: unknown): void;
+    /** Set the toggle checked state */
+    setToggleValue(key: string, checked: boolean): void;
+    /** Set selected indices for a select filter */
+    setSelectValue(key: string, selected: number[]): void;
+    /** Return the current draft snapshot (used on Apply) */
+    getSnapshot(): FilterDropdownOutput;
+    /** Reset draft to initial values from the current config */
+    reset(): void;
+    /** Clear all draft values to empty/default states */
+    clear(): void;
+    private buildInitialValue;
+    private buildEmptyValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterState, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<FilterState>;
+}
 
 declare class FilterDropdownComponent implements DropdownOverlay {
     private readonly overlay;
+    readonly state: FilterState;
+    initGroups: _angular_core.EffectRef;
     filterGroupTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     /** The filter groups to display in the dropdown */
-    items: _angular_core.InputSignal<FilterGroup[] | undefined>;
+    items: _angular_core.InputSignal<FilterDropdownGroup[] | undefined>;
     /** Whether the filter needs the apply button to be clicked for applyFilters to emit  */
     needApplyButton: _angular_core.InputSignal<boolean>;
     /** Whether the filter group can be closed (collapsed) by the user. If false, the group will always be expanded and the user won't see a toggle button. */
@@ -111,9 +174,9 @@ declare class FilterDropdownComponent implements DropdownOverlay {
     /** Emits when the dropdown menu is closed */
     closed: _angular_core.OutputEmitterRef<void>;
     /** Emits when save presets is clicked */
-    savePresets: _angular_core.OutputEmitterRef<void>;
+    savePresets: _angular_core.OutputEmitterRef<FilterDropdownOutput>;
     /** Emits when filters are applied */
-    applyFilters: _angular_core.OutputEmitterRef<void>;
+    applyFilters: _angular_core.OutputEmitterRef<FilterDropdownOutput>;
     /** Emits when user clicks on clear filter */
     clearFilters: _angular_core.OutputEmitterRef<void>;
     /** Emits when user clicks on reset filter */
@@ -125,9 +188,13 @@ declare class FilterDropdownComponent implements DropdownOverlay {
     close(): void;
     /** Toggles the dropdown menu open or closed state */
     toggle(triggerElement?: HTMLElement): void;
+    onApplyFilters(): void;
+    onClearFilters(): void;
+    onResetFilters(): void;
+    onSavePresets(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterDropdownComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterDropdownComponent, "ap-filter-dropdown", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "needApplyButton": { "alias": "needApplyButton"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "savePresetsMode": { "alias": "savePresetsMode"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultPosition": { "alias": "defaultPosition"; "required": false; "isSignal": true; }; "savePresetsText": { "alias": "savePresetsText"; "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; }; }, { "opened": "opened"; "closed": "closed"; "savePresets": "savePresets"; "applyFilters": "applyFilters"; "clearFilters": "clearFilters"; "resetFilters": "resetFilters"; }, never, never, true, never>;
 }
 
 export { FilterDropdownComponent };
-export type { FilterGroup, FilterGroupCheckbox, FilterGroupDateRange, FilterGroupRadio, FilterGroupSelect, FilterGroupToggle, FilterItemCheckbox, FilterItemRadio, FilterItemSelect, FilterItemToggle, FilterType };
+export type { FilterDropdownGroup, FilterDropdownGroupCheckbox, FilterDropdownGroupDateRange, FilterDropdownGroupRadio, FilterDropdownGroupSelect, FilterDropdownGroupToggle, FilterDropdownItemCheckbox, FilterDropdownItemRadio, FilterDropdownItemSelect, FilterDropdownItemToggle, FilterDropdownOutput, FilterDropdownType, FilterDropdownValue, FilterDropdownValueCheckbox, FilterDropdownValueDateRange, FilterDropdownValueRadio, FilterDropdownValueSelect, FilterDropdownValueToggle };

package/index.d.ts

@@ -46,7 +46,7 @@ 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 { FilterDropdownComponent, FilterGroup, FilterItemCheckbox, FilterItemRadio, FilterItemSelect, FilterItemToggle } from '@agorapulse/ui-components/filter-dropdown';
+export { FilterDropdownComponent, FilterDropdownGroup, FilterDropdownItemCheckbox, FilterDropdownItemRadio, FilterDropdownItemSelect, FilterDropdownItemToggle } from '@agorapulse/ui-components/filter-dropdown';
 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@agorapulse/ui-components",
   "description": "Agorapulse UI Components Library",
-  "version": "20.4.10",
+  "version": "20.4.12",
   "author": "Benoit Hediard",
   "repository": {
     "type": "git",

package/select/index.d.ts

@@ -31,13 +31,16 @@ declare class SelectBaseDirective implements AfterViewInit {
 declare class SelectMultipleDirective implements AfterViewInit, OnDestroy {
     private readonly selectComponent;
     private readonly elementRef;
+    private readonly originalDisabledState;
+    maxItemsTooltip: _angular_core.InputSignal<string | undefined>;
     valueContainer: HTMLElement | null;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onMousedown: (event: MouseEvent) => void;
+    private updateMaxItemsDisabledState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectMultipleDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectMultipleDirective, "ng-select[apSelectMultiple]", never, {}, {}, never, never, true, [{ directive: typeof SelectBaseDirective; inputs: { "inlineLabel": "inlineLabel"; "symbolId": "symbolId"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectMultipleDirective, "ng-select[apSelectMultiple]", never, { "maxItemsTooltip": { "alias": "maxItemsTooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof SelectBaseDirective; inputs: { "inlineLabel": "inlineLabel"; "symbolId": "symbolId"; }; outputs: {}; }]>;
 }
 
 declare class SelectSingleDirective implements AfterViewInit {
@@ -92,6 +95,7 @@ declare class DropdownItemSingleTwoLinesComponent {
 
 declare class DropdownItemMultipleOneLineComponent {
     private readonly symbolRegistry;
+    protected readonly selectMultiple: SelectMultipleDirective | null;
     constructor();
     text: string;
     selected: boolean;
@@ -122,6 +126,7 @@ declare class DropdownItemMultipleOneLineComponent {
 
 declare class DropdownItemMultipleTwoLinesComponent {
     private readonly symbolRegistry;
+    protected readonly selectMultiple: SelectMultipleDirective | null;
     constructor();
     text: string;
     caption: string;
@@ -151,6 +156,7 @@ declare class DropdownItemMultipleTwoLinesComponent {
 
 type SelectBaseDisplayType = 'tag' | 'label';
 type SelectLabelSingleDisplayType = 'text' | 'withAvatar' | SelectBaseDisplayType;
+type SelectLabelMultipleDisplayType = SelectBaseDisplayType;
 
 declare class SelectLabelSingleComponent {
     displayType: _angular_core.InputSignal<SelectLabelSingleDisplayType>;
@@ -231,6 +237,7 @@ declare class DropdownGroupItemComponent {
     isGroupIntermediate(): boolean;
     isGroupChecked(): boolean;
     isGroupDisabled(): boolean;
+    onGroupClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownGroupItemComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownGroupItemComponent, "ap-dropdown-group-item", never, { "groupLabel": { "alias": "groupLabel"; "required": true; }; "groupTag": { "alias": "groupTag"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "children": { "alias": "children"; "required": true; }; "select": { "alias": "select"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -242,3 +249,4 @@ declare class ApSelectModule {
 }
 
 export { ApSelectModule, DropdownGroupItemComponent, DropdownItemMultipleOneLineComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent, DropdownSearchFormComponent, SelectBaseDirective, SelectLabelMultipleComponent, SelectLabelSingleComponent, SelectMultipleDirective, SelectSingleDirective };
+export type { SelectLabelMultipleDisplayType, SelectLabelSingleDisplayType };