@siemens/ix-icons 2.1.0 → 2.2.0

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-7f35fd9f.js');
-require('./index-4251dd4f.js');
+const icon = require('./icon-ba9aca3f.js');
+require('./index-af0541e0.js');
 
 
 

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-7f35fd9f.js');
-require('./index-4251dd4f.js');
+const icon = require('./icon-ba9aca3f.js');
+require('./index-af0541e0.js');
 
 
 

package/dist/cjs/ix-icons.cjs.js

@@ -2,25 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4251dd4f.js');
+const index = require('./index-af0541e0.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v3.2.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ix-icons.cjs.js', document.baseURI).href));
     const opts = {};
-    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
-        // TODO(STENCIL-661): Remove code related to the dynamic import shim
-        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     }
     return index.promiseResolve(opts);
 };
 
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["ix-icon.cjs",[[1,"ix-icon",{"size":[1],"color":[1],"name":[1],"svgContent":[32]}]]]], options);
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["ix-icon.cjs",[[1,"ix-icon",{"size":[1],"color":[1],"name":[1],"lazyLoading":[4,"lazy-loading"],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIconContent"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ix-icons.cjs.js.map

@@ -1 +1 @@
-{"file":"ix-icons.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,0MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.2.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"ix-icons.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,0MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["node_modules/.pnpm/@stencil+core@4.16.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -2,20 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4251dd4f.js');
+const index = require('./index-af0541e0.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
-/*
- Stencil Client Patch Esm v3.2.1 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    return index.promiseResolve();
-};
-
-const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return index.bootstrapLazy([["ix-icon.cjs",[[1,"ix-icon",{"size":[1],"color":[1],"name":[1],"svgContent":[32]}]]]], options);
-  });
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["ix-icon.cjs",[[1,"ix-icon",{"size":[1],"color":[1],"name":[1],"lazyLoading":[4,"lazy-loading"],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIconContent"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js.map

@@ -1 +1 @@
-{"file":"loader.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAM,QAAQ,GAAG,MAAM;AAiBvB,IAAI,OAAOA,oBAAc,EAAE,CAAC;AAC5B,CAAC;;ACnBW,MAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AACtD,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC9D,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,GAAG,CAAC,CAAC;AACL;;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-esm.js","@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Esm v3.2.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD } from '@stencil/core/internal/app-data';\nimport { CSS, plt, win, promiseResolve } from '@stencil/core';\nconst patchEsm = () => {\n    // NOTE!! This fn cannot use async/await!\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    // @ts-ignore\n    if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {\n        // @ts-ignore\n        return import(/* webpackChunkName: \"polyfills-css-shim\" */ './css-shim.js').then(() => {\n            if ((plt.$cssShim$ = win.__cssshim)) {\n                // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n                return plt.$cssShim$.i();\n            }\n            else {\n                // for better minification\n                return 0;\n            }\n        });\n    }\n    return promiseResolve();\n};\nexport { patchEsm };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchEsm } from '@stencil/core/internal/client/patch-esm';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = (win, options) => {\n  if (typeof window === 'undefined') return Promise.resolve();\n  return patchEsm().then(() => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n  });\n};\n"],"version":3}
+{"file":"loader.cjs.js","mappings":";;;;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS,CAAC;AACtD,EAAE,MAAMA,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D;;;;;","names":["globalScripts","bootstrapLazy"],"sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -1,11 +1,11 @@
 {
   "entries": [
-    "./components/icon/icon.js"
+    "components/icon/icon.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.2.1",
-    "typescriptVersion": "4.9.5"
+    "version": "4.16.0",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/icon/icon.js

@@ -6,121 +6,160 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host } from '@stencil/core';
-import { iconMissingSymbol } from './icons';
-import { parseSVGDataContent, resolveIcon } from './resolveIcon';
+import { h, Host, Build } from "@stencil/core";
+import { parseSVGDataContent, resolveIcon } from "./resolveIcon";
+const iconMissingSymbol = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>";
 export class Icon {
-  constructor() {
-    this.size = undefined;
-    this.color = undefined;
-    this.name = undefined;
-    this.svgContent = undefined;
-  }
-  connectedCallback() {
-    this.loadIconContent();
-  }
-  async loadIconContent() {
-    try {
-      this.svgContent = await resolveIcon(this);
+    constructor() {
+        this.size = undefined;
+        this.color = undefined;
+        this.name = undefined;
+        this.lazyLoading = false;
+        this.svgContent = undefined;
+        this.isVisible = false;
     }
-    catch (error) {
-      this.svgContent = parseSVGDataContent(iconMissingSymbol);
+    connectedCallback() {
+        this.waitForRendering(() => {
+            this.isVisible = true;
+            this.loadIconContent();
+        });
     }
-  }
-  render() {
-    const style = {};
-    if (this.color) {
-      style['color'] = `var(--theme-${this.color})`;
+    async loadIconContent() {
+        try {
+            this.svgContent = await resolveIcon(this.name);
+        }
+        catch (error) {
+            this.svgContent = parseSVGDataContent(iconMissingSymbol);
+        }
     }
-    return (h(Host, { style: style, class: {
-        ['size-12']: this.size === '12',
-        ['size-16']: this.size === '16',
-        ['size-24']: this.size === '24',
-        ['size-32']: this.size === '32',
-      } }, h("div", { class: 'svg-container', innerHTML: this.svgContent })));
-  }
-  static get is() { return "ix-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'12' | '16' | '24' | '32'",
-          "resolved": "\"12\" | \"16\" | \"24\" | \"32\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the icon"
-        },
-        "attribute": "size",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Color of the icon"
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IxIcons",
-          "resolved": "\"log\" | \"screenshot\" | \"filter\" | \"map\" | \"info\" | \"error\" | \"success\" | \"copy\" | \"document\" | \"code\" | \"details\" | \"label\" | \"link\" | \"script\" | \"table\" | \"circle\" | \"ellipse\" | \"image\" | \"polygon\" | \"stop\" | \"text\" | \"download\" | \"about\" | \"replace\" | \"import\" | \"history\" | \"location\" | \"screen\" | \"close\" | \"print\" | (string & {}) | \"about-filled\" | \"add-application\" | \"add-circle-filled\" | \"add-circle\" | \"add-document-note\" | \"add-eye-filled\" | \"add-eye\" | \"add-task-list\" | \"add-task\" | \"add-user-filled\" | \"add-user\" | \"add\" | \"ai\" | \"alarm-bell-cancelled-filled\" | \"alarm-bell-cancelled\" | \"alarm-bell-filled\" | \"alarm-bell\" | \"alarm-clock-filled\" | \"alarm-clock\" | \"alarm-filled\" | \"alarm\" | \"analyze\" | \"anomaly-found\" | \"anomaly\" | \"app-menu\" | \"application-screen\" | \"applications\" | \"apps\" | \"arrow-diagonal-bottom-left\" | \"arrow-diagonal-bottom-right\" | \"arrow-diagonal-top-left\" | \"arrow-diagonal-top-right\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right-down\" | \"arrow-right\" | \"arrow-up\" | \"attach\" | \"attachment-upload\" | \"audio-description1\" | \"audio-description2\" | \"audit-report\" | \"average\" | \"backup-filled\" | \"backup\" | \"bar-code\" | \"barchart\" | \"battery-check\" | \"battery-empty-question\" | \"battery-empty\" | \"battery-exclamation\" | \"battery-full-check\" | \"battery-full\" | \"battery-half\" | \"battery-low\" | \"battery-quarter\" | \"battery-slash\" | \"battery-three-quarter\" | \"battery-xmark\" | \"bezier-curve\" | \"binoculars-filled\" | \"binoculars\" | \"blazor\" | \"book\" | \"bookmark-filled\" | \"bookmark\" | \"boundary-signals\" | \"building1-filled\" | \"building1\" | \"building2-filled\" | \"building2\" | \"bulb-filled\" | \"bulb\" | \"calendar-filled\" | \"calendar-settings\" | \"calendar\" | \"cancel\" | \"cancelled\" | \"capacity-filled\" | \"capacity\" | \"capture\" | \"car-filled\" | \"car\" | \"card-layout-filled\" | \"card-layout\" | \"certificate-error-filled\" | \"certificate-error\" | \"certificate-exclamation-filled\" | \"certificate-exclamation\" | \"certificate-success-filled\" | \"certificate-success\" | \"chart-cursor\" | \"chart-curve-linear\" | \"chart-curve-spline\" | \"chart-curve-stepped\" | \"chart-diagram-add\" | \"chart-diagram\" | \"chart-diagrams\" | \"chart-labels-filled\" | \"chart-labels\" | \"check-in\" | \"check-out\" | \"check\" | \"checkbox-component-checked\" | \"checkbox-component-mixed\" | \"checkbox-component-unchecked\" | \"checkbox-filled\" | \"checkbox\" | \"checkboxes-filled\" | \"checkboxes\" | \"chevron-down-small\" | \"chevron-down\" | \"chevron-left-small\" | \"chevron-left\" | \"chevron-right-small\" | \"chevron-right\" | \"chevron-up-small\" | \"chevron-up\" | \"circle-dot-filled\" | \"circle-dot\" | \"circle-filled\" | \"circle-pause-filled\" | \"circle-pause\" | \"circle-play-filled\" | \"circle-play\" | \"circle-stop-filled\" | \"circle-stop\" | \"clear-filter-filled\" | \"clear-filter\" | \"clear\" | \"clock-filled\" | \"clock\" | \"close-small\" | \"cloud-download-add-filled\" | \"cloud-download-add\" | \"cloud-download-filled\" | \"cloud-download-list-filled\" | \"cloud-download-list\" | \"cloud-download\" | \"cloud-fail-filled\" | \"cloud-fail\" | \"cloud-filled\" | \"cloud-new-filled\" | \"cloud-new\" | \"cloud-success-filled\" | \"cloud-success\" | \"cloud-upload-filled\" | \"cloud-upload\" | \"cloud\" | \"coffee-empty-filled\" | \"coffee-empty\" | \"coffee-filled\" | \"coffee\" | \"cogwheel-filled\" | \"cogwheel\" | \"combine\" | \"compact-disc-filled\" | \"compact-disc\" | \"compound-block\" | \"configuration\" | \"configure-filled\" | \"configure\" | \"connected\" | \"connector-chart-filled\" | \"connector-chart\" | \"connector-filled\" | \"connector-hex-filled\" | \"connector-hex\" | \"connector-rect-filled\" | \"connector-rect\" | \"connector-rhomb-filled\" | \"connector-rhomb\" | \"connector\" | \"consistency-check\" | \"contact-details-filled\" | \"contact-details\" | \"context-menu\" | \"controlled-device\" | \"controller-device\" | \"corner-arrow-up-left\" | \"couch-filled\" | \"couch\" | \"create-plant-filled\" | \"create-plant\" | \"cut\" | \"cycle\" | \"data-egress\" | \"data-ingress-egress\" | \"data-ingress\" | \"database-filled\" | \"database\" | \"diagram-module-library\" | \"diagram-module-new\" | \"diagram-module\" | \"diamond\" | \"disconnected\" | \"disk-filled\" | \"disk-pen\" | \"disk\" | \"distribution\" | \"doc-document\" | \"document-bulk\" | \"document-fail\" | \"document-info\" | \"document-link\" | \"document-management\" | \"document-reference\" | \"document-settings\" | \"document-success\" | \"double-check\" | \"double-chevron-down\" | \"double-chevron-left\" | \"double-chevron-right\" | \"double-chevron-up\" | \"doublet-filled\" | \"doublet\" | \"download-add\" | \"download-list\" | \"drop\" | \"duplicate-document\" | \"duplicate\" | \"e-mail-filled\" | \"e-mail\" | \"earth-filled\" | \"earth\" | \"edit-plant\" | \"electrical-energy-filled\" | \"electrical-energy\" | \"ellipse-arc\" | \"ellipse-filled\" | \"error-filled\" | \"explore-filled\" | \"explore\" | \"export\" | \"eye-cancelled-filled\" | \"eye-cancelled\" | \"eye-filled\" | \"eye\" | \"factory-reset-filled\" | \"factory-reset\" | \"filter-filled\" | \"filter-outline\" | \"fit-to-screen\" | \"flag-filled\" | \"flag\" | \"folder-down-filled\" | \"folder-down\" | \"folder-filled\" | \"folder-new-filled\" | \"folder-new-outline\" | \"folder-new\" | \"folder-open-filled\" | \"folder-open-outline\" | \"folder-open\" | \"folder-outline\" | \"folder-up-filled\" | \"folder-up\" | \"folder\" | \"full-screeen-exit\" | \"full-screeen\" | \"full-screen-exit\" | \"full-screen\" | \"function-block-library\" | \"function-block-new\" | \"function-block\" | \"function-diagram-new\" | \"function-diagram\" | \"gauge-filled\" | \"gauge\" | \"gaugechart\" | \"global-plant-filled\" | \"global-plant\" | \"globe-filled\" | \"globe\" | \"goto\" | \"group\" | \"hard-reset\" | \"hardware-cabinet\" | \"health-filled\" | \"health\" | \"heart-filled\" | \"heart\" | \"hexagon-vertical-bars-database-filled\" | \"hexagon-vertical-bars-database\" | \"hexagon-vertical-bars-filled\" | \"hexagon-vertical-bars\" | \"hierarchy\" | \"highlight-filled\" | \"highlight\" | \"history-list\" | \"home-filled\" | \"home\" | \"hourglass\" | \"image-filled\" | \"info-feed\" | \"info-filled\" | \"ingestion-report\" | \"ingestion\" | \"ink-pen\" | \"inquiry-filled\" | \"inquiry-mail\" | \"inquiry\" | \"item-details-filled\" | \"item-details\" | \"label-filled\" | \"landing-page-logo\" | \"language-filled\" | \"language\" | \"layers-filled\" | \"layers\" | \"leaf\" | \"legal\" | \"library-new\" | \"library\" | \"license\" | \"light-dark\" | \"line-diagonal\" | \"list\" | \"live-schedule\" | \"location-filled\" | \"location-outline\" | \"lock-filled\" | \"lock-key-filled\" | \"lock-key\" | \"lock\" | \"log-in\" | \"log-out\" | \"logic-diagram\" | \"lower-limit\" | \"mail-filled\" | \"mail\" | \"maintenance-documents\" | \"maintenance-info\" | \"maintenance-warning-filled\" | \"maintenance-warning\" | \"maintenance\" | \"mandatory-done\" | \"mandatory\" | \"maximize\" | \"microphone-filled\" | \"microphone\" | \"minimize\" | \"minus\" | \"missing-symbol\" | \"mix\" | \"monitor-filled\" | \"monitor-trend\" | \"monitor\" | \"monitoring-add\" | \"monitoring\" | \"monitorings\" | \"moon-filled\" | \"moon\" | \"more-menu\" | \"mouse-click-filled\" | \"mouse-click\" | \"mouse-select-filled\" | \"mouse-select\" | \"mp4-document\" | \"namur-check-function-filled\" | \"namur-check-function\" | \"namur-failure-filled\" | \"namur-failure\" | \"namur-maintenance-required-filled\" | \"namur-maintenance-required\" | \"namur-ok-filled\" | \"namur-ok\" | \"namur-out-of-spec-filled\" | \"namur-out-of-spec\" | \"navigation-filled\" | \"navigation-left\" | \"navigation-right\" | \"navigation\" | \"new-indicator-filled\" | \"new-indicator\" | \"no-filter-filled\" | \"no-filter\" | \"no-image\" | \"note-filled\" | \"note\" | \"notification-filled\" | \"notification\" | \"notifications-filled\" | \"notifications\" | \"ontology-filled\" | \"ontology\" | \"open-external\" | \"open-file-filled\" | \"open-file\" | \"operate-plant-filled\" | \"operate-plant\" | \"optimize\" | \"p-and-i-symbols\" | \"p-i-diagram\" | \"pan\" | \"paste\" | \"pause\" | \"pc-tower-filled\" | \"pc-tower\" | \"pdf-document\" | \"pen-filled\" | \"pen\" | \"phone-filled\" | \"phone\" | \"photo-camera-add\" | \"photo-camera-cancelled-filled\" | \"photo-camera-cancelled\" | \"photo-camera-filled\" | \"photo-camera\" | \"photo-cameras\" | \"piechart-filled\" | \"piechart\" | \"pin-filled\" | \"pin\" | \"plant-filled\" | \"plant-handbook-filled\" | \"plant-handbook\" | \"plant-outline\" | \"plant-security\" | \"plant-settings-filled\" | \"plant-settings\" | \"plant-user-filled\" | \"plant-user\" | \"plant\" | \"plants-filled\" | \"plants\" | \"play-filled\" | \"play-pause-filled\" | \"play-pause\" | \"play-stepwise-filled\" | \"play-stepwise\" | \"play\" | \"plus-minus-times-divide\" | \"plus\" | \"point-up-filled\" | \"point-up\" | \"polar-plot\" | \"polygon-filled\" | \"polygon-line\" | \"ppt-document\" | \"print-filled\" | \"prio-high\" | \"prio-low\" | \"prio-middle\" | \"product-catalog\" | \"product-management\" | \"product\" | \"project-configuration\" | \"project-new\" | \"project-scenarios\" | \"project-server-filled\" | \"project-server\" | \"project\" | \"protocol\" | \"publish-document\" | \"publish\" | \"qr-code\" | \"quality-report\" | \"question-filled\" | \"question\" | \"radarchart\" | \"radio-waves-off\" | \"radio-waves-warning\" | \"radio-waves\" | \"random-filled\" | \"random\" | \"reboot\" | \"rectangle-filled\" | \"rectangle\" | \"redo\" | \"reference\" | \"refresh-cancelled\" | \"refresh\" | \"reload\" | \"remove-application\" | \"remove-eye-filled\" | \"remove-eye\" | \"rename\" | \"report-barchart\" | \"report-linechart\" | \"report-text\" | \"reset\" | \"restore-backup-filled\" | \"restore-backup-pc\" | \"restore-backup\" | \"rhomb-filled\" | \"rhomb\" | \"road-filled\" | \"road\" | \"rocket-filled\" | \"rocket\" | \"route-target\" | \"route\" | \"scatterplot\" | \"scheduler-filled\" | \"scheduler\" | \"screen-filled\" | \"screenshot-filled\" | \"script-add\" | \"scripts\" | \"search\" | \"share-filled\" | \"share\" | \"shopping-cart-filled\" | \"shopping-cart\" | \"shout-filled\" | \"shout\" | \"sign-language\" | \"signal-strength-0\" | \"signal-strength-1\" | \"signal-strength-2\" | \"signal-strength-3\" | \"signal-strength-4\" | \"signal-strength-5\" | \"signal-strength-6\" | \"signal-strength-7\" | \"signal-strength-8\" | \"simit-component\" | \"simit-macro-component-editor\" | \"simit-macro\" | \"single-check\" | \"skip-back-filled\" | \"skip-back\" | \"skip-filled\" | \"skip\" | \"snowflake\" | \"sort-ascending\" | \"sort-descending\" | \"sort\" | \"sound-loud-filled\" | \"sound-loud\" | \"sound-mute-filled\" | \"sound-mute\" | \"sound-off-filled\" | \"sound-off\" | \"sound-quiet-filled\" | \"sound-quiet\" | \"spatial\" | \"split-horizontally\" | \"split-vertically\" | \"stamp-filled\" | \"stamp\" | \"standby\" | \"star-add-filled\" | \"star-add\" | \"star-cancelled-filled\" | \"star-cancelled\" | \"star-filled\" | \"star-list-filled\" | \"star-list\" | \"star\" | \"start-data-analysis\" | \"steering-user-filled\" | \"steering-user\" | \"steering\" | \"stethoscope\" | \"stop-filled\" | \"success-filled\" | \"sun-filled\" | \"sun\" | \"support\" | \"surveillance-cancelled-filled\" | \"surveillance-cancelled\" | \"surveillance-filled\" | \"surveillance\" | \"svg-document\" | \"swap-left-right\" | \"switch-slider\" | \"table-columns\" | \"table-rows\" | \"table-settings\" | \"tag-filled\" | \"tag-plus-filled\" | \"tag-plus\" | \"tag\" | \"tasks-all\" | \"tasks-done\" | \"tasks-open\" | \"text-circle-rectangle-filled\" | \"text-circle-rectangle\" | \"text-document\" | \"threshold-cancelled\" | \"threshold-off\" | \"threshold-on\" | \"to-be-published\" | \"to-search\" | \"topic-filled\" | \"topic\" | \"touch-filled\" | \"touch\" | \"trashcan-filled\" | \"trashcan\" | \"tree\" | \"trend-downward-filled\" | \"trend-downward\" | \"trend-sideways-filled\" | \"trend-sideways\" | \"trend-upward-filled\" | \"trend-upward\" | \"trend\" | \"triangle-filled\" | \"triangle\" | \"truck-filled\" | \"truck\" | \"tulip-filled\" | \"tulip\" | \"txt-document\" | \"undo\" | \"ungroup\" | \"unlock-filled\" | \"unlock-plant-filled\" | \"unlock-plant\" | \"unlock\" | \"upload-document-note\" | \"upload-fail\" | \"upload-success\" | \"upload\" | \"upper-limit\" | \"user-check-filled\" | \"user-check\" | \"user-fail-filled\" | \"user-fail\" | \"user-filled\" | \"user-management-filled\" | \"user-management\" | \"user-profile-filled\" | \"user-profile\" | \"user-reading-reading\" | \"user-reading\" | \"user-settings-filled\" | \"user-settings\" | \"user\" | \"validate\" | \"vdi-folder\" | \"version-history\" | \"video-file-filled\" | \"video-file\" | \"warning-filled\" | \"warning-rhomb-filled\" | \"warning-rhomb\" | \"warning\" | \"water-bathing\" | \"water-fish\" | \"water-plant\" | \"water-sunbathing\" | \"waveform\" | \"webcam-cancelled-filled\" | \"webcam-cancelled\" | \"webcam-filled\" | \"webcam\" | \"wlan-off\" | \"wlan-strength-0\" | \"wlan-strength-1\" | \"wlan-strength-2\" | \"wlan-strength-3\" | \"work-case-filled\" | \"work-case\" | \"workspace\" | \"workspaces\" | \"x-axis-settings\" | \"xls-document\" | \"xml-document\" | \"y-axis-settings\" | \"youtube-filled\" | \"youtube\" | \"zoom-in\" | \"zoom-out\" | \"zoom-selection\"",
-          "references": {
-            "IxIcons": {
-              "location": "import",
-              "path": "./icons"
+    waitForRendering(onRender) {
+        if (Build.isBrowser && this.lazyLoading && typeof window !== 'undefined' && window.IntersectionObserver) {
+            const observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        onRender();
+                        observer.disconnect();
+                    }
+                });
+            }, {
+                rootMargin: '25px',
+            });
+            observer.observe(this.hostElement);
+        }
+        else {
+            onRender();
+        }
+    }
+    render() {
+        const style = {};
+        if (this.color) {
+            style['color'] = `var(--theme-${this.color})`;
+        }
+        return (h(Host, { key: '8dc18bf3b1ab1e2a521bd0fee33fa91b856dc52b', style: style, class: {
+                ['size-12']: this.size === '12',
+                ['size-16']: this.size === '16',
+                ['size-24']: this.size === '24',
+                ['size-32']: this.size === '32',
+            } }, h("div", { key: '48c3e8ae8e0d36be5fa112dbd408756f56c19535', class: 'svg-container', innerHTML: this.svgContent })));
+    }
+    static get is() { return "ix-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get assetsDirs() { return ["svg"]; }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'12' | '16' | '24' | '32'",
+                    "resolved": "\"12\" | \"16\" | \"24\" | \"32\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon"
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the icon"
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use one of our defined icon names e.g. `copy`\n\nhttps://ix.siemens.io/docs/icon-library/icons\n\nor the import variant\n\n```\nimport { rocket } from '@siemens/ix-icons/icons';\n\n<ix-icon name={rocket}></ix-icon>\n```"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "lazyLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "lazy-loading",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use one of our defined icon names e.g. `copy`\n\nhttps://ix.siemens.io/docs/icon-library/icons\n\nor the import variant\n\n```\nimport { rocket } from '@siemens/ix-icons/icons';\n\n<ix-icon name={rocket}></ix-icon>\n```"
-        },
-        "attribute": "name",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "svgContent": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "name",
-        "methodName": "loadIconContent"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "svgContent": {},
+            "isVisible": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "loadIconContent"
+            }];
+    }
 }
 //# sourceMappingURL=icon.js.map

package/dist/collection/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,IAAI;;;;;;;EA4Bf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAGD,KAAK,CAAC,eAAe;IACnB,IAAI;MACF,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;KAC3C;IAAC,OAAO,KAAK,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;KAC1D;EACH,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAEP,EAAE,CAAC;IAEP,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;KAC/C;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;QACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC;MAED,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { IxIcons } from './icons';\nimport { iconMissingSymbol } from './icons';\nimport { parseSVGDataContent, resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\n\n  /**\n   * Color of the icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Use one of our defined icon names e.g. `copy`\n   *\n   * https://ix.siemens.io/docs/icon-library/icons\n   *\n   * or the import variant\n   *\n   * ```\n   * import { rocket } from '@siemens/ix-icons/icons';\n   *\n   * <ix-icon name={rocket}></ix-icon>\n   * ```\n   */\n  @Prop() name: IxIcons;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('name')\n  async loadIconContent() {\n    try {\n      this.svgContent = await resolveIcon(this);\n    } catch (error) {\n      this.svgContent = parseSVGDataContent(iconMissingSymbol);\n    }\n  }\n\n  render() {\n    const style: {\n      [key: string]: string;\n    } = {};\n\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{\n          ['size-12']: this.size === '12',\n          ['size-16']: this.size === '16',\n          ['size-24']: this.size === '24',\n          ['size-32']: this.size === '32',\n        }}\n      >\n        <div class={'svg-container'} innerHTML={this.svgContent}></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjE,MAAM,iBAAiB,GACrB,gdAAgd,CAAC;AAQnd,MAAM,OAAO,IAAI;;;;;2BA4BO,KAAK;;yBAGN,KAAK;;IAE1B,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC;YACH,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,QAAoB;QAC3C,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,oBAAoB,EAAE,CAAC;YACjH,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;gBACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACtB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,QAAQ,EAAE,CAAC;wBACX,QAAQ,CAAC,UAAU,EAAE,CAAC;oBACxB,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,EACD;gBACE,UAAU,EAAE,MAAM;aACnB,CACF,CAAC;YAEF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAEP,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;QAChD,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;gBACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;gBAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;gBAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;gBAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;aAChC;YAED,4DAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC1D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop, State, Watch, Element, Build } from '@stencil/core';\nimport { parseSVGDataContent, resolveIcon } from './resolveIcon';\n\nconst iconMissingSymbol =\n  \"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>\";\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n  assetsDirs: ['svg'],\n})\nexport class Icon {\n  @Element() hostElement: HTMLIxIconElement;\n\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\n\n  /**\n   * Color of the icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Use one of our defined icon names e.g. `copy`\n   *\n   * https://ix.siemens.io/docs/icon-library/icons\n   *\n   * or the import variant\n   *\n   * ```\n   * import { rocket } from '@siemens/ix-icons/icons';\n   *\n   * <ix-icon name={rocket}></ix-icon>\n   * ```\n   */\n  @Prop() name: string;\n\n  @Prop() lazyLoading = false;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n\n  connectedCallback() {\n    this.waitForRendering(() => {\n      this.isVisible = true;\n      this.loadIconContent();\n    });\n  }\n\n  @Watch('name')\n  async loadIconContent() {\n    try {\n      this.svgContent = await resolveIcon(this.name);\n    } catch (error) {\n      this.svgContent = parseSVGDataContent(iconMissingSymbol);\n    }\n  }\n\n  private waitForRendering(onRender: () => void) {\n    if (Build.isBrowser && this.lazyLoading && typeof window !== 'undefined' && (window as any).IntersectionObserver) {\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              onRender();\n              observer.disconnect();\n            }\n          });\n        },\n        {\n          rootMargin: '25px',\n        },\n      );\n\n      observer.observe(this.hostElement);\n    } else {\n      onRender();\n    }\n  }\n\n  render() {\n    const style: {\n      [key: string]: string;\n    } = {};\n\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{\n          ['size-12']: this.size === '12',\n          ['size-16']: this.size === '16',\n          ['size-24']: this.size === '24',\n          ['size-32']: this.size === '32',\n        }}\n      >\n        <div class={'svg-container'} innerHTML={this.svgContent}></div>\n      </Host>\n    );\n  }\n}\n"]}