import * as _angular_core from '@angular/core';
import { AfterViewInit, ElementRef, Injector } from '@angular/core';
import _Avatar, { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
export { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';
import { UI5CustomEvent } from '@ui5/webcomponents-base';

declare class Avatar implements AfterViewInit {
    /**
     * Defines whether the component is disabled.
  A disabled component can't be pressed or
  focused, and it is not in the tab chain.
     */
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Defines if the avatar is interactive (focusable and pressable).
  
  **Note:** This property won't have effect if the `disabled`
  property is set to `true`.
     */
    interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Defines the name of the UI5 Icon, that will be displayed.
  
  **Note:** If `image` slot is provided, the property will be ignored.
  
  **Note:** You should import the desired icon first, then use its name as "icon".
  
  `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
  
  `<ui5-avatar icon="employee">`
  
  **Note:** If no icon or an empty one is provided, by default the "employee" icon should be displayed.
  
  See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
     */
    icon: _angular_core.InputSignal<string | undefined>;
    /**
     * Defines the name of the fallback icon, which should be displayed in the following cases:
  
      - If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
      - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
      - If the image src is wrong.
  
  **Note:** If not set, a default fallback icon "employee" is displayed.
  
  **Note:** You should import the desired icon first, then use its name as "fallback-icon".
  
  `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
  
  `<ui5-avatar fallback-icon="alert">`
  
  See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
     */
    fallbackIcon: _angular_core.InputSignal<string | undefined>;
    /**
     * Defines the displayed initials.
  
  Up to three Latin letters can be displayed as initials.
     */
    initials: _angular_core.InputSignal<string | undefined>;
    /**
     * Defines the shape of the component.
     */
    shape: _angular_core.InputSignal<"Circle" | "Square" | undefined>;
    /**
     * Defines predefined size of the component.
     */
    size: _angular_core.InputSignal<"XS" | "S" | "M" | "L" | "XL" | undefined>;
    /**
     * Defines the background color of the desired image.
  If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
     */
    colorScheme: _angular_core.InputSignal<"Auto" | "Accent1" | "Accent2" | "Accent3" | "Accent4" | "Accent5" | "Accent6" | "Accent7" | "Accent8" | "Accent9" | "Accent10" | "Placeholder" | "Transparent" | undefined>;
    /**
     * Defines the text alternative of the component.
  If not provided a default text alternative will be set, if present.
     */
    accessibleName: _angular_core.InputSignal<string | undefined>;
    /**
     * Defines the additional accessibility attributes that will be applied to the component.
  The following field is supported:
  
  - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
  Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
     */
    accessibilityAttributes: _angular_core.InputSignal<AvatarAccessibilityAttributes | undefined>;
    /**
     * Fired on mouseup, space and enter if avatar is interactive
  
  **Note:** The event will not be fired if the `disabled`
  property is set to `true`.
     */
    ui5Click: _angular_core.OutputEmitterRef<UI5CustomEvent<_Avatar, "click">>;
    /**
     * Available slots for content projection in this component.
     *
     * Slots allow you to insert custom content into predefined areas of the web component.
     * Use the `slot` attribute on child elements to target specific slots.
     *
     * - **(default)**: Receives the desired `<img>` tag
  
  **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>
  `ui5-avatar:not(:defined) {`<br/>
  &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
  `}`
     * - **badge**: Defines the optional badge that will be used for visual affordance.
  
  **Note:** While the slot allows for custom badges, to achieve
  the Fiori design, you can use the `ui5-tag` with `ui5-icon`
  in the corresponding `icon` slot, without text nodes.
     *
     * @example
     * ```html
     * <ui5-avatar>
     *   <div slot="header">Custom header content</div>
     *   <p>Default slot content</p>
     * </ui5-avatar>
     * ```
     *
     * @readonly
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
     */
    readonly slots: {
        name: string;
        description: string;
        since: string;
    }[];
    elementRef: ElementRef<_Avatar>;
    injector: Injector;
    get element(): _Avatar;
    ngAfterViewInit(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Avatar, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Avatar, "ui5-avatar, [ui5-avatar]", ["ui5Avatar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "fallbackIcon": { "alias": "fallbackIcon"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "accessibleName": { "alias": "accessibleName"; "required": false; "isSignal": true; }; "accessibilityAttributes": { "alias": "accessibilityAttributes"; "required": false; "isSignal": true; }; }, { "ui5Click": "ui5Click"; }, never, ["*"], true, never>;
}

export { Avatar };
