@limetech/lime-elements 36.4.0-next.5 → 36.4.0-next.7

package/dist/cjs/limel-icon.cjs.entry.js

@@ -5,50 +5,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-287e25e0.js');
 const config = require('./config-c6520559.js');
 
+const CACHE_NAME = '@limetech/lime-elements/icons';
 class IconCache {
   constructor() {
-    /*
-     * Cache of all loaded SVGs
-     */
-    this.cache = {};
-    /*
-     * Contains resolve functions for all unresolved promises that are waiting for SVG data.
-     */
-    this.resolveFunctions = {};
+    this.promises = {};
+    this.cache = caches.open(CACHE_NAME);
   }
   /**
    * Get icon data from the cache
    * @param {string} name name of the icon
    * @param {string} path path on the server where the assets are located
-   * @returns {string} svg markup
+   * @returns {Promise<string>} svg markup
    */
   async get(name, path = '') {
-    if (!this.cache[name]) {
-      this.cache[name] = await this.getIcon(name, path);
+    const cache = await this.cache;
+    const url = this.getUrl(name, path);
+    let response = await cache.match(url);
+    if (!response) {
+      response = await this.fetchData(url, cache);
     }
-    return this.cache[name];
+    return this.getIcon(response);
   }
-  /*
-   * Creates and returns a promise that will be resolved when SVG data is available
-   */
-  getIcon(name, path) {
-    return new Promise((resolve) => {
-      if (!this.resolveFunctions[name]) {
-        this.resolveFunctions[name] = [];
-        this.fetchData(name, path);
-      }
-      this.resolveFunctions[name].push(resolve);
-    });
+  async fetchData(url, cache) {
+    let requestPromise = this.promises[url];
+    if (requestPromise === undefined) {
+      requestPromise = cache.add(url);
+      this.promises[url] = requestPromise;
+    }
+    await requestPromise;
+    return cache.match(url);
   }
   /*
-   * Fetch SVG data from the server
+   * Get icon data from a response
    */
-  async fetchData(name, path) {
-    let iconPath = path || '';
-    if (path && !path.endsWith('/')) {
-      iconPath = `${path}/`;
-    }
-    const response = await fetch(`${iconPath}assets/icons/${name}.svg`);
+  async getIcon(response) {
     let svgData = await response.text();
     // Some of the icons in the Icons8 library have hard coded black color on some of the paths.
     // In order to apply coloring with CSS, these have to be set to 'currentColor'
@@ -56,7 +46,7 @@ class IconCache {
     if (!this.validSvg(svgData)) {
       throw new Error('Invalid SVG');
     }
-    this.resolvePromises(name, svgData);
+    return svgData;
   }
   /*
    * Check if the given data is a valid SVG document
@@ -66,20 +56,17 @@ class IconCache {
     const svgDoc = parser.parseFromString(data, 'image/svg+xml');
     return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
   }
-  /*
-   * Resolve all promises waiting for data for a specific icon
-   */
-  resolvePromises(name, svgData) {
-    const resolves = this.resolveFunctions[name];
-    resolves.forEach((resolve) => {
-      resolve(svgData);
-    });
-    this.resolveFunctions[name] = null;
+  getUrl(name, path) {
+    let iconPath = path || '';
+    if (path && !path.endsWith('/')) {
+      iconPath = `${path}/`;
+    }
+    return `${iconPath}assets/icons/${name}.svg`;
   }
 }
-const cache = new IconCache();
-const iconCache = (() => {
-  return cache;
+const iconCache = new IconCache();
+const iconCache$1 = (() => {
+  return iconCache;
 })();
 
 const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";
@@ -110,7 +97,7 @@ const Icon = class {
    * @returns {string} the icon SVG data
    */
   loadSvg(name) {
-    return iconCache.get(name, config.config.iconPath);
+    return iconCache$1.get(name, config.config.iconPath);
   }
   /*
    * There is no way to style external SVG files with CSS, i.e. SVGs loaded