@sbb-esta/lyne-elements 2.8.0 → 2.9.0

package/image/image.d.ts

@@ -1,216 +0,0 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-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.
- *
- * @event {Event} load - Emits when the image has been loaded.
- * @event {Event} error - Emits when the image loading ended in an error.
- * @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 LitElement {
-    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 behaviour. 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-micro-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;
-    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
-    private _logPerformanceMarks;
-    private _matchMediaQueryDesignToken;
-    private _addFocusAbilityToLinksInCaption;
-    private _prepareImageUrl;
-    private _preparePictureSizeConfigs;
-    private _createMediaQueryString;
-    private _imageLoaded;
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sbb-image': SbbImageElement;
-    }
-}
-//# sourceMappingURL=image.d.ts.map

package/image/image.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,MAAM,WAAW,mCAAmC;IAClD,WAAW,EAAE,6CAA6C,EAAE,CAAC;CAC9D;AAED,MAAM,WAAW,6CAA6C;IAC5D,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,6CAA6C,EAAE,CAAC;CAC/D;AAED,MAAM,WAAW,6CAA6C;IAC5D,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,KAAK,CAAC;CAC1B;AAgGD;;;;;;;;;;GAUG;AACH,qBAEM,eAAgB,SAAQ,UAAU;IACtC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,eAAe,CAAC,CAA8B;IACtD,OAAO,CAAC,OAAO,CAGb;IAEF;;;;;;OAMG;IACH,SAEgB,GAAG,EAAE,MAAM,CAAM;IAEjC;;;;;;OAMG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;;OAIG;IACH,SAEgB,gBAAgB,EAAE,OAAO,CAAS;IAElD;;;;;;OAMG;IACH,SAA4B,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAU;IAEzE;;;OAGG;IACH,SAEgB,eAAe,EAAE,OAAO,CAAS;IAEjD;;OAEG;IACH,SAEgB,WAAW,EAAE,MAAM,CAAK;IAExC;;OAEG;IACH,SAEgB,WAAW,EAAE,MAAM,CAAK;IAExC;;;;;;;;;OASG;IACH,SAEgB,QAAQ,EAAE,MAAM,CAAM;IAEtC;;;;;;;;OAQG;IACH,SAA4B,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAU;IAEzE;;;;;;;;;OASG;IACH,SAA4B,OAAO,EAAE,OAAO,GAAG,MAAM,CAAW;IAEhE;;;;;;;;;;;;OAYG;IACH,SAEgB,eAAe,EAAE,MAAM,CAAM;IAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmEG;IACH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,+DAA+D;IAC/D,IAAW,QAAQ,IAAI,OAAO,CAE7B;cAEkB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBhD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAU7F,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,2BAA2B;IAKnC,OAAO,CAAC,gCAAgC;IAMxC,OAAO,CAAC,gBAAgB;IA0CxB,OAAO,CAAC,0BAA0B;IAgElC,OAAO,CAAC,uBAAuB;IAwB/B,OAAO,CAAC,YAAY;cAMD,MAAM,IAAI,cAAc;CAiE5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}