@c8y/style 1023.14.33 → 1023.14.36

package/styles/components/data-input/_c8y-ai-chat.scss

@@ -0,0 +1,212 @@
+@use "../../../variables/index" as *;
+
+/**
+ * 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: $size-base;
+  padding: 0;
+  .chat-input{
+    border-bottom-left-radius: $size-base;
+    border-bottom-right-radius: $size-base;
+  }
+
+}
+
+c8y-agent-chat{
+  width: 100%;
+}
+
+.chat-input{
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  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;
+  position: sticky;
+  bottom:0;
+  .chat-input-group{
+    position: relative;
+    width: 100%;
+    textarea{
+      border-radius: 20px!important;
+      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 */
+        height: unset; /* for horizontal scrollbars */
+      }
+
+      &::-webkit-scrollbar-track {
+        background: unset;
+      }
+      &::-webkit-scrollbar-thumb {
+        width: unset;
+        border-radius: unset;
+        background: unset;
+      }
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background: unset;
+        }
+      }
+    }
+    .chat-input-group-btn{
+      position: absolute;
+      right: $size-4;
+      bottom: $size-4;
+      .btn-dot{
+        margin: 0!important;
+        height: $form-control-height-base!important;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.chat-message {
+  line-height: 1.7;
+  .message-content{
+    overflow-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+    min-width: 0;
+    p{
+      margin-bottom: $size-8;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.agent-message {
+  align-self: flex-start;
+  min-width: 0;
+  width: 100%;
+  margin-top: $size-16;
+  padding: $size-16 $size-24 $size-16 $size-16;
+  h1{
+    margin-top: $size-24;
+    margin-bottom: $size-16;
+    font-size: 2em;
+    font-weight: 600;
+  }
+  h2{
+    margin-top: $size-24;
+    margin-bottom: $size-16;
+    font-size: 1.5em;
+    font-weight: 600;
+  }
+  h3{
+    margin-top: $size-16;
+    margin-bottom: $size-16;
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+}
+
+.user-message {
+  background-color: var(--c8y-brand-70);
+  color: var(--c8y-palette-low);
+  align-self: flex-end;
+  border-radius: $size-base;
+  max-width: 85%;
+  min-width: 0;
+  padding: $size-base $size-16;
+  order: 2;
+}
+
+.message-action {
+  display: flex;
+  align-items: center;
+  gap: $size-base;
+  padding: $size-base 0 $size-16 0;
+  &:empty{
+    display: none;
+  }
+  &.user-action {
+    display: inline-block;
+    align-self: flex-end;
+    width: auto;
+    padding: 0;
+    margin-top: 0;
+    margin-right: 0;
+    order: 1;
+
+  }
+  &.agent-action {
+    justify-content: flex-start;
+    border-top: 1px dashed var(--c8y-root-component-border-color);
+  }
+
+  .btn-dot{
+    margin: 0!important;
+    height: $form-control-height-base!important;
+    border-radius: 50%!important;
+  }
+}
+
+.message-timestamp{
+  display: block;
+  font-size: $font-size-xs;
+  color: var(--c8y-text-muted);
+  .user-message &{
+    text-align: right;
+  }
+}
+
+
+.agent-step-feedback {
+  .c8y-list__group{
+    border-radius: 20px!important;
+    overflow: hidden;
+    border: 1px solid var(--c8y-root-component-border-color);
+    .c8y-list__item{
+      box-shadow: none;
+    }
+    .collapse-btn{
+      &, &:hover, &:focus{
+        border-top-right-radius: 20px!important;
+        border-bottom-right-radius: 20px!important;
+      }
+    }
+  }
+  .c8y-list__item.selectable.active{
+    color: $component-color-text-muted;
+  }
+  .c8y-list__item__actions, .c8y-list__item__icon{
+    height: $size-40;
+    padding-top: 0!important;
+    padding-bottom: 0!important;
+  }
+  .c8y-list__item.selectable.active .c8y-list__item__body:after{
+    float: none;
+    color: $component-brand-primary;
+  }
+}

package/styles/components/data-input/assets/_asset-property-list.scss

@@ -0,0 +1,285 @@
+@use "../../../../variables/index" as *;
+
+/**
+ * Asset Property List - Tree view component for asset properties
+ *
+ * Note: Uses $size-* tokens for spacing and $size-base for calculations.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px, 7px, 14px, 18px, 42px, 44px, 96px): Tree indentation and positioning not in token system
+ * - Border widths (1px): Standard borders
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Font size (0.7em): Relative size for drag handle
+ * - Transition duration (0.15s): Animation timing
+ * - Calc expressions: Complex computed values for tree structure
+ */
+
+c8y-asset-property-list {
+  .cdk-tree {
+    background: inherit;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+
+    &:has(.drag-handle-wrapper) {
+      padding-left: $size-8;
+    }
+  }
+
+  .tree-container:has(.drag-handle-wrapper) {
+    .select-all-container {
+      > .separator-bottom,
+      > .overflow-hidden {
+        padding-left: $size-8;
+      }
+    }
+  }
+
+  .cdk-tree-node {
+    height: $size-40;
+    background: inherit;
+
+    .drag-handle-wrapper {
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      position: absolute;
+      height: 100%;
+      font-size: 0.7em;
+      opacity: 0;
+      transition: opacity 0.15s linear;
+    }
+
+    &:hover {
+      .drag-handle-wrapper {
+        opacity: 1;
+      }
+    }
+  }
+
+  .cdk-tree-node > .d-flex::before {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: -6px;
+    width: $size-20;
+    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:last-of-type > .d-flex::before {
+    bottom: 50%;
+  }
+
+  .cdk-tree-node:not([aria-level='1']) {
+    > .d-flex::after {
+      content: '';
+      top: 50%;
+      left: -6px;
+      width: $size-20;
+      /* bottom: 0,*/
+      display: block;
+      border-bottom: 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;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &.nonSelectable {
+      > .d-flex::after {
+        width: $size-40;
+      }
+    }
+
+    .drag-handle-wrapper {
+      left: calc(-1 * $size-24);
+    }
+  }
+
+  .cdk-tree-node[aria-level]:not([aria-level='1']):not([aria-level='2']) {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 18px;
+      width: $size-20;
+      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: $size-20;
+        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: calc(-1 * $size-5);
+    }
+
+    > .d-flex::after {
+      width: 14px;
+      left: calc(-1 * $size-5);
+    }
+
+    &.nonSelectable {
+      > .d-flex::before {
+        left: 0;
+      }
+
+      > .d-flex::after {
+        width: $size-10;
+        left: 0;
+      }
+    }
+  }
+
+  .cdk-tree-node[aria-level='1'] > .d-flex::before {
+    display: none;
+  }
+
+  .cdk-tree-node[aria-level='1'] {
+    overflow: visible;
+  }
+
+  .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: 44px;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        bottom: calc(50% - 1px);
+        z-index: 3;
+        pointer-events: none;
+      }
+
+      &.nonCollapsible {
+        &::before {
+          width: 18px;
+          bottom: calc(100% - 1px);
+          height: 50%;
+        }
+
+        + .cdk-tree-node[aria-level='1'] {
+          &::before {
+            background: transparent;
+          }
+        }
+      }
+    }
+
+    &[aria-level='2'] {
+      &::before {
+        left: $size-24;
+        z-index: 1;
+      }
+
+      &.nonCollapsible {
+        + .cdk-tree-node[aria-level='2'] {
+          &::before {
+            background: transparent;
+          }
+        }
+      }
+    }
+
+    &[aria-level='3'] {
+      &::before {
+        left: $size-48;
+        z-index: 1;
+      }
+
+      &.nonCollapsible {
+        + .cdk-tree-node[aria-level='3'] {
+          &::before {
+            background: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  .cdk-tree-node .collapse-btn {
+    background-color: inherit;
+    position: relative;
+    z-index: 4;
+  }
+
+  .cdk-tree-node .c8y-list__item__radio {
+    padding-top: 7px !important;
+    padding-bottom: 7px !important;
+    max-height: $size-40 !important;
+    min-height: unset !important;
+  }
+
+  .cdk-tree-node .c8y-list__item__icon {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    z-index: 2;
+  }
+
+  c8y-asset-property-list:has(.asset-property-list__actions.has-computed) {
+    .asset-property-list__actions {
+      min-width: 96px;
+    }
+  }
+}
+
+.c8y-list__item--dense.cdk-drag-preview {
+  background-color: $component-background-default;
+  &::before,
+  .drag-handle-wrapper {
+    display: none;
+  }
+}

package/styles/{_asset-table.less → components/data-input/assets/_asset-table.less}

@@ -25,7 +25,7 @@ div .property:nth-child(odd) {
 }
 
 div .property.bg-info:nth-child(odd) {
-  background-color: @status-info-light;
+  background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
 }
 
 .column-name {
@@ -48,10 +48,7 @@ div .property.bg-info:nth-child(odd) {
   color: @text-color;
 }
 
-.icon-sort-down {
-  position: relative;
-  top: -9px;
-}
+// Removed unused icon class - verified 0 usages: .icon-sort-down
 
 .asset-table .btn-xs {
   font-size: 10px;
@@ -74,6 +71,6 @@ div .property.bg-info:nth-child(odd) {
   margin-right: 8px;
   line-height: 1.1em;
   &:hover {
-    color: @brand-primary;
+    color: var(--brand-primary, var(--c8y-brand-primary));
   }
 }

package/styles/components/data-input/assets/_asset-table.scss

@@ -0,0 +1,95 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/color-mixins";
+@use "../../../mixins/forms";
+
+/**
+ * Asset Table - Table component for asset properties
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (3px, 6px, 9px, 9.5px, 12px): Form control padding and positioning not in token system
+ * - Typography sizes (10px): Font size
+ * - Line-heights (1.1em, 23px, 34px): Text line heights
+ * - Percentages (50%): Positioning
+ * - Transition duration (0.2s): Animation timing
+ * - Darken percentages (0.03, 0.05): Color adjustments
+ */
+
+.property-label {
+  padding: 0;
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  transition: all 0.2s ease;
+
+  @include forms.form-control-focus();
+}
+
+.property-label:focus {
+  padding: 6px 12px;
+}
+
+div .property {
+  line-height: 34px;
+}
+
+div .property:hover {
+  @include color-mixins.darken($component-background-default, 0.05);
+}
+
+div .property:nth-child(odd) {
+  @include color-mixins.darken($component-background-default, 0.03);
+}
+
+div .property.bg-info:nth-child(odd) {
+  background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
+}
+
+.column-name {
+  line-height: 23px;
+}
+
+.spin-up {
+  position: relative;
+  top: 3px;
+}
+
+.spin-up,
+.spin-down {
+  display: block;
+  height: $size-5;
+  color: $gray-80;
+}
+
+.spin:hover .spin.active {
+  color: $text-color;
+}
+
+// Removed unused icon class - verified 0 usages: .icon-sort-down
+
+.asset-table .btn-xs {
+  font-size: $font-size-xs;
+  line-height: 1.1em;
+}
+
+.asset-table .headers .header-cell {
+  position: relative;
+  vertical-align: middle;
+}
+
+.asset-table .headers .widget-sort {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -9.5px;
+}
+
+.asset-table .headers .column-name {
+  margin-right: $size-8;
+  line-height: 1.1em;
+  &:hover {
+    color: var(--brand-primary, var(--c8y-brand-primary));
+  }
+}

package/styles/components/data-input/assets/_c8y-asset-notes.scss

@@ -0,0 +1,41 @@
+@use "../../../../variables/index" as *;
+
+/**
+ * C8Y Asset Notes - Asset notes component
+ *
+ * Note: Uses $component-padding and $size-* tokens for spacing.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (200px): Flex basis
+ * - Typography size (62px): Icon font size
+ * - Percentages (100%): Layout
+ */
+
+c8y-asset-notes {
+  position: relative;
+  display: block;
+  padding: $component-padding;
+  height: 100%;
+  .asset-notes-icon {
+    align-self: flex-start;
+    margin-right: $size-10;
+    font-size: 62px;
+  }
+  .asset-notes-content {
+    flex: 1 0 200px;
+  }
+  .asset-notes-body {
+    padding-top: $component-padding;
+  }
+}
+
+.card.card-dashboard > .card-inner-scroll {
+  > c8y-ui-component {
+    display: block;
+    height: 100%;
+    > c8y-asset-notes {
+      display: block;
+      height: 100%;
+    }
+  }
+}