ecabs-components 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "peerDependencies": {
     "@angular/animations": "^16.0.3",
     "@angular/common": "^16.0.4",

package/src/assets/styles/material/overrides/_form.scss

@@ -1,3 +1,5 @@
+@import "../../../styles/scss/utilities/helpers";
+
 .mat-mdc-form-field {
   display: block !important;
 
@@ -24,7 +26,7 @@
     }
   }
 
-  &-label {
+  &-label, label:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {
     @extend .form-field__label;
   }
 
@@ -76,7 +78,7 @@
     }
   }
 
-  &-label {
+  &-label, label:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {
     @extend .form-field__label;
   }
 
@@ -144,13 +146,19 @@
 }
 
 .mdc-text-field {
-  padding: 0rem !important;
+  padding: 0 !important;
 }
 
 .mat-mdc-form-field-focus-overlay {
   background-color: inherit !important;
 }
 
-label {
-  @extend .form-field__label;
+.form-field--required {
+  .form-field__label, label {
+    &:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {
+      &:after {
+        @extend %required;
+      }
+    }
+  }
 }

package/src/assets/styles/material/overrides/_phone.scss

@@ -10,6 +10,10 @@ ecabs-phone {
 
     .country-selector {
       @extend .country-selector;
+
+      .country-selector-code {
+        padding-right: .2rem;
+      }
     }
   }
 
@@ -31,14 +35,6 @@ ecabs-phone {
       background-color: unset !important;
     }
   }
-
-  .mat-mdc-input-element:disabled {
-    color: var(--color-black);
-  }
-
-  .country-selector:disabled {
-    color: var(--color-black) !important;
-  }
 }
 
 .ngx-mat-tel-input-mat-menu-panel {

package/src/assets/styles/scss/modules/_form.scss

@@ -149,19 +149,9 @@ form {
 
     // #Required
     @include m(required) {
-      .form-field__label, label {
-        &:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {
-          &:after {
-            @extend %required;
-          }
-        }
-      }
-
-      label span {
-        &.mat-radio-label-content, &.mat-slide-toggle-content {
-          &:after {
-            @extend %required;
-          }
+      .form-field__label {
+        &:after {
+          @extend %required;
         }
       }
     }

package/src/assets/styles/scss/modules/_phone.scss

@@ -1,28 +1,31 @@
 .ecabs-phone {
-  @include fontSize($font-size-lg);
-  font-size: 1rem;
-
   .ngx-mat-tel-input-container {
     position: relative;
     border-radius: $border-radius-base;
     border: 1px solid var(--color-gray-500);
 
     .ngx-mat-tel-input-input {
-      padding: calc-rem(10) calc-rem(10) calc-rem(10) 105px !important;
+      padding: calc-rem(8) 6px calc-rem(8) 105px !important;
     }
+
     .country-selector {
       opacity: 1 !important;
-      padding: 0rem;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K");
+      background-size: calc-rem(12px 7.41px);
+      padding-right: .36rem;
     }
-    .country-selector-code {
-      font-size: 1rem;
+
+    .country-selector-flag.flag {
+      filter: unset;
     }
   }
+
   .error {
     .ngx-mat-tel-input-container {
       border: 1px solid var(--color-error);
     }
   }
+
   .disabled-field {
     background-color: var(--color-white-opacity-05) !important;
   }

package/src/assets/styles/scss/modules/_timepicker.scss

@@ -1,13 +1,7 @@
-app-form-timepicker {
+app-timepicker {
   .timeInputWrapper {
-    position: relative;
-    display: inline-block;
     z-index: 1;
-    width: 100%;
-    .timeInputFieldWrapper {
-      position: relative;
-      z-index: 1;
-    }
+
     input {
       min-height: 42px;
       width: 100%;
@@ -20,6 +14,7 @@ app-form-timepicker {
       color: var(--color-black);
       outline: none;
       transition: all 300ms ease-in-out;
+
       &::placeholder {
         color: rgba(22, 42, 76, 0.5);
       }
@@ -43,18 +38,18 @@ app-form-timepicker {
     }
   }
 }
+
 .form-time-list {
   z-index: 98;
-  display: inline-block;
-  position: absolute;
+
   .list {
     background-color: white;
     position: absolute;
     width: 100%;
     box-sizing: border-box;
-    box-shadow: 0px 4px 6px rgba(22, 42, 76, 0.08), 0px 2px 16px rgba(22, 42, 76, 0.06),
-      0px 8px 12px rgba(22, 42, 76, 0.04);
-    border-radius: 0px 0px 4px 4px;
+    box-shadow: 0 4px 6px rgba(22, 42, 76, 0.08), 0 2px 16px rgba(22, 42, 76, 0.06),
+    0 8px 12px rgba(22, 42, 76, 0.04);
+    border-radius: 0 0 4px 4px;
     height: 224px;
     overflow: hidden;
 
@@ -66,8 +61,8 @@ app-form-timepicker {
       .inner {
         ul {
           list-style: none;
-          padding: 0px;
-          margin: 0px;
+          padding: 0;
+          margin: 0;
           display: block;
 
           li {
@@ -78,6 +73,7 @@ app-form-timepicker {
             font-weight: normal;
             color: rgba(22, 42, 76, 0.9);
             cursor: pointer;
+
             &:last-child {
               border-color: transparent;
             }
@@ -85,6 +81,7 @@ app-form-timepicker {
             &.active {
               color: #376bfb;
             }
+
             &.hovered {
               background: rgba(22, 42, 76, 0.075);
             }