@sitecore-feaas/clientside 0.0.9 → 0.1.1

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.
Files changed (57) hide show
  1. package/README.md +5 -5
  2. package/dist/browser/basic.cjs +67 -0
  3. package/dist/browser/basic.js +67 -0
  4. package/dist/browser/index.cjs +68 -79
  5. package/dist/browser/index.js +68 -79
  6. package/dist/node/{react.cjs → basic.cjs} +436 -443
  7. package/dist/node/{react.js → basic.js} +432 -439
  8. package/dist/node/index.cjs +666 -291
  9. package/dist/node/index.js +666 -295
  10. package/examples/index.html +1 -1
  11. package/package.json +17 -17
  12. package/src/basic.ts +5 -0
  13. package/src/cloud.ts +9 -5
  14. package/src/components/FEAASBase.tsx +265 -0
  15. package/src/components/FEAASComponent.ts +98 -0
  16. package/src/components/FEAASContext.tsx +105 -0
  17. package/src/components/FEAASEditor.tsx +291 -0
  18. package/src/components/FEAASLoader.ts +113 -0
  19. package/src/components/FEAASPicker.tsx +98 -0
  20. package/src/components/FEAASStylesheet.ts +43 -0
  21. package/src/components/index.tsx +7 -0
  22. package/src/index.ts +4 -11
  23. package/test/components.js +11 -0
  24. package/test/components.ts +12 -0
  25. package/test/render.js +688 -0
  26. package/tsconfig.json +11 -6
  27. package/types/basic.d.ts +5 -0
  28. package/types/cloud.d.ts +18 -0
  29. package/types/components/FEAASBase.d.ts +70 -0
  30. package/types/components/FEAASComponent.d.ts +39 -0
  31. package/types/components/FEAASContext.d.ts +43 -0
  32. package/types/components/FEAASEditor.d.ts +70 -0
  33. package/types/components/FEAASLoader.d.ts +20 -0
  34. package/types/components/FEAASPicker.d.ts +61 -0
  35. package/types/components/FEAASStylesheet.d.ts +25 -0
  36. package/types/components/index.d.ts +7 -0
  37. package/types/dom.d.ts +29 -0
  38. package/types/fetch.d.ts +1 -0
  39. package/types/index.d.ts +4 -0
  40. package/types/tsbuildinfo +1 -0
  41. package/dist/browser/index.d.ts +0 -25
  42. package/dist/browser/react.cjs +0 -83
  43. package/dist/browser/react.d.ts +0 -36
  44. package/dist/browser/react.js +0 -83
  45. package/dist/browser/webcomponent-6b45b819.d.ts +0 -120
  46. package/dist/node/index.d.ts +0 -25
  47. package/dist/node/react.d.ts +0 -36
  48. package/dist/node/webcomponent-6b45b819.d.ts +0 -120
  49. package/index.cjs +0 -83
  50. package/index.d.ts +0 -25
  51. package/index.js +0 -83
  52. package/react.cjs +0 -83
  53. package/react.d.ts +0 -36
  54. package/react.js +0 -83
  55. package/src/react.ts +0 -66
  56. package/src/webcomponent.ts +0 -393
  57. package/webcomponent-6b45b819.d.ts +0 -120
