monkey-style-guide 21.0.4 → 21.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monkey-style-guide",
-  "version": "21.0.4",
+  "version": "21.0.5",
   "peerDependencies": {
     "@angular/animations": "^21.1.0",
     "@angular/cdk": "^21.1.0",

package/types/monkey-style-guide.d.ts

@@ -268,9 +268,8 @@ declare class MonkeyFormFieldComponent implements AfterContentInit, AfterContent
     static ngAcceptInputType_noFooterSpace: unknown;
 }
 
-type IconName = 'clear' | 'calendar' | 'arrowDown' | 'arrowRight' | 'check' | 'minus' | 'loading' | 'searchFail' | 'search' | 'addPlus' | 'googleMaps' | 'location' | 'edit';
 declare class UtilIconComponent {
-    name: i0.InputSignal<IconName>;
+    name: i0.InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UtilIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UtilIconComponent, "util-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -652,18 +651,290 @@ declare class MonkeyDownloadButtonComponent {
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
+/**
+ * Filter types supported by the filter bar
+ */
+type FilterType = 'text' | 'date' | 'currency' | 'status';
+/**
+ * Status option for status filter checkboxes
+ */
+interface StatusOption {
+    /** Value of the checkbox option */
+    value: string;
+    /** Description/label for the checkbox option */
+    description: string;
+}
+/**
+ * Configuration for a filter option
+ */
+interface FilterOption {
+    /** Unique identifier for the filter */
+    key: string;
+    /** Display label for the filter */
+    label: string;
+    /** Icon name to display (optional) */
+    icon?: string;
+    /** Type of filter input */
+    type: FilterType;
+    /** Placeholder text for the filter input (optional) */
+    placeholder?: string;
+    /** Minimum date for date filters (optional) */
+    minDate?: Date | string;
+    /** Maximum date for date filters (optional) */
+    maxDate?: Date | string;
+    /** Currency code for currency filters (optional) */
+    currency?: string;
+    /** Status options for status filters (required when type is 'status') */
+    statusOptions?: StatusOption[];
+}
+/**
+ * Active filter value
+ */
+interface ActiveFilter {
+    /** Filter key */
+    key: string;
+    /** Filter label */
+    label: string;
+    /** Filter type */
+    type: FilterType;
+    /** Filter value (format depends on type: string for text, object for date/currency, string[] for status) */
+    value: string | {
+        startDate: string;
+        endDate: string;
+    } | {
+        min?: number;
+        max?: number;
+    } | string[];
+    /** Display text for the filter tag */
+    displayText: string;
+    /** Icon name (optional) */
+    icon?: string;
+}
+/**
+ * Filter bar configuration
+ */
+interface FilterBarConfig {
+    /** Available filter options */
+    filterOptions: FilterOption[];
+    /** Placeholder text for search input */
+    searchPlaceholder?: string;
+}
 
-declare class MonkeyFilterBarComponent implements AfterContentInit, OnDestroy, OnChanges {
+declare class MonkeyFilterBarComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
     protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+    private _filterBarService;
+    /** Unique key for this filter bar instance */
+    key: i0.InputSignal<string>;
+    /** Filter bar configuration */
+    config: i0.InputSignal<FilterBarConfig | undefined>;
+    /** Output event when filters change */
+    filtersChange: EventEmitter<{
+        search?: string;
+        filters: ActiveFilter[];
+    }>;
+    /** Output event when search value changes */
+    searchChange: EventEmitter<string>;
     showPopOver: boolean;
+    showSubmenuPopover: boolean;
+    showFilterInputPopover: boolean;
     elementTarget: HTMLElement | null;
-    closePopOver: () => void;
+    submenuTarget: HTMLElement | null;
+    filterInputTarget: HTMLElement | null;
+    filterInputValue: string;
+    selectedFilterOption: i0.WritableSignal<FilterOption | null>;
+    showCustomDatePicker: boolean;
+    filterDateRange: {
+        startDate: string;
+        endDate: string;
+    };
+    filterCurrencyRange: {
+        min: number;
+        max: number;
+    };
+    currencyRangeType: 'from' | 'until';
+    selectedStatusValues: string[];
+    isEditingActiveFilter: boolean;
+    handledFilterOptionLabel: i0.Signal<string | undefined>;
+    handledFilterOptionIcon: i0.Signal<string | undefined>;
+    serviceConfig: i0.Signal<FilterBarConfig | undefined>;
+    activeFilters: i0.Signal<ActiveFilter[]>;
+    searchValue: i0.Signal<string>;
+    constructor();
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    /**
+     * Get available filter options (excluding already active filters)
+     */
+    availableFilterOptions(): FilterOption[];
+    /**
+     * Check if a filter is already active
+     */
+    isFilterActive(filterKey: string): boolean;
+    /**
+     * Handle showing the popover
+     */
     onShowPopOver(el: MonkeyButtonComponent): void;
+    /**
+     * Get unique ID for a filter option
+     */
+    getFilterOptionId(optionKey: string): string;
+    /**
+     * Get unique ID for an active filter tag
+     */
+    getActiveFilterId(filterKey: string): string;
+    /**
+     * Handle filter option selection - opens submenu for date filters, direct input for others
+     */
+    onSelectFilterOption(option: FilterOption): void;
+    /**
+     * Handle quick date selection from submenu
+     */
+    onSelectQuickDate(option: string): void;
+    /**
+     * Show filter input popover (for non-date filters or custom date picker)
+     */
+    onShowFilterInput(): void;
+    /**
+     * Handle date range change
+     */
+    onDateRangeChange(event: {
+        startDate: string;
+        endDate: string;
+    }): void;
+    /**
+     * Handle status checkbox change
+     */
+    onStatusCheckboxChange(statusValue: string, checked: boolean): void;
+    /**
+     * Apply the selected filter
+     */
+    onApplyFilter(): void;
+    /**
+     * Edit an active filter - opens the input popover with current values
+     */
+    onEditActiveFilter(activeFilter: ActiveFilter): void;
+    /**
+     * Remove a filter
+     */
+    onRemoveFilter(filterKey: string, event?: Event): void;
+    /**
+     * Clear all filters
+     */
+    onClearAllFilters(): void;
+    /**
+     * Handle search input change
+     */
+    onSearchChange(value: string): void;
+    /**
+     * Emit filters change event
+     */
+    private emitFiltersChange;
+    closePopOver: () => void;
+    closeSubmenuPopover: () => void;
+    closeFilterInputPopover: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterBarComponent, "monkey-filter-bar", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyFilterBarComponent, "monkey-filter-bar", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "filtersChange": "filtersChange"; "searchChange": "searchChange"; }, never, never, true, never>;
+}
+
+interface FilterBarState {
+    search: string;
+    filters: ActiveFilter[];
+}
+declare class MonkeyFilterBarService {
+    private _configs;
+    private _activeFilters;
+    private _searchValues;
+    /**
+     * Initialize or update configuration for a filter bar instance
+     */
+    setConfig(storageKey: string, config: FilterBarConfig): void;
+    /**
+     * Get configuration for a filter bar instance
+     */
+    getConfig(storageKey: string): FilterBarConfig | undefined;
+    /**
+     * Get configuration as a computed signal
+     */
+    config(storageKey: string): i0.Signal<FilterBarConfig | undefined>;
+    /**
+     * Get available filter options (excluding already active filters)
+     */
+    availableFilterOptions(storageKey: string): FilterOption[];
+    /**
+     * Get active filters for a filter bar instance
+     */
+    getActiveFilters(storageKey: string): ActiveFilter[];
+    /**
+     * Get active filters as a computed signal
+     */
+    activeFilters(storageKey: string): i0.Signal<ActiveFilter[]>;
+    /**
+     * Check if a filter is already active
+     */
+    isFilterActive(storageKey: string, filterKey: string): boolean;
+    /**
+     * Set active filters for a filter bar instance (overwrites existing)
+     */
+    setActiveFilters(storageKey: string, filters: ActiveFilter[]): void;
+    /**
+     * Add a filter
+     */
+    addFilter(storageKey: string, option: FilterOption, value: string | {
+        startDate: string;
+        endDate: string;
+    } | {
+        min?: number;
+        max?: number;
+    } | string[]): void;
+    /**
+     * Update an existing filter (preserves position in array)
+     */
+    updateFilter(storageKey: string, filterKey: string, option: FilterOption, value: string | {
+        startDate: string;
+        endDate: string;
+    } | {
+        min?: number;
+        max?: number;
+    } | string[]): void;
+    /**
+     * Remove a filter
+     */
+    removeFilter(storageKey: string, filterKey: string): void;
+    /**
+     * Clear all filters for a filter bar instance
+     */
+    clearAllFilters(storageKey: string): void;
+    /**
+     * Get search value for a filter bar instance
+     */
+    getSearchValue(storageKey: string): string;
+    /**
+     * Get search value as a computed signal
+     */
+    searchValue(storageKey: string): i0.Signal<string>;
+    /**
+     * Set search value
+     */
+    setSearchValue(storageKey: string, value: string): void;
+    /**
+     * Get complete state (search + filters)
+     */
+    getState(storageKey: string): FilterBarState;
+    /**
+     * Get state as a computed signal
+     */
+    state(storageKey: string): i0.Signal<{
+        search: string;
+        filters: ActiveFilter[];
+    }>;
+    /**
+     * Format filter value for display (plain text, no formatting)
+     */
+    private formatFilterValuePlain;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyFilterBarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MonkeyFilterBarService>;
 }
 
 declare class MonkeyIconButtonComponent {
@@ -672,6 +943,7 @@ declare class MonkeyIconButtonComponent {
     disabled: boolean;
     icon: string;
     loading: boolean;
+    color: MonkeyButtonColor;
     protected _uid: string;
     protected _id: string;
     get id(): string;
@@ -679,7 +951,7 @@ declare class MonkeyIconButtonComponent {
     constructor();
     onClick(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MonkeyIconButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyIconButtonComponent, "monkey-icon-button", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonkeyIconButtonComponent, "monkey-icon-button", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /** ************************
@@ -2083,5 +2355,5 @@ declare const MECX_COUNTRY_ISO_CODE: InjectionToken<string>;
 declare const MECX_GOOGLE_API_KEY: InjectionToken<string>;
 declare function injectTokenWithWarning<T>(token: InjectionToken<T>, name?: string): T | null;
 
-export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, getCurrencySymbol, injectTokenWithWarning };
-export type { GoogleApiPlaces, GoogleApiPlacesAddressComponents, GoogleApiPlacesResponse, MonkeyAlertType, MonkeyAutocompleteData, MonkeyAutocompleteResponse, MonkeyBreadcrumb, MonkeyButtonColor, MonkeyButtonType, MonkeyDownloadButtonChangeEvent, MonkeyInputUploadChangeEvent, MonkeyModalConfirmationConfig, MonkeyModalDefaultConfig, MonkeyPopoverDir, MonkeyPopoverOptions, MonkeySize, MonkeyTableScrollConfig, MonkeyToastPosition, MonkeyToastType, ToastConfig };
+export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, getCurrencySymbol, injectTokenWithWarning };
+export type { ActiveFilter, FilterBarConfig, FilterBarState, FilterOption, FilterType, GoogleApiPlaces, GoogleApiPlacesAddressComponents, GoogleApiPlacesResponse, MonkeyAlertType, MonkeyAutocompleteData, MonkeyAutocompleteResponse, MonkeyBreadcrumb, MonkeyButtonColor, MonkeyButtonType, MonkeyDownloadButtonChangeEvent, MonkeyInputUploadChangeEvent, MonkeyModalConfirmationConfig, MonkeyModalDefaultConfig, MonkeyPopoverDir, MonkeyPopoverOptions, MonkeySize, MonkeyTableScrollConfig, MonkeyToastPosition, MonkeyToastType, StatusOption, ToastConfig };