@sitecore-feaas/clientside 0.0.3 → 0.0.5

package/dist/node/index.cjs

@@ -1184,11 +1184,16 @@ var HTMLFeaasComponent = class extends WebComponent {
       return;
     if (name == "template") {
       this.template = newValue;
+    } else if (name != "date") {
+      this.template = null;
     }
     if (name == "data" && this.children.length > 0) {
       this.update();
     } else {
-      this.render();
+      cancelAnimationFrame(this.rendering);
+      this.rendering = requestAnimationFrame(() => {
+        this.render();
+      });
     }
   }
   update() {
@@ -1294,9 +1299,175 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     };
   }
 };
+var HTMLFeaasPickerLazy = class extends WebComponent {
+  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() {
+    if (!this.script) {
+      this.script = document.createElement("script");
+      this.script.type = "module";
+      this.script.onload = this.onScriptLoaded;
+      this.script.src = this.src;
+      this.script.crossOrigin = "anonymous";
+      this.appendChild(this.script);
+    }
+  }
+  getProps() {
+    return {
+      mode: this.getAttribute("mode"),
+      library: this.getAttribute("library"),
+      src: this.getAttribute("src")
+    };
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.set(this.getProps());
+  }
+  set(options) {
+    Object.assign(this, options);
+    const keys = Object.keys(this.getProps());
+    for (var key of keys) {
+      const value = this[key];
+      if (value == null) {
+        this.removeAttribute(key);
+        this.load();
+      } else if (this.getAttribute(key) != String(value)) {
+        this.setAttribute(key, String(value));
+      }
+    }
+    if (this.mode) {
+      this.removeAttribute("hidden");
+    } else if (this.getAttribute("hidden") == null) {
+      this.setAttribute("hidden", "hidden");
+    }
+    if (this.element && this.element.set) {
+      this.element.onClose = this.onClose;
+      this.element.set(options);
+    }
+  }
+};
+var HTMLFeaasLoader = class extends WebComponent {
+  static get observedAttributes() {
+    return ["hidden"];
+  }
+  connectedCallback() {
+    this.style.opacity = "1";
+    this.style.transition = "opacity 0.2s 0.6s";
+    this.stylesheet = document.createElement("style");
+    this.stylesheet.textContent = `
+#loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f6f6ff;
+  z-index: 1000;
+  opacity: 1;
+  transition: top 0.3s, background-color 0.7s 0.3s;
+}
+@keyframes loader-disappearance {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes loader-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+@keyframes loader-circular-track {
+  0% {
+    stroke-dasharray: 1, 400;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -260;
+  }
+}
+
+@keyframes loader-circular-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+#loader .spinner {
+  animation: loader-disappearance 0.6s both;
+  width: 48px;
+  height: 48px;
+}
+#loader .spinner {
+  animation: loader-appearance 0.6s both;
+}
+`;
+    this.root = this.attachShadow({ mode: "open" });
+    this.loader = document.createElement("div");
+    this.loader.id = "loader";
+    this.loader.innerHTML = `
+<div class="spinner">
+  <svg
+    viewBox="0 0 100 100"
+    style="
+      animation: 2s linear 0s infinite normal none running loader-circular-spinner;
+      display: block;
+      width: 48px;
+      height: 48px;
+    "
+  >
+    <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
+    <circle
+      fill="transparent"
+      stroke="#5548D9"
+      cx="50"
+      cy="50"
+      r="42"
+      stroke-width="10px"
+      stroke-linecap="round"
+      style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
+    ></circle>
+  </svg>
+</div>`;
+    this.shadowRoot.appendChild(this.stylesheet);
+    this.shadowRoot.appendChild(this.loader);
+  }
+};
 if (typeof window != "undefined" && !window.customElements.get("feaas-stylesheet")) {
   window.customElements.define("feaas-stylesheet", HTMLFeaasStylesheet);
   window.customElements.define("feaas-component", HTMLFeaasComponent);
+  window.customElements.define("feaas-picker-lazy", HTMLFeaasPickerLazy);
+  window.customElements.define("feaas-loader", HTMLFeaasLoader);
 }
 
 // src/index.ts

