@limetech/lime-elements 37.67.0 → 37.69.0

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

@@ -0,0 +1,208 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d1052409.js');
+const config = require('./config-e7e1a299.js');
+
+class CacheStorageIconCache {
+  constructor(cache) {
+    this.promises = {};
+    this.cache = cache;
+  }
+  /**
+   * Get icon data from the cache
+   *
+   * @param name - Name of the icon
+   * @param path - Path on the server where the assets are located
+   * @returns SVG markup
+   */
+  async get(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.getIcon(response);
+  }
+  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);
+  }
+  /*
+   * Get icon data from a response
+   */
+  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'
+    svgData = svgData.replace(/#000000/g, 'currentColor');
+    if (!this.validSvg(svgData)) {
+      throw new Error('Invalid SVG');
+    }
+    return svgData;
+  }
+  /*
+   * Check if the given data is a valid SVG document
+   */
+  validSvg(data) {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(data, 'image/svg+xml');
+    return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
+  }
+  getUrl(name, path) {
+    let iconPath = path || '';
+    if (path && !path.endsWith('/')) {
+      iconPath = `${path}/`;
+    }
+    return `${iconPath}assets/icons/${name}.svg`;
+  }
+}
+
+class InMemoryIconCache {
+  constructor() {
+    /*
+     * Cache of all loaded SVGs
+     */
+    this.cache = {};
+    /*
+     * Contains resolve functions for all unresolved promises that are waiting for SVG data.
+     */
+    this.resolveFunctions = {};
+  }
+  /**
+   * Get icon data from the cache
+   *
+   * @param name - Name of the icon
+   * @param path - Path on the server where the assets are located
+   * @returns SVG markup
+   */
+  async get(name, path = '') {
+    if (!this.cache[name]) {
+      this.cache[name] = await this.getIcon(name, path);
+    }
+    return this.cache[name];
+  }
+  /*
+   * 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);
+    });
+  }
+  /*
+   * Fetch SVG data from the server
+   */
+  async fetchData(name, path) {
+    let iconPath = path || '';
+    if (path && !path.endsWith('/')) {
+      iconPath = `${path}/`;
+    }
+    const response = await fetch(`${iconPath}assets/icons/${name}.svg`);
+    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'
+    svgData = svgData.replace(/#000000/g, 'currentColor');
+    if (!this.validSvg(svgData)) {
+      throw new Error('Invalid SVG');
+    }
+    this.resolvePromises(name, svgData);
+  }
+  /*
+   * Check if the given data is a valid SVG document
+   */
+  validSvg(data) {
+    const parser = new DOMParser();
+    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;
+  }
+}
+
+const CACHE_NAME = '@limetech/lime-elements/icons';
+function createIconCache() {
+  try {
+    const cache = caches.open(CACHE_NAME);
+    return new CacheStorageIconCache(cache);
+  }
+  catch (_a) {
+    return new InMemoryIconCache();
+  }
+}
+const iconCache = (() => {
+  return createIconCache();
+})();
+
+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 div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:1rem !important;width:1rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5rem !important;width:1.5rem !important}:host([size=large]){height:1.75rem !important;width:1.75rem !important}:host([badge][size=x-small]){height:1.5rem !important;width:1.5rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.75rem !important;width:1.75rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.75rem !important;width:2.75rem !important;--limel-icon-svg-margin:0.5rem}";
+
+const Icon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = undefined;
+    this.name = undefined;
+    this.badge = undefined;
+  }
+  componentDidLoad() {
+    this.loadIcon(this.name);
+  }
+  render() {
+    return index.h("div", { class: "container" });
+  }
+  async loadIcon(name) {
+    if (name === undefined || name === '') {
+      return;
+    }
+    const svgData = await this.loadSvg(name);
+    this.renderSvg(svgData);
+  }
+  /**
+   * Load the SVG data for the icon from the icon cache
+   *
+   * @param name - name of the icon
+   * @returns the icon SVG data
+   */
+  loadSvg(name) {
+    return iconCache.get(name, config.globalConfig.iconPath);
+  }
+  /*
+   * There is no way to style external SVG files with CSS, i.e. SVGs loaded
+   * with <img src="file.svg" /> or <object data="file.svg" type="image/svg+xml" />
+   * will remain the way they look in the file.
+   * Therefore we inject the svg as inline markup instead.
+   */
+  renderSvg(svgData) {
+    const container = this.host.shadowRoot.querySelector('div.container');
+    if (container) {
+      container.innerHTML = svgData;
+    }
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIcon"]
+  }; }
+};
+Icon.style = iconCss;
+
+exports.limel_icon = Icon;
+
+//# sourceMappingURL=limel-icon.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"limel-icon.entry.cjs.js","mappings":"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","names":["h","globalConfig"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache: Promise<Cache>;\n\n    private promises: Record<string, Promise<void>> = {};\n\n    constructor(cache: Promise<Cache>) {\n        this.cache = cache;\n    }\n\n    /**\n     * Get icon data from the cache\n     *\n     * @param name - Name of the icon\n     * @param path - Path on the server where the assets are located\n     * @returns SVG markup\n     */\n    public async get(name: string, path = ''): Promise<string> {\n        const cache = await this.cache;\n        const url = this.getUrl(name, path);\n\n        let response = await cache.match(url);\n        if (!response) {\n            response = await this.fetchData(url, cache);\n        }\n\n        return this.getIcon(response);\n    }\n\n    private async fetchData(url: string, cache: Cache): Promise<Response> {\n        let requestPromise = this.promises[url];\n        if (requestPromise === undefined) {\n            requestPromise = cache.add(url);\n            this.promises[url] = requestPromise;\n        }\n\n        await requestPromise;\n\n        return cache.match(url);\n    }\n\n    /*\n     * Get icon data from a response\n     */\n    private async getIcon(response: Response): Promise<string> {\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        return svgData;\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    private getUrl(name: string, path: string): string {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        return `${iconPath}assets/icons/${name}.svg`;\n    }\n}\n","export class InMemoryIconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache = {};\n\n    /*\n     * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n     */\n    private resolveFunctions = {};\n\n    /**\n     * Get icon data from the cache\n     *\n     * @param name - Name of the icon\n     * @param path - Path on the server where the assets are located\n     * @returns SVG markup\n     */\n    public async get(name: string, path = ''): Promise<string> {\n        if (!this.cache[name]) {\n            this.cache[name] = await this.getIcon(name, path);\n        }\n\n        return this.cache[name];\n    }\n\n    /*\n     * Creates and returns a promise that will be resolved when SVG data is available\n     */\n    private getIcon(name, path) {\n        return new Promise((resolve) => {\n            if (!this.resolveFunctions[name]) {\n                this.resolveFunctions[name] = [];\n                this.fetchData(name, path);\n            }\n\n            this.resolveFunctions[name].push(resolve);\n        });\n    }\n\n    /*\n     * Fetch SVG data from the server\n     */\n    private async fetchData(name, path) {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        this.resolvePromises(name, svgData);\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    /*\n     * Resolve all promises waiting for data for a specific icon\n     */\n    private resolvePromises(name, svgData) {\n        const resolves = this.resolveFunctions[name];\n        resolves.forEach((resolve) => {\n            resolve(svgData);\n        });\n        this.resolveFunctions[name] = null;\n    }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n    try {\n        const cache = caches.open(CACHE_NAME);\n\n        return new CacheStorageIconCache(cache);\n    } catch {\n        return new InMemoryIconCache();\n    }\n}\n\nexport default (() => {\n    return createIconCache();\n})();\n","/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n    background-color: var(--icon-background-color, transparent);\n    border-radius: 50%;\n    display: inline-block;\n    line-height: 0;\n    box-sizing: border-box;\n\n    svg {\n        fill: currentColor;\n        height: 100%;\n        pointer-events: none;\n        width: 100%;\n    }\n\n    div {\n        margin: var(--limel-icon-svg-margin, 0);\n    }\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([size='x-small']) {\n    height: 1rem !important;\n    width: 1rem !important;\n}\n:host([size='small']) {\n    height: 1.25rem !important;\n    width: 1.25rem !important;\n}\n:host([size='medium']) {\n    height: 1.5rem !important;\n    width: 1.5rem !important;\n}\n:host([size='large']) {\n    height: 1.75rem !important;\n    width: 1.75rem !important;\n}\n\n:host([badge][size='x-small']) {\n    height: 1.5rem !important;\n    width: 1.5rem !important;\n\n    --limel-icon-svg-margin: 0.25rem;\n}\n:host([badge][size='small']) {\n    height: 1.75rem !important;\n    width: 1.75rem !important;\n\n    --limel-icon-svg-margin: 0.25rem;\n}\n:host([badge][size='medium']) {\n    height: 2.5rem !important;\n    width: 2.5rem !important;\n\n    --limel-icon-svg-margin: 0.5rem;\n}\n:host([badge][size='large']) {\n    height: 2.75rem !important;\n    width: 2.75rem !important;\n\n    --limel-icon-svg-margin: 0.5rem;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { globalConfig } from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     *\n     * @param name - name of the icon\n     * @returns the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, globalConfig.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"],"version":3}

