@c8y/style 1023.48.2 → 1023.50.2

package/markdown-files/asset-table-widget-preview.md

@@ -0,0 +1,63 @@
+### New Asset Table Widget
+
+ 
+
+We're excited to introduce the **next-generation Asset Table Widget** for the Cumulocity IoT platform — delivering a more powerful, flexible, and visually refined data grid experience.  
+This new widget provides deeper insights into your assets, enables advanced filtering and sorting options, and introduces a smarter configuration workflow — all while maintaining backward compatibility.
+
+<div class="p-16 m-auto col-lg-max">
+<img src="./c8y-style-assets/asset-table-pr.png" alt="Asset Table Widget" class="border-all fit-w">
+</div>
+
+&nbsp;
+
+### Key features
+
+&nbsp;
+
+#### Enhanced visualization
+
+✅ **Modern data grid**: Experience a refreshed, responsive grid layout optimized for large datasets and improved readability.\
+✅ **Dynamic column management**: Choose exactly which fields to display, reorder them, and adjust widths intuitively.\
+✅ **Adaptive display options**: Switch between compact and detailed views to match your monitoring needs.
+
+&nbsp;
+
+#### Powerful filtering & sorting
+
+✅ **Column-based filtering**: Apply precise filters directly on any column with support for text, number, date, and boolean types.\
+✅ **Advanced date filters**: Use “from” and “to” date pickers for time-based filtering — with automatic `.date` mapping for Cumulocity fields.\
+✅ **Multi-level sorting**: Sort by one or multiple columns for detailed data analysis.
+
+&nbsp;
+
+#### Double-filtering mode
+
+✅ **Config-level filtering**: Define default filters in the configuration screen — perfect for pre-filtering large asset sets.\
+✅ **Runtime filtering**: Apply additional filters directly in the view without losing your preconfigured defaults.\
+✅ **Combined logic**: Both layers work together seamlessly, so you can refine results on the fly while preserving your configuration baseline.
+
+&nbsp;
+
+#### Improved customization
+
+✅ **Extended display options**: Tailor how your grid looks and behaves — including pagination, column visibility, and layout density.\
+✅ **Custom column types**: Easily add new column renderers, such as date, status, or icon-based representations.\
+✅ **Persistent preferences**: User-selected display and filter settings can be retained between sessions.
+
+&nbsp;
+
+#### Developer & admin experience
+
+✅ **Reusable configuration model**: Designed to integrate cleanly with the widget configuration framework.\
+✅ **Modular filtering system**: Easily extend or replace filtering logic for advanced use cases.\
+✅ **Backward compatible**: Existing configurations continue to work out of the box with no migration effort required.
+
+&nbsp;
+
+The new **Asset Table Widget** offers a more interactive and efficient way to explore your device and asset data.  
+We invite you to try it out, experiment with the new double-filtering feature, and experience the improved control and performance firsthand.
+
+&nbsp;
+
+---

package/markdown-files/datapoint-graph-preview.md

@@ -1,11 +1,11 @@
  
  
 
-### 📊 Data Point Graph: Enhanced Visualization & Real-Time Insights
+### 📊 Data Graph: Enhanced Visualization & Real-Time Insights
 
   
 
-The Data Point Graph has been upgraded with new capabilities and expanded customization options, making it an even more powerful tool for visualizing and analyzing data trends. This enhancement ensures better performance, improved usability, and seamless integration with global time contexts.
+The Data Graph has been upgraded with new capabilities and expanded customization options, making it an even more powerful tool for visualizing and analyzing data trends. This enhancement ensures better performance, improved usability, and seamless integration with global time contexts.
 
 With these improvements, users can effortlessly monitor alarms and events, fine-tune charts for precise analysis, and dynamically interact with their data, all within an intuitive interface.
 
@@ -69,7 +69,7 @@ These enhancements ensure users can navigate their data efficiently and gain dee
 
   
 
-This major upgrade to the Data Point Graph delivers:
+This major upgrade to the Data Graph delivers:
 
   
 

package/package.json

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

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

