@nectary/components 5.1.4 → 5.2.1

package/bundle.js

@@ -8092,6 +8092,10 @@ class Radio extends NectaryElement {
     }
   }
   #onOptionKeyDown = (e) => {
+    const option = e.target?.closest("sinch-radio-option") ?? null;
+    if (option === null) {
+      return;
+    }
     switch (e.code) {
       case "ArrowUp":
       case "ArrowLeft": {
@@ -8119,11 +8123,15 @@ class Radio extends NectaryElement {
     this.#onValueChange(this.value);
   };
   #onOptionClick = (e) => {
-    const target = getTargetByAttribute(e, "value");
-    if (target === null || target.hasAttribute("disabled")) {
+    const target = e.target;
+    if (target === null) {
+      return;
+    }
+    const option = target.closest("sinch-radio-option");
+    if (option === null || option.hasAttribute("disabled")) {
       return;
     }
-    const value = getAttribute(target, "value");
+    const value = getAttribute(option, "value");
     this.dispatchEvent(
       new CustomEvent("-change", { detail: value })
     );

package/bundle.ts

@@ -1,5 +1,4 @@
 // Reminder: Keep this list updated as we add new components
-
 export * from './accordion-item/index.js'
 export * from './accordion/index.js'
 export * from './action-menu-option/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.1.4",
+  "version": "5.2.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.1.0"
+    "@nectary/assets": "3.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/radio/index.js

@@ -1,7 +1,6 @@
 import { getBooleanAttribute, updateAttribute, getAttribute, updateBooleanAttribute, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { getTargetByAttribute } from "../utils/event-target.js";
 import { setFormValue } from "../utils/form.js";
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:var(--sinch-comp-radio-direction,column);gap:var(--sinch-comp-radio-gap,8px);box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
@@ -85,6 +84,10 @@ class Radio extends NectaryElement {
     }
   }
   #onOptionKeyDown = (e) => {
+    const option = e.target?.closest("sinch-radio-option") ?? null;
+    if (option === null) {
+      return;
+    }
     switch (e.code) {
       case "ArrowUp":
       case "ArrowLeft": {
@@ -112,11 +115,15 @@ class Radio extends NectaryElement {
     this.#onValueChange(this.value);
   };
   #onOptionClick = (e) => {
-    const target = getTargetByAttribute(e, "value");
-    if (target === null || target.hasAttribute("disabled")) {
+    const target = e.target;
+    if (target === null) {
+      return;
+    }
+    const option = target.closest("sinch-radio-option");
+    if (option === null || option.hasAttribute("disabled")) {
       return;
     }
-    const value = getAttribute(target, "value");
+    const value = getAttribute(option, "value");
     this.dispatchEvent(
       new CustomEvent("-change", { detail: value })
     );

package/utils/global-components-manager.d.ts

@@ -58,6 +58,7 @@ declare abstract class GlobalElementsManager {
 	private createLoader;
 	private preloadBundle;
 	init(options?: GlobalManagerInitOptions): Promise<void>;
+	whenLoaded(): Promise<void>;
 	private getImportPathFromName;
 	preload(name: SinchElementName | SinchElementName[] | "all"): Promise<void>;
 }

package/utils/shared/global-elements-manager.d.ts

@@ -56,6 +56,7 @@ export declare abstract class GlobalElementsManager {
     private createLoader;
     private preloadBundle;
     init(options?: GlobalManagerInitOptions): Promise<void>;
+    whenLoaded(): Promise<void>;
     private getImportPathFromName;
     preload(name: SinchElementName | SinchElementName[] | 'all'): Promise<void>;
 }

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

@@ -109,31 +109,39 @@ class GlobalElementsManager {
     store.preload = options.preload ?? false;
     store.patchPerviousVersions = options.patchPerviousVersions ?? true;
     store.useFallbackExclusively = options.useFallbackExclusively ?? false;
-    if (store.preload) {
-      const version = options.targetlibVersion;
-      store.targetlibVersion = version ?? store.targetlibVersion;
-      const importPath = version != null ? `${this.config.cdnUrl}@${version}/es2022/bundle.mjs` : `${this.config.cdnUrl}/bundle`;
-      await this.preloadBundle(importPath, options.fallbackLoaderBundle, store.useFallbackExclusively);
-      return;
-    }
-    if (store.patchPerviousVersions) {
-      this.patchCustomElements();
-    }
-    this.config.baseElementNames.forEach((name) => {
-      const importPath = `${this.config.cdnUrl}/${this.getImportPathFromName(name)}`;
-      store.definitions.set(`sinch-${name}`, this.createLoader(importPath, name, options.fallbackLoader, store.useFallbackExclusively));
-    });
-    if (options.targetlibVersion != null) {
-      store.targetlibVersion = options.targetlibVersion;
-    } else {
-      const registry = await fetch(`${this.config.registryUrl}/latest`);
-      const registryData = await registry.json();
-      store.targetlibVersion = registryData.version;
+    try {
+      if (store.preload) {
+        const version = options.targetlibVersion;
+        store.targetlibVersion = version ?? store.targetlibVersion;
+        const importPath = version != null ? `${this.config.cdnUrl}@${version}/es2022/bundle.mjs` : `${this.config.cdnUrl}/bundle`;
+        await this.preloadBundle(importPath, options.fallbackLoaderBundle, store.useFallbackExclusively);
+      } else {
+        if (store.patchPerviousVersions) {
+          this.patchCustomElements();
+        }
+        this.config.baseElementNames.forEach((name) => {
+          const importPath = `${this.config.cdnUrl}/${this.getImportPathFromName(name)}`;
+          store.definitions.set(`sinch-${name}`, this.createLoader(importPath, name, options.fallbackLoader, store.useFallbackExclusively));
+        });
+        if (options.targetlibVersion != null) {
+          store.targetlibVersion = options.targetlibVersion;
+        } else {
+          const registry = await fetch(`${this.config.registryUrl}/latest`);
+          const registryData = await registry.json();
+          store.targetlibVersion = registryData.version;
+        }
+        this.config.baseElementNames.forEach((name) => {
+          const importPath = `${this.config.cdnUrl}@${store.targetlibVersion}/es2022/${this.getImportPathFromName(name)}.mjs`;
+          store.definitions.set(`sinch-${name}`, this.createLoader(importPath, name, options.fallbackLoader, store.useFallbackExclusively));
+        });
+      }
+    } finally {
+      store.loadPromise.resolve();
     }
-    this.config.baseElementNames.forEach((name) => {
-      const importPath = `${this.config.cdnUrl}@${store.targetlibVersion}/es2022/${this.getImportPathFromName(name)}.mjs`;
-      store.definitions.set(`sinch-${name}`, this.createLoader(importPath, name, options.fallbackLoader, store.useFallbackExclusively));
-    });
+  }
+  whenLoaded() {
+    const store = getStore(this.config.storeKey);
+    return store.loadPromise.promise;
   }
   getImportPathFromName(name) {
     for (const [key, value] of this.config.nameToPathMap ?? []) {

package/utils/shared/global-elements-store.d.ts

@@ -1,11 +1,15 @@
 import type { SinchElementName } from './nectary-element-base';
 interface GlobalStore {
+    definitions: Map<SinchElementName, () => Promise<any>>;
     hasInitialized: boolean;
     targetlibVersion: string;
     patchPerviousVersions: boolean;
     useFallbackExclusively: boolean;
     preload: boolean;
-    definitions: Map<SinchElementName, () => Promise<any>>;
+    loadPromise: {
+        promise: Promise<void>;
+        resolve: (value: void) => void;
+    };
 }
 export declare const getStore: (storeKey: symbol) => GlobalStore;
 export declare const getConstructor: (storeKey: symbol, name: SinchElementName) => Promise<CustomElementConstructor> | null;

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

@@ -1,14 +1,22 @@
+const createDeferredPromise = () => {
+  let resolve;
+  const promise = new Promise((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+};
 const getStore = (storeKey) => {
   if (window[storeKey] != null) {
     return window[storeKey];
   }
   const store = {
+    definitions: /* @__PURE__ */ new Map(),
     hasInitialized: false,
     targetlibVersion: "",
     patchPerviousVersions: false,
     useFallbackExclusively: false,
     preload: false,
-    definitions: /* @__PURE__ */ new Map()
+    loadPromise: createDeferredPromise()
   };
   Object.defineProperty(window, storeKey, {
     value: store,