@c8y/style 1021.81.0 → 1022.4.2

package/branding-login.less

@@ -0,0 +1,11 @@
+@import 'variables/login-vars.less';
+
+// font-faces are declared here so that font-files are not loaded in other brandings
+@import (css) '~@fontsource/public-sans/400.css';
+@import (css) '~@fontsource/public-sans/400-italic.css';
+@import (css) '~@fontsource/public-sans/600.css';
+@import (css) '~@fontsource/public-sans/600-italic.css';
+@import (css) '~@fontsource/public-sans/700.css';
+
+@import 'styles/login-app.less';
+

package/login.less

@@ -0,0 +1,3 @@
+@import 'branding-login.less';
+// we want to load assets via web webpack, that's what this variable toggles
+@use-relative-paths: true;

package/markdown-files/dashboard-details-import-export-tab.md

@@ -0,0 +1,84 @@
+ 
+
+
+### 📋 Dashboard Import / Export: Cross-Platform Configuration Management
+
+ 
+
+The Dashboard Export & Import feature provides a flexible way to share and backup dashboard configurations through JSON files. This functionality enables seamless transfer of dashboard setups across different applications, tenants, and environments, making it a powerful tool for cross-platform configuration management.
+
+ 
+
+<img src="./c8y-style-assets/dashboard-details-advanced-tab.png" alt="Dashboard Export/Import Feature" width="100%">
+
+---
+
+### ✨ Key Features & Capabilities
+
+&nbsp;
+
+#### 📤 Advanced Dashboard Export
+
+&nbsp;
+
+Export dashboard configurations with enhanced control and flexibility.
+
+&nbsp;
+
+✅ One-Click Export -- Easily save your dashboard configuration as a JSON file\
+✅ Complete Configuration Capture -- Exports include all widget settings, layouts, and customizations\
+✅ Cross-Tenant Compatibility -- Share configurations across different tenants and applications\
+✅ Secure Data Storage -- Exported files maintain the integrity of your dashboard setup
+
+These export capabilities ensure your dashboard configurations are safely preserved and ready for sharing across any platform.
+
+&nbsp;
+
+#### 📥 Seamless Dashboard Import
+
+&nbsp;
+
+Effortlessly restore or transfer dashboard configurations across environments.
+
+&nbsp;
+
+✅ Simple Import Process -- Upload your JSON file to instantly recreate dashboards\
+✅ Configuration Validation -- Automatic checks ensure data integrity during import\
+✅ Multi-Platform Support -- Import dashboards to any compatible tenant or application\
+✅ Flexible Implementation -- Import dashboards to any compatible instance or environment
+
+The import functionality streamlines the process of setting up dashboards across different contexts and platforms.
+
+&nbsp;
+
+#### 🔧 Integrated JSON Editor
+
+&nbsp;
+
+Fine-tune your dashboard configurations with the built-in code editor.
+
+&nbsp;
+
+✅ Dashboard JSON Editing -- Modify JSON configurations directly within the platform\
+✅ Syntax Highlighting -- Enhanced readability and error detection\
+✅ Code Validation -- Immediate feedback on configuration correctness\
+✅ Advanced Customization -- Direct access to all dashboard parameters
+
+The integrated editor provides developers and advanced users with precise control over dashboard configurations.
+
+&nbsp;
+
+### 💡 Why This Feature Matters
+
+&nbsp;
+
+The Dashboard Export & Import functionality delivers:
+
+&nbsp;
+
+📋 Simplified configuration sharing across teams, tenants, and applications\
+🔒 Secure backup and restoration of dashboard setups\
+⚡ Efficient dashboard deployment and replication\
+🌐 True cross-platform configuration management
+
+These capabilities empower users to manage their dashboard configurations more effectively, ensuring consistency and saving valuable setup time across all environments. 🚀

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