package/dist/node/index.d.ts

@@ -1,5 +1,5 @@
-import { H as HTMLFeaasComponent, a as HTMLFeaasStylesheet, D as Datascopes, F as FEAASCustomizations, C as CloudStylesheet, b as FEAASComponentProps } from './webcomponent-7a0e7c34.js';
-export { D as Datascopes, E as ExplicitTemplate, b as FEAASComponentProps, F as FEAASCustomizations, H as HTMLFeaasComponent, a as HTMLFeaasStylesheet, d as autoloadScripts, c as cleanCollectionBit, l as loadScript, n as normalizeCollectionScope, o as observeDOMElement, q as queryScopes, i as renderComponent, r as renderComponentElement, j as renderComponentPromise, f as renderDOMContent, e as renderDOMElement, g as renderStylesheet, h as renderStylesheetPromise, s as setDOMAttribute } from './webcomponent-7a0e7c34.js';
+import { H as HTMLFeaasComponent, a as HTMLFeaasStylesheet, D as Datascopes, F as FEAASCustomizations, C as CloudStylesheet, b as FEAASComponentProps } from './webcomponent-6b45b819.js';
+export { D as Datascopes, E as ExplicitTemplate, b as FEAASComponentProps, F as FEAASCustomizations, H as HTMLFeaasComponent, k as HTMLFeaasPickerProps, a as HTMLFeaasStylesheet, P as PickerProps, d as autoloadScripts, c as cleanCollectionBit, l as loadScript, n as normalizeCollectionScope, o as observeDOMElement, q as queryScopes, i as renderComponent, r as renderComponentElement, j as renderComponentPromise, f as renderDOMContent, e as renderDOMElement, g as renderStylesheet, h as renderStylesheetPromise, s as setDOMAttribute } from './webcomponent-6b45b819.js';
 
 declare function fetchAndRevalidate(url: Parameters<typeof fetch>[0], options: Parameters<typeof fetch>[1], validator: (resposne: Response) => boolean, callback: (response: Response, status: 'cached' | 'valid') => void): Promise<Response>;
 

package/dist/node/index.js

@@ -1149,11 +1149,16 @@ var HTMLFeaasComponent = class extends WebComponent {
       return;
     if (name == "template") {
       this.template = newValue;
+    } else if (name != "date") {
+      this.template = null;
     }
     if (name == "data" && this.children.length > 0) {
       this.update();
     } else {
-      this.render();
+      cancelAnimationFrame(this.rendering);
+      this.rendering = requestAnimationFrame(() => {
+        this.render();
+      });
     }
   }
   update() {
@@ -1259,9 +1264,175 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     };
   }
 };
