@siemens/ix 1.5.0-beta.4 → 1.6.0

package/dist/components/icon.js

@@ -1,37 +1,110 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const iconCss = ".sc-ix-icon-h{display:inline-flex;height:1.5rem;width:1.5rem;color:var(--theme-color-std-text)}.sc-ix-icon-h i.sc-ix-icon{color:inherit;transition:color 150ms}.size-12.sc-ix-icon-h{height:0.75rem;width:0.75rem}.size-16.sc-ix-icon-h{height:1rem;width:1rem}.size-32.sc-ix-icon-h{height:2rem;width:2rem}";
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+let parser = null;
+function parseSVGDataContent(content) {
+  if (typeof window['DOMParser'] === 'undefined') {
+    console.warn('DOMParser not supported by your browser.');
+    return;
+  }
+  if (parser === null) {
+    parser = new window['DOMParser']();
+  }
+  const svgDocument = parser.parseFromString(content, 'text/html');
+  const svgElement = svgDocument.querySelector('svg');
+  if (!svgElement) {
+    throw Error('No valid svg data provided');
+  }
+  return svgElement.outerHTML;
+}
+async function fetchSVG(url) {
+  const response = await fetch(url);
+  const responseText = await response.text();
+  if (!response.ok) {
+    console.error(responseText);
+    return '';
+  }
+  return responseText;
+}
+async function resolveIcon(icon) {
+  const { src, name } = icon;
+  if (name) {
+    if (isSvgDataUrl(name)) {
+      return parseSVGDataContent(name);
+    }
+    //Fallback return undefined to render web font icon
+    return;
+  }
+  if (isSvgDataUrl(src)) {
+    return parseSVGDataContent(src);
+  }
+  return fetchSVG(src);
+}
+
+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 Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     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);
   }
   render() {
-    return (h(Host, { style: {
-        color: this.color ? `var(--theme-${this.color})` : 'inherit',
-      }, class: {
+    const style = {};
+    if (this.color) {
+      style['color'] = `var(--theme-${this.color})`;
+    }
+    if (this.name && !this.svgContent) {
+      const iconName = this.name;
+      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("i", { class: {
+          'glyph': true,
+          [`glyph-${iconName}`]: true,
+          'glyph-12': this.size === '12',
+          'glyph-16': this.size === '16',
+          'glyph-24': this.size === '24',
+          'glyph-32': this.size === '32',
+        } })));
+    }
+    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("i", { class: {
-        glyph: true,
-        [`glyph-${this.name}`]: true,
-        'glyph-12': this.size === '12',
-        'glyph-16': this.size === '16',
-        'glyph-24': this.size === '24',
-        'glyph-32': this.size === '32',
-      } }, h("slot", null))));
+      } }, this.svgContent ? (h("div", { class: 'svg-container', innerHTML: this.svgContent })) : (h("span", { class: "skeleton-box", style: {
+        width: '100%',
+        height: '100%',
+      } }))));
   }
+  static get watchers() { return {
+    "src": ["loadIconContent"],
+    "name": ["loadIconContent"]
+  }; }
   static get style() { return iconCss; }