package/react.js DELETED
@@ -1,83 +0,0 @@
1
- var le=Object.defineProperty,Te=Object.defineProperties;var Ce=Object.getOwnPropertyDescriptors;var oe=Object.getOwnPropertySymbols;var _e=Object.prototype.hasOwnProperty,De=Object.prototype.propertyIsEnumerable;var ue=(e,t,r)=>t in e?le(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,A=(e,t)=>{for(var r in t||(t={}))_e.call(t,r)&&ue(e,r,t[r]);if(oe)for(var r of oe(t))De.call(t,r)&&ue(e,r,t[r]);return e},S=(e,t)=>Te(e,Ce(t));var ce=(e,t)=>{for(var r in t)le(e,r,{get:t[r],enumerable:!0})};var T=(e,t,r)=>new Promise((n,i)=>{var a=u=>{try{o(r.next(u))}catch(h){i(h)}},s=u=>{try{o(r.throw(u))}catch(h){i(h)}},o=u=>u.done?n(u.value):Promise.resolve(u.value).then(a,s);o((r=r.apply(e,t)).next())});import v from"react";function X(e,t,r,n){return T(this,null,function*(){let i=new Date,a=yield fetch(e,t);if(!a.ok)throw new Error("Fetch failed");let s=new Date(a.headers.get("date"));var o=a;if(n(a,"cached"),s<i){let u=yield fetch(e+"?"+Math.random(),S(A({},t),{method:"HEAD",cache:"no-cache"}));if(u.headers.get("last-modified")!=a.headers.get("last-modified")){if(r(u)===!1)throw new Error("Response is stale");o=yield fetch(e,S(A({},t),{cache:"reload"}))}}if(r(o)===!1)throw new Error("Response is not valid");return a!==o&&n(o,"valid"),o})}function Pe({hostname:e="https://feaascomponentsapidev.blob.core.windows.net",library:t,component:r,version:n,revision:i="published"}){return`${e}/components/${t}/${r}/${n}/${i}.html`}function Me({hostname:e="https://feaascomponentsapidev.blob.core.windows.net",library:t,revision:r="published"}){return`${e}/styles/${t}/${r}.css`}function P(e,t){return T(this,null,function*(){return X(Pe(e),{},r=>r.headers.get("x-ms-meta-versionDeletedAt")==null,r=>{r.text().then(t)})})}function M(e,t){return T(this,null,function*(){return X(Me(e),{},r=>r.headers.get("x-ms-meta-deletedAt")==null,r=>{r.text().then(t)})})}var te={};ce(te,{autoloadScripts:()=>ve,cleanCollectionBit:()=>ye,loadScript:()=>V,normalizeCollectionScope:()=>me,observeDOMElement:()=>be,queryScopes:()=>ee,renderComponent:()=>We,renderComponentElement:()=>Je,renderComponentPromise:()=>Fe,renderDOMContent:()=>O,renderDOMElement:()=>E,renderStylesheet:()=>Ve,renderStylesheetPromise:()=>Ee,setDOMAttribute:()=>L});function b(e){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?b=function(t){return typeof t}:b=function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},b(e)}function ke(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Le(e,t){if(typeof t!="function"&&t!==null)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&z(e,t)}function I(e){return I=Object.setPrototypeOf?Object.getPrototypeOf:function(r){return r.__proto__||Object.getPrototypeOf(r)},I(e)}function z(e,t){return z=Object.setPrototypeOf||function(n,i){return n.__proto__=i,n},z(e,t)}function fe(){if(typeof Reflect=="undefined"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function N(e,t,r){return fe()?N=Reflect.construct:N=function(i,a,s){var o=[null];o.push.apply(o,a);var u=Function.bind.apply(i,o),h=new u;return s&&z(h,s.prototype),h},N.apply(null,arguments)}function Oe(e){return Function.toString.call(e).indexOf("[native code]")!==-1}function Q(e){var t=typeof Map=="function"?new Map:void 0;return Q=function(n){if(n===null||!Oe(n))return n;if(typeof n!="function")throw new TypeError("Super expression must either be null or a function");if(typeof t!="undefined"){if(t.has(n))return t.get(n);t.set(n,i)}function i(){return N(n,arguments,I(this).constructor)}return i.prototype=Object.create(n.prototype,{constructor:{value:i,enumerable:!1,writable:!0,configurable:!0}}),z(i,n)},Q(e)}function xe(e){if(e===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function He(e,t){return t&&(typeof t=="object"||typeof t=="function")?t:xe(e)}function $e(e){var t=fe();return function(){var n=I(e),i;if(t){var a=I(this).constructor;i=Reflect.construct(n,arguments,a)}else i=n.apply(this,arguments);return He(this,i)}}function he(e){return Re(e)||je(e)||de(e)||Be()}function Re(e){if(Array.isArray(e))return Z(e)}function je(e){if(typeof Symbol!="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function de(e,t){if(!!e){if(typeof e=="string")return Z(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if(r==="Object"&&e.constructor&&(r=e.constructor.name),r==="Map"||r==="Set")return Array.from(e);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Z(e,t)}}function Z(e,t){(t==null||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function Be(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
2
- In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Ne(e,t){var r=typeof Symbol!="undefined"&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=de(e))||t&&e&&typeof e.length=="number"){r&&(e=r);var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(u){throw u},f:i}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
3
- In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var a=!0,s=!1,o;return{s:function(){r=r.call(e)},n:function(){var u=r.next();return a=u.done,u},e:function(u){s=!0,o=u},f:function(){try{!a&&r.return!=null&&r.return()}finally{if(s)throw o}}}}var g=Object.prototype.hasOwnProperty;function B(e,t){return e=e.slice(),e.push(t),e}function k(e,t){return t=t.slice(),t.unshift(e),t}var Ie=function(e){Le(r,e);var t=$e(r);function r(n){var i;return ke(this,r),i=t.call(this,'JSONPath should not be called with "new" (it prevents return of (unwrapped) scalar values)'),i.avoidNew=!0,i.value=n,i.name="NewError",i}return r}(Q(Error));function d(e,t,r,n,i){if(!(this instanceof d))try{return new d(e,t,r,n,i)}catch(u){if(!u.avoidNew)throw u;return u.value}typeof e=="string"&&(i=n,n=r,r=t,t=e,e=null);var a=e&&b(e)==="object";if(e=e||{},this.json=e.json||r,this.path=e.path||t,this.resultType=e.resultType||"value",this.flatten=e.flatten||!1,this.wrap=g.call(e,"wrap")?e.wrap:!0,this.sandbox=e.sandbox||{},this.preventEval=e.preventEval||!1,this.parent=e.parent||null,this.parentProperty=e.parentProperty||null,this.callback=e.callback||n||null,this.otherTypeCallback=e.otherTypeCallback||i||function(){throw new TypeError("You must supply an otherTypeCallback callback option with the @other() operator.")},e.autostart!==!1){var s={path:a?e.path:t};a?"json"in e&&(s.json=e.json):s.json=r;var o=this.evaluate(s);if(!o||b(o)!=="object")throw new Ie(o);return o}}d.prototype.evaluate=function(e,t,r,n){var i=this,a=this.parent,s=this.parentProperty,o=this.flatten,u=this.wrap;if(this.currResultType=this.resultType,this.currPreventEval=this.preventEval,this.currSandbox=this.sandbox,r=r||this.callback,this.currOtherTypeCallback=n||this.otherTypeCallback,t=t||this.json,e=e||this.path,e&&b(e)==="object"&&!Array.isArray(e)){if(!e.path&&e.path!=="")throw new TypeError('You must supply a "path" property when providing an object argument to JSONPath.evaluate().');if(!g.call(e,"json"))throw new TypeError('You must supply a "json" property when providing an object argument to JSONPath.evaluate().');var h=e;t=h.json,o=g.call(e,"flatten")?e.flatten:o,this.currResultType=g.call(e,"resultType")?e.resultType:this.currResultType,this.currSandbox=g.call(e,"sandbox")?e.sandbox:this.currSandbox,u=g.call(e,"wrap")?e.wrap:u,this.currPreventEval=g.call(e,"preventEval")?e.preventEval:this.currPreventEval,r=g.call(e,"callback")?e.callback:r,this.currOtherTypeCallback=g.call(e,"otherTypeCallback")?e.otherTypeCallback:this.currOtherTypeCallback,a=g.call(e,"parent")?e.parent:a,s=g.call(e,"parentProperty")?e.parentProperty:s,e=e.path}if(a=a||null,s=s||null,Array.isArray(e)&&(e=d.toPathString(e)),!(!e&&e!==""||!t)){var l=d.toPathArray(e);l[0]==="$"&&l.length>1&&l.shift(),this._hasParentSelector=null;var c=this._trace(l,t,["$"],a,s,r).filter(function(f){return f&&!f.isParentSelector});return c.length?!u&&c.length===1&&!c[0].hasArrExpr?this._getPreferredOutput(c[0]):c.reduce(function(f,p){var y=i._getPreferredOutput(p);return o&&Array.isArray(y)?f=f.concat(y):f.push(y),f},[]):u?[]:void 0}};d.prototype._getPreferredOutput=function(e){var t=this.currResultType;switch(t){case"all":{var r=Array.isArray(e.path)?e.path:d.toPathArray(e.path);return e.pointer=d.toPointer(r),e.path=typeof e.path=="string"?e.path:d.toPathString(e.path),e}case"value":case"parent":case"parentProperty":return e[t];case"path":return d.toPathString(e[t]);case"pointer":return d.toPointer(e.path);default:throw new TypeError("Unknown result type")}};d.prototype._handleCallback=function(e,t,r){if(t){var n=this._getPreferredOutput(e);e.path=typeof e.path=="string"?e.path:d.toPathString(e.path),t(n,r,e)}};d.prototype._trace=function(e,t,r,n,i,a,s,o){var u=this,h;if(!e.length)return h={path:r,value:t,parent:n,parentProperty:i,hasArrExpr:s},this._handleCallback(h,a,"value"),h;var l=e[0],c=e.slice(1),f=[];function p(m){Array.isArray(m)?m.forEach(function(_){f.push(_)}):f.push(m)}if((typeof l!="string"||o)&&t&&g.call(t,l))p(this._trace(c,t[l],B(r,l),t,l,a,s));else if(l==="*")this._walk(l,c,t,r,n,i,a,function(m,_,H,F,D,$,R,j){p(u._trace(k(m,H),F,D,$,R,j,!0,!0))});else if(l==="..")p(this._trace(c,t,r,n,i,a,s)),this._walk(l,c,t,r,n,i,a,function(m,_,H,F,D,$,R,j){b(F[m])==="object"&&p(u._trace(k(_,H),F[m],B(D,m),F,m,j,!0))});else{if(l==="^")return this._hasParentSelector=!0,{path:r.slice(0,-1),expr:c,isParentSelector:!0};if(l==="~")return h={path:B(r,l),value:i,parent:n,parentProperty:null},this._handleCallback(h,a,"property"),h;if(l==="$")p(this._trace(c,t,r,null,null,a,s));else if(/^(\x2D?[0-9]*):(\x2D?[0-9]*):?([0-9]*)$/.test(l))p(this._slice(l,c,t,r,n,i,a));else if(l.indexOf("?(")===0){if(this.currPreventEval)throw new Error("Eval [?(expr)] prevented in JSONPath expression.");this._walk(l,c,t,r,n,i,a,function(m,_,H,F,D,$,R,j){u._eval(_.replace(/^\?\(((?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*?)\)$/,"$1"),F[m],m,D,$,R)&&p(u._trace(k(m,H),F,D,$,R,j,!0))})}else if(l[0]==="("){if(this.currPreventEval)throw new Error("Eval [(expr)] prevented in JSONPath expression.");p(this._trace(k(this._eval(l,t,r[r.length-1],r.slice(0,-1),n,i),c),t,r,n,i,a,s))}else if(l[0]==="@"){var y=!1,C=l.slice(1,-2);switch(C){case"scalar":(!t||!["object","function"].includes(b(t)))&&(y=!0);break;case"boolean":case"string":case"undefined":case"function":b(t)===C&&(y=!0);break;case"integer":Number.isFinite(t)&&!(t%1)&&(y=!0);break;case"number":Number.isFinite(t)&&(y=!0);break;case"nonFinite":typeof t=="number"&&!Number.isFinite(t)&&(y=!0);break;case"object":t&&b(t)===C&&(y=!0);break;case"array":Array.isArray(t)&&(y=!0);break;case"other":y=this.currOtherTypeCallback(t,r,n,i);break;case"null":t===null&&(y=!0);break;default:throw new TypeError("Unknown value type "+C)}if(y)return h={path:r,value:t,parent:n,parentProperty:i},this._handleCallback(h,a,"value"),h}else if(l[0]==="`"&&t&&g.call(t,l.slice(1))){var G=l.slice(1);p(this._trace(c,t[G],B(r,G),t,G,a,s,!0))}else if(l.includes(",")){var Ae=l.split(","),J=Ne(Ae),se;try{for(J.s();!(se=J.n()).done;){var we=se.value;p(this._trace(k(we,c),t,r,n,i,a,!0))}}catch(m){J.e(m)}finally{J.f()}}else!o&&t&&g.call(t,l)&&p(this._trace(c,t[l],B(r,l),t,l,a,s,!0))}if(this._hasParentSelector)for(var w=0;w<f.length;w++){var q=f[w];if(q&&q.isParentSelector){var x=this._trace(q.expr,t,q.path,n,i,a,s);if(Array.isArray(x)){f[w]=x[0];for(var Se=x.length,K=1;K<Se;K++)w++,f.splice(w,0,x[K])}else f[w]=x}}return f};d.prototype._walk=function(e,t,r,n,i,a,s,o){if(Array.isArray(r))for(var u=r.length,h=0;h<u;h++)o(h,e,t,r,n,i,a,s);else r&&b(r)==="object"&&Object.keys(r).forEach(function(l){o(l,e,t,r,n,i,a,s)})};d.prototype._slice=function(e,t,r,n,i,a,s){if(!!Array.isArray(r)){var o=r.length,u=e.split(":"),h=u[2]&&Number.parseInt(u[2])||1,l=u[0]&&Number.parseInt(u[0])||0,c=u[1]&&Number.parseInt(u[1])||o;l=l<0?Math.max(0,l+o):Math.min(o,l),c=c<0?Math.max(0,c+o):Math.min(o,c);for(var f=[],p=l;p<c;p+=h){var y=this._trace(k(p,t),r,n,i,a,s,!0);y.forEach(function(C){f.push(C)})}return f}};d.prototype._eval=function(e,t,r,n,i,a){e.includes("@parentProperty")&&(this.currSandbox._$_parentProperty=a,e=e.replace(/@parentProperty/g,"_$_parentProperty")),e.includes("@parent")&&(this.currSandbox._$_parent=i,e=e.replace(/@parent/g,"_$_parent")),e.includes("@property")&&(this.currSandbox._$_property=r,e=e.replace(/@property/g,"_$_property")),e.includes("@path")&&(this.currSandbox._$_path=d.toPathString(n.concat([r])),e=e.replace(/@path/g,"_$_path")),e.includes("@root")&&(this.currSandbox._$_root=this.json,e=e.replace(/@root/g,"_$_root")),/@([\t-\r \)\.\[\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF])/.test(e)&&(this.currSandbox._$_v=t,e=e.replace(/@([\t-\r \)\.\[\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF])/g,"_$_v$1"));try{return this.vm.runInNewContext(e,this.currSandbox)}catch(s){throw console.log(s),new Error("jsonPath: "+s.message+": "+e)}};d.cache={};d.toPathString=function(e){for(var t=e,r=t.length,n="$",i=1;i<r;i++)/^(~|\^|@(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*?\(\))$/.test(t[i])||(n+=/^[\*0-9]+$/.test(t[i])?"["+t[i]+"]":"['"+t[i]+"']");return n};d.toPointer=function(e){for(var t=e,r=t.length,n="",i=1;i<r;i++)/^(~|\^|@(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*?\(\))$/.test(t[i])||(n+="/"+t[i].toString().replace(/~/g,"~0").replace(/\//g,"~1"));return n};d.toPathArray=function(e){var t=d.cache;if(t[e])return t[e].concat();var r=[],n=e.replace(/@(?:null|boolean|number|string|integer|undefined|nonFinite|scalar|array|object|function|other)\(\)/g,";$&;").replace(/['\[](\??\((?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*?\))['\]]/g,function(a,s){return"[#"+(r.push(s)-1)+"]"}).replace(/\[["']((?:(?!['\]])[\s\S])*)["']\]/g,function(a,s){return"['"+s.replace(/\./g,"%@%").replace(/~/g,"%%@@%%")+"']"}).replace(/~/g,";~;").replace(/["']?\.["']?(?!(?:(?!\[)[\s\S])*\])|\[["']?/g,";").replace(/%@%/g,".").replace(/%%@@%%/g,"~").replace(/(?:;)?(\^+)(?:;)?/g,function(a,s){return";"+s.split("").join(";")+";"}).replace(/;;;|;;/g,";..;").replace(/;$|'?\]|'$/g,""),i=n.split(";").map(function(a){var s=a.match(/#([0-9]+)/);return!s||!s[1]?a:r[s[1]]});return t[e]=i,t[e].concat()};var ze=function(t,r,n){for(var i=t.length,a=0;a<i;a++){var s=t[a];n(s)&&r.push(t.splice(a--,1)[0])}};d.prototype.vm={runInNewContext:function(t,r){var n=Object.keys(r),i=[];ze(n,i,function(h){return typeof r[h]=="function"});var a=n.map(function(h,l){return r[h]}),s=i.reduce(function(h,l){var c=r[l].toString();return/function/.test(c)||(c="function "+c),"var "+l+"="+c+";"+h},"");t=s+t,!/(["'])use strict\1/.test(t)&&!n.includes("arguments")&&(t="var arguments = undefined;"+t),t=t.replace(/;[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*$/,"");var o=t.lastIndexOf(";"),u=o>-1?t.slice(0,o+1)+" return "+t.slice(o+1):" return "+t;return N(Function,he(n).concat([u])).apply(void 0,he(a))}};function Je(e,t){let r=document.createElement("div");r.innerHTML=e;let n=document.createDocumentFragment();for(;r.firstChild;)n.appendChild(r.firstChild);return E(n,t),r}function ye(e){return e.replace(/(\[[^\]\[]+\]|\.\*)$/g,"")}function me(e){return ye(e)+".*"}function ge(e){let t=e.getAttribute("data-path-scope");for(var r=0,n=e;n=n.previousElementSibling;)n.getAttribute("data-path-scope")==t&&r++;return r}function qe(e,t,r){let n=e.getAttribute("data-path-scope");if(n==null)return;var i=ge(e);if(i!=0)return;let a=e.parentElement;if(a!=null){t==0?e.style.display="none":e.style.display&&(e.style.display="",e.getAttribute("style")==""&&e.removeAttribute("style"));for(var s=i+1,o=e,u=e;u=u.nextElementSibling;)u.getAttribute("data-path-scope")==n&&(s++,o=u);for(var h=s;h<t;h++)a.insertBefore(o.cloneNode(!0),o.nextElementSibling);for(var h=Math.max(1,t);h<s;h++)o=o.previousElementSibling,a.removeChild(o.nextElementSibling)}}function ee(e,t,r=!1,n=e){var i=t;let a=Object.keys(e).sort((o,u)=>u.length-o.length);for(let o of a)if(t.startsWith(o)){if(o==t){if(r)return e[o];continue}i=t.substring(o.length+1),n=e[o];break}let s=d({path:i,json:n});return r&&s&&Array.isArray(s)?s[0]:s}function L(e,t,r,n){var l;if(!!e){var i=e;n!=null&&n.processValue&&(r=n==null?void 0:n.processValue(e,t,r));var a=t.replace("data-path-","");if(t=="data-path-src")i=e.tagName=="IMG"?e:e.querySelector("img, video");else if(t=="data-path-href")i=e.querySelector("a")||e.closest("a");else if(t=="data-path-alt")i=e.querySelector("img, picture");else if(t=="data-path-hidden")r=r?null:!0;else if(t=="data-path"||t=="data-embed-html"||t=="html")a="innerHTML";else if(t=="data-embed-src")V(e,r);else if(t=="data-path-attributes"){let c=((l=e.getAttribute("data-attributes-keys"))==null?void 0:l.split(",").filter(Boolean))||[];for(var s in r){var o=r[s];L(e,s,typeof o=="object"&&o?JSON.stringify(o):o,n)}for(var u=0;u<c.length;u++)(r==null||!(c[u]in r))&&L(e,c[u],null,n);L(e,"data-attributes-keys",Object.keys(r||{}).join(","));return}if(typeof r=="boolean"&&(r=r?"":null),!!i){var h=String(e.getAttribute("data-path-placeholder")||i[a]);r!=null?a=="innerHTML"?i.innerHTML!=r&&(i.innerHTML=r):i.getAttribute(a)!=r&&i.setAttribute(a,r):a=="innerHTML"?i.innerHTML=h:i.removeAttribute(a)}}}function be(e){let t=new e.ownerDocument.defaultView.MutationObserver(r=>{r.forEach(n=>{let i=n.target,a=i.getAttribute("data-embed-src");a&&V(i,a),n.addedNodes&&n.addedNodes.forEach(s=>{s.nodeType==1&&ve(s,!1)})})});return t.observe(e,{attributes:!0,subtree:!0,childList:!0}),t}function ve(e,t=!0){let r=e.querySelectorAll("[data-embed-src]");for(var n=0;n<r.length;n++){let i=r[n];V(i,i.getAttribute("data-embed-src"))}if(t)return be(e)}function V(e,t){for(var r=e;r;r=r.parentElement)if(!r.parentElement){let i=r.querySelectorAll("script");for(var n=0;n<i.length;n++)if(i[n].getAttribute("src")==t)return!0;r.tagName=="HTML"&&(r=r.querySelector("head")||r);let a=r.ownerDocument.createElement("script");a.type="module",a.src=t,r.appendChild(a);break}}var pe=["data-attributes-keys","data-path-attributes","data-path-scope"];function E(e,t,r,n){var s,o,u;let i=e;if(n||(t=((s=r==null?void 0:r.processData)==null?void 0:s.call(r,i,t))||t),i.nodeType==1){let h=i.getAttribute("data-path-scope");if(h){let c=ge(i),f=ee(t,h,!1)||[];c==0&&qe(i,((o=r==null?void 0:r.shouldRepeat)==null?void 0:o.call(r,i,f))===!1?1:f.length,r),t=S(A({},t),{[me(h)]:f[c]})}let l=Array.prototype.slice.call(i.attributes).sort((c,f)=>pe.indexOf(c.name)-pe.indexOf(f.name));for(var a=0;a<l.length;a++){let{name:c,value:f}=l[a];c.startsWith("data-path")&&c!="data-path-scope"&&L(i,c,ee(t,f,!0),r),c=="data-embed-src"&&L(i,c,i.getAttribute(c),r)}}for(var a=0;a<i.children.length;a++)E(i.children[a],t,r,!0);return n||(u=r==null?void 0:r.onRender)==null||u.call(r,i,t),i}function O(e,t,r,n){var a;let i=((a=n==null?void 0:n.processTemplate)==null?void 0:a.call(n,e,t,r))||t;return e.innerHTML=i,e.classList.add("-feaas"),E(e,r,n)}function Ve(e,t){return Ee(e,t||(t=document.createElement("style"))),t}function Ee(e,t){return t||(t=document.createElement("style")),M(e,r=>{t.textContent=r}).then(()=>t)}function We(e,t){return Fe(e,t||(t=document.createElement("div"))),t}function Fe(e,t){return T(this,null,function*(){return t||(t=document.createElement("div")),t.childNodes.length?E(t,e.data,e):"template"in e?O(t,e.template,e.data,e):P(e,r=>O(t,r,e.data,e)).then(()=>t)})}var ae={};ce(ae,{HTMLFeaasComponent:()=>W,HTMLFeaasStylesheet:()=>U});var Y=typeof HTMLElement=="undefined"?class{}:HTMLElement,W=class extends Y{constructor(){super(...arguments);this.connected=!1;this.template=null;this.data=void 0;this.isFetching=!1}static get observedAttributes(){return["data","library","component","version","revision","hostname","template"]}connectedCallback(){this.connected=!0,this.render()}disconnectedCallback(){}attributeChangedCallback(r,n,i){!this.connected||(r=="template"?this.template=i:r!="date"&&(this.template=null),r=="data"&&this.children.length>0?this.update():(cancelAnimationFrame(this.rendering),this.rendering=requestAnimationFrame(()=>{this.render()})))}update(){E(this,this.getProps().data)}setData(r){this.data=r,this.children.length>0?this.update():this.render()}getOriginal(){let r=this.getAttribute("data-path-scope");if(!!r){for(var n=this;(n=n.previousElementSibling)&&n.getAttribute("data-path-scope")==r;)var i=n;return i}}getData(){var r;if(this.data)return this.data;if(this.getAttribute("data")){let n=this.getAttribute("data");return typeof n=="string"?JSON.parse(n):{}}return((r=this.getOriginal())==null?void 0:r.getData())||{}}render(){if(this.getOriginal())return;let r=this.getProps();this.template==null?this.isFetching||r.component!=null&&r.version!=null&&(this.isFetching=!0,P(r,n=>{this.template=n,this.isFetching=!1,O(this,this.template,r.data)}).catch(()=>{console.error(`FEAAS: Could not fetch component: ${r.component}/${r.version}/${r.revision}`)})):O(this,this.template,r.data)}getProps(){return{data:this.getData(),library:this.getAttribute("library")||void 0,component:this.getAttribute("component")||void 0,version:this.getAttribute("version")||void 0,revision:this.getAttribute("revision")||void 0,hostname:ie(this.getAttribute("hostname")||void 0)}}},U=class extends Y{constructor(){super(...arguments);this.connected=!1}static get observedAttributes(){return["library","revision","hostname"]}connectedCallback(){this.connected=!0,this.render()}attributeChangedCallback(){this.connected&&this.render()}render(){let r=this.getProps();M(r,n=>{this.innerHTML="<style>"+n+"</style>"}).catch(n=>{console.error(`FEAAS: Could not fetch stylesheet for library ${r.library}`)})}getProps(){return{library:this.getAttribute("library")||void 0,revision:this.getAttribute("revision")||void 0,hostname:ie(this.getAttribute("hostname")||void 0)}}};function ie(e){return typeof e=="string"&&(location.hostname.includes("pages-staging")||location.hostname.includes("staging-staging"))?e.replace("components.sitecorecloud.io","components-staging.sitecore-staging.cloud").replace("feaascompontsapiprod","feaascomponentsstaging"):e}var re=class extends Y{constructor(){super(...arguments);this.src="https://components.sitecorecloud.io/assets/picker.js";this.onClose=()=>{this.set({mode:null})};this.onScriptLoaded=()=>{this.element=document.createElement("feaas-picker"),this.element.style.cssText="border: 0; width: 100%; height: 100%; display: block",this.appendChild(this.element),this.set(this.getProps())}}static get observedAttributes(){return["library","mode","hidden","src"]}connectedCallback(){this.loader=document.createElement("feaas-loader"),this.loader.style.cssText="position: absolute; top: 0; left: 0; right: 0;bottom: 0; ",this.appendChild(this.loader)}load(){this.script||(this.script=document.createElement("script"),this.script.type="module",this.script.onload=this.onScriptLoaded,this.script.src=ie(this.src),this.script.crossOrigin="anonymous",this.appendChild(this.script))}getProps(){return{mode:this.getAttribute("mode"),context:this.context,library:this.getAttribute("library"),src:this.getAttribute("src")}}attributeChangedCallback(r,n,i){this.set(this.getProps())}set(r){Object.assign(this,r);let n=Object.keys(this.getProps());for(var i of n){let a=this[i];a==null?this.removeAttribute(i):this.getAttribute(i)!=String(a)&&this.setAttribute(i,String(a))}this.mode?this.removeAttribute("hidden"):this.getAttribute("hidden")==null&&this.setAttribute("hidden","hidden"),this.mode&&!this.hidden&&this.load(),this.element&&this.element.set&&(this.element.onClose=this.onClose,this.element.getToken=this.getToken,this.element.set(r))}},ne=class extends Y{static get observedAttributes(){return["hidden"]}connectedCallback(){this.style.opacity="1",this.style.transition="opacity 0.1s 0.2s",this.stylesheet=document.createElement("style"),this.stylesheet.textContent=`
4
- #loader {
5
- position: absolute;
6
- top: 0;
7
- left: 0;
8
- right: 0;
9
- bottom: 0;
10
- display: flex;
11
- align-items: center;
12
- justify-content: center;
13
- background: #f6f6ff;
14
- z-index: 1000;
15
- opacity: 1;
16
- transition: top 0.3s, background-color 0.7s 0.3s;
17
- }
18
- @keyframes loader-disappearance {
19
- 100% {
20
- opacity: 0;
21
- }
22
- }
23
- @keyframes loader-appearance {
24
- 0% {
25
- opacity: 0;
26
- }
27
- }
28
- @keyframes loader-circular-track {
29
- 0% {
30
- stroke-dasharray: 1, 400;
31
- stroke-dashoffset: 0;
32
- }
33
- 50% {
34
- stroke-dasharray: 400, 400;
35
- stroke-dashoffset: -100;
36
- }
37
- 100% {
38
- stroke-dasharray: 400, 400;
39
- stroke-dashoffset: -260;
40
- }
41
- }
42
-
43
- @keyframes loader-circular-spinner {
44
- 0% {
45
- transform: rotate(0deg);
46
- }
47
-
48
- 100% {
49
- transform: rotate(360deg);
50
- }
51
- }
52
- #loader .spinner {
53
- animation: loader-disappearance 0.6s both;
54
- width: 48px;
55
- height: 48px;
56
- }
57
- #loader .spinner {
58
- animation: loader-appearance 0.6s both;
59
- }
60
- `,this.root=this.attachShadow({mode:"open"}),this.loader=document.createElement("div"),this.loader.id="loader",this.loader.innerHTML=`
61
- <div class="spinner">
62
- <svg
63
- viewBox="0 0 100 100"
64
- style="
65
- animation: 2s linear 0s infinite normal none running loader-circular-spinner;
66
- display: block;
67
- width: 48px;
68
- height: 48px;
69
- "
70
- >
71
- <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
72
- <circle
73
- fill="transparent"
74
- stroke="#5548D9"
75
- cx="50"
76
- cy="50"
77
- r="42"
78
- stroke-width="10px"
79
- stroke-linecap="round"
80
- style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
81
- ></circle>
82
- </svg>
83
- </div>`,this.shadowRoot.appendChild(this.stylesheet),this.shadowRoot.appendChild(this.loader)}};typeof window!="undefined"&&!window.customElements.get("feaas-stylesheet")&&(window.customElements.define("feaas-stylesheet",U),window.customElements.define("feaas-component",W),window.customElements.define("feaas-picker-lazy",re),window.customElements.get("feaas-loader")||window.customElements.define("feaas-loader",ne));function Ue(e){let[t,r]=v.useState("template"in e?e.template:null),n=e.data,i=v.useRef(null);return v.useEffect(()=>{t==null&&!("template"in e)&&P(e,r).catch(()=>{console.error(`FEAAS: Could not fetch component: ${e.library}/${e.component}/${e.version}/${e.revision}`)})},"template"in e?[e.template,null,null,null]:[e.library,e.component,e.version,e.revision,e.hostname]),v.useEffect(()=>{i.current&&t&&(i.current.innerHTML=t)},[i,t]),v.useEffect(()=>{t&&i.current&&E(i.current,n||{},e)},[i,t,n]),v.createElement("div",{ref:i,className:"-feaas"})}function Ye(e){let t=v.useRef(null),[r,n]=v.useState("");return v.useEffect(()=>{M(e,n).catch(i=>{console.error(`FEAAS: Could not fetch stylesheet for library ${e.library}`)})},[e.hostname,e.library]),v.createElement("style",{ref:t,rel:"stylesheet",className:"-stylesheet","data-library-id":e.library},[r])}var pt=S(A(A({},te),ae),{Stylesheet:Ye,Component:Ue});export{Ue as Component,W as HTMLFeaasComponent,U as HTMLFeaasStylesheet,Ye as Stylesheet,ve as autoloadScripts,ye as cleanCollectionBit,pt as default,P as fetchComponent,M as fetchStylesheet,Pe as getComponentURL,Me as getStylesheetURL,V as loadScript,me as normalizeCollectionScope,be as observeDOMElement,ee as queryScopes,We as renderComponent,Je as renderComponentElement,Fe as renderComponentPromise,O as renderDOMContent,E as renderDOMElement,Ve as renderStylesheet,Ee as renderStylesheetPromise,L as setDOMAttribute};
package/src/react.ts DELETED
@@ -1,66 +0,0 @@
1
- import React from 'react'
2
- import { CloudStylesheet, fetchComponent, fetchStylesheet } from './cloud.js'
3
- import { FEAASComponentProps, renderDOMElement } from './dom.js'
4
- export * from './dom.js'
5
- export * from './cloud.js'
6
- export * from './webcomponent.js'
7
- import * as DOM from './dom.js'
8
- import * as WEB from './webcomponent.js'
9
-
10
- export function Component(props: FEAASComponentProps) {
11
- const [template, setTemplate] = React.useState('template' in props ? props.template : null)
12
- const data = props.data
13
- const ref = React.useRef<HTMLElement>(null)
14
-
15
- React.useEffect(
16
- () => {
17
- if (template == null && !('template' in props)) {
18
- fetchComponent(props, setTemplate).catch(() => {
19
- console.error(
20
- `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.version}/${props.revision}`
21
- )
22
- })
23
- }
24
- },
25
- 'template' in props
26
- ? [props.template, null, null, null]
27
- : [props.library, props.component, props.version, props.revision, props.hostname]
28
- )
29
-
30
- React.useEffect(() => {
31
- if (ref.current && template) {
32
- ref.current.innerHTML = template
33
- }
34
- }, [ref, template])
35
-
36
- React.useEffect(() => {
37
- if (template && ref.current) {
38
- renderDOMElement(ref.current, data || {}, props)
39
- }
40
- }, [ref, template, data])
41
-
42
- return React.createElement('div', { ref, className: '-feaas' })
43
- }
44
-
45
- export function Stylesheet(props: CloudStylesheet) {
46
- const ref = React.useRef<HTMLStyleElement>(null)
47
- const [css, setCss] = React.useState<string>('')
48
-
49
- React.useEffect(() => {
50
- fetchStylesheet(props, setCss).catch((e) => {
51
- console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`)
52
- })
53
- }, [props.hostname, props.library])
54
-
55
- return React.createElement(
56
- 'style',
57
- { ref, rel: 'stylesheet', className: '-stylesheet', 'data-library-id': props.library },
58
- [css]
59
- )
60
- }
61
- export default {
62
- ...DOM,
63
- ...WEB,
64
- Stylesheet,
65
- Component
66
- }
@@ -1,393 +0,0 @@
1
- import { CloudTemplate, fetchComponent, fetchStylesheet } from './cloud.js'
2
- import { Datascopes, renderDOMContent, renderDOMElement } from './dom.js'
3
-
4
- declare global {
5
- namespace JSX {
6
- interface IntrinsicElements {
7
- 'feaas-component': {
8
- data?: any
9
- library: string
10
- component: string
11
- version: string
12
- revision?: string
13
- hostname?: string
14
- template?: string
15
- children?: any
16
- }
17
- 'feaas-stylesheet': {
18
- library?: string
19
- hostname?: string
20
- children?: any
21
- }
22
- 'feaas-picker': {
23
- library: string
24
- mode?: string
25
- }
26
- }
27
- }
28
- }
29
-
30
- // Shim in case it's required in node.js environment
31
- var WebComponent = typeof HTMLElement == 'undefined' ? (class {} as unknown as typeof HTMLElement) : HTMLElement
32
-
33
- export class HTMLFeaasComponent extends WebComponent {
34
- static get observedAttributes() {
35
- return ['data', 'library', 'component', 'version', 'revision', 'hostname', 'template']
36
- }
37
- connected = false
38
-
39
- template: string = null
40
- data: any = undefined
41
- isFetching: boolean = false
42
- rendering: ReturnType<typeof requestAnimationFrame>
43
-
44
- connectedCallback() {
45
- this.connected = true
46
- this.render()
47
- }
48
-
49
- disconnectedCallback() {}
50
-
51
- attributeChangedCallback(name: string, oldValue: string, newValue: string) {
52
- if (!this.connected) return
53
- if (name == 'template') {
54
- this.template = newValue
55
- } else if (name != 'date') {
56
- this.template = null
57
- }
58
- if (name == 'data' && this.children.length > 0) {
59
- this.update()
60
- } else {
61
- cancelAnimationFrame(this.rendering)
62
- this.rendering = requestAnimationFrame(() => {
63
- this.render()
64
- })
65
- }
66
- }
67
-
68
- update() {
69
- renderDOMElement(this, this.getProps().data)
70
- }
71
-
72
- setData(data: any) {
73
- this.data = data
74
- if (this.children.length > 0) {
75
- this.update()
76
- } else {
77
- this.render()
78
- }
79
- }
80
-
81
- getOriginal() {
82
- const scope = this.getAttribute('data-path-scope')
83
- if (!scope) return
84
- for (var current = this as Element; (current = current.previousElementSibling); ) {
85
- if (current.getAttribute('data-path-scope') == scope) {
86
- var last = current
87
- } else {
88
- break
89
- }
90
- }
91
- return last as HTMLFeaasComponent
92
- }
93
-
94
- getData(): any {
95
- if (this.data) {
96
- return this.data
97
- }
98
- if (this.getAttribute('data')) {
99
- const dataValue = this.getAttribute('data')
100
- return typeof dataValue == 'string' ? JSON.parse(dataValue) : {}
101
- }
102
- return this.getOriginal()?.getData() || {}
103
- return {}
104
- }
105
-
106
- render() {
107
- // defer rendering to original element
108
- if (this.getOriginal()) {
109
- return
110
- }
111
- const newProps = this.getProps()
112
- if (this.template == null) {
113
- if (!this.isFetching) {
114
- if (newProps.component != null && newProps.version != null) {
115
- this.isFetching = true
116
- fetchComponent(newProps, (template) => {
117
- this.template = template
118
- this.isFetching = false
119
- renderDOMContent(this, this.template, newProps.data)
120
- }).catch(() => {
121
- console.error(
122
- `FEAAS: Could not fetch component: ${newProps.component}/${newProps.version}/${newProps.revision}`
123
- )
124
- })
125
- }
126
- }
127
- } else {
128
- renderDOMContent(this, this.template, newProps.data)
129
- }
130
- }
131
-
132
- getProps(): CloudTemplate & { data: Datascopes } {
133
- return {
134
- data: this.getData(),
135
- library: (this.getAttribute('library') || undefined) as string,
136
- component: (this.getAttribute('component') || undefined) as string,
137
- version: (this.getAttribute('version') || undefined) as string,
138
- revision: (this.getAttribute('revision') || undefined) as string,
139
- hostname: patchHostname(this.getAttribute('hostname') || undefined) as string
140
- }
141
- }
142
- }
143
-
144
- export class HTMLFeaasStylesheet extends WebComponent {
145
- static get observedAttributes() {
146
- return ['library', 'revision', 'hostname']
147
- }
148
- connected = false
149
- connectedCallback() {
150
- this.connected = true
151
- this.render()
152
- }
153
-
154
- attributeChangedCallback() {
155
- if (this.connected) this.render()
156
- }
157
-
158
- render() {
159
- const props = this.getProps()
160
- fetchStylesheet(props, (cssText) => {
161
- this.innerHTML = '<style>' + cssText + '</style>'
162
- }).catch((e) => {
163
- console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`)
164
- })
165
- }
166
-
167
- getProps() {
168
- return {
169
- library: (this.getAttribute('library') || undefined) as string,
170
- revision: (this.getAttribute('revision') || undefined) as string,
171
- hostname: patchHostname(this.getAttribute('hostname') || undefined) as string
172
- }
173
- }
174
- }
175
- export interface PickerProps<T = HTMLElement> {
176
- children?: any
177
- context?: T
178
- isOpen?: boolean
179
- mode?: 'library' | 'stylesheet'
180
- src?: string
181
- onClose?: () => any
182
- }
183
- export interface HTMLFeaasPickerProps extends Omit<PickerProps<HTMLElement>, 'children'> {
184
- getAccessTokenSilently: (options: any) => Promise<string>
185
- library: string
186
- }
187
-
188
- // temporary fix for pages staging not pointing to the right place
189
- function patchHostname(url: string) {
190
- if (
191
- typeof url == 'string' &&
192
- (location.hostname.includes('pages-staging') || location.hostname.includes('staging-staging'))
193
- ) {
194
- return url
195
- .replace('components.sitecorecloud.io', 'components-staging.sitecore-staging.cloud')
196
- .replace('feaascompontsapiprod', 'feaascomponentsstaging')
197
- } else {
198
- return url
199
- }
200
- }
201
-
202
- interface HTMLFeaasPickerLazy extends HTMLFeaasPickerProps {}
203
- class HTMLFeaasPickerLazy extends WebComponent {
204
- static get observedAttributes() {
205
- return ['library', 'mode', 'hidden', 'src']
206
- }
207
-
208
- getToken?: (options: any) => Promise<string>
209
-
210
- src = 'https://components.sitecorecloud.io/assets/picker.js'
211
-
212
- script: HTMLScriptElement
213
- element: HTMLFeaasPickerLazy
214
- loader: HTMLFeaasLoader
215
-
216
- connectedCallback() {
217
- this.loader = document.createElement('feaas-loader') as HTMLFeaasLoader
218
- this.loader.style.cssText = 'position: absolute; top: 0; left: 0; right: 0;bottom: 0; '
219
- this.appendChild(this.loader)
220
- }
221
-
222
- load() {
223
- if (!this.script) {
224
- this.script = document.createElement('script')
225
- this.script.type = 'module'
226
- this.script.onload = this.onScriptLoaded
227
- this.script.src = patchHostname(this.src)
228
- this.script.crossOrigin = 'anonymous'
229
- this.appendChild(this.script)
230
- }
231
- }
232
-
233
- getProps() {
234
- return {
235
- mode: this.getAttribute('mode') as PickerProps['mode'],
236
- context: this.context,
237
- library: this.getAttribute('library'),
238
- src: this.getAttribute('src')
239
- }
240
- }
241
-
242
- attributeChangedCallback(name: string, oldValue: string, newValue: string) {
243
- this.set(this.getProps())
244
- }
245
-
246
- set(options: Partial<HTMLFeaasPickerProps>) {
247
- Object.assign(this, options)
248
- const keys = Object.keys(this.getProps())
249
- for (var key of keys) {
250
- const value = this[key as keyof typeof this]
251
- if (value == null) {
252
- this.removeAttribute(key)
253
- } else if (this.getAttribute(key) != String(value)) {
254
- this.setAttribute(key, String(value))
255
- }
256
- }
257
- if (this.mode) {
258
- this.removeAttribute('hidden')
259
- } else if (this.getAttribute('hidden') == null) {
260
- this.setAttribute('hidden', 'hidden')
261
- }
262
- if (this.mode && !this.hidden) {
263
- this.load()
264
- }
265
- if (this.element && this.element.set) {
266
- this.element.onClose = this.onClose
267
- this.element.getToken = this.getToken
268
- this.element.set(options)
269
- }
270
- }
271
-
272
- onClose = () => {
273
- this.set({
274
- mode: null
275
- })
276
- }
277
-
278
- onScriptLoaded = () => {
279
- this.element = document.createElement('feaas-picker') as HTMLFeaasPickerLazy
280
- this.element.style.cssText = 'border: 0; width: 100%; height: 100%; display: block'
281
- this.appendChild(this.element)
282
- this.set(this.getProps())
283
- }
284
- }
285
-
286
- class HTMLFeaasLoader extends WebComponent {
287
- stylesheet: HTMLStyleElement
288
- root: ShadowRoot
289
- loader: HTMLDivElement
290
-
291
- static get observedAttributes() {
292
- return ['hidden']
293
- }
294
- connectedCallback() {
295
- this.style.opacity = '1'
296
- this.style.transition = 'opacity 0.1s 0.2s'
297
- this.stylesheet = document.createElement('style')
298
- this.stylesheet.textContent = `
299
- #loader {
300
- position: absolute;
301
- top: 0;
302
- left: 0;
303
- right: 0;
304
- bottom: 0;
305
- display: flex;
306
- align-items: center;
307
- justify-content: center;
308
- background: #f6f6ff;
309
- z-index: 1000;
310
- opacity: 1;
311
- transition: top 0.3s, background-color 0.7s 0.3s;
312
- }
313
- @keyframes loader-disappearance {
314
- 100% {
315
- opacity: 0;
316
- }
317
- }
318
- @keyframes loader-appearance {
319
- 0% {
320
- opacity: 0;
321
- }
322
- }
323
- @keyframes loader-circular-track {
324
- 0% {
325
- stroke-dasharray: 1, 400;
326
- stroke-dashoffset: 0;
327
- }
328
- 50% {
329
- stroke-dasharray: 400, 400;
330
- stroke-dashoffset: -100;
331
- }
332
- 100% {
333
- stroke-dasharray: 400, 400;
334
- stroke-dashoffset: -260;
335
- }
336
- }
337
-
338
- @keyframes loader-circular-spinner {
339
- 0% {
340
- transform: rotate(0deg);
341
- }
342
-
343
- 100% {
344
- transform: rotate(360deg);
345
- }
346
- }
347
- #loader .spinner {
348
- animation: loader-disappearance 0.6s both;
349
- width: 48px;
350
- height: 48px;
351
- }
352
- #loader .spinner {
353
- animation: loader-appearance 0.6s both;
354
- }
355
- `
356
- this.root = this.attachShadow({ mode: 'open' })
357
- this.loader = document.createElement('div')
358
- this.loader.id = 'loader'
359
- this.loader.innerHTML = `
360
- <div class="spinner">
361
- <svg
362
- viewBox="0 0 100 100"
363
- style="
364
- animation: 2s linear 0s infinite normal none running loader-circular-spinner;
365
- display: block;
366
- width: 48px;
367
- height: 48px;
368
- "
369
- >
370
- <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
371
- <circle
372
- fill="transparent"
373
- stroke="#5548D9"
374
- cx="50"
375
- cy="50"
376
- r="42"
377
- stroke-width="10px"
378
- stroke-linecap="round"
379
- style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
380
- ></circle>
381
- </svg>
382
- </div>`
383
- this.shadowRoot.appendChild(this.stylesheet)
384
- this.shadowRoot.appendChild(this.loader)
385
- }
386
- }
387
-
388
- if (typeof window != 'undefined' && !window.customElements.get('feaas-stylesheet')) {
389
- window.customElements.define('feaas-stylesheet', HTMLFeaasStylesheet)
390
- window.customElements.define('feaas-component', HTMLFeaasComponent)
391
- window.customElements.define('feaas-picker-lazy', HTMLFeaasPickerLazy)
392
- if (!window.customElements.get('feaas-loader')) window.customElements.define('feaas-loader', HTMLFeaasLoader)
393
- }