@spscommerce/ds-web-components 6.37.2 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/index.cjs.js +152 -150
- package/dist/lib/index.es.js +1421 -1875
- package/dist/package.json +10 -6
- package/lib/index.cjs.js +152 -150
- package/lib/index.es.js +1421 -1875
- package/package.json +13 -10
- package/vite.config.js +6 -6
package/dist/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(
|
|
1
|
+
"use strict";var tt=Object.defineProperty;var nt=(e,t,n)=>t in e?tt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var a=(e,t,n)=>(nt(e,typeof t!="symbol"?t+"":t,n),n);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const U=require("@spscommerce/ds-shared"),c=require("@spscommerce/utils");var d={};Object.defineProperty(d,"__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 ue={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 st=Object.prototype.hasOwnProperty;function Pe(){}Pe.prototype=Object.create(null);function it(e,t){return st.call(e,t)}function De(){return new Pe}function fe(e,t){for(;e.length>t;)e.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 rt(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 Ee(e,t,n){if(n==null)e.removeAttribute(t);else{var s=rt(t);s?e.setAttributeNS(s,t,String(n)):e.setAttribute(t,String(n))}}function Ie(e,t,n){e[t]=n}function at(e,t,n){t.indexOf("-")>=0?e.setProperty(t,n):e[t]=n}function ot(e,t,n){if(typeof n=="string")e.style.cssText=n;else{e.style.cssText="";var s=e.style;for(var i in n)it(n,i)&&at(s,i,n[i])}}function lt(e,t,n){var s=typeof n;s==="object"||s==="function"?Ie(e,t,n):Ee(e,t,n)}var $=De();$[ue.default]=lt;$.style=ot;function R(e,t,n){var s=$[t]||$[ue.default];s(e,t,n)}/**
|
|
47
47
|
* @license
|
|
48
48
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
49
49
|
*
|
|
@@ -58,7 +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
|
|
61
|
+
*/var j=!1,oe=!1;function Fe(e,t){if(!t)throw new Error("Cannot call "+e+"() unless in patch.")}function ct(e,t){if(e!==t){for(var n=e,s=[];n&&n!==t;)s.push(n.nodeName.toLowerCase()),n=n.parentNode;throw new Error(`One or more tags were not closed:
|
|
62
|
+
`+s.join(`
|
|
63
|
+
`))}}function pt(e){e||console.warn("patchOuter requires the node have a parent if there is a key.")}function L(e){if(j)throw new Error(e+"() can not be called between elementOpenStart() and elementOpenEnd().")}function ke(e){if(oe)throw new Error(e+"() may not be called inside an element that has called skip().")}function me(e){if(!j)throw new Error(e+"() can only be called after calling elementOpenStart().")}function dt(){if(j)throw new Error("elementOpenEnd() must be called after calling elementOpenStart().")}function ht(e,t){if(e!==t)throw new Error('Received a call to close "'+t+'" but "'+e+'" was open.')}function ut(e,t){if(t!==null)throw new Error(e+"() must come before any child declarations inside the current element.")}function ft(e,t,n,s){ee(e);var i=e,r=t,l=r.nextSibling===n&&r.previousSibling===s,h=r.nextSibling===i.nextSibling&&r.previousSibling===s,C=r===i;if(!l&&!h&&!C)throw new Error("There must be exactly one top level call corresponding to the patched element.")}function J(e){var t=j;return j=e,t}function Y(e){var t=oe;return oe=e,t}function ee(e){if(process.env.NODE_ENV!=="production"&&!e)throw new Error("Expected value to be defined");return e}/**
|
|
62
64
|
* @license
|
|
63
65
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
64
66
|
*
|
|
@@ -88,7 +90,7 @@
|
|
|
88
90
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
89
91
|
* See the License for the specific language governing permissions and
|
|
90
92
|
* limitations under the License.
|
|
91
|
-
*/var
|
|
93
|
+
*/var mt=function(){function e(){this.created=[],this.deleted=[]}return e.prototype.markCreated=function(t){this.created.push(t)},e.prototype.markDeleted=function(t){this.deleted.push(t)},e.prototype.notifyChanges=function(){B.nodesCreated&&this.created.length>0&&B.nodesCreated(this.created),B.nodesDeleted&&this.deleted.length>0&&B.nodesDeleted(this.deleted)},e}();/**
|
|
92
94
|
* @license
|
|
93
95
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
94
96
|
*
|
|
@@ -103,7 +105,7 @@
|
|
|
103
105
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
104
106
|
* See the License for the specific language governing permissions and
|
|
105
107
|
* limitations under the License.
|
|
106
|
-
*/function
|
|
108
|
+
*/function gt(e){return e.nodeType===11||e.nodeType===9}function ae(e){return e.nodeType===1}function vt(e){return e.nodeType===3}function Ct(e,t){for(var n=[],s=e;s!==t;){var i=s;n.push(i),s=i.parentNode}return n}var bt=Node.prototype.getRootNode||function(){for(var e=this,t=e;e;)t=e,e=e.parentNode;return t};function wt(e){var t=bt.call(e);return gt(t)?t.activeElement:null}function _t(e,t){var n=wt(e);return!n||!e.contains(n)?[]:Ct(n,t)}function St(e,t,n){for(var s=t.nextSibling,i=n;i!==null&&i!==t;){var r=i.nextSibling;e.insertBefore(i,s),i=r}}/**
|
|
107
109
|
* @license
|
|
108
110
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
109
111
|
*
|
|
@@ -118,7 +120,7 @@
|
|
|
118
120
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
119
121
|
* See the License for the specific language governing permissions and
|
|
120
122
|
* limitations under the License.
|
|
121
|
-
*/var
|
|
123
|
+
*/var Nt=function(){function e(t,n,s){this._attrsArr=null,this.staticsApplied=!1,this.nameOrCtor=t,this.key=n,this.text=s}return e.prototype.hasEmptyAttrsArr=function(){var t=this._attrsArr;return!t||!t.length},e.prototype.getAttrsArr=function(t){return this._attrsArr||(this._attrsArr=new Array(t))},e}();function ge(e,t,n,s){var i=new Nt(t,n,s);return e.__incrementalDOMData=i,i}function T(e,t){return Le(e,t)}function xt(e){return Boolean(e.__incrementalDOMData)}function yt(e){return ee(e.__incrementalDOMData),T(e).key}function Le(e,t){if(e.__incrementalDOMData)return e.__incrementalDOMData;var n=ae(e)?e.localName:e.nodeName,s=ae(e)?e.getAttribute("key")||t:null,i=vt(e)?e.data:void 0,r=ge(e,n,s,i);return ae(e)&&At(e,r),r}function Te(e){Le(e);for(var t=e.firstChild;t;t=t.nextSibling)Te(t)}function Be(e){e.__incrementalDOMData=null;for(var t=e.firstChild;t;t=t.nextSibling)Be(t)}function At(e,t){var n=e.attributes,s=n.length;if(!!s)for(var i=t.getAttrsArr(s),r=0,l=0;r<s;r+=1,l+=2){var h=n[r],C=h.name,f=h.value;i[l]=C,i[l+1]=f}}/**
|
|
122
124
|
* @license
|
|
123
125
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
124
126
|
*
|
|
@@ -133,7 +135,7 @@
|
|
|
133
135
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
134
136
|
* See the License for the specific language governing permissions and
|
|
135
137
|
* limitations under the License.
|
|
136
|
-
*/function
|
|
138
|
+
*/function Ot(e,t){return e==="svg"?"http://www.w3.org/2000/svg":e==="math"?"http://www.w3.org/1998/Math/MathML":t==null||T(t).nameOrCtor==="foreignObject"?null:t.namespaceURI}function Pt(e,t,n,s){var i;if(typeof n=="function")i=new n;else{var r=Ot(n,t);r?i=e.createElementNS(r,n):i=e.createElement(n)}return ge(i,n,s),i}function Dt(e){var t=e.createTextNode("");return ge(t,"#text",null),t}/**
|
|
137
139
|
* @license
|
|
138
140
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
139
141
|
*
|
|
@@ -148,7 +150,7 @@
|
|
|
148
150
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
149
151
|
* See the License for the specific language governing permissions and
|
|
150
152
|
* limitations under the License.
|
|
151
|
-
*/var
|
|
153
|
+
*/var k=null,u=null,v=null,P=null,Q=[],Z=[];function te(){return Z}function Re(e){var t=function(n,s,i){var r=k,l=P,h=Q,C=Z,f=u,b=v,N=!1,W=!1;k=new mt,P=n.ownerDocument,Z=[],v=n.parentNode,Q=_t(n,v),process.env.NODE_ENV!=="production"&&(N=J(!1),W=Y(!1));try{var et=e(n,s,i);return process.env.NODE_ENV!=="production"&&dt(),et}finally{P=l,Z=C,u=f,v=b,Q=h,k.notifyChanges(),J(N),Y(W),k=r}};return t}var Ue=Re(function(e,t,n){return u=e,ze(),t(n),We(),process.env.NODE_ENV!=="production"&&ct(u,e),e}),Et=Re(function(e,t,n){var s={nextSibling:e},i=null,r=null;return process.env.NODE_ENV!=="production"&&(i=e.nextSibling,r=e.previousSibling),u=s,t(n),process.env.NODE_ENV!=="production"&&(pt(v),ft(s,u,i,r)),v&&je(v,ne(),e.nextSibling),s===u?null:u});function Ne(e,t,n){var s=T(e,n);return t==s.nameOrCtor&&n==s.key}function It(e,t,n){if(!e)return null;if(Ne(e,t,n))return e;if(n){for(;e=e.nextSibling;)if(Ne(e,t,n))return e}return null}function Ft(e,t){var n;return e==="#text"?n=Dt(P):n=Pt(P,v,e,t),k.markCreated(n),n}function $e(e,t){var n=It(u,e,t),s=n||Ft(e,t);s!==u&&(Q.indexOf(s)>=0?St(v,s,u):v.insertBefore(s,u),u=s)}function je(e,t,n){for(var s=e,i=t;i!==n;){var r=i.nextSibling;s.removeChild(i),k.markDeleted(i),i=r}}function ze(){v=u,u=null}function ne(){return u?u.nextSibling:v.firstChild}function ve(){u=ne()}function We(){je(v,ne(),null),u=v,v=v.parentNode}function He(e,t){return ve(),$e(e,t),ze(),v}function Ve(){return process.env.NODE_ENV!=="production"&&Y(!1),We(),u}function kt(){return ve(),$e("#text",null),u}function Lt(){return process.env.NODE_ENV!=="production"&&(Fe("currentElement",P),L("currentElement")),v}function Tt(){return process.env.NODE_ENV!=="production"&&(Fe("currentPointer",P),L("currentPointer")),ne()}function Bt(){process.env.NODE_ENV!=="production"&&(ut("skip",u),Y(!0)),u=v.lastChild}/**
|
|
152
154
|
* @license
|
|
153
155
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
154
156
|
*
|
|
@@ -163,7 +165,7 @@
|
|
|
163
165
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
164
166
|
* See the License for the specific language governing permissions and
|
|
165
167
|
* limitations under the License.
|
|
166
|
-
*/var
|
|
168
|
+
*/var xe=3,S=De();function Rt(e,t,n){if(t.staticsApplied=!0,!(!n||!n.length)){if(t.hasEmptyAttrsArr()){for(var s=0;s<n.length;s+=2)R(e,n[s],n[s+1]);return}for(var s=0;s<n.length;s+=2)S[n[s]]=s+1;for(var i=t.getAttrsArr(0),r=0,s=0;s<i.length;s+=2){var l=i[s],h=i[s+1],C=S[l];if(C){n[C]===h&&delete S[l];continue}i[r]=l,i[r+1]=h,r+=2}fe(i,r);for(var l in S)R(e,l,n[S[l]]),delete S[l]}}function Ce(e,t,n){process.env.NODE_ENV!=="production"&&(L("elementOpen"),ke("elementOpen"));var s=He(e,t),i=T(s);i.staticsApplied||Rt(s,i,n);var r=Math.max(0,arguments.length-xe),l=i.hasEmptyAttrsArr();if(!r&&l)return s;for(var h=i.getAttrsArr(r),C=xe,f=0;C<arguments.length;C+=2,f+=2){var b=arguments[C];if(l)h[f]=b;else if(h[f]!==b)break;var N=arguments[C+1];(l||h[f+1]!==N)&&(h[f+1]=N,R(s,b,N))}if(C<arguments.length||f<h.length){for(var W=f;f<h.length;f+=2)S[h[f]]=h[f+1];for(f=W;C<arguments.length;C+=2,f+=2){var b=arguments[C],N=arguments[C+1];S[b]!==N&&R(s,b,N),h[f]=b,h[f+1]=N,delete S[b]}fe(h,f);for(var b in S)R(s,b,void 0),delete S[b]}return s}function Ut(e,t,n){var s=te();process.env.NODE_ENV!=="production"&&(L("elementOpenStart"),J(!0)),s[0]=e,s[1]=t,s[2]=n}function $t(e){var t=te();process.env.NODE_ENV!=="production"&&(me("key"),ee(t)),t[1]=e}function jt(e,t){var n=te();process.env.NODE_ENV!=="production"&&me("attr"),n.push(e),n.push(t)}function zt(){var e=te();process.env.NODE_ENV!=="production"&&(me("elementOpenEnd"),J(!1)),ee(e);var t=Ce.apply(null,e);return fe(e,0),t}function qe(e){process.env.NODE_ENV!=="production"&&L("elementClose");var t=Ve();return process.env.NODE_ENV!=="production"&&ht(T(t).nameOrCtor,e),t}function Wt(e,t,n){return Ce.apply(null,arguments),qe(e)}function Ht(e){process.env.NODE_ENV!=="production"&&(L("text"),ke("text"));var t=kt(),n=T(t);if(n.text!==e){n.text=e;for(var s=e,i=1;i<arguments.length;i+=1){var r=arguments[i];s=r(s)}t.data=s}return t}/**
|
|
167
169
|
* @license
|
|
168
170
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
169
171
|
*
|
|
@@ -178,9 +180,98 @@
|
|
|
178
180
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
179
181
|
* See the License for the specific language governing permissions and
|
|
180
182
|
* limitations under the License.
|
|
181
|
-
*/c.applyAttr=de;c.applyProp=he;c.attributes=U;c.close=ye;var te=c.currentElement=mt,se=c.currentPointer=ft;c.open=Ne;var Nt=c.patch=Ce;c.patchInner=Ce;c.patchOuter=ct;c.skip=gt;var ne=c.skipNode=M;c.getKey=at;c.clearCache=ge;c.importNode=fe;c.isDataInitialized=it;c.notifications=B;c.symbols=V;var Ie=c.attr=wt,yt=c.elementClose=Pe;c.elementOpen=ee;var At=c.elementOpenEnd=St,Pt=c.elementOpenStart=Ct;c.elementVoid=_t;var It=c.text=xt;c.key=bt;function De(e){let t=se();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),te().appendChild(t)),ne(),t}let Oe=T.noI18nI18n;function Dt(e){Oe=e}function Ot(){return Oe}const I=Symbol("ComponentMetadata"),b=Object.freeze({has(e,t){return Boolean(e[I]&&Object.prototype.hasOwnProperty.call(e[I],t))},add(e,t){e[I]?Object.assign(e[I],t):e[I]=t},get(e,t,s){return e[I]&&e[I][t]||s}}),Fe=Symbol("ds-web-components:pragma:listeners-attached"),Le="idom-pragma:content-begin",ie="idom-pragma:content-end";function ae(e){for(const t of e)if(typeof t=="function")t();else if(typeof t=="string")It(t);else if(t instanceof Set)ae(Array.from(t));else if(Array.isArray(t)&&t.length>0){let s=se();if(De(Le),s===null){const n=te();for(let i=0;i<t.length;i+=1)n.contains(t[i])||n.appendChild(t[i]),ne()}for(;s&&s.data!==ie;)ne(),s=se();De(ie)}}function r(e,t,...s){if(t){for(const n of Object.keys(t))if(n.toUpperCase()==="DATA-FRAGMENT")return()=>ae(s)}return()=>{Pt(e);const n=[];if(t)for(const a of Object.keys(t))a.toUpperCase()==="CLASSNAME"?Ie("class",t[a]):/^on[A-Z]/.test(a)?n.push(a):Ie(a,t[a]);At(e);const i=te();if(!i[Fe]){for(const a of n)i.addEventListener(a.substr(2).toLowerCase(),t[a]);i[Fe]=!0}ae(s),yt(e)}}function ke(e,t){customElements.get(e)||customElements.define(e,t)}function Ft(...e){for(const t of e)ke(b.get(t,"tag"),t)}function Lt(e){return function(...s){for(const n of s){const i=`${e}${b.get(n,"tag").substr(3)}`;ke(i,n)}}}const re=Symbol("Component Attribute Bindings"),D=Symbol("Component Class Bindings"),G=Symbol("Component Style Bindings"),kt={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){const e=this;for(const t of Object.keys(e[re]||{}))e.setAttribute(t,e[re][t]);for(const t of Object.keys(e[G]||{}))e.style[t]=e[G][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[D]||[]).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 s of b.get(t.constructor,"childQueries",[]))if(!e||e&&s.refresh){const n=s.all?t.querySelectorAll:t.querySelector;t[s.key]=n.call(t,s.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),s=null,n=t.length;for(let i=0;i<t.length;i+=1){const a=t[i];a instanceof Comment&&(a.data===Le?s=i+1:a.data===ie&&(n=i-1))}if(s===null)for(const i of t)i.parentNode.removeChild(i);else t=t.slice(s,n);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(),Nt(e,e.render(Ot())),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,s){const n=this,i=s===""?!0:s;i!==t&&(n.__cbAttributeChanged&&n.__cbAttributeChanged(e,n[e],i),e!=="style"&&(n[e]=i),n.__initialized&&n.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=b.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,s]of t)e[s]=e[s].bind(e);e.__initialized=!0}for(const[s,n]of t)e.addEventListener(s,e[n]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,s]of b.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[s]);e.__stopMutObs()}};function O(e){return t=>{b.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},kt)}}function X(){return(e,t)=>{b.add(e.constructor,{contentProp:t})}}function K(e){return(t,s)=>{Object.defineProperty(t,s,{get(){return Object.defineProperty(this,s,{value:{dispatch:n=>{const i=new CustomEvent(e||s,{detail:n});return this.dispatchEvent(i),i}}}),this[s]},configurable:!0})}}function j(e){return(t,s)=>{const n=b.get(t.constructor,"eventListeners",[]);n.push([e,s]),b.add(t.constructor,{eventListeners:n})}}function p(e){return(t,s)=>{const n=t.constructor,i=s.toLowerCase();if(n.observedAttributes=n.observedAttributes||["classname","className","style"],n.observedAttributes.push(s),n.observedAttributes.push(i),i!==s&&Object.defineProperty(t,s,{get(){return this[i]},set(a){this[i]=a}}),e){const a=Symbol.for(s);Object.defineProperty(t,i,{get(){return this[a]},set(o){let g=o;e===Boolean&&typeof o=="string"&&o.toLowerCase()==="false"?g=!1:g=e(o),this[a]=g}})}}}function Te(e,t,s){return(n,i)=>{const a=b.get(n.constructor,"childQueries",[]);a.push({key:i,selector:e,all:s,refresh:t.refresh}),b.add(n.constructor,{childQueries:a})}}function Q(e,t={}){return Te(e,t)}function Ue(e,t={}){return Te(e,t,!0)}function oe(){return(e,t)=>{const s=Symbol(t);Object.defineProperties(e,{[s]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[s]},set(n){this[s]!==n&&(this[s]=n,this.update())}}})}}exports.MIMEType=void 0;(function(e){e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip"})(exports.MIMEType||(exports.MIMEType={}));var Tt=Object.defineProperty,Ut=Object.getOwnPropertyDescriptor,h=(e,t,s,n)=>{for(var i=n>1?void 0:n?Ut(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Tt(t,s,i),i};const u="sps-file-upload";exports.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[D](){return[u,this.active&&`${u}--active`,this.error&&`${u}--error`,!this.shown&&`${u}--hidden`,this.mini&&`${u}--mini`,this.constrainContentWidth&&`${u}--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(e,t,s){e==="acceptExtensions"&&this.processAcceptExtensions(s),e==="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:e}){const t=this.error?T.SpsIcon.EXCLAMATION_CIRCLE:T.SpsIcon.UPLOAD_CLOUD,s=(this.multiple?e("design-system:fileUpload.instructions_plural"):e("design-system:fileUpload.instructions")).split("|");return r("div",{"data-fragment":!0},r("div",{className:`${u}__content`},this.processing?r("div",{"data-fragment":!0},r("i",{className:"sps-spinner sps-spinner--medium","aria-hidden":"true"}),r("div",{className:`${u}__instructions`},e("design-system:fileUpload.processing"))):r("div",{"data-fragment":!0},r("i",{className:`sps-icon sps-icon-${t} ${u}__icon-primary`,"aria-hidden":"true"}),r("div",{className:`${u}__title`},this.error?r("div",{"data-fragment":!0},e(this.namesOfUnsupportedFiles.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):r("div",{"data-fragment":!0},e("design-system:fileUpload.title",{description:this.description}))),this.error?r("div",{className:`${u}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((n,i)=>{const a=Math.floor(n.length/2);return r("div",{className:`${u}__errored-filename`,key:n},r("span",{className:`${u}__errored-filename-segment`},n.substr(0,a)),r("div",{className:`${u}__errored-filename-segment`},r("span",null,n.substr(a))),i<this.namesOfUnsupportedFiles.length-1?",":"")}))):r("span",null),r("div",{className:`${u}__instructions`},r("div",{"data-fragment":!0},r("span",null,s[0]),r("a",{href:"",onClick:this.handleBrowseLinkClick},s[1]),r("span",null,s[2]))),r("div",{className:`${u}__requirements`},this.acceptExtensions?r("span",null,"("," ",e("design-system:fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription})," ",")"):"",this.maxSize?r("span",null,"("," ",e("design-system:fileUpload.maximumSize",{size:this.maxSize})," ",")"):"",this.customRequirement?r("span",null," ",this.customRequirement," "):""),this.downloadLabel&&r("div",{className:`sps-button sps-button--link ${u}__download-button`,onClick:this.handleDownloadButtonClick},r("button",{type:"button"},r("i",{className:"sps-icon sps-icon-download-cloud","aria-hidden":"true"})," ",this.downloadLabel)))),this.dismissable&&!this.processing&&r("div",{className:`sps-button sps-button--icon ${u}__close-button`,onClick:this.dismiss},r("button",{type:"button",title:e("design-system:fileUpload.close")},r("i",{className:"sps-icon sps-icon-x","aria-hidden":"true"}))),r("form",null,r("input",{type:"file",accept:this.accept||"*/*",multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(e){try{this.maxSizeBytes=l.parseFileSize(e)}catch{throw new Error(`Could not parse "${e}" as a file size.`)}}processAcceptExtensions(e){const s=(Array.isArray(e)?e:e.trim().split(/\s?,\s?/)).map(i=>i.replace(/^\./,"")),n=s.map(i=>`.${i}`.toLowerCase());this.acceptExtensionsDescription=n.map((i,a)=>a>0&&a===n.length-1?`or ${i}`:i).join(n.length>2?", ":" "),this.acceptMIMETypes.clear();for(const i of s)for(const a of exports.MIMEType[i.toUpperCase()].split(","))this.acceptMIMETypes.add(a);this.accept=n.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(e){this.namesOfUnsupportedFiles=[];const t=Array.from(e);for(const s of t)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=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(t=>t.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)}};exports.SpsFileUploadComponent.displayName=u;exports.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>"}};h([p()],exports.SpsFileUploadComponent.prototype,"description",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"multiple",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"shown",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"dismissable",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"processing",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"mini",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"constrainContentWidth",2);h([p()],exports.SpsFileUploadComponent.prototype,"downloadLabel",2);h([p()],exports.SpsFileUploadComponent.prototype,"acceptExtensions",2);h([p()],exports.SpsFileUploadComponent.prototype,"maxSize",2);h([p()],exports.SpsFileUploadComponent.prototype,"customRequirement",2);h([K()],exports.SpsFileUploadComponent.prototype,"selection",2);h([K()],exports.SpsFileUploadComponent.prototype,"dismissal",2);h([K()],exports.SpsFileUploadComponent.prototype,"download",2);h([Q("input[type='file']")],exports.SpsFileUploadComponent.prototype,"fileInput",2);h([j("dragover")],exports.SpsFileUploadComponent.prototype,"handleDragOver",1);h([j("dragenter")],exports.SpsFileUploadComponent.prototype,"handleDragEnter",1);h([j("dragleave")],exports.SpsFileUploadComponent.prototype,"handleDragLeave",1);h([j("drop")],exports.SpsFileUploadComponent.prototype,"handleDrop",1);exports.SpsFileUploadComponent=h([O({tag:u})],exports.SpsFileUploadComponent);const Ee={basic:{label:"Basic File Upload",description:l.code`
|
|
183
|
+
*/d.applyAttr=Ee;d.applyProp=Ie;d.attributes=$;d.close=Ve;var be=d.currentElement=Lt,le=d.currentPointer=Tt;d.open=He;var Vt=d.patch=Ue;d.patchInner=Ue;d.patchOuter=Et;d.skip=Bt;var ce=d.skipNode=ve;d.getKey=yt;d.clearCache=Be;d.importNode=Te;d.isDataInitialized=xt;d.notifications=B;d.symbols=ue;var ye=d.attr=jt,qt=d.elementClose=qe;d.elementOpen=Ce;var Gt=d.elementOpenEnd=zt,Xt=d.elementOpenStart=Ut;d.elementVoid=Wt;var Kt=d.text=Ht;d.key=$t;function Ae(e){let t=le();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),be().appendChild(t)),ce(),t}let Ge=U.noI18nI18n;function Qt(e){Ge=e}function Zt(){return Ge}const O=Symbol("ComponentMetadata"),_=Object.freeze({has(e,t){return Boolean(e[O]&&Object.prototype.hasOwnProperty.call(e[O],t))},add(e,t){e[O]?Object.assign(e[O],t):e[O]=t},get(e,t,n){return e[O]&&e[O][t]||n}}),Oe=Symbol("ds-web-components:pragma:listeners-attached"),Xe="idom-pragma:content-begin",pe="idom-pragma:content-end";function de(e){for(const t of e)if(typeof t=="function")t();else if(typeof t=="string")Kt(t);else if(t instanceof Set)de(Array.from(t));else if(Array.isArray(t)&&t.length>0){let n=le();if(Ae(Xe),n===null){const s=be();for(let i=0;i<t.length;i+=1)s.contains(t[i])||s.appendChild(t[i]),ce()}for(;n&&n.data!==pe;)ce(),n=le();Ae(pe)}}function o(e,t,...n){if(t){for(const s of Object.keys(t))if(s.toUpperCase()==="DATA-FRAGMENT")return()=>de(n)}return()=>{Xt(e);const s=[];if(t)for(const r of Object.keys(t))r.toUpperCase()==="CLASSNAME"?ye("class",t[r]):/^on[A-Z]/.test(r)?s.push(r):ye(r,t[r]);Gt(e);const i=be();if(!i[Oe]){for(const r of s)i.addEventListener(r.substr(2).toLowerCase(),t[r]);i[Oe]=!0}de(n),qt(e)}}function Ke(e,t){customElements.get(e)||customElements.define(e,t)}function Jt(...e){for(const t of e)Ke(_.get(t,"tag"),t)}function Yt(e){return function(...n){for(const s of n){const i=`${e}${_.get(s,"tag").substr(3)}`;Ke(i,s)}}}const he=Symbol("Component Attribute Bindings"),D=Symbol("Component Class Bindings"),M=Symbol("Component Style Bindings"),Mt={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){const e=this;for(const t of Object.keys(e[he]||{}))e.setAttribute(t,e[he][t]);for(const t of Object.keys(e[M]||{}))e.style[t]=e[M][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[D]||[]).filter(Boolean))e.__managedClasses.add(t),e.classList.add(t);for(const t of(e.getAttribute("classname")||"").split(/\w+/).filter(Boolean))e.classList.add(t)},__updateChildQueries(e){const t=this;for(const n of _.get(t.constructor,"childQueries",[]))if(!e||e&&n.refresh){const s=n.all?t.querySelectorAll:t.querySelector;t[n.key]=s.call(t,n.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),n=null,s=t.length;for(let i=0;i<t.length;i+=1){const r=t[i];r instanceof Comment&&(r.data===Xe?n=i+1:r.data===pe&&(s=i-1))}if(n===null)for(const i of t)i.parentNode.removeChild(i);else t=t.slice(n,s);_.has(e.constructor,"contentProp")&&(e[_.get(e.constructor,"contentProp")]=t)},__startMutObs(){const e=this;e.__observer||(e.__observer=new MutationObserver(()=>{e.contentChangedCallback&&e.contentChangedCallback(),e.__gatherChildren(),e.update()})),e.__observer.observe(e,{childList:!0})},__stopMutObs(){const e=this;e.__observer&&e.__observer.disconnect()},__doRender(){const e=this;e.__stopMutObs(),Vt(e,e.render(Zt())),e.__startMutObs()},update(){const e=this;e.__initialized&&!e.__queuedUpdate&&(e.__queuedUpdate=window.requestAnimationFrame(()=>{e.__doRender(),setTimeout(()=>{e.__updateChildQueries(!0),e.__updateHostBindings()},0),e.__queuedUpdate=null}))},attributeChangedCallback(e,t,n){const s=this,i=n===""?!0:n;i!==t&&(s.__cbAttributeChanged&&s.__cbAttributeChanged(e,s[e],i),e!=="style"&&(s[e]=i),s.__initialized&&s.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=_.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,n]of t)e[n]=e[n].bind(e);e.__initialized=!0}for(const[n,s]of t)e.addEventListener(n,e[s]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,n]of _.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[n]);e.__stopMutObs()}};function E(e){return t=>{_.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},Mt)}}function se(){return(e,t)=>{_.add(e.constructor,{contentProp:t})}}function ie(e){return(t,n)=>{Object.defineProperty(t,n,{get(){return Object.defineProperty(this,n,{value:{dispatch:s=>{const i=new CustomEvent(e||n,{detail:s});return this.dispatchEvent(i),i}}}),this[n]},configurable:!0})}}function z(e){return(t,n)=>{const s=_.get(t.constructor,"eventListeners",[]);s.push([e,n]),_.add(t.constructor,{eventListeners:s})}}function p(e){return(t,n)=>{const s=t.constructor,i=n.toLowerCase();if(s.observedAttributes=s.observedAttributes||["classname","className","style"],s.observedAttributes.push(n),s.observedAttributes.push(i),i!==n&&Object.defineProperty(t,n,{get(){return this[i]},set(r){this[i]=r}}),e){const r=Symbol.for(n);Object.defineProperty(t,i,{get(){return this[r]},set(l){let h=l;e===Boolean&&typeof l=="string"&&l.toLowerCase()==="false"?h=!1:h=e(l),this[r]=h}})}}}function Qe(e,t,n){return(s,i)=>{const r=_.get(s.constructor,"childQueries",[]);r.push({key:i,selector:e,all:n,refresh:t.refresh}),_.add(s.constructor,{childQueries:r})}}function re(e,t={}){return Qe(e,t)}function Ze(e,t={}){return Qe(e,t,!0)}function we(){return(e,t)=>{const n=Symbol(t);Object.defineProperties(e,{[n]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[n]},set(s){this[n]!==s&&(this[n]=s,this.update())}}})}}var en=Object.defineProperty,tn=Object.getOwnPropertyDescriptor,A=(e,t,n,s)=>{for(var i=s>1?void 0:s?tn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&en(t,n,i),i},Je=(e=>(e.FIT="fit",e.FILL="fill",e))(Je||{});const F="sps-photo";var H;exports.SpsPhotoComponent=(H=class extends HTMLElement{constructor(){super(...arguments);a(this,"src");a(this,"altText");a(this,"mode","fill");a(this,"placeholderIcon");a(this,"width");a(this,"fitWidth");a(this,"imageInternal");a(this,"waitForWidthInterval");a(this,"waitForImgHeightInterval")}get image(){return this.imageInternal}set image(t){this.imageInternal=t,t&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const n=t.getBoundingClientRect();if(n.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s=!0;s=n.width/n.height>1,this.fitWidth=s===(this.mode==="fit")}},1e3/60))}get[D](){return[F,this.fitWidth?`${F}--fit-width`:`${F}--fit-height`,this.placeholderIcon&&`${F}--placeholder`]}get[M](){return{fontSize:`${this.width*.05}rem`,width:`${this.width}rem`,height:`${.75*this.width}rem`}}connectedCallback(){this.waitForWidthInterval=window.setInterval(()=>{const t=this.getBoundingClientRect();t.width&&(this.setWidth(t.width),window.clearInterval(this.waitForWidthInterval),delete this.waitForWidthInterval)},1e3/60)}disconnectedCallback(){this.waitForWidthInterval&&window.clearInterval(this.waitForWidthInterval),this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval)}render(){return this.src?this.width?o("img",{src:this.src,alt:this.altText}):o("span",null):o("i",{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(t){if(t&&!this.width){const n=document.body.parentElement.style.fontSize||"16px",s=Number(n.substr(0,n.length-2));this.width=t/s}}},a(H,"displayName",F),a(H,"props",{src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"}),H);A([p()],exports.SpsPhotoComponent.prototype,"src",2);A([p()],exports.SpsPhotoComponent.prototype,"altText",2);A([p()],exports.SpsPhotoComponent.prototype,"mode",2);A([p()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);A([we()],exports.SpsPhotoComponent.prototype,"width",2);A([we()],exports.SpsPhotoComponent.prototype,"fitWidth",2);A([re("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=A([E({tag:F})],exports.SpsPhotoComponent);const Ye={sizing:{label:"Sizing",description:c.code`
|
|
184
|
+
<p>
|
|
185
|
+
Photos are block elements, so a photo fills its container's width unless
|
|
186
|
+
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
187
|
+
photos have been placed in cards which have different widths in the 12
|
|
188
|
+
column grid.
|
|
189
|
+
</p>
|
|
190
|
+
`,examples:{basic:{jsx:c.code`
|
|
191
|
+
<div className="sfg-row">
|
|
192
|
+
<div className="sfg-col-2">
|
|
193
|
+
<sps-card>
|
|
194
|
+
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
195
|
+
</sps-card>
|
|
196
|
+
</div>
|
|
197
|
+
<div className="sfg-col-4">
|
|
198
|
+
<sps-card>
|
|
199
|
+
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
200
|
+
</sps-card>
|
|
201
|
+
</div>
|
|
202
|
+
<div className="sfg-col-6">
|
|
203
|
+
<sps-card>
|
|
204
|
+
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
205
|
+
</sps-card>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
`}}},displayMode:{label:"Fill vs. Fit",description:c.code`
|
|
209
|
+
<p>
|
|
210
|
+
There are two display modes available:
|
|
211
|
+
<ul>
|
|
212
|
+
<li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
|
|
213
|
+
<li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
|
|
214
|
+
</ul>
|
|
215
|
+
</p>
|
|
216
|
+
`,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:c.code`
|
|
217
|
+
<div className="sfg-row">
|
|
218
|
+
<div className="sfg-col-4">
|
|
219
|
+
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
220
|
+
</div>
|
|
221
|
+
<div className="sfg-col-4">
|
|
222
|
+
<sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
`},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:c.code`
|
|
226
|
+
<div className="sfg-row">
|
|
227
|
+
<div className="sfg-col-4">
|
|
228
|
+
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
229
|
+
</div>
|
|
230
|
+
<div className="sfg-col-4">
|
|
231
|
+
<sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
`}}},placeholder:{label:"Placeholders",description:c.code`
|
|
235
|
+
<p>
|
|
236
|
+
When an image is not provided for a particular use case (such as a user avatar,
|
|
237
|
+
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
238
|
+
|
|
239
|
+
The placeholder's icon, selected from our SPS icon set, should represent the
|
|
240
|
+
type of image it is substituting for.
|
|
241
|
+
</p>
|
|
242
|
+
`,examples:{general:{description:"<p>General Photo</p>",jsx:c.code`
|
|
243
|
+
<div className="sfg-row">
|
|
244
|
+
<div className="sfg-col-3">
|
|
245
|
+
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
`},photoAlt:{description:"<p>Photo Alt</p>",jsx:c.code`
|
|
249
|
+
<div className="sfg-row">
|
|
250
|
+
<div className="sfg-col-3">
|
|
251
|
+
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
`},user:{description:"<p>User / Single Person</p>",jsx:c.code`
|
|
255
|
+
<div className="sfg-row">
|
|
256
|
+
<div className="sfg-col-3">
|
|
257
|
+
<sps-photo placeholderIcon="user"></sps-photo>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
`},group:{description:"<p>Group / Multiple People</p>",jsx:c.code`
|
|
261
|
+
<div className="sfg-row">
|
|
262
|
+
<div className="sfg-col-3">
|
|
263
|
+
<sps-photo placeholderIcon="group"></sps-photo>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
`},company:{description:"<p>Company / Building</p>",jsx:c.code`
|
|
267
|
+
<div className="sfg-row">
|
|
268
|
+
<div className="sfg-col-3">
|
|
269
|
+
<sps-photo placeholderIcon="building"></sps-photo>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
`}}}},nn={Photos:{components:[exports.SpsPhotoComponent],examples:Ye}};var _e=(e=>(e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip",e))(_e||{}),sn=Object.defineProperty,rn=Object.getOwnPropertyDescriptor,g=(e,t,n,s)=>{for(var i=s>1?void 0:s?rn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&sn(t,n,i),i};const m="sps-file-upload";var V;exports.SpsFileUploadComponent=(V=class extends HTMLElement{constructor(){super();a(this,"description");a(this,"multiple");a(this,"shown",!0);a(this,"dismissable");a(this,"processing");a(this,"mini");a(this,"constrainContentWidth");a(this,"downloadLabel");a(this,"acceptExtensions");a(this,"maxSize");a(this,"customRequirement");a(this,"selection");a(this,"dismissal");a(this,"download");a(this,"fileInput");a(this,"files",[]);a(this,"accept");a(this,"acceptMIMETypes",new Set);a(this,"acceptExtensionsDescription");a(this,"maxSizeBytes");a(this,"active",!1);a(this,"error",!1);a(this,"namesOfUnsupportedFiles",[]);this.handleBrowseLinkClick=this.handleBrowseLinkClick.bind(this),this.handleDownloadButtonClick=this.handleDownloadButtonClick.bind(this),this.handleFileInputChange=this.handleFileInputChange.bind(this),this.dismiss=this.dismiss.bind(this)}get[D](){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?U.SpsIcon.EXCLAMATION_CIRCLE:U.SpsIcon.UPLOAD_CLOUD,s=(this.multiple?t("design-system:fileUpload.instructions_plural"):t("design-system:fileUpload.instructions")).split("|");return o("div",{"data-fragment":!0},o("div",{className:`${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"))):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")):o("div",{"data-fragment":!0},t("design-system:fileUpload.title",{description: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})," ",")"):"",this.maxSize?o("span",null,"("," ",t("design-system:fileUpload.maximumSize",{size:this.maxSize})," ",")"):"",this.customRequirement?o("span",null," ",this.customRequirement," "):""),this.downloadLabel&&o("div",{className:`sps-button sps-button--link ${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")},o("i",{className:"sps-icon sps-icon-x","aria-hidden":"true"}))),o("form",null,o("input",{type:"file",accept:this.accept||"*/*",multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(t){try{this.maxSizeBytes=c.parseFileSize(t)}catch{throw new Error(`Could not parse "${t}" as a file size.`)}}processAcceptExtensions(t){const s=(Array.isArray(t)?t:t.trim().split(/\s?,\s?/)).map(r=>r.replace(/^\./,"")),i=s.map(r=>`.${r}`.toLowerCase());this.acceptExtensionsDescription=i.map((r,l)=>l>0&&l===i.length-1?`or ${r}`:r).join(i.length>2?", ":" "),this.acceptMIMETypes.clear();for(const r of s)for(const l of _e[r.toUpperCase()].split(","))this.acceptMIMETypes.add(l);this.accept=i.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(t){this.namesOfUnsupportedFiles=[];const n=Array.from(t);for(const s of n)this.acceptExtensions&&!this.acceptMIMETypes.has(s.type)&&this.namesOfUnsupportedFiles.push(s.name),this.maxSize&&s.size>this.maxSizeBytes&&this.namesOfUnsupportedFiles.indexOf(s.name)===-1&&this.namesOfUnsupportedFiles.push(s.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=n,this.selection.dispatch(n))}handleDragOver(t){t.preventDefault(),t.stopPropagation()}handleDragEnter(t){t.preventDefault(),this.active=!0,this.error=!1,this.update()}handleDragLeave(t){t.preventDefault(),this.active=!1,this.update()}handleDrop(t){t.preventDefault(),t.stopPropagation(),this.active=!1,t.dataTransfer.items?this.selectFiles(Array.from(t.dataTransfer.items).map(n=>n.getAsFile())):this.selectFiles(t.dataTransfer.files),this.update()}handleBrowseLinkClick(t){t.preventDefault(),this.error=!1,this.update(),this.fileInput.click()}handleDownloadButtonClick(){this.download.dispatch()}handleFileInputChange(t){t.stopPropagation(),this.selectFiles(t.target.files)}},a(V,"displayName",m),a(V,"props",{description:"string",multiple:"boolean",dismissable:"boolean",processing:"boolean",mini:"boolean",downloadLabel:"string",acceptExtensions:"Array<string> | string",maxSize:"string",customRequirement:"string",selection:{event:!0,type:"CustomEvent<Array<File>>"},dismissal:{event:!0,type:"CustomEvent<void>"},download:{event:!0,type:"CustomEvent<void>"}}),V);g([p()],exports.SpsFileUploadComponent.prototype,"description",2);g([p(Boolean)],exports.SpsFileUploadComponent.prototype,"multiple",2);g([p(Boolean)],exports.SpsFileUploadComponent.prototype,"shown",2);g([p(Boolean)],exports.SpsFileUploadComponent.prototype,"dismissable",2);g([p(Boolean)],exports.SpsFileUploadComponent.prototype,"processing",2);g([p(Boolean)],exports.SpsFileUploadComponent.prototype,"mini",2);g([p(Boolean)],exports.SpsFileUploadComponent.prototype,"constrainContentWidth",2);g([p()],exports.SpsFileUploadComponent.prototype,"downloadLabel",2);g([p()],exports.SpsFileUploadComponent.prototype,"acceptExtensions",2);g([p()],exports.SpsFileUploadComponent.prototype,"maxSize",2);g([p()],exports.SpsFileUploadComponent.prototype,"customRequirement",2);g([ie()],exports.SpsFileUploadComponent.prototype,"selection",2);g([ie()],exports.SpsFileUploadComponent.prototype,"dismissal",2);g([ie()],exports.SpsFileUploadComponent.prototype,"download",2);g([re("input[type='file']")],exports.SpsFileUploadComponent.prototype,"fileInput",2);g([z("dragover")],exports.SpsFileUploadComponent.prototype,"handleDragOver",1);g([z("dragenter")],exports.SpsFileUploadComponent.prototype,"handleDragEnter",1);g([z("dragleave")],exports.SpsFileUploadComponent.prototype,"handleDragLeave",1);g([z("drop")],exports.SpsFileUploadComponent.prototype,"handleDrop",1);exports.SpsFileUploadComponent=g([E({tag:m})],exports.SpsFileUploadComponent);const an={basic:{label:"Basic File Upload",description:c.code`
|
|
182
273
|
<p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
|
|
183
|
-
`,examples:{single:{description:"<p>Single file upload</p>",react:
|
|
274
|
+
`,examples:{single:{description:"<p>Single file upload</p>",react:c.code`
|
|
184
275
|
function Component() {
|
|
185
276
|
const ref = React.useRef()
|
|
186
277
|
|
|
@@ -203,7 +294,7 @@
|
|
|
203
294
|
</div>
|
|
204
295
|
)
|
|
205
296
|
}
|
|
206
|
-
`},multiple:{description:"<p>Multiple file upload</p>",react:
|
|
297
|
+
`},multiple:{description:"<p>Multiple file upload</p>",react:c.code`
|
|
207
298
|
function Component() {
|
|
208
299
|
const ref = React.useRef()
|
|
209
300
|
|
|
@@ -226,9 +317,9 @@
|
|
|
226
317
|
</div>
|
|
227
318
|
)
|
|
228
319
|
}
|
|
229
|
-
`}}},restrictions:{label:"Restrictions",description:
|
|
320
|
+
`}}},restrictions:{label:"Restrictions",description:c.code`
|
|
230
321
|
<p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
|
|
231
|
-
`,examples:{size:{description:"<p>Maximum size</p>",react:
|
|
322
|
+
`,examples:{size:{description:"<p>Maximum size</p>",react:c.code`
|
|
232
323
|
function Component() {
|
|
233
324
|
const ref = React.useRef()
|
|
234
325
|
|
|
@@ -251,7 +342,7 @@
|
|
|
251
342
|
</div>
|
|
252
343
|
)
|
|
253
344
|
}
|
|
254
|
-
`},type:{description:"<p>File type whitelist</p>",react:
|
|
345
|
+
`},type:{description:"<p>File type whitelist</p>",react:c.code`
|
|
255
346
|
function Component() {
|
|
256
347
|
const ref = React.useRef()
|
|
257
348
|
|
|
@@ -279,7 +370,7 @@
|
|
|
279
370
|
</div>
|
|
280
371
|
)
|
|
281
372
|
}
|
|
282
|
-
`},both:{description:"<p>Both restrictions</p>",react:
|
|
373
|
+
`},both:{description:"<p>Both restrictions</p>",react:c.code`
|
|
283
374
|
function Component() {
|
|
284
375
|
const ref = React.useRef()
|
|
285
376
|
|
|
@@ -308,10 +399,10 @@
|
|
|
308
399
|
</div>
|
|
309
400
|
)
|
|
310
401
|
}
|
|
311
|
-
`}}},dismissable:{label:"Dismissable",description:
|
|
402
|
+
`}}},dismissable:{label:"Dismissable",description:c.code`
|
|
312
403
|
<p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
|
|
313
404
|
show it again programmatically if you need to.</p>
|
|
314
|
-
`,examples:{dismissable:{react:
|
|
405
|
+
`,examples:{dismissable:{react:c.code`
|
|
315
406
|
function Component() {
|
|
316
407
|
const [showFileUpload, setShowFileUpload] = React.useState(true)
|
|
317
408
|
const ref = React.useRef()
|
|
@@ -344,10 +435,10 @@
|
|
|
344
435
|
</div>
|
|
345
436
|
)
|
|
346
437
|
}
|
|
347
|
-
`}}},downloadButton:{label:"Download Button",description:
|
|
438
|
+
`}}},downloadButton:{label:"Download Button",description:c.code`
|
|
348
439
|
<p>You can optionally provide a button to download a file. Typically this will be a template for
|
|
349
440
|
whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
|
|
350
|
-
`,examples:{downloadButton:{react:
|
|
441
|
+
`,examples:{downloadButton:{react:c.code`
|
|
351
442
|
function Component() {
|
|
352
443
|
const ref = React.useRef()
|
|
353
444
|
|
|
@@ -375,10 +466,10 @@
|
|
|
375
466
|
</div>
|
|
376
467
|
)
|
|
377
468
|
}
|
|
378
|
-
`}}},mini:{label:"Mini File Upload",description:
|
|
469
|
+
`}}},mini:{label:"Mini File Upload",description:c.code`
|
|
379
470
|
<p>When the file upload component is to be placed in a small container,
|
|
380
471
|
it should be marked as a mini file upload so that everything fits.</p>
|
|
381
|
-
`,examples:{single:{react:
|
|
472
|
+
`,examples:{single:{react:c.code`
|
|
382
473
|
function Component() {
|
|
383
474
|
const ref = React.useRef()
|
|
384
475
|
|
|
@@ -401,11 +492,11 @@
|
|
|
401
492
|
</div>
|
|
402
493
|
)
|
|
403
494
|
}
|
|
404
|
-
`}}},constrainContentWidth:{label:"Constrain Content Width",description:
|
|
495
|
+
`}}},constrainContentWidth:{label:"Constrain Content Width",description:c.code`
|
|
405
496
|
<p>If this prop is provided, the content will be restricted to 50% of
|
|
406
497
|
the overall width of the component. Consult your product designer if
|
|
407
498
|
you're not sure whether to use this variant.</p>
|
|
408
|
-
`,examples:{constrainContentWidth:{react:
|
|
499
|
+
`,examples:{constrainContentWidth:{react:c.code`
|
|
409
500
|
function Component() {
|
|
410
501
|
const ref = React.useRef()
|
|
411
502
|
|
|
@@ -428,123 +519,7 @@
|
|
|
428
519
|
</div>
|
|
429
520
|
)
|
|
430
521
|
}
|
|
431
|
-
`}}}};var
|
|
432
|
-
<p>Navigation tabs native web component</p>
|
|
433
|
-
`,examples:{basic:{react:l.code`
|
|
434
|
-
function DemoComponent() {
|
|
435
|
-
const tabs = [
|
|
436
|
-
{ label: "Tab A", icon: "chart-line" },
|
|
437
|
-
{ label: "Tab B", icon: "chart-bar", tag: "12" },
|
|
438
|
-
{ label: "Tab C", icon: "chart-pie" }
|
|
439
|
-
]
|
|
440
|
-
|
|
441
|
-
const [activeTab, setActiveTab] = React.useState(0)
|
|
442
|
-
|
|
443
|
-
return (
|
|
444
|
-
<sps-nav-tab-set>
|
|
445
|
-
{tabs.map((tab, index) => (
|
|
446
|
-
<sps-nav-tab
|
|
447
|
-
key={index}
|
|
448
|
-
icon={tab.icon}
|
|
449
|
-
label={tab.label}
|
|
450
|
-
tag={tab.tag}
|
|
451
|
-
active={index === activeTab || null}
|
|
452
|
-
onClick={() => setActiveTab(index)}
|
|
453
|
-
/>
|
|
454
|
-
))}
|
|
455
|
-
</sps-nav-tab-set>
|
|
456
|
-
)
|
|
457
|
-
}
|
|
458
|
-
`}}}};var jt=Object.defineProperty,zt=Object.getOwnPropertyDescriptor,y=(e,t,s,n)=>{for(var i=n>1?void 0:n?zt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&jt(t,s,i),i};exports.SpsPhotoDisplayMode=void 0;(function(e){e.FIT="fit",e.FILL="fill"})(exports.SpsPhotoDisplayMode||(exports.SpsPhotoDisplayMode={}));const k="sps-photo";exports.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments);this.mode=exports.SpsPhotoDisplayMode.FILL}get image(){return this.imageInternal}set image(e){this.imageInternal=e,e&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const t=e.getBoundingClientRect();if(t.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s=!0;s=t.width/t.height>1,this.fitWidth=s===(this.mode===exports.SpsPhotoDisplayMode.FIT)}},1e3/60))}get[D](){return[k,this.fitWidth?`${k}--fit-width`:`${k}--fit-height`,this.placeholderIcon&&`${k}--placeholder`]}get[G](){return{fontSize:`${this.width*.05}rem`,width:`${this.width}rem`,height:`${.75*this.width}rem`}}connectedCallback(){this.waitForWidthInterval=window.setInterval(()=>{const 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?r("img",{src:this.src,alt:this.altText}):r("span",null):r("i",{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(e){if(e&&!this.width){const t=document.body.parentElement.style.fontSize||"16px",s=Number(t.substr(0,t.length-2));this.width=e/s}}};exports.SpsPhotoComponent.displayName=k;exports.SpsPhotoComponent.props={src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"};y([p()],exports.SpsPhotoComponent.prototype,"src",2);y([p()],exports.SpsPhotoComponent.prototype,"altText",2);y([p()],exports.SpsPhotoComponent.prototype,"mode",2);y([p()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);y([oe()],exports.SpsPhotoComponent.prototype,"width",2);y([oe()],exports.SpsPhotoComponent.prototype,"fitWidth",2);y([Q("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=y([O({tag:k})],exports.SpsPhotoComponent);const $e={sizing:{label:"Sizing",description:l.code`
|
|
459
|
-
<p>
|
|
460
|
-
Photos are block elements, so a photo fills its container's width unless
|
|
461
|
-
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
462
|
-
photos have been placed in cards which have different widths in the 12
|
|
463
|
-
column grid.
|
|
464
|
-
</p>
|
|
465
|
-
`,examples:{basic:{jsx:l.code`
|
|
466
|
-
<div className="sfg-row">
|
|
467
|
-
<div className="sfg-col-2">
|
|
468
|
-
<sps-card>
|
|
469
|
-
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
470
|
-
</sps-card>
|
|
471
|
-
</div>
|
|
472
|
-
<div className="sfg-col-4">
|
|
473
|
-
<sps-card>
|
|
474
|
-
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
475
|
-
</sps-card>
|
|
476
|
-
</div>
|
|
477
|
-
<div className="sfg-col-6">
|
|
478
|
-
<sps-card>
|
|
479
|
-
<sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
|
|
480
|
-
</sps-card>
|
|
481
|
-
</div>
|
|
482
|
-
</div>
|
|
483
|
-
`}}},displayMode:{label:"Fill vs. Fit",description:l.code`
|
|
484
|
-
<p>
|
|
485
|
-
There are two display modes available:
|
|
486
|
-
<ul>
|
|
487
|
-
<li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
|
|
488
|
-
<li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
|
|
489
|
-
</ul>
|
|
490
|
-
</p>
|
|
491
|
-
`,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:l.code`
|
|
492
|
-
<div className="sfg-row">
|
|
493
|
-
<div className="sfg-col-4">
|
|
494
|
-
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
495
|
-
</div>
|
|
496
|
-
<div className="sfg-col-4">
|
|
497
|
-
<sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
|
|
498
|
-
</div>
|
|
499
|
-
</div>
|
|
500
|
-
`},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:l.code`
|
|
501
|
-
<div className="sfg-row">
|
|
502
|
-
<div className="sfg-col-4">
|
|
503
|
-
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
504
|
-
</div>
|
|
505
|
-
<div className="sfg-col-4">
|
|
506
|
-
<sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
|
|
507
|
-
</div>
|
|
508
|
-
</div>
|
|
509
|
-
`}}},placeholder:{label:"Placeholders",description:l.code`
|
|
510
|
-
<p>
|
|
511
|
-
When an image is not provided for a particular use case (such as a user avatar,
|
|
512
|
-
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
513
|
-
|
|
514
|
-
The placeholder's icon, selected from our SPS icon set, should represent the
|
|
515
|
-
type of image it is substituting for.
|
|
516
|
-
</p>
|
|
517
|
-
`,examples:{general:{description:"<p>General Photo</p>",jsx:l.code`
|
|
518
|
-
<div className="sfg-row">
|
|
519
|
-
<div className="sfg-col-3">
|
|
520
|
-
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
521
|
-
</div>
|
|
522
|
-
</div>
|
|
523
|
-
`},photoAlt:{description:"<p>Photo Alt</p>",jsx:l.code`
|
|
524
|
-
<div className="sfg-row">
|
|
525
|
-
<div className="sfg-col-3">
|
|
526
|
-
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
527
|
-
</div>
|
|
528
|
-
</div>
|
|
529
|
-
`},user:{description:"<p>User / Single Person</p>",jsx:l.code`
|
|
530
|
-
<div className="sfg-row">
|
|
531
|
-
<div className="sfg-col-3">
|
|
532
|
-
<sps-photo placeholderIcon="user"></sps-photo>
|
|
533
|
-
</div>
|
|
534
|
-
</div>
|
|
535
|
-
`},group:{description:"<p>Group / Multiple People</p>",jsx:l.code`
|
|
536
|
-
<div className="sfg-row">
|
|
537
|
-
<div className="sfg-col-3">
|
|
538
|
-
<sps-photo placeholderIcon="group"></sps-photo>
|
|
539
|
-
</div>
|
|
540
|
-
</div>
|
|
541
|
-
`},company:{description:"<p>Company / Building</p>",jsx:l.code`
|
|
542
|
-
<div className="sfg-row">
|
|
543
|
-
<div className="sfg-col-3">
|
|
544
|
-
<sps-photo placeholderIcon="building"></sps-photo>
|
|
545
|
-
</div>
|
|
546
|
-
</div>
|
|
547
|
-
`}}}},Wt={"File Upload":{components:[exports.SpsFileUploadComponent],examples:Ee},"Tabbed Navigation":{components:[exports.SpsNavTabComponent,exports.SpsNavTabSetComponent],examples:Re},Photos:{components:[exports.SpsPhotoComponent],examples:$e}};var Ht=Object.defineProperty,qt=Object.getOwnPropertyDescriptor,N=(e,t,s,n)=>{for(var i=n>1?void 0:n?qt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Ht(t,s,i),i};const w="sps-insight-card";exports.SpsInsightCardComponent=class extends HTMLElement{constructor(){super(...arguments);this.kind=T.SpsInsightCardKind.GENERAL}get[D](){return[w,`${w}--${this.kind}`,this.detail&&this.detail.children.length?`${w}--has-detail`:null]}render({t:e}){const t=r("div",{className:`${w}__metric-count`},this.metric),s=r("div",{className:`${w}__description`},r("div",{className:`${w}__title`,style:{"-webkit-box-orient":"vertical"}},this.title),r("div",{className:`${w}__detail`},this.content)),[n,i,a]=(this.partnerCount?e("design-system:insightCard.partnerCount",{count:this.partnerCount,total:this.totalPartners}):"").split("|");return r("div",{"data-fragment":!0},r("div",{className:`${w}__body`},this.icon?r("i",{className:`sps-icon sps-icon-${this.icon}`}):r("i",{className:`sps-icon sps-icon-${T.SpsInsightCardIcons[this.kind]}`}),t,s),this.partnerCount&&r("div",{className:`${w}__partner-count`},this.partnerCount===this.totalPartners?r("div",null,e("design-system:insightCard.all")):r("div",{"data-fragment":!0},r("div",null,n),r("div",null,i),r("div",null,a)),r("div",{className:`${w}__partners-text`},e("design-system:insightCard.partners"))))}};exports.SpsInsightCardComponent.displayName=w;exports.SpsInsightCardComponent.props={icon:"SpsIcon",kind:"SpsInsightCardKind",title:"string",metric:"number",partnerCount:"number",totalPartners:"number",secondary:"boolean"};N([p()],exports.SpsInsightCardComponent.prototype,"icon",2);N([p()],exports.SpsInsightCardComponent.prototype,"kind",2);N([p()],exports.SpsInsightCardComponent.prototype,"title",2);N([p()],exports.SpsInsightCardComponent.prototype,"metric",2);N([p()],exports.SpsInsightCardComponent.prototype,"partnerCount",2);N([p()],exports.SpsInsightCardComponent.prototype,"totalPartners",2);N([p()],exports.SpsInsightCardComponent.prototype,"secondary",2);N([X()],exports.SpsInsightCardComponent.prototype,"content",2);N([Q(`.${w}__detail`)],exports.SpsInsightCardComponent.prototype,"detail",2);exports.SpsInsightCardComponent=N([O({tag:w})],exports.SpsInsightCardComponent);var Gt=Object.defineProperty,Xt=Object.getOwnPropertyDescriptor,le=(e,t,s,n)=>{for(var i=n>1?void 0:n?Xt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Gt(t,s,i),i};const A="sps-insights";exports.SpsInsightsComponent=class extends HTMLElement{constructor(){super();this.content=[],this.showAdditionalInsights=!1,this.toggleAdditionalInsights=this.toggleAdditionalInsights.bind(this)}get[D](){return[A,this.showAdditionalInsights&&`${A}--show-additional`,this.details&&Array.from(this.details).every(e=>!e.textContent)?`${A}--no-details`:null,this.content.length===6?`${A}--break-4`:null,this.content.length===7?`${A}--break-5`:null,this.content.length===8?`${A}--break-5`:null]}toggleAdditionalInsights(){this.showAdditionalInsights=!this.showAdditionalInsights,this.update()}render(){return r("div",{"data-fragment":!0},this.content,this.content.length>10&&r("div",{className:"sps-button sps-button--link",onClick:this.toggleAdditionalInsights},r("button",{type:"button"},this.showAdditionalInsights?"Hide ":"Show ","Additional Insights")))}};exports.SpsInsightsComponent.displayName=A;exports.SpsInsightsComponent.props={};le([X()],exports.SpsInsightsComponent.prototype,"content",2);le([Ue(".sps-insight-card__detail")],exports.SpsInsightsComponent.prototype,"details",2);exports.SpsInsightsComponent=le([O({tag:A})],exports.SpsInsightsComponent);const Kt={basic:{label:"Basic Insight Cards",examples:{basic:{jsx:l.code`
|
|
522
|
+
`}}}};var on=Object.defineProperty,ln=Object.getOwnPropertyDescriptor,x=(e,t,n,s)=>{for(var i=s>1?void 0:s?ln(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&&on(t,n,i),i};const w="sps-insight-card";var q;exports.SpsInsightCardComponent=(q=class extends HTMLElement{constructor(){super(...arguments);a(this,"icon");a(this,"kind",U.SpsInsightCardKind.GENERAL);a(this,"title");a(this,"metric");a(this,"partnerCount");a(this,"totalPartners");a(this,"secondary");a(this,"content");a(this,"detail")}get[D](){return[w,`${w}--${this.kind}`,this.detail&&this.detail.children.length?`${w}--has-detail`:null]}render({t}){const n=o("div",{className:`${w}__metric-count`},this.metric),s=o("div",{className:`${w}__description`},o("div",{className:`${w}__title`,style:{"-webkit-box-orient":"vertical"}},this.title),o("div",{className:`${w}__detail`},this.content)),[i,r,l]=(this.partnerCount?t("design-system:insightCard.partnerCount",{count:this.partnerCount,total:this.totalPartners}):"").split("|");return o("div",{"data-fragment":!0},o("div",{className:`${w}__body`},this.icon?o("i",{className:`sps-icon sps-icon-${this.icon}`}):o("i",{className:`sps-icon sps-icon-${U.SpsInsightCardIcons[this.kind]}`}),n,s),this.partnerCount&&o("div",{className:`${w}__partner-count`},this.partnerCount===this.totalPartners?o("div",null,t("design-system:insightCard.all")):o("div",{"data-fragment":!0},o("div",null,i),o("div",null,r),o("div",null,l)),o("div",{className:`${w}__partners-text`},t("design-system:insightCard.partners"))))}},a(q,"displayName",w),a(q,"props",{icon:"SpsIcon",kind:"SpsInsightCardKind",title:"string",metric:"number",partnerCount:"number",totalPartners:"number",secondary:"boolean"}),q);x([p()],exports.SpsInsightCardComponent.prototype,"icon",2);x([p()],exports.SpsInsightCardComponent.prototype,"kind",2);x([p()],exports.SpsInsightCardComponent.prototype,"title",2);x([p()],exports.SpsInsightCardComponent.prototype,"metric",2);x([p()],exports.SpsInsightCardComponent.prototype,"partnerCount",2);x([p()],exports.SpsInsightCardComponent.prototype,"totalPartners",2);x([p()],exports.SpsInsightCardComponent.prototype,"secondary",2);x([se()],exports.SpsInsightCardComponent.prototype,"content",2);x([re(`.${w}__detail`)],exports.SpsInsightCardComponent.prototype,"detail",2);exports.SpsInsightCardComponent=x([E({tag:w})],exports.SpsInsightCardComponent);var cn=Object.defineProperty,pn=Object.getOwnPropertyDescriptor,Se=(e,t,n,s)=>{for(var i=s>1?void 0:s?pn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&cn(t,n,i),i};const y="sps-insights";var G;exports.SpsInsightsComponent=(G=class extends HTMLElement{constructor(){super();a(this,"content",[]);a(this,"details");a(this,"showAdditionalInsights",!1);this.toggleAdditionalInsights=this.toggleAdditionalInsights.bind(this)}get[D](){return[y,this.showAdditionalInsights&&`${y}--show-additional`,this.details&&Array.from(this.details).every(t=>!t.textContent)?`${y}--no-details`:null,this.content.length===6?`${y}--break-4`:null,this.content.length===7?`${y}--break-5`:null,this.content.length===8?`${y}--break-5`:null]}toggleAdditionalInsights(){this.showAdditionalInsights=!this.showAdditionalInsights,this.update()}render(){return o("div",{"data-fragment":!0},this.content,this.content.length>10&&o("div",{className:"sps-button sps-button--link",onClick:this.toggleAdditionalInsights},o("button",{type:"button"},this.showAdditionalInsights?"Hide ":"Show ","Additional Insights")))}},a(G,"displayName",y),a(G,"props",{}),G);Se([se()],exports.SpsInsightsComponent.prototype,"content",2);Se([Ze(".sps-insight-card__detail")],exports.SpsInsightsComponent.prototype,"details",2);exports.SpsInsightsComponent=Se([E({tag:y})],exports.SpsInsightsComponent);const dn={basic:{label:"Basic Insight Cards",examples:{basic:{jsx:c.code`
|
|
548
523
|
<sps-insights>
|
|
549
524
|
<sps-insight-card kind="general"
|
|
550
525
|
metric="1234"
|
|
@@ -567,7 +542,7 @@
|
|
|
567
542
|
title="Insight Card Title"
|
|
568
543
|
></sps-insight-card>
|
|
569
544
|
</sps-insights>
|
|
570
|
-
`}}},details:{label:"With Details",examples:{details:{jsx:
|
|
545
|
+
`}}},details:{label:"With Details",examples:{details:{jsx:c.code`
|
|
571
546
|
<sps-insights>
|
|
572
547
|
<sps-insight-card kind="general"
|
|
573
548
|
metric="1234"
|
|
@@ -612,7 +587,7 @@
|
|
|
612
587
|
<span className="gray600 font-weight-bold">Detail:</span> 792 units
|
|
613
588
|
</sps-insight-card>
|
|
614
589
|
</sps-insights>
|
|
615
|
-
`}}},partner_count:{label:"Partner Count",examples:{partner_count:{jsx:
|
|
590
|
+
`}}},partner_count:{label:"Partner Count",examples:{partner_count:{jsx:c.code`
|
|
616
591
|
<sps-insights>
|
|
617
592
|
<sps-insight-card kind="general"
|
|
618
593
|
metric="1234"
|
|
@@ -645,7 +620,7 @@
|
|
|
645
620
|
totalPartners="250"
|
|
646
621
|
></sps-insight-card>
|
|
647
622
|
</sps-insights>
|
|
648
|
-
`}}},expansion:{label:"10+ Insight Cards",examples:{expansion:{jsx:
|
|
623
|
+
`}}},expansion:{label:"10+ Insight Cards",examples:{expansion:{jsx:c.code`
|
|
649
624
|
<sps-insights>
|
|
650
625
|
<sps-insight-card kind="general"
|
|
651
626
|
metric="1234"
|
|
@@ -754,10 +729,10 @@
|
|
|
754
729
|
<span className="gray600 font-weight-bold">Detail:</span> 792 units
|
|
755
730
|
</sps-insight-card>
|
|
756
731
|
</sps-insights>
|
|
757
|
-
`}}},events:{label:"Adding a click handler",description:
|
|
732
|
+
`}}},events:{label:"Adding a click handler",description:c.code`
|
|
758
733
|
<p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
|
|
759
734
|
Here is how to do it:</p>
|
|
760
|
-
`,examples:{events:{react:
|
|
735
|
+
`,examples:{events:{react:c.code`
|
|
761
736
|
function Component() {
|
|
762
737
|
function handleClick() {
|
|
763
738
|
window.alert("Insight card clicked");
|
|
@@ -789,7 +764,7 @@
|
|
|
789
764
|
</sps-insights>
|
|
790
765
|
);
|
|
791
766
|
}
|
|
792
|
-
`}}},alternateIcon:{label:"Using alternate icons",examples:{basic:{react:
|
|
767
|
+
`}}},alternateIcon:{label:"Using alternate icons",examples:{basic:{react:c.code`
|
|
793
768
|
function DemoComponent() {
|
|
794
769
|
return (
|
|
795
770
|
<sps-insights>
|
|
@@ -826,4 +801,31 @@
|
|
|
826
801
|
</sps-insights>
|
|
827
802
|
)
|
|
828
803
|
}
|
|
829
|
-
`}}}};
|
|
804
|
+
`}}}};var hn=Object.defineProperty,un=Object.getOwnPropertyDescriptor,I=(e,t,n,s)=>{for(var i=s>1?void 0:s?un(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&&hn(t,n,i),i},X;exports.SpsNavTabComponent=(X=class extends HTMLElement{constructor(){super(...arguments);a(this,"active",!1);a(this,"label","");a(this,"icon");a(this,"tag","");a(this,"href");a(this,"target")}get[D](){return["sps-tabbed-nav__nav-item",this.active&&"sps-tabbed-nav__nav-item--active"]}render(){return o("a",{href:this.href,target:this.target,className:"sps-tabbed-nav__nav-item-link",tabIndex:0},this.icon&&o("i",{className:`sps-icon sps-icon-${this.icon}`}),this.label&&o("span",null,this.label),this.tag&&o("span",{className:"sps-tag sps-tag--default"},this.tag))}},a(X,"displayName","sps-nav-tab"),a(X,"props",{active:"boolean",label:"string",icon:"SpsIcon",tag:"string",href:"string",target:"string"}),X);I([p()],exports.SpsNavTabComponent.prototype,"active",2);I([p()],exports.SpsNavTabComponent.prototype,"label",2);I([p()],exports.SpsNavTabComponent.prototype,"icon",2);I([p()],exports.SpsNavTabComponent.prototype,"tag",2);I([p()],exports.SpsNavTabComponent.prototype,"href",2);I([p()],exports.SpsNavTabComponent.prototype,"target",2);exports.SpsNavTabComponent=I([E({tag:"sps-nav-tab"})],exports.SpsNavTabComponent);var fn=Object.defineProperty,mn=Object.getOwnPropertyDescriptor,Me=(e,t,n,s)=>{for(var i=s>1?void 0:s?mn(t,n):t,r=e.length-1,l;r>=0;r--)(l=e[r])&&(i=(s?l(t,n,i):l(i))||i);return s&&i&&fn(t,n,i),i},K;exports.SpsNavTabSetComponent=(K=class extends HTMLElement{constructor(){super(...arguments);a(this,"content",[])}render(){return o("nav",{className:"sps-tabbed-nav"},this.content)}},a(K,"displayName","sps-nav-tab-set"),a(K,"props",{}),K);Me([se()],exports.SpsNavTabSetComponent.prototype,"content",2);exports.SpsNavTabSetComponent=Me([E({tag:"sps-nav-tab-set"})],exports.SpsNavTabSetComponent);const gn={basic:{label:"Basic Navigation Tabs",description:c.code`
|
|
805
|
+
<p>Navigation tabs native web component</p>
|
|
806
|
+
`,examples:{basic:{react:c.code`
|
|
807
|
+
function DemoComponent() {
|
|
808
|
+
const tabs = [
|
|
809
|
+
{ label: "Tab A", icon: "chart-line" },
|
|
810
|
+
{ label: "Tab B", icon: "chart-bar", tag: "12" },
|
|
811
|
+
{ label: "Tab C", icon: "chart-pie" }
|
|
812
|
+
]
|
|
813
|
+
|
|
814
|
+
const [activeTab, setActiveTab] = React.useState(0)
|
|
815
|
+
|
|
816
|
+
return (
|
|
817
|
+
<sps-nav-tab-set>
|
|
818
|
+
{tabs.map((tab, index) => (
|
|
819
|
+
<sps-nav-tab
|
|
820
|
+
key={index}
|
|
821
|
+
icon={tab.icon}
|
|
822
|
+
label={tab.label}
|
|
823
|
+
tag={tab.tag}
|
|
824
|
+
active={index === activeTab || null}
|
|
825
|
+
onClick={() => setActiveTab(index)}
|
|
826
|
+
/>
|
|
827
|
+
))}
|
|
828
|
+
</sps-nav-tab-set>
|
|
829
|
+
)
|
|
830
|
+
}
|
|
831
|
+
`}}}};exports.AttrBindings=he;exports.ClassBindings=D;exports.Component=E;exports.Content=se;exports.EventDispatcher=ie;exports.EventListener=z;exports.MANIFEST=nn;exports.MIMEType=_e;exports.Prop=p;exports.QuerySelector=re;exports.QuerySelectorAll=Ze;exports.SpsFileUploadExamples=an;exports.SpsInsightCardExamples=dn;exports.SpsNavTabsExamples=gn;exports.SpsPhotoDisplayMode=Je;exports.SpsPhotoExamples=Ye;exports.StyleBindings=M;exports.Watch=we;exports.h=o;exports.namespaceOverrideRegistrar=Yt;exports.register=Jt;exports.webComponentsUseI18n=Qt;
|