@@ -1,8 +1,7 @@
-
-@import "../../../../variables/_dlt-c8y-icons-vars.less";
-@import "../../../animations/_component-animations.less";
-@import "../../../core/buttons/_buttons.less";
-@import "../../../mixins/_tab-focus.less";
+@import '../../../../variables/_dlt-c8y-icons-vars.less';
+@import '../../../animations/_component-animations.less';
+@import '../../../core/buttons/_buttons.less';
+@import '../../../mixins/_tab-focus.less';
 
 /**
  * C8Y List Group - Modern list component with flexible layouts
@@ -67,7 +66,7 @@
     &.highlighted {
       background-color: var(--brand-80, var(--c8y-brand-80));
     }
-    &.selected{
+    &.selected {
       border-left: @size-4 solid @component-color-active;
       background-color: @component-background-default;
     }
@@ -77,14 +76,15 @@
       outline-offset: -2px;
       border-radius: @component-border-radius-focus !important;
     }
-    bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
+    bs-dropdown-container &,
+    c8y-typeahead .dropdown &,
+    .c8y-select-v2 .dropdown & {
       &.active,
       &.selectable:not(:has(c8y-li-checkbox)):active {
         color: @component-color-active;
 
         .c8y-list__item__body {
-
-          &:after{
+          &:after {
             display: inline-block;
             text-transform: none;
             font-weight: normal;
@@ -96,7 +96,7 @@
             -moz-osx-font-smoothing: grayscale;
 
             float: right;
-            content:  @dlt-c8y-icon-check;
+            content: @dlt-c8y-icon-check;
             font-size: 18px;
           }
         }
@@ -106,7 +106,8 @@
        * @Carlos: There are items that are not selectable that
        * don't get that class. E.g. the "No results found" item.
        **/
-      &.selectable:hover:not(.active), &.highlighted {
+      &.selectable:hover:not(.active),
+      &.highlighted {
         background-color: @component-background-hover;
       }
 
@@ -117,29 +118,29 @@
       }
     }
 