package/dist/cjs/limel-linear-progress.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d1052409.js');
-const translations = require('./translations-6c4447f4.js');
+const translations = require('./translations-9ccca4b6.js');
 
 const linearProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-linear-progress){isolation:isolate;position:relative;overflow:hidden;display:flex;width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--background-color, rgb(var(--contrast-800), 0.5))}.progress{height:100%;width:var(--percentage, 0%);border-radius:0.25rem;background-color:var(--mdc-theme-primary)}:host(limel-linear-progress[indeterminate]) .progress{background-color:transparent;width:100%}:host(limel-linear-progress[indeterminate]) .progress:before,:host(limel-linear-progress[indeterminate]) .progress:after{will-change:left, right, opacity;content:\"\";position:absolute;inset:0;height:100%;border-radius:0.25rem;opacity:0;background-color:var(--mdc-theme-primary)}:host(limel-linear-progress[indeterminate]) .progress:before{animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}:host(limel-linear-progress[indeterminate]) .progress:after{animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s}@keyframes indeterminate{0%{left:-35%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:100%;right:-90%}100%{left:100%;right:-90%;opacity:0}}@keyframes indeterminate-short{0%{left:-200%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:107%;right:-8%}100%{left:107%;right:-8%;opacity:0}}";
 

package/dist/cjs/{limel-icon_2.cjs.entry.js → limel-portal.cjs.entry.js}

@@ -3,205 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d1052409.js');
-const config = require('./config-e7e1a299.js');
-
-class CacheStorageIconCache {
-  constructor(cache) {
-    this.promises = {};
-    this.cache = cache;
-  }
-  /**
-   * Get icon data from the cache
-   *
-   * @param name - Name of the icon
-   * @param path - Path on the server where the assets are located
-   * @returns SVG markup
-   */
-  async get(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.getIcon(response);
-  }
-  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);
-  }
-  /*
-   * Get icon data from a response
-   */
-  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'
-    svgData = svgData.replace(/#000000/g, 'currentColor');
-    if (!this.validSvg(svgData)) {
-      throw new Error('Invalid SVG');
-    }
-    return svgData;
-  }
-  /*
-   * Check if the given data is a valid SVG document
-   */
-  validSvg(data) {
-    const parser = new DOMParser();
-    const svgDoc = parser.parseFromString(data, 'image/svg+xml');
-    return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
-  }
-  getUrl(name, path) {
-    let iconPath = path || '';
-    if (path && !path.endsWith('/')) {
-      iconPath = `${path}/`;
-    }
-    return `${iconPath}assets/icons/${name}.svg`;
-  }
-}
-
-class InMemoryIconCache {
-  constructor() {
-    /*
-     * Cache of all loaded SVGs
-     */
-    this.cache = {};
-    /*
-     * Contains resolve functions for all unresolved promises that are waiting for SVG data.
-     */
-    this.resolveFunctions = {};
-  }
-  /**
-   * Get icon data from the cache
-   *
-   * @param name - Name of the icon
-   * @param path - Path on the server where the assets are located
-   * @returns SVG markup
-   */
-  async get(name, path = '') {
-    if (!this.cache[name]) {
-      this.cache[name] = await this.getIcon(name, path);
-    }
-    return this.cache[name];
-  }
-  /*
-   * 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);
-    });
-  }
-  /*
-   * Fetch SVG data from the server
-   */
-  async fetchData(name, path) {
-    let iconPath = path || '';
-    if (path && !path.endsWith('/')) {
-      iconPath = `${path}/`;
-    }
-    const response = await fetch(`${iconPath}assets/icons/${name}.svg`);
-    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'
-    svgData = svgData.replace(/#000000/g, 'currentColor');
-    if (!this.validSvg(svgData)) {
-      throw new Error('Invalid SVG');
-    }
-    this.resolvePromises(name, svgData);
-  }
-  /*
-   * Check if the given data is a valid SVG document
-   */
-  validSvg(data) {
-    const parser = new DOMParser();
-    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;
-  }
-}
-
-const CACHE_NAME = '@limetech/lime-elements/icons';
-function createIconCache() {
-  try {
-    const cache = caches.open(CACHE_NAME);
-    return new CacheStorageIconCache(cache);
-  }
-  catch (_a) {
-    return new InMemoryIconCache();
-  }
-}
-const iconCache = (() => {
-  return createIconCache();
-})();
-
-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 div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:1rem !important;width:1rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5rem !important;width:1.5rem !important}:host([size=large]){height:1.75rem !important;width:1.75rem !important}:host([badge][size=x-small]){height:1.5rem !important;width:1.5rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.75rem !important;width:1.75rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.75rem !important;width:2.75rem !important;--limel-icon-svg-margin:0.5rem}";
-
-const Icon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = undefined;
-    this.name = undefined;
-    this.badge = undefined;
-  }
-  componentDidLoad() {
-    this.loadIcon(this.name);
-  }
-  render() {
-    return index.h("div", { class: "container" });
-  }
-  async loadIcon(name) {
-    if (name === undefined || name === '') {
-      return;
-    }
-    const svgData = await this.loadSvg(name);
-    this.renderSvg(svgData);
-  }
-  /**
-   * Load the SVG data for the icon from the icon cache
-   *
-   * @param name - name of the icon
-   * @returns the icon SVG data
-   */
-  loadSvg(name) {
-    return iconCache.get(name, config.globalConfig.iconPath);
-  }
-  /*
-   * There is no way to style external SVG files with CSS, i.e. SVGs loaded
-   * with <img src="file.svg" /> or <object data="file.svg" type="image/svg+xml" />
-   * will remain the way they look in the file.
-   * Therefore we inject the svg as inline markup instead.
-   */
-  renderSvg(svgData) {
-    const container = this.host.shadowRoot.querySelector('div.container');
-    if (container) {
-      container.innerHTML = svgData;
-    }
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "name": ["loadIcon"]
-  }; }
-};
-Icon.style = iconCss;
 
 var top = 'top';
 var bottom = 'bottom';
@@ -2246,7 +2047,6 @@ const Portal = class {
 };
 Portal.style = portalCss;
 
-exports.limel_icon = Icon;
 exports.limel_portal = Portal;
 
-//# sourceMappingURL=limel-icon_2.cjs.entry.js.map
+//# sourceMappingURL=limel-portal.cjs.entry.js.map