@c8y/style 1023.14.33 → 1023.14.36

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

@@ -0,0 +1,814 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../core/buttons/buttons";
+
+
+/**
+ * data 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
+ */
+.table.table-data-grid {
+  display: grid;
+  min-width: 100%;
+  border-collapse: collapse;
+  margin: 0;
+  font-feature-settings:
+    'tnum' 1,
+    'kern' 1 !important;
+
+  &.table-bordered {
+    border: 0;
+  }
+
+  &.table-hover tbody{
+    tr:hover,
+    tr:focus-within {
+      background: $component-background-hover !important;
+
+      td {
+        background: $component-background-hover !important;
+      }
+      + tr.expanded-row {
+        background: $component-background-hover !important;
+        td {
+          background: $component-background-hover !important;
+        }
+      }
+    }
+  }
+
+  // override display for proper grid rendering
+  > thead,
+  > tbody,
+  > tfoot,
+  colgroup,
+  col {
+    display: contents;
+
+    > tr {
+      display: contents;
+    }
+
+    // text overflow
+    th.cdk-header-cell,
+    td.cdk-cell {
+      &,
+      > div:not(.dropdown),
+      > c8y-cell-renderer {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    th.cdk-header-cell {
+      overflow: unset;
+    }
+
+    td.cdk-cell {
+      position: relative;
+
+      > *:not(.tooltip) {
+        position: relative;
+        z-index: 1;
+
+        &.dropdown {
+          z-index: unset;
+          margin: -10px 0;
+        }
+      }
+    }
+  }
+
+  > caption + thead > tr:first-child > td,
+  > caption + thead > tr:first-child > th,
+  > colgroup + thead > tr:first-child > td,
+  > colgroup + thead > tr:first-child > th,
+  > thead:first-child > tr:first-child > td,
+  > thead:first-child > tr:first-child > th {
+    display: flex;
+    flex-flow: row nowrap;
+    text-transform: none;
+    font-size: $font-size-base;
+
+    .btn-header,
+    > span,
+    > div {
+      &:not(.resize-handle):not(.dropdown) {
+        padding: 12.5px $size-8 !important;
+        max-width: 102%;
+        min-width: 100%;
+        text-align: left;
+      }
+    }
+
+    @media (max-width: $screen-sm-max) {
+      display: none;
+    }
+  }
+
+  tbody > tr:first-child > td {
+    border-top: 0;
+  }
+
+  // this is required to force the virtual rows
+  tr > td:last-child,
+  tr > th:last-child {
+    grid-column-end: -1;
+    overflow: visible;
+  }
+  tr > td.cdk-column-expander {
+    overflow: visible;
+  }
+
+  // only for mobile
+  @media (max-width: $screen-sm-max) {
+    display: block;
+
+    tbody tr {
+      display: grid;
+      grid-template-columns: minmax(0, 44px) repeat(auto-fit, minmax(152px, 100%)) minmax(0, 44px);
+      padding: $size-8 0;
+      border-top: 1px solid $component-border-color;
+    }
+
+    tbody > tr:first-child {
+      border-top: 0;
+    }
+
+    td:not(.cdk-column-actions):not(.cdk-column-checkbox):not([data-type='icon']) {
+      grid-column: 2;
+    }
+
+    [data-type='icon'],
+    .cdk-column-checkbox {
+      grid-column: 1 / span 1;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .data-record-header {
+      grid-row: 1;
+    }
+
+    .cdk-column-actions,
+    .cdk-column-expander {
+      &::before {
+        display: none;
+      }
+
+      padding-right: 0;
+      padding-left: 0;
+      padding-top: 0;
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+      gap: $size-base;
+      grid-column: 3;
+      grid-row: 1 / span 15;
+
+      .btn + .btn {
+        margin: 0;
+      }
+    }
+    .cdk-column-expander {
+      grid-row: -1;
+      grid-column: 1;
+      c8y-cell-renderer {
+        display: contents !important;
+      }
+    }
+    tr > td.cdk-column-expanded-row {
+      padding-left: 52px;
+      padding-right: 52px;
+    }
+
+    // hide the table header on mobile
+    thead tr {
+      display: none;
+    }
+
+    tbody > tr > td {
+      border: 0;
+
+      &:before {
+        display: block;
+        color: $form-legend-color;
+        content: attr(data-cell-title);
+        text-transform: uppercase;
+        font-size: $size-10;
+        position: relative;
+        z-index: 1;
+      }
+    }
+
+    /*
+    * specific table headers
+    * use for displaying row headers in small viewports
+    */
+    .data-record-icon {
+      &:before {
+        display: none;
+      }
+    }
+
+    .data-record-header {
+      font-weight: bold;
+
+      &:before {
+        font-weight: normal;
+      }
+    }
+
+    .data-record-icon {
+      text-align: left !important;
+      color: $component-icon-color;
+    }
+
+    td:last-child {
+      border-top: 0;
+    }
+  }
+
+  &.table-striped {
+    tr > td {
+      background: $component-background-default;
+    }
+
+    tr:not(.cdk-footer-row):not(.odd):not(.even):not(.expanded-row):nth-of-type(odd) > td,
+    tr.odd > td,
+    tr.odd + tr.expanded-row > td {
+      background: $component-background-odd;
+    }
+  }
+
+  // large screens, starting on tablet in portrait
+  @media (min-width: $screen-md-min) {
+    // Sticky table header
+    thead tr > th {
+      position: sticky;
+      top: 0;
+      z-index: 3;
+      display: unset;
+      background-color: $page-sticky-header-background-default;
+      white-space: nowrap;
+      padding: 0;
+
+      .dropdown {
+        flex-grow: 1;
+        max-width: calc(100% - 24px) !important;
+      }
+
+      .open [dropdowntoggle]:not(.input-group):not(.btn):not(.c8y-search-dropdown) {
+        background-color: $component-background-default;
+        box-shadow: var(--c8y-elevation-md-bottom);
+      }
+    }
+    [data-type='icon'] {
+      text-align: center !important;
+    }
+    .data-record-icon {
+      text-align: center !important;
+      grid-column-start: 1;
+      grid-column-end: 2;
+
+      + .data-record-header {
+        grid-column-start: 2;
+        grid-column-end: 3;
+      }
+    }
+    tr > td.cdk-column-expanded-row {
+      padding-left: 72px;
+      padding-right: 72px;
+    }
+    .cdk-column-actions,
+    .cdk-column-expander {
+      display: flex !important;
+      c8y-cell-renderer {
+        display: contents !important;
+      }
+      .btn-dot {
+        align-self: flex-start;
+        margin-left: auto;
+      }
+
+      .dropdown {
+        margin: -9px calc(-1 * $size-8) calc(-1 * $size-8) 0;
+      }
+    }
+  }
+
+  /* end @media */
+}
+
+/*
+ fix for firefox position sticky bug
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
+ Note: @-moz-document is not supported in Dart Sass, commented out
+*/
+// @media (min-width: $screen-md-min) {
+//   @-moz-document url-prefix() {
+//     .table-data-grid {
+//       padding-bottom: 64px;
+//     }
+//   }
+// }
+
+.table-data-grid-scroll {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  background-color: $component-background-default;
+  display: flex;
+  flex-direction: column;
+
+  .content-fullpage & {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.table-data-grid .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: $size-8;
+  background: transparent;
+  box-shadow: inset -1px 0 0 $component-brand-primary;
+  opacity: 0;
+  cursor: col-resize;
+
+  &:hover {
+    opacity: 0.5;
+    height: 100%;
+  }
+}
+
+.header--being-resized {
+  z-index: 10;
+  overflow: visible !important;
+
+  .resize-handle {
+    opacity: 0.5;
+    height: calc(100vh - 250px);
+  }
+}
+
+.table-data-grid-header {
+  position: sticky;
+  padding: 0 $component-padding;
+  top: 0;
+  left: 0;
+  z-index: 15;
+  background-color: $component-background-default;
+  min-height: calc($size-base * 7);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  h4 {
+    font-weight: 500;
+  }
+
+  .dropdown{
+    min-width: unset;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    flex-wrap: wrap;
+    padding: $component-padding;
+  }
+
+  &.separator {
+    box-shadow: inset 0 -1px 0 $component-border-color;
+  }
+
+  + .table.table-data-grid thead > tr > th {
+    top: 56px;
+    box-shadow: inset 0 -2px 0 $component-border-color;
+
+    &:hover {
+      box-shadow:
+        inset 0 -2px 0 $component-border-color,
+        inset -1px 0 0 $component-border-color,
+        inset 1px 0 0 $component-border-color;
+    }
+  }
+}
+
+.table-data-grid-header-bulk-actions {
+  background-color: $component-color-active;
+  color:  $component-background-active;
+  padding: 0 $component-padding;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 12;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  a {
+    color: inherit !important;
+    text-decoration: underline;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.table-data-grid-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0 $component-padding;
+  background: $component-background-default;
+  position: sticky;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  margin-top: auto;
+
+  &.separator {
+    box-shadow: inset 0 1px 0 $component-border-color;
+  }
+
+  .form-group label,
+  .form-group .c8y-select-wrapper {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  pagination {
+    height: $size-32;
+    display: inline-block;
+  }
+
+  .form-group {
+    margin: $size-8 0;
+    padding: 0 8px;
+
+    label {
+      margin-bottom: 0;
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    flex-wrap: nowrap;
+
+    > .form-group {
+      justify-self: center;
+    }
+
+    pagination {
+      justify-self: end;
+    }
+  }
+}
+
+c8y-filtering-form {
+  .form-inline {
+    margin-right: 0 !important;
+  }
+
+  .list-inline.flex-row {
+    display: block;
+    margin: 0;
+  }
+
+  .list-inline-item.ui-sortable-handle {
+    width: 100% !important;
+    padding: 0 !important;
+    pointer-events: none;
+    cursor: default !important;
+
+    > * {
+      pointer-events: auto;
+    }
+
+    &:hover {
+      outline: none !important;
+    }
+  }
+
+  .form-group {
+    margin-bottom: 4px;
+  }
+
+  sf-decorator {
+    width: 100%;
+  }
+
+  .btn-add-block {
+    padding: $size-8;
+    margin-bottom: 0;
+
+    > [class^='dlt-c8y-icon-'],
+    > [class*=' dlt-c8y-icon-'] {
+      font-size: 1.4em;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .c8y-schema-form-empty:not(:first-child) {
+    margin-top: 1rem;
+    display: block;
+  }
+}
+
+.table-data-grid {
+  &__overlay {
+    position: relative;
+
+    > *:not(.table-data-grid-header) {
+      pointer-events: none;
+    }
+  }
+
+  &__loading--wrapper {
+    opacity: 1 !important;
+    position: sticky;
+    top: 0;
+    z-index: 200;
+  }
+
+  &__loading--loader {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 130px);
+    z-index: 200;
+    font-weight: 500;
+    background-color: $component-background-default;
+    padding: $component-padding;
+    border-radius: 4px;
+  }
+}
+
+.data-grid__search-input {
+  max-width: 220px;
+}
+
+.data-grid__dropdown {
+  .cdk-header-cell & {
+    width: 300px;
+  }
+
+  c8y-object-type div p {
+    text-align: left !important;
+    font-weight: bold !important;
+    margin: $size-8 0 4px 0 !important;
+    font-size: inherit;
+  }
+
+  c8y-object-type formly-field:first-child {
+    c8y-object-type div p {
+      margin-top: 0 !important;
+    }
+  }
+
+  --dropdown-padding: 16;
+  background-color: var(--c8y-dropdown-background-default);
+  font-weight: normal;
+  .bg-component {
+    background-color: var(--c8y-dropdown-background-default);
+  }
+  @media screen and (min-width: $screen-md-min) {
+    c8y-bulk-operation-stepper & {
+      max-height: calc(100vh - 500px);
+    }
+    max-height: calc(100vh - 480px);
+  }
+
+  c8y-filtering-form-renderer {
+    display: block;
+    padding-left: $component-padding;
+    padding-right: $component-padding;
+
+    .data-grid__dropdown__header,
+    .data-grid__dropdown__footer {
+      margin-left: calc($component-padding * -1);
+      margin-right: calc($component-padding * -1);
+      padding: $component-padding;
+      background-color: var(--c8y-dropdown-background-default);
+      position: sticky !important;
+      z-index: 900;
+    }
+
+    c8y-asset-selector {
+      display: block;
+      margin-right: calc($component-padding * -1);
+      margin-left: calc($component-padding * -1);
+    }
+
+    .data-grid__dropdown__header {
+      top: 0;
+    }
+
+    .data-grid__dropdown__footer {
+      bottom: 0;
+    }
+
+    c8y-schema-form:first-child,
+    c8y-form-group:first-child {
+      padding-top: $component-padding;
+      display: block;
+
+      + .data-grid__dropdown__footer {
+        margin-top: $component-padding;
+      }
+    }
+
+    bootstrap-decorator {
+      display: block;
+
+      &.c8y-schema-form-empty {
+        label {
+          display: block;
+          padding-top: $component-padding;
+        }
+
+        &:first-child {
+          label {
+            padding-top: 0;
+          }
+        }
+      }
+
+      .checkbox label {
+        margin: 0;
+      }
+
+      .ui-sortable .ui-sortable-handle {
+        width: auto;
+      }
+
+      sf-decorator {
+        flex-grow: 1;
+
+        .form-group {
+          margin: 0;
+        }
+      }
+    }
+
+    //FORMLY IMPLEMENTATION
+    formly-form:first-child {
+      display: block;
+      padding-top: $component-padding;
+
+      + .data-grid__dropdown__footer {
+        margin-top: $component-padding;
+      }
+    }
+
+    formly-field {
+      display: block;
+
+      &:first-child {
+        > formly-label-type {
+          label {
+            padding-top: 0;
+          }
+        }
+      }
+
+      & formly-label-type {
+        > label {
+          display: block;
+          padding-top: $component-padding;
+        }
+      }
+
+      .checkbox label {
+        margin: 0;
+      }
+
+      .ui-sortable .ui-sortable-handle {
+        width: auto;
+      }
+
+      sf-decorator {
+        flex-grow: 1;
+
+        .form-group {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+// TREE NODE
+
+.data-grid-child-node {
+  > td {
+    animation: expandChildNode 0.25s ease-out;
+    animation-fill-mode: forwards;
+    transform-origin: left top;
+  }
+}
+
+// Tree node cell renderer
+// a workaround for the tree node cell renderer to increment padding accorndig to the level
+$base-padding: $size-16;
+
+@mixin loop($i) {
+
+  @if $i <= 10 {
+  tr.level-#{$i} {
+    c8y-tree-node-cell-renderer,
+    &.pagination-row {
+      display: block;
+      padding-left: $base-padding * $i;
+
+      .cdk-column-pagination-row {
+        display: block;
+        padding-left: $base-padding * $i + $base-padding;
+        padding-right: $base-padding * $i + $base-padding;
+      }
+    }
+
+    .tree-node-padding-cell {
+      display: block;
+      padding-left: calc($base-padding * $i + var(--c8y-table-cell-padding-default));
+    }
+  }
+
+  @include loop($i + 1);
+}
+@include loop(1);
+
+.data-grid-collapse-btn {
+  @include buttons.btn-clean();
+  padding: $size-8 !important;
+  min-width: $size-40;
+  min-height: $size-20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: calc(-1 * $size-8) 0;
+  font-size: 18px;
+  line-height: 1;
+  &:hover:not(:focus) {
+    outline: 1px solid $component-color-focus;
+    outline-offset: -1px;
+    border-radius: $component-border-radius-focus!important;
+  }
+  > i {
+    transition: all 0.25s ease;
+  }
+  &.active > i.dlt-c8y-icon-chevron-right {
+    transform: rotate(90deg);
+  }
+}
+
+td.cdk-cell.cdk-column-tree-node:has(c8y-tree-node-cell-renderer) {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: visible !important;
+  c8y-cell-renderer,
+  c8y-tree-node-cell-renderer {
+    overflow: visible !important;
+  }
+}
+
+.cdk-column-actions {
+  overflow: visible !important;
+}
+
+.cdk-footer-row .cdk-footer-cell:has(c8y-load-more:empty) {
+  display: none;
+}
+
+@keyframes expandChildNode {
+  0% {
+    transform: scale(1, 0);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+}