@sbb-esta/lyne-elements-dev 5.11.0-dev.1792052546 → 5.11.0-dev.1792067274

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

@@ -198,6 +198,7 @@ export declare class SbbImageElement extends SbbElement {
     /** Whether the image is finished loading or failed to load. */
     get complete(): boolean;
     protected updated(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     private _logPerformanceMarks;
     private _addFocusAbilityToLinksInCaption;
     private _prepareImageUrl;

package/development/image.pure.js

@@ -593,6 +593,10 @@ let SbbImageElement = (() => {
 			if (!this._linksInCaption) return;
 			this._addFocusAbilityToLinksInCaption();
 		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			if (this.complete && !this.internals.states.has("loaded")) this._imageLoaded();
+		}
 		_logPerformanceMarks() {
 			if (this.performanceMark) {
 				performance.clearMarks(this.performanceMark);

package/image.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{eventOptions as a,property as o}from"lit/decorators.js";import{SbbElement as s,forceType as c}from"./core.js";var l=`:host{--sbb-image-aspect-ratio:16 / 9;--sbb-image-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-image-object-fit:cover;border-radius:var(--sbb-border-radius-4x);display:block}.sbb-image__img{opacity:.000001}:host(:is(:state(loaded),[state--loaded])) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;inset:0}:host(:is(:state(loaded),[state--loaded])) .sbb-image__blurred{opacity:0}picture{display:contents}:is(.sbb-image__img,.sbb-image__blurred){object-fit:var(--sbb-image-object-fit);object-position:var(--sbb-image-object-position);width:100%;height:100%;transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:inherit;display:flex;position:relative;overflow:hidden}
-`;const u=e=>{if(!e||e.length===0)return[];let t;try{t=JSON.parse(e)}catch{return[]}if(!t.breakpoints||t.breakpoints.length===0||!Array.isArray(t.breakpoints))return[];let n=!1,r=!1,i=[`image`,`mediaQueries`];return t.breakpoints.forEach(e=>{let t=Object.keys(e);t.forEach(e=>{i.includes(e)||(n=!0)}),i.forEach(e=>{t.includes(e)||(r=!0)})}),n||r?[]:t.breakpoints},d={passive:!0},f={"sbb-breakpoint-zero-min":`0rem`,"sbb-breakpoint-zero-max":`37.4375rem`,"sbb-breakpoint-small-min":`37.5rem`,"sbb-breakpoint-small-max":`63.9375rem`,"sbb-breakpoint-large-min":`64rem`,"sbb-breakpoint-large-max":`89.9375rem`,"sbb-breakpoint-ultra-min":`90rem`,"sbb-breakpoint-ultra-max":`161.1875rem`};let p=(()=>{let p=s,m=[],h,g=[],_=[],v,y=[],b=[],x,S=[],C=[],w,T=[],E=[],D,O=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z;return class extends p{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;h=[c(),o()],v=[c(),o({attribute:`skip-lqip`,type:Boolean,reflect:!0})],x=[c(),o({attribute:`custom-focal-point`,type:Boolean})],w=[o()],D=[c(),o({attribute:`focal-point-debug`,type:Boolean})],A=[c(),o({attribute:`focal-point-x`,type:Number})],N=[c(),o({attribute:`focal-point-y`,type:Number})],I=[c(),o({attribute:`image-src`})],z=[o()],H=[o()],G=[c(),o({attribute:`performance-mark`})],J=[c(),o({attribute:`picture-sizes-config`})],Z=[a(d)],e(this,null,h,{kind:`accessor`,name:`alt`,static:!1,private:!1,access:{has:e=>`alt`in e,get:e=>e.alt,set:(e,t)=>{e.alt=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`skipLqip`,static:!1,private:!1,access:{has:e=>`skipLqip`in e,get:e=>e.skipLqip,set:(e,t)=>{e.skipLqip=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`customFocalPoint`,static:!1,private:!1,access:{has:e=>`customFocalPoint`in e,get:e=>e.customFocalPoint,set:(e,t)=>{e.customFocalPoint=t}},metadata:t},S,C),e(this,null,w,{kind:`accessor`,name:`decoding`,static:!1,private:!1,access:{has:e=>`decoding`in e,get:e=>e.decoding,set:(e,t)=>{e.decoding=t}},metadata:t},T,E),e(this,null,D,{kind:`accessor`,name:`focalPointDebug`,static:!1,private:!1,access:{has:e=>`focalPointDebug`in e,get:e=>e.focalPointDebug,set:(e,t)=>{e.focalPointDebug=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`focalPointX`,static:!1,private:!1,access:{has:e=>`focalPointX`in e,get:e=>e.focalPointX,set:(e,t)=>{e.focalPointX=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`focalPointY`,static:!1,private:!1,access:{has:e=>`focalPointY`in e,get:e=>e.focalPointY,set:(e,t)=>{e.focalPointY=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`imageSrc`,static:!1,private:!1,access:{has:e=>`imageSrc`in e,get:e=>e.imageSrc,set:(e,t)=>{e.imageSrc=t}},metadata:t},L,R),e(this,null,z,{kind:`accessor`,name:`importance`,static:!1,private:!1,access:{has:e=>`importance`in e,get:e=>e.importance,set:(e,t)=>{e.importance=t}},metadata:t},B,V),e(this,null,H,{kind:`accessor`,name:`loading`,static:!1,private:!1,access:{has:e=>`loading`in e,get:e=>e.loading,set:(e,t)=>{e.loading=t}},metadata:t},U,W),e(this,null,G,{kind:`accessor`,name:`performanceMark`,static:!1,private:!1,access:{has:e=>`performanceMark`in e,get:e=>e.performanceMark,set:(e,t)=>{e.performanceMark=t}},metadata:t},K,q),e(this,null,J,{kind:`accessor`,name:`pictureSizesConfig`,static:!1,private:!1,access:{has:e=>`pictureSizesConfig`in e,get:e=>e.pictureSizesConfig,set:(e,t)=>{e.pictureSizesConfig=t}},metadata:t},Y,X),e(this,null,Z,{kind:`method`,name:`_imageLoaded`,static:!1,private:!1,access:{has:e=>`_imageLoaded`in e,get:e=>e._imageLoaded},metadata:t},null,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-image`}static{this.styles=[i(l)]}static{this.events={error:`error`,load:`load`}}#e;get alt(){return this.#e}set alt(e){this.#e=e}#t;get skipLqip(){return this.#t}set skipLqip(e){this.#t=e}#n;get customFocalPoint(){return this.#n}set customFocalPoint(e){this.#n=e}#r;get decoding(){return this.#r}set decoding(e){this.#r=e}#i;get focalPointDebug(){return this.#i}set focalPointDebug(e){this.#i=e}#a;get focalPointX(){return this.#a}set focalPointX(e){this.#a=e}#o;get focalPointY(){return this.#o}set focalPointY(e){this.#o=e}#s;get imageSrc(){return this.#s}set imageSrc(e){this.#s=e}#c;get importance(){return this.#c}set importance(e){this.#c=e}#l;get loading(){return this.#l}set loading(e){this.#l=e}#u;get performanceMark(){return this.#u}set performanceMark(e){this.#u=e}#d;get pictureSizesConfig(){return this.#d}set pictureSizesConfig(e){this.#d=e}get complete(){return this.shadowRoot?.querySelector?.(`.sbb-image__img`)?.complete??!1}updated(e){super.updated(e),this._captionElement&&(this._linksInCaption=this._captionElement.querySelectorAll(`a`),this._linksInCaption&&this._addFocusAbilityToLinksInCaption())}_logPerformanceMarks(){this.performanceMark&&(performance.clearMarks(this.performanceMark),performance.mark(this.performanceMark))}_addFocusAbilityToLinksInCaption(){this._linksInCaption?.forEach(e=>{e.removeAttribute(`tabindex`)})}_prepareImageUrl(e,t=!1){if(!e||e===``)return``;let n=!!e.match(/^\w+:\/\//),r=n?new URL(e):new URL(`http://noop/${e}`);return t?(r.searchParams.append(`blur`,`100`),r.searchParams.append(`w`,`100`),r.searchParams.append(`h`,`56`)):r.searchParams.append(`auto`,`format,compress,cs=tinysrgb`),this.customFocalPoint&&(r.searchParams.append(`fit`,`crop`),r.searchParams.append(`crop`,`focalpoint`),r.searchParams.append(`fp-x`,this.focalPointX.toString(10)),r.searchParams.append(`fp-y`,this.focalPointY.toString(10)),r.searchParams.append(`fp-z`,`1`)),this.focalPointDebug&&r.searchParams.append(`fp-debug`,`true`),n?r.href:r.pathname.substring(1)+r.search}_preparePictureSizeConfigs(){let e;return e=this.pictureSizesConfig?this.pictureSizesConfig:`{
+`;const u=e=>{if(!e||e.length===0)return[];let t;try{t=JSON.parse(e)}catch{return[]}if(!t.breakpoints||t.breakpoints.length===0||!Array.isArray(t.breakpoints))return[];let n=!1,r=!1,i=[`image`,`mediaQueries`];return t.breakpoints.forEach(e=>{let t=Object.keys(e);t.forEach(e=>{i.includes(e)||(n=!0)}),i.forEach(e=>{t.includes(e)||(r=!0)})}),n||r?[]:t.breakpoints},d={passive:!0},f={"sbb-breakpoint-zero-min":`0rem`,"sbb-breakpoint-zero-max":`37.4375rem`,"sbb-breakpoint-small-min":`37.5rem`,"sbb-breakpoint-small-max":`63.9375rem`,"sbb-breakpoint-large-min":`64rem`,"sbb-breakpoint-large-max":`89.9375rem`,"sbb-breakpoint-ultra-min":`90rem`,"sbb-breakpoint-ultra-max":`161.1875rem`};let p=(()=>{let p=s,m=[],h,g=[],_=[],v,y=[],b=[],x,S=[],C=[],w,T=[],E=[],D,O=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z;return class extends p{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;h=[c(),o()],v=[c(),o({attribute:`skip-lqip`,type:Boolean,reflect:!0})],x=[c(),o({attribute:`custom-focal-point`,type:Boolean})],w=[o()],D=[c(),o({attribute:`focal-point-debug`,type:Boolean})],A=[c(),o({attribute:`focal-point-x`,type:Number})],N=[c(),o({attribute:`focal-point-y`,type:Number})],I=[c(),o({attribute:`image-src`})],z=[o()],H=[o()],G=[c(),o({attribute:`performance-mark`})],J=[c(),o({attribute:`picture-sizes-config`})],Z=[a(d)],e(this,null,h,{kind:`accessor`,name:`alt`,static:!1,private:!1,access:{has:e=>`alt`in e,get:e=>e.alt,set:(e,t)=>{e.alt=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`skipLqip`,static:!1,private:!1,access:{has:e=>`skipLqip`in e,get:e=>e.skipLqip,set:(e,t)=>{e.skipLqip=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`customFocalPoint`,static:!1,private:!1,access:{has:e=>`customFocalPoint`in e,get:e=>e.customFocalPoint,set:(e,t)=>{e.customFocalPoint=t}},metadata:t},S,C),e(this,null,w,{kind:`accessor`,name:`decoding`,static:!1,private:!1,access:{has:e=>`decoding`in e,get:e=>e.decoding,set:(e,t)=>{e.decoding=t}},metadata:t},T,E),e(this,null,D,{kind:`accessor`,name:`focalPointDebug`,static:!1,private:!1,access:{has:e=>`focalPointDebug`in e,get:e=>e.focalPointDebug,set:(e,t)=>{e.focalPointDebug=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`focalPointX`,static:!1,private:!1,access:{has:e=>`focalPointX`in e,get:e=>e.focalPointX,set:(e,t)=>{e.focalPointX=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`focalPointY`,static:!1,private:!1,access:{has:e=>`focalPointY`in e,get:e=>e.focalPointY,set:(e,t)=>{e.focalPointY=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`imageSrc`,static:!1,private:!1,access:{has:e=>`imageSrc`in e,get:e=>e.imageSrc,set:(e,t)=>{e.imageSrc=t}},metadata:t},L,R),e(this,null,z,{kind:`accessor`,name:`importance`,static:!1,private:!1,access:{has:e=>`importance`in e,get:e=>e.importance,set:(e,t)=>{e.importance=t}},metadata:t},B,V),e(this,null,H,{kind:`accessor`,name:`loading`,static:!1,private:!1,access:{has:e=>`loading`in e,get:e=>e.loading,set:(e,t)=>{e.loading=t}},metadata:t},U,W),e(this,null,G,{kind:`accessor`,name:`performanceMark`,static:!1,private:!1,access:{has:e=>`performanceMark`in e,get:e=>e.performanceMark,set:(e,t)=>{e.performanceMark=t}},metadata:t},K,q),e(this,null,J,{kind:`accessor`,name:`pictureSizesConfig`,static:!1,private:!1,access:{has:e=>`pictureSizesConfig`in e,get:e=>e.pictureSizesConfig,set:(e,t)=>{e.pictureSizesConfig=t}},metadata:t},Y,X),e(this,null,Z,{kind:`method`,name:`_imageLoaded`,static:!1,private:!1,access:{has:e=>`_imageLoaded`in e,get:e=>e._imageLoaded},metadata:t},null,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-image`}static{this.styles=[i(l)]}static{this.events={error:`error`,load:`load`}}#e;get alt(){return this.#e}set alt(e){this.#e=e}#t;get skipLqip(){return this.#t}set skipLqip(e){this.#t=e}#n;get customFocalPoint(){return this.#n}set customFocalPoint(e){this.#n=e}#r;get decoding(){return this.#r}set decoding(e){this.#r=e}#i;get focalPointDebug(){return this.#i}set focalPointDebug(e){this.#i=e}#a;get focalPointX(){return this.#a}set focalPointX(e){this.#a=e}#o;get focalPointY(){return this.#o}set focalPointY(e){this.#o=e}#s;get imageSrc(){return this.#s}set imageSrc(e){this.#s=e}#c;get importance(){return this.#c}set importance(e){this.#c=e}#l;get loading(){return this.#l}set loading(e){this.#l=e}#u;get performanceMark(){return this.#u}set performanceMark(e){this.#u=e}#d;get pictureSizesConfig(){return this.#d}set pictureSizesConfig(e){this.#d=e}get complete(){return this.shadowRoot?.querySelector?.(`.sbb-image__img`)?.complete??!1}updated(e){super.updated(e),this._captionElement&&(this._linksInCaption=this._captionElement.querySelectorAll(`a`),this._linksInCaption&&this._addFocusAbilityToLinksInCaption())}firstUpdated(e){super.firstUpdated(e),this.complete&&!this.internals.states.has(`loaded`)&&this._imageLoaded()}_logPerformanceMarks(){this.performanceMark&&(performance.clearMarks(this.performanceMark),performance.mark(this.performanceMark))}_addFocusAbilityToLinksInCaption(){this._linksInCaption?.forEach(e=>{e.removeAttribute(`tabindex`)})}_prepareImageUrl(e,t=!1){if(!e||e===``)return``;let n=!!e.match(/^\w+:\/\//),r=n?new URL(e):new URL(`http://noop/${e}`);return t?(r.searchParams.append(`blur`,`100`),r.searchParams.append(`w`,`100`),r.searchParams.append(`h`,`56`)):r.searchParams.append(`auto`,`format,compress,cs=tinysrgb`),this.customFocalPoint&&(r.searchParams.append(`fit`,`crop`),r.searchParams.append(`crop`,`focalpoint`),r.searchParams.append(`fp-x`,this.focalPointX.toString(10)),r.searchParams.append(`fp-y`,this.focalPointY.toString(10)),r.searchParams.append(`fp-z`,`1`)),this.focalPointDebug&&r.searchParams.append(`fp-debug`,`true`),n?r.href:r.pathname.substring(1)+r.search}_preparePictureSizeConfigs(){let e;return e=this.pictureSizesConfig?this.pictureSizesConfig:`{
         "breakpoints": [
           {
             "image": {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.11.0-dev.1792052546",
+  "version": "5.11.0-dev.1792067274",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/66246afab095fd00821f4d204ecd044ac44a37e5"
+    "https://github.com/sbb-design-systems/lyne-components/commit/3d9e19f6a565dba83783a9b9e86e4e1c6794bc31"
   ],
   "type": "module",
   "exports": {