@@ -0,0 +1,58 @@
+ 
+
+### New HTML widget
+
+ 
+
+We're excited to introduce the next generation HTML Widget for the Cumulocity Platform, designed to enhance your development experience and offer improved security features. This new widget will replace the current HTML widget while ensuring backward compatibility.
+
+<div class="p-16 m-auto col-lg-max">
+<img src="./c8y-style-assets/html-widget-preview.png" alt="HTML Widget" class="border-all fit-w">
+</div>
+
+&nbsp;
+
+### Key features
+
+&nbsp;
+
+#### Enhanced usability
+
+✅ **Live preview**: Instantly see your changes as you code without having to save and reload.
+
+✅ **VSCode editor integration**: Enjoy a familiar, professional coding environment with syntax highlighting, code completion, and error detection.\
+✅ **Preview mode**: Easily see your changes in the new preview view.
+
+&nbsp;
+
+#### Modern development experience
+
+✅ **JavaScript template literals support**: Write more expressive HTML with embedded expressions and multi-line strings.\
+✅ **Streamlined development workflow**: Faster iteration cycles with immediate visual feedback.
+
+&nbsp;
+
+#### Advanced developer capabilities
+
+✅ **Web component development**: Build complex, reusable UI components with proper encapsulation.\
+✅ **Extended API access**: Deeper integration with Cumulocity platform services.
+
+&nbsp;
+
+#### Enhanced security
+
+✅ **Isolated web components**: Components run in their own scope, preventing conflicts and improving stability.\
+✅ **Global sanitization settings**: Configurable security controls to prevent XSS attacks.
+
+&nbsp;
+
+#### Legacy support
+
+✅ **Backward compatibility**: Full support for existing HTML widgets through legacy mode.\
+✅ **Seamless migration path**: Easily convert existing widgets to the new format when you're ready.
+
+&nbsp;
+
+&nbsp;
+
+The new HTML Widget is currently available in preview mode. We encourage you to test your existing widgets and explore creating new ones with the advanced features.

package/package.json

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

package/styles/_alerts.less

@@ -1,4 +1,5 @@
 .alert {
+  --c8y-btn-default-background-default: @alert-background;
   margin-bottom: @margin-base;
   padding: @alert-padding;
   max-width: @alert-max-width;
@@ -200,7 +201,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: color-mix(in srgb, var(--c8y-root-component-background-default), var(--c8y-root-component-color-default) 10%);
 }
 
 // prevent double scroll bars on widgets when the alerts overlay is displayed

package/styles/_app-switcher.less