-    &.selectable.active{
+    &.selectable.active {
       .c8y-list__item__body {
-        &:after{
+        &:after {
           display: inline-block;
           text-transform: none;
           font-weight: normal;
           font-style: normal;
           font-variant: normal;
-          font-family: "dlt-c8y-icons" !important;
+          font-family: 'dlt-c8y-icons' !important;
           line-height: 1;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
 
           float: right;
-          content:  @dlt-c8y-icon-check;
+          content: @dlt-c8y-icon-check;
         }
       }
       color: @component-color-active;
     }
-    &:not(.selectable){
+    &:not(.selectable) {
       transition: border-left 0.15s linear;
     }
-    &.active:not(.selectable){
+    &.active:not(.selectable) {
       border-left: @size-4 solid @component-color-active;
     }
 
@@ -172,7 +173,7 @@
     }
     &--overflow-visible {
       .c8y-list__item__body {
-        overflow: visible!important;
+        overflow: visible !important;
       }
     }
 
@@ -207,16 +208,15 @@
 
     // hide collapse-btn when displaying in a modal for instance
     &--no-expand {
-      > div > .c8y-list__item__block > .c8y-list__item__actions >
-      .collapse-btn {
+      > div > .c8y-list__item__block > .c8y-list__item__actions > .collapse-btn {
         display: none;
         pointer-events: none;
       }
     }
-    &__btn{
+    &__btn {
       .btn-clean();
       white-space: normal;
-      &:focus{
+      &:focus {
         outline: none;
       }
     }
@@ -235,7 +235,6 @@
     }
   }
 
-
   &--pulse {
     .component-pulse();
   }
@@ -283,16 +282,19 @@ c8y-load-more.c8y-list__item {
   background-color: inherit;
 }
 
-c8y-li-drag-handle, c8y-list-item-drag-handle {
+c8y-li-drag-handle,
+c8y-list-item-drag-handle {
   display: flex;
   align-items: center;
   align-self: stretch;
   flex-shrink: 0;
   max-width: 0;
+  padding-left: @margin-4;
   overflow: hidden;
   transition: all 0.25s ease;
 
-  c8y-li-drag-handle, c8y-list-item-drag-handle {
+  c8y-li-drag-handle,
+  c8y-list-item-drag-handle {
     padding: 0 !important;
     cursor: move;
     max-width: fit-content !important;
@@ -306,7 +308,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     }
   }
 
-  + c8y-li-checkbox{
+  + c8y-li-checkbox {
     padding-left: 0;
   }
   .cdk-drag-disabled & {
@@ -322,7 +324,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 }
 
 .no-card-context {
-  .c8y-list__item{
+  .c8y-list__item {
     c8y-li-drag-handle:not(.cdk-drag-disabled) + * {
       padding-left: 0;
     }
@@ -333,15 +335,14 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
 }
 
-.c8y-list__item:hover {
+.c8y-list__item:not(:has(.c8y-list__item)):hover {
   c8y-li-drag-handle:not(:empty) {
-    max-width: 100px;
-    padding-left: @size-8;
+    // max-width: 16px;
+    overflow: visible;
   }
 
   c8y-list-item-drag-handle:not(:empty) {
-    max-width: 100px;
-    padding-left: @size-8;
+    overflow: visible;
   }
 }
 
@@ -402,7 +403,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 .c8y-list__item__colorpicker,
 .c8y-list__item__actions {
   min-height: 56px;
-  bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-list__item--dense & {
+  bs-dropdown-container &,
+  c8y-typeahead .dropdown &,
+  .c8y-list__item--dense & {
     min-height: 36px;
     padding-top: @size-base;
     padding-bottom: @size-base;
@@ -416,11 +419,11 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
    * @Carlos: Would be nice to not only have the dense class
    * pm the list but also on the list items if [dense] is set.
    **/
-  .dropdown-menu &, .c8y-list__item--dense & {
+  .dropdown-menu &,
+  .c8y-list__item--dense & {
     padding-top: @size-base;
     padding-bottom: @size-base;
   }
-
 }
 
 .card,
@@ -437,14 +440,14 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     padding-bottom: 7px;
   }
 
-  .c8y-list__item__actions {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
   .c8y-list__item__body {
-    padding-top: @size-10;
-    padding-bottom: @size-10;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    &:has(.btn, .c8y-dropdown) {
+      padding-top: 6px;
+      padding-bottom: 6px;
+      overflow: visible !important;
+    }
   }
 }
 
@@ -518,7 +521,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   > * {
     padding: 0.5rem 0 0 0;
   }
-  > c8y-li-footer{
+  > c8y-li-footer {
     width: 100%;
   }
 }
@@ -532,7 +535,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   @media (min-width: @screen-md-min) {
     padding: @component-padding calc(@size-48 + 6px) 2rem;
   }
-  .full-w-collapse &{
+  .full-w-collapse & {
     padding: @component-padding;
   }
 }
@@ -547,17 +550,17 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
 }
 
-.c8y-list__item--sticky-top{
-  .c8y-list__item__block{
+.c8y-list__item--sticky-top {
+  .c8y-list__item__block {
     position: sticky;
     top: 0;
     z-index: 10;
     background-color: inherit;
-    &:has(.dropdown.open){
+    &:has(.dropdown.open) {
       z-index: 11;
     }
   }
-  .c8y-list__item__collapse--container{
+  .c8y-list__item__collapse--container {
     position: relative;
     z-index: 8;
   }
@@ -567,7 +570,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 .c8y-list--timeline {
   box-shadow: none;
   // --c8y-component-background-default: @palette-high;
-  >.c8y-list--timeline__item {
+  > .c8y-list--timeline__item {
     &:first-child::before {
       top: 50%;
     }
@@ -580,7 +583,8 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     position: relative;
     align-items: center;
     box-shadow: none;
-    &:focus-within, &:has(.dropdown.open) {
+    &:focus-within,
+    &:has(.dropdown.open) {
       z-index: 10;
     }
     &::after {
@@ -713,7 +717,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
       z-index: 10;
     }
 
-    &:not(:has(>button))::before {
+    &:not(:has(> button))::before {
       position: absolute;
       top: 50%;
       left: calc(-1 * @size-10);
@@ -727,7 +731,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
       transition: border-color 0.15s linear !important;
     }
 
-    &:not(:has(>button))::after {
+    &:not(:has(> button))::after {
       position: absolute;
       top: 50%;
       left: calc(-1 * @size-8);

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

@@ -42,7 +42,6 @@
   border: 0;
   box-shadow: inset 0 -1px 0 @component-border-color;
 
-
   &.draggable-after {
     position: relative;
     display: flex;

package/styles/components/data-display-and-visualization/tables/_data-grid.less

@@ -572,7 +572,7 @@ c8y-filtering-form {
 
 .data-grid__dropdown {
   .cdk-header-cell & {
-    width: 300px;
+    // width: 300px;
   }
 
   c8y-object-type div p {
@@ -599,7 +599,7 @@ c8y-filtering-form {
       max-height: calc(100vh - 500px);
     }
     max-height: calc(100vh - 480px);
-    max-width: 240px;
+    max-width: 280px;
   }
 
   c8y-filtering-form-renderer {

package/styles/components/data-display-and-visualization/tables/_data-grid.scss

@@ -600,7 +600,7 @@ c8y-filtering-form {
       max-height: calc(100vh - 500px);
     }
     max-height: calc(100vh - 480px);
-    max-width: 240px;
+    max-width: 280px;
   }
 
   c8y-filtering-form-renderer {

package/styles/core/forms/_forms.less

@@ -8,7 +8,7 @@
 /**
  * Forms - Form controls, inputs, labels, and validation
  *
- * Note: Uses @form-control-*; @form-label-*; @form-legend-*, and @size-* tokens.
+ * Note: Uses @form-control-*, @form-label-*, @form-legend-*, and @size-* tokens.
  *
  * Intentionally hardcoded values:
  * - rem-based values (1rem, 0.25rem, 1.1428571429em, 1.5em, 0.9rem): Relative sizing for fieldsets
@@ -382,7 +382,7 @@ select.form-control {
 .c8y-select-wrapper {
   position: relative;
   select {
-    padding-right: @size-24;
+    padding-right: @size-24!important;
     background-image: none;
 
     -webkit-appearance: none;
@@ -723,6 +723,11 @@ file-picker ~ .help-block {
   .table-data-grid & {
     display: none !important;
   }
+  &:has(formly-validation-message:empty) {
+    &::before {
+      display: none;
+    }
+  }
 }
 
 .has-info {
@@ -919,8 +924,10 @@ label.editable {
   font-size: inherit;
   cursor: pointer;
   .form-control {
-    min-width: 4ch;
-    max-width: 100%;
+    min-inline-size: 6ch;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    width: auto!important;
 
     -moz-appearance: textfield;
     appearance: textfield;
@@ -943,6 +950,14 @@ label.editable {
     margin-top: 0.9rem;
     color: @component-brand-primary;
     content: @dlt-c8y-icon-pencil;
+        &:has(.input-sm) {
+      margin-top: 0.6rem;
+    }
+  }
+  &:has(.input-sm) {
+    &:has(.ng-pristine):after {
+      margin-top: 0.6rem;
+    }
   }
 
   .form-control + span {

package/styles/core/forms/_forms.scss

@@ -384,7 +384,7 @@ select.form-control {
 .c8y-select-wrapper {
   position: relative;
   select {
-    padding-right: $size-24;
+    padding-right: $size-24!important;
     background-image: none;
 
     -webkit-appearance: none;
@@ -725,6 +725,11 @@ file-picker ~ .help-block {
   .table-data-grid & {
     display: none !important;
   }
+  &:has(formly-validation-message:empty) {
+    &::before {
+      display: none;
+    }
+  }
 }
 
 .has-info {
@@ -921,8 +926,10 @@ label.editable {
   font-size: inherit;
   cursor: pointer;
   .form-control {
-    min-width: 4ch;
-    max-width: 100%;
+    min-inline-size: 6ch;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    width: auto!important;
 
     -moz-appearance: textfield;
     appearance: textfield;

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

@@ -405,3 +405,28 @@ body fieldset > .dashboard-preview-slot {
     color: inherit;
   }
 }
+// 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{
+  .table-data-grid-header > .h4{
+    display: none;
+  }
+  .content-fullpage{
+    height: 100%!important;
+  }
+  &:has(c8y-asset-table-auto-refresh){
+    .content-fullpage{
+      height: calc(100% - 40px)!important;
+    }
+  }
+}
+

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

@@ -407,3 +407,25 @@ body fieldset > .dashboard-preview-slot {
     color: inherit;
   }
 }
+
+// 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{
+  .table-data-grid-header > .h4{
+    display: none;
+  }
+  .content-fullpage{
+    height: 100%!important;
+  }
+  &:has(c8y-asset-table-auto-refresh){
+    .content-fullpage{
+      height: calc(100% - 40px)!important;
+    }
+  }
+}

package/styles/layout/_bottom-drawer.less

@@ -56,3 +56,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;
+  }
+}