@nectary/components 5.42.5-rc.0 → 5.43.0

package/utils/shared/global-elements-manager.js

@@ -0,0 +1,150 @@
+import { isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
+import "./deferred-promise.js";
+import { loadModuleWithFallback } from "./cdn-loader.js";
+import { getConstructor, getStore } from "./global-elements-store.js";
+class GlobalElementsManager {
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  getConstructor(name) {
+    return getConstructor(this.config.storeKey, name);
+  }
+  // This patch is made so that older Nectary versions automatically gets opted in to global components
+  patchCustomElements() {
+    const originalDefine = window.customElements.define.bind(window.customElements);
+    window.customElements.define = (name, constructor, options) => {
+      if (isSinchElementName(name) && this.config.baseElementNames.has(sinchElementNameToBase(name))) {
+        const nectaryConstructor = constructor;
+        if (nectaryConstructor.isGlobal) {
+          return originalDefine(name, constructor, options);
+        }
+        (async () => {
+          try {
+            const globalConstructor = await this.getConstructor(name);
+            if (globalConstructor !== null) {
+              originalDefine(name, globalConstructor, options);
+            } else {
+              console.error(`Nectary element ${name} not found, falling back to local constructor`);
+              originalDefine(name, constructor, options);
+            }
+          } catch (error) {
+            console.error(`Failed to get global constructor for ${name}:`, error);
+            originalDefine(name, constructor, options);
+          }
+        })();
+      } else {
+        return originalDefine(name, constructor, options);
+      }
+    };
+  }
+  toClassName(itemName) {
+    return itemName.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+  }
+  loadModule(modulePath) {
+    const store = getStore(this.config.storeKey);
+    return loadModuleWithFallback({
+      cdnUrl: store.cdnUrl,
+      fallbackCdnUrl: store.fallbackCdnUrl,
+      version: store.targetlibVersion,
+      modulePath,
+      logPrefix: "Nectary"
+    });
+  }
+  createLoader(modulePath, itemName) {
+    return async () => {
+      const module = await this.loadModule(modulePath);
+      const className = this.toClassName(itemName);
+      const globalConstructor = module[className];
+      if (globalConstructor == null) {
+        throw new Error(`Nectary element ${className} not found in module`);
+      }
+      globalConstructor.isGlobal = true;
+      return globalConstructor;
+    };
+  }
+  async preloadBundle() {
+    const store = getStore(this.config.storeKey);
+    const module = await this.loadModule("bundle");
+    for (const itemName of this.config.baseElementNames) {
+      const className = this.toClassName(itemName);
+      const globalConstructor = module[className];
+      if (globalConstructor == null) {
+        console.error(`Nectary element ${className} not found in module`);
+        continue;
+      }
+      globalConstructor.isGlobal = true;
+      const sinchName = `sinch-${itemName}`;
+      store.definitions.set(sinchName, () => Promise.resolve(globalConstructor));
+      try {
+        window.customElements.define(sinchName, globalConstructor);
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+  }
+  async init(options) {
+    const store = getStore(this.config.storeKey);
+    if (store.hasInitialized) {
+      console.warn(`${this.constructor.name} has already been initialized`);
+      return;
+    }
+    store.hasInitialized = true;
+    store.cdnUrl = options.cdnUrl;
+    store.fallbackCdnUrl = options.fallbackCdnUrl ?? "";
+    store.targetlibVersion = options.targetlibVersion ?? "";
+    store.preload = options.preload ?? false;
+    try {
+      if (store.preload) {
+        await this.preloadBundle();
+      } else {
+        this.patchCustomElements();
+        const setDefinitions = () => {
+          this.config.baseElementNames.forEach((name) => {
+            const modulePath = this.getModulePath(name);
+            store.definitions.set(`sinch-${name}`, this.createLoader(modulePath, name));
+          });
+        };
+        setDefinitions();
+        const host = new URL(store.cdnUrl).host;
+        if (host === "esm.sh" && store.targetlibVersion.length === 0 && store.preload === false) {
+          const registry = await fetch(`${this.config.registryUrl}/latest`);
+          const registryData = await registry.json();
+          store.targetlibVersion = registryData.version;
+          setDefinitions();
+        }
+      }
+    } finally {
+      store.loadPromise.resolve();
+    }
+  }
+  whenLoaded() {
+    const store = getStore(this.config.storeKey);
+    return store.loadPromise.promise;
+  }
+  getModulePath(name) {
+    for (const [key, value] of this.config.nameToPathMap ?? []) {
+      const splittedName = name.startsWith(key) ? name.split(key) : [name];
+      if (splittedName.length > 1) {
+        const restOfName = splittedName.slice(1).join(key);
+        return value + restOfName;
+      }
+    }
+    return name;
+  }
+  async preload(name) {
+    const store = getStore(this.config.storeKey);
+    if (name === "all") {
+      await Promise.all(Array.from(store.definitions.keys()).map((n) => store.definitions.get(n)?.()));
+      return;
+    }
+    if (Array.isArray(name)) {
+      await Promise.all(name.map((n) => store.definitions.get(n)?.()));
+      return;
+    }
+    await store.definitions.get(name)?.();
+  }
+}
+export {
+  GlobalElementsManager
+};

package/utils/shared/global-elements-store.js

@@ -0,0 +1,33 @@
+import { createDeferredPromise } from "./deferred-promise.js";
+const getStore = (storeKey) => {
+  if (window[storeKey] != null) {
+    return window[storeKey];
+  }
+  const store = {
+    definitions: /* @__PURE__ */ new Map(),
+    hasInitialized: false,
+    targetlibVersion: "",
+    cdnUrl: "",
+    fallbackCdnUrl: "",
+    preload: false,
+    loadPromise: createDeferredPromise()
+  };
+  Object.defineProperty(window, storeKey, {
+    value: store,
+    enumerable: false,
+    writable: false,
+    configurable: false
+  });
+  return store;
+};
+const getConstructor = (storeKey, name) => {
+  const definitionLoader = getStore(storeKey).definitions.get(name);
+  if (definitionLoader == null) {
+    return null;
+  }
+  return definitionLoader();
+};
+export {
+  getConstructor,
+  getStore
+};

package/utils/shared/index.d.js

@@ -0,0 +1,16 @@
+import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
+import { createDeferredPromise } from "./deferred-promise.js";
+import { loadCSSModuleWithFallback, loadModuleWithFallback } from "./cdn-loader.js";
+import { getConstructor, getStore } from "./global-elements-store.js";
+import { GlobalElementsManager } from "./global-elements-manager.js";
+export {
+  GlobalElementsManager,
+  NectaryElementBase,
+  createDeferredPromise,
+  getConstructor,
+  getStore,
+  isSinchElementName,
+  loadCSSModuleWithFallback,
+  loadModuleWithFallback,
+  sinchElementNameToBase
+};

package/utils/shared/index.js

@@ -0,0 +1,16 @@
+import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
+import { createDeferredPromise } from "./deferred-promise.js";
+import { loadCSSModuleWithFallback, loadModuleWithFallback } from "./cdn-loader.js";
+import { getConstructor, getStore } from "./global-elements-store.js";
+import { GlobalElementsManager } from "./global-elements-manager.js";
+export {
+  GlobalElementsManager,
+  NectaryElementBase,
+  createDeferredPromise,
+  getConstructor,
+  getStore,
+  isSinchElementName,
+  loadCSSModuleWithFallback,
+  loadModuleWithFallback,
+  sinchElementNameToBase
+};

package/utils/shared/nectary-element-base.js

@@ -0,0 +1,25 @@
+const isSinchElementName = (value) => {
+  return value.startsWith("sinch-");
+};
+const sinchElementNameToBase = (value) => {
+  return value.split("sinch-")[1];
+};
+class NectaryElementBase extends HTMLElement {
+  static _isGlobal = false;
+  static get elementName() {
+    throw new Error(
+      `Class ${this.name} must implement static getter 'elementName'`
+    );
+  }
+  static get isGlobal() {
+    return this._isGlobal;
+  }
+  static set isGlobal(value) {
+    this._isGlobal = value;
+  }
+}
+export {
+  NectaryElementBase,
+  isSinchElementName,
+  sinchElementNameToBase
+};

package/accordion/types.d.js

@@ -1 +0,0 @@
-

package/accordion-item/index.d.js

@@ -1,3 +0,0 @@
-import "../index.d3.js";
-import "../index.d.js";
-import "../index.js";

package/action-menu/global/index.d.js

@@ -1 +0,0 @@
-

package/action-menu/index.d.js

@@ -1 +0,0 @@
-

package/action-menu/types.d.js

@@ -1 +0,0 @@
-

package/action-menu-option/global/index.d.js

@@ -1 +0,0 @@
-

package/action-menu-option/index.d.js

@@ -1 +0,0 @@
-import "../index.d.js";

package/action-menu-option/types.d.js

@@ -1 +0,0 @@
-

package/action-menu-option/utils.d.js

@@ -1 +0,0 @@
-

package/alert/global/index.d.js

@@ -1 +0,0 @@
-

package/alert/index.d.js

@@ -1,3 +0,0 @@
-import "../index.d3.js";
-import "../index.d5.js";
-import "../index.d.js";

package/alert/types.d.js

@@ -1 +0,0 @@
-

package/alert/utils.d.js

@@ -1 +0,0 @@
-

package/avatar/colors.d.js

@@ -1 +0,0 @@
-

package/avatar/global/index.d.js

@@ -1 +0,0 @@
-

package/avatar/index.d.js

@@ -1 +0,0 @@
-

package/avatar/types.d.js

@@ -1 +0,0 @@
-

package/avatar/utils.d.js

@@ -1 +0,0 @@
-

package/badge/global/index.d.js

@@ -1 +0,0 @@
-

package/badge/index.d.js

@@ -1 +0,0 @@
-

package/badge/types.d.js

@@ -1 +0,0 @@
-

package/badge/utils.d.js

@@ -1 +0,0 @@
-

package/button/global/index.d.js

@@ -1 +0,0 @@
-

package/button/index.d.js

@@ -1 +0,0 @@
-

package/button/types.d.js

@@ -1 +0,0 @@
-

package/button/utils.d.js

@@ -1 +0,0 @@
-

package/button-group/global/index.d.js

@@ -1 +0,0 @@
-

package/button-group/index.d.js

@@ -1 +0,0 @@
-

package/button-group/types.d.js

@@ -1 +0,0 @@
-

package/button-group-item/global/index.d.js

@@ -1 +0,0 @@
-

package/button-group-item/index.d.js

@@ -1 +0,0 @@
-

package/button-group-item/types.d.js

@@ -1 +0,0 @@
-

package/card-container/global/index.d.js

@@ -1 +0,0 @@
-

package/card-container/index.d.js

@@ -1 +0,0 @@
-

package/card-container/types.d.js

@@ -1 +0,0 @@
-

package/card-v2/global/index.d.js

@@ -1 +0,0 @@
-

package/card-v2/index.d.js

@@ -1 +0,0 @@
-

package/card-v2/types.d.js

@@ -1 +0,0 @@
-

package/card-v2-title/global/index.d.js

@@ -1 +0,0 @@
-

package/card-v2-title/index.d.js

@@ -1 +0,0 @@
-

package/card-v2-title/types.d.js

@@ -1 +0,0 @@
-

package/checkbox/global/index.d.js

@@ -1 +0,0 @@
-

package/checkbox/index.d.js

@@ -1 +0,0 @@
-import "../index.d5.js";

package/checkbox/types.d.js

@@ -1 +0,0 @@
-

package/chip/colors.d.js

@@ -1 +0,0 @@
-

package/chip/global/index.d.js

@@ -1 +0,0 @@
-

package/chip/index.d.js

@@ -1,2 +0,0 @@
-import "../index.d.js";
-import "../index.d3.js";

package/chip/types.d.js

@@ -1 +0,0 @@
-

package/chip/utils.d.js

@@ -1 +0,0 @@
-

package/code-tag/global/index.d.js

@@ -1 +0,0 @@
-

package/code-tag/index.d.js

@@ -1 +0,0 @@
-

package/code-tag/types.d.js

@@ -1 +0,0 @@
-

package/color-menu/global/index.d.js

@@ -1 +0,0 @@
-

package/color-menu/index.d.js

@@ -1 +0,0 @@
-

package/color-menu/types.d.js

@@ -1 +0,0 @@
-

package/color-menu/utils.d.js

@@ -1 +0,0 @@
-

package/color-menu-option/global/index.d.js

@@ -1 +0,0 @@
-

package/color-menu-option/index.d.js

@@ -1,2 +0,0 @@
-import "../index.d11.js";
-import "../index.d6.js";

package/color-menu-option/types.d.js

@@ -1 +0,0 @@
-

package/color-menu-option/utils.d.js

@@ -1 +0,0 @@
-

package/color-swatch/global/index.d.js

@@ -1,40 +0,0 @@
-const SKINTONE_SWATCH_COLORS = [
-  "skintone-dark",
-  "skintone-default",
-  "skintone-light",
-  "skintone-light-medium",
-  "skintone-medium",
-  "skintone-medium-dark"
-];
-const SWATCH_COLORS = [
-  "blue",
-  "dark-blue",
-  "dark-gray",
-  "dark-green",
-  "dark-orange",
-  "dark-pink",
-  "dark-red",
-  "dark-violet",
-  "dark-yellow",
-  "default",
-  "gray",
-  "green",
-  "light-blue",
-  "light-gray",
-  "light-green",
-  "light-orange",
-  "light-pink",
-  "light-red",
-  "light-violet",
-  "light-yellow",
-  "orange",
-  "pink",
-  "red",
-  "violet",
-  "yellow",
-  ...SKINTONE_SWATCH_COLORS
-];
-export {
-  SKINTONE_SWATCH_COLORS,
-  SWATCH_COLORS
-};

package/color-swatch/index.d.js

@@ -1,6 +0,0 @@
-import "../index.d.js";
-import { SKINTONE_SWATCH_COLORS, SWATCH_COLORS } from "./global/index.d.js";
-export {
-  SKINTONE_SWATCH_COLORS,
-  SWATCH_COLORS
-};

package/color-swatch/types.d.js

@@ -1 +0,0 @@
-

package/color-swatch/utils.d.js

@@ -1 +0,0 @@
-

package/date-picker/global/index.d.js

@@ -1 +0,0 @@
-

package/date-picker/index.d.js

@@ -1,2 +0,0 @@
-import "../index.d3.js";
-import "../index.d.js";

package/date-picker/types.d.js

@@ -1 +0,0 @@
-

package/date-picker/utils.d.js

@@ -1 +0,0 @@
-

package/dialog/global/index.d.js

@@ -1 +0,0 @@
-

package/dialog/index.d.js

@@ -1,3 +0,0 @@
-import "../index.d3.js";
-import "../index.d8.js";
-import "../index.js";

package/dialog/types.d.js

@@ -1 +0,0 @@
-

package/emoji/global/index.d.js

@@ -1 +0,0 @@
-

package/emoji/index.d.js

@@ -1 +0,0 @@
-

package/emoji/types.d.js

@@ -1 +0,0 @@
-

package/emoji/utils.d.js

@@ -1 +0,0 @@
-

package/emoji-picker/global/index.d.js

@@ -1 +0,0 @@
-

package/emoji-picker/index.d.js

@@ -1,7 +0,0 @@
-import "../index.d15.js";
-import "../index.d11.js";
-import "../index.d10.js";
-import "../index4.js";
-import "../index3.js";
-import "../index.d.js";
-import "../index.d3.js";

package/emoji-picker/types.d.js

@@ -1 +0,0 @@
-

package/field/global/index.d.js

@@ -1 +0,0 @@
-

package/field/index.d.js

@@ -1 +0,0 @@
-import "../index.d6.js";

package/field/types.d.js

@@ -1 +0,0 @@
-

package/field-v2/global/index.d.js

@@ -1 +0,0 @@
-

package/field-v2/index.d.js

@@ -1 +0,0 @@
-import "../index.d5.js";

package/field-v2/types.d.js

@@ -1 +0,0 @@
-

package/file-drop/global/index.d.js

@@ -1 +0,0 @@
-

package/file-drop/index.d.js

@@ -1,2 +0,0 @@
-import "../index.d.js";
-import "../index.d13.js";

package/file-drop/types.d.js

@@ -1 +0,0 @@
-

package/file-drop/utils.d.js

@@ -1 +0,0 @@
-

package/file-picker/global/index.d.js

@@ -1 +0,0 @@
-

package/file-picker/index.d.js

@@ -1 +0,0 @@
-

package/file-picker/types.d.js

@@ -1 +0,0 @@
-

package/file-picker/utils.d.js

@@ -1 +0,0 @@
-

package/file-status/global/index.d.js

@@ -1 +0,0 @@
-

package/file-status/index.d.js

@@ -1,3 +0,0 @@
-import "../index.d4.js";
-import "../index.d3.js";
-import "../index.d.js";

package/file-status/types.d.js

@@ -1 +0,0 @@
-

package/file-status/utils.d.js

@@ -1 +0,0 @@
-

package/flag/global/index.d.js

@@ -1 +0,0 @@
-

package/flag/index.d.js

@@ -1 +0,0 @@
-

package/flag/types.d.js

@@ -1 +0,0 @@
-