@@ -68,6 +68,7 @@
 }
 
 .dropdown-menu.app-switcher-dropdown-menu {
+  transform-origin: center top;
   left: 50%!important;
   overflow-y: auto;
   margin-left: -160px !important;

package/styles/_badges.less

@@ -1,7 +1,9 @@
 .badge {
-  display: inline-block;
-  padding: @badge-padding;
-  min-width: 10px;
+  display: inline-flex!important;
+  min-width: calc(var(--c8y-unit-base) * 2.25);
+  min-height: calc(var(--c8y-unit-base) * 2.25);
+  justify-content: center;
+  align-items: center;
   border-radius: @badge-border-radius;
   background-color: @badge-background-default;
   color: @badge-color-default;
@@ -11,32 +13,37 @@
   font-size: @badge-font-size;
   line-height: @badge-line-height;
   box-shadow: inset 0 0 0 1px @gray-50;
-  vertical-align: middle;
+  padding: 0 0.4em;
 
   &.badge-success {
     background-color: @badge-background-success;
     color: @badge-color-success;
     box-shadow: inset 0 0 0 1px @badge-color-success;
   }
+
   &.badge-danger {
     background-color: @badge-background-danger;
     color: @badge-color-danger;
     box-shadow: inset 0 0 0 1px @badge-color-danger;
   }
+
   &.badge-warning {
     background-color: @badge-background-warning;
     color: @badge-color-warning;
     box-shadow: inset 0 0 0 1px @badge-color-warning;
   }
+
   &.badge-system {
     background-color: @badge-background-system;
     color: @badge-color-system;
   }
+
   &.badge-info {
     background-color: @badge-background-info;
     box-shadow: inset 0 0 0 1px @badge-color-info;
     color: @badge-color-info;
   }
+
   // Empty badges collapse automatically (not available in IE8)
   &:empty {
     display: none;

package/styles/_bottom-drawer.less

@@ -7,7 +7,9 @@
   overflow-y: auto;
   width: calc(100vw - 20px);
   background-color: @component-background-default;
-  transition: transform @open-menu-time-type, width @open-menu-time-type;
+  transition:
+    transform @open-menu-time-type,
+    width @open-menu-time-type;
 
   .translate(0, 100vh);
 
@@ -26,9 +28,9 @@
   }
 }
 
-.drawerOpen{
-  &:has(.bottom-drawer.has-backdrop){
-    &:before{
+.drawerOpen {
+  &:has(.bottom-drawer.has-backdrop) {
+    &:before {
       content: '';
       position: fixed;
       top: 0;
@@ -36,8 +38,7 @@
       bottom: 0;
       left: 0;
       z-index: @zindex-navbar-fixed + 4;
-      background-color: @component-background-default;
-      opacity: 0.5;
+      cursor: not-allowed;
     }
   }
 }

package/styles/_boxed-label.less

@@ -0,0 +1,21 @@
+.boxed-label {
+  border: dashed 1px transparent; 
+  padding: 8px 8px 4px;
+  border-radius: 2px;
+  position: relative;
+  &[data-label] {
+    border-color: var(--c8y-palette-gray-60);
+    &:before{
+      content: attr(data-label);
+      position: absolute;
+      top: -6px;
+      left: 8px;
+      font-size: var(--c8y-font-size-xs);
+      background-color: var(--c8y-root-component-background-default);
+      color: var(--c8y-root-component-color-text-muted);
+      padding: 0 4px;
+      font-style: italic;
+      border-radius: 2px;
+    }
+  }
+}

package/styles/_buttons.less

@@ -48,7 +48,7 @@
     &:hover,
     &:focus {
       cursor: @cursor-disabled !important;
-      opacity: var(--c8y-root-component-disabled-opacity);
+      opacity: var(--c8y-root-component-opacity-disabled);
       .box-shadow(none);
     }
   }
@@ -165,6 +165,9 @@
 // Alternate buttons
 .btn-default {
   .button-variant(c8y-btn-default);
+  .datetime-picker &{
+    --c8y-btn-default-background-default: var(--c8y-form-control-background-default);
+  }
 }
 
 .btn-primary {
@@ -390,6 +393,16 @@ label > .btn-clean {
   }
 }
 
+label + .btn-help, label .btn-help {
+  display: inline;
+  align-self: center;
+  height: 14px;
+  width: 14px;
+  &::before {
+    inset: 0;
+  }
+}
+
 // Button Sizes
 .btn-lg {
   .button-size(@btn-padding-large-vertical; @btn-padding-large-horizontal; @btn-font-size-large; @btn-line-height-large;
@@ -535,7 +548,7 @@ input[type='button'] {
   }
 
   &.active,
-  .expanded &,
+  &[aria-expanded="true"],
   .panel-open & {
     color: @component-brand-primary;
     opacity: 1 !important;
@@ -876,17 +889,19 @@ input[type='button'] {
     }
 
     .table-data-grid-header-bulk-actions & {
-      color: @palette-high;
-
+      color: @component-background-active;
+      border-radius: @btn-border-radius-base;
+      
       &:focus {
         .c8y-focus-inset();
+        outline-color: @component-background-active;
       }
 
       &:hover,
       &:active {
         color: var(--c8y-brand-7);
         text-decoration: none;
-
+        outline: 1px solid @component-background-active;
         .c8y-icon,
         > [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {

package/styles/_c8y-action-bar.less

@@ -9,7 +9,7 @@
   margin: 0;
   z-index: @zindex-action-bar;
   max-width: 100vw;
-  box-shadow: @header-shadow;
+  box-shadow: var(--c8y-elevation-md-bottom);
 
   @media (max-width: @screen-xs-max) {
     transition: top 0.5s ease;
@@ -122,7 +122,7 @@ body:not(:has(.app-main-header)) {
 
     .navbar-nav {
       .dropdown-menu {
-        max-width: 306px;
+        max-width: 330px;
 
         &.uib-datepicker-popup {
           width: 280px;

package/styles/_c8y-asset-selector-miller.less

@@ -3,6 +3,9 @@ c8y-asset-selector-miller {
   position: relative;
   height: 100%;
   background: @component-background-default;
+  .dropdown-menu &{
+    height: 312px;
+  }
 }
 
 .miller-view-wrapper {

package/styles/_c8y-asset-selector.less

@@ -63,7 +63,7 @@ c8y-asset-selector{
       height: 32px;
       width: 32px;
       opacity: 1;
-      background: @component-background-default;
+      
       &:focus {
         outline: 2px solid @component-brand-primary;
         outline-offset: -2px;
@@ -80,6 +80,12 @@ c8y-asset-selector{
         transform: rotate(90deg);
       }
     }
+
+    .dropdown-menu &{
+      .collapse-btn{
+        background-color: var(--c8y-dropdown-background-default);
+      }
+    }
   }
  
  
@@ -145,3 +151,8 @@ c8y-asset-selector c8y-search-input .input-group {
     }
   }
 }
+
+c8y-widget-asset-selector .card{
+  background: inherit;
+  margin-bottom: 0;
+}

package/styles/_c8y-child-assets-selector.less

@@ -80,7 +80,7 @@ c8y-item-selector {
   .multiselect-item {
     display: flex;
     padding: 8px 12px;
-    border-bottom: 1px solid @component-border-color;
+    border-bottom: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
     background-color: var(--c8y-dropdown-background-default, @component-background-default);
     label.c8y-checkbox.input-sm {
       flex-grow: 1;
@@ -90,6 +90,7 @@ c8y-item-selector {
       line-height: 20px;
       padding: 0;
       align-items: center;
+      display: flex;
     }
     .radio,
     .checkbox {

package/styles/_c8y-cookie-banner.less

@@ -11,4 +11,12 @@
 
 .cookie-banner-content {
   column-width: 26rem;
+
+  a{
+    color: inherit;
+    text-decoration: underline;
+    &:hover {
+      color: inherit;
+    }
+  }
 }

package/styles/_c8y-countdown-interval.less

@@ -18,7 +18,7 @@ c8y-countdown-interval {
   display: flex !important;
   align-items: center;
   justify-content: center;
-  background: @component-background-default;
+  background: @form-control-background-default;
   min-width: 30px;
   min-height: 30px;
   svg {
@@ -56,7 +56,7 @@ c8y-countdown-interval {
   min-height: @form-control-height-base;
   min-width: calc(@form-control-height-base + @margin-base);
   padding: 0 4px;
-  background: @component-background-default;
+  background: @form-control-background-default;
   cursor: pointer;
   transition: var(--c8y-btn-transition-default);
   .time-elapsed {

package/styles/_c8y-dashboard-style.less

@@ -217,10 +217,14 @@ body .dashboard-preview-slot {
     right: 0;
     bottom: 0;
     left: 0;
-    margin: 15px !important;
-    padding-bottom: 35%;
+    margin: 0!important;
   }
 }
+body fieldset > .dashboard-preview-slot {
+  border: 0;
+  padding: 0;
+  margin: 0!important;
+}
 
 // title hidden
 .card.card-dashboard {
@@ -373,4 +377,7 @@ body .dashboard-preview-slot {
     position: static;
       margin: 0 4px 0 -4px;
   }
+  .tag--info &{
+    color: inherit;
+  }
 }

package/styles/_c8y-empty-state.less

@@ -22,6 +22,10 @@
     .btn-primary();
   }
 
+  p{
+    margin-bottom: @margin-base;
+  }
+
   .dashboard.dashboard-theme-branded & {
     .btn-primary {
       .btn-default();

package/styles/_c8y-icons.less

@@ -982,18 +982,19 @@
 
 
 .circle-icon-wrapper{
+  --c8y-icon-stroke-color: @text-color;
   border-radius: 50%;
   color: white;
   width: 24px;
   aspect-ratio: 1/1;
   text-align: center;
-  --c8y-icon-stroke-color: @text-color;
   padding-bottom: 2px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   > i{
     font-size: 16px;
+    color: @component-background-default;
   }
   &--medium{
     width: 20px;
@@ -1020,7 +1021,7 @@
   display: inline-flex;
   border-radius: 50%;
   background-color: @brand-primary;
-  color: @palette-high;
+  color: @gray-100;
   font-size: 24px;
   align-items: center;
   justify-content: center;
@@ -1040,6 +1041,10 @@
   &.dot-info{
     background-color: @status-info;
   }
+
+  &.bg-primary-light{
+    color: var(--c8y-palette-low);
+  }
   &.small {
     font-size: 14px;
     width: 20px;

package/styles/_c8y-list-group.less

@@ -56,7 +56,7 @@
     }
     bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
       &.active,
-      &:active {
+      &.selectable:active {
         .c8y-list__item__body {
 
           &:after{
@@ -74,7 +74,7 @@
        * don't get that class. E.g. the "No results found" item.
        **/
       &.selectable:hover:not(.active), &.highlighted {
-        background-color: @brand-80;
+        background-color: @component-background-hover;
       }
 
       &:focus {
@@ -122,6 +122,11 @@
         padding-right: 0 !important;
       }
     }
+    &--overflow-visible {
+      .c8y-list__item__body {
+        overflow: visible!important;
+      }
+    }
 
     &.has-error {
       box-shadow: inset 0 -2px 0 @alert-danger-border;
@@ -154,6 +159,7 @@
 
     // hide collapse-btn when displaying in a modal for instance
     &--no-expand {
+      > div > .c8y-list__item__block > .c8y-list__item__actions >
       .collapse-btn {
         display: none;
         pointer-events: none;
@@ -181,6 +187,7 @@
     }
   }
 
+
   &--pulse {
     .component-pulse();
   }
@@ -470,6 +477,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   @media (min-width: @screen-md-min) {
     padding: @component-padding calc(@margin-48 + 6px) 2rem;
   }
+  .full-w-collapse &{
+    padding: @component-padding;
+  }
 }
 
 // handling sticky elements
@@ -482,6 +492,19 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
 }
 
+.c8y-list__item--sticky-top{
+  .c8y-list__item__block{
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: inherit;
+  }
+  .c8y-list__item__collapse--container{
+    position: relative;
+    z-index: 8;
+  }
+}
+
 // TIMELINE LIST
 .c8y-list--timeline {
   box-shadow: none;

package/styles/_c8y-pulse.less

@@ -48,8 +48,8 @@
     text-decoration: none;
   }
   .c8y-pulse.inactive {
-    border: 1px solid @component-border-color;
-    background-color: @component-border-color;
+    border: 1px solid @component-color-disabled;
+    background-color: @component-color-disabled;
     animation: none;
 
     .transition(border 0.25s ease);

package/styles/_c8y-right-drawer.less

@@ -35,7 +35,7 @@
   .transition(transform @open-menu-time-type);
   --sticky-top-margin: 80px;
 
-  --c8y-text-muted: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-muted));
+  --c8y-text-muted: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));
 
   --c8y-form-label-color: @drawer-color;