@siemens/ix-icons 1.1.2 → 1.2.0-beta.0

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

@@ -7,20 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
-import { resolveIcon } from './resolveIcon';
+import { question } from '../../../icons';
+import { parseSVGDataContent, resolveIcon } from './resolveIcon';
 export class Icon {
   constructor() {
     this.size = undefined;
     this.color = undefined;
     this.name = undefined;
-    this.src = undefined;
     this.svgContent = undefined;
   }
   connectedCallback() {
     this.loadIconContent();
   }
   async loadIconContent() {
-    this.svgContent = await resolveIcon(this);
+    try {
+      this.svgContent = await resolveIcon(this);
+    }
+    catch (error) {
+      this.svgContent = parseSVGDataContent(question);
+    }
   }
   render() {
     const style = {};
@@ -48,10 +53,7 @@ export class Icon {
         ['size-16']: this.size === '16',
         ['size-24']: this.size === '24',
         ['size-32']: this.size === '32',
-      } }, this.svgContent ? (h("div", { class: 'svg-container', innerHTML: this.svgContent })) : (h("span", { class: "skeleton-box", style: {
-        width: '100%',
-        height: '100%',
-      } }))));
+      } }, h("div", { class: 'svg-container', innerHTML: this.svgContent })));
   }
   static get is() { return "ix-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -116,26 +118,6 @@ export class Icon {
           "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": true
-      },
-      "src": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "Path to load external SVG. All color properties\nwill be overwritten by `--theme-color-std-text`\n\nhttps://ix.siemens.io/docs/theming/colors"
-        },
-        "attribute": "src",
         "reflect": false
       }
     };
