@sbb-esta/lyne-elements-dev 0.0.0 → 4.0.0-dev.1775550881

package/development/image/image.component.d.ts

@@ -0,0 +1,214 @@
+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

package/development/image/image.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/image/image.component.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,cAAc,EACnB,KAAK,cAAc,EAEpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD,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;AAuFD;;;;;;;;GAQG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,gBAAgC,WAAW,EAAE,MAAM,CAAe;IAClE,OAAuB,MAAM,EAAE,cAAc,CAAuC;IACpF,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;IAgBzE,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,gCAAgC;IAMxC,OAAO,CAAC,gBAAgB;IA0CxB,OAAO,CAAC,0BAA0B;IAgElC,OAAO,CAAC,uBAAuB;IAwB/B,OAAO,CAAC,YAAY;cAQD,MAAM,IAAI,cAAc;CAoE5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/development/image/image.component.js

@@ -0,0 +1,2 @@
+import { t as SbbImageElement } from "../image.component-BD0jc-u-.js";
+export { SbbImageElement };