@annalib/anna-core 16.0.5 → 16.1.0

package/lib/anna-core-shared-lib/models/anna-non-editable-gt-models.d.ts

@@ -113,5 +113,5 @@ export interface IActionItemTypeSTRING__ICON_OR_TEXT_ACTION {
     additionalTextBeforeLink: string;
     enableTooltipForAdditionalText: boolean;
 }
-export declare type IconToShow = "LIVE" | "PAY_FOR_PERFORMANCE_ACTIVE" | "PAY_FOR_PERFORMANCE" | "REJECTED" | "NOTIFY" | "AWAITING_APPROVAL" | "DELETED_ORDER" | "NEED_SELLER_CONFIRMATION";
+export declare type IconToShow = "LIVE" | "PAY_FOR_PERFORMANCE_ACTIVE" | "PAY_FOR_PERFORMANCE" | "REJECTED" | "NOTIFY" | "AWAITING_APPROVAL" | "DELETED_ORDER" | "NEED_SELLER_CONFIRMATION" | "NEED_BUYER_CONFIRMATION";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annalib/anna-core",
-  "version": "16.0.5",
+  "version": "16.1.0",
   "peerDependencies": {
     "@angular-slider/ngx-slider": "^2.0.4",
     "@angular/common": "^15.2.9",

package/src/lib/anna-common-scss/_easy-filter.scss

@@ -1,62 +1,158 @@
-@use "./fonts";
-@import "./colors";
+@use "./fonts" as *;
+@use "./colors" as *;
+@use "sass:map";
 
-@mixin easy-filters() {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    max-width: calc(100% - 4px);
-    margin-bottom: 8px;
-
-    .easy-filters-btn {
-        border: 1px solid $primary-color;
-        border-radius: 12px;
-        background-color: white;
-        color: $primary-color;
-        @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
-        padding: 5px 8px 5px 8px;
-        margin: 15px 8px 0px 0px;
-
-        &:disabled {
-            background-color: $gray74;
-            color: $charcoal;
-            opacity: 0.5;
-            border: 1px solid $gray74;
-            cursor: not-allowed;
-        }
-    }
-
-    button.easy-filter-active {
-        color: white;
-        background: $primary-color;
-    }
-
-    .only-enabled-button {
-        cursor: default;
-        pointer-events: none;
-    }
-}
+$intelli-filter-default-map: (
+  "inactive-text-color": $primary-color,
+  "inactive-border-color": $primary-color,
+  "inactive-bg-color": white,
+  "active-bg-color": $primary-color,
+  "active-text-color": white,
+  "active-border-color": $primary-color
+);
 
-button.intelli-filter{
-    @include fonts.fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
-    color: #268bff;
-    padding: 5px 8px;
-    border: 1px solid #268bff;
-    background: white;
+@mixin intelli-filter-default($padding: 5px 8px) {
+  button.intelli-filter {
+    @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.6px);
     border-radius: 0.75rem;
     height: 1.5rem;
     margin-right: 8px;
+    display: inline-flex;
+    align-items: center;
+    padding: $padding;
+
+    &:disabled {
+      border: 1px solid #bdbdbd !important;
+      color: #4a4a4a !important;
+      background: #bdbdbd !important;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+@mixin intelli-filter-custom-styling(
+  $intelli-filter-map: $intelli-filter-default-map
+) {
+  
+  $intelli-filter-inactive-text-color: map.get(
+    $intelli-filter-map,
+    "inactive-text-color"
+  );
+  $intelli-filter-inactive-border-color: map.get(
+    $intelli-filter-map,
+    "inactive-border-color"
+  );
+  $intelli-filter-inactive-bg-color: map.get(
+    $intelli-filter-map,
+    "inactive-bg-color"
+  );
+
+  $intelli-filter-active-bg-color: map.get(
+    $intelli-filter-map,
+    "active-bg-color"
+  );
+  $intelli-filter-active-text-color: map.get(
+    $intelli-filter-map,
+    "active-text-color"
+  );
+  $intelli-filter-active-border-color: map.get(
+    $intelli-filter-map,
+    "active-border-color"
+  );
+
+  color: $intelli-filter-inactive-text-color;
+  border: 1px solid $intelli-filter-inactive-border-color;
+  background: $intelli-filter-inactive-bg-color;
+
+  &.active {
+    color: $intelli-filter-active-text-color !important;
+    background: $intelli-filter-active-bg-color !important;
+    border: 1px solid $intelli-filter-active-border-color !important;
+  }
+}
+
+$only-enabled-default-map: ("text-color": white, "bg-color": $primary-color);
+
+@mixin only-enabled-filter($enabled-styling: $only-enabled-default-map){
+  $color: map.get($enabled-styling, "text-color");
+  $bg-color: map.get($enabled-styling, "bg-color");
+
+  button.only-enabled-button{
+    color: $color;
+    background: $bg-color;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+$intelli-filter-icon-default-map: (
+  "icon-font-size": 14.5px,
+  "icon-margin-right": 4px,
+  "active-icon-color": white,
+);
+
+@mixin intelli-filter-icons-styling(
+  $icon-styling: $intelli-filter-icon-default-map
+) {
+  $icon-font-size: map.get($icon-styling, "icon-font-size");
+  $icon-margin-right: map.get($icon-styling, "icon-margin-right");
+  $icon-active-color: map.get($icon-styling, "active-icon-color");
+
+  button.intelli-filter i {
+    font-size: $icon-font-size;
+    margin-right: $icon-margin-right;
+    display: flex;
+    vertical-align: middle;
+
+    &.mdi-star {
+      color: $amber;
+      opacity: 0.5;
+    }
+
+    &.mdi-alert {
+      color: #f97b07;
+    }
+
+    &.mdi-bell {
+      color: #f3bd18;
+    }
+
+    &.mdi-file-remove-outline {
+      color: #f44336;
+      margin-right: 2px;
+    }
+  }
+
+  button.intelli-filter.active {
+    ::ng-deep svg {
+      g {
+        stroke: $icon-active-color !important;
+        fill: $icon-active-color !important;
+      }
+    }
+
+    i {
+      color: $icon-active-color;
+    }
+
+    i.mdi-star {
+      color: #ffc107;
+      opacity: 0.9;
+      display: flex;
+    }
+  }
 }
 
-button.intelli-filter.active{
-    color: white;
-    background: #268bff;
+.filter-label {
+  @include fonts(Roboto, 0.875rem, normal, normal, normal, normal, normal);
+  color: $charcoal;
+  margin-bottom: 4px;
 }
 
-button.intelli-filter:disabled {
-  border: 1px solid #bdbdbd;
-  color: #4a4a4a;
-  background: #bdbdbd;
-  opacity: .5;
-  cursor: not-allowed;
+.filter-divider {
+  width: 1px;
+  margin-right: 8px;
+  height: 24px;
+  background: #111;
 }

package/src/lib/anna-common-scss/_gt-table.scss

@@ -18,19 +18,7 @@
 @mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0){
     
     .table-container{
-        &::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            border-radius: 4px;
-            background-color: rgba(0, 0, 0, 0.4) !important;
-            border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
         &::-webkit-scrollbar-track {
-            border: 1px solid rgba(0, 0, 0, 0.1) !important;
             margin-top: $margin-top;
             margin-left: $margin-left;
         }

package/src/lib/anna-common-scss/_scrollbar.scss

@@ -0,0 +1,14 @@
+*::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+*::-webkit-scrollbar-track {
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}