@spscommerce/ds-web-components 8.56.2 → 8.56.3
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/components/file-upload/file-upload.d.ts +2 -1
- package/dist/lib/index.js +1082 -1375
- package/dist/lib/index.umd.cjs +38 -38
- package/dist/package.json +1 -1
- package/lib/components/file-upload/file-upload.d.ts +2 -1
- package/lib/index.js +1082 -1375
- package/lib/index.umd.cjs +38 -38
- package/package.json +7 -7
package/dist/lib/index.umd.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
`+
|
|
3
|
-
`))}}function bt(n){n||console.warn("patchOuter requires the node have a parent if there is a key.")}function H(n){if(Z)throw new Error(n+"() can not be called between elementOpenStart() and elementOpenEnd().")}function ke(n){if(ge)throw new Error(n+"() may not be called inside an element that has called skip().")}function ve(n){if(!Z)throw new Error(n+"() can only be called after calling elementOpenStart().")}function wt(){if(Z)throw new Error("elementOpenEnd() must be called after calling elementOpenStart().")}function St(n,s){if(n!==s)throw new Error('Received a call to close "'+s+'" but "'+n+'" was open.')}function _t(n,s){if(s!==null)throw new Error(n+"() must come before any child declarations inside the current element.")}function Nt(n,s,o,c){ie(n);var h=n,m=s,y=m.nextSibling===o&&m.previousSibling===c,b=m.nextSibling===h.nextSibling&&m.previousSibling===c,A=m===h;if(!y&&!b&&!A)throw new Error("There must be exactly one top level call corresponding to the patched element.")}function ne(n){var s=Z;return Z=n,s}function se(n){var s=ge;return ge=n,s}function ie(n){if(process.env.NODE_ENV!=="production"&&!n)throw new Error("Expected value to be defined");return n}var Y={nodesCreated:null,nodesDeleted:null};var yt=(function(){function n(){this.created=[],this.deleted=[]}return n.prototype.markCreated=function(s){this.created.push(s)},n.prototype.markDeleted=function(s){this.deleted.push(s)},n.prototype.notifyChanges=function(){Y.nodesCreated&&this.created.length>0&&Y.nodesCreated(this.created),Y.nodesDeleted&&this.deleted.length>0&&Y.nodesDeleted(this.deleted)},n})();function At(n){return n.nodeType===11||n.nodeType===9}function Ce(n){return n.nodeType===1}function Dt(n){return n.nodeType===3}function Ot(n,s){for(var o=[],c=n;c!==s;){var h=c;o.push(h),c=h.parentNode}return o}var Pt=Node.prototype.getRootNode||function(){for(var n=this,s=n;n;)s=n,n=n.parentNode;return s};function Et(n){var s=Pt.call(n);return At(s)?s.activeElement:null}function It(n,s){var o=Et(n);return!o||!n.contains(o)?[]:Ot(o,s)}function xt(n,s,o){for(var c=s.nextSibling,h=o;h!==null&&h!==s;){var m=h.nextSibling;n.insertBefore(h,c),h=m}}var Ft=(function(){function n(s,o,c){this._attrsArr=null,this.staticsApplied=!1,this.nameOrCtor=s,this.key=o,this.text=c}return n.prototype.hasEmptyAttrsArr=function(){var s=this._attrsArr;return!s||!s.length},n.prototype.getAttrsArr=function(s){return this._attrsArr||(this._attrsArr=new Array(s))},n})();function be(n,s,o,c){var h=new Ft(s,o,c);return n.__incrementalDOMData=h,h}function q(n,s){return Le(n,s)}function kt(n){return!!n.__incrementalDOMData}function Lt(n){return ie(n.__incrementalDOMData),q(n).key}function Le(n,s){if(n.__incrementalDOMData)return n.__incrementalDOMData;var o=Ce(n)?n.localName:n.nodeName,c=Ce(n)?n.getAttribute("key")||s:null,h=Dt(n)?n.data:void 0,m=be(n,o,c,h);return Ce(n)&&Tt(n,m),m}function Te(n){Le(n);for(var s=n.firstChild;s;s=s.nextSibling)Te(s)}function Ue(n){n.__incrementalDOMData=null;for(var s=n.firstChild;s;s=s.nextSibling)Ue(s)}function Tt(n,s){var o=n.attributes,c=o.length;if(c)for(var h=s.getAttrsArr(c),m=0,y=0;m<c;m+=1,y+=2){var b=o[m],A=b.name,_=b.value;h[y]=A,h[y+1]=_}}function Ut(n,s){return n==="svg"?"http://www.w3.org/2000/svg":n==="math"?"http://www.w3.org/1998/Math/MathML":s==null||q(s).nameOrCtor==="foreignObject"?null:s.namespaceURI}function Rt(n,s,o,c){var h;if(typeof o=="function")h=new o;else{var m=Ut(o,s);m?h=n.createElementNS(m,o):h=n.createElement(o)}return be(h,o,c),h}function $t(n){var s=n.createTextNode("");return be(s,"#text",null),s}var G=null,C=null,N=null,z=null,ae=[],re=[];function oe(){return re}function Re(n){var s=function(o,c,h){var m=G,y=z,b=ae,A=re,_=C,I=N,k=!1,ce=!1;G=new yt,z=o.ownerDocument,re=[],N=o.parentNode,ae=It(o,N),process.env.NODE_ENV!=="production"&&(k=ne(!1),ce=se(!1));try{var Mt=n(o,c,h);return process.env.NODE_ENV!=="production"&&wt(),Mt}finally{z=y,re=A,C=_,N=I,ae=b,G.notifyChanges(),ne(k),se(ce),G=m}};return s}var $e=Re(function(n,s,o){return C=n,ze(),s(o),Ve(),process.env.NODE_ENV!=="production"&&Ct(C,n),n}),Bt=Re(function(n,s,o){var c={nextSibling:n},h=null,m=null;return process.env.NODE_ENV!=="production"&&(h=n.nextSibling,m=n.previousSibling),C=c,s(o),process.env.NODE_ENV!=="production"&&(bt(N),Nt(c,C,h,m)),N&&We(N,le(),n.nextSibling),c===C?null:C});function Be(n,s,o){var c=q(n,o);return s==c.nameOrCtor&&o==c.key}function jt(n,s,o){if(!n)return null;if(Be(n,s,o))return n;if(o){for(;n=n.nextSibling;)if(Be(n,s,o))return n}return null}function Wt(n,s){var o;return n==="#text"?o=$t(z):o=Rt(z,N,n,s),G.markCreated(o),o}function je(n,s){var o=jt(C,n,s),c=o||Wt(n,s);c!==C&&(ae.indexOf(c)>=0?xt(N,c,C):N.insertBefore(c,C),C=c)}function We(n,s,o){for(var c=n,h=s;h!==o;){var m=h.nextSibling;c.removeChild(h),G.markDeleted(h),h=m}}function ze(){N=C,C=null}function le(){return C?C.nextSibling:N.firstChild}function we(){C=le()}function Ve(){We(N,le(),null),C=N,N=N.parentNode}function He(n,s){return we(),je(n,s),ze(),N}function qe(){return process.env.NODE_ENV!=="production"&&se(!1),Ve(),C}function zt(){return we(),je("#text",null),C}function Vt(){return process.env.NODE_ENV!=="production"&&(Fe("currentElement",z),H("currentElement")),N}function Ht(){return process.env.NODE_ENV!=="production"&&(Fe("currentPointer",z),H("currentPointer")),le()}function qt(){process.env.NODE_ENV!=="production"&&(_t("skip",C),se(!0)),C=N.lastChild}var Ge=3,x=l();function Gt(n,s,o){if(s.staticsApplied=!0,!(!o||!o.length)){if(s.hasEmptyAttrsArr()){for(var c=0;c<o.length;c+=2)Q(n,o[c],o[c+1]);return}for(var c=0;c<o.length;c+=2)x[o[c]]=c+1;for(var h=s.getAttrsArr(0),m=0,c=0;c<h.length;c+=2){var y=h[c],b=h[c+1],A=x[y];if(A){o[A]===b&&delete x[y];continue}h[m]=y,h[m+1]=b,m+=2}p(h,m);for(var y in x)Q(n,y,o[x[y]]),delete x[y]}}function Se(n,s,o){process.env.NODE_ENV!=="production"&&(H("elementOpen"),ke("elementOpen"));var c=He(n,s),h=q(c);h.staticsApplied||Gt(c,h,o);var m=Math.max(0,arguments.length-Ge),y=h.hasEmptyAttrsArr();if(!m&&y)return c;for(var b=h.getAttrsArr(m),A=Ge,_=0;A<arguments.length;A+=2,_+=2){var I=arguments[A];if(y)b[_]=I;else if(b[_]!==I)break;var k=arguments[A+1];(y||b[_+1]!==k)&&(b[_+1]=k,Q(c,I,k))}if(A<arguments.length||_<b.length){for(var ce=_;_<b.length;_+=2)x[b[_]]=b[_+1];for(_=ce;A<arguments.length;A+=2,_+=2){var I=arguments[A],k=arguments[A+1];x[I]!==k&&Q(c,I,k),b[_]=I,b[_+1]=k,delete x[I]}p(b,_);for(var I in x)Q(c,I,void 0),delete x[I]}return c}function Xt(n,s,o){var c=oe();process.env.NODE_ENV!=="production"&&(H("elementOpenStart"),ne(!0)),c[0]=n,c[1]=s,c[2]=o}function Kt(n){var s=oe();process.env.NODE_ENV!=="production"&&(ve("key"),ie(s)),s[1]=n}function Qt(n,s){var o=oe();process.env.NODE_ENV!=="production"&&ve("attr"),o.push(n),o.push(s)}function Zt(){var n=oe();process.env.NODE_ENV!=="production"&&(ve("elementOpenEnd"),ne(!1)),ie(n);var s=Se.apply(null,n);return p(n,0),s}function Xe(n){process.env.NODE_ENV!=="production"&&H("elementClose");var s=qe();return process.env.NODE_ENV!=="production"&&St(q(s).nameOrCtor,n),s}function Yt(n,s,o){return Se.apply(null,arguments),Xe(n)}function Jt(n){process.env.NODE_ENV!=="production"&&(H("text"),ke("text"));var s=zt(),o=q(s);if(o.text!==n){o.text=n;for(var c=n,h=1;h<arguments.length;h+=1){var m=arguments[h];c=m(c)}s.data=c}return s}return g.applyAttr=R,g.applyProp=xe,g.attributes=K,g.close=qe,g.currentElement=Vt,g.currentPointer=Ht,g.open=He,g.patch=$e,g.patchInner=$e,g.patchOuter=Bt,g.skip=qt,g.skipNode=we,g.getKey=Lt,g.clearCache=Ue,g.importNode=Te,g.isDataInitialized=kt,g.notifications=Y,g.symbols=e,g.attr=Qt,g.elementClose=Xe,g.elementOpen=Se,g.elementOpenEnd=Zt,g.elementOpenStart=Xt,g.elementVoid=Yt,g.text=Jt,g.key=Kt,g}var D=Qe();function Ne(e){let t=D.currentPointer();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),D.currentElement().appendChild(t)),D.skipNode(),t}const $=Symbol("ComponentMetadata"),P=Object.freeze({has(e,t){return!!(e[$]&&Object.prototype.hasOwnProperty.call(e[$],t))},add(e,t){e[$]?Object.assign(e[$],t):e[$]=t},get(e,t,a){return e[$]&&e[$][t]||a}}),ye=Symbol("ds-web-components:pragma:listeners-attached"),Ae="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")D.text(t);else if(t instanceof Set)de(Array.from(t));else if(Array.isArray(t)&&t.length>0){let a=D.currentPointer();if(Ne(Ae),a===null){const r=D.currentElement();for(let l=0;l<t.length;l+=1)r.contains(t[l])||r.appendChild(t[l]),D.skipNode()}for(;a&&a.data!==pe;)D.skipNode(),a=D.currentPointer();Ne(pe)}}function d(e,t,...a){if(t){for(const r of Object.keys(t))if(r.toUpperCase()==="DATA-FRAGMENT")return()=>de(a)}return()=>{D.elementOpenStart(e);const r=[];if(t)for(const p of Object.keys(t))p.toUpperCase()==="CLASSNAME"?D.attr("class",t[p]):/^on[A-Z]/.test(p)?r.push(p):D.attr(p,t[p]);D.elementOpenEnd(e);const l=D.currentElement();if(!l[ye]){for(const p of r)l.addEventListener(p.substr(2).toLowerCase(),t[p]);l[ye]=!0}de(a),D.elementClose(e)}}function De(e,t){customElements.get(e)||customElements.define(e,t)}function Ze(...e){for(const t of e)De(P.get(t,"tag"),t)}function Ye(e){return function(...a){for(const r of a){const l=`${e}${P.get(r,"tag").substr(3)}`;De(l,r)}}}const he=Symbol("Component Attribute Bindings"),B=Symbol("Component Class Bindings"),J=Symbol("Component Style Bindings"),Je={__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[J]||{}))e.style[t]=e[J][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[B]||[]).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 a of P.get(t.constructor,"childQueries",[]))if(!e||e&&a.refresh){const r=a.all?t.querySelectorAll:t.querySelector;t[a.key]=r.call(t,a.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),a=null,r=t.length;for(let l=0;l<t.length;l+=1){const p=t[l];p instanceof Comment&&(p.data===Ae?a=l+1:p.data===pe&&(r=l-1))}if(a===null)for(const l of t)l.parentNode.removeChild(l);else t=t.slice(a,r);P.has(e.constructor,"contentProp")&&(e[P.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(),D.patch(e,e.render()),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,a){const r=this,l=a===""?!0:a;l!==t&&(r.__cbAttributeChanged&&r.__cbAttributeChanged(e,r[e],l),e!=="style"&&(r[e]=l),r.__initialized&&r.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=P.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,a]of t)e[a]=e[a].bind(e);e.__initialized=!0}for(const[a,r]of t)e.addEventListener(a,e[r]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,a]of P.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[a]);e.__stopMutObs()}};function j(e){return t=>{P.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},Je)}}function M(){return(e,t)=>{P.add(e.constructor,{contentProp:t})}}function ee(e){return(t,a)=>{Object.defineProperty(t,a,{get(){return Object.defineProperty(this,a,{value:{dispatch:r=>{const l=new CustomEvent(e||a,{detail:r});return this.dispatchEvent(l),l}}}),this[a]},configurable:!0})}}function X(e){return(t,a)=>{const r=P.get(t.constructor,"eventListeners",[]);r.push([e,a]),P.add(t.constructor,{eventListeners:r})}}function v(e){return(t,a)=>{const r=t.constructor,l=a.toLowerCase();if(r.observedAttributes=r.observedAttributes||["classname","className","style"],r.observedAttributes.push(a),r.observedAttributes.push(l),l!==a&&Object.defineProperty(t,a,{get(){return this[l]},set(p){this[l]=p}}),e){const p=Symbol.for(a);Object.defineProperty(t,l,{get(){return this[p]},set(u){let R=u;e===Boolean&&typeof u=="string"&&u.toLowerCase()==="false"?R=!1:R=e(u),this[p]=R}})}}}function Oe(e,t,a){return(r,l)=>{const p=P.get(r.constructor,"childQueries",[]);p.push({key:l,selector:e,all:a,refresh:t.refresh}),P.add(r.constructor,{childQueries:p})}}function te(e,t={}){return Oe(e,t)}function Pe(e,t={}){return Oe(e,t,!0)}function ue(){return(e,t)=>{const a=Symbol(t);Object.defineProperties(e,{[a]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[a]},set(r){this[a]!==r&&(this[a]=r,this.update())}}})}}var fe=(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.CER="application/pkix-cert",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))(fe||{}),Me=Object.defineProperty,et=Object.getOwnPropertyDescriptor,w=(e,t,a,r)=>{for(var l=r>1?void 0:r?et(t,a):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(l=(r?u(t,a,l):u(l))||l);return r&&l&&Me(t,a,l),l};const S="sps-file-upload";i.SpsFileUploadComponent=class extends HTMLElement{constructor(){super(),this.shown=!0,this.files=[],this.acceptMIMETypes=new Set,this.active=!1,this.error=!1,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[B](){return[S,this.active&&`${S}--active`,this.error&&`${S}--error`,!this.shown&&`${S}--hidden`,this.mini&&`${S}--mini`,this.constrainContentWidth&&`${S}--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,a,r){t==="acceptExtensions"&&this.processAcceptExtensions(r),t==="maxSize"&&this.parseAndValidateMaxSize(r)}dismiss(){this.dismissable&&(this.shown=!1,this.update(),this.dismissal.dispatch())}show(){this.dismissable&&(this.shown=!0,this.update())}render(){const t=this.error?L.SpsIcon.EXCLAMATION_CIRCLE:L.SpsIcon.UPLOAD_CLOUD,a=(this.multiple?O.i18nWoodland.t("fileUpload.instructions.other",{defaultValue:"Drag and drop your files here or |browse for files| on your desktop."}):O.i18nWoodland.t("fileUpload.instructions.one",{defaultValue:"Drag and drop your file here or |browse for a file| on your desktop."})).split("|");return d("div",{"data-fragment":!0},d("div",{className:`${S}__content`},this.processing?d("div",{"data-fragment":!0},d("i",{className:"sps-spinner sps-spinner--medium","aria-hidden":"true"}),d("div",{className:`${S}__instructions`},O.i18nWoodland.t("fileUpload.processing",{defaultValue:"Processing Upload..."}))):d("div",{"data-fragment":!0},d("i",{className:`sps-icon sps-icon-${t} ${S}__icon-primary`,"aria-hidden":"true"}),d("div",{className:`${S}__title`},this.error?d("div",{"data-fragment":!0},O.i18nWoodland.t(this.namesOfUnsupportedFiles.length>1?"fileUpload.cancelled_plural":"fileUpload.cancelled",{defaultValue:this.namesOfUnsupportedFiles.length>1?"File Upload(s) Failed":"File Upload Failed"})):d("div",{"data-fragment":!0},O.i18nWoodland.t("fileUpload.title",{description:this.description,defaultValue:`Upload Your ${this.description}`}))),this.error?d("div",{className:`${S}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((r,l)=>{const p=Math.floor(r.length/2);return d("div",{className:`${S}__errored-filename`,key:r},d("span",{className:`${S}__errored-filename-segment`},r.substr(0,p)),d("div",{className:`${S}__errored-filename-segment`},d("span",null,r.substr(p))),l<this.namesOfUnsupportedFiles.length-1?",":"")}))):d("span",null),d("div",{className:`${S}__instructions`},d("div",{"data-fragment":!0},d("span",null,a[0]),d("a",{href:"",onClick:this.handleBrowseLinkClick},a[1]),d("span",null,a[2]))),d("div",{className:`${S}__requirements`},this.acceptExtensions?d("span",null,"("," ",O.i18nWoodland.t("fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription,defaultValue:`${this.acceptExtensionsDescription} format accepted`})," ",")"):"",this.maxSize?d("span",null,"("," ",O.i18nWoodland.t("fileUpload.maximumSize",{size:this.maxSize,defaultValue:`${this.maxSize} maximum`})," ",")"):"",this.customRequirement?d("span",null," ",this.customRequirement," "):""),this.downloadLabel&&d("div",{className:`sps-button sps-button--link ${S}__download-button`,onClick:this.handleDownloadButtonClick},d("button",{type:"button"},d("i",{className:"sps-icon sps-icon-download-cloud","aria-hidden":"true"})," ",this.downloadLabel)))),this.dismissable&&!this.processing&&d("div",{className:`sps-button sps-button--icon ${S}__close-button`,onClick:this.dismiss},d("button",{type:"button",title:O.i18nWoodland.t("fileUpload.close",{defaultValue:"Close"})},d("i",{className:"sps-icon sps-icon-x","aria-hidden":"true"}))),d("form",null,d("input",{type:"file",accept:this.accept||"*/*",multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(t){try{this.maxSizeBytes=f.parseFileSize(t)}catch{throw new Error(`Could not parse "${t}" as a file size.`)}}processAcceptExtensions(t){const r=(Array.isArray(t)?t:t.trim().split(/\s?,\s?/)).map(p=>p.replace(/^\./,"")),l=r.map(p=>`.${p}`.toLowerCase());this.acceptExtensionsDescription=l.map((p,u)=>u>0&&u===l.length-1?`or ${p}`:p).join(l.length>2?", ":" "),this.acceptMIMETypes.clear();for(const p of r)for(const u of fe[p.toUpperCase()].split(","))this.acceptMIMETypes.add(u);this.accept=l.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(t){this.namesOfUnsupportedFiles=[];const a=Array.from(t);for(const r of a)this.acceptExtensions&&!this.acceptMIMETypes.has(r.type)&&this.namesOfUnsupportedFiles.push(r.name),this.maxSize&&r.size>this.maxSizeBytes&&!this.namesOfUnsupportedFiles.includes(r.name)&&this.namesOfUnsupportedFiles.push(r.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=a,this.selection.dispatch(a))}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(a=>a.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)}},i.SpsFileUploadComponent.displayName=S,i.SpsFileUploadComponent.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>"}},w([v()],i.SpsFileUploadComponent.prototype,"description",2),w([v(Boolean)],i.SpsFileUploadComponent.prototype,"multiple",2),w([v(Boolean)],i.SpsFileUploadComponent.prototype,"shown",2),w([v(Boolean)],i.SpsFileUploadComponent.prototype,"dismissable",2),w([v(Boolean)],i.SpsFileUploadComponent.prototype,"processing",2),w([v(Boolean)],i.SpsFileUploadComponent.prototype,"mini",2),w([v(Boolean)],i.SpsFileUploadComponent.prototype,"constrainContentWidth",2),w([v()],i.SpsFileUploadComponent.prototype,"downloadLabel",2),w([v()],i.SpsFileUploadComponent.prototype,"acceptExtensions",2),w([v()],i.SpsFileUploadComponent.prototype,"maxSize",2),w([v()],i.SpsFileUploadComponent.prototype,"customRequirement",2),w([ee()],i.SpsFileUploadComponent.prototype,"selection",2),w([ee()],i.SpsFileUploadComponent.prototype,"dismissal",2),w([ee()],i.SpsFileUploadComponent.prototype,"download",2),w([te("input[type='file']")],i.SpsFileUploadComponent.prototype,"fileInput",2),w([X("dragover")],i.SpsFileUploadComponent.prototype,"handleDragOver",1),w([X("dragenter")],i.SpsFileUploadComponent.prototype,"handleDragEnter",1),w([X("dragleave")],i.SpsFileUploadComponent.prototype,"handleDragLeave",1),w([X("drop")],i.SpsFileUploadComponent.prototype,"handleDrop",1),i.SpsFileUploadComponent=w([j({tag:S})],i.SpsFileUploadComponent);const tt={basic:{label:"Basic File Upload",description:f.code`
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@spscommerce/ds-shared"),require("@spscommerce/utils"),require("@spscommerce/i18n")):typeof define==`function`&&define.amd?define([`exports`,`@spscommerce/ds-shared`,`@spscommerce/utils`,`@spscommerce/i18n`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.DSWebComponents={},e.spscommerceDsShared,e.spscommerceUtils,e.spscommerceI18n))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),a={},o=i((e=>{Object.defineProperty(e,"__esModule",{value:!0});var t={default:`__default`},n=Object.prototype.hasOwnProperty;function r(){}r.prototype=Object.create(null);function i(e,t){return n.call(e,t)}function a(){return new r}function o(e,t){for(;e.length>t;)e.pop()}function s(e){if(e.lastIndexOf(`xml:`,0)===0)return`http://www.w3.org/XML/1998/namespace`;if(e.lastIndexOf(`xlink:`,0)===0)return`http://www.w3.org/1999/xlink`}function c(e,t,n){if(n==null)e.removeAttribute(t);else{var r=s(t);r?e.setAttributeNS(r,t,String(n)):e.setAttribute(t,String(n))}}function l(e,t,n){e[t]=n}function u(e,t,n){t.indexOf(`-`)>=0?e.setProperty(t,n):e[t]=n}function d(e,t,n){if(typeof n==`string`)e.style.cssText=n;else{e.style.cssText=``;var r=e.style;for(var a in n)i(n,a)&&u(r,a,n[a])}}function f(e,t,n){var r=typeof n;r===`object`||r===`function`?l(e,t,n):c(e,t,n)}var p=a();p[t.default]=f,p.style=d;function m(e,n,r){(p[n]||p[t.default])(e,n,r)}var h=!1,g=!1;function _(e,t){if(!t)throw Error(`Cannot call `+e+`() unless in patch.`)}function v(e,t){if(e!==t){for(var n=e,r=[];n&&n!==t;)r.push(n.nodeName.toLowerCase()),n=n.parentNode;throw Error(`One or more tags were not closed:
|
|
2
|
+
`+r.join(`
|
|
3
|
+
`))}}function y(e){if(h)throw Error(e+`() can not be called between elementOpenStart() and elementOpenEnd().`)}function b(e){if(g)throw Error(e+`() may not be called inside an element that has called skip().`)}function x(e){if(!h)throw Error(e+`() can only be called after calling elementOpenStart().`)}function S(){if(h)throw Error(`elementOpenEnd() must be called after calling elementOpenStart().`)}function C(e,t){if(e!==t)throw Error(`Received a call to close "`+t+`" but "`+e+`" was open.`)}function w(e){var t=h;return h=e,t}function T(e){var t=g;return g=e,t}function E(e){if(process.env.NODE_ENV!==`production`&&!e)throw Error(`Expected value to be defined`);return e}var D={nodesCreated:null,nodesDeleted:null},O=function(){function e(){this.created=[],this.deleted=[]}return e.prototype.markCreated=function(e){this.created.push(e)},e.prototype.markDeleted=function(e){this.deleted.push(e)},e.prototype.notifyChanges=function(){D.nodesCreated&&this.created.length>0&&D.nodesCreated(this.created),D.nodesDeleted&&this.deleted.length>0&&D.nodesDeleted(this.deleted)},e}();function k(e){return e.nodeType===11||e.nodeType===9}function A(e){return e.nodeType===1}function j(e){return e.nodeType===3}function M(e,t){for(var n=[],r=e;r!==t;){var i=r;n.push(i),r=i.parentNode}return n}var N=Node.prototype.getRootNode||function(){for(var e=this,t=e;e;)t=e,e=e.parentNode;return t};function P(e){var t=N.call(e);return k(t)?t.activeElement:null}function F(e,t){var n=P(e);return!n||!e.contains(n)?[]:M(n,t)}function ee(e,t,n){for(var r=t.nextSibling,i=n;i!==null&&i!==t;){var a=i.nextSibling;e.insertBefore(i,r),i=a}}var I=function(){function e(e,t,n){this._attrsArr=null,this.staticsApplied=!1,this.nameOrCtor=e,this.key=t,this.text=n}return e.prototype.hasEmptyAttrsArr=function(){var e=this._attrsArr;return!e||!e.length},e.prototype.getAttrsArr=function(e){return this._attrsArr||=Array(e)},e}();function L(e,t,n,r){var i=new I(t,n,r);return e.__incrementalDOMData=i,i}function R(e,t){return z(e,t)}function z(e,t){if(e.__incrementalDOMData)return e.__incrementalDOMData;var n=L(e,A(e)?e.localName:e.nodeName,A(e)?e.getAttribute(`key`)||t:null,j(e)?e.data:void 0);return A(e)&&B(e,n),n}function B(e,t){var n=e.attributes,r=n.length;if(r)for(var i=t.getAttrsArr(r),a=0,o=0;a<r;a+=1,o+=2){var s=n[a],c=s.name,l=s.value;i[o]=c,i[o+1]=l}}function V(e,t){return e===`svg`?`http://www.w3.org/2000/svg`:e===`math`?`http://www.w3.org/1998/Math/MathML`:t==null||R(t).nameOrCtor===`foreignObject`?null:t.namespaceURI}function H(e,t,n,r){var i;if(typeof n==`function`)i=new n;else{var a=V(n,t);i=a?e.createElementNS(a,n):e.createElement(n)}return L(i,n,r),i}function U(e){var t=e.createTextNode(``);return L(t,`#text`,null),t}var W=null,G=null,K=null,q=null,J=[],Y=[];function X(){return Y}function te(e){return function(t,n,r){var i=W,a=q,o=J,s=Y,c=G,l=K,u=!1,d=!1;W=new O,q=t.ownerDocument,Y=[],K=t.parentNode,J=F(t,K),process.env.NODE_ENV!==`production`&&(u=w(!1),d=T(!1));try{var f=e(t,n,r);return process.env.NODE_ENV!==`production`&&S(),f}finally{q=a,Y=s,G=c,K=l,J=o,W.notifyChanges(),w(u),T(d),W=i}}}var ne=te(function(e,t,n){return G=e,ce(),t(n),le(),process.env.NODE_ENV!==`production`&&v(G,e),e});function re(e,t,n){var r=R(e,n);return t==r.nameOrCtor&&n==r.key}function ie(e,t,n){if(!e)return null;if(re(e,t,n))return e;if(n){for(;e=e.nextSibling;)if(re(e,t,n))return e}return null}function ae(e,t){var n=e===`#text`?U(q):H(q,K,e,t);return W.markCreated(n),n}function oe(e,t){var n=ie(G,e,t)||ae(e,t);n!==G&&(J.indexOf(n)>=0?ee(K,n,G):K.insertBefore(n,G),G=n)}function se(e,t,n){for(var r=e,i=t;i!==n;){var a=i.nextSibling;r.removeChild(i),W.markDeleted(i),i=a}}function ce(){K=G,G=null}function Z(){return G?G.nextSibling:K.firstChild}function Q(){G=Z()}function le(){se(K,Z(),null),G=K,K=K.parentNode}function ue(e,t){return Q(),oe(e,t),ce(),K}function de(){return process.env.NODE_ENV!==`production`&&T(!1),le(),G}function fe(){return Q(),oe(`#text`,null),G}function pe(){return process.env.NODE_ENV!==`production`&&(_(`currentElement`,q),y(`currentElement`)),K}function me(){return process.env.NODE_ENV!==`production`&&(_(`currentPointer`,q),y(`currentPointer`)),Z()}var he=3,$=a();function ge(e,t,n){if(t.staticsApplied=!0,n&&n.length){if(t.hasEmptyAttrsArr())for(var r=0;r<n.length;r+=2)m(e,n[r],n[r+1]);else{for(var r=0;r<n.length;r+=2)$[n[r]]=r+1;for(var i=t.getAttrsArr(0),a=0,r=0;r<i.length;r+=2){var s=i[r],c=i[r+1],l=$[s];l?n[l]===c&&delete $[s]:(i[a]=s,i[a+1]=c,a+=2)}for(var s in o(i,a),$)m(e,s,n[$[s]]),delete $[s]}}}function _e(e,t,n){for(var r=[],i=3;i<arguments.length;i++)r[i-3]=arguments[i];process.env.NODE_ENV!==`production`&&(y(`elementOpen`),b(`elementOpen`));var a=ue(e,t),s=R(a);s.staticsApplied||ge(a,s,n);var c=Math.max(0,arguments.length-he),l=s.hasEmptyAttrsArr();if(!c&&l)return a;for(var u=s.getAttrsArr(c),d=he,f=0;d<arguments.length;d+=2,f+=2){var p=arguments[d];if(l)u[f]=p;else if(u[f]!==p)break;var h=arguments[d+1];(l||u[f+1]!==h)&&(u[f+1]=h,m(a,p,h))}if(d<arguments.length||f<u.length){for(var g=f;f<u.length;f+=2)$[u[f]]=u[f+1];for(f=g;d<arguments.length;d+=2,f+=2){var p=arguments[d],h=arguments[d+1];$[p]!==h&&m(a,p,h),u[f]=p,u[f+1]=h,delete $[p]}for(var p in o(u,f),$)m(a,p,void 0),delete $[p]}return a}function ve(e,t,n){var r=X();process.env.NODE_ENV!==`production`&&(y(`elementOpenStart`),w(!0)),r[0]=e,r[1]=t,r[2]=n}function ye(e,t){var n=X();process.env.NODE_ENV!==`production`&&x(`attr`),n.push(e),n.push(t)}function be(){var e=X();process.env.NODE_ENV!==`production`&&(x(`elementOpenEnd`),w(!1)),E(e);var t=_e.apply(null,e);return o(e,0),t}function xe(e){process.env.NODE_ENV!==`production`&&y(`elementClose`);var t=de();return process.env.NODE_ENV!==`production`&&C(R(t).nameOrCtor,e),t}function Se(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];process.env.NODE_ENV!==`production`&&(y(`text`),b(`text`));var r=fe(),i=R(r);if(i.text!==e){i.text=e;for(var a=e,o=1;o<arguments.length;o+=1){var s=arguments[o];a=s(a)}r.data=a}return r}e.currentElement=pe,e.currentPointer=me,e.patch=ne,e.skipNode=Q,e.attr=ye,e.elementClose=xe,e.elementOpenEnd=be,e.elementOpenStart=ve,e.text=Se}))();function s(e){let t=(0,o.currentPointer)();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),(0,o.currentElement)().appendChild(t)),(0,o.skipNode)(),t}var c=Symbol(`ComponentMetadata`),l=Object.freeze({has(e,t){return!!(e[c]&&Object.prototype.hasOwnProperty.call(e[c],t))},add(e,t){e[c]?Object.assign(e[c],t):e[c]=t},get(e,t,n){return e[c]&&e[c][t]||n}}),u=Symbol(`ds-web-components:pragma:listeners-attached`),d=`idom-pragma:content-begin`,f=`idom-pragma:content-end`;function p(e){for(let t of e)if(typeof t==`function`)t();else if(typeof t==`string`)(0,o.text)(t);else if(t instanceof Set)p(Array.from(t));else if(Array.isArray(t)&&t.length>0){let e=(0,o.currentPointer)();if(s(d),e===null){let e=(0,o.currentElement)();for(let n=0;n<t.length;n+=1)e.contains(t[n])||e.appendChild(t[n]),(0,o.skipNode)()}for(;e&&e.data!==`idom-pragma:content-end`;)(0,o.skipNode)(),e=(0,o.currentPointer)();s(f)}}function m(e,t,...n){if(t){for(let e of Object.keys(t))if(e.toUpperCase()===`DATA-FRAGMENT`)return()=>p(n)}return()=>{(0,o.elementOpenStart)(e);let r=[];if(t)for(let e of Object.keys(t))e.toUpperCase()===`CLASSNAME`?(0,o.attr)(`class`,t[e]):/^on[A-Z]/.test(e)?r.push(e):(0,o.attr)(e,t[e]);(0,o.elementOpenEnd)(e);let i=(0,o.currentElement)();if(!i[u]){for(let e of r)i.addEventListener(e.substr(2).toLowerCase(),t[e]);i[u]=!0}p(n),(0,o.elementClose)(e)}}function h(e,t){customElements.get(e)||customElements.define(e,t)}function g(...e){for(let t of e)h(l.get(t,`tag`),t)}function _(e){return function(...t){for(let n of t)h(`${e}${l.get(n,`tag`).substr(3)}`,n)}}var v=Symbol(`Component Attribute Bindings`),y=Symbol(`Component Class Bindings`),b=Symbol(`Component Style Bindings`),x={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){let e=this;for(let t of Object.keys(e[v]||{}))e.setAttribute(t,e[v][t]);for(let t of Object.keys(e[b]||{}))e.style[t]=e[b][t];for(let t of e.__managedClasses)e.classList.remove(t);for(let t of(e[y]||[]).filter(Boolean))e.__managedClasses.add(t),e.classList.add(t);for(let t of(e.getAttribute(`classname`)||``).split(/\w+/).filter(Boolean))e.classList.add(t)},__updateChildQueries(e){let t=this;for(let n of l.get(t.constructor,`childQueries`,[]))if(!e||e&&n.refresh){let e=n.all?t.querySelectorAll:t.querySelector;t[n.key]=e.call(t,n.selector)}},__gatherChildren(){let e=this,t=Array.from(e.childNodes),n=null,r=t.length;for(let e=0;e<t.length;e+=1){let i=t[e];i instanceof Comment&&(i.data===`idom-pragma:content-begin`?n=e+1:i.data===`idom-pragma:content-end`&&(r=e-1))}if(n===null)for(let e of t)e.parentNode.removeChild(e);else t=t.slice(n,r);l.has(e.constructor,`contentProp`)&&(e[l.get(e.constructor,`contentProp`)]=t)},__startMutObs(){let e=this;e.__observer||=new MutationObserver(()=>{e.contentChangedCallback&&e.contentChangedCallback(),e.__gatherChildren(),e.update()}),e.__observer.observe(e,{childList:!0})},__stopMutObs(){let e=this;e.__observer&&e.__observer.disconnect()},__doRender(){let e=this;e.__stopMutObs(),(0,o.patch)(e,e.render()),e.__startMutObs()},update(){let 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){let r=this,i=n===``||n;i!==t&&(r.__cbAttributeChanged&&r.__cbAttributeChanged(e,r[e],i),e!==`style`&&(r[e]=i),r.__initialized&&r.update())},connectedCallback(){let e=this;e.__cbConnected&&e.__cbConnected();let t=l.get(e.constructor,`eventListeners`,[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(let[,n]of t)e[n]=e[n].bind(e);e.__initialized=!0}for(let[n,r]of t)e.addEventListener(n,e[r]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){let e=this;e.__cbDisconnected&&e.__cbDisconnected();for(let[t,n]of l.get(e.constructor,`eventListeners`,[]))e.removeEventListener(t,e[n]);e.__stopMutObs()}};function S(e){return t=>{l.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},x)}}function C(){return(e,t)=>{l.add(e.constructor,{contentProp:t})}}function w(e){return(t,n)=>{Object.defineProperty(t,n,{get(){return Object.defineProperty(this,n,{value:{dispatch:t=>{let r=new CustomEvent(e||n,{detail:t});return this.dispatchEvent(r),r}}}),this[n]},configurable:!0})}}function T(e){return(t,n)=>{let r=l.get(t.constructor,`eventListeners`,[]);r.push([e,n]),l.add(t.constructor,{eventListeners:r})}}function E(e){return(t,n)=>{let r=t.constructor,i=n.toLowerCase();if(r.observedAttributes=r.observedAttributes||[`classname`,`className`,`style`],r.observedAttributes.push(n),r.observedAttributes.push(i),i!==n&&Object.defineProperty(t,n,{get(){return this[i]},set(e){this[i]=e}}),e){let r=Symbol.for(n);Object.defineProperty(t,i,{get(){return this[r]},set(t){let n=t;n=e===Boolean&&typeof t==`string`&&t.toLowerCase()===`false`?!1:e(t),this[r]=n}})}}}function D(e,t,n){return(r,i)=>{let a=l.get(r.constructor,`childQueries`,[]);a.push({key:i,selector:e,all:n,refresh:t.refresh}),l.add(r.constructor,{childQueries:a})}}function O(e,t={}){return D(e,t)}function k(e,t={}){return D(e,t,!0)}function A(){return(e,t)=>{let n=Symbol(t);Object.defineProperties(e,{[n]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[n]},set(e){this[n]!==e&&(this[n]=e,this.update())}}})}}var j=function(e){return 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.CER=`application/pkix-cert`,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}({});function M(e,t){if(typeof Reflect==`object`&&typeof Reflect.metadata==`function`)return Reflect.metadata(e,t)}function N(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var P=`sps-file-upload`,F=class extends HTMLElement{static{this.displayName=P}static{this.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>`}}}get[y](){return[P,this.active&&`${P}--active`,this.error&&`${P}--error`,!this.shown&&`${P}--hidden`,this.mini&&`${P}--mini`,this.constrainContentWidth&&`${P}--constrained-content-width`]}constructor(){super(),this.shown=!0,this.files=[],this.acceptMIMETypes=new Set,this.active=!1,this.error=!1,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)}connectedCallback(){this.description=this.description||(this.multiple?`Files`:`File`),this.acceptExtensions&&this.processAcceptExtensions(this.acceptExtensions),this.maxSize&&this.parseAndValidateMaxSize(this.maxSize)}attributeChangedCallback(e,t,n){e===`acceptExtensions`&&this.processAcceptExtensions(n),e===`maxSize`&&this.parseAndValidateMaxSize(n)}dismiss(){this.dismissable&&(this.shown=!1,this.update(),this.dismissal.dispatch())}show(){this.dismissable&&(this.shown=!0,this.update())}render(){let e=this.error?t.SpsIcon.EXCLAMATION_CIRCLE:t.SpsIcon.UPLOAD_CLOUD,n=(this.multiple?r.i18nWoodland.t(`fileUpload.instructions.other`,{defaultValue:`Drag and drop your files here or |browse for files| on your desktop.`}):r.i18nWoodland.t(`fileUpload.instructions.one`,{defaultValue:`Drag and drop your file here or |browse for a file| on your desktop.`})).split(`|`);return m(`div`,{"data-fragment":!0},m(`div`,{className:`${P}__content`},this.processing?m(`div`,{"data-fragment":!0},m(`i`,{className:`sps-spinner sps-spinner--medium`,"aria-hidden":`true`}),m(`div`,{className:`${P}__instructions`},r.i18nWoodland.t(`fileUpload.processing`,{defaultValue:`Processing Upload...`}))):m(`div`,{"data-fragment":!0},m(`i`,{className:`sps-icon sps-icon-${e} ${P}__icon-primary`,"aria-hidden":`true`}),m(`div`,{className:`${P}__title`},this.error?m(`div`,{"data-fragment":!0},r.i18nWoodland.t(this.namesOfUnsupportedFiles.length>1?`fileUpload.cancelled_plural`:`fileUpload.cancelled`,{defaultValue:this.namesOfUnsupportedFiles.length>1?`File Upload(s) Failed`:`File Upload Failed`})):m(`div`,{"data-fragment":!0},r.i18nWoodland.t(`fileUpload.title`,{description:this.description,defaultValue:`Upload Your ${this.description}`}))),this.error?m(`div`,{className:`${P}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((e,t)=>{let n=Math.floor(e.length/2);return m(`div`,{className:`${P}__errored-filename`,key:e},m(`span`,{className:`${P}__errored-filename-segment`},e.substr(0,n)),m(`div`,{className:`${P}__errored-filename-segment`},m(`span`,null,e.substr(n))),t<this.namesOfUnsupportedFiles.length-1?`,`:``)}))):m(`span`,null),m(`div`,{className:`${P}__instructions`},m(`div`,{"data-fragment":!0},m(`span`,null,n[0]),m(`a`,{href:``,onClick:this.handleBrowseLinkClick},n[1]),m(`span`,null,n[2]))),m(`div`,{className:`${P}__requirements`},this.acceptExtensions?m(`span`,null,`(`,` `,r.i18nWoodland.t(`fileUpload.acceptedTypes`,{fileTypes:this.acceptExtensionsDescription,defaultValue:`${this.acceptExtensionsDescription} format accepted`}),` `,`)`):``,this.maxSize?m(`span`,null,`(`,` `,r.i18nWoodland.t(`fileUpload.maximumSize`,{size:this.maxSize,defaultValue:`${this.maxSize} maximum`}),` `,`)`):``,this.customRequirement?m(`span`,null,` `,this.customRequirement,` `):``),this.downloadLabel&&m(`div`,{className:`sps-button sps-button--link ${P}__download-button`,onClick:this.handleDownloadButtonClick},m(`button`,{type:`button`},m(`i`,{className:`sps-icon sps-icon-download-cloud`,"aria-hidden":`true`}),` `,this.downloadLabel)))),this.dismissable&&!this.processing&&m(`div`,{className:`sps-button sps-button--icon ${P}__close-button`,onClick:this.dismiss},m(`button`,{type:`button`,title:r.i18nWoodland.t(`fileUpload.close`,{defaultValue:`Close`})},m(`i`,{className:`sps-icon sps-icon-x`,"aria-hidden":`true`}))),m(`form`,null,m(`input`,{type:`file`,accept:this.accept||`*/*`,multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(e){try{this.maxSizeBytes=(0,n.parseFileSize)(e)}catch{throw Error(`Could not parse "${e}" as a file size.`)}}processAcceptExtensions(e){let t=(Array.isArray(e)?e:e.trim().split(/\s?,\s?/)).map(e=>e.replace(/^\./,``)),n=t.map(e=>`.${e}`.toLowerCase());this.acceptExtensionsDescription=n.map((e,t)=>t>0&&t===n.length-1?`or ${e}`:e).join(n.length>2?`, `:` `),this.acceptMIMETypes.clear();for(let e of t)for(let t of j[e.toUpperCase()].split(`,`))this.acceptMIMETypes.add(t);this.accept=n.concat(Array.from(this.acceptMIMETypes)).join(`,`)}selectFiles(e){this.namesOfUnsupportedFiles=[];let t=Array.from(e);for(let e of t)this.acceptExtensions&&!this.acceptMIMETypes.has(e.type)&&this.namesOfUnsupportedFiles.push(e.name),this.maxSize&&e.size>this.maxSizeBytes&&!this.namesOfUnsupportedFiles.includes(e.name)&&this.namesOfUnsupportedFiles.push(e.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=t,this.selection.dispatch(t))}handleDragOver(e){e.preventDefault(),e.stopPropagation()}handleDragEnter(e){e.preventDefault(),this.active=!0,this.error=!1,this.update()}handleDragLeave(e){e.preventDefault(),this.active=!1,this.update()}handleDrop(e){e.preventDefault(),e.stopPropagation(),this.active=!1,e.dataTransfer.items?this.selectFiles(Array.from(e.dataTransfer.items).map(e=>e.getAsFile())):this.selectFiles(e.dataTransfer.files),this.update()}handleBrowseLinkClick(e){e.preventDefault(),this.error=!1,this.update(),this.fileInput.click()}handleDownloadButtonClick(){this.download.dispatch()}handleFileInputChange(e){e.stopPropagation(),this.selectFiles(e.target.files)}};N([E(),M(`design:type`,Object)],F.prototype,`description`,void 0),N([E(Boolean),M(`design:type`,Boolean)],F.prototype,`multiple`,void 0),N([E(Boolean),M(`design:type`,Object)],F.prototype,`shown`,void 0),N([E(Boolean),M(`design:type`,Boolean)],F.prototype,`dismissable`,void 0),N([E(Boolean),M(`design:type`,Boolean)],F.prototype,`processing`,void 0),N([E(Boolean),M(`design:type`,Boolean)],F.prototype,`mini`,void 0),N([E(Boolean),M(`design:type`,Boolean)],F.prototype,`constrainContentWidth`,void 0),N([E(),M(`design:type`,String)],F.prototype,`downloadLabel`,void 0),N([E(),M(`design:type`,Object)],F.prototype,`acceptExtensions`,void 0),N([E(),M(`design:type`,String)],F.prototype,`maxSize`,void 0),N([E(),M(`design:type`,String)],F.prototype,`customRequirement`,void 0),N([w(),M(`design:type`,Object)],F.prototype,`selection`,void 0),N([w(),M(`design:type`,Object)],F.prototype,`dismissal`,void 0),N([w(),M(`design:type`,Object)],F.prototype,`download`,void 0),N([O(`input[type='file']`),M(`design:type`,typeof HTMLInputElement>`u`?Object:HTMLInputElement)],F.prototype,`fileInput`,void 0),N([T(`dragover`),M(`design:type`,Function),M(`design:paramtypes`,[typeof Event>`u`?Object:Event]),M(`design:returntype`,void 0)],F.prototype,`handleDragOver`,null),N([T(`dragenter`),M(`design:type`,Function),M(`design:paramtypes`,[typeof Event>`u`?Object:Event]),M(`design:returntype`,void 0)],F.prototype,`handleDragEnter`,null),N([T(`dragleave`),M(`design:type`,Function),M(`design:paramtypes`,[typeof Event>`u`?Object:Event]),M(`design:returntype`,void 0)],F.prototype,`handleDragLeave`,null),N([T(`drop`),M(`design:type`,Function),M(`design:paramtypes`,[Object]),M(`design:returntype`,void 0)],F.prototype,`handleDrop`,null),F=N([S({tag:P}),M(`design:paramtypes`,[])],F);var ee={basic:{label:`Basic File Upload`,description:n.code`
|
|
4
4
|
<p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
|
|
5
|
-
`,examples:{single:{description
|
|
5
|
+
`,examples:{single:{description:`<p>Single file upload</p>`,react:n.code`
|
|
6
6
|
function Component() {
|
|
7
7
|
const ref = React.useRef()
|
|
8
8
|
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</div>
|
|
26
26
|
)
|
|
27
27
|
}
|
|
28
|
-
`},multiple:{description
|
|
28
|
+
`},multiple:{description:`<p>Multiple file upload</p>`,react:n.code`
|
|
29
29
|
function Component() {
|
|
30
30
|
const ref = React.useRef()
|
|
31
31
|
|
|
@@ -48,9 +48,9 @@
|
|
|
48
48
|
</div>
|
|
49
49
|
)
|
|
50
50
|
}
|
|
51
|
-
`}}},restrictions:{label
|
|
51
|
+
`}}},restrictions:{label:`Restrictions`,description:n.code`
|
|
52
52
|
<p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
|
|
53
|
-
`,examples:{size:{description
|
|
53
|
+
`,examples:{size:{description:`<p>Maximum size</p>`,react:n.code`
|
|
54
54
|
function Component() {
|
|
55
55
|
const ref = React.useRef()
|
|
56
56
|
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
</div>
|
|
74
74
|
)
|
|
75
75
|
}
|
|
76
|
-
`},type:{description
|
|
76
|
+
`},type:{description:`<p>File type whitelist</p>`,react:n.code`
|
|
77
77
|
function Component() {
|
|
78
78
|
const ref = React.useRef()
|
|
79
79
|
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
</div>
|
|
102
102
|
)
|
|
103
103
|
}
|
|
104
|
-
`},both:{description
|
|
104
|
+
`},both:{description:`<p>Both restrictions</p>`,react:n.code`
|
|
105
105
|
function Component() {
|
|
106
106
|
const ref = React.useRef()
|
|
107
107
|
|
|
@@ -130,10 +130,10 @@
|
|
|
130
130
|
</div>
|
|
131
131
|
)
|
|
132
132
|
}
|
|
133
|
-
`}}},dismissable:{label
|
|
133
|
+
`}}},dismissable:{label:`Dismissable`,description:n.code`
|
|
134
134
|
<p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
|
|
135
135
|
show it again programmatically if you need to.</p>
|
|
136
|
-
`,examples:{dismissable:{react:
|
|
136
|
+
`,examples:{dismissable:{react:n.code`
|
|
137
137
|
function Component() {
|
|
138
138
|
const [showFileUpload, setShowFileUpload] = React.useState(true)
|
|
139
139
|
const ref = React.useRef()
|
|
@@ -166,10 +166,10 @@
|
|
|
166
166
|
</div>
|
|
167
167
|
)
|
|
168
168
|
}
|
|
169
|
-
`}}},downloadButton:{label
|
|
169
|
+
`}}},downloadButton:{label:`Download Button`,description:n.code`
|
|
170
170
|
<p>You can optionally provide a button to download a file. Typically this will be a template for
|
|
171
171
|
whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
|
|
172
|
-
`,examples:{downloadButton:{react:
|
|
172
|
+
`,examples:{downloadButton:{react:n.code`
|
|
173
173
|
function Component() {
|
|
174
174
|
const ref = React.useRef()
|
|
175
175
|
|
|
@@ -197,10 +197,10 @@
|
|
|
197
197
|
</div>
|
|
198
198
|
)
|
|
199
199
|
}
|
|
200
|
-
`}}},mini:{label
|
|
200
|
+
`}}},mini:{label:`Mini File Upload`,description:n.code`
|
|
201
201
|
<p>When the file upload component is to be placed in a small container,
|
|
202
202
|
it should be marked as a mini file upload so that everything fits.</p>
|
|
203
|
-
`,examples:{single:{react:
|
|
203
|
+
`,examples:{single:{react:n.code`
|
|
204
204
|
function Component() {
|
|
205
205
|
const ref = React.useRef()
|
|
206
206
|
|
|
@@ -223,11 +223,11 @@
|
|
|
223
223
|
</div>
|
|
224
224
|
)
|
|
225
225
|
}
|
|
226
|
-
`}}},constrainContentWidth:{label
|
|
226
|
+
`}}},constrainContentWidth:{label:`Constrain Content Width`,description:n.code`
|
|
227
227
|
<p>If this prop is provided, the content will be restricted to 50% of
|
|
228
228
|
the overall width of the component. Consult your product designer if
|
|
229
229
|
you're not sure whether to use this variant.</p>
|
|
230
|
-
`,examples:{constrainContentWidth:{react:
|
|
230
|
+
`,examples:{constrainContentWidth:{react:n.code`
|
|
231
231
|
function Component() {
|
|
232
232
|
const ref = React.useRef()
|
|
233
233
|
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
</div>
|
|
251
251
|
)
|
|
252
252
|
}
|
|
253
|
-
`}}}}
|
|
253
|
+
`}}}},I=`sps-insight-card`,L=class extends HTMLElement{constructor(...e){super(...e),this.kind=t.SpsInsightCardKind.GENERAL}static{this.displayName=I}static{this.props={icon:`SpsIcon`,kind:`SpsInsightCardKind`,title:`string`,metric:`number`,partnerCount:`number`,totalPartners:`number`,secondary:`boolean`}}get[y](){return[I,`${I}--${this.kind}`,this.detail&&this.detail.children.length?`${I}--has-detail`:null]}render(){let e=m(`div`,{className:`${I}__metric-count`},this.metric),n=m(`div`,{className:`${I}__description`},m(`div`,{className:`${I}__title`,style:{"-webkit-box-orient":`vertical`}},this.title),m(`div`,{className:`${I}__detail`},this.content)),i=this.partnercount,a=this.totalpartners,[o,s,c]=(i?r.i18nWoodland.t(`insightCard.partnerCount`,{count:i,total:a,defaultValue:`${i} |of| ${a}`}):``).split(`|`);return m(`div`,{"data-fragment":!0},m(`div`,{className:`${I}__body`},this.icon?m(`i`,{className:`sps-icon sps-icon-${this.icon}`}):m(`i`,{className:`sps-icon sps-icon-${t.SpsInsightCardIcons[this.kind]}`}),e,n),i&&m(`div`,{className:`${I}__partner-count`},i===a?m(`div`,null,r.i18nWoodland.t(`insightCard.all`,{defaultValue:`ALL`})):m(`div`,{"data-fragment":!0},m(`div`,null,o),m(`div`,null,s),m(`div`,null,c)),m(`div`,{className:`${I}__partners-text`},r.i18nWoodland.t(`insightCard.partners`,{defaultValue:`PARTNERS`}))))}};N([E(),M(`design:type`,t.SpsIcon===void 0?Object:t.SpsIcon)],L.prototype,`icon`,void 0),N([E(),M(`design:type`,Object)],L.prototype,`kind`,void 0),N([E(),M(`design:type`,String)],L.prototype,`title`,void 0),N([E(),M(`design:type`,Number)],L.prototype,`metric`,void 0),N([E(),M(`design:type`,Number)],L.prototype,`partnerCount`,void 0),N([E(),M(`design:type`,Number)],L.prototype,`totalPartners`,void 0),N([E(),M(`design:type`,Boolean)],L.prototype,`secondary`,void 0),N([C(),M(`design:type`,Object)],L.prototype,`content`,void 0),N([O(`.${I}__detail`),M(`design:type`,Object)],L.prototype,`detail`,void 0),L=N([S({tag:I})],L);var R=`sps-insights`,z=class extends HTMLElement{static{this.displayName=R}static{this.props={}}get[y](){return[R,this.showAdditionalInsights&&`${R}--show-additional`,this.details&&Array.from(this.details).every(e=>!e.textContent)?`${R}--no-details`:null,this.content.length===6?`${R}--break-4`:null,this.content.length===7?`${R}--break-5`:null,this.content.length===8?`${R}--break-5`:null]}constructor(){super(),this.content=[],this.showAdditionalInsights=!1,this.toggleAdditionalInsights=this.toggleAdditionalInsights.bind(this)}toggleAdditionalInsights(){this.showAdditionalInsights=!this.showAdditionalInsights,this.update()}render(){return m(`div`,{"data-fragment":!0},this.content,this.content.length>10&&m(`div`,{className:`sps-button sps-button--link`,onClick:this.toggleAdditionalInsights},m(`button`,{type:`button`},this.showAdditionalInsights?r.i18nWoodland.t(`insights.hideAdditionalInsights`,{defaultValue:`Hide Additional Insights`}):r.i18nWoodland.t(`insights.showAdditionalInsights`,{defaultValue:`Show Additional Insights`}))))}};N([C(),M(`design:type`,Object)],z.prototype,`content`,void 0),N([k(`.sps-insight-card__detail`),M(`design:type`,typeof NodeList>`u`?Object:NodeList)],z.prototype,`details`,void 0),z=N([S({tag:R}),M(`design:paramtypes`,[])],z);var B={basic:{label:`Basic Insight Cards`,examples:{basic:{jsx:n.code`
|
|
254
254
|
<sps-insights>
|
|
255
255
|
<sps-insight-card kind="general"
|
|
256
256
|
metric="1234"
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
title="Insight Card Title"
|
|
274
274
|
></sps-insight-card>
|
|
275
275
|
</sps-insights>
|
|
276
|
-
`}}},details:{label
|
|
276
|
+
`}}},details:{label:`With Details`,examples:{details:{jsx:n.code`
|
|
277
277
|
<sps-insights>
|
|
278
278
|
<sps-insight-card kind="general"
|
|
279
279
|
metric="1234"
|
|
@@ -318,7 +318,7 @@
|
|
|
318
318
|
<span className="gray600 font-weight-bold">Detail:</span> 792 units
|
|
319
319
|
</sps-insight-card>
|
|
320
320
|
</sps-insights>
|
|
321
|
-
`}}},partner_count:{label
|
|
321
|
+
`}}},partner_count:{label:`Partner Count`,examples:{partner_count:{jsx:n.code`
|
|
322
322
|
<sps-insights>
|
|
323
323
|
<sps-insight-card kind="general"
|
|
324
324
|
metric="1234"
|
|
@@ -351,7 +351,7 @@
|
|
|
351
351
|
totalPartners="250"
|
|
352
352
|
></sps-insight-card>
|
|
353
353
|
</sps-insights>
|
|
354
|
-
`}}},expansion:{label
|
|
354
|
+
`}}},expansion:{label:`10+ Insight Cards`,examples:{expansion:{jsx:n.code`
|
|
355
355
|
<sps-insights>
|
|
356
356
|
<sps-insight-card kind="general"
|
|
357
357
|
metric="1234"
|
|
@@ -460,10 +460,10 @@
|
|
|
460
460
|
<span className="gray600 font-weight-bold">Detail:</span> 792 units
|
|
461
461
|
</sps-insight-card>
|
|
462
462
|
</sps-insights>
|
|
463
|
-
`}}},events:{label
|
|
463
|
+
`}}},events:{label:`Adding a click handler`,description:n.code`
|
|
464
464
|
<p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
|
|
465
465
|
Here is how to do it:</p>
|
|
466
|
-
`,examples:{events:{react:
|
|
466
|
+
`,examples:{events:{react:n.code`
|
|
467
467
|
function Component() {
|
|
468
468
|
function handleClick() {
|
|
469
469
|
window.alert("Insight card clicked");
|
|
@@ -495,7 +495,7 @@
|
|
|
495
495
|
</sps-insights>
|
|
496
496
|
);
|
|
497
497
|
}
|
|
498
|
-
`}}},alternateIcon:{label
|
|
498
|
+
`}}},alternateIcon:{label:`Using alternate icons`,examples:{basic:{react:n.code`
|
|
499
499
|
function DemoComponent() {
|
|
500
500
|
return (
|
|
501
501
|
<sps-insights>
|
|
@@ -532,9 +532,9 @@
|
|
|
532
532
|
</sps-insights>
|
|
533
533
|
)
|
|
534
534
|
}
|
|
535
|
-
`}}}}
|
|
535
|
+
`}}}},V=class extends HTMLElement{constructor(...e){super(...e),this.active=!1,this.label=``,this.tag=``}static{this.displayName=`sps-nav-tab`}static{this.props={active:`boolean`,label:`string`,icon:`SpsIcon`,tag:`string`,href:`string`,target:`string`}}get[y](){return[`sps-tabbed-nav__nav-item`,this.active&&`sps-tabbed-nav__nav-item--active`]}render(){return m(`a`,{href:this.href,target:this.target,className:`sps-tabbed-nav__nav-item-link`,tabIndex:0},this.icon&&m(`i`,{className:`sps-icon sps-icon-${this.icon}`}),this.label&&m(`span`,null,this.label),this.tag&&m(`span`,{className:`sps-tag sps-tag--default`},this.tag))}};N([E(),M(`design:type`,Object)],V.prototype,`active`,void 0),N([E(),M(`design:type`,Object)],V.prototype,`label`,void 0),N([E(),M(`design:type`,t.SpsIcon===void 0?Object:t.SpsIcon)],V.prototype,`icon`,void 0),N([E(),M(`design:type`,Object)],V.prototype,`tag`,void 0),N([E(),M(`design:type`,String)],V.prototype,`href`,void 0),N([E(),M(`design:type`,String)],V.prototype,`target`,void 0),V=N([S({tag:`sps-nav-tab`})],V);var H=class extends HTMLElement{constructor(...e){super(...e),this.content=[]}static{this.displayName=`sps-nav-tab-set`}static{this.props={}}render(){return m(`nav`,{className:`sps-tabbed-nav`},this.content)}};N([C(),M(`design:type`,Object)],H.prototype,`content`,void 0),H=N([S({tag:`sps-nav-tab-set`})],H);var U={basic:{label:`Basic Navigation Tabs`,description:n.code`
|
|
536
536
|
<p>Navigation tabs native web component</p>
|
|
537
|
-
`,examples:{basic:{react:
|
|
537
|
+
`,examples:{basic:{react:n.code`
|
|
538
538
|
function DemoComponent() {
|
|
539
539
|
const tabs = [
|
|
540
540
|
{ label: "Tab A", icon: "chart-line" },
|
|
@@ -559,14 +559,14 @@
|
|
|
559
559
|
</sps-nav-tab-set>
|
|
560
560
|
)
|
|
561
561
|
}
|
|
562
|
-
`}}}}
|
|
562
|
+
`}}}},W=function(e){return e.FIT=`fit`,e.FILL=`fill`,e}({}),G=`sps-photo`,K=class extends HTMLElement{constructor(...e){super(...e),this.mode=`fill`}static{this.displayName=G}static{this.props={src:`string`,altText:`string`,mode:`SpsPhotoDisplayMode`,placeholderIcon:`SpsIcon`}}get image(){return this.imageInternal}set image(e){this.imageInternal=e,e&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{let t=e.getBoundingClientRect();if(t.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let e=t.width/t.height>1;this.fitWidth=e===(this.mode===`fit`)}},1e3/60))}get[y](){return[G,this.fitWidth?`${G}--fit-width`:`${G}--fit-height`,this.placeholderIcon&&`${G}--placeholder`]}get[b](){return{fontSize:`${this.width*.05}rem`,width:`${this.width}rem`,height:`${.75*this.width}rem`}}connectedCallback(){this.waitForWidthInterval=window.setInterval(()=>{let e=this.getBoundingClientRect();e.width&&(this.setWidth(e.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?m(`img`,{src:this.src,alt:this.altText}):m(`span`,null):m(`i`,{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(e){if(e&&!this.width){let t=document.body.parentElement.style.fontSize||`16px`,n=Number(t.substr(0,t.length-2));this.width=e/n}}};N([E(),M(`design:type`,String)],K.prototype,`src`,void 0),N([E(),M(`design:type`,String)],K.prototype,`altText`,void 0),N([E(),M(`design:type`,Object)],K.prototype,`mode`,void 0),N([E(),M(`design:type`,t.SpsIcon===void 0?Object:t.SpsIcon)],K.prototype,`placeholderIcon`,void 0),N([A(),M(`design:type`,Number)],K.prototype,`width`,void 0),N([A(),M(`design:type`,Object)],K.prototype,`fitWidth`,void 0),N([O(`img`,{refresh:!0}),M(`design:type`,Object),M(`design:paramtypes`,[])],K.prototype,`image`,null),K=N([S({tag:G})],K);var q={sizing:{label:`Sizing`,description:n.code`
|
|
563
563
|
<p>
|
|
564
564
|
Photos are block elements, so a photo fills its container's width unless
|
|
565
565
|
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
566
566
|
photos have been placed in cards which have different widths in the 12
|
|
567
567
|
column grid.
|
|
568
568
|
</p>
|
|
569
|
-
`,examples:{basic:{jsx:
|
|
569
|
+
`,examples:{basic:{jsx:n.code`
|
|
570
570
|
<div className="sfg-row">
|
|
571
571
|
<div className="sfg-col-2">
|
|
572
572
|
<sps-card>
|
|
@@ -584,7 +584,7 @@
|
|
|
584
584
|
</sps-card>
|
|
585
585
|
</div>
|
|
586
586
|
</div>
|
|
587
|
-
`}}},displayMode:{label
|
|
587
|
+
`}}},displayMode:{label:`Fill vs. Fit`,description:n.code`
|
|
588
588
|
<p>
|
|
589
589
|
There are two display modes available:
|
|
590
590
|
<ul>
|
|
@@ -592,7 +592,7 @@
|
|
|
592
592
|
<li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
|
|
593
593
|
</ul>
|
|
594
594
|
</p>
|
|
595
|
-
`,examples:{landscape:{description
|
|
595
|
+
`,examples:{landscape:{description:`<p>Landscape oriented photo (container outline added for illustrative purposes)</p>`,jsx:n.code`
|
|
596
596
|
<div className="sfg-row">
|
|
597
597
|
<div className="sfg-col-4">
|
|
598
598
|
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
@@ -601,7 +601,7 @@
|
|
|
601
601
|
<sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
|
|
602
602
|
</div>
|
|
603
603
|
</div>
|
|
604
|
-
`},portrait:{description
|
|
604
|
+
`},portrait:{description:`<p>Portrait oriented photo (container outline added for illustrative purposes)</p>`,jsx:n.code`
|
|
605
605
|
<div className="sfg-row">
|
|
606
606
|
<div className="sfg-col-4">
|
|
607
607
|
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
<sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
|
|
611
611
|
</div>
|
|
612
612
|
</div>
|
|
613
|
-
`}}},placeholder:{label
|
|
613
|
+
`}}},placeholder:{label:`Placeholders`,description:n.code`
|
|
614
614
|
<p>
|
|
615
615
|
When an image is not provided for a particular use case (such as a user avatar,
|
|
616
616
|
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
@@ -618,34 +618,34 @@
|
|
|
618
618
|
The placeholder's icon, selected from our SPS icon set, should represent the
|
|
619
619
|
type of image it is substituting for.
|
|
620
620
|
</p>
|
|
621
|
-
`,examples:{general:{description
|
|
621
|
+
`,examples:{general:{description:`<p>General Photo</p>`,jsx:n.code`
|
|
622
622
|
<div className="sfg-row">
|
|
623
623
|
<div className="sfg-col-3">
|
|
624
624
|
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
625
625
|
</div>
|
|
626
626
|
</div>
|
|
627
|
-
`},photoAlt:{description
|
|
627
|
+
`},photoAlt:{description:`<p>Photo Alt</p>`,jsx:n.code`
|
|
628
628
|
<div className="sfg-row">
|
|
629
629
|
<div className="sfg-col-3">
|
|
630
630
|
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
631
631
|
</div>
|
|
632
632
|
</div>
|
|
633
|
-
`},user:{description
|
|
633
|
+
`},user:{description:`<p>User / Single Person</p>`,jsx:n.code`
|
|
634
634
|
<div className="sfg-row">
|
|
635
635
|
<div className="sfg-col-3">
|
|
636
636
|
<sps-photo placeholderIcon="user"></sps-photo>
|
|
637
637
|
</div>
|
|
638
638
|
</div>
|
|
639
|
-
`},group:{description
|
|
639
|
+
`},group:{description:`<p>Group / Multiple People</p>`,jsx:n.code`
|
|
640
640
|
<div className="sfg-row">
|
|
641
641
|
<div className="sfg-col-3">
|
|
642
642
|
<sps-photo placeholderIcon="group"></sps-photo>
|
|
643
643
|
</div>
|
|
644
644
|
</div>
|
|
645
|
-
`},company:{description
|
|
645
|
+
`},company:{description:`<p>Company / Building</p>`,jsx:n.code`
|
|
646
646
|
<div className="sfg-row">
|
|
647
647
|
<div className="sfg-col-3">
|
|
648
648
|
<sps-photo placeholderIcon="building"></sps-photo>
|
|
649
649
|
</div>
|
|
650
650
|
</div>
|
|
651
|
-
`}}}};
|
|
651
|
+
`}}}};e.AttrBindings=v,e.ClassBindings=y,e.Component=S,e.Content=C,e.EventDispatcher=w,e.EventListener=T,e.MANIFEST=a,e.MIMEType=j,e.Prop=E,e.QuerySelector=O,e.QuerySelectorAll=k,Object.defineProperty(e,"SpsFileUploadComponent",{enumerable:!0,get:function(){return F}}),e.SpsFileUploadExamples=ee,Object.defineProperty(e,"SpsInsightCardComponent",{enumerable:!0,get:function(){return L}}),e.SpsInsightCardExamples=B,Object.defineProperty(e,"SpsInsightsComponent",{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,"SpsNavTabComponent",{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,"SpsNavTabSetComponent",{enumerable:!0,get:function(){return H}}),e.SpsNavTabsExamples=U,Object.defineProperty(e,"SpsPhotoComponent",{enumerable:!0,get:function(){return K}}),e.SpsPhotoDisplayMode=W,e.SpsPhotoExamples=q,e.StyleBindings=b,e.Watch=A,e.h=m,e.namespaceOverrideRegistrar=_,e.register=g});
|
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.56.
|
|
4
|
+
"version": "8.56.3",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-web-components",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { Dispatcher } from "../../decorators/index";
|
|
2
|
+
import { ClassBindings } from "../../decorators/index";
|
|
2
3
|
export declare class SpsFileUploadComponent extends HTMLElement {
|
|
3
4
|
static readonly displayName = "sps-file-upload";
|
|
4
5
|
static readonly props: {
|