@@ -147,9 +129,6 @@ export class Icon {
   }
   static get watchers() {
     return [{
-        "propName": "src",
-        "methodName": "loadIconContent"
-      }, {
         "propName": "name",
         "methodName": "loadIconContent"
       }];

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;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,IAAI;;;;;;;;EAsCf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAID,KAAK,CAAC,eAAe;IACnB,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;EAC5C,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,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;UACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC;QAED,SACE,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,CAAC,SAAS,QAAQ,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;WAC/B,GACE,CACA,CACR,CAAC;KACH;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,IAEA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAChE,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;OACf,GACK,CACT,CACI,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 */\n\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { 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({ reflect: true }) name: string;\n\n  /**\n   * Path to load external SVG. All color properties\n   * will be overwritten by `--theme-color-std-text`\n   *\n   * https://ix.siemens.io/docs/theming/colors\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,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,QAAQ,CAAC,CAAC;KACjD;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,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;UACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC;QAED,SACE,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,CAAC,SAAS,QAAQ,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;WAC/B,GACE,CACA,CACR,CAAC;KACH;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 */\n\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { question } 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: string;\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(question);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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"]}

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

@@ -8,7 +8,7 @@ export const isSvgDataUrl = (url) => {
   return url.startsWith('data:image/svg+xml');
 };
 let parser = null;
-function parseSVGDataContent(content) {
+export function parseSVGDataContent(content) {
   if (typeof window['DOMParser'] === 'undefined') {
     console.warn('DOMParser not supported by your browser.');
     return;
@@ -28,25 +28,31 @@ async function fetchSVG(url) {
   const responseText = await response.text();
   if (!response.ok) {
     console.error(responseText);
-    return '';
+    throw Error(responseText);
   }
   return parseSVGDataContent(responseText);
 }
+const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\S+)(?:\S*)$/i;
+function isValidUrl(url) {
+  return urlRegex.test(url);
+}
 export async function resolveIcon(icon) {
-  const { src, name } = icon;
-  if (name) {
-    if (isSvgDataUrl(name)) {
-      return parseSVGDataContent(name);
-    }
-    //Fallback return undefined to render web font icon
+  const { name } = icon;
+  if (!name) {
     return;
   }
-  if (!src) {
-    return '';
+  if (isSvgDataUrl(name)) {
+    return parseSVGDataContent(name);
   }
-  if (isSvgDataUrl(src)) {
-    return parseSVGDataContent(src);
+  if (isValidUrl(name)) {
+    try {
+      return await fetchSVG(name);
+    }
+    catch (error) {
+      throw error;
+    }
   }
-  return fetchSVG(src);
+  //Fallback return undefined to render web font icon
+  return;
 }
 //# sourceMappingURL=resolveIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"resolveIcon.js","sourceRoot":"","sources":["../../../src/components/icon/resolveIcon.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;EAC1C,IAAI,CAAC,GAAG,EAAE;IACR,OAAO,KAAK,CAAC;GACd;EAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;IAC3B,OAAO,KAAK,CAAC;GACd;EAED,OAAO,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,SAAS,mBAAmB,CAAC,OAAe;EAC1C,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;IAC9C,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACzD,OAAO;GACR;EAED,IAAI,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;GACpC;EAED,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;EACjE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAgB,CAAC;EAEnE,IAAI,CAAC,UAAU,EAAE;IACf,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;GAC3C;EAED,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AAED,KAAK,UAAU,QAAQ,CAAC,GAAW;EACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;EAClC,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;EAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC;GACX;EAED,OAAO,mBAAmB,CAAC,YAAY,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,IAAU;EAC1C,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;EAE3B,IAAI,IAAI,EAAE;IACR,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;MACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,mDAAmD;IACnD,OAAO;GACR;EAED,IAAI,CAAC,GAAG,EAAE;IACR,OAAO,EAAE,CAAC;GACX;EAED,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;IACrB,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC","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 { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => {\n  if (!url) {\n    return false;\n  }\n\n  if (typeof url !== 'string') {\n    return false;\n  }\n\n  return url.startsWith('data:image/svg+xml');\n};\n\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('DOMParser not supported by your browser.');\n    return;\n  }\n\n  if (parser === null) {\n    parser = new window['DOMParser']();\n  }\n\n  const svgDocument = parser.parseFromString(content, 'text/html');\n  const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return parseSVGDataContent(responseText);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (!src) {\n    return '';\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\n}\n"]}
+{"version":3,"file":"resolveIcon.js","sourceRoot":"","sources":["../../../src/components/icon/resolveIcon.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;EAC1C,IAAI,CAAC,GAAG,EAAE;IACR,OAAO,KAAK,CAAC;GACd;EAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;IAC3B,OAAO,KAAK,CAAC;GACd;EAED,OAAO,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,MAAM,UAAU,mBAAmB,CAAC,OAAe;EACjD,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;IAC9C,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACzD,OAAO;GACR;EAED,IAAI,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;GACpC;EAED,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;EACjE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAgB,CAAC;EAEnE,IAAI,CAAC,UAAU,EAAE;IACf,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;GAC3C;EAED,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AAED,KAAK,UAAU,QAAQ,CAAC,GAAW;EACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;EAClC,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;EAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,MAAM,KAAK,CAAC,YAAY,CAAC,CAAC;GAC3B;EAED,OAAO,mBAAmB,CAAC,YAAY,CAAC,CAAC;AAC3C,CAAC;AACD,MAAM,QAAQ,GAAG,4EAA4E,CAAC;AAE9F,SAAS,UAAU,CAAC,GAAW;EAC7B,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC5B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,IAAU;EAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;EAEtB,IAAI,CAAC,IAAI,EAAE;IACT,OAAO;GACR;EAED,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;IACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;GAClC;EAED,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;IACpB,IAAI;MACF,OAAO,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;KAC7B;IAAC,OAAO,KAAK,EAAE;MACd,MAAM,KAAK,CAAC;KACb;GACF;EAED,mDAAmD;EACnD,OAAO;AACT,CAAC","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 { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => {\n  if (!url) {\n    return false;\n  }\n\n  if (typeof url !== 'string') {\n    return false;\n  }\n\n  return url.startsWith('data:image/svg+xml');\n};\n\nlet parser = null;\n\nexport function parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('DOMParser not supported by your browser.');\n    return;\n  }\n\n  if (parser === null) {\n    parser = new window['DOMParser']();\n  }\n\n  const svgDocument = parser.parseFromString(content, 'text/html');\n  const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    throw Error(responseText);\n  }\n\n  return parseSVGDataContent(responseText);\n}\nconst urlRegex = /^(?:(?:https?|ftp):\\/\\/)?(?:\\S+(?::\\S*)?@)?(?:www\\.)?(?:\\S+\\.\\S+)(?:\\S*)$/i;\n\nfunction isValidUrl(url: string) {\n  return urlRegex.test(url);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { name } = icon;\n\n  if (!name) {\n    return;\n  }\n\n  if (isSvgDataUrl(name)) {\n    return parseSVGDataContent(name);\n  }\n\n  if (isValidUrl(name)) {\n    try {\n      return await fetchSVG(name);\n    } catch (error) {\n      throw error;\n    }\n  }\n\n  //Fallback return undefined to render web font icon\n  return;\n}\n"]}

package/dist/components/icon.js

@@ -1,5 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
+/* Siemens iX Icons (1.2.0-beta.0) */
+const question = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>question</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M291.76704,163.504 C291.76704,177.01952 288.33216,188.82176 281.479253,198.90112 C275.828267,207.371093 266.358187,216.549547 253.042987,226.434987 C245.378987,231.682347 240.331947,236.618667 237.916587,241.257813 C234.87744,246.90624 233.376213,255.371093 233.376213,266.666667 L190.710827,266.666667 C190.710827,249.530027 192.53504,237.027413 196.165333,229.162667 C200.394453,219.679573 209.571627,210.098773 223.686187,200.42048 C230.350293,195.374933 235.188693,190.2368 238.214827,184.994773 C241.839787,179.143253 243.664,172.49216 243.664,165.028693 C243.664,153.13024 240.125013,144.26304 233.070293,138.404907 C227.4336,134.177067 220.56768,132.059947 212.501333,132.059947 C199.39328,132.059947 189.911467,136.398507 184.065067,145.069013 C179.829333,151.518293 177.7056,159.787733 177.7056,169.868587 L177.7056,170.173227 L132.34368,170.173227 C132.34368,143.751253 140.703147,123.790507 157.43488,110.274773 C171.554773,98.9922133 189.007787,93.3346133 209.77344,93.3346133 C227.933653,93.3346133 243.865813,96.86848 257.571627,103.9232 C280.37504,115.62624 291.76704,135.494827 291.76704,163.504 Z M426.666667,213.333333 C426.666667,331.153707 331.153707,426.666667 213.333333,426.666667 C95.51296,426.666667 3.55271368e-14,331.153707 3.55271368e-14,213.333333 C3.55271368e-14,95.51168 95.51296,3.55271368e-14 213.333333,3.55271368e-14 C331.153707,3.55271368e-14 426.666667,95.51168 426.666667,213.333333 Z M384,213.333333 C384,119.226667 307.43872,42.6666667 213.333333,42.6666667 C119.227947,42.6666667 42.6666667,119.226667 42.6666667,213.333333 C42.6666667,307.43872 119.227947,384 213.333333,384 C307.43872,384 384,307.43872 384,213.333333 Z M213.332053,282.666667 C198.60416,282.666667 186.665387,294.60544 186.665387,309.333333 C186.665387,324.061227 198.60416,336 213.332053,336 C228.059947,336 239.99872,324.061227 239.99872,309.333333 C239.99872,294.60544 228.059947,282.666667 213.332053,282.666667 Z' id='Shape'/></g></g></svg>";
+
 const isSvgDataUrl = (url) => {
   if (!url) {
     return false;
@@ -30,29 +33,35 @@ async function fetchSVG(url) {
   const responseText = await response.text();
   if (!response.ok) {
     console.error(responseText);
-    return '';
+    throw Error(responseText);
   }
   return parseSVGDataContent(responseText);
 }
+const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\S+)(?:\S*)$/i;
+function isValidUrl(url) {
+  return urlRegex.test(url);
+}
 async function resolveIcon(icon) {
-  const { src, name } = icon;
-  if (name) {
-    if (isSvgDataUrl(name)) {
-      return parseSVGDataContent(name);
-    }
-    //Fallback return undefined to render web font icon
+  const { name } = icon;
+  if (!name) {
     return;
   }
-  if (!src) {
-    return '';
+  if (isSvgDataUrl(name)) {
+    return parseSVGDataContent(name);
   }
-  if (isSvgDataUrl(src)) {
-    return parseSVGDataContent(src);
+  if (isValidUrl(name)) {
+    try {
+      return await fetchSVG(name);
+    }
+    catch (error) {
+      throw error;
+    }
   }
-  return fetchSVG(src);
+  //Fallback return undefined to render web font icon
+  return;
 }
 
-const iconCss = ".glyph{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"ix-icons\";font-size:1.5rem;font-weight:500}.glyph-lg{font-size:1.3333333333em;line-height:0.75em;vertical-align:-15%}.glyph-2x{font-size:2em}.glyph-3x{font-size:3em}.glyph-4x{font-size:4em}.glyph-5x{font-size:5em}.glyph-fw{width:1.2857142857em;text-align:center}.glyph-12{font-size:0.75rem}.glyph-16{font-size:1rem}.glyph-24{font-size:1.5rem}.glyph-32{font-size:2rem}.glyph-about-filled:before{content:\"\\ea01\"}.glyph-about:before{content:\"\\ea02\"}.glyph-add-circle-filled:before{content:\"\\ea03\"}.glyph-add-circle:before{content:\"\\ea04\"}.glyph-add-document-note:before{content:\"\\ea05\"}.glyph-add-eye-filled:before{content:\"\\ea06\"}.glyph-add-eye:before{content:\"\\ea07\"}.glyph-add-task-list:before{content:\"\\ea08\"}.glyph-add-task:before{content:\"\\ea09\"}.glyph-add:before{content:\"\\ea0a\"}.glyph-ai:before{content:\"\\ea0b\"}.glyph-alarm-bell-cancelled-filled:before{content:\"\\ea0c\"}.glyph-alarm-bell-cancelled:before{content:\"\\ea0d\"}.glyph-alarm-bell-filled:before{content:\"\\ea0e\"}.glyph-alarm-bell:before{content:\"\\ea0f\"}.glyph-alarm-clock-filled:before{content:\"\\ea10\"}.glyph-alarm-clock:before{content:\"\\ea11\"}.glyph-alarm-filled:before{content:\"\\ea12\"}.glyph-alarm:before{content:\"\\ea13\"}.glyph-analyze:before{content:\"\\ea14\"}.glyph-anomaly-found:before{content:\"\\ea15\"}.glyph-anomaly:before{content:\"\\ea16\"}.glyph-app-menu:before{content:\"\\ea17\"}.glyph-apps:before{content:\"\\ea18\"}.glyph-arrow-down-right:before{content:\"\\ea19\"}.glyph-arrow-down:before{content:\"\\ea1a\"}.glyph-arrow-left:before{content:\"\\ea1b\"}.glyph-arrow-right-down:before{content:\"\\ea1c\"}.glyph-arrow-right:before{content:\"\\ea1d\"}.glyph-arrow-up:before{content:\"\\ea1e\"}.glyph-attach:before{content:\"\\ea1f\"}.glyph-attachment-upload:before{content:\"\\ea20\"}.glyph-audio-description1:before{content:\"\\ea21\"}.glyph-audio-description2:before{content:\"\\ea22\"}.glyph-audit-report:before{content:\"\\ea23\"}.glyph-average:before{content:\"\\ea24\"}.glyph-backup-filled:before{content:\"\\ea25\"}.glyph-backup:before{content:\"\\ea26\"}.glyph-bar-code:before{content:\"\\ea27\"}.glyph-barchart:before{content:\"\\ea28\"}.glyph-battery-check:before{content:\"\\ea29\"}.glyph-battery-empty-question:before{content:\"\\ea2a\"}.glyph-battery-empty:before{content:\"\\ea2b\"}.glyph-battery-exclamation:before{content:\"\\ea2c\"}.glyph-battery-full-check:before{content:\"\\ea2d\"}.glyph-battery-full:before{content:\"\\ea2e\"}.glyph-battery-half:before{content:\"\\ea2f\"}.glyph-battery-low:before{content:\"\\ea30\"}.glyph-battery-quarter:before{content:\"\\ea31\"}.glyph-battery-slash:before{content:\"\\ea32\"}.glyph-battery-three-quarter:before{content:\"\\ea33\"}.glyph-battery-xmark:before{content:\"\\ea34\"}.glyph-bezier-curve:before{content:\"\\ea35\"}.glyph-binoculars-filled:before{content:\"\\ea36\"}.glyph-binoculars:before{content:\"\\ea37\"}.glyph-blazor:before{content:\"\\ea38\"}.glyph-book:before{content:\"\\ea39\"}.glyph-bookmark-filled:before{content:\"\\ea3a\"}.glyph-bookmark:before{content:\"\\ea3b\"}.glyph-boundary-signals:before{content:\"\\ea3c\"}.glyph-building1-filled:before{content:\"\\ea3d\"}.glyph-building1:before{content:\"\\ea3e\"}.glyph-building2-filled:before{content:\"\\ea3f\"}.glyph-building2:before{content:\"\\ea40\"}.glyph-bulb-filled:before{content:\"\\ea41\"}.glyph-bulb:before{content:\"\\ea42\"}.glyph-calendar-filled:before{content:\"\\ea43\"}.glyph-calendar-settings:before{content:\"\\ea44\"}.glyph-calendar:before{content:\"\\ea45\"}.glyph-cancel:before{content:\"\\ea46\"}.glyph-cancelled:before{content:\"\\ea47\"}.glyph-capacity-filled:before{content:\"\\ea48\"}.glyph-capacity:before{content:\"\\ea49\"}.glyph-capture:before{content:\"\\ea4a\"}.glyph-car-filled:before{content:\"\\ea4b\"}.glyph-car:before{content:\"\\ea4c\"}.glyph-card-layout-filled:before{content:\"\\ea4d\"}.glyph-card-layout:before{content:\"\\ea4e\"}.glyph-chart-cursor:before{content:\"\\ea4f\"}.glyph-chart-curve-linear:before{content:\"\\ea50\"}.glyph-chart-curve-spline:before{content:\"\\ea51\"}.glyph-chart-curve-stepped:before{content:\"\\ea52\"}.glyph-chart-diagram-add:before{content:\"\\ea53\"}.glyph-chart-diagram:before{content:\"\\ea54\"}.glyph-chart-diagrams:before{content:\"\\ea55\"}.glyph-chart-labels-filled:before{content:\"\\ea56\"}.glyph-chart-labels:before{content:\"\\ea57\"}.glyph-check-in:before{content:\"\\ea58\"}.glyph-check-out:before{content:\"\\ea59\"}.glyph-checkbox-component-checked:before{content:\"\\ea5a\"}.glyph-checkbox-component-mixed:before{content:\"\\ea5b\"}.glyph-checkbox-component-unchecked:before{content:\"\\ea5c\"}.glyph-checkbox-filled:before{content:\"\\ea5d\"}.glyph-checkbox:before{content:\"\\ea5e\"}.glyph-checkboxes-filled:before{content:\"\\ea5f\"}.glyph-checkboxes:before{content:\"\\ea60\"}.glyph-chevron-down-small:before{content:\"\\ea61\"}.glyph-chevron-down:before{content:\"\\ea62\"}.glyph-chevron-left-small:before{content:\"\\ea63\"}.glyph-chevron-left:before{content:\"\\ea64\"}.glyph-chevron-right-small:before{content:\"\\ea65\"}.glyph-chevron-right:before{content:\"\\ea66\"}.glyph-chevron-up-small:before{content:\"\\ea67\"}.glyph-chevron-up:before{content:\"\\ea68\"}.glyph-circle-dot-filled:before{content:\"\\ea69\"}.glyph-circle-dot:before{content:\"\\ea6a\"}.glyph-circle-filled:before{content:\"\\ea6b\"}.glyph-circle-pause-filled:before{content:\"\\ea6c\"}.glyph-circle-pause:before{content:\"\\ea6d\"}.glyph-circle-play-filled:before{content:\"\\ea6e\"}.glyph-circle-play:before{content:\"\\ea6f\"}.glyph-circle-stop-filled:before{content:\"\\ea70\"}.glyph-circle-stop:before{content:\"\\ea71\"}.glyph-circle:before{content:\"\\ea72\"}.glyph-clear-filter-filled:before{content:\"\\ea73\"}.glyph-clear-filter:before{content:\"\\ea74\"}.glyph-clear:before{content:\"\\ea75\"}.glyph-clock-filled:before{content:\"\\ea76\"}.glyph-clock:before{content:\"\\ea77\"}.glyph-close-small:before{content:\"\\ea78\"}.glyph-close:before{content:\"\\ea79\"}.glyph-cloud-download-add-filled:before{content:\"\\ea7a\"}.glyph-cloud-download-add:before{content:\"\\ea7b\"}.glyph-cloud-download-filled:before{content:\"\\ea7c\"}.glyph-cloud-download-list-filled:before{content:\"\\ea7d\"}.glyph-cloud-download-list:before{content:\"\\ea7e\"}.glyph-cloud-download:before{content:\"\\ea7f\"}.glyph-cloud-filled:before{content:\"\\ea80\"}.glyph-cloud-new-filled:before{content:\"\\ea81\"}.glyph-cloud-new:before{content:\"\\ea82\"}.glyph-cloud-success-filled:before{content:\"\\ea83\"}.glyph-cloud-success:before{content:\"\\ea84\"}.glyph-cloud-upload-filled:before{content:\"\\ea85\"}.glyph-cloud-upload:before{content:\"\\ea86\"}.glyph-cloud:before{content:\"\\ea87\"}.glyph-code:before{content:\"\\ea88\"}.glyph-cogwheel-filled:before{content:\"\\ea89\"}.glyph-cogwheel:before{content:\"\\ea8a\"}.glyph-combine:before{content:\"\\ea8b\"}.glyph-compact-disc-filled:before{content:\"\\ea8c\"}.glyph-compact-disc:before{content:\"\\ea8d\"}.glyph-compound-block:before{content:\"\\ea8e\"}.glyph-configuration:before{content:\"\\ea8f\"}.glyph-configure-filled:before{content:\"\\ea90\"}.glyph-configure:before{content:\"\\ea91\"}.glyph-connected:before{content:\"\\ea92\"}.glyph-connector-chart-filled:before{content:\"\\ea93\"}.glyph-connector-chart:before{content:\"\\ea94\"}.glyph-connector-filled:before{content:\"\\ea95\"}.glyph-connector-hex-filled:before{content:\"\\ea96\"}.glyph-connector-hex:before{content:\"\\ea97\"}.glyph-connector-rect-filled:before{content:\"\\ea98\"}.glyph-connector-rect:before{content:\"\\ea99\"}.glyph-connector-rhomb-filled:before{content:\"\\ea9a\"}.glyph-connector-rhomb:before{content:\"\\ea9b\"}.glyph-connector:before{content:\"\\ea9c\"}.glyph-consistency-check:before{content:\"\\ea9d\"}.glyph-contact-details-filled:before{content:\"\\ea9e\"}.glyph-contact-details:before{content:\"\\ea9f\"}.glyph-context-menu:before{content:\"\\eaa0\"}.glyph-controlled-device:before{content:\"\\eaa1\"}.glyph-controller-device:before{content:\"\\eaa2\"}.glyph-copy:before{content:\"\\eaa3\"}.glyph-corner-arrow-up-left:before{content:\"\\eaa4\"}.glyph-couch-filled:before{content:\"\\eaa5\"}.glyph-couch:before{content:\"\\eaa6\"}.glyph-create-plant-filled:before{content:\"\\eaa7\"}.glyph-create-plant:before{content:\"\\eaa8\"}.glyph-cut:before{content:\"\\eaa9\"}.glyph-cycle:before{content:\"\\eaaa\"}.glyph-data-egress:before{content:\"\\eaab\"}.glyph-data-ingress-egress:before{content:\"\\eaac\"}.glyph-data-ingress:before{content:\"\\eaad\"}.glyph-database-filled:before{content:\"\\eaae\"}.glyph-database:before{content:\"\\eaaf\"}.glyph-details:before{content:\"\\eab0\"}.glyph-diagram-module-library:before{content:\"\\eab1\"}.glyph-diagram-module-new:before{content:\"\\eab2\"}.glyph-diagram-module:before{content:\"\\eab3\"}.glyph-diamond:before{content:\"\\eab4\"}.glyph-disconnected:before{content:\"\\eab5\"}.glyph-disk-filled:before{content:\"\\eab6\"}.glyph-disk-pen:before{content:\"\\eab7\"}.glyph-disk:before{content:\"\\eab8\"}.glyph-distribution:before{content:\"\\eab9\"}.glyph-doc-document:before{content:\"\\eaba\"}.glyph-document-bulk:before{content:\"\\eabb\"}.glyph-document-info:before{content:\"\\eabc\"}.glyph-document-link:before{content:\"\\eabd\"}.glyph-document-management:before{content:\"\\eabe\"}.glyph-document-reference:before{content:\"\\eabf\"}.glyph-document-settings:before{content:\"\\eac0\"}.glyph-document-success:before{content:\"\\eac1\"}.glyph-document:before{content:\"\\eac2\"}.glyph-double-check:before{content:\"\\eac3\"}.glyph-double-chevron-down:before{content:\"\\eac4\"}.glyph-double-chevron-left:before{content:\"\\eac5\"}.glyph-double-chevron-right:before{content:\"\\eac6\"}.glyph-double-chevron-up:before{content:\"\\eac7\"}.glyph-doublet-filled:before{content:\"\\eac8\"}.glyph-doublet:before{content:\"\\eac9\"}.glyph-download-add:before{content:\"\\eaca\"}.glyph-download-list:before{content:\"\\eacb\"}.glyph-download:before{content:\"\\eacc\"}.glyph-drop:before{content:\"\\eacd\"}.glyph-duplicate-document:before{content:\"\\eace\"}.glyph-duplicate:before{content:\"\\eacf\"}.glyph-e-mail-filled:before{content:\"\\ead0\"}.glyph-e-mail:before{content:\"\\ead1\"}.glyph-earth-filled:before{content:\"\\ead2\"}.glyph-earth:before{content:\"\\ead3\"}.glyph-edit-plant:before{content:\"\\ead4\"}.glyph-ellipse-arc:before{content:\"\\ead5\"}.glyph-ellipse-filled:before{content:\"\\ead6\"}.glyph-ellipse:before{content:\"\\ead7\"}.glyph-error-filled:before{content:\"\\ead8\"}.glyph-error:before{content:\"\\ead9\"}.glyph-explore-filled:before{content:\"\\eada\"}.glyph-explore:before{content:\"\\eadb\"}.glyph-export:before{content:\"\\eadc\"}.glyph-eye-cancelled-filled:before{content:\"\\eadd\"}.glyph-eye-cancelled:before{content:\"\\eade\"}.glyph-eye-filled:before{content:\"\\eadf\"}.glyph-eye:before{content:\"\\eae0\"}.glyph-factory-reset-filled:before{content:\"\\eae1\"}.glyph-factory-reset:before{content:\"\\eae2\"}.glyph-filter-filled:before{content:\"\\eae3\"}.glyph-filter-outline:before{content:\"\\eae4\"}.glyph-filter:before{content:\"\\eae5\"}.glyph-flag-filled:before{content:\"\\eae6\"}.glyph-flag:before{content:\"\\eae7\"}.glyph-folder-down-filled:before{content:\"\\eae8\"}.glyph-folder-down:before{content:\"\\eae9\"}.glyph-folder-filled:before{content:\"\\eaea\"}.glyph-folder-new-filled:before{content:\"\\eaeb\"}.glyph-folder-new-outline:before{content:\"\\eaec\"}.glyph-folder-new:before{content:\"\\eaed\"}.glyph-folder-open-filled:before{content:\"\\eaee\"}.glyph-folder-open-outline:before{content:\"\\eaef\"}.glyph-folder-open:before{content:\"\\eaf0\"}.glyph-folder-outline:before{content:\"\\eaf1\"}.glyph-folder-up-filled:before{content:\"\\eaf2\"}.glyph-folder-up:before{content:\"\\eaf3\"}.glyph-folder:before{content:\"\\eaf4\"}.glyph-full-screeen-exit:before{content:\"\\eaf5\"}.glyph-full-screeen:before{content:\"\\eaf6\"}.glyph-function-block-library:before{content:\"\\eaf7\"}.glyph-function-block-new:before{content:\"\\eaf8\"}.glyph-function-block:before{content:\"\\eaf9\"}.glyph-function-diagram-new:before{content:\"\\eafa\"}.glyph-function-diagram:before{content:\"\\eafb\"}.glyph-gauge-filled:before{content:\"\\eafc\"}.glyph-gauge:before{content:\"\\eafd\"}.glyph-gaugechart:before{content:\"\\eafe\"}.glyph-global-plant-filled:before{content:\"\\eaff\"}.glyph-global-plant:before{content:\"\\eb00\"}.glyph-globe-filled:before{content:\"\\eb01\"}.glyph-globe:before{content:\"\\eb02\"}.glyph-goto:before{content:\"\\eb03\"}.glyph-group:before{content:\"\\eb04\"}.glyph-hard-reset:before{content:\"\\eb05\"}.glyph-hardware-cabinet:before{content:\"\\eb06\"}.glyph-health-filled:before{content:\"\\eb07\"}.glyph-health:before{content:\"\\eb08\"}.glyph-heart-filled:before{content:\"\\eb09\"}.glyph-heart:before{content:\"\\eb0a\"}.glyph-hexagon-vertical-bars-database-filled:before{content:\"\\eb0b\"}.glyph-hexagon-vertical-bars-database:before{content:\"\\eb0c\"}.glyph-hexagon-vertical-bars-filled:before{content:\"\\eb0d\"}.glyph-hexagon-vertical-bars:before{content:\"\\eb0e\"}.glyph-hierarchy:before{content:\"\\eb0f\"}.glyph-highlight-filled:before{content:\"\\eb10\"}.glyph-highlight:before{content:\"\\eb11\"}.glyph-history-list:before{content:\"\\eb12\"}.glyph-history:before{content:\"\\eb13\"}.glyph-home-filled:before{content:\"\\eb14\"}.glyph-home:before{content:\"\\eb15\"}.glyph-hourglass:before{content:\"\\eb16\"}.glyph-image-filled:before{content:\"\\eb17\"}.glyph-image:before{content:\"\\eb18\"}.glyph-import:before{content:\"\\eb19\"}.glyph-info-feed:before{content:\"\\eb1a\"}.glyph-info-filled:before{content:\"\\eb1b\"}.glyph-info:before{content:\"\\eb1c\"}.glyph-ingestion-report:before{content:\"\\eb1d\"}.glyph-ingestion:before{content:\"\\eb1e\"}.glyph-ink-pen:before{content:\"\\eb1f\"}.glyph-inquiry-filled:before{content:\"\\eb20\"}.glyph-inquiry-mail:before{content:\"\\eb21\"}.glyph-inquiry:before{content:\"\\eb22\"}.glyph-item-details-filled:before{content:\"\\eb23\"}.glyph-item-details:before{content:\"\\eb24\"}.glyph-label-filled:before{content:\"\\eb25\"}.glyph-label:before{content:\"\\eb26\"}.glyph-language-filled:before{content:\"\\eb27\"}.glyph-language:before{content:\"\\eb28\"}.glyph-layers-filled:before{content:\"\\eb29\"}.glyph-layers:before{content:\"\\eb2a\"}.glyph-leaf:before{content:\"\\eb2b\"}.glyph-legal:before{content:\"\\eb2c\"}.glyph-library-new:before{content:\"\\eb2d\"}.glyph-library:before{content:\"\\eb2e\"}.glyph-license:before{content:\"\\eb2f\"}.glyph-light-dark:before{content:\"\\eb30\"}.glyph-line-diagonal:before{content:\"\\eb31\"}.glyph-link:before{content:\"\\eb32\"}.glyph-list:before{content:\"\\eb33\"}.glyph-live-schedule:before{content:\"\\eb34\"}.glyph-location-filled:before{content:\"\\eb35\"}.glyph-location-outline:before{content:\"\\eb36\"}.glyph-location:before{content:\"\\eb37\"}.glyph-lock-filled:before{content:\"\\eb38\"}.glyph-lock-key-filled:before{content:\"\\eb39\"}.glyph-lock-key:before{content:\"\\eb3a\"}.glyph-lock:before{content:\"\\eb3b\"}.glyph-log-in:before{content:\"\\eb3c\"}.glyph-log-out:before{content:\"\\eb3d\"}.glyph-log:before{content:\"\\eb3e\"}.glyph-logic-diagram:before{content:\"\\eb3f\"}.glyph-lower-limit:before{content:\"\\eb40\"}.glyph-mail-filled:before{content:\"\\eb41\"}.glyph-mail:before{content:\"\\eb42\"}.glyph-maintenance-documents:before{content:\"\\eb43\"}.glyph-maintenance-info:before{content:\"\\eb44\"}.glyph-maintenance-warning-filled:before{content:\"\\eb45\"}.glyph-maintenance-warning:before{content:\"\\eb46\"}.glyph-maintenance:before{content:\"\\eb47\"}.glyph-mandatory-done:before{content:\"\\eb48\"}.glyph-mandatory:before{content:\"\\eb49\"}.glyph-map:before{content:\"\\eb4a\"}.glyph-maximize:before{content:\"\\eb4b\"}.glyph-microphone-filled:before{content:\"\\eb4c\"}.glyph-microphone:before{content:\"\\eb4d\"}.glyph-minimize:before{content:\"\\eb4e\"}.glyph-minus:before{content:\"\\eb4f\"}.glyph-mix:before{content:\"\\eb50\"}.glyph-monitor-filled:before{content:\"\\eb51\"}.glyph-monitor-trend:before{content:\"\\eb52\"}.glyph-monitor:before{content:\"\\eb53\"}.glyph-monitoring-add:before{content:\"\\eb54\"}.glyph-monitoring:before{content:\"\\eb55\"}.glyph-monitorings:before{content:\"\\eb56\"}.glyph-moon-filled:before{content:\"\\eb57\"}.glyph-moon:before{content:\"\\eb58\"}.glyph-more-menu:before{content:\"\\eb59\"}.glyph-mouse-click-filled:before{content:\"\\eb5a\"}.glyph-mouse-click:before{content:\"\\eb5b\"}.glyph-mouse-select-filled:before{content:\"\\eb5c\"}.glyph-mouse-select:before{content:\"\\eb5d\"}.glyph-mp4-document:before{content:\"\\eb5e\"}.glyph-namur-check-function-filled:before{content:\"\\eb5f\"}.glyph-namur-check-function:before{content:\"\\eb60\"}.glyph-namur-failure-filled:before{content:\"\\eb61\"}.glyph-namur-failure:before{content:\"\\eb62\"}.glyph-namur-maintenance-required-filled:before{content:\"\\eb63\"}.glyph-namur-maintenance-required:before{content:\"\\eb64\"}.glyph-namur-ok-filled:before{content:\"\\eb65\"}.glyph-namur-ok:before{content:\"\\eb66\"}.glyph-namur-out-of-spec-filled:before{content:\"\\eb67\"}.glyph-namur-out-of-spec:before{content:\"\\eb68\"}.glyph-navigation-filled:before{content:\"\\eb69\"}.glyph-navigation-left:before{content:\"\\eb6a\"}.glyph-navigation-right:before{content:\"\\eb6b\"}.glyph-navigation:before{content:\"\\eb6c\"}.glyph-new-indicator-filled:before{content:\"\\eb6d\"}.glyph-new-indicator:before{content:\"\\eb6e\"}.glyph-no-filter-filled:before{content:\"\\eb6f\"}.glyph-no-filter:before{content:\"\\eb70\"}.glyph-no-image:before{content:\"\\eb71\"}.glyph-note-filled:before{content:\"\\eb72\"}.glyph-note:before{content:\"\\eb73\"}.glyph-notification-filled:before{content:\"\\eb74\"}.glyph-notification:before{content:\"\\eb75\"}.glyph-notifications-filled:before{content:\"\\eb76\"}.glyph-notifications:before{content:\"\\eb77\"}.glyph-ontology-filled:before{content:\"\\eb78\"}.glyph-ontology:before{content:\"\\eb79\"}.glyph-open-external:before{content:\"\\eb7a\"}.glyph-open-file-filled:before{content:\"\\eb7b\"}.glyph-open-file:before{content:\"\\eb7c\"}.glyph-operate-plant-filled:before{content:\"\\eb7d\"}.glyph-operate-plant:before{content:\"\\eb7e\"}.glyph-optimize:before{content:\"\\eb7f\"}.glyph-p-and-i-symbols:before{content:\"\\eb80\"}.glyph-p-i-diagram:before{content:\"\\eb81\"}.glyph-pan:before{content:\"\\eb82\"}.glyph-paste:before{content:\"\\eb83\"}.glyph-pause:before{content:\"\\eb84\"}.glyph-pc-tower-filled:before{content:\"\\eb85\"}.glyph-pc-tower:before{content:\"\\eb86\"}.glyph-pdf-document:before{content:\"\\eb87\"}.glyph-pen-filled:before{content:\"\\eb88\"}.glyph-pen:before{content:\"\\eb89\"}.glyph-phone-filled:before{content:\"\\eb8a\"}.glyph-phone:before{content:\"\\eb8b\"}.glyph-photo-camera-add:before{content:\"\\eb8c\"}.glyph-photo-camera-filled:before{content:\"\\eb8d\"}.glyph-photo-camera:before{content:\"\\eb8e\"}.glyph-photo-cameras:before{content:\"\\eb8f\"}.glyph-piechart-filled:before{content:\"\\eb90\"}.glyph-piechart:before{content:\"\\eb91\"}.glyph-pin-filled:before{content:\"\\eb92\"}.glyph-pin:before{content:\"\\eb93\"}.glyph-plant-filled:before{content:\"\\eb94\"}.glyph-plant-handbook-filled:before{content:\"\\eb95\"}.glyph-plant-handbook:before{content:\"\\eb96\"}.glyph-plant-outline:before{content:\"\\eb97\"}.glyph-plant-security:before{content:\"\\eb98\"}.glyph-plant-settings-filled:before{content:\"\\eb99\"}.glyph-plant-settings:before{content:\"\\eb9a\"}.glyph-plant-user-filled:before{content:\"\\eb9b\"}.glyph-plant-user:before{content:\"\\eb9c\"}.glyph-plant:before{content:\"\\eb9d\"}.glyph-plants-filled:before{content:\"\\eb9e\"}.glyph-plants:before{content:\"\\eb9f\"}.glyph-play-filled:before{content:\"\\eba0\"}.glyph-play-pause-filled:before{content:\"\\eba1\"}.glyph-play-pause:before{content:\"\\eba2\"}.glyph-play-stepwise-filled:before{content:\"\\eba3\"}.glyph-play-stepwise:before{content:\"\\eba4\"}.glyph-play:before{content:\"\\eba5\"}.glyph-plus-minus-times-divide:before{content:\"\\eba6\"}.glyph-plus:before{content:\"\\eba7\"}.glyph-point-up-filled:before{content:\"\\eba8\"}.glyph-point-up:before{content:\"\\eba9\"}.glyph-polar-plot:before{content:\"\\ebaa\"}.glyph-polygon-filled:before{content:\"\\ebab\"}.glyph-polygon-line:before{content:\"\\ebac\"}.glyph-polygon:before{content:\"\\ebad\"}.glyph-ppt-document:before{content:\"\\ebae\"}.glyph-print-filled:before{content:\"\\ebaf\"}.glyph-print:before{content:\"\\ebb0\"}.glyph-prio-high:before{content:\"\\ebb1\"}.glyph-prio-low:before{content:\"\\ebb2\"}.glyph-prio-middle:before{content:\"\\ebb3\"}.glyph-product-catalog:before{content:\"\\ebb4\"}.glyph-product-management:before{content:\"\\ebb5\"}.glyph-product:before{content:\"\\ebb6\"}.glyph-project-configuration:before{content:\"\\ebb7\"}.glyph-project-new:before{content:\"\\ebb8\"}.glyph-project-scenarios:before{content:\"\\ebb9\"}.glyph-project:before{content:\"\\ebba\"}.glyph-protocol:before{content:\"\\ebbb\"}.glyph-publish-document:before{content:\"\\ebbc\"}.glyph-publish:before{content:\"\\ebbd\"}.glyph-qr-code:before{content:\"\\ebbe\"}.glyph-quality-report:before{content:\"\\ebbf\"}.glyph-question-filled:before{content:\"\\ebc0\"}.glyph-question:before{content:\"\\ebc1\"}.glyph-radarchart:before{content:\"\\ebc2\"}.glyph-radio-waves-off:before{content:\"\\ebc3\"}.glyph-radio-waves:before{content:\"\\ebc4\"}.glyph-random-filled:before{content:\"\\ebc5\"}.glyph-random:before{content:\"\\ebc6\"}.glyph-reboot:before{content:\"\\ebc7\"}.glyph-rectangle-filled:before{content:\"\\ebc8\"}.glyph-rectangle:before{content:\"\\ebc9\"}.glyph-redo:before{content:\"\\ebca\"}.glyph-reference:before{content:\"\\ebcb\"}.glyph-refresh-cancelled:before{content:\"\\ebcc\"}.glyph-refresh:before{content:\"\\ebcd\"}.glyph-reload:before{content:\"\\ebce\"}.glyph-remove-eye-filled:before{content:\"\\ebcf\"}.glyph-remove-eye:before{content:\"\\ebd0\"}.glyph-rename:before{content:\"\\ebd1\"}.glyph-replace:before{content:\"\\ebd2\"}.glyph-report-barchart:before{content:\"\\ebd3\"}.glyph-report-linechart:before{content:\"\\ebd4\"}.glyph-report-text:before{content:\"\\ebd5\"}.glyph-reset:before{content:\"\\ebd6\"}.glyph-restore-backup-filled:before{content:\"\\ebd7\"}.glyph-restore-backup-pc:before{content:\"\\ebd8\"}.glyph-restore-backup:before{content:\"\\ebd9\"}.glyph-rhomb-filled:before{content:\"\\ebda\"}.glyph-rhomb:before{content:\"\\ebdb\"}.glyph-road-filled:before{content:\"\\ebdc\"}.glyph-road:before{content:\"\\ebdd\"}.glyph-rocket-filled:before{content:\"\\ebde\"}.glyph-rocket:before{content:\"\\ebdf\"}.glyph-route-target:before{content:\"\\ebe0\"}.glyph-route:before{content:\"\\ebe1\"}.glyph-scatterplot:before{content:\"\\ebe2\"}.glyph-scheduler-filled:before{content:\"\\ebe3\"}.glyph-scheduler:before{content:\"\\ebe4\"}.glyph-screen-filled:before{content:\"\\ebe5\"}.glyph-screen:before{content:\"\\ebe6\"}.glyph-screenshot-filled:before{content:\"\\ebe7\"}.glyph-screenshot:before{content:\"\\ebe8\"}.glyph-script-add:before{content:\"\\ebe9\"}.glyph-script:before{content:\"\\ebea\"}.glyph-scripts:before{content:\"\\ebeb\"}.glyph-search:before{content:\"\\ebec\"}.glyph-share-filled:before{content:\"\\ebed\"}.glyph-share:before{content:\"\\ebee\"}.glyph-shopping-cart-filled:before{content:\"\\ebef\"}.glyph-shopping-cart:before{content:\"\\ebf0\"}.glyph-shout-filled:before{content:\"\\ebf1\"}.glyph-shout:before{content:\"\\ebf2\"}.glyph-sign-language:before{content:\"\\ebf3\"}.glyph-signal-strength-0:before{content:\"\\ebf4\"}.glyph-signal-strength-1:before{content:\"\\ebf5\"}.glyph-signal-strength-2:before{content:\"\\ebf6\"}.glyph-signal-strength-3:before{content:\"\\ebf7\"}.glyph-signal-strength-4:before{content:\"\\ebf8\"}.glyph-signal-strength-5:before{content:\"\\ebf9\"}.glyph-signal-strength-6:before{content:\"\\ebfa\"}.glyph-signal-strength-7:before{content:\"\\ebfb\"}.glyph-signal-strength-8:before{content:\"\\ebfc\"}.glyph-simit-component:before{content:\"\\ebfd\"}.glyph-simit-macro-component-editor:before{content:\"\\ebfe\"}.glyph-simit-macro:before{content:\"\\ebff\"}.glyph-single-check:before{content:\"\\ec00\"}.glyph-skip-back-filled:before{content:\"\\ec01\"}.glyph-skip-back:before{content:\"\\ec02\"}.glyph-skip-filled:before{content:\"\\ec03\"}.glyph-skip:before{content:\"\\ec04\"}.glyph-snowflake:before{content:\"\\ec05\"}.glyph-sort-ascending:before{content:\"\\ec06\"}.glyph-sort-descending:before{content:\"\\ec07\"}.glyph-sort:before{content:\"\\ec08\"}.glyph-sound-loud-filled:before{content:\"\\ec09\"}.glyph-sound-loud:before{content:\"\\ec0a\"}.glyph-sound-mute-filled:before{content:\"\\ec0b\"}.glyph-sound-mute:before{content:\"\\ec0c\"}.glyph-sound-off-filled:before{content:\"\\ec0d\"}.glyph-sound-off:before{content:\"\\ec0e\"}.glyph-sound-quiet-filled:before{content:\"\\ec0f\"}.glyph-sound-quiet:before{content:\"\\ec10\"}.glyph-spatial:before{content:\"\\ec11\"}.glyph-split-horizontally:before{content:\"\\ec12\"}.glyph-split-vertically:before{content:\"\\ec13\"}.glyph-standby:before{content:\"\\ec14\"}.glyph-star-add-filled:before{content:\"\\ec15\"}.glyph-star-add:before{content:\"\\ec16\"}.glyph-star-cancelled-filled:before{content:\"\\ec17\"}.glyph-star-cancelled:before{content:\"\\ec18\"}.glyph-star-filled:before{content:\"\\ec19\"}.glyph-star-list-filled:before{content:\"\\ec1a\"}.glyph-star-list:before{content:\"\\ec1b\"}.glyph-star:before{content:\"\\ec1c\"}.glyph-start-data-analysis:before{content:\"\\ec1d\"}.glyph-steering-user-filled:before{content:\"\\ec1e\"}.glyph-steering-user:before{content:\"\\ec1f\"}.glyph-steering:before{content:\"\\ec20\"}.glyph-stethoscope:before{content:\"\\ec21\"}.glyph-stop-filled:before{content:\"\\ec22\"}.glyph-stop:before{content:\"\\ec23\"}.glyph-success-filled:before{content:\"\\ec24\"}.glyph-success:before{content:\"\\ec25\"}.glyph-sun-filled:before{content:\"\\ec26\"}.glyph-sun:before{content:\"\\ec27\"}.glyph-support:before{content:\"\\ec28\"}.glyph-surveillance-filled:before{content:\"\\ec29\"}.glyph-surveillance:before{content:\"\\ec2a\"}.glyph-svg-document:before{content:\"\\ec2b\"}.glyph-swap-left-right:before{content:\"\\ec2c\"}.glyph-switch-slider:before{content:\"\\ec2d\"}.glyph-table-columns:before{content:\"\\ec2e\"}.glyph-table-rows:before{content:\"\\ec2f\"}.glyph-table-settings:before{content:\"\\ec30\"}.glyph-table:before{content:\"\\ec31\"}.glyph-tag-filled:before{content:\"\\ec32\"}.glyph-tag-plus-filled:before{content:\"\\ec33\"}.glyph-tag-plus:before{content:\"\\ec34\"}.glyph-tag:before{content:\"\\ec35\"}.glyph-tasks-all:before{content:\"\\ec36\"}.glyph-tasks-done:before{content:\"\\ec37\"}.glyph-tasks-open:before{content:\"\\ec38\"}.glyph-text-circle-rectangle-filled:before{content:\"\\ec39\"}.glyph-text-circle-rectangle:before{content:\"\\ec3a\"}.glyph-text-document:before{content:\"\\ec3b\"}.glyph-text:before{content:\"\\ec3c\"}.glyph-threshold-cancelled:before{content:\"\\ec3d\"}.glyph-threshold-off:before{content:\"\\ec3e\"}.glyph-threshold-on:before{content:\"\\ec3f\"}.glyph-to-be-published:before{content:\"\\ec40\"}.glyph-to-search:before{content:\"\\ec41\"}.glyph-topic-filled:before{content:\"\\ec42\"}.glyph-topic:before{content:\"\\ec43\"}.glyph-touch-filled:before{content:\"\\ec44\"}.glyph-touch:before{content:\"\\ec45\"}.glyph-trashcan-filled:before{content:\"\\ec46\"}.glyph-trashcan:before{content:\"\\ec47\"}.glyph-tree:before{content:\"\\ec48\"}.glyph-trend:before{content:\"\\ec49\"}.glyph-triangle-filled:before{content:\"\\ec4a\"}.glyph-triangle:before{content:\"\\ec4b\"}.glyph-truck-filled:before{content:\"\\ec4c\"}.glyph-truck:before{content:\"\\ec4d\"}.glyph-tulip-filled:before{content:\"\\ec4e\"}.glyph-tulip:before{content:\"\\ec4f\"}.glyph-txt-document:before{content:\"\\ec50\"}.glyph-undo:before{content:\"\\ec51\"}.glyph-ungroup:before{content:\"\\ec52\"}.glyph-unlock-filled:before{content:\"\\ec53\"}.glyph-unlock-plant-filled:before{content:\"\\ec54\"}.glyph-unlock-plant:before{content:\"\\ec55\"}.glyph-unlock:before{content:\"\\ec56\"}.glyph-upload-document-note:before{content:\"\\ec57\"}.glyph-upload-success:before{content:\"\\ec58\"}.glyph-upload:before{content:\"\\ec59\"}.glyph-upper-limit:before{content:\"\\ec5a\"}.glyph-user-check-filled:before{content:\"\\ec5b\"}.glyph-user-check:before{content:\"\\ec5c\"}.glyph-user-filled:before{content:\"\\ec5d\"}.glyph-user-management-filled:before{content:\"\\ec5e\"}.glyph-user-management:before{content:\"\\ec5f\"}.glyph-user-profile-filled:before{content:\"\\ec60\"}.glyph-user-profile:before{content:\"\\ec61\"}.glyph-user-settings-filled:before{content:\"\\ec62\"}.glyph-user-settings:before{content:\"\\ec63\"}.glyph-user:before{content:\"\\ec64\"}.glyph-validate:before{content:\"\\ec65\"}.glyph-vdi-folder:before{content:\"\\ec66\"}.glyph-version-history:before{content:\"\\ec67\"}.glyph-video-file-filled:before{content:\"\\ec68\"}.glyph-video-file:before{content:\"\\ec69\"}.glyph-warning-filled:before{content:\"\\ec6a\"}.glyph-warning-rhomb-filled:before{content:\"\\ec6b\"}.glyph-warning-rhomb:before{content:\"\\ec6c\"}.glyph-warning:before{content:\"\\ec6d\"}.glyph-water-bathing:before{content:\"\\ec6e\"}.glyph-water-fish:before{content:\"\\ec6f\"}.glyph-water-sunbathing:before{content:\"\\ec70\"}.glyph-waveform:before{content:\"\\ec71\"}.glyph-webcam-filled:before{content:\"\\ec72\"}.glyph-webcam:before{content:\"\\ec73\"}.glyph-wlan-off:before{content:\"\\ec74\"}.glyph-wlan-strength-0:before{content:\"\\ec75\"}.glyph-wlan-strength-1:before{content:\"\\ec76\"}.glyph-wlan-strength-2:before{content:\"\\ec77\"}.glyph-wlan-strength-3:before{content:\"\\ec78\"}.glyph-work-case-filled:before{content:\"\\ec79\"}.glyph-work-case:before{content:\"\\ec7a\"}.glyph-x-axis-settings:before{content:\"\\ec7b\"}.glyph-xls-document:before{content:\"\\ec7c\"}.glyph-xml-document:before{content:\"\\ec7d\"}.glyph-y-axis-settings:before{content:\"\\ec7e\"}.glyph-youtube-filled:before{content:\"\\ec7f\"}.glyph-youtube:before{content:\"\\ec80\"}.glyph-zoom-in:before{content:\"\\ec81\"}.glyph-zoom-out:before{content:\"\\ec82\"}.glyph-zoom-selection:before{content:\"\\ec83\"}:host{display:inline-flex;height:1.5rem;width:1.5rem}:host i{color:inherit;transition:color 150ms}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container>svg{height:1.5rem;width:1.5rem}:host .svg-container>svg [fill]{fill:var(--theme-color-std-text)}:host .skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}:host .skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{100%{transform:translateX(100%)}}:host(.size-12){height:0.75rem;width:0.75rem}:host(.size-12) .svg-container>svg{height:0.75rem;width:0.75rem}:host(.size-16){height:1rem;width:1rem}:host(.size-16) .svg-container>svg{height:1rem;width:1rem}:host(.size-32){height:2rem;width:2rem}:host(.size-32) .svg-container>svg{height:2rem;width:2rem}";
+const iconCss = ".glyph{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"ix-icons\";font-size:1.5rem;font-weight:500}.glyph-lg{font-size:1.3333333333em;line-height:0.75em;vertical-align:-15%}.glyph-2x{font-size:2em}.glyph-3x{font-size:3em}.glyph-4x{font-size:4em}.glyph-5x{font-size:5em}.glyph-fw{width:1.2857142857em;text-align:center}.glyph-12{font-size:0.75rem}.glyph-16{font-size:1rem}.glyph-24{font-size:1.5rem}.glyph-32{font-size:2rem}.glyph-about-filled:before{content:\"\\ea01\"}.glyph-about:before{content:\"\\ea02\"}.glyph-add-application:before{content:\"\\ea03\"}.glyph-add-circle-filled:before{content:\"\\ea04\"}.glyph-add-circle:before{content:\"\\ea05\"}.glyph-add-document-note:before{content:\"\\ea06\"}.glyph-add-eye-filled:before{content:\"\\ea07\"}.glyph-add-eye:before{content:\"\\ea08\"}.glyph-add-task-list:before{content:\"\\ea09\"}.glyph-add-task:before{content:\"\\ea0a\"}.glyph-add-user-filled:before{content:\"\\ea0b\"}.glyph-add-user:before{content:\"\\ea0c\"}.glyph-add:before{content:\"\\ea0d\"}.glyph-ai:before{content:\"\\ea0e\"}.glyph-alarm-bell-cancelled-filled:before{content:\"\\ea0f\"}.glyph-alarm-bell-cancelled:before{content:\"\\ea10\"}.glyph-alarm-bell-filled:before{content:\"\\ea11\"}.glyph-alarm-bell:before{content:\"\\ea12\"}.glyph-alarm-clock-filled:before{content:\"\\ea13\"}.glyph-alarm-clock:before{content:\"\\ea14\"}.glyph-alarm-filled:before{content:\"\\ea15\"}.glyph-alarm:before{content:\"\\ea16\"}.glyph-analyze:before{content:\"\\ea17\"}.glyph-anomaly-found:before{content:\"\\ea18\"}.glyph-anomaly:before{content:\"\\ea19\"}.glyph-app-menu:before{content:\"\\ea1a\"}.glyph-application-screen:before{content:\"\\ea1b\"}.glyph-applications:before{content:\"\\ea1c\"}.glyph-apps:before{content:\"\\ea1d\"}.glyph-arrow-down-right:before{content:\"\\ea1e\"}.glyph-arrow-down:before{content:\"\\ea1f\"}.glyph-arrow-left:before{content:\"\\ea20\"}.glyph-arrow-right-down:before{content:\"\\ea21\"}.glyph-arrow-right:before{content:\"\\ea22\"}.glyph-arrow-up:before{content:\"\\ea23\"}.glyph-attach:before{content:\"\\ea24\"}.glyph-attachment-upload:before{content:\"\\ea25\"}.glyph-audio-description1:before{content:\"\\ea26\"}.glyph-audio-description2:before{content:\"\\ea27\"}.glyph-audit-report:before{content:\"\\ea28\"}.glyph-average:before{content:\"\\ea29\"}.glyph-backup-filled:before{content:\"\\ea2a\"}.glyph-backup:before{content:\"\\ea2b\"}.glyph-bar-code:before{content:\"\\ea2c\"}.glyph-barchart:before{content:\"\\ea2d\"}.glyph-battery-check:before{content:\"\\ea2e\"}.glyph-battery-empty-question:before{content:\"\\ea2f\"}.glyph-battery-empty:before{content:\"\\ea30\"}.glyph-battery-exclamation:before{content:\"\\ea31\"}.glyph-battery-full-check:before{content:\"\\ea32\"}.glyph-battery-full:before{content:\"\\ea33\"}.glyph-battery-half:before{content:\"\\ea34\"}.glyph-battery-low:before{content:\"\\ea35\"}.glyph-battery-quarter:before{content:\"\\ea36\"}.glyph-battery-slash:before{content:\"\\ea37\"}.glyph-battery-three-quarter:before{content:\"\\ea38\"}.glyph-battery-xmark:before{content:\"\\ea39\"}.glyph-bezier-curve:before{content:\"\\ea3a\"}.glyph-binoculars-filled:before{content:\"\\ea3b\"}.glyph-binoculars:before{content:\"\\ea3c\"}.glyph-blazor:before{content:\"\\ea3d\"}.glyph-book:before{content:\"\\ea3e\"}.glyph-bookmark-filled:before{content:\"\\ea3f\"}.glyph-bookmark:before{content:\"\\ea40\"}.glyph-boundary-signals:before{content:\"\\ea41\"}.glyph-building1-filled:before{content:\"\\ea42\"}.glyph-building1:before{content:\"\\ea43\"}.glyph-building2-filled:before{content:\"\\ea44\"}.glyph-building2:before{content:\"\\ea45\"}.glyph-bulb-filled:before{content:\"\\ea46\"}.glyph-bulb:before{content:\"\\ea47\"}.glyph-calendar-filled:before{content:\"\\ea48\"}.glyph-calendar-settings:before{content:\"\\ea49\"}.glyph-calendar:before{content:\"\\ea4a\"}.glyph-cancel:before{content:\"\\ea4b\"}.glyph-cancelled:before{content:\"\\ea4c\"}.glyph-capacity-filled:before{content:\"\\ea4d\"}.glyph-capacity:before{content:\"\\ea4e\"}.glyph-capture:before{content:\"\\ea4f\"}.glyph-car-filled:before{content:\"\\ea50\"}.glyph-car:before{content:\"\\ea51\"}.glyph-card-layout-filled:before{content:\"\\ea52\"}.glyph-card-layout:before{content:\"\\ea53\"}.glyph-certificate-error-filled:before{content:\"\\ea54\"}.glyph-certificate-error:before{content:\"\\ea55\"}.glyph-certificate-exclamation-filled:before{content:\"\\ea56\"}.glyph-certificate-exclamation:before{content:\"\\ea57\"}.glyph-certificate-success-filled:before{content:\"\\ea58\"}.glyph-certificate-success:before{content:\"\\ea59\"}.glyph-chart-cursor:before{content:\"\\ea5a\"}.glyph-chart-curve-linear:before{content:\"\\ea5b\"}.glyph-chart-curve-spline:before{content:\"\\ea5c\"}.glyph-chart-curve-stepped:before{content:\"\\ea5d\"}.glyph-chart-diagram-add:before{content:\"\\ea5e\"}.glyph-chart-diagram:before{content:\"\\ea5f\"}.glyph-chart-diagrams:before{content:\"\\ea60\"}.glyph-chart-labels-filled:before{content:\"\\ea61\"}.glyph-chart-labels:before{content:\"\\ea62\"}.glyph-check-in:before{content:\"\\ea63\"}.glyph-check-out:before{content:\"\\ea64\"}.glyph-checkbox-component-checked:before{content:\"\\ea65\"}.glyph-checkbox-component-mixed:before{content:\"\\ea66\"}.glyph-checkbox-component-unchecked:before{content:\"\\ea67\"}.glyph-checkbox-filled:before{content:\"\\ea68\"}.glyph-checkbox:before{content:\"\\ea69\"}.glyph-checkboxes-filled:before{content:\"\\ea6a\"}.glyph-checkboxes:before{content:\"\\ea6b\"}.glyph-chevron-down-small:before{content:\"\\ea6c\"}.glyph-chevron-down:before{content:\"\\ea6d\"}.glyph-chevron-left-small:before{content:\"\\ea6e\"}.glyph-chevron-left:before{content:\"\\ea6f\"}.glyph-chevron-right-small:before{content:\"\\ea70\"}.glyph-chevron-right:before{content:\"\\ea71\"}.glyph-chevron-up-small:before{content:\"\\ea72\"}.glyph-chevron-up:before{content:\"\\ea73\"}.glyph-circle-dot-filled:before{content:\"\\ea74\"}.glyph-circle-dot:before{content:\"\\ea75\"}.glyph-circle-filled:before{content:\"\\ea76\"}.glyph-circle-pause-filled:before{content:\"\\ea77\"}.glyph-circle-pause:before{content:\"\\ea78\"}.glyph-circle-play-filled:before{content:\"\\ea79\"}.glyph-circle-play:before{content:\"\\ea7a\"}.glyph-circle-stop-filled:before{content:\"\\ea7b\"}.glyph-circle-stop:before{content:\"\\ea7c\"}.glyph-circle:before{content:\"\\ea7d\"}.glyph-clear-filter-filled:before{content:\"\\ea7e\"}.glyph-clear-filter:before{content:\"\\ea7f\"}.glyph-clear:before{content:\"\\ea80\"}.glyph-clock-filled:before{content:\"\\ea81\"}.glyph-clock:before{content:\"\\ea82\"}.glyph-close-small:before{content:\"\\ea83\"}.glyph-close:before{content:\"\\ea84\"}.glyph-cloud-download-add-filled:before{content:\"\\ea85\"}.glyph-cloud-download-add:before{content:\"\\ea86\"}.glyph-cloud-download-filled:before{content:\"\\ea87\"}.glyph-cloud-download-list-filled:before{content:\"\\ea88\"}.glyph-cloud-download-list:before{content:\"\\ea89\"}.glyph-cloud-download:before{content:\"\\ea8a\"}.glyph-cloud-filled:before{content:\"\\ea8b\"}.glyph-cloud-new-filled:before{content:\"\\ea8c\"}.glyph-cloud-new:before{content:\"\\ea8d\"}.glyph-cloud-success-filled:before{content:\"\\ea8e\"}.glyph-cloud-success:before{content:\"\\ea8f\"}.glyph-cloud-upload-filled:before{content:\"\\ea90\"}.glyph-cloud-upload:before{content:\"\\ea91\"}.glyph-cloud:before{content:\"\\ea92\"}.glyph-code:before{content:\"\\ea93\"}.glyph-coffee-empty-filled:before{content:\"\\ea94\"}.glyph-coffee-empty:before{content:\"\\ea95\"}.glyph-coffee-filled:before{content:\"\\ea96\"}.glyph-coffee:before{content:\"\\ea97\"}.glyph-cogwheel-filled:before{content:\"\\ea98\"}.glyph-cogwheel:before{content:\"\\ea99\"}.glyph-combine:before{content:\"\\ea9a\"}.glyph-compact-disc-filled:before{content:\"\\ea9b\"}.glyph-compact-disc:before{content:\"\\ea9c\"}.glyph-compound-block:before{content:\"\\ea9d\"}.glyph-configuration:before{content:\"\\ea9e\"}.glyph-configure-filled:before{content:\"\\ea9f\"}.glyph-configure:before{content:\"\\eaa0\"}.glyph-connected:before{content:\"\\eaa1\"}.glyph-connector-chart-filled:before{content:\"\\eaa2\"}.glyph-connector-chart:before{content:\"\\eaa3\"}.glyph-connector-filled:before{content:\"\\eaa4\"}.glyph-connector-hex-filled:before{content:\"\\eaa5\"}.glyph-connector-hex:before{content:\"\\eaa6\"}.glyph-connector-rect-filled:before{content:\"\\eaa7\"}.glyph-connector-rect:before{content:\"\\eaa8\"}.glyph-connector-rhomb-filled:before{content:\"\\eaa9\"}.glyph-connector-rhomb:before{content:\"\\eaaa\"}.glyph-connector:before{content:\"\\eaab\"}.glyph-consistency-check:before{content:\"\\eaac\"}.glyph-contact-details-filled:before{content:\"\\eaad\"}.glyph-contact-details:before{content:\"\\eaae\"}.glyph-context-menu:before{content:\"\\eaaf\"}.glyph-controlled-device:before{content:\"\\eab0\"}.glyph-controller-device:before{content:\"\\eab1\"}.glyph-copy:before{content:\"\\eab2\"}.glyph-corner-arrow-up-left:before{content:\"\\eab3\"}.glyph-couch-filled:before{content:\"\\eab4\"}.glyph-couch:before{content:\"\\eab5\"}.glyph-create-plant-filled:before{content:\"\\eab6\"}.glyph-create-plant:before{content:\"\\eab7\"}.glyph-cut:before{content:\"\\eab8\"}.glyph-cycle:before{content:\"\\eab9\"}.glyph-data-egress:before{content:\"\\eaba\"}.glyph-data-ingress-egress:before{content:\"\\eabb\"}.glyph-data-ingress:before{content:\"\\eabc\"}.glyph-database-filled:before{content:\"\\eabd\"}.glyph-database:before{content:\"\\eabe\"}.glyph-details:before{content:\"\\eabf\"}.glyph-diagram-module-library:before{content:\"\\eac0\"}.glyph-diagram-module-new:before{content:\"\\eac1\"}.glyph-diagram-module:before{content:\"\\eac2\"}.glyph-diamond:before{content:\"\\eac3\"}.glyph-disconnected:before{content:\"\\eac4\"}.glyph-disk-filled:before{content:\"\\eac5\"}.glyph-disk-pen:before{content:\"\\eac6\"}.glyph-disk:before{content:\"\\eac7\"}.glyph-distribution:before{content:\"\\eac8\"}.glyph-doc-document:before{content:\"\\eac9\"}.glyph-document-bulk:before{content:\"\\eaca\"}.glyph-document-info:before{content:\"\\eacb\"}.glyph-document-link:before{content:\"\\eacc\"}.glyph-document-management:before{content:\"\\eacd\"}.glyph-document-reference:before{content:\"\\eace\"}.glyph-document-settings:before{content:\"\\eacf\"}.glyph-document-success:before{content:\"\\ead0\"}.glyph-document:before{content:\"\\ead1\"}.glyph-double-check:before{content:\"\\ead2\"}.glyph-double-chevron-down:before{content:\"\\ead3\"}.glyph-double-chevron-left:before{content:\"\\ead4\"}.glyph-double-chevron-right:before{content:\"\\ead5\"}.glyph-double-chevron-up:before{content:\"\\ead6\"}.glyph-doublet-filled:before{content:\"\\ead7\"}.glyph-doublet:before{content:\"\\ead8\"}.glyph-download-add:before{content:\"\\ead9\"}.glyph-download-list:before{content:\"\\eada\"}.glyph-download:before{content:\"\\eadb\"}.glyph-drop:before{content:\"\\eadc\"}.glyph-duplicate-document:before{content:\"\\eadd\"}.glyph-duplicate:before{content:\"\\eade\"}.glyph-e-mail-filled:before{content:\"\\eadf\"}.glyph-e-mail:before{content:\"\\eae0\"}.glyph-earth-filled:before{content:\"\\eae1\"}.glyph-earth:before{content:\"\\eae2\"}.glyph-edit-plant:before{content:\"\\eae3\"}.glyph-electrical-energy-filled:before{content:\"\\eae4\"}.glyph-electrical-energy:before{content:\"\\eae5\"}.glyph-ellipse-arc:before{content:\"\\eae6\"}.glyph-ellipse-filled:before{content:\"\\eae7\"}.glyph-ellipse:before{content:\"\\eae8\"}.glyph-error-filled:before{content:\"\\eae9\"}.glyph-error:before{content:\"\\eaea\"}.glyph-explore-filled:before{content:\"\\eaeb\"}.glyph-explore:before{content:\"\\eaec\"}.glyph-export:before{content:\"\\eaed\"}.glyph-eye-cancelled-filled:before{content:\"\\eaee\"}.glyph-eye-cancelled:before{content:\"\\eaef\"}.glyph-eye-filled:before{content:\"\\eaf0\"}.glyph-eye:before{content:\"\\eaf1\"}.glyph-factory-reset-filled:before{content:\"\\eaf2\"}.glyph-factory-reset:before{content:\"\\eaf3\"}.glyph-filter-filled:before{content:\"\\eaf4\"}.glyph-filter-outline:before{content:\"\\eaf5\"}.glyph-filter:before{content:\"\\eaf6\"}.glyph-flag-filled:before{content:\"\\eaf7\"}.glyph-flag:before{content:\"\\eaf8\"}.glyph-folder-down-filled:before{content:\"\\eaf9\"}.glyph-folder-down:before{content:\"\\eafa\"}.glyph-folder-filled:before{content:\"\\eafb\"}.glyph-folder-new-filled:before{content:\"\\eafc\"}.glyph-folder-new-outline:before{content:\"\\eafd\"}.glyph-folder-new:before{content:\"\\eafe\"}.glyph-folder-open-filled:before{content:\"\\eaff\"}.glyph-folder-open-outline:before{content:\"\\eb00\"}.glyph-folder-open:before{content:\"\\eb01\"}.glyph-folder-outline:before{content:\"\\eb02\"}.glyph-folder-up-filled:before{content:\"\\eb03\"}.glyph-folder-up:before{content:\"\\eb04\"}.glyph-folder:before{content:\"\\eb05\"}.glyph-full-screeen-exit:before{content:\"\\eb06\"}.glyph-full-screeen:before{content:\"\\eb07\"}.glyph-function-block-library:before{content:\"\\eb08\"}.glyph-function-block-new:before{content:\"\\eb09\"}.glyph-function-block:before{content:\"\\eb0a\"}.glyph-function-diagram-new:before{content:\"\\eb0b\"}.glyph-function-diagram:before{content:\"\\eb0c\"}.glyph-gauge-filled:before{content:\"\\eb0d\"}.glyph-gauge:before{content:\"\\eb0e\"}.glyph-gaugechart:before{content:\"\\eb0f\"}.glyph-global-plant-filled:before{content:\"\\eb10\"}.glyph-global-plant:before{content:\"\\eb11\"}.glyph-globe-filled:before{content:\"\\eb12\"}.glyph-globe:before{content:\"\\eb13\"}.glyph-goto:before{content:\"\\eb14\"}.glyph-group:before{content:\"\\eb15\"}.glyph-hard-reset:before{content:\"\\eb16\"}.glyph-hardware-cabinet:before{content:\"\\eb17\"}.glyph-health-filled:before{content:\"\\eb18\"}.glyph-health:before{content:\"\\eb19\"}.glyph-heart-filled:before{content:\"\\eb1a\"}.glyph-heart:before{content:\"\\eb1b\"}.glyph-hexagon-vertical-bars-database-filled:before{content:\"\\eb1c\"}.glyph-hexagon-vertical-bars-database:before{content:\"\\eb1d\"}.glyph-hexagon-vertical-bars-filled:before{content:\"\\eb1e\"}.glyph-hexagon-vertical-bars:before{content:\"\\eb1f\"}.glyph-hierarchy:before{content:\"\\eb20\"}.glyph-highlight-filled:before{content:\"\\eb21\"}.glyph-highlight:before{content:\"\\eb22\"}.glyph-history-list:before{content:\"\\eb23\"}.glyph-history:before{content:\"\\eb24\"}.glyph-home-filled:before{content:\"\\eb25\"}.glyph-home:before{content:\"\\eb26\"}.glyph-hourglass:before{content:\"\\eb27\"}.glyph-image-filled:before{content:\"\\eb28\"}.glyph-image:before{content:\"\\eb29\"}.glyph-import:before{content:\"\\eb2a\"}.glyph-info-feed:before{content:\"\\eb2b\"}.glyph-info-filled:before{content:\"\\eb2c\"}.glyph-info:before{content:\"\\eb2d\"}.glyph-ingestion-report:before{content:\"\\eb2e\"}.glyph-ingestion:before{content:\"\\eb2f\"}.glyph-ink-pen:before{content:\"\\eb30\"}.glyph-inquiry-filled:before{content:\"\\eb31\"}.glyph-inquiry-mail:before{content:\"\\eb32\"}.glyph-inquiry:before{content:\"\\eb33\"}.glyph-item-details-filled:before{content:\"\\eb34\"}.glyph-item-details:before{content:\"\\eb35\"}.glyph-label-filled:before{content:\"\\eb36\"}.glyph-label:before{content:\"\\eb37\"}.glyph-language-filled:before{content:\"\\eb38\"}.glyph-language:before{content:\"\\eb39\"}.glyph-layers-filled:before{content:\"\\eb3a\"}.glyph-layers:before{content:\"\\eb3b\"}.glyph-leaf:before{content:\"\\eb3c\"}.glyph-legal:before{content:\"\\eb3d\"}.glyph-library-new:before{content:\"\\eb3e\"}.glyph-library:before{content:\"\\eb3f\"}.glyph-license:before{content:\"\\eb40\"}.glyph-light-dark:before{content:\"\\eb41\"}.glyph-line-diagonal:before{content:\"\\eb42\"}.glyph-link:before{content:\"\\eb43\"}.glyph-list:before{content:\"\\eb44\"}.glyph-live-schedule:before{content:\"\\eb45\"}.glyph-location-filled:before{content:\"\\eb46\"}.glyph-location-outline:before{content:\"\\eb47\"}.glyph-location:before{content:\"\\eb48\"}.glyph-lock-filled:before{content:\"\\eb49\"}.glyph-lock-key-filled:before{content:\"\\eb4a\"}.glyph-lock-key:before{content:\"\\eb4b\"}.glyph-lock:before{content:\"\\eb4c\"}.glyph-log-in:before{content:\"\\eb4d\"}.glyph-log-out:before{content:\"\\eb4e\"}.glyph-log:before{content:\"\\eb4f\"}.glyph-logic-diagram:before{content:\"\\eb50\"}.glyph-lower-limit:before{content:\"\\eb51\"}.glyph-mail-filled:before{content:\"\\eb52\"}.glyph-mail:before{content:\"\\eb53\"}.glyph-maintenance-documents:before{content:\"\\eb54\"}.glyph-maintenance-info:before{content:\"\\eb55\"}.glyph-maintenance-warning-filled:before{content:\"\\eb56\"}.glyph-maintenance-warning:before{content:\"\\eb57\"}.glyph-maintenance:before{content:\"\\eb58\"}.glyph-mandatory-done:before{content:\"\\eb59\"}.glyph-mandatory:before{content:\"\\eb5a\"}.glyph-map:before{content:\"\\eb5b\"}.glyph-maximize:before{content:\"\\eb5c\"}.glyph-microphone-filled:before{content:\"\\eb5d\"}.glyph-microphone:before{content:\"\\eb5e\"}.glyph-minimize:before{content:\"\\eb5f\"}.glyph-minus:before{content:\"\\eb60\"}.glyph-mix:before{content:\"\\eb61\"}.glyph-monitor-filled:before{content:\"\\eb62\"}.glyph-monitor-trend:before{content:\"\\eb63\"}.glyph-monitor:before{content:\"\\eb64\"}.glyph-monitoring-add:before{content:\"\\eb65\"}.glyph-monitoring:before{content:\"\\eb66\"}.glyph-monitorings:before{content:\"\\eb67\"}.glyph-moon-filled:before{content:\"\\eb68\"}.glyph-moon:before{content:\"\\eb69\"}.glyph-more-menu:before{content:\"\\eb6a\"}.glyph-mouse-click-filled:before{content:\"\\eb6b\"}.glyph-mouse-click:before{content:\"\\eb6c\"}.glyph-mouse-select-filled:before{content:\"\\eb6d\"}.glyph-mouse-select:before{content:\"\\eb6e\"}.glyph-mp4-document:before{content:\"\\eb6f\"}.glyph-namur-check-function-filled:before{content:\"\\eb70\"}.glyph-namur-check-function:before{content:\"\\eb71\"}.glyph-namur-failure-filled:before{content:\"\\eb72\"}.glyph-namur-failure:before{content:\"\\eb73\"}.glyph-namur-maintenance-required-filled:before{content:\"\\eb74\"}.glyph-namur-maintenance-required:before{content:\"\\eb75\"}.glyph-namur-ok-filled:before{content:\"\\eb76\"}.glyph-namur-ok:before{content:\"\\eb77\"}.glyph-namur-out-of-spec-filled:before{content:\"\\eb78\"}.glyph-namur-out-of-spec:before{content:\"\\eb79\"}.glyph-navigation-filled:before{content:\"\\eb7a\"}.glyph-navigation-left:before{content:\"\\eb7b\"}.glyph-navigation-right:before{content:\"\\eb7c\"}.glyph-navigation:before{content:\"\\eb7d\"}.glyph-new-indicator-filled:before{content:\"\\eb7e\"}.glyph-new-indicator:before{content:\"\\eb7f\"}.glyph-no-filter-filled:before{content:\"\\eb80\"}.glyph-no-filter:before{content:\"\\eb81\"}.glyph-no-image:before{content:\"\\eb82\"}.glyph-note-filled:before{content:\"\\eb83\"}.glyph-note:before{content:\"\\eb84\"}.glyph-notification-filled:before{content:\"\\eb85\"}.glyph-notification:before{content:\"\\eb86\"}.glyph-notifications-filled:before{content:\"\\eb87\"}.glyph-notifications:before{content:\"\\eb88\"}.glyph-ontology-filled:before{content:\"\\eb89\"}.glyph-ontology:before{content:\"\\eb8a\"}.glyph-open-external:before{content:\"\\eb8b\"}.glyph-open-file-filled:before{content:\"\\eb8c\"}.glyph-open-file:before{content:\"\\eb8d\"}.glyph-operate-plant-filled:before{content:\"\\eb8e\"}.glyph-operate-plant:before{content:\"\\eb8f\"}.glyph-optimize:before{content:\"\\eb90\"}.glyph-p-and-i-symbols:before{content:\"\\eb91\"}.glyph-p-i-diagram:before{content:\"\\eb92\"}.glyph-pan:before{content:\"\\eb93\"}.glyph-paste:before{content:\"\\eb94\"}.glyph-pause:before{content:\"\\eb95\"}.glyph-pc-tower-filled:before{content:\"\\eb96\"}.glyph-pc-tower:before{content:\"\\eb97\"}.glyph-pdf-document:before{content:\"\\eb98\"}.glyph-pen-filled:before{content:\"\\eb99\"}.glyph-pen:before{content:\"\\eb9a\"}.glyph-phone-filled:before{content:\"\\eb9b\"}.glyph-phone:before{content:\"\\eb9c\"}.glyph-photo-camera-add:before{content:\"\\eb9d\"}.glyph-photo-camera-cancelled-filled:before{content:\"\\eb9e\"}.glyph-photo-camera-cancelled:before{content:\"\\eb9f\"}.glyph-photo-camera-filled:before{content:\"\\eba0\"}.glyph-photo-camera:before{content:\"\\eba1\"}.glyph-photo-cameras:before{content:\"\\eba2\"}.glyph-piechart-filled:before{content:\"\\eba3\"}.glyph-piechart:before{content:\"\\eba4\"}.glyph-pin-filled:before{content:\"\\eba5\"}.glyph-pin:before{content:\"\\eba6\"}.glyph-plant-filled:before{content:\"\\eba7\"}.glyph-plant-handbook-filled:before{content:\"\\eba8\"}.glyph-plant-handbook:before{content:\"\\eba9\"}.glyph-plant-outline:before{content:\"\\ebaa\"}.glyph-plant-security:before{content:\"\\ebab\"}.glyph-plant-settings-filled:before{content:\"\\ebac\"}.glyph-plant-settings:before{content:\"\\ebad\"}.glyph-plant-user-filled:before{content:\"\\ebae\"}.glyph-plant-user:before{content:\"\\ebaf\"}.glyph-plant:before{content:\"\\ebb0\"}.glyph-plants-filled:before{content:\"\\ebb1\"}.glyph-plants:before{content:\"\\ebb2\"}.glyph-play-filled:before{content:\"\\ebb3\"}.glyph-play-pause-filled:before{content:\"\\ebb4\"}.glyph-play-pause:before{content:\"\\ebb5\"}.glyph-play-stepwise-filled:before{content:\"\\ebb6\"}.glyph-play-stepwise:before{content:\"\\ebb7\"}.glyph-play:before{content:\"\\ebb8\"}.glyph-plus-minus-times-divide:before{content:\"\\ebb9\"}.glyph-plus:before{content:\"\\ebba\"}.glyph-point-up-filled:before{content:\"\\ebbb\"}.glyph-point-up:before{content:\"\\ebbc\"}.glyph-polar-plot:before{content:\"\\ebbd\"}.glyph-polygon-filled:before{content:\"\\ebbe\"}.glyph-polygon-line:before{content:\"\\ebbf\"}.glyph-polygon:before{content:\"\\ebc0\"}.glyph-ppt-document:before{content:\"\\ebc1\"}.glyph-print-filled:before{content:\"\\ebc2\"}.glyph-print:before{content:\"\\ebc3\"}.glyph-prio-high:before{content:\"\\ebc4\"}.glyph-prio-low:before{content:\"\\ebc5\"}.glyph-prio-middle:before{content:\"\\ebc6\"}.glyph-product-catalog:before{content:\"\\ebc7\"}.glyph-product-management:before{content:\"\\ebc8\"}.glyph-product:before{content:\"\\ebc9\"}.glyph-project-configuration:before{content:\"\\ebca\"}.glyph-project-new:before{content:\"\\ebcb\"}.glyph-project-scenarios:before{content:\"\\ebcc\"}.glyph-project-server-filled:before{content:\"\\ebcd\"}.glyph-project-server:before{content:\"\\ebce\"}.glyph-project:before{content:\"\\ebcf\"}.glyph-protocol:before{content:\"\\ebd0\"}.glyph-publish-document:before{content:\"\\ebd1\"}.glyph-publish:before{content:\"\\ebd2\"}.glyph-qr-code:before{content:\"\\ebd3\"}.glyph-quality-report:before{content:\"\\ebd4\"}.glyph-question-filled:before{content:\"\\ebd5\"}.glyph-question:before{content:\"\\ebd6\"}.glyph-radarchart:before{content:\"\\ebd7\"}.glyph-radio-waves-off:before{content:\"\\ebd8\"}.glyph-radio-waves:before{content:\"\\ebd9\"}.glyph-random-filled:before{content:\"\\ebda\"}.glyph-random:before{content:\"\\ebdb\"}.glyph-reboot:before{content:\"\\ebdc\"}.glyph-rectangle-filled:before{content:\"\\ebdd\"}.glyph-rectangle:before{content:\"\\ebde\"}.glyph-redo:before{content:\"\\ebdf\"}.glyph-reference:before{content:\"\\ebe0\"}.glyph-refresh-cancelled:before{content:\"\\ebe1\"}.glyph-refresh:before{content:\"\\ebe2\"}.glyph-reload:before{content:\"\\ebe3\"}.glyph-remove-application:before{content:\"\\ebe4\"}.glyph-remove-eye-filled:before{content:\"\\ebe5\"}.glyph-remove-eye:before{content:\"\\ebe6\"}.glyph-rename:before{content:\"\\ebe7\"}.glyph-replace:before{content:\"\\ebe8\"}.glyph-report-barchart:before{content:\"\\ebe9\"}.glyph-report-linechart:before{content:\"\\ebea\"}.glyph-report-text:before{content:\"\\ebeb\"}.glyph-reset:before{content:\"\\ebec\"}.glyph-restore-backup-filled:before{content:\"\\ebed\"}.glyph-restore-backup-pc:before{content:\"\\ebee\"}.glyph-restore-backup:before{content:\"\\ebef\"}.glyph-rhomb-filled:before{content:\"\\ebf0\"}.glyph-rhomb:before{content:\"\\ebf1\"}.glyph-road-filled:before{content:\"\\ebf2\"}.glyph-road:before{content:\"\\ebf3\"}.glyph-rocket-filled:before{content:\"\\ebf4\"}.glyph-rocket:before{content:\"\\ebf5\"}.glyph-route-target:before{content:\"\\ebf6\"}.glyph-route:before{content:\"\\ebf7\"}.glyph-scatterplot:before{content:\"\\ebf8\"}.glyph-scheduler-filled:before{content:\"\\ebf9\"}.glyph-scheduler:before{content:\"\\ebfa\"}.glyph-screen-filled:before{content:\"\\ebfb\"}.glyph-screen:before{content:\"\\ebfc\"}.glyph-screenshot-filled:before{content:\"\\ebfd\"}.glyph-screenshot:before{content:\"\\ebfe\"}.glyph-script-add:before{content:\"\\ebff\"}.glyph-script:before{content:\"\\ec00\"}.glyph-scripts:before{content:\"\\ec01\"}.glyph-search:before{content:\"\\ec02\"}.glyph-share-filled:before{content:\"\\ec03\"}.glyph-share:before{content:\"\\ec04\"}.glyph-shopping-cart-filled:before{content:\"\\ec05\"}.glyph-shopping-cart:before{content:\"\\ec06\"}.glyph-shout-filled:before{content:\"\\ec07\"}.glyph-shout:before{content:\"\\ec08\"}.glyph-sign-language:before{content:\"\\ec09\"}.glyph-signal-strength-0:before{content:\"\\ec0a\"}.glyph-signal-strength-1:before{content:\"\\ec0b\"}.glyph-signal-strength-2:before{content:\"\\ec0c\"}.glyph-signal-strength-3:before{content:\"\\ec0d\"}.glyph-signal-strength-4:before{content:\"\\ec0e\"}.glyph-signal-strength-5:before{content:\"\\ec0f\"}.glyph-signal-strength-6:before{content:\"\\ec10\"}.glyph-signal-strength-7:before{content:\"\\ec11\"}.glyph-signal-strength-8:before{content:\"\\ec12\"}.glyph-simit-component:before{content:\"\\ec13\"}.glyph-simit-macro-component-editor:before{content:\"\\ec14\"}.glyph-simit-macro:before{content:\"\\ec15\"}.glyph-single-check:before{content:\"\\ec16\"}.glyph-skip-back-filled:before{content:\"\\ec17\"}.glyph-skip-back:before{content:\"\\ec18\"}.glyph-skip-filled:before{content:\"\\ec19\"}.glyph-skip:before{content:\"\\ec1a\"}.glyph-snowflake:before{content:\"\\ec1b\"}.glyph-sort-ascending:before{content:\"\\ec1c\"}.glyph-sort-descending:before{content:\"\\ec1d\"}.glyph-sort:before{content:\"\\ec1e\"}.glyph-sound-loud-filled:before{content:\"\\ec1f\"}.glyph-sound-loud:before{content:\"\\ec20\"}.glyph-sound-mute-filled:before{content:\"\\ec21\"}.glyph-sound-mute:before{content:\"\\ec22\"}.glyph-sound-off-filled:before{content:\"\\ec23\"}.glyph-sound-off:before{content:\"\\ec24\"}.glyph-sound-quiet-filled:before{content:\"\\ec25\"}.glyph-sound-quiet:before{content:\"\\ec26\"}.glyph-spatial:before{content:\"\\ec27\"}.glyph-split-horizontally:before{content:\"\\ec28\"}.glyph-split-vertically:before{content:\"\\ec29\"}.glyph-stamp-filled:before{content:\"\\ec2a\"}.glyph-stamp:before{content:\"\\ec2b\"}.glyph-standby:before{content:\"\\ec2c\"}.glyph-star-add-filled:before{content:\"\\ec2d\"}.glyph-star-add:before{content:\"\\ec2e\"}.glyph-star-cancelled-filled:before{content:\"\\ec2f\"}.glyph-star-cancelled:before{content:\"\\ec30\"}.glyph-star-filled:before{content:\"\\ec31\"}.glyph-star-list-filled:before{content:\"\\ec32\"}.glyph-star-list:before{content:\"\\ec33\"}.glyph-star:before{content:\"\\ec34\"}.glyph-start-data-analysis:before{content:\"\\ec35\"}.glyph-steering-user-filled:before{content:\"\\ec36\"}.glyph-steering-user:before{content:\"\\ec37\"}.glyph-steering:before{content:\"\\ec38\"}.glyph-stethoscope:before{content:\"\\ec39\"}.glyph-stop-filled:before{content:\"\\ec3a\"}.glyph-stop:before{content:\"\\ec3b\"}.glyph-success-filled:before{content:\"\\ec3c\"}.glyph-success:before{content:\"\\ec3d\"}.glyph-sun-filled:before{content:\"\\ec3e\"}.glyph-sun:before{content:\"\\ec3f\"}.glyph-support:before{content:\"\\ec40\"}.glyph-surveillance-cancelled-filled:before{content:\"\\ec41\"}.glyph-surveillance-cancelled:before{content:\"\\ec42\"}.glyph-surveillance-filled:before{content:\"\\ec43\"}.glyph-surveillance:before{content:\"\\ec44\"}.glyph-svg-document:before{content:\"\\ec45\"}.glyph-swap-left-right:before{content:\"\\ec46\"}.glyph-switch-slider:before{content:\"\\ec47\"}.glyph-table-columns:before{content:\"\\ec48\"}.glyph-table-rows:before{content:\"\\ec49\"}.glyph-table-settings:before{content:\"\\ec4a\"}.glyph-table:before{content:\"\\ec4b\"}.glyph-tag-filled:before{content:\"\\ec4c\"}.glyph-tag-plus-filled:before{content:\"\\ec4d\"}.glyph-tag-plus:before{content:\"\\ec4e\"}.glyph-tag:before{content:\"\\ec4f\"}.glyph-tasks-all:before{content:\"\\ec50\"}.glyph-tasks-done:before{content:\"\\ec51\"}.glyph-tasks-open:before{content:\"\\ec52\"}.glyph-text-circle-rectangle-filled:before{content:\"\\ec53\"}.glyph-text-circle-rectangle:before{content:\"\\ec54\"}.glyph-text-document:before{content:\"\\ec55\"}.glyph-text:before{content:\"\\ec56\"}.glyph-threshold-cancelled:before{content:\"\\ec57\"}.glyph-threshold-off:before{content:\"\\ec58\"}.glyph-threshold-on:before{content:\"\\ec59\"}.glyph-to-be-published:before{content:\"\\ec5a\"}.glyph-to-search:before{content:\"\\ec5b\"}.glyph-topic-filled:before{content:\"\\ec5c\"}.glyph-topic:before{content:\"\\ec5d\"}.glyph-touch-filled:before{content:\"\\ec5e\"}.glyph-touch:before{content:\"\\ec5f\"}.glyph-trashcan-filled:before{content:\"\\ec60\"}.glyph-trashcan:before{content:\"\\ec61\"}.glyph-tree:before{content:\"\\ec62\"}.glyph-trend:before{content:\"\\ec63\"}.glyph-triangle-filled:before{content:\"\\ec64\"}.glyph-triangle:before{content:\"\\ec65\"}.glyph-truck-filled:before{content:\"\\ec66\"}.glyph-truck:before{content:\"\\ec67\"}.glyph-tulip-filled:before{content:\"\\ec68\"}.glyph-tulip:before{content:\"\\ec69\"}.glyph-txt-document:before{content:\"\\ec6a\"}.glyph-undo:before{content:\"\\ec6b\"}.glyph-ungroup:before{content:\"\\ec6c\"}.glyph-unlock-filled:before{content:\"\\ec6d\"}.glyph-unlock-plant-filled:before{content:\"\\ec6e\"}.glyph-unlock-plant:before{content:\"\\ec6f\"}.glyph-unlock:before{content:\"\\ec70\"}.glyph-upload-document-note:before{content:\"\\ec71\"}.glyph-upload-success:before{content:\"\\ec72\"}.glyph-upload:before{content:\"\\ec73\"}.glyph-upper-limit:before{content:\"\\ec74\"}.glyph-user-check-filled:before{content:\"\\ec75\"}.glyph-user-check:before{content:\"\\ec76\"}.glyph-user-filled:before{content:\"\\ec77\"}.glyph-user-management-filled:before{content:\"\\ec78\"}.glyph-user-management:before{content:\"\\ec79\"}.glyph-user-profile-filled:before{content:\"\\ec7a\"}.glyph-user-profile:before{content:\"\\ec7b\"}.glyph-user-reading-reading:before{content:\"\\ec7c\"}.glyph-user-reading:before{content:\"\\ec7d\"}.glyph-user-settings-filled:before{content:\"\\ec7e\"}.glyph-user-settings:before{content:\"\\ec7f\"}.glyph-user:before{content:\"\\ec80\"}.glyph-validate:before{content:\"\\ec81\"}.glyph-vdi-folder:before{content:\"\\ec82\"}.glyph-version-history:before{content:\"\\ec83\"}.glyph-video-file-filled:before{content:\"\\ec84\"}.glyph-video-file:before{content:\"\\ec85\"}.glyph-warning-filled:before{content:\"\\ec86\"}.glyph-warning-rhomb-filled:before{content:\"\\ec87\"}.glyph-warning-rhomb:before{content:\"\\ec88\"}.glyph-warning:before{content:\"\\ec89\"}.glyph-water-bathing:before{content:\"\\ec8a\"}.glyph-water-fish:before{content:\"\\ec8b\"}.glyph-water-sunbathing:before{content:\"\\ec8c\"}.glyph-waveform:before{content:\"\\ec8d\"}.glyph-webcam-cancelled-filled:before{content:\"\\ec8e\"}.glyph-webcam-cancelled:before{content:\"\\ec8f\"}.glyph-webcam-filled:before{content:\"\\ec90\"}.glyph-webcam:before{content:\"\\ec91\"}.glyph-wlan-off:before{content:\"\\ec92\"}.glyph-wlan-strength-0:before{content:\"\\ec93\"}.glyph-wlan-strength-1:before{content:\"\\ec94\"}.glyph-wlan-strength-2:before{content:\"\\ec95\"}.glyph-wlan-strength-3:before{content:\"\\ec96\"}.glyph-work-case-filled:before{content:\"\\ec97\"}.glyph-work-case:before{content:\"\\ec98\"}.glyph-workspace:before{content:\"\\ec99\"}.glyph-workspaces:before{content:\"\\ec9a\"}.glyph-x-axis-settings:before{content:\"\\ec9b\"}.glyph-xls-document:before{content:\"\\ec9c\"}.glyph-xml-document:before{content:\"\\ec9d\"}.glyph-y-axis-settings:before{content:\"\\ec9e\"}.glyph-youtube-filled:before{content:\"\\ec9f\"}.glyph-youtube:before{content:\"\\eca0\"}.glyph-zoom-in:before{content:\"\\eca1\"}.glyph-zoom-out:before{content:\"\\eca2\"}.glyph-zoom-selection:before{content:\"\\eca3\"}:host{display:inline-flex;height:1.5rem;width:1.5rem}:host i{color:inherit;transition:color 150ms}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container>svg{height:1.5rem;width:1.5rem}:host .svg-container>svg [fill]{fill:var(--theme-color-std-text)}:host(.size-12){height:0.75rem;width:0.75rem}:host(.size-12) .svg-container>svg{height:0.75rem;width:0.75rem}:host(.size-16){height:1rem;width:1rem}:host(.size-16) .svg-container>svg{height:1rem;width:1rem}:host(.size-32){height:2rem;width:2rem}:host(.size-32) .svg-container>svg{height:2rem;width:2rem}";
 
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
   constructor() {
@@ -62,14 +71,18 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
     this.size = undefined;
     this.color = undefined;
     this.name = undefined;
-    this.src = undefined;
     this.svgContent = undefined;
   }
   connectedCallback() {
     this.loadIconContent();
   }
   async loadIconContent() {
-    this.svgContent = await resolveIcon(this);
+    try {
+      this.svgContent = await resolveIcon(this);
+    }
+    catch (error) {
+      this.svgContent = parseSVGDataContent(question);
+    }
   }
   render() {
     const style = {};
@@ -97,21 +110,16 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         ['size-16']: this.size === '16',
         ['size-24']: this.size === '24',
         ['size-32']: this.size === '32',
-      } }, this.svgContent ? (h("div", { class: 'svg-container', innerHTML: this.svgContent })) : (h("span", { class: "skeleton-box", style: {
-        width: '100%',
-        height: '100%',
-      } }))));
+      } }, h("div", { class: 'svg-container', innerHTML: this.svgContent })));
   }
   static get watchers() { return {
-    "src": ["loadIconContent"],
     "name": ["loadIconContent"]
   }; }
   static get style() { return iconCss; }
 }, [1, "ix-icon", {
     "size": [1],
     "color": [1],
-    "name": [513],
-    "src": [1],
+    "name": [1],
     "svgContent": [32]
   }]);
 function defineCustomElement() {