import { PropertyValueMap } from 'lit';
import { OverlayAppearanceType, BadgeAppearanceType, PositionType } from './types/ui.types';
import { NotificationTypes } from './types/notifications.types';
import { UnreadNotificationsController, NotificationFilterProps, UnreadNotificationsProps } from './controllers/unread-notifications-controller';
import { WeavyOptionalAppComponent } from './classes/weavy-optional-app-component';
import { ThemeController } from './controllers/theme-controller';
declare global {
    interface HTMLElementTagNameMap {
        "wy-notification-button": WyNotificationButton;
    }
}
/**
 * @import { WyAppEventType } from "./types/app.events"
 * @import { WyLinkEventType } from "./types/notifications.events"
 * @import { WyUnreadEventType } from "./types/ui.events"
 * @import { WyActionEventType } from "./types/action.events"
 */
/**
 * Weavy notification button component to render a button complete with a realtime badge for the number of unread notifications. When clicking the button, it opens a built in overlay displaying the full list of notifications.
 *
 * Weavy automatically creates notifications for reactions, mentions and other activities.
 *
 * The notifications can be clicked or marked as read or unread. When clicked the notification fires a `"wy-link"` event with information about the originating Weavy component for the notification.
 * This can be used to [handle navigation](https://www.weavy.com/docs/learn/notifications) in the app, back to where the originating Weavy component is placed.
 *
 * The notification button component can optionally be tailored to only show notifications for a specific app or notifications of a specific type, such as _mentions_ or _reactions_.
 * When setting a predefined notification type, it removes the possibility for the user to filter the list by type in the UI.
 *
 * > Complement this with the [`<wy-notification-toasts>`](./wy-notification-toasts.ts) component to also get realtime _in-app notifications_ or _browser notifications_.
 *
 * **Component Layout**
 *
 * The button is displayed as a clickable icon that acts as a button.
 * The default size of the button is the icon size `1.5rem`/`24px` together with the set `--wy-padding` (which defaults to `0.5rem`/`8px`) on every side of the icon, which makes a total of `2.5rem`/`40px` per default.
 *
 * The openable notification list renders in an overlay in the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer).
 * That means that the notification list does not occupy any visual layout space where it's placed in the DOM, it only renders in the top layer.
 *
 * You can add additional styling using _CSS Custom Properties_ and _CSS Shadow Parts_ and further customization using _slots_.
 *
 * **Used sub components:**
 *
 * - [`<wy-button>`](./ui/wy-button.ts)
 * - [`<wy-container>`](./ui/wy-container.ts)
 * - [`<wy-icon>`](./ui/wy-icon.ts)
 * - [`<wy-overlay>`](./ui/wy-overlay.ts)
 * - [`<wy-notification-header>`](./wy-notification-list.ts)
 * - [`<wy-notification-list>`](./wy-notification-list.ts)
 * - [`<wy-badge>`](./ui/wy-badge.ts)
 * - [`<wy-dropdown>`](./ui/wy-dropdown.ts)
 * - [`<wy-dropdown-item>`](./ui/wy-dropdown.ts)
 * - [`<wy-empty>`](./wy-empty.ts)
 *
 * @tagname wy-notification-button
 * @slot actions - Slot for action buttons in the notification list header.
 * @slot title - Slot for title in the notification list header.
 * @fires {WyActionEventType} wy-action - Emitted when a notification is selected.
 * @fires {WyAppEventType} wy-app - Fired whenever the app property changes.
 * @fires {WyLinkEventType} wy-link - Fired when a notification is clicked.
 * @fires {WyUnreadEventType} wy-unread - Fired when the number of unread notifications change.
 *
 * @example <caption>Notification button with notification list overlay</caption>
 *
 * Display notification button with a badge that tracks notifications for the authenticated user and can open an overlay with a notification list on click.
 *
 * ```html
 * <wy-notification-button></wy-notification-button>
 * ```
 *
 * @example <caption>Filter notifications by app</caption>
 *
 * Display notifications for the authenticated user that originated from app with the specified `uid`. Also, show a dot instead of a count when there are unread notifications.
 *
 * ```html
 * <wy-notification-button uid="test-chat" badge="dot"></wy-notification-button>
 * ```
 *
 * @example <caption>Styling the badge</caption>
 *
 * Changes the styles of the badge in the notification button.  Set the background color of the `wy-badge` CSS shadow part.
 *
 * ```css
 * wy-notification-button::part(wy-badge) {
 *   background-color: violet;
 * }
 * ```
 */
export declare class WyNotificationButton extends WeavyOptionalAppComponent implements UnreadNotificationsProps, NotificationFilterProps {
    static styles: import('lit').CSSResult[];
    /** @internal */
    protected theme: ThemeController;
    /** @internal */
    protected unreadNotifications: UnreadNotificationsController;
    /**
     * Disabled link matching/consuming.
     * @internal
     */
    matchesLink(): boolean;
    /**
     * Overlay appearance used for the notification list.
     *
     * @type {"modal" | "sheet" | "drawer" | "full" | "none"}
     * @default "sheet"
     */
    overlay: OverlayAppearanceType;
    /**
     * Overlay appearance used for the notification list.
     *
     * @deprecated
     * @internal
     * @type {"modal" | "sheet" | "drawer" | "full" | "none"}
     * @default "sheet"
     */
    set list(list: OverlayAppearanceType);
    get list(): OverlayAppearanceType;
    /**
     * Notification badge appearance variant.
     *
     * @type {"count" | "compact" | "dot" | "none"}
     * @default "count"
     */
    badge: BadgeAppearanceType;
    /**
     * Set the position of the badge. `"inline"` means no positioning.
     *
     * @type {"inline" | "top-right" | "bottom-right" | "bottom-left" | "top-left"}
     * @default "top-right"
     */
    badgePosition: PositionType;
    /**
     * Notification type filter. No filter (`""`) will allow the user to filter.
     *
     * @type {"" | "activity" | "mention" | "reaction"}
     * @default ""
     */
    typeFilter: NotificationTypes;
    /** @internal */
    currentTypeFilter: NotificationTypes;
    /** @internal */
    showNotificationList: boolean;
    /** Current unread notification count. */
    get unread(): number;
    /** Marks all tracked notifications as read. */
    markAllAsRead(): Promise<void>;
    protected willUpdate(changedProperties: PropertyValueMap<this>): Promise<void>;
    render(): import('../node_modules/lit-html/node/lit-html.js').TemplateResult<1>;
}
//# sourceMappingURL=wy-notification-button.d.ts.map