@mcp-b/web-components 0.2.0

package/dist/cdn/loader.js

@@ -0,0 +1,530 @@
+
+let observer;
+let components = {
+  "sigvelo-icon": {
+    "importPath": "../components/icon/icon.js",
+    "dependencies": []
+  },
+  "sigvelo-accordion-item": {
+    "importPath": "../components/accordion-item/accordion-item.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-accordion": {
+    "importPath": "../components/accordion/accordion.js",
+    "dependencies": [
+      "sigvelo-accordion-item"
+    ]
+  },
+  "sigvelo-action-bar": {
+    "importPath": "../components/action-bar/action-bar.js",
+    "dependencies": []
+  },
+  "sigvelo-dialog": {
+    "importPath": "../components/dialog/dialog.js",
+    "dependencies": []
+  },
+  "sigvelo-alert-dialog": {
+    "importPath": "../components/alert-dialog/alert-dialog.js",
+    "dependencies": [
+      "sigvelo-dialog"
+    ]
+  },
+  "sigvelo-avatar": {
+    "importPath": "../components/avatar/avatar.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-badge": {
+    "importPath": "../components/badge/badge.js",
+    "dependencies": []
+  },
+  "sigvelo-breadcrumb": {
+    "importPath": "../components/breadcrumb/breadcrumb.js",
+    "dependencies": []
+  },
+  "sigvelo-breadcrumb-item": {
+    "importPath": "../components/breadcrumb-item/breadcrumb-item.js",
+    "dependencies": []
+  },
+  "sigvelo-spinner": {
+    "importPath": "../components/spinner/spinner.js",
+    "dependencies": []
+  },
+  "sigvelo-button": {
+    "importPath": "../components/button/button.js",
+    "dependencies": [
+      "sigvelo-icon",
+      "sigvelo-spinner"
+    ]
+  },
+  "sigvelo-button-group": {
+    "importPath": "../components/button-group/button-group.js",
+    "dependencies": []
+  },
+  "sigvelo-callout": {
+    "importPath": "../components/callout/callout.js",
+    "dependencies": []
+  },
+  "sigvelo-card": {
+    "importPath": "../components/card/card.js",
+    "dependencies": []
+  },
+  "sigvelo-carousel-item": {
+    "importPath": "../components/carousel-item/carousel-item.js",
+    "dependencies": []
+  },
+  "sigvelo-carousel": {
+    "importPath": "../components/carousel/carousel.js",
+    "dependencies": [
+      "sigvelo-carousel-item",
+      "sigvelo-sigvelo-icon"
+    ]
+  },
+  "sigvelo-checkbox": {
+    "importPath": "../components/checkbox/checkbox.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-checkbox-group": {
+    "importPath": "../components/checkbox-group/checkbox-group.js",
+    "dependencies": []
+  },
+  "sigvelo-copy": {
+    "importPath": "../components/copy/copy.js",
+    "dependencies": [
+      "sigvelo-button",
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-tooltip": {
+    "importPath": "../components/tooltip/tooltip.js",
+    "dependencies": []
+  },
+  "sigvelo-slider": {
+    "importPath": "../components/slider/slider.js",
+    "dependencies": [
+      "sigvelo-tooltip"
+    ]
+  },
+  "sigvelo-text-field": {
+    "importPath": "../components/text-field/text-field.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-color-picker": {
+    "importPath": "../components/color-picker/color-picker.js",
+    "dependencies": [
+      "sigvelo-button",
+      "sigvelo-copy",
+      "sigvelo-slider",
+      "sigvelo-text-field"
+    ]
+  },
+  "sigvelo-color-input": {
+    "importPath": "../components/color-input/color-input.js",
+    "dependencies": [
+      ""
+    ]
+  },
+  "sigvelo-combobox-item": {
+    "importPath": "../components/combobox-item/combobox-item.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-combobox": {
+    "importPath": "../components/combobox/combobox.js",
+    "dependencies": [
+      "sigvelo-icon",
+      "sigvelo-combobox-item"
+    ]
+  },
+  "sigvelo-comparison": {
+    "importPath": "../components/comparison/comparison.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-date": {
+    "importPath": "../components/date/date.js",
+    "dependencies": []
+  },
+  "sigvelo-data-table": {
+    "importPath": "../components/data-table/data-table.js",
+    "dependencies": []
+  },
+  "sigvelo-divider": {
+    "importPath": "../components/divider/divider.js",
+    "dependencies": []
+  },
+  "sigvelo-dropdown-item": {
+    "importPath": "../components/dropdown-item/dropdown-item.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-dropdown": {
+    "importPath": "../components/dropdown/dropdown.js",
+    "dependencies": [
+      "sigvelo-dropdown-item"
+    ]
+  },
+  "sigvelo-empty-state": {
+    "importPath": "../components/empty-state/empty-state.js",
+    "dependencies": []
+  },
+  "sigvelo-empty-result": {
+    "importPath": "../components/empty-result/empty-result.js",
+    "dependencies": []
+  },
+  "sigvelo-expander": {
+    "importPath": "../components/expander/expander.js",
+    "dependencies": []
+  },
+  "sigvelo-field": {
+    "importPath": "../components/field/field.js",
+    "dependencies": []
+  },
+  "sigvelo-file-input": {
+    "importPath": "../components/file-input/file-input.js",
+    "dependencies": [
+      "sigvelo-button",
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-filter-bar": {
+    "importPath": "../components/filter-bar/filter-bar.js",
+    "dependencies": []
+  },
+  "sigvelo-form-section": {
+    "importPath": "../components/form-section/form-section.js",
+    "dependencies": []
+  },
+  "sigvelo-include": {
+    "importPath": "../components/include/include.js",
+    "dependencies": []
+  },
+  "sigvelo-infinite-scroller": {
+    "importPath": "../components/infinite-scroller/infinite-scroller.js",
+    "dependencies": [
+      "sigvelo-spinner"
+    ]
+  },
+  "sigvelo-intersection-observer": {
+    "importPath": "../components/intersection-observer/intersection-observer.js",
+    "dependencies": []
+  },
+  "sigvelo-listbox-item": {
+    "importPath": "../components/listbox-item/listbox-item.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-listbox": {
+    "importPath": "../components/listbox/listbox.js",
+    "dependencies": [
+      "listbox-item"
+    ]
+  },
+  "sigvelo-lorem-ipsum": {
+    "importPath": "../components/lorem-ipsum/lorem-ipsum.js",
+    "dependencies": []
+  },
+  "sigvelo-meter": {
+    "importPath": "../components/meter/meter.js",
+    "dependencies": []
+  },
+  "sigvelo-metric": {
+    "importPath": "../components/metric/metric.js",
+    "dependencies": []
+  },
+  "sigvelo-metric-grid": {
+    "importPath": "../components/metric-grid/metric-grid.js",
+    "dependencies": []
+  },
+  "sigvelo-mutation-observer": {
+    "importPath": "../components/mutation-observer/mutation-observer.js",
+    "dependencies": []
+  },
+  "sigvelo-navicon": {
+    "importPath": "../components/navicon/navicon.js",
+    "dependencies": []
+  },
+  "sigvelo-number": {
+    "importPath": "../components/number/number.js",
+    "dependencies": []
+  },
+  "sigvelo-number-field": {
+    "importPath": "../components/number-field/number-field.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-pagination": {
+    "importPath": "../components/pagination/pagination.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-popover": {
+    "importPath": "../components/popover/popover.js",
+    "dependencies": []
+  },
+  "sigvelo-preview-card": {
+    "importPath": "../components/preview-card/preview-card.js",
+    "dependencies": []
+  },
+  "sigvelo-progress": {
+    "importPath": "../components/progress/progress.js",
+    "dependencies": []
+  },
+  "sigvelo-radio-item": {
+    "importPath": "../components/radio-item/radio-item.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-radio": {
+    "importPath": "../components/radio/radio.js",
+    "dependencies": [
+      "sigvelo-radio-item"
+    ]
+  },
+  "sigvelo-random-content": {
+    "importPath": "../components/random-content/random-content.js",
+    "dependencies": []
+  },
+  "sigvelo-rating": {
+    "importPath": "../components/rating/rating.js",
+    "dependencies": []
+  },
+  "sigvelo-resize-observer": {
+    "importPath": "../components/resize-observer/resize-observer.js",
+    "dependencies": []
+  },
+  "sigvelo-scroll-area": {
+    "importPath": "../components/scroll-area/scroll-area.js",
+    "dependencies": []
+  },
+  "sigvelo-scroller": {
+    "importPath": "../components/scroller/scroller.js",
+    "dependencies": []
+  },
+  "sigvelo-search-list": {
+    "importPath": "../components/search-list/search-list.js",
+    "dependencies": []
+  },
+  "sigvelo-select": {
+    "importPath": "../components/select/select.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-selection-summary": {
+    "importPath": "../components/selection-summary/selection-summary.js",
+    "dependencies": []
+  },
+  "sigvelo-share": {
+    "importPath": "../components/share/share.js",
+    "dependencies": []
+  },
+  "sigvelo-slide-activator": {
+    "importPath": "../components/slide-activator/slide-activator.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-sparkline": {
+    "importPath": "../components/sparkline/sparkline.js",
+    "dependencies": []
+  },
+  "sigvelo-splitter": {
+    "importPath": "../components/splitter/splitter.js",
+    "dependencies": []
+  },
+  "sigvelo-switch": {
+    "importPath": "../components/switch/switch.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  },
+  "sigvelo-tab": {
+    "importPath": "../components/tab/tab.js",
+    "dependencies": []
+  },
+  "sigvelo-tab-panel": {
+    "importPath": "../components/tab-panel/tab-panel.js",
+    "dependencies": []
+  },
+  "sigvelo-tab-list": {
+    "importPath": "../components/tab-list/tab-list.js",
+    "dependencies": [
+      "sigvelo-scroller",
+      "sigvelo-tab",
+      "sigvelo-tab-panel"
+    ]
+  },
+  "sigvelo-text-area": {
+    "importPath": "../components/text-area/text-area.js",
+    "dependencies": []
+  },
+  "sigvelo-text-mask": {
+    "importPath": "../components/text-mask/text-mask.js",
+    "dependencies": []
+  },
+  "sigvelo-timed-content": {
+    "importPath": "../components/timed-content/timed-content.js",
+    "dependencies": []
+  },
+  "sigvelo-toast-item": {
+    "importPath": "../components/toast-item/toast-item.js",
+    "dependencies": [
+      "sigvelo-icon",
+      "sigvelo-progress"
+    ]
+  },
+  "sigvelo-transition-group": {
+    "importPath": "../components/transition-group/transition-group.js",
+    "dependencies": []
+  },
+  "sigvelo-toast": {
+    "importPath": "../components/toast/toast.js",
+    "dependencies": [
+      "sigvelo-toast-item",
+      "sigvelo-transition-group"
+    ]
+  },
+  "sigvelo-toggle-icon": {
+    "importPath": "../components/toggle-icon/toggle-icon.js",
+    "dependencies": []
+  },
+  "sigvelo-toggle-tag": {
+    "importPath": "../components/toggle-tag/toggle-tag.js",
+    "dependencies": []
+  },
+  "sigvelo-toolbar": {
+    "importPath": "../components/toolbar/toolbar.js",
+    "dependencies": []
+  },
+  "sigvelo-zoomable-frame": {
+    "importPath": "../components/zoomable-frame/zoomable-frame.js",
+    "dependencies": [
+      "sigvelo-icon"
+    ]
+  }
+};
+const eagerLoad = [];
+
+/** Update the lazy-loader configuration at runtime */
+export async function updateConfig(config) {
+  if (config.components) {
+    components = { ...components, ...config.components };
+  }
+
+  if(config.prefix || config.suffix) {
+    components = getScopedComponents(config.prefix, config.suffix);
+  }
+
+  if (config.rootElement) {
+    if (observer) {
+      observer.disconnect();
+    }
+    start(config.rootElement);
+  }
+
+  if (config.eagerLoad) {
+    await Promise.allSettled(eagerLoad?.map((tagName) => register(tagName)));
+  }
+}
+
+function getScopedComponents(prefix = "", suffix = "") {
+  const scopedComponents = {};
+  for (const [key, value] of Object.entries(components)) {
+    const newKey = prefix + key + suffix;
+    scopedComponents[newKey] = value;
+  }
+
+  return scopedComponents;
+}
+
+/** Load any undefined custom elements and load the components in the list */
+async function load(root) {
+  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+  const tags = [...root.querySelectorAll(":not(:defined)")]?.map((el) =>
+    el.tagName.toLowerCase()
+  ) || [];
+  if (rootTagName.includes("-") && !customElements.get(rootTagName)) {
+    tags.push(rootTagName);
+  }
+  const tagsToRegister = [...new Set(tags)];
+  await Promise.allSettled(tagsToRegister?.map((tagName) => register(tagName)));
+}
+
+/** Register the component and any dependencies */
+function register(tagName) {
+  const component = components[tagName];
+
+  if (customElements.get(tagName)) {
+    
+    cleanUp(component, tagName);
+    return Promise.resolve();
+  }
+
+  if (!component) {
+    
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    import(component.importPath)
+      .then(() => {
+        
+        cleanUp(component, tagName);
+        resolve();
+      })
+      .catch(() => {
+        console.error(`Unable to load <${tagName}> from ${component.importPath}`);
+        reject();
+      });
+  });
+}
+
+/** Remove the component from the list of components to load */
+function cleanUp(component, tagName) {
+  delete components[tagName];
+  component.dependencies?.forEach((dependency) => {
+    delete components[dependency];
+  });
+
+  if (!Object.keys(component).length) {
+    observer.disconnect();
+  }
+}
+
+/** Initialize the loader */
+async function start(root = document.body) {
+  
+  // Eager load any components that are not defined in the Custom Elements Manifest
+  await Promise.allSettled(eagerLoad?.map((tagName) => register(tagName)));
+
+  // Watch for any new elements that are added to the DOM
+  observer = new MutationObserver((mutations) => {
+    for (const { addedNodes } of mutations) {
+      for (const node of addedNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          load(node);
+        }
+      }
+    }
+  });
+  
+  load(root);
+  observer.observe(root, { subtree: true, childList: true });
+}
+
+start();