@spscommerce/ds-web-components 7.10.7 → 7.11.0
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 +95 -95
- package/dist/lib/index.es.js +293 -297
- package/dist/package.json +1 -1
- package/lib/index.cjs.js +95 -95
- package/lib/index.es.js +293 -297
- package/package.json +4 -4
package/dist/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var et=Object.defineProperty;var tt=(e,t,n)=>t in e?et(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var a=(e,t,n)=>(tt(e,typeof t!="symbol"?t+"":t,n),n);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const U=require("@spscommerce/ds-shared"),c=require("@spscommerce/utils"),nt={};var h={};Object.defineProperty(h,"__esModule",{value:!0});/**
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
4
4
|
*
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
151
151
|
* See the License for the specific language governing permissions and
|
|
152
152
|
* limitations under the License.
|
|
153
|
-
*/var k=null,u=null,C=null,D=null,Q=[],Z=[];function te(){return Z}function Re(e){var t=function(n,s,i){var r=k,l=D,d=Q,f=Z,m=u,b=C,N=!1,W=!1;k=new mt,D=n.ownerDocument,Z=[],C=n.parentNode,Q=_t(n,C),process.env.NODE_ENV!=="production"&&(N=J(!1),W=Y(!1));try{var
|
|
153
|
+
*/var k=null,u=null,C=null,D=null,Q=[],Z=[];function te(){return Z}function Re(e){var t=function(n,s,i){var r=k,l=D,d=Q,f=Z,m=u,b=C,N=!1,W=!1;k=new mt,D=n.ownerDocument,Z=[],C=n.parentNode,Q=_t(n,C),process.env.NODE_ENV!=="production"&&(N=J(!1),W=Y(!1));try{var Me=e(n,s,i);return process.env.NODE_ENV!=="production"&&dt(),Me}finally{D=l,Z=f,u=m,C=b,Q=d,k.notifyChanges(),J(N),Y(W),k=r}};return t}var Ue=Re(function(e,t,n){return u=e,ze(),t(n),We(),process.env.NODE_ENV!=="production"&&ct(u,e),e}),Et=Re(function(e,t,n){var s={nextSibling:e},i=null,r=null;return process.env.NODE_ENV!=="production"&&(i=e.nextSibling,r=e.previousSibling),u=s,t(n),process.env.NODE_ENV!=="production"&&(pt(C),ft(s,u,i,r)),C&&je(C,ne(),e.nextSibling),s===u?null:u});function Ne(e,t,n){var s=T(e,n);return t==s.nameOrCtor&&n==s.key}function It(e,t,n){if(!e)return null;if(Ne(e,t,n))return e;if(n){for(;e=e.nextSibling;)if(Ne(e,t,n))return e}return null}function Ft(e,t){var n;return e==="#text"?n=Pt(D):n=Dt(D,C,e,t),k.markCreated(n),n}function $e(e,t){var n=It(u,e,t),s=n||Ft(e,t);s!==u&&(Q.indexOf(s)>=0?St(C,s,u):C.insertBefore(s,u),u=s)}function je(e,t,n){for(var s=e,i=t;i!==n;){var r=i.nextSibling;s.removeChild(i),k.markDeleted(i),i=r}}function ze(){C=u,u=null}function ne(){return u?u.nextSibling:C.firstChild}function ve(){u=ne()}function We(){je(C,ne(),null),u=C,C=C.parentNode}function He(e,t){return ve(),$e(e,t),ze(),C}function Ve(){return process.env.NODE_ENV!=="production"&&Y(!1),We(),u}function kt(){return ve(),$e("#text",null),u}function Lt(){return process.env.NODE_ENV!=="production"&&(Fe("currentElement",D),L("currentElement")),C}function Tt(){return process.env.NODE_ENV!=="production"&&(Fe("currentPointer",D),L("currentPointer")),ne()}function Bt(){process.env.NODE_ENV!=="production"&&(ut("skip",u),Y(!0)),u=C.lastChild}/**
|
|
154
154
|
* @license
|
|
155
155
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
156
156
|
*
|
|
@@ -180,96 +180,7 @@
|
|
|
180
180
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
181
181
|
* See the License for the specific language governing permissions and
|
|
182
182
|
* limitations under the License.
|
|
183
|
-
*/h.applyAttr=Ee;h.applyProp=Ie;h.attributes=$;h.close=Ve;var be=h.currentElement=Lt,le=h.currentPointer=Tt;h.open=He;var Vt=h.patch=Ue;h.patchInner=Ue;h.patchOuter=Et;h.skip=Bt;var ce=h.skipNode=ve;h.getKey=yt;h.clearCache=Be;h.importNode=Te;h.isDataInitialized=xt;h.notifications=B;h.symbols=ue;var ye=h.attr=jt,qt=h.elementClose=qe;h.elementOpen=Ce;var Gt=h.elementOpenEnd=zt,Xt=h.elementOpenStart=Ut;h.elementVoid=Wt;var Kt=h.text=Ht;h.key=$t;function Ae(e){let t=le();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),be().appendChild(t)),ce(),t}let Ge=U.noI18nI18n;function Qt(e){Ge=e}function Zt(){return Ge}const O=Symbol("ComponentMetadata"),_=Object.freeze({has(e,t){return Boolean(e[O]&&Object.prototype.hasOwnProperty.call(e[O],t))},add(e,t){e[O]?Object.assign(e[O],t):e[O]=t},get(e,t,n){return e[O]&&e[O][t]||n}}),Oe=Symbol("ds-web-components:pragma:listeners-attached"),Xe="idom-pragma:content-begin",pe="idom-pragma:content-end";function de(e){for(const t of e)if(typeof t=="function")t();else if(typeof t=="string")Kt(t);else if(t instanceof Set)de(Array.from(t));else if(Array.isArray(t)&&t.length>0){let n=le();if(Ae(Xe),n===null){const s=be();for(let i=0;i<t.length;i+=1)s.contains(t[i])||s.appendChild(t[i]),ce()}for(;n&&n.data!==pe;)ce(),n=le();Ae(pe)}}function o(e,t,...n){if(t){for(const s of Object.keys(t))if(s.toUpperCase()==="DATA-FRAGMENT")return()=>de(n)}return()=>{Xt(e);const s=[];if(t)for(const r of Object.keys(t))r.toUpperCase()==="CLASSNAME"?ye("class",t[r]):/^on[A-Z]/.test(r)?s.push(r):ye(r,t[r]);Gt(e);const i=be();if(!i[Oe]){for(const r of s)i.addEventListener(r.substr(2).toLowerCase(),t[r]);i[Oe]=!0}de(n),qt(e)}}function Ke(e,t){customElements.get(e)||customElements.define(e,t)}function Jt(...e){for(const t of e)Ke(_.get(t,"tag"),t)}function Yt(e){return function(...n){for(const s of n){const i=`${e}${_.get(s,"tag").substr(3)}`;Ke(i,s)}}}const he=Symbol("Component Attribute Bindings"),P=Symbol("Component Class Bindings"),M=Symbol("Component Style Bindings"),Mt={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){const e=this;for(const t of Object.keys(e[he]||{}))e.setAttribute(t,e[he][t]);for(const t of Object.keys(e[M]||{}))e.style[t]=e[M][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[P]||[]).filter(Boolean))e.__managedClasses.add(t),e.classList.add(t);for(const t of(e.getAttribute("classname")||"").split(/\w+/).filter(Boolean))e.classList.add(t)},__updateChildQueries(e){const t=this;for(const n of _.get(t.constructor,"childQueries",[]))if(!e||e&&n.refresh){const s=n.all?t.querySelectorAll:t.querySelector;t[n.key]=s.call(t,n.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),n=null,s=t.length;for(let i=0;i<t.length;i+=1){const r=t[i];r instanceof Comment&&(r.data===Xe?n=i+1:r.data===pe&&(s=i-1))}if(n===null)for(const i of t)i.parentNode.removeChild(i);else t=t.slice(n,s);_.has(e.constructor,"contentProp")&&(e[_.get(e.constructor,"contentProp")]=t)},__startMutObs(){const e=this;e.__observer||(e.__observer=new MutationObserver(()=>{e.contentChangedCallback&&e.contentChangedCallback(),e.__gatherChildren(),e.update()})),e.__observer.observe(e,{childList:!0})},__stopMutObs(){const e=this;e.__observer&&e.__observer.disconnect()},__doRender(){const e=this;e.__stopMutObs(),Vt(e,e.render(Zt())),e.__startMutObs()},update(){const e=this;e.__initialized&&!e.__queuedUpdate&&(e.__queuedUpdate=window.requestAnimationFrame(()=>{e.__doRender(),setTimeout(()=>{e.__updateChildQueries(!0),e.__updateHostBindings()},0),e.__queuedUpdate=null}))},attributeChangedCallback(e,t,n){const s=this,i=n===""?!0:n;i!==t&&(s.__cbAttributeChanged&&s.__cbAttributeChanged(e,s[e],i),e!=="style"&&(s[e]=i),s.__initialized&&s.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=_.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,n]of t)e[n]=e[n].bind(e);e.__initialized=!0}for(const[n,s]of t)e.addEventListener(n,e[s]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,n]of _.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[n]);e.__stopMutObs()}};function E(e){return t=>{_.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},Mt)}}function se(){return(e,t)=>{_.add(e.constructor,{contentProp:t})}}function ie(e){return(t,n)=>{Object.defineProperty(t,n,{get(){return Object.defineProperty(this,n,{value:{dispatch:s=>{const i=new CustomEvent(e||n,{detail:s});return this.dispatchEvent(i),i}}}),this[n]},configurable:!0})}}function z(e){return(t,n)=>{const s=_.get(t.constructor,"eventListeners",[]);s.push([e,n]),_.add(t.constructor,{eventListeners:s})}}function p(e){return(t,n)=>{const s=t.constructor,i=n.toLowerCase();if(s.observedAttributes=s.observedAttributes||["classname","className","style"],s.observedAttributes.push(n),s.observedAttributes.push(i),i!==n&&Object.defineProperty(t,n,{get(){return this[i]},set(r){this[i]=r}}),e){const r=Symbol.for(n);Object.defineProperty(t,i,{get(){return this[r]},set(l){let d=l;e===Boolean&&typeof l=="string"&&l.toLowerCase()==="false"?d=!1:d=e(l),this[r]=d}})}}}function Qe(e,t,n){return(s,i)=>{const r=_.get(s.constructor,"childQueries",[]);r.push({key:i,selector:e,all:n,refresh:t.refresh}),_.add(s.constructor,{childQueries:r})}}function re(e,t={}){return Qe(e,t)}function Ze(e,t={}){return Qe(e,t,!0)}function we(){return(e,t)=>{const n=Symbol(t);Object.defineProperties(e,{[n]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[n]},set(s){this[n]!==s&&(this[n]=s,this.update())}}})}}var en=Object.defineProperty,tn=Object.getOwnPropertyDescriptor,A=(e,t,n,s)=>{for(var i=s>1?void 0:s?tn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&en(t,n,i),i},Je=(e=>(e.FIT="fit",e.FILL="fill",e))(Je||{});const F="sps-photo";var H;exports.SpsPhotoComponent=(H=class extends HTMLElement{constructor(){super(...arguments);a(this,"src");a(this,"altText");a(this,"mode","fill");a(this,"placeholderIcon");a(this,"width");a(this,"fitWidth");a(this,"imageInternal");a(this,"waitForWidthInterval");a(this,"waitForImgHeightInterval")}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=!0;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[M](){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?o("img",{src:this.src,alt:this.altText}):o("span",null):o("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}}},a(H,"displayName",F),a(H,"props",{src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"}),H);A([p()],exports.SpsPhotoComponent.prototype,"src",2);A([p()],exports.SpsPhotoComponent.prototype,"altText",2);A([p()],exports.SpsPhotoComponent.prototype,"mode",2);A([p()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);A([we()],exports.SpsPhotoComponent.prototype,"width",2);A([we()],exports.SpsPhotoComponent.prototype,"fitWidth",2);A([re("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=A([E({tag:F})],exports.SpsPhotoComponent);const Ye={sizing:{label:"Sizing",description:c.code`
|
|
184
|
-
<p>
|
|
185
|
-
Photos are block elements, so a photo fills its container's width unless
|
|
186
|
-
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
187
|
-
photos have been placed in cards which have different widths in the 12
|
|
188
|
-
column grid.
|
|
189
|
-
</p>
|
|
190
|
-
`,examples:{basic:{jsx:c.code`
|
|
191
|
-
<div className="sfg-row">
|
|
192
|
-
<div className="sfg-col-2">
|
|
193
|
-
<sps-card>
|
|
194
|
-
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
195
|
-
</sps-card>
|
|
196
|
-
</div>
|
|
197
|
-
<div className="sfg-col-4">
|
|
198
|
-
<sps-card>
|
|
199
|
-
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
200
|
-
</sps-card>
|
|
201
|
-
</div>
|
|
202
|
-
<div className="sfg-col-6">
|
|
203
|
-
<sps-card>
|
|
204
|
-
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
205
|
-
</sps-card>
|
|
206
|
-
</div>
|
|
207
|
-
</div>
|
|
208
|
-
`}}},displayMode:{label:"Fill vs. Fit",description:c.code`
|
|
209
|
-
<p>
|
|
210
|
-
There are two display modes available:
|
|
211
|
-
<ul>
|
|
212
|
-
<li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
|
|
213
|
-
<li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
|
|
214
|
-
</ul>
|
|
215
|
-
</p>
|
|
216
|
-
`,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:c.code`
|
|
217
|
-
<div className="sfg-row">
|
|
218
|
-
<div className="sfg-col-4">
|
|
219
|
-
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
220
|
-
</div>
|
|
221
|
-
<div className="sfg-col-4">
|
|
222
|
-
<sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
|
|
223
|
-
</div>
|
|
224
|
-
</div>
|
|
225
|
-
`},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:c.code`
|
|
226
|
-
<div className="sfg-row">
|
|
227
|
-
<div className="sfg-col-4">
|
|
228
|
-
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
229
|
-
</div>
|
|
230
|
-
<div className="sfg-col-4">
|
|
231
|
-
<sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
`}}},placeholder:{label:"Placeholders",description:c.code`
|
|
235
|
-
<p>
|
|
236
|
-
When an image is not provided for a particular use case (such as a user avatar,
|
|
237
|
-
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
238
|
-
|
|
239
|
-
The placeholder's icon, selected from our SPS icon set, should represent the
|
|
240
|
-
type of image it is substituting for.
|
|
241
|
-
</p>
|
|
242
|
-
`,examples:{general:{description:"<p>General Photo</p>",jsx:c.code`
|
|
243
|
-
<div className="sfg-row">
|
|
244
|
-
<div className="sfg-col-3">
|
|
245
|
-
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
`},photoAlt:{description:"<p>Photo Alt</p>",jsx:c.code`
|
|
249
|
-
<div className="sfg-row">
|
|
250
|
-
<div className="sfg-col-3">
|
|
251
|
-
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
`},user:{description:"<p>User / Single Person</p>",jsx:c.code`
|
|
255
|
-
<div className="sfg-row">
|
|
256
|
-
<div className="sfg-col-3">
|
|
257
|
-
<sps-photo placeholderIcon="user"></sps-photo>
|
|
258
|
-
</div>
|
|
259
|
-
</div>
|
|
260
|
-
`},group:{description:"<p>Group / Multiple People</p>",jsx:c.code`
|
|
261
|
-
<div className="sfg-row">
|
|
262
|
-
<div className="sfg-col-3">
|
|
263
|
-
<sps-photo placeholderIcon="group"></sps-photo>
|
|
264
|
-
</div>
|
|
265
|
-
</div>
|
|
266
|
-
`},company:{description:"<p>Company / Building</p>",jsx:c.code`
|
|
267
|
-
<div className="sfg-row">
|
|
268
|
-
<div className="sfg-col-3">
|
|
269
|
-
<sps-photo placeholderIcon="building"></sps-photo>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
`}}}},nn={Photos:{components:[exports.SpsPhotoComponent],examples:Ye}};var _e=(e=>(e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip",e))(_e||{}),sn=Object.defineProperty,rn=Object.getOwnPropertyDescriptor,v=(e,t,n,s)=>{for(var i=s>1?void 0:s?rn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&sn(t,n,i),i};const g="sps-file-upload";var V;exports.SpsFileUploadComponent=(V=class extends HTMLElement{constructor(){super();a(this,"description");a(this,"multiple");a(this,"shown",!0);a(this,"dismissable");a(this,"processing");a(this,"mini");a(this,"constrainContentWidth");a(this,"downloadLabel");a(this,"acceptExtensions");a(this,"maxSize");a(this,"customRequirement");a(this,"selection");a(this,"dismissal");a(this,"download");a(this,"fileInput");a(this,"files",[]);a(this,"accept");a(this,"acceptMIMETypes",new Set);a(this,"acceptExtensionsDescription");a(this,"maxSizeBytes");a(this,"active",!1);a(this,"error",!1);a(this,"namesOfUnsupportedFiles",[]);this.handleBrowseLinkClick=this.handleBrowseLinkClick.bind(this),this.handleDownloadButtonClick=this.handleDownloadButtonClick.bind(this),this.handleFileInputChange=this.handleFileInputChange.bind(this),this.dismiss=this.dismiss.bind(this)}get[P](){return[g,this.active&&`${g}--active`,this.error&&`${g}--error`,!this.shown&&`${g}--hidden`,this.mini&&`${g}--mini`,this.constrainContentWidth&&`${g}--constrained-content-width`]}connectedCallback(){this.description=this.description||(this.multiple?"Files":"File"),this.acceptExtensions&&this.processAcceptExtensions(this.acceptExtensions),this.maxSize&&this.parseAndValidateMaxSize(this.maxSize)}attributeChangedCallback(t,n,s){t==="acceptExtensions"&&this.processAcceptExtensions(s),t==="maxSize"&&this.parseAndValidateMaxSize(s)}dismiss(){this.dismissable&&(this.shown=!1,this.update(),this.dismissal.dispatch())}show(){this.dismissable&&(this.shown=!0,this.update())}render({t}){const n=this.error?U.SpsIcon.EXCLAMATION_CIRCLE:U.SpsIcon.UPLOAD_CLOUD,s=(this.multiple?t("design-system:fileUpload.instructions_plural"):t("design-system:fileUpload.instructions")).split("|");return o("div",{"data-fragment":!0},o("div",{className:`${g}__content`},this.processing?o("div",{"data-fragment":!0},o("i",{className:"sps-spinner sps-spinner--medium","aria-hidden":"true"}),o("div",{className:`${g}__instructions`},t("design-system:fileUpload.processing"))):o("div",{"data-fragment":!0},o("i",{className:`sps-icon sps-icon-${n} ${g}__icon-primary`,"aria-hidden":"true"}),o("div",{className:`${g}__title`},this.error?o("div",{"data-fragment":!0},t(this.namesOfUnsupportedFiles.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):o("div",{"data-fragment":!0},t("design-system:fileUpload.title",{description:this.description}))),this.error?o("div",{className:`${g}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((i,r)=>{const l=Math.floor(i.length/2);return o("div",{className:`${g}__errored-filename`,key:i},o("span",{className:`${g}__errored-filename-segment`},i.substr(0,l)),o("div",{className:`${g}__errored-filename-segment`},o("span",null,i.substr(l))),r<this.namesOfUnsupportedFiles.length-1?",":"")}))):o("span",null),o("div",{className:`${g}__instructions`},o("div",{"data-fragment":!0},o("span",null,s[0]),o("a",{href:"",onClick:this.handleBrowseLinkClick},s[1]),o("span",null,s[2]))),o("div",{className:`${g}__requirements`},this.acceptExtensions?o("span",null,"("," ",t("design-system:fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription})," ",")"):"",this.maxSize?o("span",null,"("," ",t("design-system:fileUpload.maximumSize",{size:this.maxSize})," ",")"):"",this.customRequirement?o("span",null," ",this.customRequirement," "):""),this.downloadLabel&&o("div",{className:`sps-button sps-button--link ${g}__download-button`,onClick:this.handleDownloadButtonClick},o("button",{type:"button"},o("i",{className:"sps-icon sps-icon-download-cloud","aria-hidden":"true"})," ",this.downloadLabel)))),this.dismissable&&!this.processing&&o("div",{className:`sps-button sps-button--icon ${g}__close-button`,onClick:this.dismiss},o("button",{type:"button",title:t("design-system:fileUpload.close")},o("i",{className:"sps-icon sps-icon-x","aria-hidden":"true"}))),o("form",null,o("input",{type:"file",accept:this.accept||"*/*",multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(t){try{this.maxSizeBytes=c.parseFileSize(t)}catch{throw new Error(`Could not parse "${t}" as a file size.`)}}processAcceptExtensions(t){const s=(Array.isArray(t)?t:t.trim().split(/\s?,\s?/)).map(r=>r.replace(/^\./,"")),i=s.map(r=>`.${r}`.toLowerCase());this.acceptExtensionsDescription=i.map((r,l)=>l>0&&l===i.length-1?`or ${r}`:r).join(i.length>2?", ":" "),this.acceptMIMETypes.clear();for(const r of s)for(const l of _e[r.toUpperCase()].split(","))this.acceptMIMETypes.add(l);this.accept=i.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(t){this.namesOfUnsupportedFiles=[];const n=Array.from(t);for(const s of n)this.acceptExtensions&&!this.acceptMIMETypes.has(s.type)&&this.namesOfUnsupportedFiles.push(s.name),this.maxSize&&s.size>this.maxSizeBytes&&this.namesOfUnsupportedFiles.indexOf(s.name)===-1&&this.namesOfUnsupportedFiles.push(s.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=n,this.selection.dispatch(n))}handleDragOver(t){t.preventDefault(),t.stopPropagation()}handleDragEnter(t){t.preventDefault(),this.active=!0,this.error=!1,this.update()}handleDragLeave(t){t.preventDefault(),this.active=!1,this.update()}handleDrop(t){t.preventDefault(),t.stopPropagation(),this.active=!1,t.dataTransfer.items?this.selectFiles(Array.from(t.dataTransfer.items).map(n=>n.getAsFile())):this.selectFiles(t.dataTransfer.files),this.update()}handleBrowseLinkClick(t){t.preventDefault(),this.error=!1,this.update(),this.fileInput.click()}handleDownloadButtonClick(){this.download.dispatch()}handleFileInputChange(t){t.stopPropagation(),this.selectFiles(t.target.files)}},a(V,"displayName",g),a(V,"props",{description:"string",multiple:"boolean",dismissable:"boolean",processing:"boolean",mini:"boolean",downloadLabel:"string",acceptExtensions:"Array<string> | string",maxSize:"string",customRequirement:"string",selection:{event:!0,type:"CustomEvent<Array<File>>"},dismissal:{event:!0,type:"CustomEvent<void>"},download:{event:!0,type:"CustomEvent<void>"}}),V);v([p()],exports.SpsFileUploadComponent.prototype,"description",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"multiple",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"shown",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"dismissable",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"processing",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"mini",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"constrainContentWidth",2);v([p()],exports.SpsFileUploadComponent.prototype,"downloadLabel",2);v([p()],exports.SpsFileUploadComponent.prototype,"acceptExtensions",2);v([p()],exports.SpsFileUploadComponent.prototype,"maxSize",2);v([p()],exports.SpsFileUploadComponent.prototype,"customRequirement",2);v([ie()],exports.SpsFileUploadComponent.prototype,"selection",2);v([ie()],exports.SpsFileUploadComponent.prototype,"dismissal",2);v([ie()],exports.SpsFileUploadComponent.prototype,"download",2);v([re("input[type='file']")],exports.SpsFileUploadComponent.prototype,"fileInput",2);v([z("dragover")],exports.SpsFileUploadComponent.prototype,"handleDragOver",1);v([z("dragenter")],exports.SpsFileUploadComponent.prototype,"handleDragEnter",1);v([z("dragleave")],exports.SpsFileUploadComponent.prototype,"handleDragLeave",1);v([z("drop")],exports.SpsFileUploadComponent.prototype,"handleDrop",1);exports.SpsFileUploadComponent=v([E({tag:g})],exports.SpsFileUploadComponent);const an={basic:{label:"Basic File Upload",description:c.code`
|
|
183
|
+
*/h.applyAttr=Ee;h.applyProp=Ie;h.attributes=$;h.close=Ve;var be=h.currentElement=Lt,le=h.currentPointer=Tt;h.open=He;var Vt=h.patch=Ue;h.patchInner=Ue;h.patchOuter=Et;h.skip=Bt;var ce=h.skipNode=ve;h.getKey=yt;h.clearCache=Be;h.importNode=Te;h.isDataInitialized=xt;h.notifications=B;h.symbols=ue;var ye=h.attr=jt,qt=h.elementClose=qe;h.elementOpen=Ce;var Gt=h.elementOpenEnd=zt,Xt=h.elementOpenStart=Ut;h.elementVoid=Wt;var Kt=h.text=Ht;h.key=$t;function Ae(e){let t=le();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),be().appendChild(t)),ce(),t}let Ge=U.noI18nI18n;function Qt(e){Ge=e}function Zt(){return Ge}const O=Symbol("ComponentMetadata"),_=Object.freeze({has(e,t){return Boolean(e[O]&&Object.prototype.hasOwnProperty.call(e[O],t))},add(e,t){e[O]?Object.assign(e[O],t):e[O]=t},get(e,t,n){return e[O]&&e[O][t]||n}}),Oe=Symbol("ds-web-components:pragma:listeners-attached"),Xe="idom-pragma:content-begin",pe="idom-pragma:content-end";function de(e){for(const t of e)if(typeof t=="function")t();else if(typeof t=="string")Kt(t);else if(t instanceof Set)de(Array.from(t));else if(Array.isArray(t)&&t.length>0){let n=le();if(Ae(Xe),n===null){const s=be();for(let i=0;i<t.length;i+=1)s.contains(t[i])||s.appendChild(t[i]),ce()}for(;n&&n.data!==pe;)ce(),n=le();Ae(pe)}}function o(e,t,...n){if(t){for(const s of Object.keys(t))if(s.toUpperCase()==="DATA-FRAGMENT")return()=>de(n)}return()=>{Xt(e);const s=[];if(t)for(const r of Object.keys(t))r.toUpperCase()==="CLASSNAME"?ye("class",t[r]):/^on[A-Z]/.test(r)?s.push(r):ye(r,t[r]);Gt(e);const i=be();if(!i[Oe]){for(const r of s)i.addEventListener(r.substr(2).toLowerCase(),t[r]);i[Oe]=!0}de(n),qt(e)}}function Ke(e,t){customElements.get(e)||customElements.define(e,t)}function Jt(...e){for(const t of e)Ke(_.get(t,"tag"),t)}function Yt(e){return function(...n){for(const s of n){const i=`${e}${_.get(s,"tag").substr(3)}`;Ke(i,s)}}}const he=Symbol("Component Attribute Bindings"),P=Symbol("Component Class Bindings"),M=Symbol("Component Style Bindings"),Mt={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){const e=this;for(const t of Object.keys(e[he]||{}))e.setAttribute(t,e[he][t]);for(const t of Object.keys(e[M]||{}))e.style[t]=e[M][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[P]||[]).filter(Boolean))e.__managedClasses.add(t),e.classList.add(t);for(const t of(e.getAttribute("classname")||"").split(/\w+/).filter(Boolean))e.classList.add(t)},__updateChildQueries(e){const t=this;for(const n of _.get(t.constructor,"childQueries",[]))if(!e||e&&n.refresh){const s=n.all?t.querySelectorAll:t.querySelector;t[n.key]=s.call(t,n.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),n=null,s=t.length;for(let i=0;i<t.length;i+=1){const r=t[i];r instanceof Comment&&(r.data===Xe?n=i+1:r.data===pe&&(s=i-1))}if(n===null)for(const i of t)i.parentNode.removeChild(i);else t=t.slice(n,s);_.has(e.constructor,"contentProp")&&(e[_.get(e.constructor,"contentProp")]=t)},__startMutObs(){const e=this;e.__observer||(e.__observer=new MutationObserver(()=>{e.contentChangedCallback&&e.contentChangedCallback(),e.__gatherChildren(),e.update()})),e.__observer.observe(e,{childList:!0})},__stopMutObs(){const e=this;e.__observer&&e.__observer.disconnect()},__doRender(){const e=this;e.__stopMutObs(),Vt(e,e.render(Zt())),e.__startMutObs()},update(){const e=this;e.__initialized&&!e.__queuedUpdate&&(e.__queuedUpdate=window.requestAnimationFrame(()=>{e.__doRender(),setTimeout(()=>{e.__updateChildQueries(!0),e.__updateHostBindings()},0),e.__queuedUpdate=null}))},attributeChangedCallback(e,t,n){const s=this,i=n===""?!0:n;i!==t&&(s.__cbAttributeChanged&&s.__cbAttributeChanged(e,s[e],i),e!=="style"&&(s[e]=i),s.__initialized&&s.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=_.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,n]of t)e[n]=e[n].bind(e);e.__initialized=!0}for(const[n,s]of t)e.addEventListener(n,e[s]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,n]of _.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[n]);e.__stopMutObs()}};function E(e){return t=>{_.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},Mt)}}function se(){return(e,t)=>{_.add(e.constructor,{contentProp:t})}}function ie(e){return(t,n)=>{Object.defineProperty(t,n,{get(){return Object.defineProperty(this,n,{value:{dispatch:s=>{const i=new CustomEvent(e||n,{detail:s});return this.dispatchEvent(i),i}}}),this[n]},configurable:!0})}}function z(e){return(t,n)=>{const s=_.get(t.constructor,"eventListeners",[]);s.push([e,n]),_.add(t.constructor,{eventListeners:s})}}function p(e){return(t,n)=>{const s=t.constructor,i=n.toLowerCase();if(s.observedAttributes=s.observedAttributes||["classname","className","style"],s.observedAttributes.push(n),s.observedAttributes.push(i),i!==n&&Object.defineProperty(t,n,{get(){return this[i]},set(r){this[i]=r}}),e){const r=Symbol.for(n);Object.defineProperty(t,i,{get(){return this[r]},set(l){let d=l;e===Boolean&&typeof l=="string"&&l.toLowerCase()==="false"?d=!1:d=e(l),this[r]=d}})}}}function Qe(e,t,n){return(s,i)=>{const r=_.get(s.constructor,"childQueries",[]);r.push({key:i,selector:e,all:n,refresh:t.refresh}),_.add(s.constructor,{childQueries:r})}}function re(e,t={}){return Qe(e,t)}function Ze(e,t={}){return Qe(e,t,!0)}function we(){return(e,t)=>{const n=Symbol(t);Object.defineProperties(e,{[n]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[n]},set(s){this[n]!==s&&(this[n]=s,this.update())}}})}}var _e=(e=>(e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip",e))(_e||{}),en=Object.defineProperty,tn=Object.getOwnPropertyDescriptor,v=(e,t,n,s)=>{for(var i=s>1?void 0:s?tn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&en(t,n,i),i};const g="sps-file-upload";var H;exports.SpsFileUploadComponent=(H=class extends HTMLElement{constructor(){super();a(this,"description");a(this,"multiple");a(this,"shown",!0);a(this,"dismissable");a(this,"processing");a(this,"mini");a(this,"constrainContentWidth");a(this,"downloadLabel");a(this,"acceptExtensions");a(this,"maxSize");a(this,"customRequirement");a(this,"selection");a(this,"dismissal");a(this,"download");a(this,"fileInput");a(this,"files",[]);a(this,"accept");a(this,"acceptMIMETypes",new Set);a(this,"acceptExtensionsDescription");a(this,"maxSizeBytes");a(this,"active",!1);a(this,"error",!1);a(this,"namesOfUnsupportedFiles",[]);this.handleBrowseLinkClick=this.handleBrowseLinkClick.bind(this),this.handleDownloadButtonClick=this.handleDownloadButtonClick.bind(this),this.handleFileInputChange=this.handleFileInputChange.bind(this),this.dismiss=this.dismiss.bind(this)}get[P](){return[g,this.active&&`${g}--active`,this.error&&`${g}--error`,!this.shown&&`${g}--hidden`,this.mini&&`${g}--mini`,this.constrainContentWidth&&`${g}--constrained-content-width`]}connectedCallback(){this.description=this.description||(this.multiple?"Files":"File"),this.acceptExtensions&&this.processAcceptExtensions(this.acceptExtensions),this.maxSize&&this.parseAndValidateMaxSize(this.maxSize)}attributeChangedCallback(t,n,s){t==="acceptExtensions"&&this.processAcceptExtensions(s),t==="maxSize"&&this.parseAndValidateMaxSize(s)}dismiss(){this.dismissable&&(this.shown=!1,this.update(),this.dismissal.dispatch())}show(){this.dismissable&&(this.shown=!0,this.update())}render({t}){const n=this.error?U.SpsIcon.EXCLAMATION_CIRCLE:U.SpsIcon.UPLOAD_CLOUD,s=(this.multiple?t("design-system:fileUpload.instructions_plural"):t("design-system:fileUpload.instructions")).split("|");return o("div",{"data-fragment":!0},o("div",{className:`${g}__content`},this.processing?o("div",{"data-fragment":!0},o("i",{className:"sps-spinner sps-spinner--medium","aria-hidden":"true"}),o("div",{className:`${g}__instructions`},t("design-system:fileUpload.processing"))):o("div",{"data-fragment":!0},o("i",{className:`sps-icon sps-icon-${n} ${g}__icon-primary`,"aria-hidden":"true"}),o("div",{className:`${g}__title`},this.error?o("div",{"data-fragment":!0},t(this.namesOfUnsupportedFiles.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):o("div",{"data-fragment":!0},t("design-system:fileUpload.title",{description:this.description}))),this.error?o("div",{className:`${g}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((i,r)=>{const l=Math.floor(i.length/2);return o("div",{className:`${g}__errored-filename`,key:i},o("span",{className:`${g}__errored-filename-segment`},i.substr(0,l)),o("div",{className:`${g}__errored-filename-segment`},o("span",null,i.substr(l))),r<this.namesOfUnsupportedFiles.length-1?",":"")}))):o("span",null),o("div",{className:`${g}__instructions`},o("div",{"data-fragment":!0},o("span",null,s[0]),o("a",{href:"",onClick:this.handleBrowseLinkClick},s[1]),o("span",null,s[2]))),o("div",{className:`${g}__requirements`},this.acceptExtensions?o("span",null,"("," ",t("design-system:fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription})," ",")"):"",this.maxSize?o("span",null,"("," ",t("design-system:fileUpload.maximumSize",{size:this.maxSize})," ",")"):"",this.customRequirement?o("span",null," ",this.customRequirement," "):""),this.downloadLabel&&o("div",{className:`sps-button sps-button--link ${g}__download-button`,onClick:this.handleDownloadButtonClick},o("button",{type:"button"},o("i",{className:"sps-icon sps-icon-download-cloud","aria-hidden":"true"})," ",this.downloadLabel)))),this.dismissable&&!this.processing&&o("div",{className:`sps-button sps-button--icon ${g}__close-button`,onClick:this.dismiss},o("button",{type:"button",title:t("design-system:fileUpload.close")},o("i",{className:"sps-icon sps-icon-x","aria-hidden":"true"}))),o("form",null,o("input",{type:"file",accept:this.accept||"*/*",multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(t){try{this.maxSizeBytes=c.parseFileSize(t)}catch{throw new Error(`Could not parse "${t}" as a file size.`)}}processAcceptExtensions(t){const s=(Array.isArray(t)?t:t.trim().split(/\s?,\s?/)).map(r=>r.replace(/^\./,"")),i=s.map(r=>`.${r}`.toLowerCase());this.acceptExtensionsDescription=i.map((r,l)=>l>0&&l===i.length-1?`or ${r}`:r).join(i.length>2?", ":" "),this.acceptMIMETypes.clear();for(const r of s)for(const l of _e[r.toUpperCase()].split(","))this.acceptMIMETypes.add(l);this.accept=i.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(t){this.namesOfUnsupportedFiles=[];const n=Array.from(t);for(const s of n)this.acceptExtensions&&!this.acceptMIMETypes.has(s.type)&&this.namesOfUnsupportedFiles.push(s.name),this.maxSize&&s.size>this.maxSizeBytes&&this.namesOfUnsupportedFiles.indexOf(s.name)===-1&&this.namesOfUnsupportedFiles.push(s.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=n,this.selection.dispatch(n))}handleDragOver(t){t.preventDefault(),t.stopPropagation()}handleDragEnter(t){t.preventDefault(),this.active=!0,this.error=!1,this.update()}handleDragLeave(t){t.preventDefault(),this.active=!1,this.update()}handleDrop(t){t.preventDefault(),t.stopPropagation(),this.active=!1,t.dataTransfer.items?this.selectFiles(Array.from(t.dataTransfer.items).map(n=>n.getAsFile())):this.selectFiles(t.dataTransfer.files),this.update()}handleBrowseLinkClick(t){t.preventDefault(),this.error=!1,this.update(),this.fileInput.click()}handleDownloadButtonClick(){this.download.dispatch()}handleFileInputChange(t){t.stopPropagation(),this.selectFiles(t.target.files)}},a(H,"displayName",g),a(H,"props",{description:"string",multiple:"boolean",dismissable:"boolean",processing:"boolean",mini:"boolean",downloadLabel:"string",acceptExtensions:"Array<string> | string",maxSize:"string",customRequirement:"string",selection:{event:!0,type:"CustomEvent<Array<File>>"},dismissal:{event:!0,type:"CustomEvent<void>"},download:{event:!0,type:"CustomEvent<void>"}}),H);v([p()],exports.SpsFileUploadComponent.prototype,"description",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"multiple",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"shown",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"dismissable",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"processing",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"mini",2);v([p(Boolean)],exports.SpsFileUploadComponent.prototype,"constrainContentWidth",2);v([p()],exports.SpsFileUploadComponent.prototype,"downloadLabel",2);v([p()],exports.SpsFileUploadComponent.prototype,"acceptExtensions",2);v([p()],exports.SpsFileUploadComponent.prototype,"maxSize",2);v([p()],exports.SpsFileUploadComponent.prototype,"customRequirement",2);v([ie()],exports.SpsFileUploadComponent.prototype,"selection",2);v([ie()],exports.SpsFileUploadComponent.prototype,"dismissal",2);v([ie()],exports.SpsFileUploadComponent.prototype,"download",2);v([re("input[type='file']")],exports.SpsFileUploadComponent.prototype,"fileInput",2);v([z("dragover")],exports.SpsFileUploadComponent.prototype,"handleDragOver",1);v([z("dragenter")],exports.SpsFileUploadComponent.prototype,"handleDragEnter",1);v([z("dragleave")],exports.SpsFileUploadComponent.prototype,"handleDragLeave",1);v([z("drop")],exports.SpsFileUploadComponent.prototype,"handleDrop",1);exports.SpsFileUploadComponent=v([E({tag:g})],exports.SpsFileUploadComponent);const nn={basic:{label:"Basic File Upload",description:c.code`
|
|
273
184
|
<p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
|
|
274
185
|
`,examples:{single:{description:"<p>Single file upload</p>",react:c.code`
|
|
275
186
|
function Component() {
|
|
@@ -519,7 +430,7 @@
|
|
|
519
430
|
</div>
|
|
520
431
|
)
|
|
521
432
|
}
|
|
522
|
-
`}}}};var
|
|
433
|
+
`}}}};var sn=Object.defineProperty,rn=Object.getOwnPropertyDescriptor,x=(e,t,n,s)=>{for(var i=s>1?void 0:s?rn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&sn(t,n,i),i};const w="sps-insight-card";var V;exports.SpsInsightCardComponent=(V=class extends HTMLElement{constructor(){super(...arguments);a(this,"icon");a(this,"kind",U.SpsInsightCardKind.GENERAL);a(this,"title");a(this,"metric");a(this,"partnerCount");a(this,"totalPartners");a(this,"secondary");a(this,"content");a(this,"detail")}get[P](){return[w,`${w}--${this.kind}`,this.detail&&this.detail.children.length?`${w}--has-detail`:null]}render({t}){const n=o("div",{className:`${w}__metric-count`},this.metric),s=o("div",{className:`${w}__description`},o("div",{className:`${w}__title`,style:{"-webkit-box-orient":"vertical"}},this.title),o("div",{className:`${w}__detail`},this.content)),i=this.partnercount,r=this.totalpartners,[l,d,f]=(i?t("design-system:insightCard.partnerCount",{count:i,total:r}):"").split("|");return o("div",{"data-fragment":!0},o("div",{className:`${w}__body`},this.icon?o("i",{className:`sps-icon sps-icon-${this.icon}`}):o("i",{className:`sps-icon sps-icon-${U.SpsInsightCardIcons[this.kind]}`}),n,s),i&&o("div",{className:`${w}__partner-count`},i===r?o("div",null,t("design-system:insightCard.all")):o("div",{"data-fragment":!0},o("div",null,l),o("div",null,d),o("div",null,f)),o("div",{className:`${w}__partners-text`},t("design-system:insightCard.partners"))))}},a(V,"displayName",w),a(V,"props",{icon:"SpsIcon",kind:"SpsInsightCardKind",title:"string",metric:"number",partnerCount:"number",totalPartners:"number",secondary:"boolean"}),V);x([p()],exports.SpsInsightCardComponent.prototype,"icon",2);x([p()],exports.SpsInsightCardComponent.prototype,"kind",2);x([p()],exports.SpsInsightCardComponent.prototype,"title",2);x([p()],exports.SpsInsightCardComponent.prototype,"metric",2);x([p()],exports.SpsInsightCardComponent.prototype,"partnerCount",2);x([p()],exports.SpsInsightCardComponent.prototype,"totalPartners",2);x([p()],exports.SpsInsightCardComponent.prototype,"secondary",2);x([se()],exports.SpsInsightCardComponent.prototype,"content",2);x([re(`.${w}__detail`)],exports.SpsInsightCardComponent.prototype,"detail",2);exports.SpsInsightCardComponent=x([E({tag:w})],exports.SpsInsightCardComponent);var an=Object.defineProperty,on=Object.getOwnPropertyDescriptor,Se=(e,t,n,s)=>{for(var i=s>1?void 0:s?on(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&an(t,n,i),i};const y="sps-insights";var q;exports.SpsInsightsComponent=(q=class extends HTMLElement{constructor(){super();a(this,"content",[]);a(this,"details");a(this,"showAdditionalInsights",!1);this.toggleAdditionalInsights=this.toggleAdditionalInsights.bind(this)}get[P](){return[y,this.showAdditionalInsights&&`${y}--show-additional`,this.details&&Array.from(this.details).every(t=>!t.textContent)?`${y}--no-details`:null,this.content.length===6?`${y}--break-4`:null,this.content.length===7?`${y}--break-5`:null,this.content.length===8?`${y}--break-5`:null]}toggleAdditionalInsights(){this.showAdditionalInsights=!this.showAdditionalInsights,this.update()}render(){return o("div",{"data-fragment":!0},this.content,this.content.length>10&&o("div",{className:"sps-button sps-button--link",onClick:this.toggleAdditionalInsights},o("button",{type:"button"},this.showAdditionalInsights?"Hide ":"Show ","Additional Insights")))}},a(q,"displayName",y),a(q,"props",{}),q);Se([se()],exports.SpsInsightsComponent.prototype,"content",2);Se([Ze(".sps-insight-card__detail")],exports.SpsInsightsComponent.prototype,"details",2);exports.SpsInsightsComponent=Se([E({tag:y})],exports.SpsInsightsComponent);const ln={basic:{label:"Basic Insight Cards",examples:{basic:{jsx:c.code`
|
|
523
434
|
<sps-insights>
|
|
524
435
|
<sps-insight-card kind="general"
|
|
525
436
|
metric="1234"
|
|
@@ -801,7 +712,7 @@
|
|
|
801
712
|
</sps-insights>
|
|
802
713
|
)
|
|
803
714
|
}
|
|
804
|
-
`}}}};var
|
|
715
|
+
`}}}};var cn=Object.defineProperty,pn=Object.getOwnPropertyDescriptor,I=(e,t,n,s)=>{for(var i=s>1?void 0:s?pn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&cn(t,n,i),i},G;exports.SpsNavTabComponent=(G=class extends HTMLElement{constructor(){super(...arguments);a(this,"active",!1);a(this,"label","");a(this,"icon");a(this,"tag","");a(this,"href");a(this,"target")}get[P](){return["sps-tabbed-nav__nav-item",this.active&&"sps-tabbed-nav__nav-item--active"]}render(){return o("a",{href:this.href,target:this.target,className:"sps-tabbed-nav__nav-item-link",tabIndex:0},this.icon&&o("i",{className:`sps-icon sps-icon-${this.icon}`}),this.label&&o("span",null,this.label),this.tag&&o("span",{className:"sps-tag sps-tag--default"},this.tag))}},a(G,"displayName","sps-nav-tab"),a(G,"props",{active:"boolean",label:"string",icon:"SpsIcon",tag:"string",href:"string",target:"string"}),G);I([p()],exports.SpsNavTabComponent.prototype,"active",2);I([p()],exports.SpsNavTabComponent.prototype,"label",2);I([p()],exports.SpsNavTabComponent.prototype,"icon",2);I([p()],exports.SpsNavTabComponent.prototype,"tag",2);I([p()],exports.SpsNavTabComponent.prototype,"href",2);I([p()],exports.SpsNavTabComponent.prototype,"target",2);exports.SpsNavTabComponent=I([E({tag:"sps-nav-tab"})],exports.SpsNavTabComponent);var dn=Object.defineProperty,hn=Object.getOwnPropertyDescriptor,Je=(e,t,n,s)=>{for(var i=s>1?void 0:s?hn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&dn(t,n,i),i},X;exports.SpsNavTabSetComponent=(X=class extends HTMLElement{constructor(){super(...arguments);a(this,"content",[])}render(){return o("nav",{className:"sps-tabbed-nav"},this.content)}},a(X,"displayName","sps-nav-tab-set"),a(X,"props",{}),X);Je([se()],exports.SpsNavTabSetComponent.prototype,"content",2);exports.SpsNavTabSetComponent=Je([E({tag:"sps-nav-tab-set"})],exports.SpsNavTabSetComponent);const un={basic:{label:"Basic Navigation Tabs",description:c.code`
|
|
805
716
|
<p>Navigation tabs native web component</p>
|
|
806
717
|
`,examples:{basic:{react:c.code`
|
|
807
718
|
function DemoComponent() {
|
|
@@ -828,4 +739,93 @@
|
|
|
828
739
|
</sps-nav-tab-set>
|
|
829
740
|
)
|
|
830
741
|
}
|
|
831
|
-
`}}}};
|
|
742
|
+
`}}}};var fn=Object.defineProperty,mn=Object.getOwnPropertyDescriptor,A=(e,t,n,s)=>{for(var i=s>1?void 0:s?mn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&fn(t,n,i),i},Ye=(e=>(e.FIT="fit",e.FILL="fill",e))(Ye||{});const F="sps-photo";var K;exports.SpsPhotoComponent=(K=class extends HTMLElement{constructor(){super(...arguments);a(this,"src");a(this,"altText");a(this,"mode","fill");a(this,"placeholderIcon");a(this,"width");a(this,"fitWidth");a(this,"imageInternal");a(this,"waitForWidthInterval");a(this,"waitForImgHeightInterval")}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=!0;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[M](){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?o("img",{src:this.src,alt:this.altText}):o("span",null):o("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}}},a(K,"displayName",F),a(K,"props",{src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"}),K);A([p()],exports.SpsPhotoComponent.prototype,"src",2);A([p()],exports.SpsPhotoComponent.prototype,"altText",2);A([p()],exports.SpsPhotoComponent.prototype,"mode",2);A([p()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);A([we()],exports.SpsPhotoComponent.prototype,"width",2);A([we()],exports.SpsPhotoComponent.prototype,"fitWidth",2);A([re("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=A([E({tag:F})],exports.SpsPhotoComponent);const gn={sizing:{label:"Sizing",description:c.code`
|
|
743
|
+
<p>
|
|
744
|
+
Photos are block elements, so a photo fills its container's width unless
|
|
745
|
+
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
746
|
+
photos have been placed in cards which have different widths in the 12
|
|
747
|
+
column grid.
|
|
748
|
+
</p>
|
|
749
|
+
`,examples:{basic:{jsx:c.code`
|
|
750
|
+
<div className="sfg-row">
|
|
751
|
+
<div className="sfg-col-2">
|
|
752
|
+
<sps-card>
|
|
753
|
+
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
754
|
+
</sps-card>
|
|
755
|
+
</div>
|
|
756
|
+
<div className="sfg-col-4">
|
|
757
|
+
<sps-card>
|
|
758
|
+
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
759
|
+
</sps-card>
|
|
760
|
+
</div>
|
|
761
|
+
<div className="sfg-col-6">
|
|
762
|
+
<sps-card>
|
|
763
|
+
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
764
|
+
</sps-card>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
`}}},displayMode:{label:"Fill vs. Fit",description:c.code`
|
|
768
|
+
<p>
|
|
769
|
+
There are two display modes available:
|
|
770
|
+
<ul>
|
|
771
|
+
<li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
|
|
772
|
+
<li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
|
|
773
|
+
</ul>
|
|
774
|
+
</p>
|
|
775
|
+
`,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:c.code`
|
|
776
|
+
<div className="sfg-row">
|
|
777
|
+
<div className="sfg-col-4">
|
|
778
|
+
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
779
|
+
</div>
|
|
780
|
+
<div className="sfg-col-4">
|
|
781
|
+
<sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
|
|
782
|
+
</div>
|
|
783
|
+
</div>
|
|
784
|
+
`},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:c.code`
|
|
785
|
+
<div className="sfg-row">
|
|
786
|
+
<div className="sfg-col-4">
|
|
787
|
+
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
788
|
+
</div>
|
|
789
|
+
<div className="sfg-col-4">
|
|
790
|
+
<sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
|
|
791
|
+
</div>
|
|
792
|
+
</div>
|
|
793
|
+
`}}},placeholder:{label:"Placeholders",description:c.code`
|
|
794
|
+
<p>
|
|
795
|
+
When an image is not provided for a particular use case (such as a user avatar,
|
|
796
|
+
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
797
|
+
|
|
798
|
+
The placeholder's icon, selected from our SPS icon set, should represent the
|
|
799
|
+
type of image it is substituting for.
|
|
800
|
+
</p>
|
|
801
|
+
`,examples:{general:{description:"<p>General Photo</p>",jsx:c.code`
|
|
802
|
+
<div className="sfg-row">
|
|
803
|
+
<div className="sfg-col-3">
|
|
804
|
+
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
`},photoAlt:{description:"<p>Photo Alt</p>",jsx:c.code`
|
|
808
|
+
<div className="sfg-row">
|
|
809
|
+
<div className="sfg-col-3">
|
|
810
|
+
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
811
|
+
</div>
|
|
812
|
+
</div>
|
|
813
|
+
`},user:{description:"<p>User / Single Person</p>",jsx:c.code`
|
|
814
|
+
<div className="sfg-row">
|
|
815
|
+
<div className="sfg-col-3">
|
|
816
|
+
<sps-photo placeholderIcon="user"></sps-photo>
|
|
817
|
+
</div>
|
|
818
|
+
</div>
|
|
819
|
+
`},group:{description:"<p>Group / Multiple People</p>",jsx:c.code`
|
|
820
|
+
<div className="sfg-row">
|
|
821
|
+
<div className="sfg-col-3">
|
|
822
|
+
<sps-photo placeholderIcon="group"></sps-photo>
|
|
823
|
+
</div>
|
|
824
|
+
</div>
|
|
825
|
+
`},company:{description:"<p>Company / Building</p>",jsx:c.code`
|
|
826
|
+
<div className="sfg-row">
|
|
827
|
+
<div className="sfg-col-3">
|
|
828
|
+
<sps-photo placeholderIcon="building"></sps-photo>
|
|
829
|
+
</div>
|
|
830
|
+
</div>
|
|
831
|
+
`}}}};exports.AttrBindings=he;exports.ClassBindings=P;exports.Component=E;exports.Content=se;exports.EventDispatcher=ie;exports.EventListener=z;exports.MANIFEST=nt;exports.MIMEType=_e;exports.Prop=p;exports.QuerySelector=re;exports.QuerySelectorAll=Ze;exports.SpsFileUploadExamples=nn;exports.SpsInsightCardExamples=ln;exports.SpsNavTabsExamples=un;exports.SpsPhotoDisplayMode=Ye;exports.SpsPhotoExamples=gn;exports.StyleBindings=M;exports.Watch=we;exports.h=o;exports.namespaceOverrideRegistrar=Yt;exports.register=Jt;exports.webComponentsUseI18n=Qt;
|