@annalib/anna-core 0.0.2 → 0.0.3

package/src/lib/anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component.scss

@@ -0,0 +1,488 @@
+@import "../../../anna-core-shared-lib/scss/fonts";
+@import "../../../anna-core-shared-lib/scss/colors";
+@import "../../../anna-core-shared-lib/scss/sort";
+@import "../../../anna-core-shared-lib/scss/filters";
+
+.upper-label {
+  @include fonts(Roboto, $fs-11, normal, 500, normal, normal, 0.3px);
+  color: $charcoal !important;
+  margin-bottom: 0 !important;
+}
+
+@mixin ellipsis() {
+  display: inline-block;
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host ::ng-deep .gt {
+  table-layout: fixed;
+  margin-bottom: 0;
+  width: 100%;
+  // border-spacing: 1px;
+  th,
+  td {
+    padding: 2px 8px;
+    line-height: normal; 
+    //Need to reduce line height & top/bottom padding, otherwise at end of table if we scroll it shows glitch
+  }
+  thead tr {
+    th .upper-label {
+      @include fonts(Roboto, $fs-11, normal, 500, normal, normal, 0.3px);
+      color: $charcoal;
+      margin-bottom: 0;
+    }
+    th .lower-label {
+      @include fonts(Roboto, $fs-11, normal, 500, normal, normal, 0.3px);
+      color: $darkGray;
+      margin-bottom: 0;
+    }
+
+    th {
+      background-color: $lightGray-3;
+      position: sticky;
+      top: 0;
+      border-top: none !important;
+      border-bottom: none !important;
+      outline: none !important;
+      box-shadow: inset 0 1px 0 $lightGray-4, inset 0 -1px 0 $lightGray-4, inset -1px 0px 0px 0px $lightGray-4;
+      br {
+        display: block;
+        content: "";
+        margin-top: -8px;
+      }
+      div.row {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+      }
+      div.sort-filter-container {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+      }
+    }
+
+    th:first-of-type {
+      box-shadow: inset 0 1px 0 $lightGray-4, inset 0 -1px 0 $lightGray-4, inset -1px 0px 0px 0px $lightGray-4,
+        inset 1px 0px 0px 0px $lightGray-4;
+    }
+  }
+  tbody {
+    tr {
+      td:first-of-type {
+        box-shadow: inset 1px 0px 0px 0px $lightGray-4, inset -1px 0px 0px 0px $lightGray-4, inset 0px -1px 0px 0px $lightGray-4;
+        border: none;
+      }
+      td:nth-of-type(n + 2) {
+        box-shadow: inset -1px 0px 0px 0px $lightGray-4, inset 0px -1px 0px 0px $lightGray-4;
+        border: none;
+      }
+      td .upper-label {
+        @include fonts(Roboto, $fs-12, normal, normal, normal, normal, 0px);
+        color: black;
+        @include ellipsis();
+      }
+      td .lower-label {
+        @include fonts(Roboto, $fs-12, normal, normal, normal, normal, 0px);
+        color: $darkGray;
+        @include ellipsis();
+      }
+      br {
+        display: block; /* makes it have a width */
+        content: ""; /* clears default height */
+        margin-top: -8px;
+      }
+    }
+
+    tr:nth-of-type(1) td {
+      //for sticky header
+      border-top: none !important;
+    }
+  }
+
+  .custom-column-checkbox-checked,
+  .custom-column-checkbox-unchecked {
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .custom-column-checkbox-checked {
+    color: $primary-color;
+  }
+
+  .custom-column-checkbox-unchecked {
+    color: $charcoal;
+  }
+}
+
+// .table-container::-webkit-scrollbar-thumb {
+//   border-radius: $fs-4;
+//   background-color: rgba(0, 0, 0, 0.4) !important;
+//   border: 1px solid rgba(0, 0, 0, 0.2);
+// }
+
+// .table-container::-webkit-scrollbar-track {
+//   border: 1px solid rgba(0, 0, 0, 0.1) !important;
+// }
+
+anna-table-virtual-scroll-viewport::-webkit-scrollbar-track {
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+anna-table-virtual-scroll-viewport::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+anna-table-virtual-scroll-viewport::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.table-container {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.rowSelectCheckbox,
+#selectAllRowsCheckbox {
+  cursor: pointer;
+}
+
+.disable-checkbox {
+  color: #dedede !important;
+  pointer-events: none !important;
+}
+
+.mdi-warning {
+  color: #f3c639;
+  font-size: 16px;
+  line-height: 28px;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+.redcolor-status {
+  color: #c62a2a;
+}
+
+.redcolor-cell-border {
+  outline: 1px solid #ff5353 !important;
+  outline-offset: -1px !important;
+}
+
+#no-filter-space {
+  width: 0.875rem;
+}
+
+::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  line-height: $fs-30 !important;
+  width: $fs-42;
+  padding: 0 $fs-10;
+}
+
+input.numberInput {
+  margin-right: -$fs-13;
+  padding: 0 0 0 $fs-10;
+  height: $fs-30;
+}
+
+::ng-deep .mat-button-toggle-checked {
+  background-color: $primary-color !important;
+  color: white !important;
+}
+
+::ng-deep .mat-button-toggle-group-appearance-standard {
+  border-radius: 0px;
+}
+
+.hidden {
+  display: none;
+}
+
+.no-data-div {
+  margin-top: 2.5px;
+  label {
+    margin: 0;
+    width: auto;
+    font-weight: 500;
+    background-color: lightgray;
+    padding: $fs-5 $fs-18;
+    border-radius: $fs-4;
+  }
+}
+
+.column-values:nth-of-type(2) {
+  color: #a7a7a7 !important;
+}
+
+.custom-column-checkbox-checked,
+.custom-column-checkbox-unchecked {
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.custom-column-checkbox-checked {
+  color: $primary-color;
+}
+.custom-column-checkbox-unchecked {
+  color: #4a4a4a;
+}
+
+.time-filter-checkboxes {
+  > div > p {
+    color: #151b1e;
+  }
+}
+
+.radio-button-dimension{
+  height: 18px !important;
+  width: 18px !important;
+}
+
+::ng-deep .margin-bottom-zero{
+  .mat-radio-label{
+    margin-bottom: 0;
+  }
+}
+
+::ng-deep .rejectCreditRequest .mat-radio-outer-circle{
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .rejectCreditRequest .mat-radio-inner-circle{
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .resubmit .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+::ng-deep .resubmit .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .reject .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+::ng-deep .reject .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .approve .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+::ng-deep .approve .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+::ng-deep .credit .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+::ng-deep .credit .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .noAction .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .noAction .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .markForMakeGood .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .markForMakeGood .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .mark-for-credit .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .mark-for-credit .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .markForCredit .mat-radio-outer-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .markForCredit .mat-radio-inner-circle {
+  @extend .radio-button-dimension;
+}
+
+::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: yellow;
+}
+::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
+  background-color: yellow;
+}
+
+::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: yellow;
+}
+::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
+  background-color: yellow;
+}
+
+::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: green;
+}
+::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
+  background-color: green;
+}
+
+::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: green;
+}
+::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
+  background-color: green;
+}
+::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: red;
+}
+::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
+  background-color: red;
+}
+
+::ng-deep .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {
+  border-color: rgba(0, 0, 0, 0.38) !important;
+}
+
+::ng-deep .mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-inner-circle {
+  background-color: rgba(0, 0, 0, 0.38) !important;
+}
+
+::ng-deep {
+  tr.white-background-row {
+    background: white;
+  }
+
+  tr.gray-background-row {
+    background: rgba(233, 233, 233, 0.5);
+  }
+}
+
+.remarks-tooltip {
+  font-size: 0.875rem;
+  color: #268bff;
+  position: relative;
+  top: 0.1875rem;
+  cursor: pointer;
+}
+
+.seller-tooltip{
+  @extend .remarks-tooltip;
+  float: right;
+}
+
+::ng-deep .remarks-info-tooltip .tooltip-inner {
+  max-width: 19.25rem !important;
+}
+
+.rating-icon, .lur-violation-icon {
+  color: #268bff;
+  cursor: pointer;
+  margin-left: 2px;
+  position: relative;
+  left: -2px;
+}
+
+::ng-deep .rating-info-tooltip .tooltip-inner {
+  max-width: 800px !important;
+}
+
+p.first-row {
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  color: black;
+  white-space: nowrap;
+  text-align: left;
+}
+
+p.second-row {
+  padding: 2px 0.5rem 0.5rem 0.5rem;
+  color: black;
+  white-space: nowrap;
+  text-align: left;
+}
+
+::ng-deep .gt-total-row-tooltip {
+  opacity: 1 !important;
+  .tooltip-inner {
+    color: #000;
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+    background-color: #ffffff;
+    padding: 4px !important;
+    width: 100%;
+    border-radius: 2px !important;
+  }
+  .arrow::before {
+    border-top-color: #fff !important;
+  }
+ 
+}
+
+.info-label {
+  margin-left: 4px;
+  color: #268bff;
+  vertical-align: text-top;
+}
+::ng-deep .hierarchy-tooltip .tooltip-inner{
+  padding: 4px !important;
+}
+
+
+table.seller-hierarchy-table {
+  margin: $fs-10;
+  table-layout: fixed;
+  margin-left: 0.8125rem;
+
+  tr {
+    th {
+      @include fonts(Roboto, $fs-12, normal, 500, normal, 1.67, normal);
+      color: $GraythirtySeven;
+      white-space: nowrap;
+      background: $lightGray-3;
+      box-shadow: none !important;
+      border-top: 1px solid $lightGray-4;
+    }
+    th:first-of-type,
+    td:first-of-type {
+      border-left: 1px solid $lightGray-4;
+    }
+    th:last-of-type,
+    td:last-of-type {
+      border-right: 1px solid $lightGray-4;
+      width: 7.875rem !important;
+    }
+    th:nth-of-type(2) {
+      width: 7.75rem !important;
+    }
+
+    td {
+      @include fonts(Roboto, $fs-12, normal, normal, normal, normal, normal);
+      color: $charcoal;
+      box-shadow: none !important;
+      border-top: 1px solid $lightGray-4;
+      border-bottom: 1px solid $lightGray-4;
+    }
+
+    td:nth-of-type(2), td:nth-of-type(3){
+      padding-top: 0.25rem;
+    }
+
+    td span {
+      @include ellipsis();
+      position: relative;
+    }
+  }
+}

package/src/lib/anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { NonEditableGenericTableComponent } from "./anna-non-editable-generic-table.component";
+
+describe("NonEditableGenericTableComponent", () => {
+    let component: NonEditableGenericTableComponent;
+    let fixture: ComponentFixture<NonEditableGenericTableComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NonEditableGenericTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NonEditableGenericTableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});