@nectary/components 4.12.1 → 5.0.1

package/utils/dom.js

@@ -1,51 +1,50 @@
-export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
-  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
+const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? "true" : "false");
 };
-export const isAttrTrue = attrValue => {
-  return attrValue !== null && attrValue !== 'false';
+const isAttrTrue = (attrValue) => {
+  return attrValue !== null && attrValue !== "false";
 };
-export const getBooleanAttribute = ($element, attrName) => {
+const getBooleanAttribute = ($element, attrName) => {
   return isAttrTrue($element.getAttribute(attrName));
 };
-export const updateBooleanAttribute = ($element, attrName, attrValue) => {
+const updateBooleanAttribute = ($element, attrName, attrValue) => {
   const currentAttrValue = $element.getAttribute(attrName);
   if (attrValue === true) {
     if (!isAttrTrue(currentAttrValue)) {
-      $element.setAttribute(attrName, '');
+      $element.setAttribute(attrName, "");
     }
   } else if (currentAttrValue !== null) {
     $element.removeAttribute(attrName);
   }
 };
-export const updateAttribute = ($element, attrName, attrValue) => {
+const updateAttribute = ($element, attrName, attrValue) => {
   if (attrValue != null) {
     $element.setAttribute(attrName, String(attrValue));
   } else {
     $element.removeAttribute(attrName);
   }
 };
-export function getAttribute($element, attrName) {
-  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+function getAttribute($element, attrName, defaultValue = null) {
   return $element.getAttribute(attrName) ?? defaultValue;
 }
-export const isLiteralValue = (literals, value) => {
+const isLiteralValue = (literals, value) => {
   return value != null && literals.includes(value);
 };
-export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
   if (isLiteralValue(literals, attrValue)) {
     $element.setAttribute(attrName, attrValue);
   } else {
     $element.removeAttribute(attrName);
   }
 };
-export function getLiteralAttribute($element, literals, attrName, defaultValue) {
+function getLiteralAttribute($element, literals, attrName, defaultValue) {
   const attrValue = $element.getAttribute(attrName);
   if (isLiteralValue(literals, attrValue)) {
     return attrValue;
   }
   return defaultValue;
 }
-export const clampNumber = (value, min, max) => {
+const clampNumber = (value, min, max) => {
   return Math.min(max, Math.max(min, value));
 };
 const DEFAULT_INTEGER_OPTIONS = {
@@ -53,11 +52,7 @@ const DEFAULT_INTEGER_OPTIONS = {
   itemSpaceBetween: 0,
   defaultValue: null
 };
-const applyRange = (value, _ref) => {
-  let {
-    min,
-    max
-  } = _ref;
+const applyRange = (value, { min, max }) => {
   let result = value;
   if (min != null) {
     result = Math.max(min, result);
@@ -67,14 +62,8 @@ const applyRange = (value, _ref) => {
   }
   return result;
 };
-export const attrValueToInteger = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
-  const {
-    defaultValue = null,
-    itemSizeMultiplier = 1,
-    itemSpaceBetween = 0,
-    addExtraSpace = false
-  } = options;
+const attrValueToInteger = (value, options = DEFAULT_INTEGER_OPTIONS) => {
+  const { defaultValue = null, itemSizeMultiplier = 1, itemSpaceBetween = 0, addExtraSpace = false } = options;
   let intValue = defaultValue;
   if (value !== null) {
     const int = parseInt(value);
@@ -87,21 +76,16 @@ export const attrValueToInteger = function (value) {
   }
   return null;
 };
-export const attrValueToPixels = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+const attrValueToPixels = (value, options = DEFAULT_INTEGER_OPTIONS) => {
   const int = attrValueToInteger(value, options);
-  return int === null ? 'unset' : `${int}px`;
-};
-export const updateIntegerAttribute = function ($element, attrName, attrValue) {
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
-  const {
-    defaultValue = null,
-    itemSizeMultiplier: multiplier = 1
-  } = options;
+  return int === null ? "unset" : `${int}px`;
+};
+const updateIntegerAttribute = ($element, attrName, attrValue, options = DEFAULT_INTEGER_OPTIONS) => {
+  const { defaultValue = null, itemSizeMultiplier: multiplier = 1 } = options;
   let intValue = null;
-  if (typeof attrValue === 'string') {
+  if (typeof attrValue === "string") {
     intValue = attrValueToInteger(attrValue, options);
-  } else if (typeof attrValue === 'number') {
+  } else if (typeof attrValue === "number") {
     intValue = applyRange(attrValue, options) * multiplier;
   } else {
     intValue = defaultValue;
@@ -112,29 +96,29 @@ export const updateIntegerAttribute = function ($element, attrName, attrValue) {
     $element.setAttribute(attrName, intValue.toFixed(0));
   }
 };
-export function getIntegerAttribute($element, attrName, defaultValue) {
+function getIntegerAttribute($element, attrName, defaultValue) {
   return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
 }
-export const setClass = (elem, name, isSet) => {
+const setClass = (elem, name, isSet) => {
   isSet ? elem.classList.add(name) : elem.classList.remove(name);
 };
-export const hasClass = (elem, name) => {
+const hasClass = (elem, name) => {
   return elem.classList.contains(name);
 };
-export const getCssVar = (element, variableName) => {
+const getCssVar = (element, variableName) => {
   const result = getComputedStyle(element).getPropertyValue(variableName).trim();
-  return result === '' ? null : result;
+  return result === "" ? null : result;
 };
-export const getCssVars = (element, variableNames) => {
+const getCssVars = (element, variableNames) => {
   const style = getComputedStyle(element);
-  return variableNames.map(name => {
+  return variableNames.map((name) => {
     const result = style.getPropertyValue(name).trim();
-    return result === '' ? null : result;
+    return result === "" ? null : result;
   });
 };
-export const cloneNode = (el, deep) => {
+const cloneNode = (el, deep) => {
   const root = el.getRootNode();
-  if (root !== document && Reflect.has(root, 'createElement')) {
+  if (root !== document && Reflect.has(root, "createElement")) {
     const cloned = root.createElement(el.tagName.toLowerCase());
     for (const attr of el.getAttributeNames()) {
       cloned.setAttribute(attr, el.getAttribute(attr));
@@ -149,7 +133,30 @@ export const cloneNode = (el, deep) => {
   }
   return el.cloneNode(deep);
 };
-export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-export const isAttrEqual = (oldVal, newVal) => {
-  return oldVal === newVal || newVal === null && oldVal === 'false' || newVal === '' && oldVal === 'true';
-};
+const shouldReduceMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const isAttrEqual = (oldVal, newVal) => {
+  return oldVal === newVal || newVal === null && oldVal === "false" || newVal === "" && oldVal === "true";
+};
+export {
+  attrValueToInteger,
+  attrValueToPixels,
+  clampNumber,
+  cloneNode,
+  getAttribute,
+  getBooleanAttribute,
+  getCssVar,
+  getCssVars,
+  getIntegerAttribute,
+  getLiteralAttribute,
+  hasClass,
+  isAttrEqual,
+  isAttrTrue,
+  isLiteralValue,
+  setClass,
+  shouldReduceMotion,
+  updateAttribute,
+  updateBooleanAttribute,
+  updateExplicitBooleanAttribute,
+  updateIntegerAttribute,
+  updateLiteralAttribute
+};

package/utils/element.d.ts

@@ -1,17 +1,109 @@
-export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
-export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
-export declare const resetNectaryRegistry: () => void;
-declare global {
-    interface ShadowRootInit {
-        customElements?: CustomElementRegistry;
-    }
+// Generated by dts-bundle-generator v9.5.1
+
+export type SinchElementName = `sinch-${string}`;
+declare class NectaryElementBase extends HTMLElement {
+	private static _isGlobal;
+	static get elementName(): SinchElementName;
+	static get isGlobal(): boolean;
+	static set isGlobal(value: boolean);
+}
+declare const BASE_COMPONENT_NAMES_LIST: readonly [
+	"accordion-item",
+	"accordion",
+	"action-menu-option",
+	"action-menu",
+	"alert",
+	"avatar",
+	"badge",
+	"button-group-item",
+	"button-group",
+	"button",
+	"card-container",
+	"card-v2-title",
+	"card-v2",
+	"checkbox",
+	"chip",
+	"code-tag",
+	"color-menu-option",
+	"color-menu",
+	"color-swatch",
+	"date-picker",
+	"dialog",
+	"emoji-picker",
+	"emoji",
+	"field",
+	"file-drop",
+	"file-picker",
+	"file-status",
+	"flag",
+	"grid-item",
+	"grid",
+	"help-tooltip",
+	"icon",
+	"inline-alert",
+	"input",
+	"link",
+	"list-item",
+	"list",
+	"pagination",
+	"persistent-overlay",
+	"pop",
+	"popover",
+	"progress-stepper-item",
+	"progress-stepper",
+	"progress",
+	"radio-option",
+	"radio",
+	"rich-text",
+	"rich-textarea",
+	"segment-collapse",
+	"segmented-control-option",
+	"segmented-control",
+	"segmented-icon-control-option",
+	"segmented-icon-control",
+	"select-button",
+	"select-menu-option",
+	"select-menu",
+	"skeleton-item",
+	"skeleton",
+	"spinner",
+	"stop-events",
+	"table-body",
+	"table-cell",
+	"table-head-cell",
+	"table-head",
+	"table-row",
+	"table",
+	"tabs-icon-option",
+	"tabs-option",
+	"tabs",
+	"tag",
+	"text",
+	"textarea",
+	"time-picker",
+	"title",
+	"toast-manager",
+	"toast",
+	"toggle",
+	"tooltip"
+];
+export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;
+export declare const pascalToKebabCase: (str: string) => string;
+export declare const registerComponent: (name: ComponentName, constructor: CustomElementConstructor) => void;
+export declare const defineCustomElement: (name: ComponentName, constructor?: CustomElementConstructor) => Promise<void>;
+export interface SetNectaryRegistryOptions {
+	manualRegistration?: boolean;
 }
-export declare class NectaryElement extends HTMLElement {
-    #private;
-    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
-    version: string;
-    get focusable(): boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get isDomConnected(): boolean;
+export declare const setNectaryRegistry: (registry?: CustomElementRegistry, options?: SetNectaryRegistryOptions) => void;
+export declare const resetNectaryRegistry: () => void;
+export declare class NectaryElement extends NectaryElementBase {
+	#private;
+	attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+	version: string;
+	get focusable(): boolean;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	get isDomConnected(): boolean;
 }
+
+export {};

package/utils/element.js

@@ -1,40 +1,113 @@
-import pkg from '../package.json';
-const nectaryDefinitions = new Map();
+import { NectaryElementBase, sinchElementNameToBase } from "./shared/nectary-element-base.js";
+import { getConstructor } from "./shared/global-elements-store.js";
+import { COMPONENTS_STORE_KEY } from "./global-components-constants.js";
+const version = "5.0.1";
+const pkg = {
+  version
+};
+const nectaryDefinitions = /* @__PURE__ */ new Map();
 let nectaryRegistry = null;
-export const defineCustomElement = (name, constructor) => {
-  if (nectaryRegistry !== null) {
-    if (nectaryRegistry.get(name) == null) {
-      nectaryRegistry.define(name, constructor);
-    }
+let manualRegistration = false;
+const getGlobalConstructor = (name) => {
+  return getConstructor(COMPONENTS_STORE_KEY, name);
+};
+const pascalToKebabCase = (str) => {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+};
+const safeDefine = (registry, name, constructor) => {
+  if (registry.get(name) != null) {
     return;
   }
-  nectaryDefinitions.set(name, constructor);
+  registry.define(name, constructor);
 };
-export const setNectaryRegistry = registry => {
-  if (nectaryRegistry !== null) {
-    throw new Error('Nectary registry already set');
+const registerComponent = (name, constructor) => {
+  if (nectaryRegistry === window.customElements) {
+    throw new Error("Registering components on the global registry is not allowed. Please set a scoped registry with setNectaryRegistry() first.");
   }
-  nectaryRegistry = registry;
+  if (nectaryRegistry == null) {
+    throw new Error("Nectary registry is not set. Please set a scoped registry with setNectaryRegistry() first.");
+  }
+  safeDefine(nectaryRegistry, name, constructor);
+};
+const defineCustomElement = async (name, constructor) => {
+  if (manualRegistration) {
+    return;
+  }
+  nectaryDefinitions.set(name, constructor);
+  if (nectaryRegistry == null) {
+    return;
+  }
+  if (nectaryRegistry === window.customElements) {
+    const globalConstructor = await getGlobalConstructor(name);
+    if (globalConstructor !== null) {
+      safeDefine(nectaryRegistry, name, globalConstructor);
+      return;
+    }
+  }
+  if (constructor != null) {
+    safeDefine(nectaryRegistry, name, constructor);
+  }
+};
+const processDefinitionsForRegistry = (registry) => {
+  const globalConstructorPromises = [];
   for (const [name, ctor] of nectaryDefinitions.entries()) {
-    if (nectaryRegistry.get(name) == null) {
-      nectaryRegistry.define(name, ctor);
+    if (registry === window.customElements) {
+      const globalConstructorPromise = getGlobalConstructor(name);
+      if (globalConstructorPromise !== null) {
+        const resolvePromise = globalConstructorPromise.then((globalCtor) => {
+          safeDefine(registry, name, globalCtor);
+        });
+        globalConstructorPromises.push(resolvePromise);
+        continue;
+      }
+    }
+    if (ctor == null) {
+      throw new Error(
+        `Could not find constructor for ${name}.
+
+        Please make sure to omit '/global' when importing your component: import '@nectary/components/${sinchElementNameToBase(name)}'
+
+        If you intend to use global components, make sure to set the registry with the global registry: setNectaryRegistry(window.customElements).`
+      );
     }
+    safeDefine(registry, name, ctor);
   }
   nectaryDefinitions.clear();
+  return globalConstructorPromises;
 };
-export const resetNectaryRegistry = () => {
+const setNectaryRegistry = (registry = window.customElements, options = {}) => {
+  manualRegistration = options.manualRegistration ?? false;
+  if (nectaryRegistry != null) {
+    if (nectaryRegistry === window.customElements) {
+      return;
+    }
+    throw new Error("Nectary registry already set");
+  }
+  nectaryRegistry = registry;
+  if (manualRegistration) {
+    nectaryDefinitions.clear();
+    return;
+  }
+  const globalConstructorPromises = processDefinitionsForRegistry(registry);
+  if (globalConstructorPromises.length > 0) {
+    Promise.all(globalConstructorPromises).catch((error) => {
+      console.error("Error while registering global components", error);
+    });
+  }
+};
+const resetNectaryRegistry = () => {
   nectaryRegistry = null;
 };
-export class NectaryElement extends HTMLElement {
+class NectaryElement extends NectaryElementBase {
   attachShadow(options) {
     return super.attachShadow({
-      mode: 'open',
+      mode: "open",
       delegatesFocus: false,
       customElements: nectaryRegistry,
       ...options
     });
   }
-  version = (() => pkg.version)();
+  version = pkg.version;
   get focusable() {
     return false;
   }
@@ -48,4 +121,12 @@ export class NectaryElement extends HTMLElement {
   get isDomConnected() {
     return this.#isDomConnected;
   }
-}
+}
+export {
+  NectaryElement,
+  defineCustomElement,
+  pascalToKebabCase,
+  registerComponent,
+  resetNectaryRegistry,
+  setNectaryRegistry
+};

package/utils/event-target.js

@@ -1,7 +1,7 @@
-export const isTargetEqual = (e, $elem) => {
+const isTargetEqual = (e, $elem) => {
   return e.target === $elem || e.originalTarget === $elem;
 };
-export const getTargetByAttribute = (e, attr) => {
+const getTargetByAttribute = (e, attr) => {
   if (e.target.hasAttribute(attr)) {
     return e.target;
   }
@@ -10,10 +10,10 @@ export const getTargetByAttribute = (e, attr) => {
   }
   return null;
 };
-export const getTargetAttribute = (e, attr) => {
+const getTargetAttribute = (e, attr) => {
   return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
 };
-export const getTargetIndexInParent = (e, parent) => {
+const getTargetIndexInParent = (e, parent) => {
   const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
   if (indexOf >= 0) {
     return indexOf;
@@ -23,4 +23,10 @@ export const getTargetIndexInParent = (e, parent) => {
     return Array.prototype.indexOf.call(parent.children, origTgt);
   }
   return -1;
-};
+};
+export {
+  getTargetAttribute,
+  getTargetByAttribute,
+  getTargetIndexInParent,
+  isTargetEqual
+};

package/utils/form.js

@@ -1,20 +1,20 @@
-export const setFormValue = (internals, value) => {
-  let formValue = value ?? '';
+const setFormValue = (internals, value) => {
+  let formValue = value ?? "";
   if (formValue instanceof FormData && [...formValue.keys()].length === 0) {
-    formValue = '';
+    formValue = "";
   }
   if (formValue instanceof File && formValue.size === 0) {
-    formValue = '';
+    formValue = "";
   }
   if (internals.form !== null) {
     internals.setFormValue(formValue);
   }
 };
-export const requestSubmitForm = (form, submitter) => {
-  const submitterProxy = document.createElement('button');
-  submitterProxy.style.display = 'none';
+const requestSubmitForm = (form, submitter) => {
+  const submitterProxy = document.createElement("button");
+  submitterProxy.style.display = "none";
   submitterProxy.type = submitter.formType;
-  Array.from(submitter.attributes).filter(attr => attr.name.startsWith('aria-')).forEach(attr => {
+  Array.from(submitter.attributes).filter((attr) => attr.name.startsWith("aria-")).forEach((attr) => {
     submitterProxy.setAttribute(attr.name, attr.value);
   });
   form.appendChild(submitterProxy);
@@ -24,13 +24,18 @@ export const requestSubmitForm = (form, submitter) => {
     form.removeChild(submitterProxy);
   }
 };
-export const CSVToFormData = (name, csv) => {
+const CSVToFormData = (name, csv) => {
   if (csv.length === 0) {
-    return '';
+    return "";
   }
   const formData = new FormData();
-  csv.split(',').forEach(value => {
+  csv.split(",").forEach((value) => {
     formData.append(name, value);
   });
   return formData;
-};
+};
+export {
+  CSVToFormData,
+  requestSubmitForm,
+  setFormValue
+};

package/utils/get-react-event-handler.js

@@ -1,8 +1,11 @@
-export const getReactEventHandler = ($element, handlerName) => {
+const getReactEventHandler = ($element, handlerName) => {
   for (const key in $element) {
-    if (Object.hasOwn($element, key) && key.startsWith('__reactProps$')) {
+    if (Object.hasOwn($element, key) && key.startsWith("__reactProps$")) {
       return $element[key][handlerName];
     }
   }
   return null;
-};
+};
+export {
+  getReactEventHandler
+};

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

@@ -0,0 +1,3 @@
+export declare const COMPONENTS_STORE_KEY: unique symbol;
+export declare const COMPONENTS_REGISTRY_URL = "https://registry.npmjs.org/@nectary/components";
+export declare const COMPONENTS_CDN_URL = "https://esm.sh/@nectary/components";

package/utils/global-components-constants.js

@@ -0,0 +1,8 @@
+const COMPONENTS_STORE_KEY = Symbol.for("NectaryComponentsStore");
+const COMPONENTS_REGISTRY_URL = "https://registry.npmjs.org/@nectary/components";
+const COMPONENTS_CDN_URL = "https://esm.sh/@nectary/components";
+export {
+  COMPONENTS_CDN_URL,
+  COMPONENTS_REGISTRY_URL,
+  COMPONENTS_STORE_KEY
+};

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

@@ -0,0 +1,71 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export type SinchElementName = `sinch-${string}`;
+export interface GlobalManagerConfig {
+	storeKey: symbol;
+	registryUrl: string;
+	cdnUrl: string;
+	baseElementNames: Set<string>;
+	nameToPathMap?: Map<string, string>;
+}
+export interface GlobalManagerInitOptions {
+	/**
+	 * If components should be preloaded from the bundle module (nectary/components/bundle) (Not supported for nectary/assets).
+	 *
+	 * When preload is true:
+	 *
+	 * targetlibVersion will only work since v5 of nectary/components and v3 of nectary/assets.
+	 *
+	 * parchPreviousVersions will have no effect since its not needed.
+	 *
+	 * fallbackLoaderBundle will be used instead of fallbackLoader
+	 */
+	preload?: boolean;
+	/**
+	 * Target version of the library to resolve the constructor from the CDN.
+	 *
+	 * If left unspecified, it will resolve to the latest version.
+	 */
+	targetlibVersion?: string;
+	/**
+	 * If previous versions of Nectary should opt in to using Global Components.
+	 *
+	 * @default true
+	 */
+	patchPerviousVersions?: boolean;
+	/**
+	 * Fallback loader if the CDN fails.
+	 */
+	fallbackLoader?: (name: string) => Promise<any>;
+	/**
+	 * Should be used like this:
+	 *
+	 * fallbackLoaderBundle: () => import("@nectary/components/bundle")
+	 */
+	fallbackLoaderBundle?: () => Promise<any>;
+	/**
+	 * Constructors will be resolved from fallback directly and CDN will not be used.
+	 */
+	useFallbackExclusively?: boolean;
+}
+declare abstract class GlobalElementsManager {
+	private config;
+	constructor(config: GlobalManagerConfig);
+	getConstructor(name: SinchElementName): Promise<CustomElementConstructor> | null;
+	private patchCustomElements;
+	private toClassName;
+	private loadModuleWithFallback;
+	private createLoader;
+	private preloadBundle;
+	init(options?: GlobalManagerInitOptions): Promise<void>;
+	private getImportPathFromName;
+	preload(name: SinchElementName | SinchElementName[] | "all"): Promise<void>;
+}
+declare class GlobalComponentsManagerImpl extends GlobalElementsManager {
+	private static instance;
+	constructor();
+	static getInstance(): GlobalComponentsManagerImpl;
+}
+export declare const GlobalComponentsManager: GlobalComponentsManagerImpl;
+
+export {};