@c8y/style 1022.28.2 → 1022.33.0

package/assets/c8y-icon-dark.svg

@@ -113,4 +113,5 @@
 <glyph unicode="&#xe967;" glyph-name="wm-b2b" d="M892.26 584.446c-9.78 0-18.984-1.15-28.188-2.876l-130.014 224.935c-5.178 8.629-14.382 14.382-24.736 14.382h-177.762v75.937l-104.702-104.701 104.702-104.701v75.937h161.078l119.084-206.525c-31.642-24.162-51.776-62.132-51.776-104.702 0-44.296 21.86-83.99 55.802-107.578l-107.002-184.664-373.932 647.19c-5.178 8.629-14.382 14.382-24.738 14.382-10.354 0-19.56-5.753-24.736-14.382l-130.014-224.36c-7.479 1.152-14.957 1.726-23.011 1.726-73.061 0-132.315-59.254-132.315-132.314s59.254-132.314 132.315-132.314c5.753 0 12.081 0.574 17.834 1.15l134.616-233.564c5.178-8.63 14.382-14.382 24.738-14.382h177.76v-75.938l104.702 104.702-104.702 104.702v-75.938h-161.078l-121.96 211.128c36.244 23.586 59.83 64.432 59.83 110.454 0 43.722-21.286 83.416-55.802 108.152l101.25 174.312 373.932-647.192c5.178-8.63 14.382-14.382 24.736-14.382 10.356 0 19.56 5.752 24.738 14.382l135.19 234.14c7.48-1.152 14.958-2.302 23.012-2.302 73.060 0 132.314 59.254 132.314 132.314 1.152 73.062-58.102 132.89-131.164 132.89zM132.89 377.346c-41.42 0-74.786 33.366-74.786 74.786s33.366 74.786 74.786 74.786c10.355 0 20.135-1.726 29.339-5.752 27.614-11.506 45.447-38.544 45.447-69.034 0-41.42-33.366-74.786-74.786-74.786z" />
 <glyph unicode="&#xe968;" glyph-name="wm-dynamicapps" d="M994.532 394.222c-17.68 10.314-40.518 4.42-50.096-13.26l-212.166-368.346h-425.070c-20.628 0-36.836-16.208-36.836-36.834 0-20.628 16.208-36.836 36.836-36.836h446.434c13.26 0 25.048 7.368 31.678 18.418l223.216 386.762c10.314 16.944 3.684 39.782-13.996 50.096zM839.826 417.796c90.614 0 164.282 73.668 164.282 164.282 0 90.612-73.668 164.282-164.282 164.282-90.612 0-164.282-73.67-164.282-164.282 0.738-90.614 73.67-164.282 164.282-164.282zM839.826 671.954c50.096 0 90.614-40.518 90.614-90.614 0-50.094-40.518-90.612-90.614-90.612-50.094 0-90.612 40.518-90.612 90.612 0 50.096 41.254 90.614 90.612 90.614zM165.755 417.796c90.613 0 164.281 73.668 164.281 164.282 0 90.612-73.668 164.282-164.281 164.282s-164.282-73.67-164.282-164.282c0.737-90.614 73.669-164.282 164.282-164.282zM330.036 194.578c0 90.614-73.668 164.282-164.281 164.282s-164.282-73.668-164.282-164.282c0-90.612 73.669-164.282 164.282-164.282s164.281 73.67 164.281 164.282zM509.052 629.226c8.84 0 16.944 0.736 25.048 2.21 5.156 0.736 11.050 2.21 16.208 2.946 2.946 0.738 5.156 1.474 8.102 2.21 12.524 3.684 25.048 9.578 36.098 16.208 6.63 4.42 13.262 8.84 19.154 13.996 18.418 14.734 33.152 33.888 43.466 55.252 1.472 2.21 2.21 5.158 2.946 7.368 2.21 5.156 3.684 9.576 5.156 14.734 5.158 15.47 7.368 31.677 7.368 48.621s-2.946 33.151-7.368 48.622c-1.472 5.157-3.682 10.314-5.156 14.734-0.736 2.21-2.21 5.157-2.946 7.367-10.314 21.364-25.048 40.518-43.466 55.252-5.892 5.157-12.524 9.577-19.154 13.997-11.050 6.63-23.574 12.524-36.098 16.207-2.21 0.737-5.156 1.473-8.102 2.21-5.158 1.473-10.314 2.21-16.208 2.947-8.104 1.473-16.208 2.21-25.048 2.21-90.612 0-164.282-73.669-164.282-164.282 0.738-89.14 73.67-162.808 164.282-162.808zM509.052 231.412c90.614 0 164.282 73.67 164.282 164.282 0 90.614-73.668 164.282-164.282 164.282-90.612 0-164.282-73.668-164.282-164.282 0.738-90.612 73.67-164.282 164.282-164.282zM509.052 485.572c50.096 0 90.614-40.518 90.614-90.614 0-50.094-40.518-90.612-90.614-90.612-50.094 0-90.612 40.518-90.612 90.612 0 50.096 41.254 90.614 90.612 90.614z" />
 <glyph unicode="&#xe969;" glyph-name="wm-integration" d="M916.852 550.722c-45.436 0-83.412-29.16-96.974-69.85h-117.32c-18.988 0-33.906-14.918-33.906-33.906 0-18.99 14.918-33.908 33.906-33.908h117.998c14.24-39.332 52.218-67.136 96.296-67.136 46.114 0 84.768 30.516 97.654 71.882 2.712 9.494 4.746 19.668 4.746 30.518 0 56.286-46.114 102.4-102.4 102.4zM260.408 708.052c2.712-1.358 6.102-2.714 8.816-4.070 12.206-5.424 25.768-8.138 40.010-8.138 7.46 0 14.24 0.678 21.022 2.034l60.356-105.112c6.102-10.85 17.632-16.954 29.16-16.954 5.424 0 11.528 1.358 16.954 4.748 16.274 9.494 21.7 29.838 12.206 46.114l-61.034 106.468c14.242 17.632 23.058 40.689 23.058 65.103 0 28.482-11.528 54.252-29.838 72.562s-44.080 29.838-72.562 29.838c-56.964 0-102.4-46.114-102.4-102.4 0.678-38.655 22.378-72.563 54.252-90.193zM716.8 199.442c-6.782 0-13.564-0.678-19.666-2.034l-59.678 103.756c-9.494 16.276-29.838 21.7-46.114 12.206-16.274-9.494-21.7-29.838-12.206-46.114l59.676-104.434c-8.816-10.172-15.596-22.378-19.666-35.942-2.712-9.494-4.746-19.666-4.746-30.516 0-56.964 46.114-102.4 102.4-102.4s102.4 46.114 102.4 102.4c0 10.85-1.356 21.022-4.748 30.516-12.884 42.046-51.538 72.562-97.652 72.562zM360.094 446.966c0 18.988-14.918 33.906-33.906 33.906h-122.744c-13.564 40.69-52.218 69.85-96.976 69.85-10.85 0-21.023-1.356-30.517-4.748-42.045-12.884-71.883-52.216-71.883-97.652 0-25.092 8.816-48.148 23.735-65.78 18.988-22.38 46.792-36.62 78.665-36.62 28.482 0 54.252 11.528 72.562 29.838 10.172 10.172 18.31 23.056 23.736 37.298h123.422c18.31 0 33.906 14.918 33.906 33.908zM437.404 313.37c-16.276 9.494-37.298 4.070-46.114-12.206l-59.678-104.434c-6.78 1.356-14.24 2.712-21.7 2.712-56.964 0-102.4-46.114-102.4-102.4 0-38.654 21.7-72.562 53.574-90.194 2.712-1.356 6.102-2.712 8.816-4.068 12.206-5.426 25.768-8.138 40.010-8.138 56.964 0 102.4 46.114 102.4 102.4 0 24.414-8.816 46.792-23.056 64.424l61.032 105.79c8.816 16.276 3.39 36.62-12.884 46.114zM590.664 580.56c5.426-3.39 10.85-4.748 16.954-4.748 11.528 0 23.058 6.104 29.16 16.954l60.356 104.434c6.102-1.356 12.884-2.034 19.666-2.034 56.964 0 102.4 46.114 102.4 102.4 0 10.85-1.356 21.023-4.748 30.517-12.884 42.045-52.216 71.883-97.652 71.883s-84.768-30.517-97.654-71.883c-2.712-9.494-4.746-19.666-4.746-30.517 0-25.77 9.494-48.826 24.412-66.458l-60.354-105.112c-9.494-15.598-4.070-35.942 12.206-45.436z" />
