@nectary/components 4.11.1 → 4.12.0

package/utils/global-components-manager.js

@@ -0,0 +1,24 @@
+import { GlobalElementsManager } from "./shared/global-elements-manager.js";
+import { BASE_COMPONENT_NAMES } from "./component-names.js";
+import { COMPONENTS_CDN_URL, COMPONENTS_REGISTRY_URL, COMPONENTS_STORE_KEY } from "./global-components-constants.js";
+class GlobalComponentsManagerImpl extends GlobalElementsManager {
+  static instance = null;
+  constructor() {
+    super({
+      storeKey: COMPONENTS_STORE_KEY,
+      registryUrl: COMPONENTS_REGISTRY_URL,
+      cdnUrl: COMPONENTS_CDN_URL,
+      baseElementNames: BASE_COMPONENT_NAMES
+    });
+  }
+  static getInstance() {
+    if (GlobalComponentsManagerImpl.instance == null) {
+      GlobalComponentsManagerImpl.instance = new GlobalComponentsManagerImpl();
+    }
+    return GlobalComponentsManagerImpl.instance;
+  }
+}
+const GlobalComponentsManager = new GlobalComponentsManagerImpl();
+export {
+  GlobalComponentsManager
+};

package/utils/index.js

@@ -1,12 +1,65 @@
-export * from './context';
-export * from './csv';
-export * from './dom';
-export * from './element';
-export * from './rect';
-export * from './slot';
-export * from './throttle';
-export * from './debounce';
-export * from './get-react-event-handler';
-export * from './markdown';
-export * from './event-target';
-export * from './uid';
+import { Context, subscribeContext } from "./context.js";
+import { CSV_DELIMITER, getFirstCsvValue, packCsv, unpackCsv, updateCsv } from "./csv.js";
+import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getIntegerAttribute, getLiteralAttribute, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
+import { NectaryElement, defineCustomElement, pascalToKebabCase, registerComponent, resetNectaryRegistry, setNectaryRegistry } from "./element.js";
+import { getRect, getTargetRect, rectOverlap } from "./rect.js";
+import { getFirstFocusableElement, getFirstSlotElement, isElementFocused } from "./slot.js";
+import { throttleAnimationFrame } from "./throttle.js";
+import { debounceAnimationFrame, debounceTimeout } from "./debounce.js";
+import { getReactEventHandler } from "./get-react-event-handler.js";
+import { isEmojiString, parseMarkdown } from "./markdown.js";
+import { getTargetAttribute, getTargetByAttribute, getTargetIndexInParent, isTargetEqual } from "./event-target.js";
+import { getUid } from "./uid.js";
+export {
+  CSV_DELIMITER,
+  Context,
+  NectaryElement,
+  attrValueToInteger,
+  attrValueToPixels,
+  clampNumber,
+  cloneNode,
+  debounceAnimationFrame,
+  debounceTimeout,
+  defineCustomElement,
+  getAttribute,
+  getBooleanAttribute,
+  getCssVar,
+  getCssVars,
+  getFirstCsvValue,
+  getFirstFocusableElement,
+  getFirstSlotElement,
+  getIntegerAttribute,
+  getLiteralAttribute,
+  getReactEventHandler,
+  getRect,
+  getTargetAttribute,
+  getTargetByAttribute,
+  getTargetIndexInParent,
+  getTargetRect,
+  getUid,
+  hasClass,
+  isAttrEqual,
+  isAttrTrue,
+  isElementFocused,
+  isEmojiString,
+  isLiteralValue,
+  isTargetEqual,
+  packCsv,
+  parseMarkdown,
+  pascalToKebabCase,
+  rectOverlap,
+  registerComponent,
+  resetNectaryRegistry,
+  setClass,
+  setNectaryRegistry,
+  shouldReduceMotion,
+  subscribeContext,
+  throttleAnimationFrame,
+  unpackCsv,
+  updateAttribute,
+  updateBooleanAttribute,
+  updateCsv,
+  updateExplicitBooleanAttribute,
+  updateIntegerAttribute,
+  updateLiteralAttribute
+};

package/utils/markdown.js

@@ -1,28 +1,35 @@
 const regLinebreak = /(?:<br>\n|<br>|\n)/;
 const regParagraph = /\n{2,}/;
