ecabs-components 1.1.69 → 1.1.71

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

@@ -1,75 +1,75 @@
-@import "../../scss/utilities/index";
-
-mat-paginator {
-  &.mat-mdc-paginator {
-    &, .table-ui__paginator & {
-      color: var(--color-gray-500);
-
-      .mat-mdc-paginator-range-label {
-        @include fontSize(14px);
-
-        font-weight: $font-weight-bold;
-        margin: calc-rem(0 32px 0 0);
-      }
-
-      .mat-mdc-select-trigger .mat-mdc-select-value {
-        font-size: calc-rem(14px);
-      }
-
-
-      .mat-mdc-paginator-container {
-        justify-content: space-between;
-      }
-
-      .mat-mdc-paginator-page-size {
-        font-size: calc-rem(14px);
-        display: flex;
-        align-items: center
-      }
-
-      .mat-mdc-form-field-infix {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: 0;
-      }
-
-      .mat-mdc-paginator-page-size-label {
-        margin: calc-rem(0 16px 0 0);
-      }
-
-      .mat-mdc-paginator-range-actions {
-        .mdc-icon-button {
-          border: 1px solid var(--color-gray-300);
-          border-radius: 0.25rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: calc-rem(40px);
-          height: calc-rem(40px);
-          line-height: 1;
-          padding: 0;
-
-          &.mat-mdc-paginator-navigation-previous {
-            margin-right: 16px;
-          }
-        }
-      }
-    }
-  }
-
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing,
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading {
-    border-width: 0;
-  }
-}
-
-.paginator--selector {
-  .mat-mdc-option {
-    @include fontSize($font-size-xs);
-  }
-
-  .mat-mdc-select-value {
-    @include fontSize($font-size-md);
-  }
-}
+@import "../../scss/utilities/index";
+
+mat-paginator {
+  &.mat-mdc-paginator {
+    &, .table-ui__paginator & {
+      color: var(--color-gray-500);
+
+      .mat-mdc-paginator-range-label {
+        @include fontSize(14px);
+
+        font-weight: $font-weight-bold;
+        margin: calc-rem(0 32px 0 0);
+      }
+
+      .mat-mdc-select-trigger .mat-mdc-select-value {
+        font-size: calc-rem(14px);
+      }
+
+
+      .mat-mdc-paginator-container {
+        justify-content: space-between;
+      }
+
+      .mat-mdc-paginator-page-size {
+        font-size: calc-rem(14px);
+        display: flex;
+        align-items: center
+      }
+
+      .mat-mdc-form-field-infix {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 0;
+      }
+
+      .mat-mdc-paginator-page-size-label {
+        margin: calc-rem(0 16px 0 0);
+      }
+
+      .mat-mdc-paginator-range-actions {
+        .mdc-icon-button {
+          border: 1px solid var(--color-gray-300);
+          border-radius: 0.25rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: calc-rem(40px);
+          height: calc-rem(40px);
+          line-height: 1;
+          padding: 0;
+
+          &.mat-mdc-paginator-navigation-previous {
+            margin-right: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing,
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading {
+    border-width: 0;
+  }
+}
+
+.paginator--selector {
+  .mat-mdc-option {
+    @include fontSize($font-size-xs);
+  }
+
+  .mat-mdc-select-value {
+    @include fontSize($font-size-md);
+  }
+}

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

@@ -1,55 +1,55 @@
-@import "../../scss/utilities/index";
-
-ecabs-phone {
-  @extend .ecabs-phone;
-
-  .ecabs-tel-input-container {
-    .mat-mdc-input-element {
-      @extend .ecabs-tel-input-input;
-    }
-
-    .country-selector {
-      @extend .country-selector;
-
-      .country-selector-code {
-        padding-right: .2rem;
-      }
-    }
-  }
-
-  .form-field.form-field--invalid {
-    .ecabs-tel-input-container {
-      &,
-      .country-selector {
-        @extend .form-field__input--invalid;
-      }
-    }
-  }
-
-  .disabled {
-    .ecabs-tel-input-container {
-      background-color: var(--color-white-opacity-05);
-      border-color: var(--color-gray-300);
-    }
-
-    .country-selector:disabled {
-      color: inherit;
-    }
-
-    button {
-      background-color: unset !important;
-    }
-  }
-}
-
-.ecabs-tel-input-mat-menu-panel {
-  .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
-    @include fontSize(14px);
-
-    font-weight: $font-weight-regular;
-  }
-
-  &.mat-mdc-menu-panel {
-    max-width: calc-rem(312px);
-  }
-}
+@import "../../scss/utilities/index";
+
+ecabs-phone {
+  @extend .ecabs-phone;
+
+  .ecabs-tel-input-container {
+    .mat-mdc-input-element {
+      @extend .ecabs-tel-input-input;
+    }
+
+    .country-selector {
+      @extend .country-selector;
+
+      .country-selector-code {
+        padding-right: .2rem;
+      }
+    }
+  }
+
+  .form-field.form-field--invalid {
+    .ecabs-tel-input-container {
+      &,
+      .country-selector {
+        @extend .form-field__input--invalid;
+      }
+    }
+  }
+
+  .disabled {
+    .ecabs-tel-input-container {
+      background-color: var(--color-white-opacity-05);
+      border-color: var(--color-gray-300);
+    }
+
+    .country-selector:disabled {
+      color: inherit;
+    }
+
+    button {
+      background-color: unset !important;
+    }
+  }
+}
+
+.ecabs-tel-input-mat-menu-panel {
+  .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
+    @include fontSize(14px);
+
+    font-weight: $font-weight-regular;
+  }
+
+  &.mat-mdc-menu-panel {
+    max-width: calc-rem(312px);
+  }
+}

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

@@ -1,7 +1,7 @@
-@import "../../scss/utilities/index";
-
-mat-progress-bar {
-  &.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
-    background-color: var(--color-brand-300);
-  }
-}
+@import "../../scss/utilities/index";
+
+mat-progress-bar {
+  &.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
+    background-color: var(--color-brand-300);
+  }
+}

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

@@ -1,199 +1,199 @@
-@import "../../scss/utilities/index";
-
-.mat-mdc-select {
-  &, &.form-field__select, {
-    @extend .select;
-
-    .mat-mdc-select-arrow {
-      border-left: 0;
-      border-right: 0;
-    }
-
-    .mat-mdc-select-arrow-wrapper {
-      width: calc-rem(16px);
-      display: unset;
-      vertical-align: auto;
-      transform: none;
-      padding-top: 0.375rem;
-
-      opacity: 1 !important;
-      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
-      background-size: calc-rem(12px 7.41px);
-      background-position: right center;
-      background-repeat: no-repeat;
-
-      .mat-mdc-select-arrow {
-        display: none;
-      }
-    }
-
-    .mat-mdc-select-placeholder {
-      @include fontSize($font-size-md);
-    }
-
-    &-panel.mdc-menu-surface {
-      box-shadow: 0 0 15px rgba(#6b6d73, 0.24);
-    }
-
-    &.mat-mdc-select-disabled {
-      background-color: var(--color-white-opacity-05);
-      border-color: var(--color-gray-300);
-    }
-  }
-}
-
-.mat-form-field-underline {
-  display: none;
-}
-
-.form-field--invalid {
-  .mat-mdc-form-field .mat-mdc-select,
-  .form-field__select.ng-select .ng-select-container {
-    @extend .form-field--invalid;
-  }
-}
-
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.cdk-overlay-transparent-backdrop {
-  opacity: 1;
-}
-
-.wide-select {
-  min-width: calc-rem(240px);
-
-  .mat-mdc-option {
-    @include fontSize(12px);
-  }
-}
-
-.mat-mdc-select-search-input {
-  color: var(--color-black) !important;
-}
-
-/**
-* #@ng-select
-*/
-.form-field__select.ng-select {
-  .ng-select-container,
-  [class*="form-field__select ng-select"] .ng-select-container {
-    @extend .select;
-
-    &:hover {
-      box-shadow: unset;
-    }
-  }
-
-  &.ng-select-disabled > .ng-select-container {
-    background-color: var(--color-white-opacity-05);
-    border-color: var(--color-gray-300);
-  }
-
-  .mdc-checkbox {
-    box-sizing: unset;
-  }
-
-  .ng-clear-wrapper {
-    width: calc-rem(24px);
-    height: calc-rem(24px);
-    text-align: center;
-
-    .ng-clear {
-      @include fontSize(24px);
-
-      color: var(--color-gray-500);
-      font-weight: $font-weight-semibold;
-    }
-  }
-
-  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
-    border-color: var(--color-brand-dark);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgb(50 95 218 / 10%);
-  }
-
-  &.ng-select-typeahead.ng-select-opened .ng-value {
-    color: var(--color-gray-400);
-  }
-
-  &.ng-select-multiple .ng-select-container .ng-value-container {
-    &, .ng-input {
-      padding: 0;
-    }
-  }
-
-  &.ng-select-single .ng-select-container .ng-value-container .ng-input {
-    top: .5rem;
-  }
-
-  &, &.ng-select-multiple .ng-select-container .ng-value-container {
-    .ng-placeholder {
-      @include fontSize($font-size-md);
-
-      top: unset;
-      padding-bottom: unset;
-      padding-left: unset;
-    }
-  }
-
-  .ng-select-container .ng-value-container {
-    padding-left: 0;
-
-    .ng-placeholder {
-      color: var(--mat-select-placeholder-text-color)
-    }
-  }
-
-  &.ng-select-single .ng-select-container {
-    height: unset;
-  }
-
-  .ng-arrow-wrapper, &.ng-select-opened > .ng-select-container {
-    .ng-arrow {
-      border-width: 0;
-      border-color: unset;
-      width: calc-rem(12px);
-      height: calc-rem(12px);
-      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
-      background-size: 0.75rem 1rem;
-    }
-  }
-
-  &.ng-select-opened > .ng-select-container .ng-arrow {
-    transform: scaleY(-1);
-    background-size: 0.75rem 0.6rem;
-    height: 0.6rem;
-  }
-}
-
-.form-field__select.ng-dropdown-panel, .form-field__select.ng-select .ng-dropdown-panel {
-  box-shadow: $box-shadow-default;
-  border: unset;
-
-  &.ng-select-bottom {
-    margin-top: 0;
-  }
-
-  .ng-dropdown-panel-items {
-    .ng-optgroup {
-      color: inherit;
-      font-weight: inherit;
-    }
-
-    .ng-option.ng-option-child {
-      padding-left: 10px;
-    }
-
-    .ng-option,
-    .ng-optgroup.ng-option-marked {
-      &.ng-option-selected,
-      &.ng-option-selected.ng-option-marked,
-      &.ng-optgroup.ng-option-marked,
-      &.ng-option-marked {
-        background-color: var(--color-gray-100);
-        color: var(--color-brand-dark);
-
-        .ng-option-label {
-          font-weight: $font-weight-regular;
-        }
-      }
-    }
-  }
-}
+@import "../../scss/utilities/index";
+
+.mat-mdc-select {
+  &, &.form-field__select, {
+    @extend .select;
+
+    .mat-mdc-select-arrow {
+      border-left: 0;
+      border-right: 0;
+    }
+
+    .mat-mdc-select-arrow-wrapper {
+      width: calc-rem(16px);
+      display: unset;
+      vertical-align: auto;
+      transform: none;
+      padding-top: 0.375rem;
+
+      opacity: 1 !important;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
+      background-size: calc-rem(12px 7.41px);
+      background-position: right center;
+      background-repeat: no-repeat;
+
+      .mat-mdc-select-arrow {
+        display: none;
+      }
+    }
+
+    .mat-mdc-select-placeholder {
+      @include fontSize($font-size-md);
+    }
+
+    &-panel.mdc-menu-surface {
+      box-shadow: 0 0 15px rgba(#6b6d73, 0.24);
+    }
+
+    &.mat-mdc-select-disabled {
+      background-color: var(--color-white-opacity-05);
+      border-color: var(--color-gray-300);
+    }
+  }
+}
+
+.mat-form-field-underline {
+  display: none;
+}
+
+.form-field--invalid {
+  .mat-mdc-form-field .mat-mdc-select,
+  .form-field__select.ng-select .ng-select-container {
+    @extend .form-field--invalid;
+  }
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.cdk-overlay-transparent-backdrop {
+  opacity: 1;
+}
+
+.wide-select {
+  min-width: calc-rem(240px);
+
+  .mat-mdc-option {
+    @include fontSize(12px);
+  }
+}
+
+.mat-mdc-select-search-input {
+  color: var(--color-black) !important;
+}
+
+/**
+* #@ng-select
+*/
+.form-field__select.ng-select {
+  .ng-select-container,
+  [class*="form-field__select ng-select"] .ng-select-container {
+    @extend .select;
+
+    &:hover {
+      box-shadow: unset;
+    }
+  }
+
+  &.ng-select-disabled > .ng-select-container {
+    background-color: var(--color-white-opacity-05);
+    border-color: var(--color-gray-300);
+  }
+
+  .mdc-checkbox {
+    box-sizing: unset;
+  }
+
+  .ng-clear-wrapper {
+    width: calc-rem(24px);
+    height: calc-rem(24px);
+    text-align: center;
+
+    .ng-clear {
+      @include fontSize(24px);
+
+      color: var(--color-gray-500);
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+    border-color: var(--color-brand-dark);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgb(50 95 218 / 10%);
+  }
+
+  &.ng-select-typeahead.ng-select-opened .ng-value {
+    color: var(--color-gray-400);
+  }
+
+  &.ng-select-multiple .ng-select-container .ng-value-container {
+    &, .ng-input {
+      padding: 0;
+    }
+  }
+
+  &.ng-select-single .ng-select-container .ng-value-container .ng-input {
+    top: .5rem;
+  }
+
+  &, &.ng-select-multiple .ng-select-container .ng-value-container {
+    .ng-placeholder {
+      @include fontSize($font-size-md);
+
+      top: unset;
+      padding-bottom: unset;
+      padding-left: unset;
+    }
+  }
+
+  .ng-select-container .ng-value-container {
+    padding-left: 0;
+
+    .ng-placeholder {
+      color: var(--mat-select-placeholder-text-color)
+    }
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: unset;
+  }
+
+  .ng-arrow-wrapper, &.ng-select-opened > .ng-select-container {
+    .ng-arrow {
+      border-width: 0;
+      border-color: unset;
+      width: calc-rem(12px);
+      height: calc-rem(12px);
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
+      background-size: 0.75rem 1rem;
+    }
+  }
+
+  &.ng-select-opened > .ng-select-container .ng-arrow {
+    transform: scaleY(-1);
+    background-size: 0.75rem 0.6rem;
+    height: 0.6rem;
+  }
+}
+
+.form-field__select.ng-dropdown-panel, .form-field__select.ng-select .ng-dropdown-panel {
+  box-shadow: $box-shadow-default;
+  border: unset;
+
+  &.ng-select-bottom {
+    margin-top: 0;
+  }
+
+  .ng-dropdown-panel-items {
+    .ng-optgroup {
+      color: inherit;
+      font-weight: inherit;
+    }
+
+    .ng-option.ng-option-child {
+      padding-left: 10px;
+    }
+
+    .ng-option,
+    .ng-optgroup.ng-option-marked {
+      &.ng-option-selected,
+      &.ng-option-selected.ng-option-marked,
+      &.ng-optgroup.ng-option-marked,
+      &.ng-option-marked {
+        background-color: var(--color-gray-100);
+        color: var(--color-brand-dark);
+
+        .ng-option-label {
+          font-weight: $font-weight-regular;
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
-.mat-drawer {
-  &.mat-drawer-side {
-    box-shadow: $box-shadow-default;
-    border-right: 0;
-  }
-}
+.mat-drawer {
+  &.mat-drawer-side {
+    box-shadow: $box-shadow-default;
+    border-right: 0;
+  }
+}