@swimlane/ngx-datatable 20.0.0 → 21.0.0-alpha.0

package/themes/bootstrap.scss

@@ -1,101 +0,0 @@
-/*
-bootstrap table theme
-*/
-
-.ngx-datatable.bootstrap {
-  box-shadow: none;
-  font-size: 13px;
-  .datatable-header {
-    height: unset !important;
-    .datatable-header-cell {
-      vertical-align: bottom;
-      padding: 0.75rem;
-      border-bottom: 1px solid #d1d4d7;
-      .datatable-header-cell-label {
-        line-height: 24px;
-      }
-    }
-  }
-  .datatable-body {
-    .datatable-body-row {
-      vertical-align: top;
-      border-top: 1px solid #d1d4d7;
-      &.datatable-row-even {
-        background-color: rgba(0, 0, 0, 0.05);
-      }
-      &.active {
-        background-color: #1483ff;
-        color: #fff;
-      }
-      .datatable-body-cell {
-        padding: 0.75rem;
-        text-align: left;
-        vertical-align: top;
-      }
-    }
-    .empty-row {
-      $alert-padding-y: 0.75rem !default;
-      $alert-padding-x: 1.25rem !default;
-      position: relative;
-      padding: $alert-padding-y $alert-padding-x;
-      margin-bottom: 0;
-    }
-  }
-  .datatable-footer {
-    background: #424242;
-    color: #ededed;
-    margin-top: -1px;
-    .page-count {
-      line-height: 50px;
-      height: 50px;
-      padding: 0 1.2rem;
-    }
-    .datatable-pager {
-      margin: 0 10px;
-      vertical-align: top;
-      ul {
-        li {
-          margin: 10px 0px;
-          &:not(.disabled) {
-            &.active,
-            &:hover {
-              a {
-                background-color: #545454;
-                font-weight: bold;
-              }
-            }
-          }
-        }
-      }
-      a {
-        height: 22px;
-        min-width: 24px;
-        line-height: 22px;
-        padding: 0;
-        border-radius: 3px;
-        margin: 0 3px;
-        text-align: center;
-        vertical-align: top;
-        text-decoration: none;
-        vertical-align: bottom;
-        color: #ededed;
-      }
-      .datatable-icon-left,
-      .datatable-icon-skip,
-      .datatable-icon-right,
-      .datatable-icon-prev {
-        font-size: 18px;
-        line-height: 27px;
-        padding: 0 3px;
-      }
-    }
-  }
-  // Summary row styles
-  .datatable-summary-row {
-    .datatable-body-row {
-      .datatable-body-cell {
-        font-weight: bold;
-      }
-    }
-  }
-}

package/themes/dark.css

