@sitecore-feaas/clientside 0.0.2 → 0.0.4

package/dist/node/index.cjs

@@ -834,17 +834,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* () {
@@ -852,7 +852,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);
@@ -959,7 +959,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;
@@ -978,6 +978,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") {
@@ -1169,7 +1171,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;
@@ -1182,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() {
@@ -1232,7 +1239,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;
@@ -1240,7 +1247,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}`
             );
           });
         }
@@ -1254,8 +1261,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
     };
   }
@@ -1266,7 +1273,7 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     this.connected = false;
   }
   static get observedAttributes() {
-    return ["library", "version", "hostname"];
+    return ["library", "revision", "hostname"];
   }
   connectedCallback() {
     this.connected = true;
@@ -1287,14 +1294,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/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-189a307d.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-189a307d.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

@@ -799,17 +799,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* () {
@@ -817,7 +817,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);
@@ -924,7 +924,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;
@@ -943,6 +943,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") {
@@ -1134,7 +1136,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;
@@ -1147,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() {
@@ -1197,7 +1204,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;
@@ -1205,7 +1212,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}`
             );
           });
         }
@@ -1219,8 +1226,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
     };
   }
@@ -1231,7 +1238,7 @@ var HTMLFeaasStylesheet = class extends WebComponent {
     this.connected = false;
   }
   static get observedAttributes() {
-    return ["library", "version", "hostname"];
+    return ["library", "revision", "hostname"];
   }
   connectedCallback() {
     this.connected = true;
@@ -1252,14 +1259,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/index.ts