@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/development/icon-sidebar-button-common-DR6eQvkq.js

@@ -0,0 +1,93 @@
+import { css } from "lit";
+const sidebarContainerCommon = css`:host {
+  position: absolute;
+  inset: 0;
+}`;
+const sidebarContentCommon = css`:host {
+  position: relative;
+  display: block;
+  height: 100%;
+  overflow: auto;
+  outline-color: var(--sbb-focus-outline-color);
+}`;
+const iconSidebarButtonCommon = css`:host {
+  display: block;
+  outline: none !important;
+  --sbb-icon-sidebar-button-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);
+  --sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);
+  --sbb-icon-sidebar-button-color: var(--sbb-color-granite);
+  --sbb-icon-sidebar-button-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
+  --sbb-icon-sidebar-button-current-color: var(--sbb-color-3);
+  --sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);
+  --sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-sidebar-button__current-border-inset-inline-start: 0;
+  --sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color);
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-icon-sidebar-button-current-color: Highlight !important;
+  }
+}
+
+@media (forced-colors: active) {
+  :host(:is(:state(button),[state--button])) {
+    --sbb-icon-sidebar-button-color: ButtonText !important;
+  }
+}
+
+@media (forced-colors: active) {
+  :host(:is(:state(link),[state--link])) {
+    --sbb-icon-sidebar-button-color: LinkText !important;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(:not(:active, :is(:state(active),[state--active])):hover) {
+    --sbb-icon-sidebar-button__hover-shift: 0.0625rem;
+    --sbb-icon-sidebar-button__cursor: var(--sbb-cursor-pointer);
+  }
+}
+
+.sbb-action-base {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--sbb-icon-sidebar-button-dimension);
+  padding-block: 0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));
+  color: var(--sbb-icon-sidebar-button__color);
+  border-radius: var(--sbb-icon-sidebar-button-border-radius);
+  cursor: var(--sbb-icon-sidebar-button__cursor);
+  user-select: none;
+  transition-duration: var(--sbb-icon-sidebar-button-transition-duration);
+  transition-timing-function: var(--sbb-icon-sidebar-button-transition-easing-function);
+  transition-property: color, padding;
+}
+:host(.sbb-active) .sbb-action-base {
+  color: var(--sbb-icon-sidebar-button-current-color);
+}
+:host(.sbb-active) .sbb-action-base::before {
+  content: "";
+  display: block;
+  position: absolute;
+  inset-block: var(--sbb-icon-sidebar-button-current-border-inset-block);
+  inset-inline: var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;
+  border-inline-start: var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor;
+}
+:host(:focus-visible) .sbb-action-base, .sbb-action-base:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+  outline-offset: calc(-1 * var(--sbb-focus-outline-width) - 0.3125rem);
+}`;
+export {
+  sidebarContentCommon as a,
+  iconSidebarButtonCommon as i,
+  sidebarContainerCommon as s
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1zaWRlYmFyLWJ1dHRvbi1jb21tb24tRFI2ZVF2a3EuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=

package/development/icon-sidebar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @entrypoint
+ */
+export * from './icon-sidebar/icon-sidebar.ts';
+export * from './icon-sidebar/icon-sidebar-button.ts';
+export * from './icon-sidebar/icon-sidebar-container.ts';
+export * from './icon-sidebar/icon-sidebar-content.ts';
+export * from './icon-sidebar/icon-sidebar-link.ts';
+//# sourceMappingURL=icon-sidebar.d.ts.map

package/development/icon-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-sidebar.d.ts","sourceRoot":"","sources":["../../../src/elements/icon-sidebar.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC"}

package/development/icon-sidebar.js

@@ -0,0 +1,13 @@
+import { SbbIconSidebarElement } from "./icon-sidebar/icon-sidebar/icon-sidebar.component.js";
+import { SbbIconSidebarButtonElement } from "./icon-sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
+import { SbbIconSidebarContainerElement } from "./icon-sidebar/icon-sidebar-container/icon-sidebar-container.component.js";
+import { SbbIconSidebarContentElement } from "./icon-sidebar/icon-sidebar-content/icon-sidebar-content.component.js";
+import { SbbIconSidebarLinkElement } from "./icon-sidebar/icon-sidebar-link/icon-sidebar-link.component.js";
+export {
+  SbbIconSidebarButtonElement,
+  SbbIconSidebarContainerElement,
+  SbbIconSidebarContentElement,
+  SbbIconSidebarElement,
+  SbbIconSidebarLinkElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1zaWRlYmFyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7In0=

package/development/icon.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @entrypoint
+ */
+export * from './icon/icon.component.ts';
+export * from './icon/icon-base.ts';
+export * from './icon/icon-request.ts';
+export * from './icon/icon-validate.ts';
+export * from './icon/icon-name-mixin.ts';
+//# sourceMappingURL=icon.d.ts.map

package/development/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}

package/development/icon.js

@@ -0,0 +1,14 @@
+import { SbbIconElement } from "./icon/icon.component.js";
+import { SbbIconBase } from "./icon/icon-base.js";
+import { getSvgContent } from "./icon/icon-request.js";
+import { isValid, validateContent } from "./icon/icon-validate.js";
+import { SbbIconNameMixin } from "./icon/icon-name-mixin.js";
+export {
+  SbbIconBase,
+  SbbIconElement,
+  SbbIconNameMixin,
+  getSvgContent,
+  isValid,
+  validateContent
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OyJ9

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

@@ -0,0 +1,214 @@
+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;
+}
+declare const SbbImageElement_base: import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../core/mixins.ts').SbbElementInternalsConstructor;
+/**
+ * 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 SbbImageElement_base {
+    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-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;
+    }
+}
+export {};
+//# 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,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,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,qBAEM,eAAgB,SAAQ,oBAAoC;IAChE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,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"}