+var HTMLFeaasPickerLazy = class extends WebComponent {
+  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() {
+    if (!this.script) {
+      this.script = document.createElement("script");
+      this.script.type = "module";
+      this.script.onload = this.onScriptLoaded;
+      this.script.src = this.src;
+      this.script.crossOrigin = "anonymous";
+      this.appendChild(this.script);
+    }
+  }
+  getProps() {
+    return {
+      mode: this.getAttribute("mode"),
+      library: this.getAttribute("library"),
+      src: this.getAttribute("src")
+    };
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.set(this.getProps());
+  }
+  set(options) {
+    Object.assign(this, options);
+    const keys = Object.keys(this.getProps());
+    for (var key of keys) {
+      const value = this[key];
+      if (value == null) {
+        this.removeAttribute(key);
+        this.load();
+      } else if (this.getAttribute(key) != String(value)) {
+        this.setAttribute(key, String(value));
+      }
+    }
+    if (this.mode) {
+      this.removeAttribute("hidden");
+    } else if (this.getAttribute("hidden") == null) {
+      this.setAttribute("hidden", "hidden");
+    }
+    if (this.element && this.element.set) {
+      this.element.onClose = this.onClose;
+      this.element.set(options);
+    }
+  }
+};
+var HTMLFeaasLoader = class extends WebComponent {
+  static get observedAttributes() {
+    return ["hidden"];
+  }
+  connectedCallback() {
+    this.style.opacity = "1";
+    this.style.transition = "opacity 0.2s 0.6s";
+    this.stylesheet = document.createElement("style");
+    this.stylesheet.textContent = `
+#loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f6f6ff;
+  z-index: 1000;
+  opacity: 1;
+  transition: top 0.3s, background-color 0.7s 0.3s;
+}
+@keyframes loader-disappearance {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes loader-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+@keyframes loader-circular-track {
+  0% {
+    stroke-dasharray: 1, 400;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -260;
+  }
+}
+
+@keyframes loader-circular-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+#loader .spinner {
+  animation: loader-disappearance 0.6s both;
+  width: 48px;
+  height: 48px;
+}
+#loader .spinner {
+  animation: loader-appearance 0.6s both;
+}
+`;
+    this.root = this.attachShadow({ mode: "open" });
+    this.loader = document.createElement("div");
+    this.loader.id = "loader";
+    this.loader.innerHTML = `
+<div class="spinner">
+  <svg
+    viewBox="0 0 100 100"
+    style="
+      animation: 2s linear 0s infinite normal none running loader-circular-spinner;
+      display: block;
+      width: 48px;
+      height: 48px;
+    "
+  >
+    <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
+    <circle
+      fill="transparent"
+      stroke="#5548D9"
+      cx="50"
+      cy="50"
+      r="42"
+      stroke-width="10px"
+      stroke-linecap="round"
+      style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
+    ></circle>
+  </svg>
+</div>`;
+    this.shadowRoot.appendChild(this.stylesheet);
+    this.shadowRoot.appendChild(this.loader);
+  }
+};
 if (typeof window != "undefined" && !window.customElements.get("feaas-stylesheet")) {
   window.customElements.define("feaas-stylesheet", HTMLFeaasStylesheet);
   window.customElements.define("feaas-component", HTMLFeaasComponent);
+  window.customElements.define("feaas-picker-lazy", HTMLFeaasPickerLazy);
+  window.customElements.define("feaas-loader", HTMLFeaasLoader);
 }
 
 // src/index.ts

package/dist/node/react.cjs

@@ -1196,11 +1196,16 @@ var HTMLFeaasComponent = class extends WebComponent {
       return;
     if (name == "template") {
       this.template = newValue;
+    } else if (name != "date") {
+      this.template = null;
     }
     if (name == "data" && this.children.length > 0) {
       this.update();
     } else {
-      this.render();
+      cancelAnimationFrame(this.rendering);
+      this.rendering = requestAnimationFrame(() => {
+        this.render();
+      });
     }
   }
   update() {
@@ -1306,9 +1311,175 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     };
   }
 };
