@angular-generic-table/core 5.0.0-rc.10 → 5.0.0-rc.13

package/scss/index.scss

@@ -1,32 +1,127 @@
 $highlight-background-color: #ffdd00 !default;
-$mobile-style-selector: 'table.table-mobile' !default;
+$style-selector: '.table' !default;
+$mobile-style-selector: 'table.table-mobile:not(.table-horizontal)' !default;
 $mobile-style-max-width: 576px !default;
 $mobile-style-header-font-weight: 500 !default;
-$mobile-style-header-background-color: #fff !default;
+$mobile-style-header-background-color: var(--bs-body-bg, #fff) !default;
 $mobile-style-button-selector: '.btn-sm' !default;
-$mobile-style-border-bottom: solid 1px #dedede !default;
+$mobile-style-border-bottom: var(--bs-border-style, solid) var(--bs-border-width, 1px) var(--bs-border-color, #dedede) !default;
 $mobile-style-button-font-size: 1rem !default;
-$mobile-style-button-padding: 0.5625rem 1rem !default;
+$mobile-style-button-padding: 0.375rem 0.75rem !default;
 $pagination-ellipsis-content: '...' !default;
-$pagination-active-color: #000 !default;
+$pagination-active-color: var(--bs-light, #000) !default;
 $pagination-justify-content: center !default;
+$cell-padding-y: 0.5rem !default;
+$cell-padding-x: 0.5rem !default;
+$sort-selector: '.gt-sort' !default;
+
+$table-column-header-bg: var(--bs-body-bg);
+$table-row-header-bg: var(--bs-body-bg);
+
+$delta-positive-prefix: '+' !default;
+
+$sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 448 644'%3E%3Cpath transform='translate(0 240)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath transform='translate(0 -100)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E") !default;
+//$sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-arrows-sort' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M3 9l4 -4l4 4m-4 -4v14'%3E%3C/path%3E%3Cpath d='M21 15l-4 4l-4 -4m4 4v-14'%3E%3C/path%3E%3C/svg%3E") !default;
+$sort-icon-size: 1rem;
+$sort-icon-color: rgba(var(--bs-secondary-rgb, #000),0.25) !default;
+$sort-icon-color-active: var(--bs-primary, #000) !default;
+$ascending-sort-gradient: linear-gradient(1turn,
+  $sort-icon-color 50%,
+  $sort-icon-color-active 50%
+) !default;
+$descending-sort-gradient: linear-gradient(
+  $sort-icon-color 50%,
+  $sort-icon-color-active 50%
+) !default;
+/*$ascending-sort-gradient: linear-gradient(0.25turn,
+    $sort-icon-color 50%,
+    $sort-icon-color-active 50%
+) !default;
+$descending-sort-gradient: linear-gradient(0.75turn,
+    $sort-icon-color 50%,
+    $sort-icon-color-active 50%
+) !default;
+*/
+
+$skeleton-loader-highlight-color: var(--bs-gray-300, rgb(200,200,200)) !default;
+$skeleton-loader-background-color: var(--bs-gray-200, rgb(240,240,240)) !default;
+$skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='159'%3E%3Cpath fill-rule='evenodd' fill='%23FFF' d='M0 124.999v-1h768v1H0ZM660 114V90h73.999v24H660Zm-144.001 0V90h120v24h-120ZM402 114V90h80v24h-80Zm-134 0V90h100v24H268Zm-154.001 0V90h130v24h-130ZM0 78.999h768v1H0v-1ZM660 69V45h63.999v24H660Zm-144.001 0V45h110v24h-110ZM402 69V45h69.999v24H402Zm-134 0V45h80v24h-80Zm-154.001 0V45h120v24h-120ZM0 33.999h768V35H0v-1.001ZM660 0h83.999v24H660V0ZM515.999 0h90v24h-90V0ZM402 0h90v24h-90V0ZM268 0h100v24H268V0ZM113.999 0h100v24h-100V0ZM0 0h90v24H0V0Zm70 69H0V45h70v24Zm10 45H0V90h80v24Zm10 45H0v-24h90v24Zm134 0H113.999v-24H224v24Zm154 0H268v-24h110v24Zm114 0h-90v-24h90v24Zm124 0H515.999v-24H616v24Zm127.999 0H660v-24h83.999v24Z'/%3E%3C/svg%3E") !default;
 
 @mixin styles() {
+  @include default-style;
   @include search-style;
   @include mobile-style;
   @include pagination-style;
+  @include delta-style;
+  @include sticky-style;
+  @include skeleton-loader-styles;
+}
+
+@mixin default-style {
+  #{$style-selector} {
+    thead tr th {
+      // sort button
+      &[aria-sort],
+      &.gt-sortable {
+        > #{$sort-selector} {
+          appearance: none;
+          font: inherit;
+          margin: 0;
+          padding: $cell-padding-y $cell-padding-x;
+          margin: -#{$cell-padding-y} -#{$cell-padding-x};
+          border: none;
+          background: none;
+          color: inherit;
+          width: 100%;
+          text-align: left;
+          display: flex;
+          align-items: center;
+          transition: box-shadow 0.25s ease-in-out;
+          &::after {
+            content: '';
+            background: $sort-icon-color;
+            width: $sort-icon-size;
+            height: $sort-icon-size;
+            margin-left: 0.25rem;
+            mask-image: $sort-icon;
+            mask-repeat: no-repeat;
+            mask-size: cover;
+            mask-position: right;
+            display: block;
+            flex-shrink: 0;
+          }
+          &:focus-visible {
+            box-shadow: inset rgba(var(--bs-primary-rgb, (0,0,0)),0.35) 0 0 0 4px;
+            outline: none;
+            border-radius: 4px;
+          }
+        }
+      }
+      &[aria-sort='ascending'] {
+        #{$sort-selector}::after {
+          background: $ascending-sort-gradient;
+        }
+      }
+      &[aria-sort='descending'] {
+        #{$sort-selector}::after {
+          background: $descending-sort-gradient;
+        }
+      }
+    }
+    tr {
+      th, td {
+        padding: $cell-padding-y $cell-padding-x;
+      }
+    }
+  }
 }
+
 @mixin search-style {
   .gt-highlight-search {
     background: $highlight-background-color;
   }
 }
 @mixin mobile-style($selector: $mobile-style-selector) {
-  #{$selector} {
-    .mobile-header {
-      display: none;
-    }
-  }
   @media (max-width: $mobile-style-max-width) {
     #{$selector} {
       table-layout: fixed;
@@ -63,10 +158,12 @@ $pagination-justify-content: center !default;
           justify-content: space-between;
           align-items: center;
           border-top: none !important;
-          & > .mobile-header {
-            font-weight: $mobile-style-header-font-weight;
+          &::before {
+            content: attr(data-label);
             display: block;
+            font-weight: $mobile-style-header-font-weight;
           }
+
           #{$mobile-style-button-selector} {
             width: 100%;
             font-size: $mobile-style-button-font-size;
@@ -87,7 +184,7 @@ $pagination-justify-content: center !default;
       margin: 0;
       padding: 0;
       li {
-        &.ellipsis::after {
+        &.gt-ellipsis > button::after {
           content: $pagination-ellipsis-content;
           display: inline-flex;
         }
@@ -99,4 +196,64 @@ $pagination-justify-content: center !default;
   }
 }
 
+@mixin delta-style() {
+  .gt-delta {
+    display: flex;
+    &.gt-delta-positive::before {
+      display: block;
+      content: $delta-positive-prefix;
+    }
+  }
+}
+@mixin sticky-style() {
+  .gt-sticky-column-header thead tr th {
+    position: sticky;
+    top: 0;
+    background: $table-column-header-bg;
+    z-index: 2;
+    white-space: nowrap;
+  }
+
+  .gt-sticky-row-header {
+    tbody tr th.row-header, thead tr th:first-child {
+    position: sticky;
+    left: 0;
+    background: $table-row-header-bg;
+    z-index: 1;
+    white-space: nowrap;
+    }
+    thead tr th:first-child {
+      z-index: 3;
+    }
+  }
+}
+
+@mixin skeleton-loader-styles() {
+  .gt-skeleton-loader {
+    margin: 0.625rem 0;
+    --gt-skeleton-loader-mask: #{$skeleton-loader-mask};
+    --gt-skeleton-loader-highlight-color: #{$skeleton-loader-highlight-color};
+    --gt-skeleton-loader-bg-color: #{$skeleton-loader-background-color};
+    @keyframes skeleton-loader {
+      0% {
+        background-position: 0 0;
+      }
+      25%,
+      100% {
+        background-position: 200vw 0;
+      }
+    }
+    height: 158px;
+    mask-image: var(--gt-skeleton-loader-mask);
+    background: linear-gradient(
+        280deg,
+        $skeleton-loader-background-color 12.5%,
+        $skeleton-loader-highlight-color 17.5%,
+        $skeleton-loader-background-color 37.5%
+    );
+    background-size: 200vw 100vw;
+    background-position: 0 0;
+    animation: skeleton-loader 3000ms linear infinite;
+  }
+}