@c8y/style 1023.17.20 → 1023.22.2

package/styles/{_resizable-grid.less → components/data-display-and-visualization/tables/_resizable-grid.less}

@@ -121,7 +121,4 @@ c8y-resizable-grid {
 // 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/components/data-display-and-visualization/tables/_resizable-grid.scss

@@ -0,0 +1,138 @@
+@use "../../../../variables/index" as *;
+
+
+/**
+ * resizaule grid - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+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: 100% !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;
+  display: flex;
+  flex-direction: column;
+
+  >* {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.col-b {
+  flex-grow: 1; // Col B takes up remaining space
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+
+  >* {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.resizer {
+  width: $size-8;
+  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;
+      }
+    }
+  }
+}
+
+.inner-scroll {
+  overflow-y: auto;
+}
+
+
+
+// Global styles applied when resizing to prevent text selection
+body.no-select {
+  user-select: none;
+}

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

@@ -0,0 +1,411 @@
+@use "../../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../../mixins/table-row";
+
+
+/**
+ * taules - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+table {
+  background-color: $component-background-default;
+}
+
+caption {
+  padding-top: $table-cell-padding-default;
+  padding-bottom: $table-cell-padding-default;
+  color: $component-color-text-muted;
+  text-align: left;
+}
+
+th {
+  text-align: left;
+}
+
+// Baseline styles
+.table {
+  clear: both;
+  margin-bottom: $line-height-computed;
+  max-width: 100%;
+  width: 100%;
+
+  .card & {
+    margin-bottom: 0;
+  }
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr{
+      > th,
+      > td {
+        border-top: 1px solid $component-border-color;
+        vertical-align: top;
+        line-height: $line-height-base;
+        label {
+          margin: 0;
+          &.c8y-checkbox,
+          &.c8y-radio {
+            line-height: 1.6;
+          }
+        }
+      }
+      > th {
+        padding: $size-10 $size-8;
+      }
+      > td {
+        padding: $table-cell-padding-default $size-8;
+        min-height: 48px;
+      }
+    }
+    > tr.expanded-row {
+      > td {
+        border-top: 0;
+      }
+    }
+  } 
+  // Bottom align for column headings
+  // no top border on cells inside the first row on body when there's a thead
+  thead + tbody tr:first-child{
+    > td, > th {
+      border-top: 0;
+    }
+  }
+
+  > thead > tr > th {
+    border-top: 0;
+    border-bottom: 0;
+    box-shadow: inset 0 -2px 0 $component-border-color;
+    vertical-align: bottom;
+  }
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        color: $component-form-label-color;
+        vertical-align: bottom;
+        text-transform: uppercase;
+        font-size: $font-size-small;
+        line-height: $size-20;
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'] {
+          font-size: 14px;
+        }
+      }
+    }
+  } // Account for multiple tbody instances
+  > tbody + tbody {
+    border-top: 2px solid $component-border-color;
+  } // Nesting
+  .table {
+    background-color: transparent;
+  } // Column widths
+  > thead > tr > th {
+    &.fixed {
+      width: 1px;
+      white-space: nowrap;
+    }
+    &.text-truncate {
+      display: table-cell;
+      overflow: hidden;
+      max-width: 1px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &.auto-grow {
+      min-width: 150px;
+
+      overflow-wrap: break-word;
+    }
+  }
+  > tbody > tr > td {
+    &.fixed {
+      white-space: nowrap;
+    }
+
+    &.text-truncate {
+      display: table-cell;
+      overflow: hidden;
+      max-width: 1px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &.auto-grow {
+      min-width: 150px;
+
+      overflow-wrap: break-word;
+    }
+  }
+}
+
+// Condensed table w/ half padding
+.table-condensed {
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > td {
+        padding: calc($table-cell-padding-condensed - 1px) $table-cell-padding-condensed;
+        font-size: $font-size-small;
+        > c8y-device-status-display {
+          display: block;
+          height: calc($size-base * 1.5);
+        }
+      }
+      > th {
+        padding: $table-cell-padding-condensed;
+        font-size: $size-10 !important;
+      }
+    }
+  }
+}
+
+// Bordered version
+// Add borders all around the table and between all the columns.
+.table-bordered {
+  border: 1px solid $component-border-color;
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        border: 1px solid $component-border-color;
+      }
+    }
+  }
+  > thead > tr {
+    > th,
+    > td {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+// Zebra-striping
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+.table-striped {
+  > tbody > tr:not(.even):not(.odd):not(.expanded-row):nth-of-type(odd),
+  > tbody > tr.odd{
+    background: $component-background-odd;
+    + tr.expanded-row {
+      background: $component-background-odd;
+    }
+  }
+  > tbody > tr.even{
+    background: $component-background-default;
+  }
+}
+
+// Hover effect
+// Placed here since it has to come after the potential zebra striping
+.table-hover {
+  > tbody > tr:hover {
+    background: $component-background-hover;
+  }
+}
+
+// Custom table header underline color
+.table-header-branding-line {
+  > thead > tr > th {
+    border-bottom-width: 1px;
+    border-bottom-color: $component-border-color;
+  }
+  > tbody:first-child > tr > td {
+    border-top-width: 1px;
+    border-top-color: $component-border-color;
+  }
+}
+
+// Table cell sizing
+// Reset default table behavior
+table col[class*='col-'] {
+  position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+  display: table-column;
+  float: none;
+}
+
+table {
+  td,
+  th {
+    &[class*='col-'] {
+      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+      display: table-cell;
+      float: none;
+    }
+  }
+}
+
+// Table backgrounds
+// Exact selectors below required to override `.table-striped` and prevent inheritance to nested tables.
+// Generate the contextual variants
+@include table-row.table-row-variant(active,
+$component-background-active);
+@include table-row.table-row-variant(success,
+$state-success-bg);
+@include table-row.table-row-variant(info,
+$state-info-bg);
+@include table-row.table-row-variant(warning,
+$state-warning-bg);
+@include table-row.table-row-variant(danger,
+$state-danger-bg);
+// Responsive tables
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
+.table-responsive {
+  overflow-x: auto;
+  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+
+  &.full-page {
+    overflow-y: auto;
+    max-height: calc(string.unquote('100vh - 145px'));
+    @media (min-width: $screen-sm-min) {
+      max-height: calc(string.unquote('100vh - 256px'));
+    }
+  }
+  @media screen and (max-width: $screen-xs-max) {
+    overflow-y: hidden;
+    margin-bottom: calc($line-height-computed * 0.75);
+    width: 100%;
+    border: 1px solid $component-border-color; // Tighten up spacing
+
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    > .table {
+      margin-bottom: 0; // Ensure the content doesn't wrap
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th,
+          > td {
+            overflow: hidden;
+            max-width: $screen-xs-max;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    } // Special overrides for the bordered tables
+    > .table-bordered {
+      border: 0; // Nuke the appropriate borders so that the parent can handle them
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th:first-child,
+          > td:first-child {
+            border-left: 0;
+          }
+          > th:last-child,
+          > td:last-child {
+            border-right: 0;
+          }
+        }
+      } // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
+      // chances are there will be only one `tr` in a `thead` and that would
+      // remove the border altogether.
+      > tbody,
+      > tfoot {
+        > tr:last-child {
+          > th,
+          > td {
+            border-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.table-borderless td,
+.table-borderless tr,
+.table-borderless th {
+  border: 0 !important;
+}
+
+.table-vertical-middle * {
+  vertical-align: middle !important;
+}
+
+.table-cell-truncate {
+  position: relative;
+}
+
+.table-cell-truncate .truncated-cell-content {
+  position: absolute;
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-fixed {
+  table-layout: fixed;
+  th,
+  td {
+    word-break: break-all;
+  }
+}
+
+.table-header-sticky {
+  th {
+    position: sticky;
+    background-color: $component-background-default;
+  }
+}
+
+.table-permissions {
+  > tbody:nth-child(odd) {
+    background-color: $component-background-odd;
+  }
+}
+
+.c8y-table-responsive {
+  thead {
+    display: none;
+  }
+  > tbody > tr {
+    border-bottom: 1px solid $component-border-color;
+    > td,
+    > th {
+      display: block;
+      padding: 6px 10px;
+      border: 0;
+      &:before {
+        display: inline-block;
+        padding-right: $size-10;
+        min-width: 20%;
+        content: attr(data-label);
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: $size-10;
+      }
+    }
+  }
+  @media (min-width: $screen-sm-min) {
+    thead {
+      display: table-header-group;
+    }
+    > tbody > tr:not(.expanded-row) {
+      border: 0;
+      > td,
+      > th {
+        display: table-cell;
+        border-top: 1px solid $component-border-color;
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/styles/{_c8y-ai-chat.less → components/data-input/_c8y-ai-chat.less}

@@ -1,16 +1,32 @@
+/**
+ * C8Y AI Chat - AI chat widget component
+ *
+ * Note: Uses @size-* tokens for spacing and @font-size-* tokens for typography.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (400px): Minimum chat height
+ * - Border radius (20px): Pill-shaped input and list items
+ * - Border widths (1px): Standard borders
+ * - Percentages (85%, 100%): Layout and width constraints
+ * - Negative calc expressions: Complex computed heights
+ * - Font-size em values (1.2em, 1.5em, 2em): Relative heading sizes
+ * - Line-height values (1.7): Unitless ratio
+ * - Z-index values: Stacking order
+ */
+
 c8y-widget-ai-chat-section{
   display: flex;
   max-height: calc(100vh - 400px);
   min-height: 400px;
   background-color: @component-background-default;
   border: 1px solid var(--c8y-root-component-border-color);
-  border-radius: @margin-base;
+  border-radius: @size-base;
   padding: 0;
   .chat-input{
-    border-bottom-left-radius: @margin-base;
-    border-bottom-right-radius: @margin-base;
+    border-bottom-left-radius: @size-base;
+    border-bottom-right-radius: @size-base;
   }
-  
+
 }
 
 c8y-agent-chat{
@@ -21,8 +37,8 @@ c8y-agent-chat{
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: 8px;
-  padding: 16px 16px 4px 16px;
+  gap: @size-8;
+  padding: @size-16 @size-16 @size-4 @size-16;
   background-color: @component-background-default;
   border-top: 1px solid var(--c8y-root-component-border-color);
   margin-top: auto;
@@ -33,11 +49,11 @@ c8y-agent-chat{
     width: 100%;
     textarea{
       border-radius: 20px!important;
-      min-height: 40px;
-      padding-top: 10px;
-      padding-right: 40px;
-      padding-bottom: 10px;
-      padding-left: 16px;
+      min-height: @size-40;
+      padding-top: @size-10;
+      padding-right: @size-40;
+      padding-bottom: @size-10;
+      padding-left: @size-16;
 
       &::-webkit-scrollbar {
         width: unset; /* for vertical scrollbars */
@@ -60,8 +76,8 @@ c8y-agent-chat{
     }
     .chat-input-group-btn{
       position: absolute;
-      right: 4px;
-      bottom: 4px;
+      right: @size-4;
+      bottom: @size-4;
       .btn-dot{
         margin: 0!important;
         height: @form-control-height-base!important;
@@ -79,7 +95,7 @@ c8y-agent-chat{
     max-width: 100%;
     min-width: 0;
     p{
-      margin-bottom: 8px;
+      margin-bottom: @size-8;
       &:last-child {
         margin-bottom: 0;
       }
@@ -91,23 +107,23 @@ c8y-agent-chat{
   align-self: flex-start;
   min-width: 0;
   width: 100%;
-  margin-top: @margin-16;
-  padding: @margin-16 @margin-24 @margin-16 @margin-16;
+  margin-top: @size-16;
+  padding: @size-16 @size-24 @size-16 @size-16;
   h1{
-    margin-top: @margin-24;
-    margin-bottom: @margin-16;
+    margin-top: @size-24;
+    margin-bottom: @size-16;
     font-size: 2em;
     font-weight: 600;
   }
   h2{
-    margin-top: @margin-24;
-    margin-bottom: @margin-16;
+    margin-top: @size-24;
+    margin-bottom: @size-16;
     font-size: 1.5em;
     font-weight: 600;
   }
   h3{
-    margin-top: @margin-16;
-    margin-bottom: @margin-16;
+    margin-top: @size-16;
+    margin-bottom: @size-16;
     font-size: 1.2em;
     font-weight: 600;
   }
@@ -117,18 +133,18 @@ c8y-agent-chat{
   background-color: var(--c8y-brand-70);
   color: var(--c8y-palette-low);
   align-self: flex-end;
-  border-radius: @margin-base;
+  border-radius: @size-base;
   max-width: 85%;
   min-width: 0;
-  padding: @margin-base @margin-16;
+  padding: @size-base @size-16;
   order: 2;
 }
 
 .message-action {
   display: flex;
   align-items: center;
-  gap: @margin-base;
-  padding: @margin-base 0 @margin-16 0;
+  gap: @size-base;
+  padding: @size-base 0 @size-16 0;
   &:empty{
     display: none;
   }
@@ -140,7 +156,7 @@ c8y-agent-chat{
     margin-top: 0;
     margin-right: 0;
     order: 1;
-    
+
   }
   &.agent-action {
     justify-content: flex-start;
@@ -183,7 +199,7 @@ c8y-agent-chat{
     color: @component-color-text-muted;
   }
   .c8y-list__item__actions, .c8y-list__item__icon{
-    height: 40px;
+    height: @size-40;
     padding-top: 0!important;
     padding-bottom: 0!important;
   }