-const regEm3Star = /(?<!\\)\*\*\*(?<em3>.+?)(?<!\\)\*\*\*/;
-const regEm2Star = /(?<!\\)\*\*(?<em2>.+?)(?<!\\)\*\*/;
-const regEm1Star = /(?<!\\)\*(?<em1>.+?)(?<!\\)\*/;
-const regEm3Underscore = /(?<!\\)___(?<em3>.+?)(?<!\\)___/;
-const regEm2Underscore = /(?<!\\)__(?<em2>.+?)(?<!\\)__/;
-const regEm1Underscore = /(?<!\\)_(?<em1>.+?)(?<!\\)_/;
-const regCodeTag = /(?<!\\)`(?<code>.+?)(?<!\\)`/;
-const regStrikethrough = /(?<!\\)~~(?<strike>.+?)(?<!\\)~~/;
-const regLink = /(?<!\\)!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)(\{(?<linkattrs>[^)]+?)\})?/;
-const regEmoji = /(?<emoji>(?![0-9*#])\p{Emoji})/u;
+const regEm3Star = new RegExp("(?<!\\\\)\\*\\*\\*(?<em3>.+?)(?<!\\\\)\\*\\*\\*");
+const regEm2Star = new RegExp("(?<!\\\\)\\*\\*(?<em2>.+?)(?<!\\\\)\\*\\*");
+const regEm1Star = new RegExp("(?<!\\\\)\\*(?<em1>.+?)(?<!\\\\)\\*");
+const regEm3Underscore = new RegExp("(?<!\\\\)___(?<em3>.+?)(?<!\\\\)___");
+const regEm2Underscore = new RegExp("(?<!\\\\)__(?<em2>.+?)(?<!\\\\)__");
+const regEm1Underscore = new RegExp("(?<!\\\\)_(?<em1>.+?)(?<!\\\\)_");
+const regCodeTag = new RegExp("(?<!\\\\)`(?<code>.+?)(?<!\\\\)`");
+const regStrikethrough = new RegExp("(?<!\\\\)~~(?<strike>.+?)(?<!\\\\)~~");
+const regLink = new RegExp("(?<!\\\\)!?\\[(?<linktext>[^\\]]*?)\\]\\((?<linkhref>[^)]+?)\\)(\\{(?<linkattrs>[^)]+?)\\})?");
+const regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
 const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~])/;
-const allRegs = [regEscapedChars, regCodeTag, regLink, regEm3Star, regEm2Star, regEm1Star, regEm3Underscore, regEm2Underscore, regEm1Underscore, regStrikethrough, regEmoji];
-export const isEmojiString = data => regEmoji.test(data);
-const excludeRegs = function (regs) {
-  for (var _len = arguments.length, excluding = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    excluding[_key - 1] = arguments[_key];
-  }
-  return regs.filter(r => !excluding.includes(r));
-};
+const allRegs = [
+  regEscapedChars,
+  regCodeTag,
+  regLink,
+  regEm3Star,
+  regEm2Star,
+  regEm1Star,
+  regEm3Underscore,
+  regEm2Underscore,
+  regEm1Underscore,
+  regStrikethrough,
+  regEmoji
+];
+const isEmojiString = (data) => regEmoji.test(data);
+const excludeRegs = (regs, ...excluding) => regs.filter((r) => !excluding.includes(r));
 const matchClosest = (regs, line) => {
-  return regs.map(reg => reg.exec(line)).reduce((res, match) => {
+  return regs.map((reg) => reg.exec(line)).reduce((res, match) => {
     if (match === null) {
       return res;
     }
@@ -37,8 +44,7 @@ const INITIAL_CONTEXT = {
   isItalic: false,
   isStrikethrough: false
 };
-const createLineParser = visitor => function parseLine(regs, md) {
-  let context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INITIAL_CONTEXT;
+const createLineParser = (visitor) => function parseLine(regs, md, context = INITIAL_CONTEXT) {
   let line = md;
   let match = null;
   while ((match = matchClosest(regs, line)) !== null) {
@@ -53,7 +59,7 @@ const createLineParser = visitor => function parseLine(regs, md) {
       continue;
     }
     if (groups?.linkhref != null) {
-      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(' '));
+      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(" "));
     }
     if (groups?.code != null) {
       visitor.codetag(groups.code);
@@ -62,39 +68,42 @@ const createLineParser = visitor => function parseLine(regs, md) {
       visitor.emoji(groups.emoji);
     }
     if (groups?.em1 != null) {
-      parseLine(excludeRegs(regs, regEm1Star, regEm1Underscore), groups.em1, {
-        ...context,
-        isItalic: true
-      });
+      parseLine(
+        excludeRegs(regs, regEm1Star, regEm1Underscore),
+        groups.em1,
+        { ...context, isItalic: true }
+      );
     }
     if (groups?.em2 != null) {
-      parseLine(excludeRegs(regs, regEm2Star, regEm2Underscore), groups.em2, {
-        ...context,
-        isBold: true
-      });
+      parseLine(
+        excludeRegs(regs, regEm2Star, regEm2Underscore),
+        groups.em2,
+        { ...context, isBold: true }
+      );
     }
     if (groups?.em3 != null) {
-      parseLine(excludeRegs(regs, regEm3Star, regEm3Underscore, regEm2Star, regEm2Underscore, regEm1Star, regEm1Underscore), groups.em3, {
-        ...context,
-        isBold: true,
-        isItalic: true
-      });
+      parseLine(
+        excludeRegs(regs, regEm3Star, regEm3Underscore, regEm2Star, regEm2Underscore, regEm1Star, regEm1Underscore),
+        groups.em3,
+        { ...context, isBold: true, isItalic: true }
+      );
     }
     if (groups?.strike != null) {
-      parseLine(excludeRegs(regs, regStrikethrough), groups.strike, {
-        ...context,
-        isStrikethrough: true
-      });
+      parseLine(
+        excludeRegs(regs, regStrikethrough),
+        groups.strike,
+        { ...context, isStrikethrough: true }
+      );
     }
   }
   if (line.length > 0) {
     visitor.inline(line, context);
   }
 };
-const createBlockParser = visitor => {
+const createBlockParser = (visitor) => {
   const parseLine = createLineParser(visitor);
   const listRegs = [regUList, regOList];
-  const getListItemText = match => {
+  const getListItemText = (match) => {
     return match.groups.ultext ?? match.groups.oltext;
   };
   const BLOCK_MODE_PARAGRAPH = 1;
@@ -139,10 +148,14 @@ const createBlockParser = visitor => {
     }
   };
 };
-export const parseMarkdown = (md, visitor) => {
+const parseMarkdown = (md, visitor) => {
   const parseBlock = createBlockParser(visitor);
   for (const block of md.trim().split(regParagraph)) {
     parseBlock(block.trim().split(regLinebreak));
   }
   return visitor.end();
-};
+};
+export {
+  isEmojiString,
+  parseMarkdown
+};

package/utils/rect.js

@@ -1,28 +1,23 @@
-import { getFirstSlotElement } from './slot';
-export const getRect = el => {
-  const {
-    x,
-    y,
-    width,
-    height
-  } = el.getBoundingClientRect();
-  return {
-    x,
-    y,
-    width,
-    height
-  };
+import { getFirstSlotElement } from "./slot.js";
+const getRect = (el) => {
+  const { x, y, width, height } = el.getBoundingClientRect();
+  return { x, y, width, height };
 };
-export const rectOverlap = (targetRect, contentRect) => {
+const rectOverlap = (targetRect, contentRect) => {
   return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
 };
-export const getTargetRect = slot => {
+const getTargetRect = (slot) => {
   const item = getFirstSlotElement(slot, true);
   if (item === null) {
     return null;
   }
-  if (Reflect.has(item, 'footprintRect')) {
+  if (Reflect.has(item, "footprintRect")) {
     return item.footprintRect;
   }
   return getRect(item);
-};
+};
+export {
+  getRect,
+  getTargetRect,
+  rectOverlap
+};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,62 @@
+import type { SinchElementName } from './nectary-element-base';
+interface GlobalManagerConfig {
+    storeKey: symbol;
+    registryUrl: string;
+    cdnUrl: string;
+    baseElementNames: Set<string>;
+    nameToPathMap?: Map<string, string>;
+}
+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;
+}
+export 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>;
+}
+export {};

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

@@ -0,0 +1,163 @@
+import { isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.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("");
+  }
+  async loadModuleWithFallback(importPath, fallbackThunk, useFallbackExclusively = false) {
+    if (useFallbackExclusively && fallbackThunk != null) {
+      return fallbackThunk();
+    }
+    try {
+      const module = await import(
+        /* webpackIgnore: true */
+        importPath
+      );
+      return module;
+    } catch (error) {
+      if (fallbackThunk != null) {
+        try {
+          return fallbackThunk();
+        } catch (fallbackError) {
+          console.error(`Nectary Primary load failed: ${importPath}`, error);
+          console.error(`Nectary fallback load failed:`, fallbackError);
+          throw fallbackError;
+        }
+      }
+      console.error(`Nectary failed to load module: ${importPath}`, error);
+      throw error;
+    }
+  }
+  createLoader(importPath, itemName, fallbackLoader, useFallbackExclusively = false) {
+    return async () => {
+      const module = await this.loadModuleWithFallback(
+        importPath,
+        fallbackLoader != null ? () => fallbackLoader(itemName) : null,
+        useFallbackExclusively
+      );
+      const className = this.toClassName(itemName);
+      const globalConstructor = module[className];
+      if (globalConstructor == null) {
+        throw new Error(`Nectary element ${className} not found in module: ${importPath}`);
+      }
+      globalConstructor.isGlobal = true;
+      return globalConstructor;
+    };
+  }
+  async preloadBundle(importPath, fallbackLoaderBundle, useFallbackExclusively = false) {
+    const store = getStore(this.config.storeKey);
+    const module = await this.loadModuleWithFallback(
+      importPath,
+      fallbackLoaderBundle,
+      useFallbackExclusively
+    );
+    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: ${importPath}`);
+        continue;
+      }
+      globalConstructor.isGlobal = true;
+      const sinchName = `sinch-${itemName}`;
+      store.definitions.set(sinchName, () => Promise.resolve(globalConstructor));
+      window.customElements.define(sinchName, globalConstructor);
+    }
+  }
+  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.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;
+    }
+    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));
+    });
+  }
+  getImportPathFromName(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.d.js

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,31 @@
+const getStore = (storeKey) => {
+  if (window[storeKey] != null) {
+    return window[storeKey];
+  }
+  const store = {
+    hasInitialized: false,
+    targetlibVersion: "",
+    patchPerviousVersions: false,
+    useFallbackExclusively: false,
+    preload: false,
+    definitions: /* @__PURE__ */ new Map()
+  };
+  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,11 @@
+import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
+import { getConstructor, getStore } from "./global-elements-store.js";
+import { GlobalElementsManager } from "./global-elements-manager.js";
+export {
+  GlobalElementsManager,
+  NectaryElementBase,
+  getConstructor,
+  getStore,
+  isSinchElementName,
+  sinchElementNameToBase
+};

package/utils/shared/index.d.ts

@@ -0,0 +1,3 @@
+export * from './nectary-element-base';
+export * from './global-elements-store';
+export * from './global-elements-manager';

package/utils/shared/index.js

@@ -0,0 +1,11 @@
+import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
+import { getConstructor, getStore } from "./global-elements-store.js";
+import { GlobalElementsManager } from "./global-elements-manager.js";
+export {
+  GlobalElementsManager,
+  NectaryElementBase,
+  getConstructor,
+  getStore,
+  isSinchElementName,
+  sinchElementNameToBase
+};

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

@@ -0,0 +1 @@
+

package/utils/shared/nectary-element-base.d.ts

@@ -0,0 +1,9 @@
+export type SinchElementName = `sinch-${string}`;
+export declare const isSinchElementName: (value: string) => value is SinchElementName;
+export declare const sinchElementNameToBase: (value: SinchElementName) => string;
+export declare class NectaryElementBase extends HTMLElement {
+    private static _isGlobal;
+    static get elementName(): SinchElementName;
+    static get isGlobal(): boolean;
+    static set isGlobal(value: boolean);
+}

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/utils/shared/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@nectary/shared",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts",
+  "scripts": {
+    "build": "npx tsc --declaration --emitDeclarationOnly"
+  }
+}