@c8y/style 1024.5.1 → 1024.8.3

package/package.json

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

package/styles/components/data-display-and-visualization/_c8y-data-explorer.scss

@@ -68,7 +68,16 @@ c8y-chart {
   }
 }
 
-// Removed unused control utility class - verified 0 usages: .top-chart-bar
+// Partially restored for the legacy data point graph (MTM-66855): the max-width
+// constraint is what makes the selected-datapoints label truncate with an ellipsis.
+.top-chart-bar {
+  c8y-item-selector {
+    max-width: 170px;
+    @media (min-width: $screen-md-min) {
+      max-width: 240px;
+    }
+  }
+}
 
 .c8yGraphFill {
   min-height: 540px;
@@ -79,11 +88,15 @@ c8y-chart {
 
 // inside dashboard widgets
 .card-dashboard {
-  // Removed unused control utility class - verified 0 usages: .top-chart-bar
   c8y-measurements-icon-bar {
     width: 100%;
   }
-  // Removed unused control utility class - verified 0 usages: .top-chart-bar
+  // Partially restored for the legacy data point graph (MTM-66855)
+  .top-chart-bar {
+    c8y-item-selector {
+      max-width: 170px;
+    }
+  }
 }
 
 // Removed unused utility usage: .has-aggregation .measurement-icon-bar .c8y-realtime

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

@@ -5,6 +5,7 @@
 @use "../../../core/buttons/buttons";
 @use "../../../mixins/tab-focus";
 @use "../../../utilities/separators";
+@use "../../../mixins/c8y-scrollbar";
 /**
  * C8Y List Group - Modern list component with flexible layouts
  *
@@ -38,9 +39,11 @@
     }
 
     &.dropdown-menu {
+      @include c8y-scrollbar.c8y-scrollbar();
       width: 100%;
       max-height: 240px;
       overflow-y: auto;
+      background: $component-background-default;
     }
   }
 

package/styles/components/data-input/_dtm-icon-selector.scss

@@ -17,7 +17,7 @@
 .dtm-icon-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-
+  gap: $size-4;
   @media(min-width: $screen-sm-min) {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
@@ -31,12 +31,75 @@
     display: flex;
     align-items: stretch;
     justify-content: stretch;
+    position: relative;
 
     &--selected {
       >button {
         box-shadow: inset 0 0 0 2px $component-color-focus  !important;
       }
     }
+
+    &--overridden, &:has(.dtm-icon-grid__actions .dlt-c8y-icon-pencil) {
+      > button {
+        outline: 1px dotted $component-border-color;
+        outline-offset: -2px;
+      }
+    }
+
+    .dtm-icon-grid__override-marker {
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      font-size: 10px;
+      line-height: 1;
+      color: $tag--color-info;
+      background-color: $tag--background-info;
+      border: 1px solid $tag--color-info;
+      border-radius: 50%;
+    }
+
+    .dtm-icon-grid__actions {
+      opacity: 0;
+      display: flex;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      gap: 2px;
+      z-index: 1;
+      transform: translate(-4px, -50%);
+      transition: all .15s ease;
+      @media (max-width: $screen-xs-max) {
+        flex-direction: column;
+        gap: 1px;
+        right: 1px;
+      }
+      .btn-dot{
+        background-color: $component-background-default;
+        border-radius: 50%!important;
+        border: 1px solid $component-border-color;
+      }
+    }
+
+    &:hover,
+    &:focus-within {
+      .dtm-icon-grid__actions {
+       
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .dtm-icon-grid__btn{
+        box-shadow: inset 0 0 0 1px $component-border-color;
+        color: inherit;
+      }
+    }
+
   }
 
   &__btn {
@@ -47,15 +110,20 @@
     padding: $size-8;
     background: $component-background-default;
     width: 100%;
+    border-radius: $size-8;
 
     >i {
+      display: inline-block;
+      width: 1.1em;
+      height: 1.1em;
+      line-height: 1;
       color: $gray-30;
       margin-bottom: 4px;
     }
 
     &:hover,
     &:focus {
-      box-shadow: inset 0 0 0 1px $component-color-focus;
+      box-shadow: inset 0 0 0 1px $component-border-color;
       color: inherit;
     }
 

package/styles/components/data-input/assets/_c8y-child-assets-selector.scss

@@ -146,7 +146,9 @@ c8y-item-selector {
 }
 
 .dropdown-menu.multiselect-container {
-  .dropdown.open & {
+  // body.uib-dropdown-open covers menus rendered with dropdown-append-to-body
+  .dropdown.open &,
+  body.uib-dropdown-open > & {
     overflow: auto !important;
     max-height: 278px;
     min-width: 240px;

package/styles/core/overlays/_dropdowns.scss

@@ -254,6 +254,29 @@ bs-dropdown-container,
   }
 }
 
+.dropdown.open .dropdown-menu--select:has(.dropdown-menu_sticky-top){
+  display: flex!important;
+  flex-direction: column;
+  .c8y-list__item{
+    order: 1;
+  }
+  .dropdown-menu_sticky-top{
+    order: 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    padding: $size-8 $size-16;
+    .form-group{
+      margin-bottom: 0;
+    }
+  }
+   .dropdown-menu_sticky-bottom{
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    padding: $size-8 $size-16;
+  }
+}
 
 //dropdown menu when added to body
 @keyframes showDropdown {