@annalib/anna-core 11.3.5 → 11.3.7

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

@@ -1,3 +1,6 @@
+@use "../anna-common-scss/fonts" as fonts;
+@use "../anna-common-scss/colors" as colors;
+
 @mixin no-data-to-display-gt($tableHeight, $rowHeight, $noDataMarginTop) {
   .table-container {
     height: calc($tableHeight) !important;
@@ -36,7 +39,7 @@
   display: block;
   text-align: right;
   margin-left: auto;
-  background-color: transparent;
+  background-color: white;
   text-decoration: underline;
   color: #268bff;
   line-height: 1 !important;
@@ -86,31 +89,53 @@
   }
 }
 
-@mixin common-scrollbar($scrollTop) {
-  &::-webkit-scrollbar {
-    height: 4px;
-    width: 4px;
+@mixin genericTableHeaderShadow($columnNumber){
+  .scroll-left-shadow-effect  .header-row th:nth-of-type(#{$columnNumber}) {
+    border: none !important;
+    filter: drop-shadow(2px 0 2px colors.$lightGray-4);
   }
-  
-  &::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    border: solid 1px rgba(0, 0, 0, 0.1);
-    background-color: rgba(0, 0, 0, 0.4);
+}
+
+@mixin genericTableTotalRowShadow($columnNumber){
+  .scroll-left-shadow-effect .total-row td:nth-of-type(#{$columnNumber}) {
+    filter: drop-shadow(2px 0 2px colors.$lightGray-4);
   }
+}
 
-  &::-webkit-scrollbar-track {
-    margin-top: $scrollTop;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important
+@mixin genericTableTableDataShadow($columnNumber){
+  .scroll-left-shadow-effect  td:nth-of-type(#{$columnNumber}) {
+    filter: drop-shadow(2px 0 1px colors.$lightGray-4);
   }
 }
 
-@mixin header-fixed($z-index) {
-  position: sticky;
-  z-index: $z-index;
+@mixin genericTableOverrideHeaderShadow($columnNumber){
+  .scroll-left-shadow-effect  .header-row th:nth-of-type(#{$columnNumber}) {
+    box-shadow: none !important;
+    border: none !important;
+    filter: none;
+  }
 }
 
-@mixin sub-header($z-index) {
-  position: sticky;
-  z-index: $z-index;
+@mixin genericTableOverrideTableDataShadow($columnNumber){
+  .scroll-left-shadow-effect  td:nth-of-type(#{$columnNumber}) {
+    filter: none;
+  }
 }
 
+@mixin overrideEmptyTrBorders($startIndex){
+  
+  tr.no-border-tr:first-of-type{
+      
+    td:nth-of-type(#{$startIndex}){
+      box-shadow: inset 1px 0px 0px 0px #d4d4d4 !important;
+    }
+    
+    td:nth-child(n+ #{$startIndex + 1}){
+      box-shadow: none !important;
+    }
+
+    td:last-of-type{
+      box-shadow: inset -1px 0px 0px 0px #d4d4d4 !important
+    }    
+  }
+}

package/src/lib/anna-common-scss/_ng-select.scss

@@ -0,0 +1,176 @@
+/***COMMON NG-SELECT STYLING FOR ALL SIZES **/
+::ng-deep .ng-select {
+  & .ng-arrow,
+  & .ng-arrow:hover {
+    border-color: black transparent transparent !important;
+    opacity: 1 !important;
+  }
+
+  &.ng-select-opened .ng-arrow,
+  &.ng-select-opened .ng-arrow:hover {
+    border-color: transparent transparent black !important;
+    opacity: 1 !important;
+    padding-top: 2px;
+  }
+
+  & .ng-select-container {
+    border: 1px solid #b7b7b7 !important;
+    border-radius: 2px;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  &.custom-error-ng-select .ng-select-container {
+    border: 1px solid #f86c6b;
+  }
+
+  &.ng-select-disabled > .ng-select-container {
+    background-color: #bdbdbd;
+    opacity: 0.5;
+    cursor: not-allowed;
+
+  }
+
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    & .ng-option-label {
+      font-weight: normal !important;
+    }
+    &:hover {
+      background-color: #ebebeb;
+      color: #4a4a4a;
+    }
+    &:not(:hover){
+      background-color: #fff;
+    }
+    &.ng-option-selected  {
+      background-color: #268bff;
+      color: #fff;
+    }
+  }
+
+  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+    border-color: lightgray;
+    box-shadow: none;
+  }
+
+}
+
+/*****EXTRA SMALL NG STYLE******/
+::ng-deep .ng-select.custom-xs-ng-select {
+  & .ng-select-container {
+    min-height: 22px !important;
+    font-size: 12px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 22px !important;
+  }
+
+  & .ng-dropdown-panel .scroll-host {
+    font-size: 12px !important;
+  }
+
+  & .ng-arrow-wrapper {
+    padding-top: 2px !important;
+  }
+
+  &.ng-select-opened,
+  &.ng-select-bottom,
+  &.ng-select-top {
+    & .ng-select-container {
+      padding-top: 6px !important;
+    }
+  }
+  &.non-searchable {
+    &.ng-select-opened,
+    &.ng-select-bottom,
+    &.ng-select-top {
+      & .ng-select-container {
+        padding-top: 4px !important;
+      }
+    }
+  }
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 3px 10px;
+  }
+}
+
+/**SMALL NG SELECT STYLE***/
+::ng-deep .ng-select.custom-sm-ng-select {
+  & .ng-select-container {
+    min-height: 1.5625rem !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 1.5625rem !important;
+  }
+
+  &.ng-select-opened,
+  &.ng-select-bottom,
+  &.ng-select-top {
+    & .ng-select-container {
+      padding-top: 8px !important;
+    }
+  }
+  &.non-searchable {
+    &.ng-select-opened,
+    &.ng-select-bottom,
+    &.ng-select-top {
+      & .ng-select-container {
+        padding-top: 8px !important;
+      }
+    }
+  }
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 4px 10px;
+  }
+}
+
+/**MEDIUM NG SELECT STYLE***/
+::ng-deep .ng-select.custom-md-ng-select {
+  & .ng-select-container {
+    min-height: 30px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 1.875rem !important;
+  }
+}
+
+/**MEDIUM NG SELECT STYLE -2 !!! with 32px height !!!***/
+::ng-deep .ng-select.custom-md-32-ng-select {
+  & .ng-select-container {
+    min-height: 32px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 32px !important;
+  }
+}
+
+/**LARGE NG SELECT STYLE***/
+::ng-deep .ng-select.custom-lg-ng-select {
+  & .ng-select-container {
+    min-height: 2.8125rem !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 2.8125rem !important;
+  }
+}
+
+
+:host::ng-deep .custom-arrow.ng-select.ng-select-opened>.ng-select-container{
+  .ng-arrow{
+   border-width: 0 4px 4px;
+   position: relative;
+   bottom: 1px;
+ }
+}
+
+:host::ng-deep .custom-arrow.ng-select .ng-arrow-wrapper .ng-arrow{
+ border-width: 4px 4px 2.5px;
+ position: relative;
+ bottom: 1px;
+}

package/src/lib/anna-common-scss/third-party-lib/_angular-material-mat-radio.scss

@@ -1,21 +0,0 @@
-@mixin anna-mat-radio() {
-  .mdc-radio__background {
-    width: var(--mat-radio-size);
-    height: var(--mat-radio-size);
-  }
-
-  .mdc-radio__inner-circle {
-    border-width: calc(var(--mat-radio-size)/2);
-  }
-
-  .mdc-form-field > label {
-    margin: 0 0 0 4px;
-    padding: 0;
-    top: -2px;
-    position: relative;
-  }
-
-  .mdc-radio--disabled + label {
-    color: var(--disabled-text-color) !important;
-  }
-}

package/src/lib/anna-common-scss/third-party-lib/_mat-autocomplete.scss

@@ -1,28 +0,0 @@
-@mixin anna-mat-autocomplete(){
-  background-color: white;
-  padding: 0 !important;
-  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
-
-  & .mat-mdc-option {
-    min-height: 30px;
-    height: 30px;
-    &:hover {
-     background-color: var(--dropdown-hover-color) !important;
-    }
-
-    & .mdc-list-item__primary-text {
-     display: inline-block;
-     text-overflow: ellipsis;
-     overflow: hidden;
-     white-space: pre;
-    }
-
-    & .mat-pseudo-checkbox {
-      display: none;
-    }
-  }
-
-  & .mat-option {
-   background-color: var(--dropdown-hover-color) !important;
-  }
-}