@spscommerce/ds-web-components 0.1.0

package/dist/lib/index.cjs.js

@@ -0,0 +1,829 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var T=require("@spscommerce/ds-shared"),l=require("@spscommerce/utils"),c={};Object.defineProperty(c,"__esModule",{value:!0});/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var V={default:"__default"};/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var ze=Object.prototype.hasOwnProperty;function pe(){}pe.prototype=Object.create(null);function We(e,t){return ze.call(e,t)}function ce(){return new pe}function Z(e,t){for(;e.length>t;)e.pop()}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */function He(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 de(e,t,s){if(s==null)e.removeAttribute(t);else{var n=He(t);n?e.setAttributeNS(n,t,String(s)):e.setAttribute(t,String(s))}}function he(e,t,s){e[t]=s}function qe(e,t,s){t.indexOf("-")>=0?e.setProperty(t,s):e[t]=s}function Ge(e,t,s){if(typeof s=="string")e.style.cssText=s;else{e.style.cssText="";var n=e.style;for(var i in s)We(s,i)&&qe(n,i,s[i])}}function Xe(e,t,s){var n=typeof s;n==="object"||n==="function"?he(e,t,s):de(e,t,s)}var U=ce();U[V.default]=Xe;U.style=Ge;function E(e,t,s){var n=U[t]||U[V.default];n(e,t,s)}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var ue=!1;function Ke(e){var t=ue;return ue=e,t}function Qe(e){return e}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var B={nodesCreated:null,nodesDeleted:null};/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var Ve=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}();/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */function Ze(e){return e.nodeType===11||e.nodeType===9}function J(e){return e.nodeType===1}function Je(e){return e.nodeType===3}function Ye(e,t){for(var s=[],n=e;n!==t;){var i=n;s.push(i),n=i.parentNode}return s}var Me=Node.prototype.getRootNode||function(){for(var e=this,t=e;e;)t=e,e=e.parentNode;return t};function et(e){var t=Me.call(e);return Ze(t)?t.activeElement:null}function tt(e,t){var s=et(e);return!s||!e.contains(s)?[]:Ye(s,t)}function st(e,t,s){for(var n=t.nextSibling,i=s;i!==null&&i!==t;){var a=i.nextSibling;e.insertBefore(i,n),i=a}}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var nt=function(){function e(t,s,n){this._attrsArr=null,this.staticsApplied=!1,this.nameOrCtor=t,this.key=s,this.text=n}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 Y(e,t,s,n){var i=new nt(t,s,n);return e.__incrementalDOMData=i,i}function R(e,t){return me(e,t)}function it(e){return Boolean(e.__incrementalDOMData)}function at(e){return Qe(e.__incrementalDOMData),R(e).key}function me(e,t){if(e.__incrementalDOMData)return e.__incrementalDOMData;var s=J(e)?e.localName:e.nodeName,n=J(e)?e.getAttribute("key")||t:null,i=Je(e)?e.data:void 0,a=Y(e,s,n,i);return J(e)&&rt(e,a),a}function fe(e){me(e);for(var t=e.firstChild;t;t=t.nextSibling)fe(t)}function ge(e){e.__incrementalDOMData=null;for(var t=e.firstChild;t;t=t.nextSibling)ge(t)}function rt(e,t){var s=e.attributes,n=s.length;if(!!n)for(var i=t.getAttrsArr(n),a=0,o=0;a<n;a+=1,o+=2){var g=s[a],x=g.name,v=g.value;i[o]=x,i[o+1]=v}}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */function ot(e,t){return e==="svg"?"http://www.w3.org/2000/svg":e==="math"?"http://www.w3.org/1998/Math/MathML":t==null||R(t).nameOrCtor==="foreignObject"?null:t.namespaceURI}function lt(e,t,s,n){var i;if(typeof s=="function")i=new s;else{var a=ot(s,t);a?i=e.createElementNS(a,s):i=e.createElement(s)}return Y(i,s,n),i}function pt(e){var t=e.createTextNode("");return Y(t,"#text",null),t}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var L=null,d=null,f=null,$=null,z=[],W=[];function H(){return W}function ve(e){var t=function(s,n,i){var a=L,o=$,g=z,x=W,v=d,S=f,m=!1;L=new Ve,$=s.ownerDocument,W=[],f=s.parentNode,z=tt(s,f);try{var C=e(s,n,i);return C}finally{$=o,W=x,d=v,f=S,z=g,L.notifyChanges(),Ke(m),L=a}};return t}var Ce=ve(function(e,t,s){return d=e,_e(),t(s),xe(),e}),ct=ve(function(e,t,s){var n={nextSibling:e},i=null,a=null;return d=n,t(s),f&&Se(f,q(),e.nextSibling),n===d?null:d});function be(e,t,s){var n=R(e,s);return t==n.nameOrCtor&&s==n.key}function dt(e,t,s){if(!e)return null;if(be(e,t,s))return e;if(s){for(;e=e.nextSibling;)if(be(e,t,s))return e}return null}function ht(e,t){var s;return e==="#text"?s=pt($):s=lt($,f,e,t),L.markCreated(s),s}function we(e,t){var s=dt(d,e,t),n=s||ht(e,t);n!==d&&(z.indexOf(n)>=0?st(f,n,d):f.insertBefore(n,d),d=n)}function Se(e,t,s){for(var n=e,i=t;i!==s;){var a=i.nextSibling;n.removeChild(i),L.markDeleted(i),i=a}}function _e(){f=d,d=null}function q(){return d?d.nextSibling:f.firstChild}function M(){d=q()}function xe(){Se(f,q(),null),d=f,f=f.parentNode}function Ne(e,t){return M(),we(e,t),_e(),f}function ye(){return xe(),d}function ut(){return M(),we("#text",null),d}function mt(){return f}function ft(){return q()}function gt(){d=f.lastChild}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var Ae=3,_=ce();function vt(e,t,s){if(t.staticsApplied=!0,!(!s||!s.length)){if(t.hasEmptyAttrsArr()){for(var n=0;n<s.length;n+=2)E(e,s[n],s[n+1]);return}for(var n=0;n<s.length;n+=2)_[s[n]]=n+1;for(var i=t.getAttrsArr(0),a=0,n=0;n<i.length;n+=2){var o=i[n],g=i[n+1],x=_[o];if(x){s[x]===g&&delete _[o];continue}i[a]=o,i[a+1]=g,a+=2}Z(i,a);for(var o in _)E(e,o,s[_[o]]),delete _[o]}}function ee(e,t,s){for(var n=[],i=3;i<arguments.length;i++)n[i-3]=arguments[i];var a=Ne(e,t),o=R(a);o.staticsApplied||vt(a,o,s);var g=Math.max(0,arguments.length-Ae),x=o.hasEmptyAttrsArr();if(!g&&x)return a;for(var v=o.getAttrsArr(g),S=Ae,m=0;S<arguments.length;S+=2,m+=2){var C=arguments[S];if(x)v[m]=C;else if(v[m]!==C)break;var P=arguments[S+1];(x||v[m+1]!==P)&&(v[m+1]=P,E(a,C,P))}if(S<arguments.length||m<v.length){for(var je=m;m<v.length;m+=2)_[v[m]]=v[m+1];for(m=je;S<arguments.length;S+=2,m+=2){var C=arguments[S],P=arguments[S+1];_[C]!==P&&E(a,C,P),v[m]=C,v[m+1]=P,delete _[C]}Z(v,m);for(var C in _)E(a,C,void 0),delete _[C]}return a}function Ct(e,t,s){var n=H();n[0]=e,n[1]=t,n[2]=s}function bt(e){var t=H();t[1]=e}function wt(e,t){var s=H();s.push(e),s.push(t)}function St(){var e=H(),t=ee.apply(null,e);return Z(e,0),t}function Pe(e){var t=ye();return t}function _t(e,t,s){for(var n=[],i=3;i<arguments.length;i++)n[i-3]=arguments[i];return ee.apply(null,arguments),Pe()}function xt(e){for(var t=[],s=1;s<arguments.length;s++)t[s-1]=arguments[s];var n=ut(),i=R(n);if(i.text!==e){i.text=e;for(var a=e,o=1;o<arguments.length;o+=1){var g=arguments[o];a=g(a)}n.data=a}return n}/**
+ * @license
+ * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */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`
+            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
+        `,examples:{single:{description:"<p>Single file upload</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref}/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `},multiple:{description:"<p>Multiple file upload</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} multiple/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},restrictions:{label:"Restrictions",description:l.code`
+            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
+        `,examples:{size:{description:"<p>Maximum size</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} maxSize="100KB"/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `},type:{description:"<p>File type whitelist</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `},both:{description:"<p>Both restrictions</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                        maxSize="25MB"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},dismissable:{label:"Dismissable",description:l.code`
+            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
+            show it again programmatically if you need to.</p>
+        `,examples:{dismissable:{react:l.code`
+                    function Component() {
+                        const [showFileUpload, setShowFileUpload] = React.useState(true)
+                        const ref = React.useRef()
+
+                        function handleDismissal() {
+                            setShowFileUpload(false)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("dismissal", handleDismissal)
+                            return () => {
+                                ref.current.removeEventListener("dismissal", handleDismissal)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        dismissable
+                                        shown={showFileUpload}
+                                    />
+                                    {!showFileUpload && (
+                                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                                        Reset
+                                    </SpsButton>
+                                    )}
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},downloadButton:{label:"Download Button",description:l.code`
+            <p>You can optionally provide a button to download a file. Typically this will be a template for
+            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
+        `,examples:{downloadButton:{react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleDownload() {
+                            console.log("Download triggered.")
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("download", handleDownload)
+                            return () => {
+                                ref.current.removeEventListener("download", handleDownload)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheet"
+                                        acceptExtensions="xlsx"
+                                        downloadLabel="Download Excel Template"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},mini:{label:"Mini File Upload",description:l.code`
+            <p>When the file upload component is to be placed in a small container,
+            it should be marked as a mini file upload so that everything fits.</p>
+        `,examples:{single:{react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-4">
+                                    <sps-file-upload ref={ref} mini/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},constrainContentWidth:{label:"Constrain Content Width",description:l.code`
+            <p>If this prop is provided, the content will be restricted to 50% of
+            the overall width of the component. Consult your product designer if
+            you're not sure whether to use this variant.</p>
+        `,examples:{constrainContentWidth:{react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event: CustomEvent<Array<File>>) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-4">
+                                    <sps-file-upload ref={ref} constrainContentWidth/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}}};var Et=Object.defineProperty,Bt=Object.getOwnPropertyDescriptor,F=(e,t,s,n)=>{for(var i=n>1?void 0:n?Bt(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&&Et(t,s,i),i};exports.SpsNavTabComponent=class extends HTMLElement{constructor(){super(...arguments);this.active=!1,this.label="",this.tag=""}get[D](){return["sps-tabbed-nav__nav-item",this.active&&"sps-tabbed-nav__nav-item--active"]}render(){return r("a",{href:this.href,target:this.target,className:"sps-tabbed-nav__nav-item-link",tabIndex:0},this.icon&&r("i",{className:`sps-icon sps-icon-${this.icon}`}),this.label&&r("span",null,this.label),this.tag&&r("span",{className:"sps-tag sps-tag--default"},this.tag))}};exports.SpsNavTabComponent.displayName="sps-nav-tab";exports.SpsNavTabComponent.props={active:"boolean",label:"string",icon:"SpsIcon",tag:"string",href:"string",target:"string"};F([p()],exports.SpsNavTabComponent.prototype,"active",2);F([p()],exports.SpsNavTabComponent.prototype,"label",2);F([p()],exports.SpsNavTabComponent.prototype,"icon",2);F([p()],exports.SpsNavTabComponent.prototype,"tag",2);F([p()],exports.SpsNavTabComponent.prototype,"href",2);F([p()],exports.SpsNavTabComponent.prototype,"target",2);exports.SpsNavTabComponent=F([O({tag:"sps-nav-tab"})],exports.SpsNavTabComponent);var Rt=Object.defineProperty,$t=Object.getOwnPropertyDescriptor,Be=(e,t,s,n)=>{for(var i=n>1?void 0:n?$t(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&&Rt(t,s,i),i};exports.SpsNavTabSetComponent=class extends HTMLElement{constructor(){super(...arguments);this.content=[]}render(){return r("nav",{className:"sps-tabbed-nav"},this.content)}};exports.SpsNavTabSetComponent.displayName="sps-nav-tab-set";exports.SpsNavTabSetComponent.props={};Be([X()],exports.SpsNavTabSetComponent.prototype,"content",2);exports.SpsNavTabSetComponent=Be([O({tag:"sps-nav-tab-set"})],exports.SpsNavTabSetComponent);const Re={basic:{label:"Basic Navigation Tabs",description:l.code`
+          <p>Navigation tabs native web component</p>
+        `,examples:{basic:{react:l.code`
+                    function DemoComponent() {
+                        const tabs = [
+                            { label: "Tab A", icon: "chart-line" },
+                            { label: "Tab B", icon: "chart-bar", tag: "12" },
+                            { label: "Tab C", icon: "chart-pie" }
+                        ]
+
+                        const [activeTab, setActiveTab] = React.useState(0)
+
+                        return (
+                        <sps-nav-tab-set>
+                            {tabs.map((tab, index) => (
+                                <sps-nav-tab
+                                    key={index}
+                                    icon={tab.icon}
+                                    label={tab.label}
+                                    tag={tab.tag}
+                                    active={index === activeTab || null}
+                                    onClick={() => setActiveTab(index)}
+                                />
+                            ))}
+                        </sps-nav-tab-set>
+                        )
+                    }
+                `}}}};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`
+        <p>
+            Photos are block elements, so a photo fills its container's width unless
+            an explicit width is set. It is always a 4:3 aspect ratio. In this example,
+            photos have been placed in cards which have different widths in the 12
+            column grid.
+        </p>
+    `,examples:{basic:{jsx:l.code`
+            <div className="sfg-row">
+                <div className="sfg-col-2">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+                <div className="sfg-col-6">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+            </div>
+        `}}},displayMode:{label:"Fill vs. Fit",description:l.code`
+        <p>
+            There are two display modes available:
+            <ul>
+                <li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
+                <li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
+            </ul>
+        </p>
+    `,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:l.code`
+            <div className="sfg-row">
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
+                </div>
+            </div>
+        `},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:l.code`
+            <div className="sfg-row">
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
+                </div>
+            </div>
+        `}}},placeholder:{label:"Placeholders",description:l.code`
+        <p>
+            When an image is not provided for a particular use case (such as a user avatar,
+            a company photo, item image, etc.), a placeholder should be shown in its place.
+
+            The placeholder's icon, selected from our SPS icon set, should represent the
+            type of image it is substituting for.
+        </p>
+    `,examples:{general:{description:"<p>General Photo</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="photo"></sps-photo>
+                    </div>
+                </div>
+            `},photoAlt:{description:"<p>Photo Alt</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="camera"></sps-photo>
+                    </div>
+                </div>
+            `},user:{description:"<p>User / Single Person</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="user"></sps-photo>
+                    </div>
+                </div>
+            `},group:{description:"<p>Group / Multiple People</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="group"></sps-photo>
+                    </div>
+                </div>
+            `},company:{description:"<p>Company / Building</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="building"></sps-photo>
+                    </div>
+                </div>
+            `}}}},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`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+            </sps-insights>
+        `}}},details:{label:"With Details",examples:{details:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `}}},partner_count:{label:"Partner Count",examples:{partner_count:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="250"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="122"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="207"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="12"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="94"
+                    totalPartners="250"
+                ></sps-insight-card>
+            </sps-insights>
+        `}}},expansion:{label:"10+ Insight Cards",examples:{expansion:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `}}},events:{label:"Adding a click handler",description:l.code`
+          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
+          Here is how to do it:</p>
+      `,examples:{events:{react:l.code`
+                  function Component() {
+                      function handleClick() {
+                          window.alert("Insight card clicked");
+                      }
+
+                      const ref = React.useRef();
+                      React.useEffect(() => {
+                          ref.current.addEventListener("click", handleClick);
+                          return () => {
+                              ref.current.removeEventListener("click", handleClick);
+                          };
+                      }, []);
+
+                        return (
+                            <sps-insights>
+                                <sps-insight-card ref={ref}
+                                    kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        );
+                    }
+                `}}},alternateIcon:{label:"Using alternate icons",examples:{basic:{react:l.code`
+                    function DemoComponent() {
+                        return (
+                            <sps-insights>
+                                <sps-insight-card
+                                    kind="general"
+                                    metric="1234"
+                                    icon={SpsIcon.DOLLAR_SIGN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="processing"
+                                    metric="1234"
+                                    icon={SpsIcon.ASTERISK}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="success"
+                                    metric="1234"
+                                    icon={SpsIcon.USER}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="warning"
+                                    metric="1234"
+                                    icon={SpsIcon.FOLDER_OPEN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="error"
+                                    metric="1234"
+                                    icon={SpsIcon.BAN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        )
+                    }
+                `}}}};exports.AttrBindings=re;exports.ClassBindings=D;exports.Component=O;exports.Content=X;exports.EventDispatcher=K;exports.EventListener=j;exports.MANIFEST=Wt;exports.Prop=p;exports.QuerySelector=Q;exports.QuerySelectorAll=Ue;exports.SpsFileUploadExamples=Ee;exports.SpsInsightCardExamples=Kt;exports.SpsNavTabsExamples=Re;exports.SpsPhotoExamples=$e;exports.StyleBindings=G;exports.Watch=oe;exports.h=r;exports.namespaceOverrideRegistrar=Lt;exports.register=Ft;exports.webComponentsUseI18n=Dt;