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

package/dist/collection/components/list/list.css

@@ -865,7 +865,7 @@ limel-helper-line {
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
  * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
- * @prop --list-margin: Space around the list. Default to `0.25rem`;
+ * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;
  */
 :host(limel-list) {
   display: block;
@@ -4276,7 +4276,7 @@ a.mdc-list-item {
       --icon-color,
       rgb(var(--contrast-900))
   );
-  margin: --list-margin, 0.25rem;
+  margin: var(--list-margin, 0.25rem);
   padding: 0;
   border-radius: 0.375rem;
 }

package/dist/collection/components/menu-list/menu-list.css

@@ -937,7 +937,7 @@ limel-helper-line {
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
  * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
- * @prop --list-margin: Space around the list. Default to `0.25rem`;
+ * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;
  */
 :host(limel-list) {
   display: block;
@@ -4348,7 +4348,7 @@ a.mdc-list-item {
       --icon-color,
       rgb(var(--contrast-900))
   );
-  margin: --list-margin, 0.25rem;
+  margin: var(--list-margin, 0.25rem);
   padding: 0;
   border-radius: 0.375rem;
 }

package/dist/collection/global/icon-cache.js

@@ -1,47 +1,37 @@
+const CACHE_NAME = '@limetech/lime-elements/icons';
 export 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'
@@ -49,7 +39,7 @@ export 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
@@ -59,18 +49,15 @@ export 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 = new IconCache();
 export default (() => {
-  return cache;
+  return iconCache;
 })();

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

@@ -1,50 +1,40 @@
 import { r as registerInstance, h, g as getElement } from './index-cdfd351d.js';
 import { c as config } from './config-f7362aeb.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'
@@ -52,7 +42,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
@@ -62,20 +52,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}";
@@ -106,7 +93,7 @@ const Icon = class {
    * @returns {string} the icon SVG data
    */
   loadSvg(name) {
-    return iconCache.get(name, config.iconPath);
+    return iconCache$1.get(name, config.iconPath);
   }
   /*
    * There is no way to style external SVG files with CSS, i.e. SVGs loaded