+<glyph unicode="&#xe96a;" glyph-name="analytics-smart-rules-dark" d="M1024 170.666l-190.876-192v128h-175.040l87.374 128h87.666v128l190.876-192zM398.916 106.666h-398.916v128h436l-37.084-128zM195.708 362.666h-195.708v128h287.958l-92.25-128zM380.208 618.666h-380.208v128h472.458l-92.25-128z" />
 </font></defs></svg>

package/assets/c8y-icon-light.svg

@@ -94,4 +94,5 @@
 <glyph unicode="&#xe954;" glyph-name="users" d="M0.114 107.296h256.070c-1.194 279.112 127.78 157.704 127.78 379.812 0 85.736-55.924 132.216-127.892 132.216-106.332 0-180.292-101.666-79.593-291.8 33.055-62.524-35.216-77.316-108.607-94.27-63.662-14.678-67.872-45.798-67.872-99.618l0.114-26.34z" />
 <glyph unicode="&#xe955;" glyph-name="waste-bin" d="M933.114 874.667v-85.333h-843.114v85.333h240.752c37.94 0 68.756 46.891 68.756 85.333h224.056c0-38.443 30.774-85.333 68.756-85.333h240.794z" />
 <glyph unicode="&#xe956;" glyph-name="wm-integration" d="M613.046 448.322c0 54.25-44.080 98.33-98.332 98.33s-98.332-44.080-98.332-98.33c0-54.252 44.080-98.332 98.332-98.332s98.332 44.080 98.332 98.332z" />
