@spscommerce/ds-web-components 8.20.16 → 8.20.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/index.cjs.js +1 -1
- package/dist/lib/index.es.js +2 -2
- package/dist/package.json +1 -1
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +2 -2
- package/package.json +4 -4
package/dist/lib/index.cjs.js
CHANGED
|
@@ -739,7 +739,7 @@
|
|
|
739
739
|
</sps-nav-tab-set>
|
|
740
740
|
)
|
|
741
741
|
}
|
|
742
|
-
`}}}};var rn=Object.defineProperty,an=Object.getOwnPropertyDescriptor,y=(e,t,n,s)=>{for(var i=s>1?void 0:s?an(t,n):t,r=e.length-1,o;r>=0;r--)(o=e[r])&&(i=(s?o(t,n,i):o(i))||i);return s&&i&&rn(t,n,i),i},qe=(e=>(e.FIT="fit",e.FILL="fill",e))(qe||{});const F="sps-photo";exports.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments),this.mode="fill"}get image(){return this.imageInternal}set image(t){this.imageInternal=t,t&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const n=t.getBoundingClientRect();if(n.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s
|
|
742
|
+
`}}}};var rn=Object.defineProperty,an=Object.getOwnPropertyDescriptor,y=(e,t,n,s)=>{for(var i=s>1?void 0:s?an(t,n):t,r=e.length-1,o;r>=0;r--)(o=e[r])&&(i=(s?o(t,n,i):o(i))||i);return s&&i&&rn(t,n,i),i},qe=(e=>(e.FIT="fit",e.FILL="fill",e))(qe||{});const F="sps-photo";exports.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments),this.mode="fill"}get image(){return this.imageInternal}set image(t){this.imageInternal=t,t&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const n=t.getBoundingClientRect();if(n.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s=n.width/n.height>1;this.fitWidth=s===(this.mode==="fit")}},1e3/60))}get[P](){return[F,this.fitWidth?`${F}--fit-width`:`${F}--fit-height`,this.placeholderIcon&&`${F}--placeholder`]}get[G](){return{fontSize:`${this.width*.05}rem`,width:`${this.width}rem`,height:`${.75*this.width}rem`}}connectedCallback(){this.waitForWidthInterval=window.setInterval(()=>{const t=this.getBoundingClientRect();t.width&&(this.setWidth(t.width),window.clearInterval(this.waitForWidthInterval),delete this.waitForWidthInterval)},1e3/60)}disconnectedCallback(){this.waitForWidthInterval&&window.clearInterval(this.waitForWidthInterval),this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval)}render(){return this.src?this.width?a("img",{src:this.src,alt:this.altText}):a("span",null):a("i",{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(t){if(t&&!this.width){const n=document.body.parentElement.style.fontSize||"16px",s=Number(n.substr(0,n.length-2));this.width=t/s}}};exports.SpsPhotoComponent.displayName=F;exports.SpsPhotoComponent.props={src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"};y([c()],exports.SpsPhotoComponent.prototype,"src",2);y([c()],exports.SpsPhotoComponent.prototype,"altText",2);y([c()],exports.SpsPhotoComponent.prototype,"mode",2);y([c()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);y([ue()],exports.SpsPhotoComponent.prototype,"width",2);y([ue()],exports.SpsPhotoComponent.prototype,"fitWidth",2);y([Y("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=y([D({tag:F})],exports.SpsPhotoComponent);const on={sizing:{label:"Sizing",description:l.code`
|
|
743
743
|
<p>
|
|
744
744
|
Photos are block elements, so a photo fills its container's width unless
|
|
745
745
|
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
package/dist/lib/index.es.js
CHANGED
|
@@ -2011,8 +2011,8 @@ let y = class extends HTMLElement {
|
|
|
2011
2011
|
const t = e.getBoundingClientRect();
|
|
2012
2012
|
if (t.height) {
|
|
2013
2013
|
window.clearInterval(this.waitForImgHeightInterval), delete this.waitForImgHeightInterval;
|
|
2014
|
-
let s =
|
|
2015
|
-
|
|
2014
|
+
let s = t.width / t.height > 1;
|
|
2015
|
+
this.fitWidth = s === (this.mode === "fit");
|
|
2016
2016
|
}
|
|
2017
2017
|
}, 1e3 / 60));
|
|
2018
2018
|
}
|
package/dist/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-web-components",
|
|
3
3
|
"description": "SPS Design System Native Web Components",
|
|
4
|
-
"version": "8.20.
|
|
4
|
+
"version": "8.20.17",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-web-components",
|
package/lib/index.cjs.js
CHANGED
|
@@ -739,7 +739,7 @@
|
|
|
739
739
|
</sps-nav-tab-set>
|
|
740
740
|
)
|
|
741
741
|
}
|
|
742
|
-
`}}}};var rn=Object.defineProperty,an=Object.getOwnPropertyDescriptor,y=(e,t,n,s)=>{for(var i=s>1?void 0:s?an(t,n):t,r=e.length-1,o;r>=0;r--)(o=e[r])&&(i=(s?o(t,n,i):o(i))||i);return s&&i&&rn(t,n,i),i},qe=(e=>(e.FIT="fit",e.FILL="fill",e))(qe||{});const F="sps-photo";exports.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments),this.mode="fill"}get image(){return this.imageInternal}set image(t){this.imageInternal=t,t&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const n=t.getBoundingClientRect();if(n.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s
|
|
742
|
+
`}}}};var rn=Object.defineProperty,an=Object.getOwnPropertyDescriptor,y=(e,t,n,s)=>{for(var i=s>1?void 0:s?an(t,n):t,r=e.length-1,o;r>=0;r--)(o=e[r])&&(i=(s?o(t,n,i):o(i))||i);return s&&i&&rn(t,n,i),i},qe=(e=>(e.FIT="fit",e.FILL="fill",e))(qe||{});const F="sps-photo";exports.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments),this.mode="fill"}get image(){return this.imageInternal}set image(t){this.imageInternal=t,t&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const n=t.getBoundingClientRect();if(n.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s=n.width/n.height>1;this.fitWidth=s===(this.mode==="fit")}},1e3/60))}get[P](){return[F,this.fitWidth?`${F}--fit-width`:`${F}--fit-height`,this.placeholderIcon&&`${F}--placeholder`]}get[G](){return{fontSize:`${this.width*.05}rem`,width:`${this.width}rem`,height:`${.75*this.width}rem`}}connectedCallback(){this.waitForWidthInterval=window.setInterval(()=>{const t=this.getBoundingClientRect();t.width&&(this.setWidth(t.width),window.clearInterval(this.waitForWidthInterval),delete this.waitForWidthInterval)},1e3/60)}disconnectedCallback(){this.waitForWidthInterval&&window.clearInterval(this.waitForWidthInterval),this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval)}render(){return this.src?this.width?a("img",{src:this.src,alt:this.altText}):a("span",null):a("i",{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(t){if(t&&!this.width){const n=document.body.parentElement.style.fontSize||"16px",s=Number(n.substr(0,n.length-2));this.width=t/s}}};exports.SpsPhotoComponent.displayName=F;exports.SpsPhotoComponent.props={src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"};y([c()],exports.SpsPhotoComponent.prototype,"src",2);y([c()],exports.SpsPhotoComponent.prototype,"altText",2);y([c()],exports.SpsPhotoComponent.prototype,"mode",2);y([c()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);y([ue()],exports.SpsPhotoComponent.prototype,"width",2);y([ue()],exports.SpsPhotoComponent.prototype,"fitWidth",2);y([Y("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=y([D({tag:F})],exports.SpsPhotoComponent);const on={sizing:{label:"Sizing",description:l.code`
|
|
743
743
|
<p>
|
|
744
744
|
Photos are block elements, so a photo fills its container's width unless
|
|
745
745
|
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
package/lib/index.es.js
CHANGED
|
@@ -2011,8 +2011,8 @@ let y = class extends HTMLElement {
|
|
|
2011
2011
|
const t = e.getBoundingClientRect();
|
|
2012
2012
|
if (t.height) {
|
|
2013
2013
|
window.clearInterval(this.waitForImgHeightInterval), delete this.waitForImgHeightInterval;
|
|
2014
|
-
let s =
|
|
2015
|
-
|
|
2014
|
+
let s = t.width / t.height > 1;
|
|
2015
|
+
this.fitWidth = s === (this.mode === "fit");
|
|
2016
2016
|
}
|
|
2017
2017
|
}, 1e3 / 60));
|
|
2018
2018
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-web-components",
|
|
3
3
|
"description": "SPS Design System Native Web Components",
|
|
4
|
-
"version": "8.20.
|
|
4
|
+
"version": "8.20.17",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-web-components",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@spscommerce/utils": "^7.0.0",
|
|
28
|
-
"@spscommerce/ds-shared": "8.20.
|
|
28
|
+
"@spscommerce/ds-shared": "8.20.17"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"package-json": "10.0.0",
|
|
35
35
|
"react": "^16.9.0",
|
|
36
36
|
"react-dom": "^16.9.0",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
37
|
+
"test": "8.20.17",
|
|
38
|
+
"@spscommerce/ds-shared": "8.20.17"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:create-dist && pnpm run build:copy-dist",
|