@annalib/anna-core 15.1.0 → 15.1.2

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

@@ -66,6 +66,7 @@ export declare class AnnaNonEditableGenericTableComponent implements OnInit, OnC
     gtSVGIconClicked: EventEmitter<any>;
     gtTextActionClicked: EventEmitter<any>;
     gtViewDetailClicked: EventEmitter<any>;
+    gtInnerHTMLClicked: EventEmitter<any>;
     downloadSpotDetails: EventEmitter<any>;
     clickableDataClicked: EventEmitter<any>;
     totalRowIconClicked: EventEmitter<any>;
@@ -261,6 +262,7 @@ export declare class AnnaNonEditableGenericTableComponent implements OnInit, OnC
     svgIconClicked(data: GtColumnIconEmittedData): void;
     textActionClicked(rowData: any, id: any): void;
     iconClickedOnStringIconActionType(rowData: any, id: any): void;
+    innerHTMLCellClicked(event: any, rowData: any): void;
     viewDetailsClicked(rowData: any): void;
     storeSortTypeInTempVariable(event: SortType): void;
     unCheckAllCheckbox(): void;
@@ -309,6 +311,6 @@ export declare class AnnaNonEditableGenericTableComponent implements OnInit, OnC
     editableInputValueChanged(value: any, row: any): void;
     radioButtonIconClicked(data: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AnnaNonEditableGenericTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AnnaNonEditableGenericTableComponent, "anna-core-non-editable-generic-table-lib", never, { "showSkeletonLoading": "showSkeletonLoading"; "tableHeaders": "tableHeaders"; "tableData": "tableData"; "clonedTableData": "clonedTableData"; "gtGeneralConfig": "gtGeneralConfig"; "totalRowInfo": "totalRowInfo"; "gtDimension": "gtDimension"; "tableClass": "tableClass"; "maximumRowsWhichCanBeRenderedWithoutScroll": "maximumRowsWhichCanBeRenderedWithoutScroll"; "limit": "limit"; "includeBorderInTableHeight": "includeBorderInTableHeight"; "downloadInProgress": "downloadInProgress"; "percentDone": "percentDone"; "starredInProgress": "starredInProgress"; "clickableRow": "clickableRow"; "setTableHeightWhenRowSizeIsFixed": "setTableHeightWhenRowSizeIsFixed"; "tableBorderBottomClassRequired": "tableBorderBottomClassRequired"; "hideSomeTds": "hideSomeTds"; "tdsHaveRowSpan": "tdsHaveRowSpan"; }, { "toggleCheckbox": "toggleCheckbox"; "toggleRowCheckbox": "toggleRowCheckbox"; "toggleHeaderCheckbox": "toggleHeaderCheckbox"; "undoIconClicked": "undoIconClicked"; "filterAppliedToTable": "filterAppliedToTable"; "sortingAppliedToTable": "sortingAppliedToTable"; "rowClicked": "rowClicked"; "radioButtonSelected": "radioButtonSelected"; "columnFilterOpened": "columnFilterOpened"; "columnFilterClosed": "columnFilterClosed"; "gtIconClicked": "gtIconClicked"; "gtSVGIconClicked": "gtSVGIconClicked"; "gtTextActionClicked": "gtTextActionClicked"; "gtViewDetailClicked": "gtViewDetailClicked"; "downloadSpotDetails": "downloadSpotDetails"; "clickableDataClicked": "clickableDataClicked"; "totalRowIconClicked": "totalRowIconClicked"; "notificationIconHover": "notificationIconHover"; "notificationIconHoverLeave": "notificationIconHoverLeave"; "editableInputEdited": "editableInputEdited"; "radioButtonMessageIconClicked": "radioButtonMessageIconClicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnnaNonEditableGenericTableComponent, "anna-core-non-editable-generic-table-lib", never, { "showSkeletonLoading": "showSkeletonLoading"; "tableHeaders": "tableHeaders"; "tableData": "tableData"; "clonedTableData": "clonedTableData"; "gtGeneralConfig": "gtGeneralConfig"; "totalRowInfo": "totalRowInfo"; "gtDimension": "gtDimension"; "tableClass": "tableClass"; "maximumRowsWhichCanBeRenderedWithoutScroll": "maximumRowsWhichCanBeRenderedWithoutScroll"; "limit": "limit"; "includeBorderInTableHeight": "includeBorderInTableHeight"; "downloadInProgress": "downloadInProgress"; "percentDone": "percentDone"; "starredInProgress": "starredInProgress"; "clickableRow": "clickableRow"; "setTableHeightWhenRowSizeIsFixed": "setTableHeightWhenRowSizeIsFixed"; "tableBorderBottomClassRequired": "tableBorderBottomClassRequired"; "hideSomeTds": "hideSomeTds"; "tdsHaveRowSpan": "tdsHaveRowSpan"; }, { "toggleCheckbox": "toggleCheckbox"; "toggleRowCheckbox": "toggleRowCheckbox"; "toggleHeaderCheckbox": "toggleHeaderCheckbox"; "undoIconClicked": "undoIconClicked"; "filterAppliedToTable": "filterAppliedToTable"; "sortingAppliedToTable": "sortingAppliedToTable"; "rowClicked": "rowClicked"; "radioButtonSelected": "radioButtonSelected"; "columnFilterOpened": "columnFilterOpened"; "columnFilterClosed": "columnFilterClosed"; "gtIconClicked": "gtIconClicked"; "gtSVGIconClicked": "gtSVGIconClicked"; "gtTextActionClicked": "gtTextActionClicked"; "gtViewDetailClicked": "gtViewDetailClicked"; "gtInnerHTMLClicked": "gtInnerHTMLClicked"; "downloadSpotDetails": "downloadSpotDetails"; "clickableDataClicked": "clickableDataClicked"; "totalRowIconClicked": "totalRowIconClicked"; "notificationIconHover": "notificationIconHover"; "notificationIconHoverLeave": "notificationIconHoverLeave"; "editableInputEdited": "editableInputEdited"; "radioButtonMessageIconClicked": "radioButtonMessageIconClicked"; }, never, never, false, never>;
 }
 export {};

package/package.json

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

package/src/lib/anna-common-scss/_advertiser-listing-common.scss

@@ -0,0 +1,70 @@
+@use "../anna-common-scss/gt-table" as *;
+
+$LightBlue: #EEF6FF;
+$LightOrange: #F9EADD;
+$LightYellow: #F7F2D1;
+$LightGreen: #E1FFED;
+$DeepBlue: #1565C0;
+$DeepOrange: #F97B07;
+$DeepYellow: #F3BD18;
+$DeepGreen: #00C853;
+
+@mixin rowStyling($backgroundColor, $buttonColor, $shadow-map) {
+  @include table-data((), $shadow-map, $backgroundColor);
+
+  ::ng-deep .status-btn {
+    background-color: $buttonColor !important;
+    color: white;
+    border-radius: 2px !important;
+    padding: 2px 6px;
+    cursor: default !important;
+  }
+}
+
+@mixin advertiser-listing-table-styling($advertiser-box-shadow-map, $advertiser-no-data-box-shadow-map, $row-height-map){
+    :host ::ng-deep anna-core-non-editable-generic-table-lib {
+        @include table-container-scroll-bar(0px, 2.625rem);
+        @include table-header((), $advertiser-box-shadow-map);
+        @include no-data-table(142px, $advertiser-no-data-box-shadow-map, $row-height-map); 
+        
+        .loader {
+          margin-bottom: 0;
+        }
+      
+        tbody{
+          
+          tr.AWAITING_BUYER_CONFIRMATION,
+          tr.AWAITING_SELLER_CONFIRMATION {
+            @include rowStyling($LightBlue, $DeepBlue, $advertiser-box-shadow-map);
+          }
+      
+          tr.NEED_SELLER_CONFIRMATION,
+          tr.NEED_BUYER_CONFIRMATION {
+            @include rowStyling($LightOrange, $DeepOrange, $advertiser-box-shadow-map);
+          }
+      
+          tr.NOTIFY_BUYER {
+            @include rowStyling($LightYellow, $DeepYellow, $advertiser-box-shadow-map);
+          }
+      
+          tr.APPROVED {
+            @include rowStyling($LightGreen, $DeepGreen, $advertiser-box-shadow-map);
+          }
+      
+          td{
+            cursor: default !important;
+          }
+        }
+      
+        th,td{
+          padding: 0 12px !important;
+        }
+      
+        .no-data{
+          margin-top: -63px !important;
+        }
+      
+        @include table-bottom-border($advertiser-box-shadow-map);
+        
+      }
+}

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/_edit-filter-popup.scss

@@ -0,0 +1,71 @@
+@use "./colors" as c;
+@use "./fonts" as f;
+
+$gap-between-headers-col: 1.5625rem !default;
+
+.selected-filters-container{
+    border-radius: 2px;
+    border: 1px solid c.$primary-color;
+    padding: 0.625rem 0.5rem 0.625rem 1.5rem;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    height: 3.25rem;
+}
+
+.filter-view{
+    display: flex;
+    gap: $gap-between-headers-col;
+}
+
+.header{
+    margin-bottom: 0;
+    color: c.$darkCharcoal;
+    @include f.fonts(Roboto, 0.75rem, normal, normal, normal, normal, normal);
+}
+
+.selected-value{
+    margin-bottom: 0;
+    color: c.$grey;
+    @include f.fonts(Roboto, 0.875rem, normal, bold, normal, 1.14, normal);
+}
+
+@mixin filter-popup-modal-header(){
+    .modal-header{
+        padding: 0.5rem 0.5rem 0.25rem 1.5rem;
+        
+        .modal-title{
+            color: white;
+            margin-top: auto;
+            margin-bottom: 0;
+            @include f.fonts(Roboto, 1.125rem, normal, normal, normal, normal, normal);
+        }
+
+        i{
+            color: white;
+            font-size: 1.5rem;
+            &:hover, &:focus {
+                opacity: 1 !important;
+                color: white;
+            }
+        }
+    }
+}
+
+
+@mixin filter-popup-modal-body(){
+    .modal-body{
+        padding: 1.5rem;
+        
+        .popup-filter{
+            margin-bottom: 1rem;
+        }
+
+        .btn-group{
+            display: flex;
+            justify-content: space-between;
+            padding-top: 0.5rem;
+        }
+    
+    }
+}