import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
import { PreferenceGroup, UserPreference } from './userPreference.js';
import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
import IGirafePanel from '../../tools/state/igirafepanel.js';
/**
 Lets the user override default configuration values and saves them as user data.
 */
export default class UserPreferencesComponent extends GirafeHTMLElement implements IGirafePanel {
    templateUrl: null;
    styleUrls: null;
    template: () => import("uhtml").Hole;
    isPanelVisible: boolean;
    panelTitle: string;
    panelTogglePath: string;
    ready: boolean;
    preferences: Record<string, UserPreference>;
    preferenceGroups: PreferenceGroup[];
    colorPickers: Record<string, GirafeColorPicker>;
    private readonly storagePath;
    constructor();
    private initPreferences;
    protected connectedCallback(): void;
    render(): void;
    private renderComponent;
    togglePanel(visible: boolean): void;
    onChangeDarkMapMode(newValue: boolean | undefined): void;
    onChangeDarkFrontendMode(newValue: boolean | undefined): void;
    activateTheme(mode: 'dark' | 'light', className: string): void;
    /**
     For preferences that have options to choose from, readout all possible select options to show in the dropdowns
     */
    private initPreferenceOptions;
    /**
     * Collect all possible options for the default theme preference. This has to be repeatable, since the user
     * can create new custom themes at any time.
     */
    private refreshThemeOptions;
    /**
     Readout the default value from the config to show in the component
     */
    private initCurrentPreferenceValues;
    /**
     * Initializes dark mode-related preferences with fallback logic
     */
    private initDarkModeDefaults;
    /**
     * Create color picker object and set the initial color value
     */
    private initColorPicker;
    /**
     * If necessary, change/update options of select elements right before they're shown.
     */
    onOpenSelectOption(preferenceKey: string): void;
    /**
     Called when user changes a preference in the panel
     */
    onSelectOption(preferenceKey: string, evt: Event): void;
    /**
     Update state and local storage with new value
     */
    changePreference(preferenceKey: string, newValue: unknown): void;
    /**
     Update the config object with the new value
     */
    private updatePreferenceInConfig;
    /**
     Update the state with the new value
     */
    private updatePreferenceInState;
    /**
     Save the user preference as a config override in user data storage
     */
    private updatePreferenceInStorage;
    /**
     Delete user preference in the local browser storage
     */
    private deletePreferenceInStorage;
    /**
     * Reset user preferences back to defaults. This will delete the configOverrides object in storage and set the
     * current state back to the defaults from config.json
     */
    onResetAll(): Promise<void>;
    private resetAll;
    /**
     * @returns all preferences of a group for easy usage in the template.
     */
    getPreferencesByGroup(group: string): [UserPreference, string][];
}