@annalib/anna-core 11.3.0 → 11.3.2

package/package.json

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

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

@@ -34,7 +34,7 @@
 }
 
 .search-bar {
-  margin: 9px 7px 8px 7px;
+  margin: 0 7px 8px 7px;
   border: 1px solid $pinkSwan;
   height: 1.875rem;
   border-radius: 2px;
@@ -120,15 +120,3 @@ span.selected-item{
   z-index: 1051;
 }
 
-::ng-deep .multi-select-dropdown + div .mat-menu-panel,
-::ng-deep .single-select-dropdown + div .mat-menu-panel{
-  min-width: 100px !important;
-  max-width: 100%;
-  min-height: 30px !important;
-  overflow-y: hidden;
-  max-height: 50vh;
-  .mat-menu-content:not(:empty) {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}

package/src/lib/anna-common-scss/_date-picker-form.scss

@@ -1,4 +1,4 @@
-@import "./fonts", "./colors", "./ng-select";
+@import "./fonts", "./colors";
 
 .input-group-append {
   margin: auto;
@@ -78,7 +78,7 @@ input.form-control:disabled {
   background-color: #fff !important;
 }
 
-::ng-deep app-single-select-dropdown ng-select.custom-dropdown {
+::ng-deep app-single-select-dropdown {
   width: 19.5rem !important;
 }
 

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

@@ -0,0 +1,21 @@
+@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

@@ -0,0 +1,28 @@
+@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;
+  }
+}

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

@@ -1,176 +0,0 @@
-/***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;
-}