@c8y/style/styles/_data-grid.less

Styles for Cumulocity IoT applications

.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 8px !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: 8px 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: @margin-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: 10px;
        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 -8px -8px 0;
      }
    }
  }

  /* end @media */
}

/*
 fix for firefox position sticky bug
 https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
*/
@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: 8px;
  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(@margin-base * 7);
  display: flex;
  flex-direction: row;
  align-items: center;

  h4 {
    font-weight: 500;
  }

  @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: 32px;
    display: inline-block;
  }

  .form-group {
    margin: 8px 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: all;
    }

    &:hover {
      outline: none !important;
    }
  }

  .form-group {
    margin-bottom: 4px;
  }

  sf-decorator {
    width: 100%;
  }

  .btn-add-block {
    padding: 8px;
    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: 8px 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: 16px;

.loop(@i) when (@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));
    }
  }

  .loop(@i + 1);
}
.loop(1);

.data-grid-collapse-btn {
  .btn-clean();
  padding: 8px !important;
  min-width: 40px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -8px 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);
  }
}