@c8y/style 1023.90.1 → 1023.96.0

package/markdown-files/scada-widget-preview.md

@@ -0,0 +1,73 @@
+ 
+
+### SCADA widget v2
+
+ 
+
+We're excited to introduce the **SCADA widget v2** for the Cumulocity IoT platform — a full Angular rewrite of the previous AngularJS-based SCADA widget, now with AI-assisted SVG generation, interactive placeholder creation, an in-platform code editor, and a modern web component rendering engine.  
+If you've been using the original SCADA widget, your existing configurations will continue to work in **legacy mode**, which preserves current rendering but does not support all of the new v2 features. To take full advantage of everything v2 offers, you can re-configure the widget using the new tools.
+
+<div class="p-16 m-auto col-lg-max">
+<img src="./c8y-style-assets/scada-widget-preview.png" alt="SCADA Widget" class="border-all fit-w">
+</div>
+
+&nbsp;
+
+### Key features
+
+&nbsp;
+
+#### AI-assisted SVG generation
+
+✅ **Generate with AI**: Describe your industrial system and let the AI agent generate an SVG visualization with placeholder mappings suggested based on the selected device's properties and measurements.\
+✅ **Context-aware suggestions**: The agent analyzes the device context (name, properties, supported measurements) and proposes relevant visualization options.\
+✅ **Analyze and suggest / Best guess**: Use the built-in prompt suggestions to either explore multiple visualization ideas or let the AI pick the most suitable one automatically.
+
+&nbsp;
+
+#### Interactive placeholder creation
+
+✅ **Automatic placeholder detection**: When uploading or pasting an SVG, all text and tspan elements are automatically marked as potential placeholders, ready to bind to device data.\
+✅ **Click-to-placeholder**: In the live widget preview, simply click a text or tspan element in the SVG to instantly convert it into a dynamic placeholder.\
+✅ **Copy placeholder expression**: Each mapping entry can be easily copied as a template expression to be pasted into SVG code.
+
+&nbsp;
+
+#### Modern web component rendering
+
+✅ **Lit-based web components**: SVG visualizations are rendered as isolated web components with full support for JavaScript template literals and reactive expressions.\
+✅ **`c8yScadaValues` API**: Access all mapped placeholder values directly in SVG expressions (e.g., `${this.c8yScadaValues?.temperature}`).\
+✅ **`c8yScadaFunctions` API**: Built-in helpers for navigation (`goToDeviceDetails`, `goToGroupDetails`) and alarm visualization (`getActiveAlarmsStatusClass`).\
+✅ **Conditional styling and dynamic calculations**: Apply CSS classes or compute values based on live data — colour-coded alarm indicators, progress bars, or threshold-based text colours work out of the box.
+
+&nbsp;
+
+#### Flexible SVG configuration
+
+✅ **Multiple input methods**: Upload an `.svg` file via drag-and-drop, paste SVG code directly, or generate it with AI — all from the same configuration section.\
+✅ **Display options**: Choose between *Full width* (stretches to widget width, overflowing area is scrollable) or *Contain* (entire SVG fits in the widget preserving aspect ratio) display modes.\
+✅ **Alignment controls**: When using the *Contain* mode, independently control horizontal and vertical alignment of the SVG within the widget.
+
+&nbsp;
+
+#### Advanced editor
+
+✅ **Edit SVG code directly on the platform**: The original SCADA widget required preparing and editing SVG files outside of Cumulocity IoT. The new *Advanced editor* lets you write and modify SVG code directly within the widget configuration — no external tooling needed.\
+✅ **Syntax highlighting and code completion**: The editor provides syntax highlighting and property key suggestions derived from the current placeholder mappings.\
+✅ **Live preview**: Changes in the editor are reflected immediately in the widget preview without saving.
+
+&nbsp;
+
+#### Compatibility with the classic SCADA widget
+
+✅ **Automatic legacy detection**: Existing SCADA widget configurations (including binary SVG files, per-device mappings, computed properties, and fieldbus mappings) are automatically recognized and run in legacy mode — no manual migration or data loss. Configurations running in legacy mode are clearly indicated.\
+✅ **Upgrade path**: You can re-configure any widget using the new v2 tools to leave legacy mode and unlock the full feature set.
+
+&nbsp;
+
+The **SCADA widget v2** is currently available in preview mode behind a feature flag.  
+We encourage you to explore it with your existing SVG assets, try generating a visualization with AI, and experience the new interactive placeholder workflow firsthand.
+
+&nbsp;
+
+---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1023.90.1",
+  "version": "1023.96.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/components/data-input/assets/_c8y-asset-selector.less

@@ -75,7 +75,6 @@ c8y-asset-selector{
   &__node {
     display: flex;
     max-height: @size-32;
-    min-width:fit-content;
     .collapse-btn {
       height: @size-32;
       width: @size-32;

package/styles/core/buttons/_buttons.less

@@ -190,6 +190,14 @@
   }
 }
 
+td,th{
+  >.btn-dot, .d-flex > .btn-dot{
+    margin-top: 0;
+    margin-bottom: 0;
+      height: @form-control-height-base!important;
+  }
+}
+
 .btn-icon-dot {
   display: flex;
   background: @component-background-default;

package/styles/core/buttons/_buttons.scss

@@ -193,6 +193,14 @@
   }
 }
 
+td,th{
+  >.btn-dot, .d-flex > .btn-dot{
+    margin-top: 0;
+    margin-bottom: 0;
+      height: $form-control-height-base!important;
+  }
+}
+
 .btn-icon-dot {
   display: flex;
   background: $component-background-default;

package/styles/dashboard/_c8y-dashboard-style.less

@@ -421,12 +421,6 @@ body fieldset > .dashboard-preview-slot {
   }
 }
 
-// Prevent interactions in dashboard preview slots except for maps
-.dashboard-preview-slot:not(:has(c8y-map)) {
-  pointer-events: none;
-  cursor: forbidden;
-}
-
 // data-grid--custom-column-header- styles
 .dashboard-preview-slot,
 .card-dashboard {

package/styles/dashboard/_c8y-dashboard-style.scss

@@ -425,7 +425,6 @@ body fieldset > .dashboard-preview-slot {
   }
 }
 
-
 // data-grid--custom-column-header- styles
 .dashboard-preview-slot, 
 .card-dashboard{

package/styles/layout/_bottom-drawer.less

@@ -67,4 +67,4 @@ c8y-bottom-drawer + c8y-bottom-drawer + c8y-bottom-drawer {
   .bottom-drawer {
     margin-top: 80px;
   }
-}
+}

package/styles/layout/_bottom-drawer.scss

@@ -57,3 +57,15 @@
     }
   }
 }
+
+// for when there are two bottom drawers open
+c8y-bottom-drawer + c8y-bottom-drawer {
+  .bottom-drawer {
+    margin-top: 40px;
+  }
+}
+c8y-bottom-drawer + c8y-bottom-drawer + c8y-bottom-drawer {
+  .bottom-drawer {
+    margin-top: 80px;
+  }
+}