+var HTMLFeaasPickerLazy = class extends WebComponent {
+  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() {
+    if (!this.script) {
+      this.script = document.createElement("script");
+      this.script.type = "module";
+      this.script.onload = this.onScriptLoaded;
+      this.script.src = this.src;
+      this.script.crossOrigin = "anonymous";
+      this.appendChild(this.script);
+    }
+  }
+  getProps() {
+    return {
+      mode: this.getAttribute("mode"),
+      library: this.getAttribute("library"),
+      src: this.getAttribute("src")
+    };
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.set(this.getProps());
+  }
+  set(options) {
+    Object.assign(this, options);
+    const keys = Object.keys(this.getProps());
+    for (var key of keys) {
+      const value = this[key];
+      if (value == null) {
+        this.removeAttribute(key);
+        this.load();
+      } else if (this.getAttribute(key) != String(value)) {
+        this.setAttribute(key, String(value));
+      }
+    }
+    if (this.mode) {
+      this.removeAttribute("hidden");
+    } else if (this.getAttribute("hidden") == null) {
+      this.setAttribute("hidden", "hidden");
+    }
+    if (this.element && this.element.set) {
+      this.element.onClose = this.onClose;
+      this.element.set(options);
+    }
+  }
+};
+var HTMLFeaasLoader = class extends WebComponent {
+  static get observedAttributes() {
+    return ["hidden"];
+  }
+  connectedCallback() {
+    this.style.opacity = "1";
+    this.style.transition = "opacity 0.2s 0.6s";
+    this.stylesheet = document.createElement("style");
+    this.stylesheet.textContent = `
+#loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f6f6ff;
+  z-index: 1000;
+  opacity: 1;
+  transition: top 0.3s, background-color 0.7s 0.3s;
+}
+@keyframes loader-disappearance {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes loader-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+@keyframes loader-circular-track {
+  0% {
+    stroke-dasharray: 1, 400;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -260;
+  }
+}
+
+@keyframes loader-circular-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+#loader .spinner {
+  animation: loader-disappearance 0.6s both;
+  width: 48px;
+  height: 48px;
+}
+#loader .spinner {
+  animation: loader-appearance 0.6s both;
+}
+`;
+    this.root = this.attachShadow({ mode: "open" });
+    this.loader = document.createElement("div");
+    this.loader.id = "loader";
+    this.loader.innerHTML = `
+<div class="spinner">
+  <svg
+    viewBox="0 0 100 100"
+    style="
+      animation: 2s linear 0s infinite normal none running loader-circular-spinner;
+      display: block;
+      width: 48px;
+      height: 48px;
+    "
+  >
+    <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
+    <circle
+      fill="transparent"
+      stroke="#5548D9"
+      cx="50"
+      cy="50"
+      r="42"
+      stroke-width="10px"
+      stroke-linecap="round"
+      style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
+    ></circle>
+  </svg>
+</div>`;
+    this.shadowRoot.appendChild(this.stylesheet);
+    this.shadowRoot.appendChild(this.loader);
+  }
+};
 if (typeof window != "undefined" && !window.customElements.get("feaas-stylesheet")) {
   window.customElements.define("feaas-stylesheet", HTMLFeaasStylesheet);
   window.customElements.define("feaas-component", HTMLFeaasComponent);
+  window.customElements.define("feaas-picker-lazy", HTMLFeaasPickerLazy);
+  window.customElements.define("feaas-loader", HTMLFeaasLoader);
 }
 
 // src/react.ts

package/dist/node/react.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { b as FEAASComponentProps, C as CloudStylesheet, H as HTMLFeaasComponent, a as HTMLFeaasStylesheet, D as Datascopes, F as FEAASCustomizations } from './webcomponent-7a0e7c34.js';
-export { C as CloudStylesheet, k as CloudTemplate, D as Datascopes, E as ExplicitTemplate, b as FEAASComponentProps, F as FEAASCustomizations, H as HTMLFeaasComponent, a as HTMLFeaasStylesheet, d as autoloadScripts, c as cleanCollectionBit, t as fetchComponent, u as fetchStylesheet, m as getComponentURL, p as getStylesheetURL, l as loadScript, n as normalizeCollectionScope, o as observeDOMElement, q as queryScopes, i as renderComponent, r as renderComponentElement, j as renderComponentPromise, f as renderDOMContent, e as renderDOMElement, g as renderStylesheet, h as renderStylesheetPromise, s as setDOMAttribute } from './webcomponent-7a0e7c34.js';
+import { b as FEAASComponentProps, C as CloudStylesheet, H as HTMLFeaasComponent, a as HTMLFeaasStylesheet, D as Datascopes, F as FEAASCustomizations } from './webcomponent-6b45b819.js';
+export { C as CloudStylesheet, m as CloudTemplate, D as Datascopes, E as ExplicitTemplate, b as FEAASComponentProps, F as FEAASCustomizations, H as HTMLFeaasComponent, k as HTMLFeaasPickerProps, a as HTMLFeaasStylesheet, P as PickerProps, d as autoloadScripts, c as cleanCollectionBit, u as fetchComponent, v as fetchStylesheet, p as getComponentURL, t as getStylesheetURL, l as loadScript, n as normalizeCollectionScope, o as observeDOMElement, q as queryScopes, i as renderComponent, r as renderComponentElement, j as renderComponentPromise, f as renderDOMContent, e as renderDOMElement, g as renderStylesheet, h as renderStylesheetPromise, s as setDOMAttribute } from './webcomponent-6b45b819.js';
 
 declare function Component(props: FEAASComponentProps): React.DetailedReactHTMLElement<{
     ref: React.MutableRefObject<HTMLElement>;