@@ -1,75 +0,0 @@
-.ngx-datatable.dark {
-  box-shadow: none;
-  background: #1b1e27;
-  border: 1px solid #2f3646;
-  color: #fff;
-  font-size: 13px; }
-  .ngx-datatable.dark .datatable-header {
-    background: #181b24;
-    color: #72809b; }
-    .ngx-datatable.dark .datatable-header .datatable-header-cell {
-      text-align: left;
-      padding: 0.5rem 1.2rem;
-      font-weight: bold; }
-      .ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
-        line-height: 24px; }
-  .ngx-datatable.dark .datatable-body {
-    background: #1a1e28; }
-    .ngx-datatable.dark .datatable-body .datatable-body-row {
-      border-top: 1px solid #2f3646; }
-      .ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
-        text-align: left;
-        padding: 0.5rem 1.2rem;
-        vertical-align: top; }
-      .ngx-datatable.dark .datatable-body .datatable-body-row:hover {
-        background: #171b24;
-        transition-property: background;
-        transition-duration: 0.3s;
-        transition-timing-function: linear; }
-      .ngx-datatable.dark .datatable-body .datatable-body-row:focus {
-        background-color: #232837; }
-      .ngx-datatable.dark .datatable-body .datatable-body-row.active {
-        background-color: #1483ff;
-        color: #fff; }
-  .ngx-datatable.dark .datatable-footer {
-    background: #232837;
-    color: #72809b;
-    margin-top: -1px; }
-    .ngx-datatable.dark .datatable-footer .page-count {
-      line-height: 50px;
-      height: 50px;
-      padding: 0 1.2rem; }
-    .ngx-datatable.dark .datatable-footer .datatable-pager {
-      margin: 0 10px;
-      vertical-align: top; }
-      .ngx-datatable.dark .datatable-footer .datatable-pager ul li {
-        margin: 10px 0px; }
-        .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a,
-        .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
-          background-color: #455066;
-          font-weight: bold; }
-      .ngx-datatable.dark .datatable-footer .datatable-pager a {
-        height: 22px;
-        min-width: 24px;
-        line-height: 22px;
-        padding: 0;
-        border-radius: 3px;
-        margin: 0 3px;
-        text-align: center;
-        vertical-align: top;
-        text-decoration: none;
-        vertical-align: bottom;
-        color: #72809b; }
-      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
-      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
-      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
-      .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
-        font-size: 18px;
-        line-height: 27px;
-        padding: 0 3px; }
-  .ngx-datatable.dark .datatable-summary-row .datatable-body-row {
-    background-color: #14171f; }
-    .ngx-datatable.dark .datatable-summary-row .datatable-body-row:hover {
-      background-color: #14171f; }
-    .ngx-datatable.dark .datatable-summary-row .datatable-body-row .datatable-body-cell {
-      font-weight: bold; }

package/themes/dark.scss

@@ -1,120 +0,0 @@
-.ngx-datatable.dark {
-  box-shadow: none;
-  background: #1b1e27;
-  border: 1px solid #2f3646;
-  color: #fff;
-  font-size: 13px;
-
-  .datatable-header {
-    background: #181b24;
-    color: #72809b;
-
-    .datatable-header-cell {
-      text-align: left;
-      padding: 0.5rem 1.2rem;
-      font-weight: bold;
-
-      .datatable-header-cell-label {
-        line-height: 24px;
-      }
-    }
-  }
-
-  .datatable-body {
-    background: #1a1e28;
-
-    .datatable-body-row {
-      border-top: 1px solid #2f3646;
-
-      .datatable-body-cell {
-        text-align: left;
-        padding: 0.5rem 1.2rem;
-        vertical-align: top;
-      }
-
-      &:hover {
-        background: #171b24;
-        transition-property: background;
-        transition-duration: 0.3s;
-        transition-timing-function: linear;
-      }
-
-      &:focus {
-        background-color: #232837;
-      }
-
-      &.active {
-        background-color: #1483ff;
-        color: #fff;
-      }
-    }
-  }
-
-  .datatable-footer {
-    background: #232837;
-    color: #72809b;
-    margin-top: -1px;
-
-    .page-count {
-      line-height: 50px;
-      height: 50px;
-      padding: 0 1.2rem;
-    }
-
-    .datatable-pager {
-      margin: 0 10px;
-      vertical-align: top;
-
-      ul {
-        li {
-          margin: 10px 0px;
-
-          &:not(.disabled) {
-            &.active a,
-            &:hover a {
-              background-color: #455066;
-              font-weight: bold;
-            }
-          }
-        }
-      }
-
-      a {
-        height: 22px;
-        min-width: 24px;
-        line-height: 22px;
-        padding: 0;
-        border-radius: 3px;
-        margin: 0 3px;
-        text-align: center;
-        vertical-align: top;
-        text-decoration: none;
-        vertical-align: bottom;
-        color: #72809b;
-      }
-
-      .datatable-icon-left,
-      .datatable-icon-skip,
-      .datatable-icon-right,
-      .datatable-icon-prev {
-        font-size: 18px;
-        line-height: 27px;
-        padding: 0 3px;
-      }
-    }
-  }
-
-  .datatable-summary-row {
-    .datatable-body-row {
-      background-color: #14171f;
-
-      &:hover {
-        background-color: #14171f;
-      }
-
-      .datatable-body-cell {
-        font-weight: bold;
-      }
-    }
-  }
-}

package/themes/material.css

@@ -1,305 +0,0 @@
-/*
-  This stylesheet uses scss valiables for most of the colors / background-colors of the table
-  to enable the customization of the displayed table without cloning the stylesheet into the
-  own application.
-
-  To modify table colors, add the following lines to the scss file of your application
-  (this example modifies the color of the selected row - selectionType = single, multi or multiClick):
-
-  $ngx-datatable-selected-active-background: yellow;
-  $ngx-datatable-selected-active-background-hover: rgba(yellow, 0.2);
-
-  @import '~@swimlane/ngx-datatable/index.css';
-  @import '~@swimlane/ngx-datatable/themes/material.scss';
-  @import '~@swimlane/ngx-datatable/assets/icons.css';
-
-That's all.
-*/
-.ngx-datatable.material {
-  background: #fff;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  /**
-	 * Shared Styles
-	 */
-  /**
-	 * Global Row Styles
-	 */
-  /**
-	 * Header Styles
-	 */
-  /**
-	 * Body Styles
-	 */
-  /**
-	 * Footer Styles
-	 */ }
-  .ngx-datatable.material.striped .datatable-row-odd {
-    background: #eee; }
-  .ngx-datatable.material.single-selection .datatable-body-row.active,
-  .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active,
-  .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active,
-  .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
-    background-color: #304ffe;
-    color: #fff; }
-  .ngx-datatable.material.single-selection .datatable-body-row.active:hover,
-  .ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover,
-  .ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover,
-  .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
-    background-color: #193ae4;
-    color: #fff; }
-  .ngx-datatable.material.single-selection .datatable-body-row.active:focus,
-  .ngx-datatable.material.single-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus,
-  .ngx-datatable.material.multi-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus,
-  .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus .datatable-row-group {
-    background-color: #2041ef;
-    color: #fff; }
-  .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover,
-  .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group {
-    background-color: #eee;
-    transition-property: background;
-    transition-duration: 0.3s;
-    transition-timing-function: linear; }
-  .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus,
-  .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus .datatable-row-group {
-    background-color: #ddd; }
-  .ngx-datatable.material.cell-selection .datatable-body-cell:hover,
-  .ngx-datatable.material.cell-selection .datatable-body-cell:hover .datatable-row-group {
-    background-color: #eee;
-    transition-property: background;
-    transition-duration: 0.3s;
-    transition-timing-function: linear; }
-  .ngx-datatable.material.cell-selection .datatable-body-cell:focus,
-  .ngx-datatable.material.cell-selection .datatable-body-cell:focus .datatable-row-group {
-    background-color: #ddd; }
-  .ngx-datatable.material.cell-selection .datatable-body-cell.active,
-  .ngx-datatable.material.cell-selection .datatable-body-cell.active .datatable-row-group {
-    background-color: #304ffe;
-    color: #fff; }
-  .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover,
-  .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover .datatable-row-group {
-    background-color: #193ae4;
-    color: #fff; }
-  .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus,
-  .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus .datatable-row-group {
-    background-color: #2041ef;
-    color: #fff; }
-  .ngx-datatable.material .empty-row {
-    height: 50px;
-    text-align: left;
-    padding: 0.5rem 1.2rem;
-    vertical-align: top;
-    border-top: 0; }
-  .ngx-datatable.material .loading-row {
-    text-align: left;
-    padding: 0.5rem 1.2rem;
-    vertical-align: top;
-    border-top: 0; }
-  .ngx-datatable.material .datatable-header .datatable-row-left,
-  .ngx-datatable.material .datatable-body .datatable-row-left {
-    background-color: #fff;
-    background-position: 100% 0;
-    background-repeat: repeat-y;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==); }
-  .ngx-datatable.material .datatable-header .datatable-row-right,
-  .ngx-datatable.material .datatable-body .datatable-row-right {
-    background-position: 0 0;
-    background-color: #fff;
-    background-repeat: repeat-y;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==); }
-  .ngx-datatable.material .datatable-header {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
-    .ngx-datatable.material .datatable-header .datatable-header-cell {
-      text-align: left;
-      padding: 0.9rem 1.2rem;
-      font-weight: 400;
-      background-color: #fff;
-      color: rgba(0, 0, 0, 0.54);
-      vertical-align: bottom;
-      font-size: 12px;
-      font-weight: 500; }
-      .ngx-datatable.material .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
-        position: relative; }
-      .ngx-datatable.material .datatable-header .datatable-header-cell.longpress .draggable::after {
-        transition: transform 400ms ease, opacity 400ms ease;
-        opacity: 0.5;
-        transform: scale(1); }
-      .ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
-        content: ' ';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin: -30px 0 0 -30px;
-        height: 60px;
-        width: 60px;
-        background: #eee;
-        border-radius: 100%;
-        opacity: 1;
-        filter: none;
-        transform: scale(0);
-        z-index: 9999;
-        pointer-events: none; }
-      .ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
-        border-right: none; }
-    .ngx-datatable.material .datatable-header .resize-handle {
-      border-right: solid 1px #eee; }
-  .ngx-datatable.material .datatable-body {
-    position: relative; }
-    .ngx-datatable.material .datatable-body .datatable-row-detail {
-      background: #f5f5f5;
-      padding: 10px; }
-    .ngx-datatable.material .datatable-body .datatable-group-header {
-      background: #f5f5f5;
-      border-bottom: solid 1px #d9d8d9;
-      border-top: solid 1px #d9d8d9; }
-    .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
-      text-align: left;
-      padding: 0.9rem 1.2rem;
-      vertical-align: top;
-      border-top: 0;
-      color: rgba(0, 0, 0, 0.87);
-      transition: width 0.3s ease;
-      font-size: 14px;
-      font-weight: 400; }
-    .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-group-cell {
-      text-align: left;
-      padding: 0.9rem 1.2rem;
-      vertical-align: top;
-      border-top: 0;
-      color: rgba(0, 0, 0, 0.87);
-      transition: width 0.3s ease;
-      font-size: 14px;
-      font-weight: 400; }
-    .ngx-datatable.material .datatable-body .progress-linear {
-      display: block;
-      position: sticky;
-      width: 100%;
-      height: 5px;
-      padding: 0;
-      margin: 0;
-      top: 0; }
-      .ngx-datatable.material .datatable-body .progress-linear .container {
-        display: block;
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        height: 5px;
-        -webkit-transform: translate(0, 0) scale(1, 1);
-        transform: translate(0, 0) scale(1, 1);
-        background-color: #aad1f9; }
-        .ngx-datatable.material .datatable-body .progress-linear .container .bar {
-          transition: all 0.2s linear;
-          -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
-          animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
-          transition: -webkit-transform 0.2s linear;
-          transition: transform 0.2s linear;
-          background-color: #106cc8;
-          position: absolute;
-          left: 0;
-          top: 0;
-          bottom: 0;
-          width: 100%;
-          height: 5px; }
-  .ngx-datatable.material .datatable-footer {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-    font-size: 12px;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.54); }
-    .ngx-datatable.material .datatable-footer .page-count {
-      line-height: 50px;
-      height: 50px;
-      padding: 0 1.2rem; }
-    .ngx-datatable.material .datatable-footer .datatable-pager {
-      margin: 0 10px; }
-      .ngx-datatable.material .datatable-footer .datatable-pager li {
-        vertical-align: middle; }
-        .ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
-          color: rgba(0, 0, 0, 0.26) !important;
-          background-color: transparent !important; }
-        .ngx-datatable.material .datatable-footer .datatable-pager li.active a {
-          background-color: rgba(158, 158, 158, 0.2);
-          font-weight: bold; }
-      .ngx-datatable.material .datatable-footer .datatable-pager a {
-        height: 22px;
-        min-width: 24px;
-        line-height: 22px;
-        padding: 0 6px;
-        border-radius: 3px;
-        margin: 6px 3px;
-        text-align: center;
-        vertical-align: top;
-        color: rgba(0, 0, 0, 0.54);
-        text-decoration: none;
-        vertical-align: bottom; }
-        .ngx-datatable.material .datatable-footer .datatable-pager a:hover {
-          color: rgba(0, 0, 0, 0.75);
-          background-color: rgba(158, 158, 158, 0.2); }
-      .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
-      .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
-      .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-right,
-      .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-prev {
-        font-size: 20px;
-        line-height: 20px;
-        padding: 0 3px; }
-  .ngx-datatable.material .datatable-summary-row .datatable-body-row {
-    background-color: #ddd; }
-    .ngx-datatable.material .datatable-summary-row .datatable-body-row:hover {
-      background-color: #ddd; }
-    .ngx-datatable.material .datatable-summary-row .datatable-body-row .datatable-body-cell {
-      font-weight: bold; }
-
-/**
- * Checkboxes
-**/
-.datatable-checkbox {
-  position: relative;
-  margin: 0;
-  cursor: pointer;
-  vertical-align: middle;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 0; }
-  .datatable-checkbox input[type='checkbox'] {
-    position: relative;
-    margin: 0 1rem 0 0;
-    cursor: pointer;
-    outline: none; }
-    .datatable-checkbox input[type='checkbox']:before {
-      -webkit-transition: all 0.3s ease-in-out;
-      -moz-transition: all 0.3s ease-in-out;
-      transition: all 0.3s ease-in-out;
-      content: '';
-      position: absolute;
-      left: 0;
-      z-index: 1;
-      width: 1rem;
-      height: 1rem;
-      border: 2px solid #f2f2f2; }
-    .datatable-checkbox input[type='checkbox']:checked:before {
-      -webkit-transform: rotate(-45deg);
-      -moz-transform: rotate(-45deg);
-      -ms-transform: rotate(-45deg);
-      transform: rotate(-45deg);
-      height: 0.5rem;
-      border-color: #009688;
-      border-top-style: none;
-      border-right-style: none; }
-    .datatable-checkbox input[type='checkbox']:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 1rem;
-      height: 1rem;
-      background: #fff;
-      cursor: pointer; }
-
-/**
- * Progress bar animations
- */
-@keyframes query {
-  0% {
-    opacity: 1;
-    transform: translateX(35%) scale(0.3, 1); }
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0, 1); } }