import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
import { SbbElement } from '../core/base-elements.ts';
export interface InterfaceImageAttributesSizesConfig {
    breakpoints: InterfaceImageAttributesSizesConfigBreakpoint[];
}
export interface InterfaceImageAttributesSizesConfigBreakpoint {
    image: {
        height: number;
        width: number;
    };
    mediaQueries: InterfaceImageAttributesSizesConfigMediaQuery[];
}
export interface InterfaceImageAttributesSizesConfigMediaQuery {
    conditionFeature: string;
    conditionFeatureValue: {
        lyneDesignToken: boolean;
        value: string;
    };
    conditionOperator: false;
}
/**
 * It displays an image.
 *
 * @cssprop [--sbb-image-aspect-ratio=auto] - Can be used to override `aspectRatio` property.
 * This way we can have, for example, an image component with an aspect
 * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
 * @cssprop [--sbb-image-object-position] - Can be used to set the object-position CSS property of the image itself if the image itself is cropped.
 * @cssprop [--sbb-image-object-fit=cover] - Can be used to set the object-fit CSS property of the image itself if the image itself is cropped.
 */
export declare class SbbImageElement extends SbbElement {
    static readonly elementName: string;
    static styles: CSSResultGroup;
    static readonly events: {
        readonly error: "error";
        readonly load: "load";
    };
    private _captionElement?;
    private _linksInCaption?;
    private _config;
    /**
     * An alt text is not always necessary (e.g. in teaser cards when
     * additional link text is provided). In this case we can leave
     * the value of the alt attribute blank, but the attribute itself
     * still needs to be present. That way we can signal assistive
     * technology, that they can skip the image.
     */
    accessor alt: string;
    /**
     * If set to false, we show a blurred version of the image as
     * placeholder before the actual image shows up. This will help
     * to improve the perceived loading performance. Read more about
     * the idea of lqip here:
     * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
     */
    accessor skipLqip: boolean;
    /**
     * Set this to true, if you want to pass a custom focal point
     * for the image. See full documentation here:
     * https://docs.imgix.com/apis/rendering/focalpoint-crop
     */
    accessor customFocalPoint: boolean;
    /**
     * If the lazy property is set to true, the module will automatically
     * change the decoding to async, otherwise the decoding is set to auto
     * which leaves the handling up to the browser. Read more about the
     * decoding attribute here:
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
     */
    accessor decoding: 'sync' | 'async' | 'auto';
    /**
     * Set this to true, to receive visual guidance where the custom focal
     * point is currently set.
     */
    accessor focalPointDebug: boolean;
    /**
     * Pass in a floating number between 0 (left) and 1 (right).
     */
    accessor focalPointX: number;
    /**
     * Pass in a floating number between 0 (top) and 1 (bottom).
     */
    accessor focalPointY: number;
    /**
     * Right now the module is heavily coupled with the image delivery
     * service imgix and depends on the original files being stored
     * inside AEM. You can pass in any https://cdn.img.sbb.ch img
     * src address you find on sbb.ch to play around with it. Just
     * strip the url parameters and paste in the plain file address.
     * If you want to know how to best work with this module with
     * images coming from a different source, please contact the
     * LYNE Core Team.
     */
    accessor imageSrc: string;
    /**
     * The importance attribute is fairly new attribute which should
     * help the browser decide which resources it should prioritise
     * during page load. We will set the attribute value based on the
     * value, we receive in the loading attribute. 'eager', which we use
     * for the largest image within the initial viewport, will set the
     * attribute value to 'high'. 'lazy', which we use for images below
     * the fold, will set the attribute value to 'low'.
     */
    accessor importance: 'auto' | 'high' | 'low';
    /**
     * With the support of native image lazy loading, we can now
     * decide whether we want to load the image immediately or only
     * once it is close to the visible viewport. The value eager is
     * best used for images within the initial viewport. We want to
     * load these images as fast as possible to improve the Core Web
     * Vitals values. lazy on the other hand works best for images
     * which are further down the page or invisible during the loading
     * of the initial viewport.
     */
    accessor loading: 'eager' | 'lazy';
    /**
     * With `performance.mark` you can log a timestamp associated with
     * the name you define in performanceMark when a certain event is
     * happening. In our case we will log the `performance.mark` into
     * the PerformanceEntry API once the image is fully loaded.
     * Performance monitoring tools like SpeedCurve or Lighthouse are
     * then able to grab these entries from the PerformanceEntry API
     * and give us additional information and insights about our page
     * loading behavior. We are then also able to monitor these
     * values over a long period to see if our performance
     * increases or decreases over time. Best to use lowercase strings
     * here, separate words with underscores or dashes.
     */
    accessor performanceMark: string;
    /**
     * With the pictureSizesConfig object, you can pass in information
     * into image about what kind of source elements should get
     * rendered. mediaQueries accepts multiple Media Query entries
     * which can get combined by defining a conditionOperator.
     * Type is: stringified InterfaceImageAttributesSizesConfig-Object
     * An example could look like this:
     * {
     *    "breakpoints": [
     *      {
     *        "image": {
     *          "height": "675",
     *          "width": "1200"
     *        },
     *        "mediaQueries": [
     *          {
     *            "conditionFeature": "min-width",
     *            "conditionFeatureValue": {
     *              "lyneDesignToken": true,
     *              "value": "sbb-breakpoint-large-min"
     *            },
     *            "conditionOperator": false
     *          }
     *        ]
     *      },
     *      {
     *        "image": {
     *          "height": "549",
     *          "width": "976"
     *        },
     *        "mediaQueries": [
     *          {
     *            "conditionFeature": "min-width",
     *            "conditionFeatureValue": {
     *              "lyneDesignToken": true,
     *              "value": "sbb-breakpoint-small-min"
     *            },
     *            "conditionOperator": false
     *          }
     *        ]
     *      },
     *      {
     *        "image": {
     *          "height": "180",
     *          "width": "320"
     *        },
     *        "mediaQueries": [
     *          {
     *            "conditionFeature": "max-width",
     *            "conditionFeatureValue": {
     *              "lyneDesignToken": true,
     *              "value": "sbb-breakpoint-small-max"
     *            },
     *            "conditionOperator": "and"
     *          },
     *          {
     *            "conditionFeature": "orientation",
     *            "conditionFeatureValue": {
     *              "lyneDesignToken": false,
     *              "value": "landscape"
     *            },
     *            "conditionOperator": false
     *          }
     *        ]
     *      }
     *    ]
     *  }
     */
    accessor pictureSizesConfig: string;
    /** Whether the image is finished loading or failed to load. */
    get complete(): boolean;
    protected updated(changedProperties: PropertyValues<this>): void;
    private _logPerformanceMarks;
    private _addFocusAbilityToLinksInCaption;
    private _prepareImageUrl;
    private _preparePictureSizeConfigs;
    private _createMediaQueryString;
    private _imageLoaded;
    protected render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'sbb-image': SbbImageElement;
    }
}
//# sourceMappingURL=image.component.d.ts.map