@c8y/style 1023.85.1 → 1023.88.1

package/helper-scripts/convert-scss-to-less.sh

@@ -105,8 +105,7 @@ convert_syntax() {
     print_info "Removing SCSS-specific @use imports and redundant variable @use imports"
   fi
   content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"']sass:/d')
-  content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"'][^"'"'"']*variables\/index["'"'"']/d')
-  content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"'][^"'"'"']*variables\/_login-vars["'"'"']/d')
+  content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"'][^"'"'"']*variables\/[^"'"'"']*["'"'"']/d')
 
   # 0b. Convert string.unquote() to ~'' BEFORE other conversions
   if [[ $VERBOSE == true ]]; then
@@ -178,8 +177,7 @@ convert_syntax() {
     print_info "Removing redundant variable imports (LESS has global scope)"
   fi
   # Remove any import of variables/index.less or _login-vars.less
-  content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/index\.less/d')
-  content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/_login-vars\.less/d')
+  content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\//d')
 
   # 1. Remove @content keyword (LESS doesn't support it)
   # Mixins with @content need manual expansion - just remove the keyword itself

package/markdown-files/data-prep-preview.md

@@ -0,0 +1,54 @@
+ 
+
+### Data Preparation
+
+ 
+
+Data Preparation provides an AI-assisted environment for creating and managing transformation rules that convert raw device messages into the Cumulocity data model.
+
+IoT devices send data in many different formats, from simple JSON payloads to device-specific message structures. Data Preparation empowers you to standardize this data before it is used by Cumulocity applications and services.
+
+Data Preparation uses smart functions to process incoming messages and produce Cumulocity-compliant measurements, events, alarms, or managed objects. The AI assistant helps you describe your business context and generate JavaScript-based transformation logic, which you can review, edit, test, and deploy as part of a rule.
+
+ 
+
+### Prerequisites
+
+ 
+
+✅ **AI Provider:**
+
+- Enable the AI Agent Manager public preview (available next to this Data Preparation preview feature).
+- Configure a global AI provider in the Agent Manager. See [Getting started by configuring a global provider](https://cumulocity.com/docs/ai/aim-introduction/#getting-started-by-configuring-a-global-provider).
+
+✅ **Permissions:**
+To get started, ensure your user role is configured with the following ADMIN permissions:
+
+- **Data Preparation rules** – Create, edit, and delete draft rules.
+- **Data Preparation deployments** – Deploy rules in production.
+
+By default, both permissions are included in the "Admin" role.
+
+ 
+
+### Why use Data Preparation?
+
+ 
+
+✅ **Convert raw device payloads:** Transform incoming messages into standard Cumulocity measurements, events, alarms, and managed objects.
+
+✅ **Use AI-assisted rule creation:** Describe the required transformation in natural language, or automatically generate the transformation from your device data.
+
+✅ **Validate before deployment:** Test transformations with sample payloads or live MQTT messages and compare the generated Cumulocity output before deploying.
+
+✅ **Process live MQTT traffic:** Deploy rules that listen to MQTT Service topics and process matching incoming messages automatically.
+
+✅ **Prepare data for use by other applications:** Normalize raw device messages into Cumulocity-compliant objects before they are used by applications such as Streaming Analytics.
+
+ 
+
+For step-by-step onboarding and first rule deployment, refer to the [Getting started](https://cumulocity.com/docs/data-preparation/getting-started-dataprep/#create-rule) section in the Data Preparation documentation.
+
+ 
+
+For more details, refer to the [Data Preparation documentation](https://cumulocity.com/docs/data-preparation/data-preparation-introduction/#datapreparation).

package/package.json

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

package/styles/base/_type.less

@@ -1,4 +1,3 @@
-@import "../../variables/_dlt-c8y-icons-vars.less";
 @import "../mixins/_text-overflow.less";
 
 /**

package/styles/components/_markdown-content.less

@@ -13,9 +13,6 @@
  * - Font-weight values (500, 600): Typography weights
  */
 
-// NOTE: SCSS mixin with @content removed - manually expanded below
-// @mixin heading-elements was used in SCSS but LESS doesn't support @content
-
 .markdown-content {
   h1,
   h2,
@@ -29,7 +26,6 @@
     max-width: 800px;
   }
 
-  // Manually expanded from @include heading-elements mixin
   h1,
   h2,
   h3,
@@ -75,4 +71,25 @@
       opacity: 0.65;
     }
   }
+
+  table{
+    &:extend(.table);
+  }
+}
+
+// ignore max width when used in the widget
+c8y-markdown-widget-view,
+c8y-widget-preview{
+  .markdown-content {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    ul,
+    ol {
+      max-width: unset;
+    }
+  }
 }

package/styles/components/_markdown-content.scss

@@ -1,5 +1,6 @@
 @use "../../variables/index" as *;
 
+@use "data-display-and-visualization/tables/tables" as *;
 /**
  * Markdown Content - Styling for markdown rendered content
  *
@@ -79,4 +80,25 @@
       opacity: 0.65;
     }
   }
+
+  table{
+    @extend .table;
+  }
+}
+
+// ignore max width when used in the widget
+c8y-markdown-widget-view,
+c8y-widget-preview{
+  .markdown-content {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    ul,
+    ol {
+      max-width: unset;
+    }
+  }
 }

package/styles/components/data-display-and-visualization/lists/_c8y-list-group.less

@@ -1,5 +1,4 @@
 
-@import "../../../../variables/_dlt-c8y-icons-vars.less";
 @import "../../../animations/_component-animations.less";
 @import "../../../core/buttons/_buttons.less";
 @import "../../../mixins/_tab-focus.less";
@@ -158,7 +157,7 @@
     > .expanded,
     &.expanded {
       background-color: @component-background-expanded;
-      &:extend(.separator-bottom);
+      .separator-bottom();
       --c8y-nav-tabs-background-active: @{component-background-expanded};
 
       .c8y-list__item__title {
@@ -541,6 +540,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
   .full-w-collapse &{
     padding: @component-padding;
+    c8y-widget-config-section &{
+      padding-top: 0;
+    }
   }
 }
 

package/styles/components/data-display-and-visualization/lists/_c8y-list-group.scss

@@ -4,7 +4,7 @@
 @use "../../../animations/component-animations";
 @use "../../../core/buttons/buttons";
 @use "../../../mixins/tab-focus";
-
+@use "../../../utilities/separators";
 /**
  * C8Y List Group - Modern list component with flexible layouts
  *
@@ -542,6 +542,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
   .full-w-collapse &{
     padding: $component-padding;
+    c8y-widget-config-section &{
+      padding-top: 0;
+    }
   }
 }
 
@@ -634,14 +637,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
       content: '';
       transition: top 0.35s linear;
     }
-    //TODO: need to fix this when using the virtual scroll, for now let's leave it as is
-    // &:first-child::before {
-    //   top: 50%;
-    // }
 
-    // &:last-of-type::before {
-    //   bottom: 50%;
-    // }
     &::after {
       position: absolute;
       top: 50%;

package/styles/components/data-display-and-visualization/lists/_list-group.less

@@ -1,4 +1,3 @@
-@import "../../../../variables/_dlt-c8y-icons-vars.less";
 @import "../../../mixins/_icon-base.less";
 @import "../../../mixins/_list-group.less";
 @import "../../../mixins/_tab-focus.less";

package/styles/components/navigation-and-layout/navigation/_pagination.less

@@ -1,5 +1,4 @@
 
-@import "../../../../variables/_dlt-c8y-icons-vars.less";
 @import "../../../mixins/_icon-base.less";
 @import "../../../mixins/_pagination.less";
 

package/styles/core/forms/_forms.less

@@ -1,4 +1,3 @@
-@import "../../../variables/_dlt-c8y-icons-vars.less";
 @import "../../icons/_c8y-glyphs.less";
 @import "../../mixins/_c8y-scrollbar.less";
 @import "../../mixins/_forms.less";

package/styles/core/forms/_input-groups.less

@@ -1,5 +1,3 @@
-@import "../../../variables/_dlt-c8y-icons-vars.less";
-
 /**
  * Input Groups - Form input groups with addons and buttons
  *

package/styles/core/overlays/_c8y-dashboard-modal.less

@@ -1,6 +1,4 @@
 
-@import "../../../variables/_dlt-c8y-icons-vars.less";
-
 /**
  * C8Y Dashboard Modal - Dashboard selection modal styles
  *

package/styles/core/overlays/_c8y-wizard.less

@@ -1,4 +1,3 @@
-@import "../../../variables/_dlt-c8y-icons-vars.less";
 @import "../../mixins/_shadows-helper.less";
 
 /**

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

@@ -1,7 +1,5 @@
-
-@import "../../variables/_dlt-c8y-icons-vars.less";
-@import "../mixins/_c8y-scrollbar.less";
-@import "../mixins/_icon-base.less";
+@import '../mixins/_c8y-scrollbar.less';
+@import '../mixins/_icon-base.less';
 
 /**
  * Dashboard Styles - Grid-based dashboard layout with drag-and-drop
@@ -159,8 +157,6 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
     left: 0 !important;
   }
 
-
-
   .dashboard {
     top: 0;
     left: 0;
@@ -250,6 +246,25 @@ body fieldset > .dashboard-preview-slot {
   border: 0;
   padding: 0;
   margin: 0 !important;
+  flex-grow: 1;
+  min-height: 0;
+  grid-template-rows: repeat(1, 1fr);
+
+  .card-inner-scroll {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    > * {
+      flex: 1 1 0;
+      min-height: 0;
+    }
+  }
+  c8y-local-controls,
+  c8y-global-context-widget-wrapper {
+    flex-grow: 0 !important;
+    min-height: min-content !important;
+  }
 }
 
 // title hidden
@@ -264,7 +279,6 @@ body fieldset > .dashboard-preview-slot {
       width: 100%;
       height: 0;
       border: 0;
-      pointer-events: none;
       &:after {
         display: none;
       }
@@ -406,19 +420,19 @@ body fieldset > .dashboard-preview-slot {
   }
 }
 // Prevent interactions in dashboard preview slots except for maps
-.dashboard-preview-slot:not(:has(c8y-map)){
+.dashboard-preview-slot:not(:has(c8y-map)) {
   pointer-events: none;
   cursor: forbidden;
 }
 
 // data-grid--custom-column-header- styles
 .dashboard-preview-slot,
-.card-dashboard{
-  .table-data-grid-header > .h4{
+.card-dashboard {
+  .table-data-grid-header > .h4 {
     display: none;
   }
-  .content-fullpage{
-    height: 100%!important;
+  .content-fullpage {
+    height: 100% !important;
   }
   c8y-asset-table-widget-view.hide-footer {
     .table-data-grid-footer {

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

@@ -252,6 +252,23 @@ body fieldset > .dashboard-preview-slot {
   border: 0;
   padding: 0;
   margin: 0 !important;
+  flex-grow: 1;
+  min-height: 0;
+  grid-template-rows: repeat(1, 1fr);
+
+  .card-inner-scroll {
+    display: flex;
+    flex-direction: column;
+
+    > * {
+      flex: 1 1 0;
+      min-height: 0;
+    }
+  }
+  c8y-local-controls, c8y-global-context-widget-wrapper {
+    flex-grow: 0!important;
+    min-height: min-content!important;
+  }
 }
 
 // title hidden
@@ -266,7 +283,6 @@ body fieldset > .dashboard-preview-slot {
       width: 100%;
       height: 0;
       border: 0;
-      pointer-events: none;
       &:after {
         display: none;
       }
@@ -408,11 +424,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, 

package/styles/icons/_c8y-icons.less

@@ -1,5 +1,4 @@
 
-@import "../../variables/_dlt-c8y-icons-vars.less";
 @import "../mixins/_icon-base.less";
 
 /**
@@ -1204,4 +1203,10 @@ c8y-icon-selector-wrapper{
   &:hover .showOnHover{
     opacity: 1;
   }
+
+  .form-group-sm &{
+    > div{
+      min-height: @form-control-height-sm;
+    }
+  }
 }

package/styles/icons/_c8y-icons.scss

@@ -1206,4 +1206,9 @@ c8y-icon-selector-wrapper{
   &:hover .showOnHover{
     opacity: 1;
   }
+  .form-group-sm &{
+    > div{
+      min-height: $form-control-height-sm;
+    }
+  }
 }

package/styles/icons/_dlt-c8y-icons.less

@@ -1,5 +1,4 @@
 
-@import "../../variables/_dlt-c8y-icons-vars.less";
 @import "./_c8y-icons.less";
 
 /**

package/styles/vendor/datepicker/_bs-datepicker.less

@@ -1,5 +1,4 @@
 
-@import "../../../variables/_dlt-c8y-icons-vars.less";
 @import "../../mixins/_color-mixins.less";
 @import "../../mixins/_icon-base.less";
 @import "../../mixins/_shadows-helper.less";

package/variables/_forms-vars.less

@@ -1,3 +1,4 @@
+
 // label
 @form-label-text-transform:                 var(--c8y-form-label-text-transform);
 @form-label-font-weight:                    var(--c8y-form-label-font-weight);