-}, [6, "ix-icon", {
+}, [1, "ix-icon", {
     "size": [1],
     "color": [1],
-    "name": [513]
+    "name": [513],
+    "src": [1],
+    "svgContent": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/icon.js.map

@@ -1 +1 @@
-{"file":"icon.js","mappings":";;AAAA,MAAM,OAAO,GAAG,8SAA8S;;MCgBjT,IAAI;;;;;;;;EAgBf,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;OAC7D,EACD,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,IAED,SACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAC5B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;OAC/B,IAED,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/icon/icon.scss?tag=ix-icon&encapsulation=scoped","./src/components/icon/icon.tsx"],"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\n@import 'common-variables';\n\n:host {\n  display: inline-flex;\n  height: $large-space;\n  width: $large-space;\n\n  color: var(--theme-color-std-text);\n\n  i {\n    color: inherit;\n    transition: color $default-time;\n  }\n}\n\n:host(.size-12) {\n  height: $medium-space;\n  width: $medium-space;\n}\n\n:host(.size-16) {\n  height: $default-space;\n  width: $default-space;\n}\n\n:host(.size-32) {\n  height: $x-large-space;\n  width: $x-large-space;\n}\n","/*\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  scoped: 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  @Prop({ reflect: true }) name: string;\n\n  render() {\n    return (\n      <Host\n        style={{\n          color: this.color ? `var(--theme-${this.color})` : 'inherit',\n        }}\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-${this.name}`]: 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        >\n          <slot></slot>\n        </i>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"icon.js","mappings":";;AAAA;AACA;AACA;AACO,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC1E,IAAI,MAAM,GAAG,IAAI,CAAC;AAClB,SAAS,mBAAmB,CAAC,OAAO,EAAE;AACtC,EAAE,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;AAClD,IAAI,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;AAC7D,IAAI,OAAO;AACX,GAAG;AACH,EAAE,IAAI,MAAM,KAAK,IAAI,EAAE;AACvB,IAAI,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;AACvC,GAAG;AACH,EAAE,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AACnE,EAAE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU,EAAE;AACnB,IAAI,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;AAC9C,GAAG;AACH,EAAE,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AACD,eAAe,QAAQ,CAAC,GAAG,EAAE;AAC7B,EAAE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;AACpC,EAAE,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC7C,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;AACpB,IAAI,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;AAChC,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,YAAY,CAAC;AACtB,CAAC;AACM,eAAe,WAAW,CAAC,IAAI,EAAE;AACxC,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;AAC7B,EAAE,IAAI,IAAI,EAAE;AACZ,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;AAC5B,MAAM,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;AACvC,KAAK;AACL;AACA,IAAI,OAAO;AACX,GAAG;AACH,EAAE,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;AACzB,IAAI,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;AACpC,GAAG;AACH,EAAE,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AACvB;;AC1CA,MAAM,OAAO,GAAG,+n9BAA+n9B;;MCUlo9B,IAAI;EACf;;;;IACE,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;IACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACtB,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;IACrB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;GAC7B;EACD,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EACD,MAAM,eAAe;IACnB,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;GAC3C;EACD,MAAM;IACJ,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;KAC/C;IACD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;UACnC,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE;UACnB,OAAO,EAAE,IAAI;UACb,CAAC,SAAS,QAAQ,EAAE,GAAG,IAAI;UAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC/B,EAAE,CAAC,CAAC,EAAE;KACV;IACD,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;QACnC,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE;QACrI,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;OACf,EAAE,CAAC,CAAC,CAAC,EAAE;GACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../../node_modules/@siemens/ix-icons/dist/collection/components/icon/resolveIcon.js","../../node_modules/@siemens/ix-icons/dist/collection/components/icon/icon.css?tag=ix-icon&encapsulation=shadow","../../node_modules/@siemens/ix-icons/dist/collection/components/icon/icon.js"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\nexport const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');\nlet parser = null;\nfunction parseSVGDataContent(content) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('DOMParser not supported by your browser.');\n    return;\n  }\n  if (parser === null) {\n    parser = new window['DOMParser']();\n  }\n  const svgDocument = parser.parseFromString(content, 'text/html');\n  const svgElement = svgDocument.querySelector('svg');\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n  return svgElement.outerHTML;\n}\nasync function fetchSVG(url) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n  return responseText;\n}\nexport async function resolveIcon(icon) {\n  const { src, name } = icon;\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n    //Fallback return undefined to render web font icon\n    return;\n  }\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n  return fetchSVG(src);\n}\n//# sourceMappingURL=resolveIcon.js.map\n","/*\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/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\n.glyph {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  line-height: 1;\n  font-family: \"ix-icons\";\n  font-size: 1.5rem;\n  font-weight: 500;\n}\n\n.glyph-lg {\n  font-size: 1.3333333333em;\n  line-height: 0.75em;\n  vertical-align: -15%;\n}\n\n.glyph-2x {\n  font-size: 2em;\n}\n\n.glyph-3x {\n  font-size: 3em;\n}\n\n.glyph-4x {\n  font-size: 4em;\n}\n\n.glyph-5x {\n  font-size: 5em;\n}\n\n.glyph-fw {\n  width: 1.2857142857em;\n  text-align: center;\n}\n\n.glyph-12 {\n  font-size: 0.75rem;\n}\n\n.glyph-16 {\n  font-size: 1rem;\n}\n\n.glyph-24 {\n  font-size: 1.5rem;\n}\n\n.glyph-32 {\n  font-size: 2rem;\n}\n\n.glyph-about-filled:before {\n  content: \"\\ea01\";\n}\n\n.glyph-about:before {\n  content: \"\\ea02\";\n}\n\n.glyph-add-circle-filled:before {\n  content: \"\\ea03\";\n}\n\n.glyph-add-circle:before {\n  content: \"\\ea04\";\n}\n\n.glyph-add-document-note:before {\n  content: \"\\ea05\";\n}\n\n.glyph-add-eye-filled:before {\n  content: \"\\ea06\";\n}\n\n.glyph-add-eye:before {\n  content: \"\\ea07\";\n}\n\n.glyph-add-task-list:before {\n  content: \"\\ea08\";\n}\n\n.glyph-add-task:before {\n  content: \"\\ea09\";\n}\n\n.glyph-add:before {\n  content: \"\\ea0a\";\n}\n\n.glyph-ai:before {\n  content: \"\\ea0b\";\n}\n\n.glyph-alarm-bell-cancelled-filled:before {\n  content: \"\\ea0c\";\n}\n\n.glyph-alarm-bell-cancelled:before {\n  content: \"\\ea0d\";\n}\n\n.glyph-alarm-bell-filled:before {\n  content: \"\\ea0e\";\n}\n\n.glyph-alarm-bell:before {\n  content: \"\\ea0f\";\n}\n\n.glyph-alarm-clock-filled:before {\n  content: \"\\ea10\";\n}\n\n.glyph-alarm-clock:before {\n  content: \"\\ea11\";\n}\n\n.glyph-alarm-filled:before {\n  content: \"\\ea12\";\n}\n\n.glyph-alarm:before {\n  content: \"\\ea13\";\n}\n\n.glyph-analyze:before {\n  content: \"\\ea14\";\n}\n\n.glyph-anomaly-found:before {\n  content: \"\\ea15\";\n}\n\n.glyph-anomaly:before {\n  content: \"\\ea16\";\n}\n\n.glyph-app-menu:before {\n  content: \"\\ea17\";\n}\n\n.glyph-apps:before {\n  content: \"\\ea18\";\n}\n\n.glyph-arrow-down-right:before {\n  content: \"\\ea19\";\n}\n\n.glyph-arrow-down:before {\n  content: \"\\ea1a\";\n}\n\n.glyph-arrow-left:before {\n  content: \"\\ea1b\";\n}\n\n.glyph-arrow-right-down:before {\n  content: \"\\ea1c\";\n}\n\n.glyph-arrow-right:before {\n  content: \"\\ea1d\";\n}\n\n.glyph-arrow-up:before {\n  content: \"\\ea1e\";\n}\n\n.glyph-attach:before {\n  content: \"\\ea1f\";\n}\n\n.glyph-attachment-upload:before {\n  content: \"\\ea20\";\n}\n\n.glyph-audio-description1:before {\n  content: \"\\ea21\";\n}\n\n.glyph-audio-description2:before {\n  content: \"\\ea22\";\n}\n\n.glyph-audit-report:before {\n  content: \"\\ea23\";\n}\n\n.glyph-average:before {\n  content: \"\\ea24\";\n}\n\n.glyph-backup-filled:before {\n  content: \"\\ea25\";\n}\n\n.glyph-backup:before {\n  content: \"\\ea26\";\n}\n\n.glyph-bar-code:before {\n  content: \"\\ea27\";\n}\n\n.glyph-barchart:before {\n  content: \"\\ea28\";\n}\n\n.glyph-battery-check:before {\n  content: \"\\ea29\";\n}\n\n.glyph-battery-empty-question:before {\n  content: \"\\ea2a\";\n}\n\n.glyph-battery-empty:before {\n  content: \"\\ea2b\";\n}\n\n.glyph-battery-exclamation:before {\n  content: \"\\ea2c\";\n}\n\n.glyph-battery-full-check:before {\n  content: \"\\ea2d\";\n}\n\n.glyph-battery-full:before {\n  content: \"\\ea2e\";\n}\n\n.glyph-battery-half:before {\n  content: \"\\ea2f\";\n}\n\n.glyph-battery-low:before {\n  content: \"\\ea30\";\n}\n\n.glyph-battery-quarter:before {\n  content: \"\\ea31\";\n}\n\n.glyph-battery-slash:before {\n  content: \"\\ea32\";\n}\n\n.glyph-battery-three-quarter:before {\n  content: \"\\ea33\";\n}\n\n.glyph-battery-xmark:before {\n  content: \"\\ea34\";\n}\n\n.glyph-bezier-curve:before {\n  content: \"\\ea35\";\n}\n\n.glyph-binoculars-filled:before {\n  content: \"\\ea36\";\n}\n\n.glyph-binoculars:before {\n  content: \"\\ea37\";\n}\n\n.glyph-blazor:before {\n  content: \"\\ea38\";\n}\n\n.glyph-book:before {\n  content: \"\\ea39\";\n}\n\n.glyph-bookmark-filled:before {\n  content: \"\\ea3a\";\n}\n\n.glyph-bookmark:before {\n  content: \"\\ea3b\";\n}\n\n.glyph-boundary-signals:before {\n  content: \"\\ea3c\";\n}\n\n.glyph-building1-filled:before {\n  content: \"\\ea3d\";\n}\n\n.glyph-building1:before {\n  content: \"\\ea3e\";\n}\n\n.glyph-building2-filled:before {\n  content: \"\\ea3f\";\n}\n\n.glyph-building2:before {\n  content: \"\\ea40\";\n}\n\n.glyph-bulb-filled:before {\n  content: \"\\ea41\";\n}\n\n.glyph-bulb:before {\n  content: \"\\ea42\";\n}\n\n.glyph-calendar-filled:before {\n  content: \"\\ea43\";\n}\n\n.glyph-calendar-settings:before {\n  content: \"\\ea44\";\n}\n\n.glyph-calendar:before {\n  content: \"\\ea45\";\n}\n\n.glyph-cancel:before {\n  content: \"\\ea46\";\n}\n\n.glyph-cancelled:before {\n  content: \"\\ea47\";\n}\n\n.glyph-capacity-filled:before {\n  content: \"\\ea48\";\n}\n\n.glyph-capacity:before {\n  content: \"\\ea49\";\n}\n\n.glyph-capture:before {\n  content: \"\\ea4a\";\n}\n\n.glyph-car-filled:before {\n  content: \"\\ea4b\";\n}\n\n.glyph-car:before {\n  content: \"\\ea4c\";\n}\n\n.glyph-card-layout-filled:before {\n  content: \"\\ea4d\";\n}\n\n.glyph-card-layout:before {\n  content: \"\\ea4e\";\n}\n\n.glyph-chart-cursor:before {\n  content: \"\\ea4f\";\n}\n\n.glyph-chart-curve-linear:before {\n  content: \"\\ea50\";\n}\n\n.glyph-chart-curve-spline:before {\n  content: \"\\ea51\";\n}\n\n.glyph-chart-curve-stepped:before {\n  content: \"\\ea52\";\n}\n\n.glyph-chart-diagram-add:before {\n  content: \"\\ea53\";\n}\n\n.glyph-chart-diagram:before {\n  content: \"\\ea54\";\n}\n\n.glyph-chart-diagrams:before {\n  content: \"\\ea55\";\n}\n\n.glyph-chart-labels-filled:before {\n  content: \"\\ea56\";\n}\n\n.glyph-chart-labels:before {\n  content: \"\\ea57\";\n}\n\n.glyph-check-in:before {\n  content: \"\\ea58\";\n}\n\n.glyph-check-out:before {\n  content: \"\\ea59\";\n}\n\n.glyph-checkbox-component-checked:before {\n  content: \"\\ea5a\";\n}\n\n.glyph-checkbox-component-mixed:before {\n  content: \"\\ea5b\";\n}\n\n.glyph-checkbox-component-unchecked:before {\n  content: \"\\ea5c\";\n}\n\n.glyph-checkbox-filled:before {\n  content: \"\\ea5d\";\n}\n\n.glyph-checkbox:before {\n  content: \"\\ea5e\";\n}\n\n.glyph-checkboxes-filled:before {\n  content: \"\\ea5f\";\n}\n\n.glyph-checkboxes:before {\n  content: \"\\ea60\";\n}\n\n.glyph-chevron-down-small:before {\n  content: \"\\ea61\";\n}\n\n.glyph-chevron-down:before {\n  content: \"\\ea62\";\n}\n\n.glyph-chevron-left-small:before {\n  content: \"\\ea63\";\n}\n\n.glyph-chevron-left:before {\n  content: \"\\ea64\";\n}\n\n.glyph-chevron-right-small:before {\n  content: \"\\ea65\";\n}\n\n.glyph-chevron-right:before {\n  content: \"\\ea66\";\n}\n\n.glyph-chevron-up-small:before {\n  content: \"\\ea67\";\n}\n\n.glyph-chevron-up:before {\n  content: \"\\ea68\";\n}\n\n.glyph-circle-dot-filled:before {\n  content: \"\\ea69\";\n}\n\n.glyph-circle-dot:before {\n  content: \"\\ea6a\";\n}\n\n.glyph-circle-filled:before {\n  content: \"\\ea6b\";\n}\n\n.glyph-circle-pause-filled:before {\n  content: \"\\ea6c\";\n}\n\n.glyph-circle-pause:before {\n  content: \"\\ea6d\";\n}\n\n.glyph-circle-play-filled:before {\n  content: \"\\ea6e\";\n}\n\n.glyph-circle-play:before {\n  content: \"\\ea6f\";\n}\n\n.glyph-circle-stop-filled:before {\n  content: \"\\ea70\";\n}\n\n.glyph-circle-stop:before {\n  content: \"\\ea71\";\n}\n\n.glyph-circle:before {\n  content: \"\\ea72\";\n}\n\n.glyph-clear-filter-filled:before {\n  content: \"\\ea73\";\n}\n\n.glyph-clear-filter:before {\n  content: \"\\ea74\";\n}\n\n.glyph-clear:before {\n  content: \"\\ea75\";\n}\n\n.glyph-clock-filled:before {\n  content: \"\\ea76\";\n}\n\n.glyph-clock:before {\n  content: \"\\ea77\";\n}\n\n.glyph-close-small:before {\n  content: \"\\ea78\";\n}\n\n.glyph-close:before {\n  content: \"\\ea79\";\n}\n\n.glyph-cloud-download-add-filled:before {\n  content: \"\\ea7a\";\n}\n\n.glyph-cloud-download-add:before {\n  content: \"\\ea7b\";\n}\n\n.glyph-cloud-download-filled:before {\n  content: \"\\ea7c\";\n}\n\n.glyph-cloud-download-list-filled:before {\n  content: \"\\ea7d\";\n}\n\n.glyph-cloud-download-list:before {\n  content: \"\\ea7e\";\n}\n\n.glyph-cloud-download:before {\n  content: \"\\ea7f\";\n}\n\n.glyph-cloud-filled:before {\n  content: \"\\ea80\";\n}\n\n.glyph-cloud-new-filled:before {\n  content: \"\\ea81\";\n}\n\n.glyph-cloud-new:before {\n  content: \"\\ea82\";\n}\n\n.glyph-cloud-success-filled:before {\n  content: \"\\ea83\";\n}\n\n.glyph-cloud-success:before {\n  content: \"\\ea84\";\n}\n\n.glyph-cloud-upload-filled:before {\n  content: \"\\ea85\";\n}\n\n.glyph-cloud-upload:before {\n  content: \"\\ea86\";\n}\n\n.glyph-cloud:before {\n  content: \"\\ea87\";\n}\n\n.glyph-code:before {\n  content: \"\\ea88\";\n}\n\n.glyph-cogwheel-filled:before {\n  content: \"\\ea89\";\n}\n\n.glyph-cogwheel:before {\n  content: \"\\ea8a\";\n}\n\n.glyph-combine:before {\n  content: \"\\ea8b\";\n}\n\n.glyph-compact-disc-filled:before {\n  content: \"\\ea8c\";\n}\n\n.glyph-compact-disc:before {\n  content: \"\\ea8d\";\n}\n\n.glyph-compound-block:before {\n  content: \"\\ea8e\";\n}\n\n.glyph-configuration:before {\n  content: \"\\ea8f\";\n}\n\n.glyph-configure-filled:before {\n  content: \"\\ea90\";\n}\n\n.glyph-configure:before {\n  content: \"\\ea91\";\n}\n\n.glyph-connected:before {\n  content: \"\\ea92\";\n}\n\n.glyph-connector-chart-filled:before {\n  content: \"\\ea93\";\n}\n\n.glyph-connector-chart:before {\n  content: \"\\ea94\";\n}\n\n.glyph-connector-filled:before {\n  content: \"\\ea95\";\n}\n\n.glyph-connector-hex-filled:before {\n  content: \"\\ea96\";\n}\n\n.glyph-connector-hex:before {\n  content: \"\\ea97\";\n}\n\n.glyph-connector-rect-filled:before {\n  content: \"\\ea98\";\n}\n\n.glyph-connector-rect:before {\n  content: \"\\ea99\";\n}\n\n.glyph-connector-rhomb-filled:before {\n  content: \"\\ea9a\";\n}\n\n.glyph-connector-rhomb:before {\n  content: \"\\ea9b\";\n}\n\n.glyph-connector:before {\n  content: \"\\ea9c\";\n}\n\n.glyph-consistency-check:before {\n  content: \"\\ea9d\";\n}\n\n.glyph-contact-details-filled:before {\n  content: \"\\ea9e\";\n}\n\n.glyph-contact-details:before {\n  content: \"\\ea9f\";\n}\n\n.glyph-context-menu:before {\n  content: \"\\eaa0\";\n}\n\n.glyph-controlled-device:before {\n  content: \"\\eaa1\";\n}\n\n.glyph-controller-device:before {\n  content: \"\\eaa2\";\n}\n\n.glyph-copy:before {\n  content: \"\\eaa3\";\n}\n\n.glyph-corner-arrow-up-left:before {\n  content: \"\\eaa4\";\n}\n\n.glyph-couch-filled:before {\n  content: \"\\eaa5\";\n}\n\n.glyph-couch:before {\n  content: \"\\eaa6\";\n}\n\n.glyph-create-plant-filled:before {\n  content: \"\\eaa7\";\n}\n\n.glyph-create-plant:before {\n  content: \"\\eaa8\";\n}\n\n.glyph-cut:before {\n  content: \"\\eaa9\";\n}\n\n.glyph-cycle:before {\n  content: \"\\eaaa\";\n}\n\n.glyph-data-egress:before {\n  content: \"\\eaab\";\n}\n\n.glyph-data-ingress-egress:before {\n  content: \"\\eaac\";\n}\n\n.glyph-data-ingress:before {\n  content: \"\\eaad\";\n}\n\n.glyph-database-filled:before {\n  content: \"\\eaae\";\n}\n\n.glyph-database:before {\n  content: \"\\eaaf\";\n}\n\n.glyph-details:before {\n  content: \"\\eab0\";\n}\n\n.glyph-diagram-module-library:before {\n  content: \"\\eab1\";\n}\n\n.glyph-diagram-module-new:before {\n  content: \"\\eab2\";\n}\n\n.glyph-diagram-module:before {\n  content: \"\\eab3\";\n}\n\n.glyph-diamond:before {\n  content: \"\\eab4\";\n}\n\n.glyph-disconnected:before {\n  content: \"\\eab5\";\n}\n\n.glyph-disk-filled:before {\n  content: \"\\eab6\";\n}\n\n.glyph-disk-pen:before {\n  content: \"\\eab7\";\n}\n\n.glyph-disk:before {\n  content: \"\\eab8\";\n}\n\n.glyph-distribution:before {\n  content: \"\\eab9\";\n}\n\n.glyph-doc-document:before {\n  content: \"\\eaba\";\n}\n\n.glyph-document-bulk:before {\n  content: \"\\eabb\";\n}\n\n.glyph-document-info:before {\n  content: \"\\eabc\";\n}\n\n.glyph-document-link:before {\n  content: \"\\eabd\";\n}\n\n.glyph-document-management:before {\n  content: \"\\eabe\";\n}\n\n.glyph-document-reference:before {\n  content: \"\\eabf\";\n}\n\n.glyph-document-settings:before {\n  content: \"\\eac0\";\n}\n\n.glyph-document-success:before {\n  content: \"\\eac1\";\n}\n\n.glyph-document:before {\n  content: \"\\eac2\";\n}\n\n.glyph-double-check:before {\n  content: \"\\eac3\";\n}\n\n.glyph-double-chevron-down:before {\n  content: \"\\eac4\";\n}\n\n.glyph-double-chevron-left:before {\n  content: \"\\eac5\";\n}\n\n.glyph-double-chevron-right:before {\n  content: \"\\eac6\";\n}\n\n.glyph-double-chevron-up:before {\n  content: \"\\eac7\";\n}\n\n.glyph-doublet-filled:before {\n  content: \"\\eac8\";\n}\n\n.glyph-doublet:before {\n  content: \"\\eac9\";\n}\n\n.glyph-download-add:before {\n  content: \"\\eaca\";\n}\n\n.glyph-download-list:before {\n  content: \"\\eacb\";\n}\n\n.glyph-download:before {\n  content: \"\\eacc\";\n}\n\n.glyph-drop:before {\n  content: \"\\eacd\";\n}\n\n.glyph-duplicate-document:before {\n  content: \"\\eace\";\n}\n\n.glyph-duplicate:before {\n  content: \"\\eacf\";\n}\n\n.glyph-e-mail-filled:before {\n  content: \"\\ead0\";\n}\n\n.glyph-e-mail:before {\n  content: \"\\ead1\";\n}\n\n.glyph-earth-filled:before {\n  content: \"\\ead2\";\n}\n\n.glyph-earth:before {\n  content: \"\\ead3\";\n}\n\n.glyph-edit-plant:before {\n  content: \"\\ead4\";\n}\n\n.glyph-ellipse-arc:before {\n  content: \"\\ead5\";\n}\n\n.glyph-ellipse-filled:before {\n  content: \"\\ead6\";\n}\n\n.glyph-ellipse:before {\n  content: \"\\ead7\";\n}\n\n.glyph-error-filled:before {\n  content: \"\\ead8\";\n}\n\n.glyph-error:before {\n  content: \"\\ead9\";\n}\n\n.glyph-explore-filled:before {\n  content: \"\\eada\";\n}\n\n.glyph-explore:before {\n  content: \"\\eadb\";\n}\n\n.glyph-export:before {\n  content: \"\\eadc\";\n}\n\n.glyph-eye-cancelled-filled:before {\n  content: \"\\eadd\";\n}\n\n.glyph-eye-cancelled:before {\n  content: \"\\eade\";\n}\n\n.glyph-eye-filled:before {\n  content: \"\\eadf\";\n}\n\n.glyph-eye:before {\n  content: \"\\eae0\";\n}\n\n.glyph-factory-reset-filled:before {\n  content: \"\\eae1\";\n}\n\n.glyph-factory-reset:before {\n  content: \"\\eae2\";\n}\n\n.glyph-filter-filled:before {\n  content: \"\\eae3\";\n}\n\n.glyph-filter-outline:before {\n  content: \"\\eae4\";\n}\n\n.glyph-filter:before {\n  content: \"\\eae5\";\n}\n\n.glyph-flag-filled:before {\n  content: \"\\eae6\";\n}\n\n.glyph-flag:before {\n  content: \"\\eae7\";\n}\n\n.glyph-folder-down-filled:before {\n  content: \"\\eae8\";\n}\n\n.glyph-folder-down:before {\n  content: \"\\eae9\";\n}\n\n.glyph-folder-filled:before {\n  content: \"\\eaea\";\n}\n\n.glyph-folder-new-filled:before {\n  content: \"\\eaeb\";\n}\n\n.glyph-folder-new-outline:before {\n  content: \"\\eaec\";\n}\n\n.glyph-folder-new:before {\n  content: \"\\eaed\";\n}\n\n.glyph-folder-open-filled:before {\n  content: \"\\eaee\";\n}\n\n.glyph-folder-open-outline:before {\n  content: \"\\eaef\";\n}\n\n.glyph-folder-open:before {\n  content: \"\\eaf0\";\n}\n\n.glyph-folder-outline:before {\n  content: \"\\eaf1\";\n}\n\n.glyph-folder-up-filled:before {\n  content: \"\\eaf2\";\n}\n\n.glyph-folder-up:before {\n  content: \"\\eaf3\";\n}\n\n.glyph-folder:before {\n  content: \"\\eaf4\";\n}\n\n.glyph-full-screeen-exit:before {\n  content: \"\\eaf5\";\n}\n\n.glyph-full-screeen:before {\n  content: \"\\eaf6\";\n}\n\n.glyph-function-block-library:before {\n  content: \"\\eaf7\";\n}\n\n.glyph-function-block-new:before {\n  content: \"\\eaf8\";\n}\n\n.glyph-function-block:before {\n  content: \"\\eaf9\";\n}\n\n.glyph-function-diagram-new:before {\n  content: \"\\eafa\";\n}\n\n.glyph-function-diagram:before {\n  content: \"\\eafb\";\n}\n\n.glyph-gauge-filled:before {\n  content: \"\\eafc\";\n}\n\n.glyph-gauge:before {\n  content: \"\\eafd\";\n}\n\n.glyph-gaugechart:before {\n  content: \"\\eafe\";\n}\n\n.glyph-global-plant-filled:before {\n  content: \"\\eaff\";\n}\n\n.glyph-global-plant:before {\n  content: \"\\eb00\";\n}\n\n.glyph-globe-filled:before {\n  content: \"\\eb01\";\n}\n\n.glyph-globe:before {\n  content: \"\\eb02\";\n}\n\n.glyph-goto:before {\n  content: \"\\eb03\";\n}\n\n.glyph-group:before {\n  content: \"\\eb04\";\n}\n\n.glyph-hard-reset:before {\n  content: \"\\eb05\";\n}\n\n.glyph-hardware-cabinet:before {\n  content: \"\\eb06\";\n}\n\n.glyph-health-filled:before {\n  content: \"\\eb07\";\n}\n\n.glyph-health:before {\n  content: \"\\eb08\";\n}\n\n.glyph-heart-filled:before {\n  content: \"\\eb09\";\n}\n\n.glyph-heart:before {\n  content: \"\\eb0a\";\n}\n\n.glyph-hexagon-vertical-bars-database-filled:before {\n  content: \"\\eb0b\";\n}\n\n.glyph-hexagon-vertical-bars-database:before {\n  content: \"\\eb0c\";\n}\n\n.glyph-hexagon-vertical-bars-filled:before {\n  content: \"\\eb0d\";\n}\n\n.glyph-hexagon-vertical-bars:before {\n  content: \"\\eb0e\";\n}\n\n.glyph-hierarchy:before {\n  content: \"\\eb0f\";\n}\n\n.glyph-highlight-filled:before {\n  content: \"\\eb10\";\n}\n\n.glyph-highlight:before {\n  content: \"\\eb11\";\n}\n\n.glyph-history-list:before {\n  content: \"\\eb12\";\n}\n\n.glyph-history:before {\n  content: \"\\eb13\";\n}\n\n.glyph-home-filled:before {\n  content: \"\\eb14\";\n}\n\n.glyph-home:before {\n  content: \"\\eb15\";\n}\n\n.glyph-hourglass:before {\n  content: \"\\eb16\";\n}\n\n.glyph-image-filled:before {\n  content: \"\\eb17\";\n}\n\n.glyph-image:before {\n  content: \"\\eb18\";\n}\n\n.glyph-import:before {\n  content: \"\\eb19\";\n}\n\n.glyph-info-feed:before {\n  content: \"\\eb1a\";\n}\n\n.glyph-info-filled:before {\n  content: \"\\eb1b\";\n}\n\n.glyph-info:before {\n  content: \"\\eb1c\";\n}\n\n.glyph-ingestion-report:before {\n  content: \"\\eb1d\";\n}\n\n.glyph-ingestion:before {\n  content: \"\\eb1e\";\n}\n\n.glyph-ink-pen:before {\n  content: \"\\eb1f\";\n}\n\n.glyph-inquiry-filled:before {\n  content: \"\\eb20\";\n}\n\n.glyph-inquiry-mail:before {\n  content: \"\\eb21\";\n}\n\n.glyph-inquiry:before {\n  content: \"\\eb22\";\n}\n\n.glyph-item-details-filled:before {\n  content: \"\\eb23\";\n}\n\n.glyph-item-details:before {\n  content: \"\\eb24\";\n}\n\n.glyph-label-filled:before {\n  content: \"\\eb25\";\n}\n\n.glyph-label:before {\n  content: \"\\eb26\";\n}\n\n.glyph-language-filled:before {\n  content: \"\\eb27\";\n}\n\n.glyph-language:before {\n  content: \"\\eb28\";\n}\n\n.glyph-layers-filled:before {\n  content: \"\\eb29\";\n}\n\n.glyph-layers:before {\n  content: \"\\eb2a\";\n}\n\n.glyph-leaf:before {\n  content: \"\\eb2b\";\n}\n\n.glyph-legal:before {\n  content: \"\\eb2c\";\n}\n\n.glyph-library-new:before {\n  content: \"\\eb2d\";\n}\n\n.glyph-library:before {\n  content: \"\\eb2e\";\n}\n\n.glyph-license:before {\n  content: \"\\eb2f\";\n}\n\n.glyph-light-dark:before {\n  content: \"\\eb30\";\n}\n\n.glyph-line-diagonal:before {\n  content: \"\\eb31\";\n}\n\n.glyph-link:before {\n  content: \"\\eb32\";\n}\n\n.glyph-list:before {\n  content: \"\\eb33\";\n}\n\n.glyph-live-schedule:before {\n  content: \"\\eb34\";\n}\n\n.glyph-location-filled:before {\n  content: \"\\eb35\";\n}\n\n.glyph-location-outline:before {\n  content: \"\\eb36\";\n}\n\n.glyph-location:before {\n  content: \"\\eb37\";\n}\n\n.glyph-lock-filled:before {\n  content: \"\\eb38\";\n}\n\n.glyph-lock-key-filled:before {\n  content: \"\\eb39\";\n}\n\n.glyph-lock-key:before {\n  content: \"\\eb3a\";\n}\n\n.glyph-lock:before {\n  content: \"\\eb3b\";\n}\n\n.glyph-log-in:before {\n  content: \"\\eb3c\";\n}\n\n.glyph-log-out:before {\n  content: \"\\eb3d\";\n}\n\n.glyph-log:before {\n  content: \"\\eb3e\";\n}\n\n.glyph-logic-diagram:before {\n  content: \"\\eb3f\";\n}\n\n.glyph-lower-limit:before {\n  content: \"\\eb40\";\n}\n\n.glyph-mail-filled:before {\n  content: \"\\eb41\";\n}\n\n.glyph-mail:before {\n  content: \"\\eb42\";\n}\n\n.glyph-maintenance-documents:before {\n  content: \"\\eb43\";\n}\n\n.glyph-maintenance-info:before {\n  content: \"\\eb44\";\n}\n\n.glyph-maintenance-warning-filled:before {\n  content: \"\\eb45\";\n}\n\n.glyph-maintenance-warning:before {\n  content: \"\\eb46\";\n}\n\n.glyph-maintenance:before {\n  content: \"\\eb47\";\n}\n\n.glyph-mandatory-done:before {\n  content: \"\\eb48\";\n}\n\n.glyph-mandatory:before {\n  content: \"\\eb49\";\n}\n\n.glyph-map:before {\n  content: \"\\eb4a\";\n}\n\n.glyph-maximize:before {\n  content: \"\\eb4b\";\n}\n\n.glyph-microphone-filled:before {\n  content: \"\\eb4c\";\n}\n\n.glyph-microphone:before {\n  content: \"\\eb4d\";\n}\n\n.glyph-minimize:before {\n  content: \"\\eb4e\";\n}\n\n.glyph-minus:before {\n  content: \"\\eb4f\";\n}\n\n.glyph-mix:before {\n  content: \"\\eb50\";\n}\n\n.glyph-monitor-filled:before {\n  content: \"\\eb51\";\n}\n\n.glyph-monitor-trend:before {\n  content: \"\\eb52\";\n}\n\n.glyph-monitor:before {\n  content: \"\\eb53\";\n}\n\n.glyph-monitoring-add:before {\n  content: \"\\eb54\";\n}\n\n.glyph-monitoring:before {\n  content: \"\\eb55\";\n}\n\n.glyph-monitorings:before {\n  content: \"\\eb56\";\n}\n\n.glyph-moon-filled:before {\n  content: \"\\eb57\";\n}\n\n.glyph-moon:before {\n  content: \"\\eb58\";\n}\n\n.glyph-more-menu:before {\n  content: \"\\eb59\";\n}\n\n.glyph-mouse-click-filled:before {\n  content: \"\\eb5a\";\n}\n\n.glyph-mouse-click:before {\n  content: \"\\eb5b\";\n}\n\n.glyph-mouse-select-filled:before {\n  content: \"\\eb5c\";\n}\n\n.glyph-mouse-select:before {\n  content: \"\\eb5d\";\n}\n\n.glyph-mp4-document:before {\n  content: \"\\eb5e\";\n}\n\n.glyph-namur-check-function-filled:before {\n  content: \"\\eb5f\";\n}\n\n.glyph-namur-check-function:before {\n  content: \"\\eb60\";\n}\n\n.glyph-namur-failure-filled:before {\n  content: \"\\eb61\";\n}\n\n.glyph-namur-failure:before {\n  content: \"\\eb62\";\n}\n\n.glyph-namur-maintenance-required-filled:before {\n  content: \"\\eb63\";\n}\n\n.glyph-namur-maintenance-required:before {\n  content: \"\\eb64\";\n}\n\n.glyph-namur-ok-filled:before {\n  content: \"\\eb65\";\n}\n\n.glyph-namur-ok:before {\n  content: \"\\eb66\";\n}\n\n.glyph-namur-out-of-spec-filled:before {\n  content: \"\\eb67\";\n}\n\n.glyph-namur-out-of-spec:before {\n  content: \"\\eb68\";\n}\n\n.glyph-navigation-filled:before {\n  content: \"\\eb69\";\n}\n\n.glyph-navigation-left:before {\n  content: \"\\eb6a\";\n}\n\n.glyph-navigation-right:before {\n  content: \"\\eb6b\";\n}\n\n.glyph-navigation:before {\n  content: \"\\eb6c\";\n}\n\n.glyph-new-indicator-filled:before {\n  content: \"\\eb6d\";\n}\n\n.glyph-new-indicator:before {\n  content: \"\\eb6e\";\n}\n\n.glyph-no-filter-filled:before {\n  content: \"\\eb6f\";\n}\n\n.glyph-no-filter:before {\n  content: \"\\eb70\";\n}\n\n.glyph-no-image:before {\n  content: \"\\eb71\";\n}\n\n.glyph-note-filled:before {\n  content: \"\\eb72\";\n}\n\n.glyph-note:before {\n  content: \"\\eb73\";\n}\n\n.glyph-notification-filled:before {\n  content: \"\\eb74\";\n}\n\n.glyph-notification:before {\n  content: \"\\eb75\";\n}\n\n.glyph-notifications-filled:before {\n  content: \"\\eb76\";\n}\n\n.glyph-notifications:before {\n  content: \"\\eb77\";\n}\n\n.glyph-ontology-filled:before {\n  content: \"\\eb78\";\n}\n\n.glyph-ontology:before {\n  content: \"\\eb79\";\n}\n\n.glyph-open-external:before {\n  content: \"\\eb7a\";\n}\n\n.glyph-open-file-filled:before {\n  content: \"\\eb7b\";\n}\n\n.glyph-open-file:before {\n  content: \"\\eb7c\";\n}\n\n.glyph-operate-plant-filled:before {\n  content: \"\\eb7d\";\n}\n\n.glyph-operate-plant:before {\n  content: \"\\eb7e\";\n}\n\n.glyph-optimize:before {\n  content: \"\\eb7f\";\n}\n\n.glyph-p-and-i-symbols:before {\n  content: \"\\eb80\";\n}\n\n.glyph-p-i-diagram:before {\n  content: \"\\eb81\";\n}\n\n.glyph-pan:before {\n  content: \"\\eb82\";\n}\n\n.glyph-paste:before {\n  content: \"\\eb83\";\n}\n\n.glyph-pause:before {\n  content: \"\\eb84\";\n}\n\n.glyph-pc-tower-filled:before {\n  content: \"\\eb85\";\n}\n\n.glyph-pc-tower:before {\n  content: \"\\eb86\";\n}\n\n.glyph-pdf-document:before {\n  content: \"\\eb87\";\n}\n\n.glyph-pen-filled:before {\n  content: \"\\eb88\";\n}\n\n.glyph-pen:before {\n  content: \"\\eb89\";\n}\n\n.glyph-phone-filled:before {\n  content: \"\\eb8a\";\n}\n\n.glyph-phone:before {\n  content: \"\\eb8b\";\n}\n\n.glyph-photo-camera-add:before {\n  content: \"\\eb8c\";\n}\n\n.glyph-photo-camera-filled:before {\n  content: \"\\eb8d\";\n}\n\n.glyph-photo-camera:before {\n  content: \"\\eb8e\";\n}\n\n.glyph-photo-cameras:before {\n  content: \"\\eb8f\";\n}\n\n.glyph-piechart-filled:before {\n  content: \"\\eb90\";\n}\n\n.glyph-piechart:before {\n  content: \"\\eb91\";\n}\n\n.glyph-pin-filled:before {\n  content: \"\\eb92\";\n}\n\n.glyph-pin:before {\n  content: \"\\eb93\";\n}\n\n.glyph-plant-filled:before {\n  content: \"\\eb94\";\n}\n\n.glyph-plant-handbook-filled:before {\n  content: \"\\eb95\";\n}\n\n.glyph-plant-handbook:before {\n  content: \"\\eb96\";\n}\n\n.glyph-plant-outline:before {\n  content: \"\\eb97\";\n}\n\n.glyph-plant-security:before {\n  content: \"\\eb98\";\n}\n\n.glyph-plant-settings-filled:before {\n  content: \"\\eb99\";\n}\n\n.glyph-plant-settings:before {\n  content: \"\\eb9a\";\n}\n\n.glyph-plant-user-filled:before {\n  content: \"\\eb9b\";\n}\n\n.glyph-plant-user:before {\n  content: \"\\eb9c\";\n}\n\n.glyph-plant:before {\n  content: \"\\eb9d\";\n}\n\n.glyph-plants-filled:before {\n  content: \"\\eb9e\";\n}\n\n.glyph-plants:before {\n  content: \"\\eb9f\";\n}\n\n.glyph-play-filled:before {\n  content: \"\\eba0\";\n}\n\n.glyph-play-pause-filled:before {\n  content: \"\\eba1\";\n}\n\n.glyph-play-pause:before {\n  content: \"\\eba2\";\n}\n\n.glyph-play-stepwise-filled:before {\n  content: \"\\eba3\";\n}\n\n.glyph-play-stepwise:before {\n  content: \"\\eba4\";\n}\n\n.glyph-play:before {\n  content: \"\\eba5\";\n}\n\n.glyph-plus-minus-times-divide:before {\n  content: \"\\eba6\";\n}\n\n.glyph-plus:before {\n  content: \"\\eba7\";\n}\n\n.glyph-point-up-filled:before {\n  content: \"\\eba8\";\n}\n\n.glyph-point-up:before {\n  content: \"\\eba9\";\n}\n\n.glyph-polar-plot:before {\n  content: \"\\ebaa\";\n}\n\n.glyph-polygon-filled:before {\n  content: \"\\ebab\";\n}\n\n.glyph-polygon-line:before {\n  content: \"\\ebac\";\n}\n\n.glyph-polygon:before {\n  content: \"\\ebad\";\n}\n\n.glyph-ppt-document:before {\n  content: \"\\ebae\";\n}\n\n.glyph-print-filled:before {\n  content: \"\\ebaf\";\n}\n\n.glyph-print:before {\n  content: \"\\ebb0\";\n}\n\n.glyph-prio-high:before {\n  content: \"\\ebb1\";\n}\n\n.glyph-prio-low:before {\n  content: \"\\ebb2\";\n}\n\n.glyph-prio-middle:before {\n  content: \"\\ebb3\";\n}\n\n.glyph-product-catalog:before {\n  content: \"\\ebb4\";\n}\n\n.glyph-product-management:before {\n  content: \"\\ebb5\";\n}\n\n.glyph-product:before {\n  content: \"\\ebb6\";\n}\n\n.glyph-project-configuration:before {\n  content: \"\\ebb7\";\n}\n\n.glyph-project-new:before {\n  content: \"\\ebb8\";\n}\n\n.glyph-project-scenarios:before {\n  content: \"\\ebb9\";\n}\n\n.glyph-project:before {\n  content: \"\\ebba\";\n}\n\n.glyph-protocol:before {\n  content: \"\\ebbb\";\n}\n\n.glyph-publish-document:before {\n  content: \"\\ebbc\";\n}\n\n.glyph-publish:before {\n  content: \"\\ebbd\";\n}\n\n.glyph-qr-code:before {\n  content: \"\\ebbe\";\n}\n\n.glyph-quality-report:before {\n  content: \"\\ebbf\";\n}\n\n.glyph-question-filled:before {\n  content: \"\\ebc0\";\n}\n\n.glyph-question:before {\n  content: \"\\ebc1\";\n}\n\n.glyph-radarchart:before {\n  content: \"\\ebc2\";\n}\n\n.glyph-radio-waves-off:before {\n  content: \"\\ebc3\";\n}\n\n.glyph-radio-waves:before {\n  content: \"\\ebc4\";\n}\n\n.glyph-random-filled:before {\n  content: \"\\ebc5\";\n}\n\n.glyph-random:before {\n  content: \"\\ebc6\";\n}\n\n.glyph-reboot:before {\n  content: \"\\ebc7\";\n}\n\n.glyph-rectangle-filled:before {\n  content: \"\\ebc8\";\n}\n\n.glyph-rectangle:before {\n  content: \"\\ebc9\";\n}\n\n.glyph-redo:before {\n  content: \"\\ebca\";\n}\n\n.glyph-reference:before {\n  content: \"\\ebcb\";\n}\n\n.glyph-refresh-cancelled:before {\n  content: \"\\ebcc\";\n}\n\n.glyph-refresh:before {\n  content: \"\\ebcd\";\n}\n\n.glyph-reload:before {\n  content: \"\\ebce\";\n}\n\n.glyph-remove-eye-filled:before {\n  content: \"\\ebcf\";\n}\n\n.glyph-remove-eye:before {\n  content: \"\\ebd0\";\n}\n\n.glyph-rename:before {\n  content: \"\\ebd1\";\n}\n\n.glyph-replace:before {\n  content: \"\\ebd2\";\n}\n\n.glyph-report-barchart:before {\n  content: \"\\ebd3\";\n}\n\n.glyph-report-linechart:before {\n  content: \"\\ebd4\";\n}\n\n.glyph-report-text:before {\n  content: \"\\ebd5\";\n}\n\n.glyph-reset:before {\n  content: \"\\ebd6\";\n}\n\n.glyph-restore-backup-filled:before {\n  content: \"\\ebd7\";\n}\n\n.glyph-restore-backup-pc:before {\n  content: \"\\ebd8\";\n}\n\n.glyph-restore-backup:before {\n  content: \"\\ebd9\";\n}\n\n.glyph-rhomb-filled:before {\n  content: \"\\ebda\";\n}\n\n.glyph-rhomb:before {\n  content: \"\\ebdb\";\n}\n\n.glyph-road-filled:before {\n  content: \"\\ebdc\";\n}\n\n.glyph-road:before {\n  content: \"\\ebdd\";\n}\n\n.glyph-rocket-filled:before {\n  content: \"\\ebde\";\n}\n\n.glyph-rocket:before {\n  content: \"\\ebdf\";\n}\n\n.glyph-route-target:before {\n  content: \"\\ebe0\";\n}\n\n.glyph-route:before {\n  content: \"\\ebe1\";\n}\n\n.glyph-scatterplot:before {\n  content: \"\\ebe2\";\n}\n\n.glyph-scheduler-filled:before {\n  content: \"\\ebe3\";\n}\n\n.glyph-scheduler:before {\n  content: \"\\ebe4\";\n}\n\n.glyph-screen-filled:before {\n  content: \"\\ebe5\";\n}\n\n.glyph-screen:before {\n  content: \"\\ebe6\";\n}\n\n.glyph-screenshot-filled:before {\n  content: \"\\ebe7\";\n}\n\n.glyph-screenshot:before {\n  content: \"\\ebe8\";\n}\n\n.glyph-script-add:before {\n  content: \"\\ebe9\";\n}\n\n.glyph-script:before {\n  content: \"\\ebea\";\n}\n\n.glyph-scripts:before {\n  content: \"\\ebeb\";\n}\n\n.glyph-search:before {\n  content: \"\\ebec\";\n}\n\n.glyph-share-filled:before {\n  content: \"\\ebed\";\n}\n\n.glyph-share:before {\n  content: \"\\ebee\";\n}\n\n.glyph-shopping-cart-filled:before {\n  content: \"\\ebef\";\n}\n\n.glyph-shopping-cart:before {\n  content: \"\\ebf0\";\n}\n\n.glyph-shout-filled:before {\n  content: \"\\ebf1\";\n}\n\n.glyph-shout:before {\n  content: \"\\ebf2\";\n}\n\n.glyph-sign-language:before {\n  content: \"\\ebf3\";\n}\n\n.glyph-signal-strength-0:before {\n  content: \"\\ebf4\";\n}\n\n.glyph-signal-strength-1:before {\n  content: \"\\ebf5\";\n}\n\n.glyph-signal-strength-2:before {\n  content: \"\\ebf6\";\n}\n\n.glyph-signal-strength-3:before {\n  content: \"\\ebf7\";\n}\n\n.glyph-signal-strength-4:before {\n  content: \"\\ebf8\";\n}\n\n.glyph-signal-strength-5:before {\n  content: \"\\ebf9\";\n}\n\n.glyph-signal-strength-6:before {\n  content: \"\\ebfa\";\n}\n\n.glyph-signal-strength-7:before {\n  content: \"\\ebfb\";\n}\n\n.glyph-signal-strength-8:before {\n  content: \"\\ebfc\";\n}\n\n.glyph-simit-component:before {\n  content: \"\\ebfd\";\n}\n\n.glyph-simit-macro-component-editor:before {\n  content: \"\\ebfe\";\n}\n\n.glyph-simit-macro:before {\n  content: \"\\ebff\";\n}\n\n.glyph-single-check:before {\n  content: \"\\ec00\";\n}\n\n.glyph-skip-back-filled:before {\n  content: \"\\ec01\";\n}\n\n.glyph-skip-back:before {\n  content: \"\\ec02\";\n}\n\n.glyph-skip-filled:before {\n  content: \"\\ec03\";\n}\n\n.glyph-skip:before {\n  content: \"\\ec04\";\n}\n\n.glyph-snowflake:before {\n  content: \"\\ec05\";\n}\n\n.glyph-sort-ascending:before {\n  content: \"\\ec06\";\n}\n\n.glyph-sort-descending:before {\n  content: \"\\ec07\";\n}\n\n.glyph-sort:before {\n  content: \"\\ec08\";\n}\n\n.glyph-sound-loud-filled:before {\n  content: \"\\ec09\";\n}\n\n.glyph-sound-loud:before {\n  content: \"\\ec0a\";\n}\n\n.glyph-sound-mute-filled:before {\n  content: \"\\ec0b\";\n}\n\n.glyph-sound-mute:before {\n  content: \"\\ec0c\";\n}\n\n.glyph-sound-off-filled:before {\n  content: \"\\ec0d\";\n}\n\n.glyph-sound-off:before {\n  content: \"\\ec0e\";\n}\n\n.glyph-sound-quiet-filled:before {\n  content: \"\\ec0f\";\n}\n\n.glyph-sound-quiet:before {\n  content: \"\\ec10\";\n}\n\n.glyph-spatial:before {\n  content: \"\\ec11\";\n}\n\n.glyph-split-horizontally:before {\n  content: \"\\ec12\";\n}\n\n.glyph-split-vertically:before {\n  content: \"\\ec13\";\n}\n\n.glyph-standby:before {\n  content: \"\\ec14\";\n}\n\n.glyph-star-add-filled:before {\n  content: \"\\ec15\";\n}\n\n.glyph-star-add:before {\n  content: \"\\ec16\";\n}\n\n.glyph-star-cancelled-filled:before {\n  content: \"\\ec17\";\n}\n\n.glyph-star-cancelled:before {\n  content: \"\\ec18\";\n}\n\n.glyph-star-filled:before {\n  content: \"\\ec19\";\n}\n\n.glyph-star-list-filled:before {\n  content: \"\\ec1a\";\n}\n\n.glyph-star-list:before {\n  content: \"\\ec1b\";\n}\n\n.glyph-star:before {\n  content: \"\\ec1c\";\n}\n\n.glyph-start-data-analysis:before {\n  content: \"\\ec1d\";\n}\n\n.glyph-steering-user-filled:before {\n  content: \"\\ec1e\";\n}\n\n.glyph-steering-user:before {\n  content: \"\\ec1f\";\n}\n\n.glyph-steering:before {\n  content: \"\\ec20\";\n}\n\n.glyph-stethoscope:before {\n  content: \"\\ec21\";\n}\n\n.glyph-stop-filled:before {\n  content: \"\\ec22\";\n}\n\n.glyph-stop:before {\n  content: \"\\ec23\";\n}\n\n.glyph-success-filled:before {\n  content: \"\\ec24\";\n}\n\n.glyph-success:before {\n  content: \"\\ec25\";\n}\n\n.glyph-sun-filled:before {\n  content: \"\\ec26\";\n}\n\n.glyph-sun:before {\n  content: \"\\ec27\";\n}\n\n.glyph-support:before {\n  content: \"\\ec28\";\n}\n\n.glyph-surveillance-filled:before {\n  content: \"\\ec29\";\n}\n\n.glyph-surveillance:before {\n  content: \"\\ec2a\";\n}\n\n.glyph-svg-document:before {\n  content: \"\\ec2b\";\n}\n\n.glyph-swap-left-right:before {\n  content: \"\\ec2c\";\n}\n\n.glyph-switch-slider:before {\n  content: \"\\ec2d\";\n}\n\n.glyph-table-columns:before {\n  content: \"\\ec2e\";\n}\n\n.glyph-table-rows:before {\n  content: \"\\ec2f\";\n}\n\n.glyph-table-settings:before {\n  content: \"\\ec30\";\n}\n\n.glyph-table:before {\n  content: \"\\ec31\";\n}\n\n.glyph-tag-filled:before {\n  content: \"\\ec32\";\n}\n\n.glyph-tag-plus-filled:before {\n  content: \"\\ec33\";\n}\n\n.glyph-tag-plus:before {\n  content: \"\\ec34\";\n}\n\n.glyph-tag:before {\n  content: \"\\ec35\";\n}\n\n.glyph-tasks-all:before {\n  content: \"\\ec36\";\n}\n\n.glyph-tasks-done:before {\n  content: \"\\ec37\";\n}\n\n.glyph-tasks-open:before {\n  content: \"\\ec38\";\n}\n\n.glyph-text-circle-rectangle-filled:before {\n  content: \"\\ec39\";\n}\n\n.glyph-text-circle-rectangle:before {\n  content: \"\\ec3a\";\n}\n\n.glyph-text-document:before {\n  content: \"\\ec3b\";\n}\n\n.glyph-text:before {\n  content: \"\\ec3c\";\n}\n\n.glyph-threshold-cancelled:before {\n  content: \"\\ec3d\";\n}\n\n.glyph-threshold-off:before {\n  content: \"\\ec3e\";\n}\n\n.glyph-threshold-on:before {\n  content: \"\\ec3f\";\n}\n\n.glyph-to-be-published:before {\n  content: \"\\ec40\";\n}\n\n.glyph-to-search:before {\n  content: \"\\ec41\";\n}\n\n.glyph-topic-filled:before {\n  content: \"\\ec42\";\n}\n\n.glyph-topic:before {\n  content: \"\\ec43\";\n}\n\n.glyph-touch-filled:before {\n  content: \"\\ec44\";\n}\n\n.glyph-touch:before {\n  content: \"\\ec45\";\n}\n\n.glyph-trashcan-filled:before {\n  content: \"\\ec46\";\n}\n\n.glyph-trashcan:before {\n  content: \"\\ec47\";\n}\n\n.glyph-tree:before {\n  content: \"\\ec48\";\n}\n\n.glyph-trend:before {\n  content: \"\\ec49\";\n}\n\n.glyph-triangle-filled:before {\n  content: \"\\ec4a\";\n}\n\n.glyph-triangle:before {\n  content: \"\\ec4b\";\n}\n\n.glyph-truck-filled:before {\n  content: \"\\ec4c\";\n}\n\n.glyph-truck:before {\n  content: \"\\ec4d\";\n}\n\n.glyph-tulip-filled:before {\n  content: \"\\ec4e\";\n}\n\n.glyph-tulip:before {\n  content: \"\\ec4f\";\n}\n\n.glyph-txt-document:before {\n  content: \"\\ec50\";\n}\n\n.glyph-undo:before {\n  content: \"\\ec51\";\n}\n\n.glyph-ungroup:before {\n  content: \"\\ec52\";\n}\n\n.glyph-unlock-filled:before {\n  content: \"\\ec53\";\n}\n\n.glyph-unlock-plant-filled:before {\n  content: \"\\ec54\";\n}\n\n.glyph-unlock-plant:before {\n  content: \"\\ec55\";\n}\n\n.glyph-unlock:before {\n  content: \"\\ec56\";\n}\n\n.glyph-upload-document-note:before {\n  content: \"\\ec57\";\n}\n\n.glyph-upload-success:before {\n  content: \"\\ec58\";\n}\n\n.glyph-upload:before {\n  content: \"\\ec59\";\n}\n\n.glyph-upper-limit:before {\n  content: \"\\ec5a\";\n}\n\n.glyph-user-check-filled:before {\n  content: \"\\ec5b\";\n}\n\n.glyph-user-check:before {\n  content: \"\\ec5c\";\n}\n\n.glyph-user-filled:before {\n  content: \"\\ec5d\";\n}\n\n.glyph-user-management-filled:before {\n  content: \"\\ec5e\";\n}\n\n.glyph-user-management:before {\n  content: \"\\ec5f\";\n}\n\n.glyph-user-profile-filled:before {\n  content: \"\\ec60\";\n}\n\n.glyph-user-profile:before {\n  content: \"\\ec61\";\n}\n\n.glyph-user-settings-filled:before {\n  content: \"\\ec62\";\n}\n\n.glyph-user-settings:before {\n  content: \"\\ec63\";\n}\n\n.glyph-user:before {\n  content: \"\\ec64\";\n}\n\n.glyph-validate:before {\n  content: \"\\ec65\";\n}\n\n.glyph-vdi-folder:before {\n  content: \"\\ec66\";\n}\n\n.glyph-version-history:before {\n  content: \"\\ec67\";\n}\n\n.glyph-video-file-filled:before {\n  content: \"\\ec68\";\n}\n\n.glyph-video-file:before {\n  content: \"\\ec69\";\n}\n\n.glyph-warning-filled:before {\n  content: \"\\ec6a\";\n}\n\n.glyph-warning-rhomb-filled:before {\n  content: \"\\ec6b\";\n}\n\n.glyph-warning-rhomb:before {\n  content: \"\\ec6c\";\n}\n\n.glyph-warning:before {\n  content: \"\\ec6d\";\n}\n\n.glyph-water-bathing:before {\n  content: \"\\ec6e\";\n}\n\n.glyph-water-fish:before {\n  content: \"\\ec6f\";\n}\n\n.glyph-water-sunbathing:before {\n  content: \"\\ec70\";\n}\n\n.glyph-waveform:before {\n  content: \"\\ec71\";\n}\n\n.glyph-webcam-filled:before {\n  content: \"\\ec72\";\n}\n\n.glyph-webcam:before {\n  content: \"\\ec73\";\n}\n\n.glyph-wlan-off:before {\n  content: \"\\ec74\";\n}\n\n.glyph-wlan-strength-0:before {\n  content: \"\\ec75\";\n}\n\n.glyph-wlan-strength-1:before {\n  content: \"\\ec76\";\n}\n\n.glyph-wlan-strength-2:before {\n  content: \"\\ec77\";\n}\n\n.glyph-wlan-strength-3:before {\n  content: \"\\ec78\";\n}\n\n.glyph-work-case-filled:before {\n  content: \"\\ec79\";\n}\n\n.glyph-work-case:before {\n  content: \"\\ec7a\";\n}\n\n.glyph-x-axis-settings:before {\n  content: \"\\ec7b\";\n}\n\n.glyph-xls-document:before {\n  content: \"\\ec7c\";\n}\n\n.glyph-xml-document:before {\n  content: \"\\ec7d\";\n}\n\n.glyph-y-axis-settings:before {\n  content: \"\\ec7e\";\n}\n\n.glyph-youtube-filled:before {\n  content: \"\\ec7f\";\n}\n\n.glyph-youtube:before {\n  content: \"\\ec80\";\n}\n\n.glyph-zoom-in:before {\n  content: \"\\ec81\";\n}\n\n.glyph-zoom-out:before {\n  content: \"\\ec82\";\n}\n\n.glyph-zoom-selection:before {\n  content: \"\\ec83\";\n}\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n:host i {\n  color: inherit;\n  transition: color 150ms;\n}\n:host .svg-container {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n:host .svg-container > svg {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n:host .svg-container > svg [fill] {\n  fill: var(--theme-color-std-text);\n}\n:host .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #dddbdd;\n}\n:host .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  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));\n  animation: shimmer 2s infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n}\n:host(.size-12) .svg-container > svg {\n  height: 0.75rem;\n  width: 0.75rem;\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n}\n:host(.size-16) .svg-container > svg {\n  height: 1rem;\n  width: 1rem;\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n}\n:host(.size-32) .svg-container > svg {\n  height: 2rem;\n  width: 2rem;\n}","/*\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 { h, Host } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\nexport class Icon {\n  constructor() {\n    this.size = undefined;\n    this.color = undefined;\n    this.name = undefined;\n    this.src = undefined;\n    this.svgContent = undefined;\n  }\n  connectedCallback() {\n    this.loadIconContent();\n  }\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\n  }\n  render() {\n    const style = {};\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n    if (this.name && !this.svgContent) {\n      const iconName = this.name;\n      return (h(Host, { style: style, 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        } }, h(\"i\", { 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    }\n    return (h(Host, { style: style, 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      } }, this.svgContent ? (h(\"div\", { class: 'svg-container', innerHTML: this.svgContent })) : (h(\"span\", { class: \"skeleton-box\", style: {\n        width: '100%',\n        height: '100%',\n      } }))));\n  }\n  static get is() { return \"ix-icon\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() {\n    return {\n      \"$\": [\"icon.scss\"]\n    };\n  }\n  static get styleUrls() {\n    return {\n      \"$\": [\"icon.css\"]\n    };\n  }\n  static get properties() {\n    return {\n      \"size\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"'12' | '16' | '24' | '32'\",\n          \"resolved\": \"\\\"12\\\" | \\\"16\\\" | \\\"24\\\" | \\\"32\\\"\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Size of the icon\"\n        },\n        \"attribute\": \"size\",\n        \"reflect\": false\n      },\n      \"color\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Color of the icon\"\n        },\n        \"attribute\": \"color\",\n        \"reflect\": false\n      },\n      \"name\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Use one of our defined icon names e.g. `copy`.\"\n        },\n        \"attribute\": \"name\",\n        \"reflect\": true\n      },\n      \"src\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"Path to the svg\"\n        },\n        \"attribute\": \"src\",\n        \"reflect\": false\n      }\n    };\n  }\n  static get states() {\n    return {\n      \"svgContent\": {}\n    };\n  }\n  static get watchers() {\n    return [{\n        \"propName\": \"src\",\n        \"methodName\": \"loadIconContent\"\n      }, {\n        \"propName\": \"name\",\n        \"methodName\": \"loadIconContent\"\n      }];\n  }\n}\n//# sourceMappingURL=icon.js.map\n"],"version":3}

package/dist/components/ix-action-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxActionCard extends Components.IxActionCard, HTMLElement {}
+export const IxActionCard: {
+  prototype: IxActionCard;
+  new (): IxActionCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-action-card.js

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './card.js';
+import { d as defineCustomElement$4 } from './card-content.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ix-card{width:100%;height:100%}:host ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(.selected) ix-card{--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected) ix-card.card-insight{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-notification{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-alarm{--ix-card-background:var(--theme-color-alarm--active)}:host(.selected) ix-card.card-critical{--ix-card-background:var(--theme-color-critical--active)}:host(.selected) ix-card.card-warning{--ix-card-background:var(--theme-color-warning--active)}:host(.selected) ix-card.card-success{--ix-card-background:var(--theme-color-success--active)}:host(.selected) ix-card.card-info{--ix-card-background:var(--theme-color-info--active)}:host(.selected) ix-card.card-neutral{--ix-card-background:var(--theme-color-neutral--active)}";
+
+const IxActionCard$1 = /*@__PURE__*/ proxyCustomElement(class IxActionCard extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'insight';
+    this.icon = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.selected = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        selected: this.selected,
+      } }, h("ix-card", { variant: this.variant, class: 'pointer' }, h("ix-card-content", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : (''), this.heading ? (h("ix-typography", { variant: "large-title" }, this.heading)) : (''), this.subheading ? (h("ix-typography", { variant: "default-title-single", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", null)))));
+  }
+  static get style() { return actionCardCss; }
+}, [1, "ix-action-card", {
+    "variant": [1],
+    "icon": [1],
+    "heading": [1],
+    "subheading": [1],
+    "selected": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-action-card", "ix-card", "ix-card-content", "ix-icon", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-action-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IxActionCard$1);
+      }
+      break;
+    case "ix-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-card-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxActionCard = IxActionCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxActionCard, defineCustomElement };
+
+//# sourceMappingURL=ix-action-card.js.map

package/dist/components/ix-action-card.js.map

@@ -0,0 +1 @@
+{"file":"ix-action-card.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,08HAA08H;;MCsBn9HA,cAAY;;;;;mBAIc,SAAS;gBAKX,SAAS;;;oBAezB,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,IAC9C,2BACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,KAE7D,EAAE,CACH,EACA,IAAI,CAAC,OAAO,IACX,qBAAe,OAAO,EAAC,aAAa,IACjC,IAAI,CAAC,OAAO,CACC,KAEhB,EAAE,CACH,EACA,IAAI,CAAC,UAAU,IACd,qBACE,OAAO,EAAC,sBAAsB,EAC9B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,eAAa,CACG,CACV,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"sources":["./src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","./src/components/action-card/action-card.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n\n:host(:hover) {\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n}\n\n:host(:active) {\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n\n:host(.selected) {\n  ix-card {\n    --ix-card-border-color: var(--theme-color-dynamic);\n  }\n\n  ix-card.card-insight {\n    --ix-card-background: var(--theme-color-ghost--selected);\n  }\n\n  ix-card.card-notification {\n    --ix-card-background: var(--theme-color-ghost--selected);\n  }\n\n  ix-card.card-alarm {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n}\n","/*\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 } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n        }}\n      >\n        <ix-card variant={this.variant} class={'pointer'}>\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n            ) : (\n              ''\n            )}\n            {this.heading ? (\n              <ix-typography variant=\"large-title\">\n                {this.heading}\n              </ix-typography>\n            ) : (\n              ''\n            )}\n            {this.subheading ? (\n              <ix-typography\n                variant=\"default-title-single\"\n                color={this.variant === 'insight' ? 'soft' : undefined}\n              >\n                {this.subheading}\n              </ix-typography>\n            ) : null}\n            <slot></slot>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-basic-navigation.js

@@ -3,7 +3,7 @@ import { s as screenMode } from './service.js';
 import { d as defineCustomElement$3 } from './application-header.js';
 import { d as defineCustomElement$2 } from './burger-menu.js';
 
-const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}.mode-mobile.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{margin-left:0px;width:100%}";
+const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:3.25rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}.mode-mobile.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{margin-left:0px;width:100%}";
 
 const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation extends HTMLElement {
   constructor() {

package/dist/components/ix-basic-navigation.js.map

@@ -1 +1 @@
-{"file":"ix-basic-navigation.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,4jBAA4jB;;MCmB1kB,eAAe;;;;;sBAWL,KAAK;gBAEJ,SAAS;;EAE/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAID,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,UAAU;IAChB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5E;EAEO,gBAAgB;IACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,sBAAsB,CAAC;KACjD;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAC5B,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,GAAQ,CACH,IACtB,IAAI,EACR,WAAK,EAAE,EAAC,kBAAkB,GAAO,EACjC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAC7D,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=scoped","./src/components/basic-navigation/basic-navigation.tsx"],"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\n:host {\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .content {\n    display: flex;\n    height: calc(100% - 2.75rem);\n    width: calc(100% - 4rem);\n    position: relative;\n    margin-left: 4rem;\n    overflow: auto;\n  }\n\n  &.hide-header {\n    .content {\n      height: 100%;\n    }\n  }\n}\n\n:host(.mode-mobile) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  scoped: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n\n  @State() mode: Mode = 'desktop';\n\n  get menu(): HTMLIxMenuElement {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.appendMenu();\n      this.adjustMenuHeight();\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  private appendMenu() {\n    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\n  }\n\n  private adjustMenuHeight() {\n    if (!this.hideHeader) {\n      this.menu.style.height = 'calc(100% - 2.75rem)';\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div id=\"menu-placeholder\"></div>\n        <div class=\"content\" onClick={() => this.menu.toggleMenu(false)}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-basic-navigation.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,+jBAA+jB;;MCmB7kB,eAAe;;;;;sBAWL,KAAK;gBAEJ,SAAS;;EAE/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAID,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,UAAU;IAChB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5E;EAEO,gBAAgB;IACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,sBAAsB,CAAC;KACjD;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAC5B,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,GAAQ,CACH,IACtB,IAAI,EACR,WAAK,EAAE,EAAC,kBAAkB,GAAO,EACjC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAC7D,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=scoped","./src/components/basic-navigation/basic-navigation.tsx"],"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\n:host {\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .content {\n    display: flex;\n    height: calc(100% - 2.75rem);\n    width: calc(100% - 4rem);\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  &.hide-header {\n    .content {\n      height: 100%;\n    }\n  }\n}\n\n:host(.mode-mobile) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  scoped: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n\n  @State() mode: Mode = 'desktop';\n\n  get menu(): HTMLIxMenuElement {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.appendMenu();\n      this.adjustMenuHeight();\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  private appendMenu() {\n    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\n  }\n\n  private adjustMenuHeight() {\n    if (!this.hideHeader) {\n      this.menu.style.height = 'calc(100% - 2.75rem)';\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div id=\"menu-placeholder\"></div>\n        <div class=\"content\" onClick={() => this.menu.toggleMenu(false)}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-blind.js

@@ -12,13 +12,14 @@ import { d as defineCustomElement$2 } from './icon.js';
  */
 const a11yBoolean = (value) => (value ? 'true' : 'false');
 
-const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind .blind-header-title-default.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind ix-icon.sc-ix-blind{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
+const blindCss = ":host{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}:host .blind-header .collapse-icon{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}:host .blind-header .blind-header-title .blind-header-title-default,:host .blind-header .blind-header-title-basic .blind-header-title-default{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-open--color--hover)}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-open--color--active)}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header.closed{border-radius:var(--theme-blind--border-radius)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-closed--color--hover)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-closed--color--active)}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}";
 
 let sequentialInstanceId = 0;
 const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.collapsedChange = createEvent(this, "collapsedChange", 7);
     this.id = ++sequentialInstanceId;
     this.collapsed = false;
@@ -38,7 +39,7 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
     this.animateCollapse(this.collapsed);
   }
   get content() {
-    return this.hostElement.querySelector('.blind-content');
+    return this.hostElement.shadowRoot.querySelector('.blind-content');
   }
   animation(isCollapsed) {
     this.animateCollapse(isCollapsed);
@@ -83,10 +84,7 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
     return (h(Host, null, h("button", { class: {
         'blind-header': true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("span", { class: {
-        glyph: true,
-        'glyph-chevron-right-small': true,
-      }, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, h("slot", null)))));
@@ -96,7 +94,7 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
     "collapsed": ["animation"]
   }; }
   static get style() { return blindCss; }
-}, [6, "ix-blind", {
+}, [1, "ix-blind", {
     "collapsed": [1540],
     "label": [1],
     "icon": [1]