@spscommerce/ds-web-components 8.32.2 → 8.33.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/index.js +1082 -1101
- package/dist/lib/index.umd.cjs +50 -50
- package/dist/package.json +1 -1
- package/lib/index.js +1082 -1101
- package/lib/index.umd.cjs +50 -50
- package/package.json +4 -4
package/dist/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(i,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("@spscommerce/ds-shared"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@spscommerce/ds-shared","@spscommerce/utils"],k):(i=typeof globalThis<"u"?globalThis:i||self,k(i.DSWebComponents={},i.dsShared,i.utils))})(this,function(i,k,f){"use strict";const Ke={};var g={},_e;function Qe(){if(_e)return g;_e=1,Object.defineProperty(g,"__esModule",{value:!0});/**
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
4
4
|
*
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
14
|
* See the License for the specific language governing permissions and
|
|
15
15
|
* limitations under the License.
|
|
16
|
-
*/var
|
|
16
|
+
*/var e={default:"__default"};/**
|
|
17
17
|
* @license
|
|
18
18
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
19
19
|
*
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
29
29
|
* See the License for the specific language governing permissions and
|
|
30
30
|
* limitations under the License.
|
|
31
|
-
*/var
|
|
31
|
+
*/var t=Object.prototype.hasOwnProperty;function o(){}o.prototype=Object.create(null);function l(n,s){return t.call(n,s)}function a(){return new o}function p(n,s){for(;n.length>s;)n.pop()}/**
|
|
32
32
|
* @license
|
|
33
33
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
34
34
|
*
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
44
44
|
* See the License for the specific language governing permissions and
|
|
45
45
|
* limitations under the License.
|
|
46
|
-
*/function
|
|
46
|
+
*/function u(n){if(n.lastIndexOf("xml:",0)===0)return"http://www.w3.org/XML/1998/namespace";if(n.lastIndexOf("xlink:",0)===0)return"http://www.w3.org/1999/xlink"}function U(n,s,r){if(r==null)n.removeAttribute(s);else{var c=u(s);c?n.setAttributeNS(c,s,String(r)):n.setAttribute(s,String(r))}}function te(n,s,r){n[s]=r}function vt(n,s,r){s.indexOf("-")>=0?n.setProperty(s,r):n[s]=r}function Ct(n,s,r){if(typeof r=="string")n.style.cssText=r;else{n.style.cssText="";var c=n.style;for(var h in r)l(r,h)&&vt(c,h,r[h])}}function bt(n,s,r){var c=typeof r;c==="object"||c==="function"?te(n,s,r):U(n,s,r)}var X=a();X[e.default]=bt,X.style=Ct;function K(n,s,r){var c=X[s]||X[e.default];c(n,s,r)}/**
|
|
47
47
|
* @license
|
|
48
48
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
49
49
|
*
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
59
59
|
* See the License for the specific language governing permissions and
|
|
60
60
|
* limitations under the License.
|
|
61
|
-
*/var
|
|
62
|
-
`+
|
|
63
|
-
`))}}function
|
|
61
|
+
*/var Q=!1,ge=!1;function Fe(n,s){if(!s)throw new Error("Cannot call "+n+"() unless in patch.")}function wt(n,s){if(n!==s){for(var r=n,c=[];r&&r!==s;)c.push(r.nodeName.toLowerCase()),r=r.parentNode;throw new Error(`One or more tags were not closed:
|
|
62
|
+
`+c.join(`
|
|
63
|
+
`))}}function St(n){n||console.warn("patchOuter requires the node have a parent if there is a key.")}function W(n){if(Q)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(!Q)throw new Error(n+"() can only be called after calling elementOpenStart().")}function _t(){if(Q)throw new Error("elementOpenEnd() must be called after calling elementOpenStart().")}function Nt(n,s){if(n!==s)throw new Error('Received a call to close "'+s+'" but "'+n+'" was open.')}function yt(n,s){if(s!==null)throw new Error(n+"() must come before any child declarations inside the current element.")}function At(n,s,r,c){ie(n);var h=n,m=s,y=m.nextSibling===r&&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=Q;return Q=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}/**
|
|
64
64
|
* @license
|
|
65
65
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
66
66
|
*
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
76
76
|
* See the License for the specific language governing permissions and
|
|
77
77
|
* limitations under the License.
|
|
78
|
-
*/var
|
|
78
|
+
*/var Z={nodesCreated:null,nodesDeleted:null};/**
|
|
79
79
|
* @license
|
|
80
80
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
81
81
|
*
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
91
91
|
* See the License for the specific language governing permissions and
|
|
92
92
|
* limitations under the License.
|
|
93
|
-
*/var
|
|
93
|
+
*/var Ot=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(){Z.nodesCreated&&this.created.length>0&&Z.nodesCreated(this.created),Z.nodesDeleted&&this.deleted.length>0&&Z.nodesDeleted(this.deleted)},n}();/**
|
|
94
94
|
* @license
|
|
95
95
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
96
96
|
*
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
106
106
|
* See the License for the specific language governing permissions and
|
|
107
107
|
* limitations under the License.
|
|
108
|
-
*/function
|
|
108
|
+
*/function Dt(n){return n.nodeType===11||n.nodeType===9}function Ce(n){return n.nodeType===1}function Pt(n){return n.nodeType===3}function Et(n,s){for(var r=[],c=n;c!==s;){var h=c;r.push(h),c=h.parentNode}return r}var It=Node.prototype.getRootNode||function(){for(var n=this,s=n;n;)s=n,n=n.parentNode;return s};function xt(n){var s=It.call(n);return Dt(s)?s.activeElement:null}function Ft(n,s){var r=xt(n);return!r||!n.contains(r)?[]:Et(r,s)}function kt(n,s,r){for(var c=s.nextSibling,h=r;h!==null&&h!==s;){var m=h.nextSibling;n.insertBefore(h,c),h=m}}/**
|
|
109
109
|
* @license
|
|
110
110
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
111
111
|
*
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
121
121
|
* See the License for the specific language governing permissions and
|
|
122
122
|
* limitations under the License.
|
|
123
|
-
*/var
|
|
123
|
+
*/var Lt=function(){function n(s,r,c){this._attrsArr=null,this.staticsApplied=!1,this.nameOrCtor=s,this.key=r,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,r,c){var h=new Lt(s,r,c);return n.__incrementalDOMData=h,h}function H(n,s){return Le(n,s)}function Tt(n){return!!n.__incrementalDOMData}function Ut(n){return ie(n.__incrementalDOMData),H(n).key}function Le(n,s){if(n.__incrementalDOMData)return n.__incrementalDOMData;var r=Ce(n)?n.localName:n.nodeName,c=Ce(n)?n.getAttribute("key")||s:null,h=Pt(n)?n.data:void 0,m=be(n,r,c,h);return Ce(n)&&Rt(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 Rt(n,s){var r=n.attributes,c=r.length;if(c)for(var h=s.getAttrsArr(c),m=0,y=0;m<c;m+=1,y+=2){var b=r[m],A=b.name,_=b.value;h[y]=A,h[y+1]=_}}/**
|
|
124
124
|
* @license
|
|
125
125
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
126
126
|
*
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
136
136
|
* See the License for the specific language governing permissions and
|
|
137
137
|
* limitations under the License.
|
|
138
|
-
*/function
|
|
138
|
+
*/function $t(n,s){return n==="svg"?"http://www.w3.org/2000/svg":n==="math"?"http://www.w3.org/1998/Math/MathML":s==null||H(s).nameOrCtor==="foreignObject"?null:s.namespaceURI}function Bt(n,s,r,c){var h;if(typeof r=="function")h=new r;else{var m=$t(r,s);m?h=n.createElementNS(m,r):h=n.createElement(r)}return be(h,r,c),h}function jt(n){var s=n.createTextNode("");return be(s,"#text",null),s}/**
|
|
139
139
|
* @license
|
|
140
140
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
141
141
|
*
|
|
@@ -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
|
|
153
|
+
*/var q=null,C=null,N=null,z=null,ae=[],re=[];function oe(){return re}function Re(n){var s=function(r,c,h){var m=q,y=z,b=ae,A=re,_=C,E=N,F=!1,ce=!1;q=new Ot,z=r.ownerDocument,re=[],N=r.parentNode,ae=Ft(r,N),process.env.NODE_ENV!=="production"&&(F=ne(!1),ce=se(!1));try{var tn=n(r,c,h);return process.env.NODE_ENV!=="production"&&_t(),tn}finally{z=y,re=A,C=_,N=E,ae=b,q.notifyChanges(),ne(F),se(ce),q=m}};return s}var $e=Re(function(n,s,r){return C=n,Ve(),s(r),We(),process.env.NODE_ENV!=="production"&&wt(C,n),n}),zt=Re(function(n,s,r){var c={nextSibling:n},h=null,m=null;return process.env.NODE_ENV!=="production"&&(h=n.nextSibling,m=n.previousSibling),C=c,s(r),process.env.NODE_ENV!=="production"&&(St(N),At(c,C,h,m)),N&&ze(N,le(),n.nextSibling),c===C?null:C});function Be(n,s,r){var c=H(n,r);return s==c.nameOrCtor&&r==c.key}function Vt(n,s,r){if(!n)return null;if(Be(n,s,r))return n;if(r){for(;n=n.nextSibling;)if(Be(n,s,r))return n}return null}function Wt(n,s){var r;return n==="#text"?r=jt(z):r=Bt(z,N,n,s),q.markCreated(r),r}function je(n,s){var r=Vt(C,n,s),c=r||Wt(n,s);c!==C&&(ae.indexOf(c)>=0?kt(N,c,C):N.insertBefore(c,C),C=c)}function ze(n,s,r){for(var c=n,h=s;h!==r;){var m=h.nextSibling;c.removeChild(h),q.markDeleted(h),h=m}}function Ve(){N=C,C=null}function le(){return C?C.nextSibling:N.firstChild}function we(){C=le()}function We(){ze(N,le(),null),C=N,N=N.parentNode}function He(n,s){return we(),je(n,s),Ve(),N}function qe(){return process.env.NODE_ENV!=="production"&&se(!1),We(),C}function Ht(){return we(),je("#text",null),C}function qt(){return process.env.NODE_ENV!=="production"&&(Fe("currentElement",z),W("currentElement")),N}function Gt(){return process.env.NODE_ENV!=="production"&&(Fe("currentPointer",z),W("currentPointer")),le()}function Xt(){process.env.NODE_ENV!=="production"&&(yt("skip",C),se(!0)),C=N.lastChild}/**
|
|
154
154
|
* @license
|
|
155
155
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
156
156
|
*
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
166
166
|
* See the License for the specific language governing permissions and
|
|
167
167
|
* limitations under the License.
|
|
168
|
-
*/var
|
|
168
|
+
*/var Ge=3,I=a();function Kt(n,s,r){if(s.staticsApplied=!0,!(!r||!r.length)){if(s.hasEmptyAttrsArr()){for(var c=0;c<r.length;c+=2)K(n,r[c],r[c+1]);return}for(var c=0;c<r.length;c+=2)I[r[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=I[y];if(A){r[A]===b&&delete I[y];continue}h[m]=y,h[m+1]=b,m+=2}p(h,m);for(var y in I)K(n,y,r[I[y]]),delete I[y]}}function Se(n,s,r){process.env.NODE_ENV!=="production"&&(W("elementOpen"),ke("elementOpen"));var c=He(n,s),h=H(c);h.staticsApplied||Kt(c,h,r);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 E=arguments[A];if(y)b[_]=E;else if(b[_]!==E)break;var F=arguments[A+1];(y||b[_+1]!==F)&&(b[_+1]=F,K(c,E,F))}if(A<arguments.length||_<b.length){for(var ce=_;_<b.length;_+=2)I[b[_]]=b[_+1];for(_=ce;A<arguments.length;A+=2,_+=2){var E=arguments[A],F=arguments[A+1];I[E]!==F&&K(c,E,F),b[_]=E,b[_+1]=F,delete I[E]}p(b,_);for(var E in I)K(c,E,void 0),delete I[E]}return c}function Qt(n,s,r){var c=oe();process.env.NODE_ENV!=="production"&&(W("elementOpenStart"),ne(!0)),c[0]=n,c[1]=s,c[2]=r}function Zt(n){var s=oe();process.env.NODE_ENV!=="production"&&(ve("key"),ie(s)),s[1]=n}function Yt(n,s){var r=oe();process.env.NODE_ENV!=="production"&&ve("attr"),r.push(n),r.push(s)}function Jt(){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"&&W("elementClose");var s=qe();return process.env.NODE_ENV!=="production"&&Nt(H(s).nameOrCtor,n),s}function Mt(n,s,r){return Se.apply(null,arguments),Xe(n)}function en(n){process.env.NODE_ENV!=="production"&&(W("text"),ke("text"));var s=Ht(),r=H(s);if(r.text!==n){r.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}/**
|
|
169
169
|
* @license
|
|
170
170
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
171
171
|
*
|
|
@@ -180,9 +180,9 @@
|
|
|
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
|
-
*/d.applyAttr=be,d.applyProp=we,d.attributes=R,d.close=Le;var le=d.currentElement=At,ce=d.currentPointer=Ot;d.open=ke;var Tt=d.patch=De;d.patchInner=De,d.patchOuter=_t,d.skip=Dt;var pe=d.skipNode=re;d.getKey=gt,d.clearCache=Ae,d.importNode=ye,d.isDataInitialized=mt,d.notifications=j,d.symbols=ee;var Re=d.attr=Ft,Ut=d.elementClose=Ue;d.elementOpen=oe;var Rt=d.elementOpenEnd=xt,$t=d.elementOpenStart=Et;d.elementVoid=kt;var Bt=d.text=Lt;d.key=It;function $e(e){let t=ce();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),le().appendChild(t)),pe(),t}let Be=A.noI18nI18n;function jt(e){Be=e}function zt(){return Be}const E=Symbol("ComponentMetadata"),b=Object.freeze({has(e,t){return!!(e[E]&&Object.prototype.hasOwnProperty.call(e[E],t))},add(e,t){e[E]?Object.assign(e[E],t):e[E]=t},get(e,t,n){return e[E]&&e[E][t]||n}}),je=Symbol("ds-web-components:pragma:listeners-attached"),ze="idom-pragma:content-begin",de="idom-pragma:content-end";function he(e){for(const t of e)if(typeof t=="function")t();else if(typeof t=="string")Bt(t);else if(t instanceof Set)he(Array.from(t));else if(Array.isArray(t)&&t.length>0){let n=ce();if($e(ze),n===null){const s=le();for(let i=0;i<t.length;i+=1)s.contains(t[i])||s.appendChild(t[i]),pe()}for(;n&&n.data!==de;)pe(),n=ce();$e(de)}}function o(e,t,...n){if(t){for(const s of Object.keys(t))if(s.toUpperCase()==="DATA-FRAGMENT")return()=>he(n)}return()=>{$t(e);const s=[];if(t)for(const r of Object.keys(t))r.toUpperCase()==="CLASSNAME"?Re("class",t[r]):/^on[A-Z]/.test(r)?s.push(r):Re(r,t[r]);Rt(e);const i=le();if(!i[je]){for(const r of s)i.addEventListener(r.substr(2).toLowerCase(),t[r]);i[je]=!0}he(n),Ut(e)}}function Ve(e,t){customElements.get(e)||customElements.define(e,t)}function Vt(...e){for(const t of e)Ve(b.get(t,"tag"),t)}function Wt(e){return function(...n){for(const s of n){const i=`${e}${b.get(s,"tag").substr(3)}`;Ve(i,s)}}}const ue=Symbol("Component Attribute Bindings"),I=Symbol("Component Class Bindings"),Q=Symbol("Component Style Bindings"),Ht={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){const e=this;for(const t of Object.keys(e[ue]||{}))e.setAttribute(t,e[ue][t]);for(const t of Object.keys(e[Q]||{}))e.style[t]=e[Q][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[I]||[]).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 b.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===ze?n=i+1:r.data===de&&(s=i-1))}if(n===null)for(const i of t)i.parentNode.removeChild(i);else t=t.slice(n,s);b.has(e.constructor,"contentProp")&&(e[b.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(),Tt(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=b.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 b.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[n]);e.__stopMutObs()}};function F(e){return t=>{b.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},Ht)}}function Z(){return(e,t)=>{b.add(e.constructor,{contentProp:t})}}function Y(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=b.get(t.constructor,"eventListeners",[]);s.push([e,n]),b.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 h=l;e===Boolean&&typeof l=="string"&&l.toLowerCase()==="false"?h=!1:h=e(l),this[r]=h}})}}}function We(e,t,n){return(s,i)=>{const r=b.get(s.constructor,"childQueries",[]);r.push({key:i,selector:e,all:n,refresh:t.refresh}),b.add(s.constructor,{childQueries:r})}}function J(e,t={}){return We(e,t)}function He(e,t={}){return We(e,t,!0)}function fe(){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 me=(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))(me||{}),qt=Object.defineProperty,Gt=Object.getOwnPropertyDescriptor,f=(e,t,n,s)=>{for(var i=s>1?void 0:s?Gt(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&&qt(t,n,i),i};const m="sps-file-upload";a.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[I](){return[m,this.active&&`${m}--active`,this.error&&`${m}--error`,!this.shown&&`${m}--hidden`,this.mini&&`${m}--mini`,this.constrainContentWidth&&`${m}--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?A.SpsIcon.EXCLAMATION_CIRCLE:A.SpsIcon.UPLOAD_CLOUD,s=(this.multiple?t("design-system:fileUpload.instructions_plural",{defaultValue:"Drag and drop your files here or |browse for files| on your desktop."}):t("design-system:fileUpload.instructions",{defaultValue:"Drag and drop your file here or |browse for a file| on your desktop."})).split("|");return o("div",{"data-fragment":!0},o("div",{className:`${m}__content`},this.processing?o("div",{"data-fragment":!0},o("i",{className:"sps-spinner sps-spinner--medium","aria-hidden":"true"}),o("div",{className:`${m}__instructions`},t("design-system:fileUpload.processing",{defaultValue:"Processing Upload..."}))):o("div",{"data-fragment":!0},o("i",{className:`sps-icon sps-icon-${n} ${m}__icon-primary`,"aria-hidden":"true"}),o("div",{className:`${m}__title`},this.error?o("div",{"data-fragment":!0},t(this.namesOfUnsupportedFiles.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled",{defaultValue:this.namesOfUnsupportedFiles.length>1?"File Upload(s) Failed":"File Upload Failed"})):o("div",{"data-fragment":!0},t("design-system:fileUpload.title",{description:this.description,defaultValue:`Upload Your ${this.description}`}))),this.error?o("div",{className:`${m}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((i,r)=>{const l=Math.floor(i.length/2);return o("div",{className:`${m}__errored-filename`,key:i},o("span",{className:`${m}__errored-filename-segment`},i.substr(0,l)),o("div",{className:`${m}__errored-filename-segment`},o("span",null,i.substr(l))),r<this.namesOfUnsupportedFiles.length-1?",":"")}))):o("span",null),o("div",{className:`${m}__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:`${m}__requirements`},this.acceptExtensions?o("span",null,"("," ",t("design-system:fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription,defaultValue:`${this.acceptExtensionsDescription} format accepted`})," ",")"):"",this.maxSize?o("span",null,"("," ",t("design-system:fileUpload.maximumSize",{size:this.maxSize,defaultValue:`${this.maxSize} maximum`})," ",")"):"",this.customRequirement?o("span",null," ",this.customRequirement," "):""),this.downloadLabel&&o("div",{className:`sps-button sps-button--link ${m}__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 ${m}__close-button`,onClick:this.dismiss},o("button",{type:"button",title:t("design-system:fileUpload.close",{defaultValue:"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 me[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.SpsFileUploadComponent.displayName=m,a.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>"}},f([p()],a.SpsFileUploadComponent.prototype,"description",2),f([p(Boolean)],a.SpsFileUploadComponent.prototype,"multiple",2),f([p(Boolean)],a.SpsFileUploadComponent.prototype,"shown",2),f([p(Boolean)],a.SpsFileUploadComponent.prototype,"dismissable",2),f([p(Boolean)],a.SpsFileUploadComponent.prototype,"processing",2),f([p(Boolean)],a.SpsFileUploadComponent.prototype,"mini",2),f([p(Boolean)],a.SpsFileUploadComponent.prototype,"constrainContentWidth",2),f([p()],a.SpsFileUploadComponent.prototype,"downloadLabel",2),f([p()],a.SpsFileUploadComponent.prototype,"acceptExtensions",2),f([p()],a.SpsFileUploadComponent.prototype,"maxSize",2),f([p()],a.SpsFileUploadComponent.prototype,"customRequirement",2),f([Y()],a.SpsFileUploadComponent.prototype,"selection",2),f([Y()],a.SpsFileUploadComponent.prototype,"dismissal",2),f([Y()],a.SpsFileUploadComponent.prototype,"download",2),f([J("input[type='file']")],a.SpsFileUploadComponent.prototype,"fileInput",2),f([z("dragover")],a.SpsFileUploadComponent.prototype,"handleDragOver",1),f([z("dragenter")],a.SpsFileUploadComponent.prototype,"handleDragEnter",1),f([z("dragleave")],a.SpsFileUploadComponent.prototype,"handleDragLeave",1),f([z("drop")],a.SpsFileUploadComponent.prototype,"handleDrop",1),a.SpsFileUploadComponent=f([F({tag:m})],a.SpsFileUploadComponent);const Xt={basic:{label:"Basic File Upload",description:c.code`
|
|
183
|
+
*/return g.applyAttr=U,g.applyProp=te,g.attributes=X,g.close=qe,g.currentElement=qt,g.currentPointer=Gt,g.open=He,g.patch=$e,g.patchInner=$e,g.patchOuter=zt,g.skip=Xt,g.skipNode=we,g.getKey=Ut,g.clearCache=Ue,g.importNode=Te,g.isDataInitialized=Tt,g.notifications=Z,g.symbols=e,g.attr=Yt,g.elementClose=Xe,g.elementOpen=Se,g.elementOpenEnd=Jt,g.elementOpenStart=Qt,g.elementVoid=Mt,g.text=en,g.key=Zt,g}var O=Qe();function Ne(e){let t=O.currentPointer();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),O.currentElement().appendChild(t)),O.skipNode(),t}let ye=k.noI18nI18n;function Ze(e){ye=e}function Ye(){return ye}const R=Symbol("ComponentMetadata"),D=Object.freeze({has(e,t){return!!(e[R]&&Object.prototype.hasOwnProperty.call(e[R],t))},add(e,t){e[R]?Object.assign(e[R],t):e[R]=t},get(e,t,o){return e[R]&&e[R][t]||o}}),Ae=Symbol("ds-web-components:pragma:listeners-attached"),Oe="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")O.text(t);else if(t instanceof Set)de(Array.from(t));else if(Array.isArray(t)&&t.length>0){let o=O.currentPointer();if(Ne(Oe),o===null){const l=O.currentElement();for(let a=0;a<t.length;a+=1)l.contains(t[a])||l.appendChild(t[a]),O.skipNode()}for(;o&&o.data!==pe;)O.skipNode(),o=O.currentPointer();Ne(pe)}}function d(e,t,...o){if(t){for(const l of Object.keys(t))if(l.toUpperCase()==="DATA-FRAGMENT")return()=>de(o)}return()=>{O.elementOpenStart(e);const l=[];if(t)for(const p of Object.keys(t))p.toUpperCase()==="CLASSNAME"?O.attr("class",t[p]):/^on[A-Z]/.test(p)?l.push(p):O.attr(p,t[p]);O.elementOpenEnd(e);const a=O.currentElement();if(!a[Ae]){for(const p of l)a.addEventListener(p.substr(2).toLowerCase(),t[p]);a[Ae]=!0}de(o),O.elementClose(e)}}function De(e,t){customElements.get(e)||customElements.define(e,t)}function Je(...e){for(const t of e)De(D.get(t,"tag"),t)}function Me(e){return function(...o){for(const l of o){const a=`${e}${D.get(l,"tag").substr(3)}`;De(a,l)}}}const he=Symbol("Component Attribute Bindings"),$=Symbol("Component Class Bindings"),Y=Symbol("Component Style Bindings"),et={__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[Y]||{}))e.style[t]=e[Y][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[$]||[]).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 o of D.get(t.constructor,"childQueries",[]))if(!e||e&&o.refresh){const l=o.all?t.querySelectorAll:t.querySelector;t[o.key]=l.call(t,o.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),o=null,l=t.length;for(let a=0;a<t.length;a+=1){const p=t[a];p instanceof Comment&&(p.data===Oe?o=a+1:p.data===pe&&(l=a-1))}if(o===null)for(const a of t)a.parentNode.removeChild(a);else t=t.slice(o,l);D.has(e.constructor,"contentProp")&&(e[D.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(),O.patch(e,e.render(Ye())),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,o){const l=this,a=o===""?!0:o;a!==t&&(l.__cbAttributeChanged&&l.__cbAttributeChanged(e,l[e],a),e!=="style"&&(l[e]=a),l.__initialized&&l.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=D.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,o]of t)e[o]=e[o].bind(e);e.__initialized=!0}for(const[o,l]of t)e.addEventListener(o,e[l]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,o]of D.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[o]);e.__stopMutObs()}};function B(e){return t=>{D.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},et)}}function J(){return(e,t)=>{D.add(e.constructor,{contentProp:t})}}function M(e){return(t,o)=>{Object.defineProperty(t,o,{get(){return Object.defineProperty(this,o,{value:{dispatch:l=>{const a=new CustomEvent(e||o,{detail:l});return this.dispatchEvent(a),a}}}),this[o]},configurable:!0})}}function G(e){return(t,o)=>{const l=D.get(t.constructor,"eventListeners",[]);l.push([e,o]),D.add(t.constructor,{eventListeners:l})}}function v(e){return(t,o)=>{const l=t.constructor,a=o.toLowerCase();if(l.observedAttributes=l.observedAttributes||["classname","className","style"],l.observedAttributes.push(o),l.observedAttributes.push(a),a!==o&&Object.defineProperty(t,o,{get(){return this[a]},set(p){this[a]=p}}),e){const p=Symbol.for(o);Object.defineProperty(t,a,{get(){return this[p]},set(u){let U=u;e===Boolean&&typeof u=="string"&&u.toLowerCase()==="false"?U=!1:U=e(u),this[p]=U}})}}}function Pe(e,t,o){return(l,a)=>{const p=D.get(l.constructor,"childQueries",[]);p.push({key:a,selector:e,all:o,refresh:t.refresh}),D.add(l.constructor,{childQueries:p})}}function ee(e,t={}){return Pe(e,t)}function Ee(e,t={}){return Pe(e,t,!0)}function ue(){return(e,t)=>{const o=Symbol(t);Object.defineProperties(e,{[o]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[o]},set(l){this[o]!==l&&(this[o]=l,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||{}),tt=Object.defineProperty,nt=Object.getOwnPropertyDescriptor,w=(e,t,o,l)=>{for(var a=l>1?void 0:l?nt(t,o):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=(l?u(t,o,a):u(a))||a);return l&&a&&tt(t,o,a),a};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[$](){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,o,l){t==="acceptExtensions"&&this.processAcceptExtensions(l),t==="maxSize"&&this.parseAndValidateMaxSize(l)}dismiss(){this.dismissable&&(this.shown=!1,this.update(),this.dismissal.dispatch())}show(){this.dismissable&&(this.shown=!0,this.update())}render({t}){const o=this.error?k.SpsIcon.EXCLAMATION_CIRCLE:k.SpsIcon.UPLOAD_CLOUD,l=(this.multiple?t("design-system:fileUpload.instructions_plural",{defaultValue:"Drag and drop your files here or |browse for files| on your desktop."}):t("design-system:fileUpload.instructions",{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`},t("design-system:fileUpload.processing",{defaultValue:"Processing Upload..."}))):d("div",{"data-fragment":!0},d("i",{className:`sps-icon sps-icon-${o} ${S}__icon-primary`,"aria-hidden":"true"}),d("div",{className:`${S}__title`},this.error?d("div",{"data-fragment":!0},t(this.namesOfUnsupportedFiles.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled",{defaultValue:this.namesOfUnsupportedFiles.length>1?"File Upload(s) Failed":"File Upload Failed"})):d("div",{"data-fragment":!0},t("design-system:fileUpload.title",{description:this.description,defaultValue:`Upload Your ${this.description}`}))),this.error?d("div",{className:`${S}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((a,p)=>{const u=Math.floor(a.length/2);return d("div",{className:`${S}__errored-filename`,key:a},d("span",{className:`${S}__errored-filename-segment`},a.substr(0,u)),d("div",{className:`${S}__errored-filename-segment`},d("span",null,a.substr(u))),p<this.namesOfUnsupportedFiles.length-1?",":"")}))):d("span",null),d("div",{className:`${S}__instructions`},d("div",{"data-fragment":!0},d("span",null,l[0]),d("a",{href:"",onClick:this.handleBrowseLinkClick},l[1]),d("span",null,l[2]))),d("div",{className:`${S}__requirements`},this.acceptExtensions?d("span",null,"("," ",t("design-system:fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription,defaultValue:`${this.acceptExtensionsDescription} format accepted`})," ",")"):"",this.maxSize?d("span",null,"("," ",t("design-system: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:t("design-system: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 l=(Array.isArray(t)?t:t.trim().split(/\s?,\s?/)).map(p=>p.replace(/^\./,"")),a=l.map(p=>`.${p}`.toLowerCase());this.acceptExtensionsDescription=a.map((p,u)=>u>0&&u===a.length-1?`or ${p}`:p).join(a.length>2?", ":" "),this.acceptMIMETypes.clear();for(const p of l)for(const u of fe[p.toUpperCase()].split(","))this.acceptMIMETypes.add(u);this.accept=a.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(t){this.namesOfUnsupportedFiles=[];const o=Array.from(t);for(const l of o)this.acceptExtensions&&!this.acceptMIMETypes.has(l.type)&&this.namesOfUnsupportedFiles.push(l.name),this.maxSize&&l.size>this.maxSizeBytes&&this.namesOfUnsupportedFiles.indexOf(l.name)===-1&&this.namesOfUnsupportedFiles.push(l.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=o,this.selection.dispatch(o))}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(o=>o.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([M()],i.SpsFileUploadComponent.prototype,"selection",2),w([M()],i.SpsFileUploadComponent.prototype,"dismissal",2),w([M()],i.SpsFileUploadComponent.prototype,"download",2),w([ee("input[type='file']")],i.SpsFileUploadComponent.prototype,"fileInput",2),w([G("dragover")],i.SpsFileUploadComponent.prototype,"handleDragOver",1),w([G("dragenter")],i.SpsFileUploadComponent.prototype,"handleDragEnter",1),w([G("dragleave")],i.SpsFileUploadComponent.prototype,"handleDragLeave",1),w([G("drop")],i.SpsFileUploadComponent.prototype,"handleDrop",1),i.SpsFileUploadComponent=w([B({tag:S})],i.SpsFileUploadComponent);const st={basic:{label:"Basic File Upload",description:f.code`
|
|
184
184
|
<p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
|
|
185
|
-
`,examples:{single:{description:"<p>Single file upload</p>",react:
|
|
185
|
+
`,examples:{single:{description:"<p>Single file upload</p>",react:f.code`
|
|
186
186
|
function Component() {
|
|
187
187
|
const ref = React.useRef()
|
|
188
188
|
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
</div>
|
|
206
206
|
)
|
|
207
207
|
}
|
|
208
|
-
`},multiple:{description:"<p>Multiple file upload</p>",react:
|
|
208
|
+
`},multiple:{description:"<p>Multiple file upload</p>",react:f.code`
|
|
209
209
|
function Component() {
|
|
210
210
|
const ref = React.useRef()
|
|
211
211
|
|
|
@@ -228,9 +228,9 @@
|
|
|
228
228
|
</div>
|
|
229
229
|
)
|
|
230
230
|
}
|
|
231
|
-
`}}},restrictions:{label:"Restrictions",description:
|
|
231
|
+
`}}},restrictions:{label:"Restrictions",description:f.code`
|
|
232
232
|
<p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
|
|
233
|
-
`,examples:{size:{description:"<p>Maximum size</p>",react:
|
|
233
|
+
`,examples:{size:{description:"<p>Maximum size</p>",react:f.code`
|
|
234
234
|
function Component() {
|
|
235
235
|
const ref = React.useRef()
|
|
236
236
|
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
</div>
|
|
254
254
|
)
|
|
255
255
|
}
|
|
256
|
-
`},type:{description:"<p>File type whitelist</p>",react:
|
|
256
|
+
`},type:{description:"<p>File type whitelist</p>",react:f.code`
|
|
257
257
|
function Component() {
|
|
258
258
|
const ref = React.useRef()
|
|
259
259
|
|
|
@@ -281,7 +281,7 @@
|
|
|
281
281
|
</div>
|
|
282
282
|
)
|
|
283
283
|
}
|
|
284
|
-
`},both:{description:"<p>Both restrictions</p>",react:
|
|
284
|
+
`},both:{description:"<p>Both restrictions</p>",react:f.code`
|
|
285
285
|
function Component() {
|
|
286
286
|
const ref = React.useRef()
|
|
287
287
|
|
|
@@ -310,10 +310,10 @@
|
|
|
310
310
|
</div>
|
|
311
311
|
)
|
|
312
312
|
}
|
|
313
|
-
`}}},dismissable:{label:"Dismissable",description:
|
|
313
|
+
`}}},dismissable:{label:"Dismissable",description:f.code`
|
|
314
314
|
<p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
|
|
315
315
|
show it again programmatically if you need to.</p>
|
|
316
|
-
`,examples:{dismissable:{react:
|
|
316
|
+
`,examples:{dismissable:{react:f.code`
|
|
317
317
|
function Component() {
|
|
318
318
|
const [showFileUpload, setShowFileUpload] = React.useState(true)
|
|
319
319
|
const ref = React.useRef()
|
|
@@ -346,10 +346,10 @@
|
|
|
346
346
|
</div>
|
|
347
347
|
)
|
|
348
348
|
}
|
|
349
|
-
`}}},downloadButton:{label:"Download Button",description:
|
|
349
|
+
`}}},downloadButton:{label:"Download Button",description:f.code`
|
|
350
350
|
<p>You can optionally provide a button to download a file. Typically this will be a template for
|
|
351
351
|
whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
|
|
352
|
-
`,examples:{downloadButton:{react:
|
|
352
|
+
`,examples:{downloadButton:{react:f.code`
|
|
353
353
|
function Component() {
|
|
354
354
|
const ref = React.useRef()
|
|
355
355
|
|
|
@@ -377,10 +377,10 @@
|
|
|
377
377
|
</div>
|
|
378
378
|
)
|
|
379
379
|
}
|
|
380
|
-
`}}},mini:{label:"Mini File Upload",description:
|
|
380
|
+
`}}},mini:{label:"Mini File Upload",description:f.code`
|
|
381
381
|
<p>When the file upload component is to be placed in a small container,
|
|
382
382
|
it should be marked as a mini file upload so that everything fits.</p>
|
|
383
|
-
`,examples:{single:{react:
|
|
383
|
+
`,examples:{single:{react:f.code`
|
|
384
384
|
function Component() {
|
|
385
385
|
const ref = React.useRef()
|
|
386
386
|
|
|
@@ -403,11 +403,11 @@
|
|
|
403
403
|
</div>
|
|
404
404
|
)
|
|
405
405
|
}
|
|
406
|
-
`}}},constrainContentWidth:{label:"Constrain Content Width",description:
|
|
406
|
+
`}}},constrainContentWidth:{label:"Constrain Content Width",description:f.code`
|
|
407
407
|
<p>If this prop is provided, the content will be restricted to 50% of
|
|
408
408
|
the overall width of the component. Consult your product designer if
|
|
409
409
|
you're not sure whether to use this variant.</p>
|
|
410
|
-
`,examples:{constrainContentWidth:{react:
|
|
410
|
+
`,examples:{constrainContentWidth:{react:f.code`
|
|
411
411
|
function Component() {
|
|
412
412
|
const ref = React.useRef()
|
|
413
413
|
|
|
@@ -430,7 +430,7 @@
|
|
|
430
430
|
</div>
|
|
431
431
|
)
|
|
432
432
|
}
|
|
433
|
-
`}}}};var
|
|
433
|
+
`}}}};var it=Object.defineProperty,at=Object.getOwnPropertyDescriptor,x=(e,t,o,l)=>{for(var a=l>1?void 0:l?at(t,o):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=(l?u(t,o,a):u(a))||a);return l&&a&&it(t,o,a),a};const P="sps-insight-card";i.SpsInsightCardComponent=class extends HTMLElement{constructor(){super(...arguments),this.kind=k.SpsInsightCardKind.GENERAL}get[$](){return[P,`${P}--${this.kind}`,this.detail&&this.detail.children.length?`${P}--has-detail`:null]}render({t}){const o=d("div",{className:`${P}__metric-count`},this.metric),l=d("div",{className:`${P}__description`},d("div",{className:`${P}__title`,style:{"-webkit-box-orient":"vertical"}},this.title),d("div",{className:`${P}__detail`},this.content)),a=this.partnercount,p=this.totalpartners,[u,U,te]=(a?t("design-system:insightCard.partnerCount",{count:a,total:p,defaultValue:`${a} |of| ${p}`}):"").split("|");return d("div",{"data-fragment":!0},d("div",{className:`${P}__body`},this.icon?d("i",{className:`sps-icon sps-icon-${this.icon}`}):d("i",{className:`sps-icon sps-icon-${k.SpsInsightCardIcons[this.kind]}`}),o,l),a&&d("div",{className:`${P}__partner-count`},a===p?d("div",null,t("design-system:insightCard.all",{defaultValue:"ALL"})):d("div",{"data-fragment":!0},d("div",null,u),d("div",null,U),d("div",null,te)),d("div",{className:`${P}__partners-text`},t("design-system:insightCard.partners",{defaultValue:"PARTNERS"}))))}},i.SpsInsightCardComponent.displayName=P,i.SpsInsightCardComponent.props={icon:"SpsIcon",kind:"SpsInsightCardKind",title:"string",metric:"number",partnerCount:"number",totalPartners:"number",secondary:"boolean"},x([v()],i.SpsInsightCardComponent.prototype,"icon",2),x([v()],i.SpsInsightCardComponent.prototype,"kind",2),x([v()],i.SpsInsightCardComponent.prototype,"title",2),x([v()],i.SpsInsightCardComponent.prototype,"metric",2),x([v()],i.SpsInsightCardComponent.prototype,"partnerCount",2),x([v()],i.SpsInsightCardComponent.prototype,"totalPartners",2),x([v()],i.SpsInsightCardComponent.prototype,"secondary",2),x([J()],i.SpsInsightCardComponent.prototype,"content",2),x([ee(`.${P}__detail`)],i.SpsInsightCardComponent.prototype,"detail",2),i.SpsInsightCardComponent=x([B({tag:P})],i.SpsInsightCardComponent);var rt=Object.defineProperty,ot=Object.getOwnPropertyDescriptor,me=(e,t,o,l)=>{for(var a=l>1?void 0:l?ot(t,o):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=(l?u(t,o,a):u(a))||a);return l&&a&&rt(t,o,a),a};const L="sps-insights";i.SpsInsightsComponent=class extends HTMLElement{constructor(){super(),this.content=[],this.showAdditionalInsights=!1,this.toggleAdditionalInsights=this.toggleAdditionalInsights.bind(this)}get[$](){return[L,this.showAdditionalInsights&&`${L}--show-additional`,this.details&&Array.from(this.details).every(t=>!t.textContent)?`${L}--no-details`:null,this.content.length===6?`${L}--break-4`:null,this.content.length===7?`${L}--break-5`:null,this.content.length===8?`${L}--break-5`:null]}toggleAdditionalInsights(){this.showAdditionalInsights=!this.showAdditionalInsights,this.update()}render(){return d("div",{"data-fragment":!0},this.content,this.content.length>10&&d("div",{className:"sps-button sps-button--link",onClick:this.toggleAdditionalInsights},d("button",{type:"button"},this.showAdditionalInsights?"Hide ":"Show ","Additional Insights")))}},i.SpsInsightsComponent.displayName=L,i.SpsInsightsComponent.props={},me([J()],i.SpsInsightsComponent.prototype,"content",2),me([Ee(".sps-insight-card__detail")],i.SpsInsightsComponent.prototype,"details",2),i.SpsInsightsComponent=me([B({tag:L})],i.SpsInsightsComponent);const lt={basic:{label:"Basic Insight Cards",examples:{basic:{jsx:f.code`
|
|
434
434
|
<sps-insights>
|
|
435
435
|
<sps-insight-card kind="general"
|
|
436
436
|
metric="1234"
|
|
@@ -453,7 +453,7 @@
|
|
|
453
453
|
title="Insight Card Title"
|
|
454
454
|
></sps-insight-card>
|
|
455
455
|
</sps-insights>
|
|
456
|
-
`}}},details:{label:"With Details",examples:{details:{jsx:
|
|
456
|
+
`}}},details:{label:"With Details",examples:{details:{jsx:f.code`
|
|
457
457
|
<sps-insights>
|
|
458
458
|
<sps-insight-card kind="general"
|
|
459
459
|
metric="1234"
|
|
@@ -498,7 +498,7 @@
|
|
|
498
498
|
<span className="gray600 font-weight-bold">Detail:</span> 792 units
|
|
499
499
|
</sps-insight-card>
|
|
500
500
|
</sps-insights>
|
|
501
|
-
`}}},partner_count:{label:"Partner Count",examples:{partner_count:{jsx:
|
|
501
|
+
`}}},partner_count:{label:"Partner Count",examples:{partner_count:{jsx:f.code`
|
|
502
502
|
<sps-insights>
|
|
503
503
|
<sps-insight-card kind="general"
|
|
504
504
|
metric="1234"
|
|
@@ -531,7 +531,7 @@
|
|
|
531
531
|
totalPartners="250"
|
|
532
532
|
></sps-insight-card>
|
|
533
533
|
</sps-insights>
|
|
534
|
-
`}}},expansion:{label:"10+ Insight Cards",examples:{expansion:{jsx:
|
|
534
|
+
`}}},expansion:{label:"10+ Insight Cards",examples:{expansion:{jsx:f.code`
|
|
535
535
|
<sps-insights>
|
|
536
536
|
<sps-insight-card kind="general"
|
|
537
537
|
metric="1234"
|
|
@@ -640,10 +640,10 @@
|
|
|
640
640
|
<span className="gray600 font-weight-bold">Detail:</span> 792 units
|
|
641
641
|
</sps-insight-card>
|
|
642
642
|
</sps-insights>
|
|
643
|
-
`}}},events:{label:"Adding a click handler",description:
|
|
643
|
+
`}}},events:{label:"Adding a click handler",description:f.code`
|
|
644
644
|
<p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
|
|
645
645
|
Here is how to do it:</p>
|
|
646
|
-
`,examples:{events:{react:
|
|
646
|
+
`,examples:{events:{react:f.code`
|
|
647
647
|
function Component() {
|
|
648
648
|
function handleClick() {
|
|
649
649
|
window.alert("Insight card clicked");
|
|
@@ -675,7 +675,7 @@
|
|
|
675
675
|
</sps-insights>
|
|
676
676
|
);
|
|
677
677
|
}
|
|
678
|
-
`}}},alternateIcon:{label:"Using alternate icons",examples:{basic:{react:
|
|
678
|
+
`}}},alternateIcon:{label:"Using alternate icons",examples:{basic:{react:f.code`
|
|
679
679
|
function DemoComponent() {
|
|
680
680
|
return (
|
|
681
681
|
<sps-insights>
|
|
@@ -712,9 +712,9 @@
|
|
|
712
712
|
</sps-insights>
|
|
713
713
|
)
|
|
714
714
|
}
|
|
715
|
-
`}}}};var
|
|
715
|
+
`}}}};var ct=Object.defineProperty,pt=Object.getOwnPropertyDescriptor,j=(e,t,o,l)=>{for(var a=l>1?void 0:l?pt(t,o):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=(l?u(t,o,a):u(a))||a);return l&&a&&ct(t,o,a),a};i.SpsNavTabComponent=class extends HTMLElement{constructor(){super(...arguments),this.active=!1,this.label="",this.tag=""}get[$](){return["sps-tabbed-nav__nav-item",this.active&&"sps-tabbed-nav__nav-item--active"]}render(){return d("a",{href:this.href,target:this.target,className:"sps-tabbed-nav__nav-item-link",tabIndex:0},this.icon&&d("i",{className:`sps-icon sps-icon-${this.icon}`}),this.label&&d("span",null,this.label),this.tag&&d("span",{className:"sps-tag sps-tag--default"},this.tag))}},i.SpsNavTabComponent.displayName="sps-nav-tab",i.SpsNavTabComponent.props={active:"boolean",label:"string",icon:"SpsIcon",tag:"string",href:"string",target:"string"},j([v()],i.SpsNavTabComponent.prototype,"active",2),j([v()],i.SpsNavTabComponent.prototype,"label",2),j([v()],i.SpsNavTabComponent.prototype,"icon",2),j([v()],i.SpsNavTabComponent.prototype,"tag",2),j([v()],i.SpsNavTabComponent.prototype,"href",2),j([v()],i.SpsNavTabComponent.prototype,"target",2),i.SpsNavTabComponent=j([B({tag:"sps-nav-tab"})],i.SpsNavTabComponent);var dt=Object.defineProperty,ht=Object.getOwnPropertyDescriptor,Ie=(e,t,o,l)=>{for(var a=l>1?void 0:l?ht(t,o):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=(l?u(t,o,a):u(a))||a);return l&&a&&dt(t,o,a),a};i.SpsNavTabSetComponent=class extends HTMLElement{constructor(){super(...arguments),this.content=[]}render(){return d("nav",{className:"sps-tabbed-nav"},this.content)}},i.SpsNavTabSetComponent.displayName="sps-nav-tab-set",i.SpsNavTabSetComponent.props={},Ie([J()],i.SpsNavTabSetComponent.prototype,"content",2),i.SpsNavTabSetComponent=Ie([B({tag:"sps-nav-tab-set"})],i.SpsNavTabSetComponent);const ut={basic:{label:"Basic Navigation Tabs",description:f.code`
|
|
716
716
|
<p>Navigation tabs native web component</p>
|
|
717
|
-
`,examples:{basic:{react:
|
|
717
|
+
`,examples:{basic:{react:f.code`
|
|
718
718
|
function DemoComponent() {
|
|
719
719
|
const tabs = [
|
|
720
720
|
{ label: "Tab A", icon: "chart-line" },
|
|
@@ -739,14 +739,14 @@
|
|
|
739
739
|
</sps-nav-tab-set>
|
|
740
740
|
)
|
|
741
741
|
}
|
|
742
|
-
`}}}};var
|
|
742
|
+
`}}}};var ft=Object.defineProperty,mt=Object.getOwnPropertyDescriptor,T=(e,t,o,l)=>{for(var a=l>1?void 0:l?mt(t,o):t,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=(l?u(t,o,a):u(a))||a);return l&&a&&ft(t,o,a),a},xe=(e=>(e.FIT="fit",e.FILL="fill",e))(xe||{});const V="sps-photo";i.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments),this.mode="fill"}get image(){return this.imageInternal}set image(t){this.imageInternal=t,t&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const o=t.getBoundingClientRect();if(o.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let l=o.width/o.height>1;this.fitWidth=l===(this.mode==="fit")}},1e3/60))}get[$](){return[V,this.fitWidth?`${V}--fit-width`:`${V}--fit-height`,this.placeholderIcon&&`${V}--placeholder`]}get[Y](){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?d("img",{src:this.src,alt:this.altText}):d("span",null):d("i",{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(t){if(t&&!this.width){const o=document.body.parentElement.style.fontSize||"16px",l=Number(o.substr(0,o.length-2));this.width=t/l}}},i.SpsPhotoComponent.displayName=V,i.SpsPhotoComponent.props={src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"},T([v()],i.SpsPhotoComponent.prototype,"src",2),T([v()],i.SpsPhotoComponent.prototype,"altText",2),T([v()],i.SpsPhotoComponent.prototype,"mode",2),T([v()],i.SpsPhotoComponent.prototype,"placeholderIcon",2),T([ue()],i.SpsPhotoComponent.prototype,"width",2),T([ue()],i.SpsPhotoComponent.prototype,"fitWidth",2),T([ee("img",{refresh:!0})],i.SpsPhotoComponent.prototype,"image",1),i.SpsPhotoComponent=T([B({tag:V})],i.SpsPhotoComponent);const gt={sizing:{label:"Sizing",description:f.code`
|
|
743
743
|
<p>
|
|
744
744
|
Photos are block elements, so a photo fills its container's width unless
|
|
745
745
|
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
746
746
|
photos have been placed in cards which have different widths in the 12
|
|
747
747
|
column grid.
|
|
748
748
|
</p>
|
|
749
|
-
`,examples:{basic:{jsx:
|
|
749
|
+
`,examples:{basic:{jsx:f.code`
|
|
750
750
|
<div className="sfg-row">
|
|
751
751
|
<div className="sfg-col-2">
|
|
752
752
|
<sps-card>
|
|
@@ -764,7 +764,7 @@
|
|
|
764
764
|
</sps-card>
|
|
765
765
|
</div>
|
|
766
766
|
</div>
|
|
767
|
-
`}}},displayMode:{label:"Fill vs. Fit",description:
|
|
767
|
+
`}}},displayMode:{label:"Fill vs. Fit",description:f.code`
|
|
768
768
|
<p>
|
|
769
769
|
There are two display modes available:
|
|
770
770
|
<ul>
|
|
@@ -772,7 +772,7 @@
|
|
|
772
772
|
<li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
|
|
773
773
|
</ul>
|
|
774
774
|
</p>
|
|
775
|
-
`,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:
|
|
775
|
+
`,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:f.code`
|
|
776
776
|
<div className="sfg-row">
|
|
777
777
|
<div className="sfg-col-4">
|
|
778
778
|
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
@@ -781,7 +781,7 @@
|
|
|
781
781
|
<sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
|
|
782
782
|
</div>
|
|
783
783
|
</div>
|
|
784
|
-
`},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:
|
|
784
|
+
`},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:f.code`
|
|
785
785
|
<div className="sfg-row">
|
|
786
786
|
<div className="sfg-col-4">
|
|
787
787
|
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
@@ -790,7 +790,7 @@
|
|
|
790
790
|
<sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
|
|
791
791
|
</div>
|
|
792
792
|
</div>
|
|
793
|
-
`}}},placeholder:{label:"Placeholders",description:
|
|
793
|
+
`}}},placeholder:{label:"Placeholders",description:f.code`
|
|
794
794
|
<p>
|
|
795
795
|
When an image is not provided for a particular use case (such as a user avatar,
|
|
796
796
|
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
@@ -798,34 +798,34 @@
|
|
|
798
798
|
The placeholder's icon, selected from our SPS icon set, should represent the
|
|
799
799
|
type of image it is substituting for.
|
|
800
800
|
</p>
|
|
801
|
-
`,examples:{general:{description:"<p>General Photo</p>",jsx:
|
|
801
|
+
`,examples:{general:{description:"<p>General Photo</p>",jsx:f.code`
|
|
802
802
|
<div className="sfg-row">
|
|
803
803
|
<div className="sfg-col-3">
|
|
804
804
|
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
805
805
|
</div>
|
|
806
806
|
</div>
|
|
807
|
-
`},photoAlt:{description:"<p>Photo Alt</p>",jsx:
|
|
807
|
+
`},photoAlt:{description:"<p>Photo Alt</p>",jsx:f.code`
|
|
808
808
|
<div className="sfg-row">
|
|
809
809
|
<div className="sfg-col-3">
|
|
810
810
|
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
811
811
|
</div>
|
|
812
812
|
</div>
|
|
813
|
-
`},user:{description:"<p>User / Single Person</p>",jsx:
|
|
813
|
+
`},user:{description:"<p>User / Single Person</p>",jsx:f.code`
|
|
814
814
|
<div className="sfg-row">
|
|
815
815
|
<div className="sfg-col-3">
|
|
816
816
|
<sps-photo placeholderIcon="user"></sps-photo>
|
|
817
817
|
</div>
|
|
818
818
|
</div>
|
|
819
|
-
`},group:{description:"<p>Group / Multiple People</p>",jsx:
|
|
819
|
+
`},group:{description:"<p>Group / Multiple People</p>",jsx:f.code`
|
|
820
820
|
<div className="sfg-row">
|
|
821
821
|
<div className="sfg-col-3">
|
|
822
822
|
<sps-photo placeholderIcon="group"></sps-photo>
|
|
823
823
|
</div>
|
|
824
824
|
</div>
|
|
825
|
-
`},company:{description:"<p>Company / Building</p>",jsx:
|
|
825
|
+
`},company:{description:"<p>Company / Building</p>",jsx:f.code`
|
|
826
826
|
<div className="sfg-row">
|
|
827
827
|
<div className="sfg-col-3">
|
|
828
828
|
<sps-photo placeholderIcon="building"></sps-photo>
|
|
829
829
|
</div>
|
|
830
830
|
</div>
|
|
831
|
-
`}}}};
|
|
831
|
+
`}}}};i.AttrBindings=he,i.ClassBindings=$,i.Component=B,i.Content=J,i.EventDispatcher=M,i.EventListener=G,i.MANIFEST=Ke,i.MIMEType=fe,i.Prop=v,i.QuerySelector=ee,i.QuerySelectorAll=Ee,i.SpsFileUploadExamples=st,i.SpsInsightCardExamples=lt,i.SpsNavTabsExamples=ut,i.SpsPhotoDisplayMode=xe,i.SpsPhotoExamples=gt,i.StyleBindings=Y,i.Watch=ue,i.h=d,i.namespaceOverrideRegistrar=Me,i.register=Je,i.webComponentsUseI18n=Ze,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
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.
|
|
4
|
+
"version": "8.33.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",
|