+<glyph unicode="&#xe957;" glyph-name="analytics-smart-rules-light" d="M438.262-64l414.372 607.096h-240.994l119.694 416.904-432.668-600.412h262.45l-122.854-423.588z" />
 </font></defs></svg>

package/markdown-files/dm-dashboard-manager-preview.md

@@ -0,0 +1,51 @@
+ 
+
+### 📊 Dashboard manager: Smarter, more flexible dashboards
+
+ 
+
+We are making it easier than ever to organize and view your device data. The **Dashboard manager** in **Device management** brings more flexibility, consistency, and control over device dashboards.
+
+ 
+
+With this update, you can create **template dashboards that automatically apply to devices of the same type**, ensuring consistent views across your environment. The **Dashboard Manager** makes it simple to organize dashboards in one place, while support for **multiple dashboards per device** gives you the freedom to tailor different perspectives for different use cases. You can also **name dashboards in ways that match your workflows**, so finding the right view is effortless.
+
+ 
+
+### ✨ Key Enhancements & Features
+
+ 
+
+#### 📊 Type-based dashboard templates
+
+Build once, apply everywhere. Create dashboards that automatically apply to devices of the same type, saving time and ensuring consistency.
+
+ 
+
+#### 🗂️ Dashboard Manager
+
+A simple, centralized way to create, edit, and organize dashboards across your environment.
+
+  <img src="./c8y-style-assets/dm-dashboard-manager.png" alt="Dashboard manager" width="100%">
+
+#### ➕ Multiple dashboards per device
+
+Add as many dashboards as you need to a single device — tailor views for different use cases.
+
+&nbsp;
+
+#### 📝 Custom dashboard names
+
+Label dashboards with meaningful names so your teams can quickly find the views they need.
+
+&nbsp;
+
+#### 🔄 Seamless compatibility
+
+Keep your current **Info** dashboards — they’ll continue to work right alongside the new type-based ones.
+
+&nbsp;
+
+#### 💡 Why This Upgrade Matters
+
+🚀 With these updates, managing dashboards is faster, more intuitive, and ready to scale with your needs.

package/package.json

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

package/styles/_asset-property-list.less

@@ -43,6 +43,33 @@
     }
   }
 }
