@angular-generic-table/core 5.0.0-rc.1 → 5.0.0-rc.12

package/scss/index.scss

@@ -0,0 +1,259 @@
+$highlight-background-color: #ffdd00 !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: var(--bs-body-bg, #fff) !default;
+$mobile-style-button-selector: '.btn-sm' !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.375rem 0.75rem !default;
+$pagination-ellipsis-content: '...' !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) {
+  @media (max-width: $mobile-style-max-width) {
+    #{$selector} {
+      table-layout: fixed;
+      border-bottom: none;
+      thead {
+        position: sticky;
+        top: 0;
+        display: block;
+        @media (hover: none) and (pointer: coarse) {
+          display: table-header-group;
+        }
+        background: $mobile-style-header-background-color;
+        tr {
+          display: flex;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          th {
+            flex: auto;
+            text-align: left !important;
+            white-space: nowrap;
+          }
+        }
+      }
+      tbody {
+        tr {
+          display: flex;
+          flex-direction: column;
+          border-bottom: $mobile-style-border-bottom;
+        }
+        td {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-top: none !important;
+          &::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;
+            padding: $mobile-style-button-padding;
+          }
+        }
+      }
+    }
+  }
+}
+@mixin pagination-style() {
+  nav.gt-pagination {
+    display: flex;
+    justify-content: $pagination-justify-content;
+    ul {
+      display: inline-flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        &.gt-ellipsis > button::after {
+          content: $pagination-ellipsis-content;
+          display: inline-flex;
+        }
+        &.active button {
+          color: $pagination-active-color;
+        }
+      }
+    }
+  }
+}
+
+@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;
+  }
+}
+

package/angular-generic-table-core.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"CoreService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"CoreComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"angular-generic-table","styles":[],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":16,"character":19},"member":"OnPush"},"template":"<table class=\"table text-nowrap mb-0\" id=\"agreementList_table\">\n  <thead>\n    <tr>\n      <ng-container *ngFor=\"let column of (tableConfig$ | async)!.columns | keyvalue: columnOrder\">\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ column.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: column.key }} {{\n            (column.key | dashCase) + '-column'\n          }}\"\n          [class.disabled]=\"loading$ | async\"\n          (click)=\"!column.value.sortable || sort(column.key)\"\n        >\n          <span>{{ column.value?.header || column.key }}</span>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"false !== false; else tableContent\">\n    <tr>\n      <!-- <td class=\"p-0\" [colSpan]=\"colspan$ | async\">-->\n      <td class=\"p-0\">\n        <div class=\"skeleton-loader skeleton-loader-table\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<ng-template #tableContent>\n  <ng-container\n    *ngIf=\"(table$ | async)! as table\"\n  >\n    <tbody id=\"agreementList_tableContent\" *ngIf=\"table!.data!.length > 0; else noData\">\n      <tr *ngFor=\"let row of table!.data![(currentPage$ | async) || 0]; let i = index\" [attr.id]=\"'tableRow_' + i\">\n        <ng-container *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\">\n          <td *ngIf=\"!column.value?.hidden\">\n            <!--<ng-container *ngIf=\"column.value.template === 'actions'\">\n            <ng-container\n              *ngTemplateOutlet=\"actionsColumn; context: { agreement: agreement, index: i }\"\n            ></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"column.value.template === 'date'\">\n            <ng-container\n              *ngTemplateOutlet=\"dateColumn; context: { agreement: agreement, column: column.key }\"\n            ></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"column.value.template === 'name'\">\n            <ng-container *ngTemplateOutlet=\"nameColumn; context: { agreement: agreement }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"column.value.template === 'badge'\">\n            <ng-container *ngTemplateOutlet=\"badgeColumn; context: { agreement: agreement }\"></ng-container>\n          </ng-container>-->\n            <ng-container [ngTemplateOutlet]=\"(searchBy$ | async) ? highlighted: tableRow\" [ngTemplateOutletContext]=\"{row: row, column: column, search: (searchBy$ | async) }\"></ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData></ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n  <div [innerHTML]=\"(row[column.key] | highlight: search)\"></div>\n</ng-template>\n<ng-template #tableRow let-row=\"row\" let-column=\"column\">\n  {{row[column.key]}}\n</ng-template>\n"}]}],"members":{"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"sort":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"GenericTableCoreModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CoreComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12}],"exports":[{"__symbolic":"reference","name":"CoreComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"sortClass"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"dashCase"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"highlight"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"CoreService":"./lib/core.service","CoreComponent":"./lib/core.component","GenericTableCoreModule":"./lib/core.module","ɵa":"./lib/pipes/sort-class.pipe","ɵb":"./lib/pipes/dash-case.pipe","ɵc":"./lib/pipes/highlight.pipe"},"importAs":"@angular-generic-table/core"}