/**
 * Copyright (c) Cisco Systems, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */
import "../button/Button";
import { LitElement, PropertyValues } from "lit";
export declare const iconSize: readonly ["14", "16", "18", "20", "28", "36", "56", 14, 16, 18, 20, 28, 36, 56];
export declare const iconType: readonly ["", "white"];
export declare const iconSet: readonly ["momentumUI", "preferMomentumDesign", "momentumDesign", "momentumBrandVisuals", "svg"];
export declare namespace Icon {
    type Size = (typeof iconSize)[number];
    type Type = (typeof iconType)[number];
    type IconSet = (typeof iconSet)[number];
    type ButtonProperty = {
        [key: string]: string;
    };
    class ELEMENT extends LitElement {
        /**
         * @property {String} color - This property sets the color for font icons and the fill color for SVG icons.
         * It can accept any color value supported by CSS, including CSS variables.
         *
         * Example usage:
         * ```html
         * <md-icon color="#ff0000"></md-icon> <!-- Sets the icon color to red -->
         * <md-icon color="var(--my-custom-color)"></md-icon> <!-- Uses a CSS variable for the icon color -->
         * ```
         */
        color: string;
        /**
         * @property {String} description - This property is used to set extra information on the `aria-label` attribute for the icon.
         * It provides additional descriptive text that can be used in conjunction with the `title` property to form a more complete `aria-label`.
         *
         */
        description: string;
        /**
         * @property {String} name - This property sets the name of the icon.
         * It determines the icon to be displayed and affects the class and SVG icon name.
         *
         *
         * Example usage:
         * ```html
         * <md-icon name="search"></md-icon> <!-- Sets the icon name to "search" -->
         * <md-icon name="icon-search"></md-icon> <!-- Sets the icon name to "search" after removing the "icon-" prefix -->
         * ```
         */
        name: string;
        /**
         * @property {String} id - This property sets the `id` attribute for the icon element.
         * It allows you to specify a unique identifier for the icon.
         */
        id: string;
        /**
         * @property {String} size - This property sets the size of the icon.
         * For SVG icon sets ("momentumDesign"), it sets the width and height in pixels.
         * For font-based icon sets ("momentumUI"), it sets the font-size in pixels.
         *
         * Example usage:
         * ```html
         * <md-icon iconSet="momentumUI" name="search_16" size="24"></md-icon> <!-- Sets the font-size to 24px for the legacy font-based icon set -->
         * <md-icon iconSet="momentumDesign" name="search-bold" size="24"></md-icon> <!-- Sets the width and height to 24px for the new SVG-based icon set -->
         * <md-icon iconSet="momentumBrandVisuals" name="social-facebook-color" size="24"></md-icon> <!-- Sets the width and height to 24px for the brands visuals logo set -->
         * ```
         */
        size: string;
        /**
         * @property {String} title - This property sets the `title` attribute for the icon element.
         * It provides a tooltip text when the user hovers over the icon and is also used in the computation of the `aria-label` for accessibility purposes.
         *
         * Example in HTML:
         * ```html
         * <md-icon title="Search Icon"></md-icon> <!-- Sets the title attribute to "Search Icon" -->
         * ```
         */
        title: string;
        /**
         * @property {String} ariaHidden - This property sets the `aria-hidden` attribute for the icon.
         * It can accept the following values:
         * - "true": Hides the icon from assistive technologies.
         * - "false": Makes the icon visible to assistive technologies.
         * - null: Removes the `aria-hidden` attribute.
         *
         * Example usage:
         * ```html
         * <md-icon ariaHidden="true"></md-icon> <!-- Hides the icon from assistive technologies -->
         * <md-icon ariaHidden="false"></md-icon> <!-- Makes the icon visible to assistive technologies -->
         * <md-icon ariaHidden=null></md-icon> <!-- Removes the aria-hidden attribute -->
         * ```
         */
        ariaHidden: "true" | "false" | null;
        type: string;
        /**
         * @property {Boolean} isActive - This property indicates whether the icon is in an active state.
         * It is only relevant for `momentumUI` icons.
         *
         * When `isActive` is true, the `iconClassMap` getter method includes specific classes for styling the active state of the icon.
         *
         * Example usage:
         * ```html
         * <md-icon name="search" isActive></md-icon> <!-- Sets the icon to an active state -->
         * ```
         *
         * The `iconClassMap` getter method:
         * - Adds the class `md-combobox-input__icon--active` when `isComboBoxIcon` and `isActive` are both true.
         * - Adds other relevant classes based on the icon's state.
         */
        isActive: boolean;
        /**
         * @property {Boolean} isComboBoxIcon - This property indicates whether the icon is used within a combobox input.
         * It is only relevant for `momentumUI` icons.
         *
         * When `isComboBoxIcon` is true, the `iconClassMap` getter method includes specific classes for styling the combobox icon.
         *
         * Example usage:
         * ```html
         * <md-icon name="search" isComboBoxIcon></md-icon> <!-- Adds combobox-specific classes to the icon -->
         * ```
         */
        isComboBoxIcon: boolean;
        /**
         * @property {Boolean} sizeOverrided - This property indicates whether the size of the icon has been overridden.
         * It is only used with `momentumUI` icons.
         *
         * When `sizeOverrided` is true, the `handleSizeOverride` method is called to adjust the icon name based on the overridden size.
         * This has no effect on momentumDesign icons
         */
        sizeOverrided: boolean;
        /**
         * @property {String} iconSet - This property allows selection of the icon set to be used.
         * It supports the following values:
         * - "momentumUI": Always use the legacy font-based icon set. from @momentum-ui/icons
         * - "momentumDesign": Always use the new SVG-based icon set. from @momentum-design/icons
         * - "preferMomentumDesign": Attempt to map icons from the legacy "momentumUI" set to their "momentumDesign" counterparts automatically.
         *   A lookup is done to get the momentum-design name, and if an icon is found and loaded, this is used instead of the font icon.
         *
         * Note: momentum-design icons do not contain size as part of their name, so the size needs to be specified; otherwise, the default size of 16 is used.
         *       for this reason the size property should always be used to allow for easier migration. if no size specified default of 16 used
         *
         * Example usage:
         * ```html
         * <md-icon iconSet="momentumUI" name="search_16"></md-icon> <!-- Uses the legacy font-based icon set -->
         * <md-icon iconSet="momentumDesign" name="search-bold" size="16"></md-icon> <!-- Uses the new SVG-based icon set -->
         * <md-icon iconSet="preferMomentumDesign name="search_16""></md-icon> <!-- Attempts to map icons to the new SVG-based set -->
         * <md-icon iconSet="momentumBrandVisuals" name="social-facebook-color"</md-icon> <!-- Uses the SVG-based brands visuals logo set -->
         * ```
         */
        iconSet: IconSet;
        svgUrl?: string;
        private static readonly designLookup;
        private svgIcon;
        private abortController;
        /**
         * Creates a new AbortController and returns its signal.
         * Aborts any previous pending request.
         */
        private renewSignal;
        disconnectedCallback(): void;
        isSvgAlreadyLoaded(iconName: string): boolean | undefined;
        loadSvgIcon(iconName: string): Promise<void>;
        setSvgIconAttributes(): void;
        private get computedSvgPath();
        private getIsMomentumDesignName;
        private get svgIconName();
        updated(changedProperties: PropertyValues): void;
        _ariaLabel: string;
        get ariaLabel(): string;
        set ariaLabel(value: string);
        get buttonClassMap(): {
            [x: string]: boolean;
        };
        consoleHandler: (message: string, data: string | string[]) => void;
        get iconFontSize(): string | 16;
        get iconColor(): any;
        get iconClassMap(): {
            [x: string]: boolean;
            "md-combobox-input__icon": boolean;
            "md-combobox-input__icon--active": boolean;
        };
        get momentumUIIconLookupName(): string;
        getIconName(): string;
        handleSizeOverride(iconName: string): string;
        get iconName(): string | void;
        get iconStyleMap(): {
            color?: any;
            "font-size"?: string | undefined;
        };
        static get styles(): import("lit").CSSResult[];
        handleIconClick(event: MouseEvent): void;
        private get doesIconSetSupportSVG();
        private get isSVGRender();
        render(): import("lit-html").TemplateResult<1>;
        renderFontIcon(): import("lit-html").TemplateResult<1>;
        renderSVGIcon(): import("lit-html").TemplateResult<1>;
    }
}
declare global {
    interface HTMLElementTagNameMap {
        "md-icon": Icon.ELEMENT;
    }
}