+.cdk-tree-node[aria-level]:not([aria-level="1"]):not([aria-level="2"]){
+  position: relative;
+  &::after {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 18px;
+    width: 20px;
+    bottom: 0;
+    display: block;
+    border-left: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
+    z-index: 1;
+  }
+  &[aria-level="4"]{
+    &::before{
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 42px;
+      width: 20px;
+      bottom: 0;
+      display: block;
+      border-left: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
+      z-index: 1;
+    }
+  }
+}
 .cdk-tree-node.nonCollapsible:not([aria-level="1"]){
   > .d-flex::before{
     left: -5px;
@@ -70,28 +97,62 @@
   overflow: visible;
 }
 
-.cdk-tree-node[aria-level="1"]{
-  &:before {
-    content: '';
-    background: inherit;
-    width: 40px;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    bottom: calc(50% - 1px);
-    z-index: 3;
-    pointer-events: none;
+.cdk-tree-node{
+  .c8y-list__item__check,
+  .c8y-list__item__radio{
+    z-index: 4;
+  }
+  &[aria-level="1"],
+  &[aria-level="2"],
+  &[aria-level="3"]{
+    &:before {
+      content: '';
+      background: inherit;
+      width: 48px;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      bottom: calc(50% - 1px);
+      z-index: 3;
+      pointer-events: none;
+    }
+    &.nonCollapsible{
+      &::before{
+        width: 21px;
+        bottom: calc(100% - 1px);
+        height: 50%;
+      }
+      + .cdk-tree-node[aria-level="1"]{
+        &::before{
+          background: transparent;
+        }
+      }
+    }
+  }
+  &[aria-level="2"]{
+    &::before{
+      left: 24px;
+      z-index: 1;
+    }
+     &.nonCollapsible{
+      + .cdk-tree-node[aria-level="2"]{
+        &::before{
+          background: transparent;
+        }
+      }
+    }
   }
-  &.nonCollapsible{
+  &[aria-level="3"]{
     &::before{
-      width: 21px;
-      bottom: calc(100% - 1px);
-      height: 50%;
+      left: 48px;
+      z-index: 1;
     }
-    + .cdk-tree-node[aria-level="1"]{
-     &::before{
-      background: transparent;
-     }
+     &.nonCollapsible{
+      + .cdk-tree-node[aria-level="3"]{
+        &::before{
+          background: transparent;
+        }
+      }
     }
   }
 }
@@ -113,4 +174,5 @@
 .cdk-tree-node .c8y-list__item__icon{
   padding-top: 7px;
   padding-bottom: 7px;
+  z-index: 2;
 }

package/styles/_c8y-icons.less

@@ -921,6 +921,55 @@
   }
 }
 
+.c8y-icon-analytics-smart-rules {
+  &:before {
+    content: @c8y-icon-dark-analytics-smart-rules; 
+  }
+  &:after {
+    content: @c8y-icon-light-analytics-smart-rules; 
+  }
+}
+
+
+
+
+.libraries-icon {
+  position: relative;
+  display: inline-block;
+  font-family: "c8yicon-dark";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  width: 1.1em;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+
+  &:after {
+    content: @c8y-icon-dark-book;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    font-size: .5em;
+    background-color: @component-background-default;
+    border-bottom-left-radius: .2em;
+    border-bottom: 0.2em solid @component-background-default;
+    border-left: 0.1em solid @component-background-default;
+  }
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'],
+  .dlt-c8y-icon, .c8y-icon{
+      position: relative;
+      z-index: 2;
+  }
+}
+
+
 .app-noicon {
   display: inline-block;
   width: 36px;

package/styles/_resizable-grid.less

@@ -0,0 +1,117 @@
+c8y-resizable-grid {
+  display: flex;
+  height: 100%;
+  position: relative;
+
+  // This CSS variable is set by the component and used here
+  --col-a-width: var(--c8y-resizable-grid-default-width, 560px);
+}
+
+.resizable-grid-container {
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  overflow: hidden;
+
+  /* Prevent content overflow during resize */
+  .collapsed {
+    width: 0 !important; // Hide the column
+    min-width: 0 !important;
+    opacity: 0;
+    transition: all 0.3s ease;
+    flex-shrink: 1;
+  }
+
+  .expanded {
+    transition: all 0.3s ease;
+    flex-grow: 1;
+    width: calc(100% - 8px)!important;
+  }
+
+  &:has(.collapsed) {
+    .resizer > i{
+      display: block;
+    }
+  }
+}
+
+.col-a {
+  width: var(--col-a-width);
+  min-width: 0;
+  flex-shrink: 0; // Prevent it from shrinking
+  overflow: hidden;
+
+  >* {
+    min-width: fit-content;
+  }
+}
+
+.col-b {
+  flex-grow: 1; // Col B takes up remaining space
+  overflow: hidden;
+  min-width: 0;
+
+  >* {
+    min-width: fit-content;
+  }
+}
+
+.resizer {
+  width: 8px;
+  flex: 0 0 8px;
+  cursor: col-resize;
+  z-index: 1;
+  position: relative;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1px;
+    bottom: 0;
+    background: @component-border-color;
+  }
+
+  >i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: @component-background-default;
+    border-radius: 50%;
+    color: @component-color-text-muted;
+    &::before{
+      transition: all 0.3s ease;
+      display: block;
+    }
+  }
+
+  .is-resizing &,
+  &:hover, &:focus {
+    &::before {
+      background: @component-color-focus;
+    }
+
+    >i {
+      color: @component-color-focus;
+      display: block;
+      &::before{
+        scale: 2;
+      }
+    }
+  }
+}
+
+
+
+
+// Global styles applied when resizing to prevent text selection
+body.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}

package/styles/index.less

@@ -59,6 +59,7 @@
 @import '_search-header.less';
 @import '_static-assets-file-picker.less';
 @import '_asset-property-list.less';
+@import '_resizable-grid.less';
 
 @import '_panels.less';
 @import '_asset-table.less';

package/variables/_c8y-icon-vars.less

@@ -105,6 +105,7 @@
 @c8y-icon-dark-wm-b2b: "\e967";
 @c8y-icon-dark-wm-dynamicapps: "\e968";
 @c8y-icon-dark-wm-integration: "\e969";
+@c8y-icon-dark-analytics-smart-rules: "\e96a";
 
 // light icons
 @c8y-icon-light-aab-icon-model: "\e900";
@@ -195,4 +196,4 @@
 @c8y-icon-light-users: "\e954";
 @c8y-icon-light-waste-bin: "\e955";
 @c8y-icon-light-wm-integration: "\e956";
-
+@c8y-icon-light-analytics-smart-rules: "\e957";