@sitecore-feaas/clientside 0.0.2 → 0.0.4

package/dist/node/react.cjs

@@ -128,17 +128,17 @@ function getComponentURL({
   hostname = "https://feaascomponentsapidev.blob.core.windows.net",
   library,
   component,
-  variant,
-  version = "published"
+  version,
+  revision = "published"
 }) {
-  return `${hostname}/components/${library}/${component}/${variant}/${version}.html`;
+  return `${hostname}/components/${library}/${component}/${version}/${revision}.html`;
 }
 function getStylesheetURL({
   hostname = `https://feaascomponentsapidev.blob.core.windows.net`,
   library,
-  version = "published"
+  revision = "published"
 }) {
-  return `${hostname}/styles/${library}/${version}.css`;
+  return `${hostname}/styles/${library}/${revision}.css`;
 }
 function fetchComponent(props, callback) {
   return __async(this, null, function* () {
@@ -146,7 +146,7 @@ function fetchComponent(props, callback) {
       getComponentURL(props),
       {},
       (response) => {
-        return response.headers.get("x-ms-meta-variantDeletedAt") == null;
+        return response.headers.get("x-ms-meta-versionDeletedAt") == null;
       },
       (response) => {
         response.text().then(callback);
@@ -971,7 +971,7 @@ function queryScopes(scopes, datapath, singleValue = false, json = scopes) {
     path,
     json
   });
-  if (singleValue && collection) {
+  if (singleValue && collection && Array.isArray(collection)) {
     return collection[0];
   } else {
     return collection;
@@ -990,6 +990,8 @@ function setDOMAttribute(element, attribute, value, config) {
     target = element.tagName == "IMG" ? element : element.querySelector("img, video");
   } else if (attribute == "data-path-href") {
     target = element.querySelector("a") || element.closest("a");
+  } else if (attribute == "data-path-alt") {
+    target = element.querySelector("img, picture");
   } else if (attribute == "data-path-hidden") {
     value = !value ? true : null;
   } else if (attribute == "data-path" || attribute == "data-embed-html" || attribute == "html") {
@@ -1181,7 +1183,7 @@ var HTMLFeaasComponent = class extends WebComponent {
     this.isFetching = false;
   }
   static get observedAttributes() {
-    return ["data", "library", "component", "variant", "version", "hostname", "template"];
+    return ["data", "library", "component", "version", "revision", "hostname", "template"];
   }
   connectedCallback() {
     this.connected = true;
@@ -1194,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() {
@@ -1244,7 +1251,7 @@ var HTMLFeaasComponent = class extends WebComponent {
     const newProps = this.getProps();
     if (this.template == null) {
       if (!this.isFetching) {
-        if (newProps.component != null && newProps.variant != null) {
+        if (newProps.component != null && newProps.version != null) {
           this.isFetching = true;
           fetchComponent(newProps, (template) => {
             this.template = template;
@@ -1252,7 +1259,7 @@ var HTMLFeaasComponent = class extends WebComponent {
             renderDOMContent(this, this.template, newProps.data);
           }).catch(() => {
             console.error(
-              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.variant}/${newProps.version}`
+              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.version}/${newProps.revision}`
             );
           });
         }
@@ -1266,8 +1273,8 @@ var HTMLFeaasComponent = class extends WebComponent {
       data: this.getData(),
       library: this.getAttribute("library") || void 0,
       component: this.getAttribute("component") || void 0,
-      variant: this.getAttribute("variant") || void 0,
       version: this.getAttribute("version") || void 0,
+      revision: this.getAttribute("revision") || void 0,
       hostname: this.getAttribute("hostname") || void 0
     };
   }
@@ -1278,7 +1285,7 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     this.connected = false;
   }
   static get observedAttributes() {
-    return ["library", "version", "hostname"];
+    return ["library", "revision", "hostname"];
   }
   connectedCallback() {
     this.connected = true;
@@ -1299,14 +1306,179 @@ var HTMLFeaasStylesheet = class extends WebComponent {
   getProps() {
     return {
       library: this.getAttribute("library") || void 0,
-      version: this.getAttribute("version") || void 0,
+      revision: this.getAttribute("revision") || void 0,
       hostname: this.getAttribute("hostname") || void 0
     };
   }
 };
+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.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
@@ -1319,12 +1491,12 @@ function Component(props) {
       if (template == null && !("template" in props)) {
         fetchComponent(props, setTemplate).catch(() => {
           console.error(
-            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.variant}/${props.version}`
+            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.version}/${props.revision}`
           );
         });
       }
     },
-    "template" in props ? [props.template, null, null, null] : [props.library, props.component, props.variant, props.version, props.hostname]
+    "template" in props ? [props.template, null, null, null] : [props.library, props.component, props.version, props.revision, props.hostname]
   );
   import_react.default.useEffect(() => {
     if (ref.current && template) {

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-189a307d.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-189a307d.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>;

package/dist/node/react.js

@@ -84,17 +84,17 @@ function getComponentURL({
   hostname = "https://feaascomponentsapidev.blob.core.windows.net",
   library,
   component,
-  variant,
-  version = "published"
+  version,
+  revision = "published"
 }) {
-  return `${hostname}/components/${library}/${component}/${variant}/${version}.html`;
+  return `${hostname}/components/${library}/${component}/${version}/${revision}.html`;
 }
 function getStylesheetURL({
   hostname = `https://feaascomponentsapidev.blob.core.windows.net`,
   library,
-  version = "published"
+  revision = "published"
 }) {
-  return `${hostname}/styles/${library}/${version}.css`;
+  return `${hostname}/styles/${library}/${revision}.css`;
 }
 function fetchComponent(props, callback) {
   return __async(this, null, function* () {
@@ -102,7 +102,7 @@ function fetchComponent(props, callback) {
       getComponentURL(props),
       {},
       (response) => {
-        return response.headers.get("x-ms-meta-variantDeletedAt") == null;
+        return response.headers.get("x-ms-meta-versionDeletedAt") == null;
       },
       (response) => {
         response.text().then(callback);
@@ -927,7 +927,7 @@ function queryScopes(scopes, datapath, singleValue = false, json = scopes) {
     path,
     json
   });
-  if (singleValue && collection) {
+  if (singleValue && collection && Array.isArray(collection)) {
     return collection[0];
   } else {
     return collection;
@@ -946,6 +946,8 @@ function setDOMAttribute(element, attribute, value, config) {
     target = element.tagName == "IMG" ? element : element.querySelector("img, video");
   } else if (attribute == "data-path-href") {
     target = element.querySelector("a") || element.closest("a");
+  } else if (attribute == "data-path-alt") {
+    target = element.querySelector("img, picture");
   } else if (attribute == "data-path-hidden") {
     value = !value ? true : null;
   } else if (attribute == "data-path" || attribute == "data-embed-html" || attribute == "html") {
@@ -1137,7 +1139,7 @@ var HTMLFeaasComponent = class extends WebComponent {
     this.isFetching = false;
   }
   static get observedAttributes() {
-    return ["data", "library", "component", "variant", "version", "hostname", "template"];
+    return ["data", "library", "component", "version", "revision", "hostname", "template"];
   }
   connectedCallback() {
     this.connected = true;
@@ -1150,11 +1152,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() {
@@ -1200,7 +1207,7 @@ var HTMLFeaasComponent = class extends WebComponent {
     const newProps = this.getProps();
     if (this.template == null) {
       if (!this.isFetching) {
-        if (newProps.component != null && newProps.variant != null) {
+        if (newProps.component != null && newProps.version != null) {
           this.isFetching = true;
           fetchComponent(newProps, (template) => {
             this.template = template;
@@ -1208,7 +1215,7 @@ var HTMLFeaasComponent = class extends WebComponent {
             renderDOMContent(this, this.template, newProps.data);
           }).catch(() => {
             console.error(
-              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.variant}/${newProps.version}`
+              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.version}/${newProps.revision}`
             );
           });
         }
@@ -1222,8 +1229,8 @@ var HTMLFeaasComponent = class extends WebComponent {
       data: this.getData(),
       library: this.getAttribute("library") || void 0,
       component: this.getAttribute("component") || void 0,
-      variant: this.getAttribute("variant") || void 0,
       version: this.getAttribute("version") || void 0,
+      revision: this.getAttribute("revision") || void 0,
       hostname: this.getAttribute("hostname") || void 0
     };
   }
@@ -1234,7 +1241,7 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     this.connected = false;
   }
   static get observedAttributes() {
-    return ["library", "version", "hostname"];
+    return ["library", "revision", "hostname"];
   }
   connectedCallback() {
     this.connected = true;
@@ -1255,14 +1262,179 @@ var HTMLFeaasStylesheet = class extends WebComponent {
   getProps() {
     return {
       library: this.getAttribute("library") || void 0,
-      version: this.getAttribute("version") || void 0,
+      revision: this.getAttribute("revision") || void 0,
       hostname: this.getAttribute("hostname") || void 0
     };
   }
 };
+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.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
@@ -1275,12 +1447,12 @@ function Component(props) {
       if (template == null && !("template" in props)) {
         fetchComponent(props, setTemplate).catch(() => {
           console.error(
-            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.variant}/${props.version}`
+            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.version}/${props.revision}`
           );
         });
       }
     },
-    "template" in props ? [props.template, null, null, null] : [props.library, props.component, props.variant, props.version, props.hostname]
+    "template" in props ? [props.template, null, null, null] : [props.library, props.component, props.version, props.revision, props.hostname]
   );
   React.useEffect(() => {
     if (ref.current && template) {