ecabs-components 2.0.0-alpha.3 → 2.0.0-alpha.6

package/public-api.d.ts

@@ -3,8 +3,14 @@ export * from './lib/ecabs-loading/ecabs-loading.component';
 export * from './lib/ecabs-loading/spinner/spinner.component';
 export * from './lib/ecabs-buttons/ecabs-buttons.component';
 export * from './lib/ecabs-buttons/ecabs-buttons.module';
+export * from './lib/ecabs-buttons-v2/ecabs-buttons-v2.component';
+export * from './lib/ecabs-buttons-v2/ecabs-buttons-v2.module';
+export * from './lib/ecabs-button-toggle/ecabs-button-toggle.component';
+export * from './lib/ecabs-button-toggle/ecabs-button-toggle.module';
 export * from './lib/ecabs-input/ecabs-input.component';
 export * from './lib/ecabs-input/ecabs-input.module';
+export * from './lib/ecabs-input-range/ecabs-input-range.component';
+export * from './lib/ecabs-input-range/ecabs-input-range.module';
 export * from './lib/ecabs-select/ecabs-select.module';
 export * from './lib/ecabs-select/ecabs-select.component';
 export * from './lib/ecabs-select-v2/ecabs-select-v2.module';
@@ -20,8 +26,11 @@ export * from './lib/base/models/timepicker.models';
 export * from './lib/base/models/header.models';
 export * from './lib/base/models/validation.models';
 export * from './lib/base/models/select.models';
+export * from './lib/base/models/waypoint.models';
 export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component';
 export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.module';
+export * from './lib/ecabs-checkbox-v2/ecabs-checkbox-v2.component';
+export * from './lib/ecabs-checkbox-v2/ecabs-checkbox-v2.module';
 export * from './lib/ecabs-date-picker/ecabs-date-picker.component';
 export * from './lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component';
 export * from './lib/ecabs-date-time-picker/ecabs-date-time-picker.component';
@@ -111,6 +120,8 @@ export * from './lib/ecabs-base-phone-input/ecabs-base-phone.component';
 export * from './lib/ecabs-base-phone-input/ecabs-base-phone.module';
 export * from './lib/base/services/unsubscribe.service';
 export * from './lib/base/pipes/truncate.pipe';
+export * from './lib/base/pipes/separator-append.pipe';
+export * from './lib/base/pipes/phone-number-country-code.pipe';
 export * from './lib/base/pipes/pipes.module';
 export * from './lib/ecabs-sidebar/ecabs-sidebar.module';
 export * from './lib/ecabs-sidebar/ecabs-sidebar.component';
@@ -120,12 +131,26 @@ export * from './lib/ecabs-logo/ecabs-logo.module';
 export * from './lib/ecabs-logo/ecabs-logo.component';
 export * from './lib/ecabs-place-autocomplete/ecabs-place-autocomplete.module';
 export * from './lib/ecabs-place-autocomplete/ecabs-place-autocomplete.component';
+export * from './lib/ecabs-place-autocomplete-v2/ecabs-place-autocomplete-v2.module';
+export * from './lib/ecabs-place-autocomplete-v2/ecabs-place-autocomplete-v2.component';
 export * from './lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.module';
 export * from './lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.component';
 export * from './lib/base/services/ecabs-date-picker-translations.service';
 export * from './lib/base/utils/object-utils';
+export * from './lib/base/utils/phone-number.utils';
+export * from './lib/base/utils/select.utils';
 export * from './lib/base/consts/buttons.consts';
 export * from './lib/base/adapters/date.adapter';
 export * from './lib/base/consts/waypoint.consts';
 export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.module';
 export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.component';
+export * from './lib/ecabs-time-range-input-v2/ecabs-time-range-input-v2.service';
+export * from './lib/ecabs-time-range-input-v2/ecabs-time-range-input-v2.module';
+export * from './lib/ecabs-time-range-input-v2/ecabs-time-range-input-v2.component';
+export * from './lib/ecabs-chip-group/ecabs-chip-group.module';
+export * from './lib/ecabs-chip-group/ecabs-chip-group.component';
+export * from './lib/ecabs-chip-autocomplete/ecabs-chip-autocomplete.component';
+export * from './lib/ecabs-date-range-picker-v2/ecabs-date-range-picker-v2.module';
+export * from './lib/ecabs-date-range-picker-v2/ecabs-date-range-picker-v2.component';
+export * from './lib/ecabs-date-range-picker-v2/components/ecabs-date-range-picker-header/ecabs-date-range-picker-header-v2.component';
+export * from './lib/ecabs-segment/ecabs-segment.component';

package/src/assets/styles/material/_theme.scss

@@ -3,8 +3,10 @@
 @use '@angular/material' as mat;
 
 // Plus imports for other components in your app.
-@import '../scss/utilities/index';
-@import 'overrides/index';
+@use '../scss/utilities/index';
+@use 'overrides/index' as index2;
+@use "../scss/utilities/fonts";
+
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -60,24 +62,27 @@ $cuorium-warn: mat.m2-define-palette($mat-warning);
 // Define a custom typography config that overrides the font-family as well as the
 // `headlines` and `body-1` levels.
 $custom-typography: mat.m2-define-typography-config(
-  $font-family: $font-family-primary,
+  $font-family: fonts.$font-family-primary,
   $body-1: mat.m2-define-typography-level(
-      $font-size-base,
-      $base-line-height,
-      $font-weight-regular,
+      fonts.$font-size-base,
+      fonts.$base-line-height,
+      fonts.$font-weight-regular,
     $letter-spacing: normal,
-    $font-family: $font-family-primary,
+    $font-family: fonts.$font-family-primary,
   ),
   $button: mat.m2-define-typography-level(
-      $font-size-base,
+      fonts.$font-size-base,
+      fonts.$base-line-height,
+      fonts.$font-weight-semibold,
     $letter-spacing: normal,
+    $font-family: fonts.$font-family-primary,
   ),
   $body-2: mat.m2-define-typography-level(
-      $font-size-base,
-      $base-line-height,
-      $font-weight-regular,
+      fonts.$font-size-base,
+      fonts.$base-line-height,
+      fonts.$font-weight-regular,
     $letter-spacing: normal,
-    $font-family: $font-family-primary,
+    $font-family: fonts.$font-family-primary,
   )
 );
 

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

@@ -1,3 +1,7 @@
+@use "../../scss/modules/autocomplete";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/variables";
+
 .ecabs-autocomplete {
   .mat-mdc-autocomplete-panel {
     @extend .autocomplete-ui;
@@ -9,3 +13,26 @@
     }
   }
 }
+
+ecabs-chip-autocomplete {
+  input.mat-mdc-chip-input {
+    margin-left: unset;
+    border-radius: functions.calc-rem(variables.$border-radius-large);
+  }
+
+  .form-field {
+    margin-bottom: unset;
+  }
+}
+
+.ecabs-chip-autocomplete-overlay-panel {
+  &.mat-mdc-autocomplete-panel {
+    box-shadow: variables.$box-shadow-default;
+    border-radius: functions.calc-rem(variables.$border-radius-large);
+    border-top: 0;
+
+    max-height: calc((var(--autocomplete-visible-options, 8.5) * var(--mat-option-height, 48px)) + 10px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

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

@@ -1,8 +1,16 @@
+@use "../../scss/modules/button";
+@use "../../scss/utilities/fonts";
+
 button,
 a {
   &.mdc-button {
     @extend .btn;
 
+    --mdc-text-button-label-text-weight: #{fonts.$font-weight-semibold};
+    --mdc-filled-button-label-text-weight: #{fonts.$font-weight-semibold};
+    --mdc-outlined-button-label-text-weight: #{fonts.$font-weight-semibold};
+    --mdc-protected-button-label-text-weight: #{fonts.$font-weight-semibold};
+
     &.btn__group--item,
     &.btn {
       @extend .btn__group--item;
@@ -13,58 +21,135 @@ a {
     }
   }
 
+  /**
+ * #Basic
+ */
+  &.mdc-button.mat-mdc-button {
+    @extend .btn--basic;
+  }
+
+  &.mdc-button--outlined {
+    @extend .btn--basic--outline;
+
+    border: 0;
+  }
+
+  &.mdc-button.mat-mdc-button {
+    @extend .btn--basic--link;
+  }
+
+  &.mdc-button.mat-mdc-button:disabled:not(.loading) {
+    @extend .btn__disabled--outline;
+
+    &:after {
+      border: 0;
+    }
+  }
+
+  /**
+  * #Primary
+  */
   &.mdc-button.mat-primary {
-    @extend .btn__primary;
+    @extend .btn--primary;
   }
 
   &.mdc-button--outlined.mat-primary {
-    @extend .btn__primary--outline;
+    @extend .btn--primary--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-primary {
+    @extend .btn--primary--link;
+  }
+
+  /**
+  * #Secondary
+  */
+
   &.mdc-button.mat-accent {
-    @extend .btn__secondary;
+    @extend .btn--secondary;
   }
 
   &.mdc-button--outlined.mat-accent {
-    @extend .btn__secondary--outline;
+    @extend .btn--secondary--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-accent {
+    @extend .btn--secondary--link;
+  }
+
+  /**
+  * #Warn
+  */
+
   &.mdc-button.mat-warn {
-    @extend .btn__warn;
+    @extend .btn--warn;
   }
 
   &.mdc-button--outlined.mat-warn {
-    @extend .btn__warn--outline;
+    @extend .btn--warn--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-warn {
+    @extend .btn--warn--link;
+  }
+
+  /**
+ * #Success
+ */
+
   &.mdc-button.mat-success {
-    @extend .btn__success;
+    @extend .btn--success;
   }
 
   &.mdc-button--outlined.mat-success {
-    @extend .btn__success--outline;
+    @extend .btn--success--outline;
 
     border: 0;
   }
 
-  &.mat-mdc-unelevated-button:disabled {
+  &.mat-mdc-button.mat-success {
+    @extend .btn--success--link;
+  }
+
+  &.mat-mdc-unelevated-button:disabled:not(.loading) {
     @extend .btn__disabled;
   }
 
-  &.mat-mdc-outlined-button:disabled {
+  &.mat-mdc-outlined-button:disabled:not(.loading) {
     @extend .btn__disabled--outline;
   }
 
+  &.mat-mdc-button,
+  &.mat-mdc-outlined-button,
+  &.mat-mdc-unelevated-button,
+  &.mat-mdc-raised-button {
+    &.ecabs-button-v2--small {
+      @extend .btn--small;
+    }
+
+    &.ecabs-button-v2--medium {
+      @extend .btn--medium;
+    }
+
+    &.ecabs-button-v2--large {
+      @extend .btn--large;
+    }
+  }
+
   .mdc-button__label {
     @extend .btn__with-icon--wrapper;
   }
 
+  ecabs-loading-spinner {
+    --ecabs-spinner-color: currentColor;
+  }
+
   &.mat-mdc-icon-button {
     min-width: auto;
     line-height: 1;

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

@@ -1,17 +1,58 @@
+@use "../../scss/modules/card";
+@use "../../scss/utilities/functions";
+
 .mat-mdc-card {
   &.mdc-card {
     @extend .card;
 
+    .mat-mdc-card-header {
+      @extend .card__header;
+
+      .mat-divider {
+        margin-top: 0;
+      }
+    }
+
     .mat-mdc-card-subtitle {
-      @extend .card--subtitle;
+      @extend .card__subtitle;
     }
 
     .mat-mdc-card-title {
-      @extend .card--title;
+      @extend .card__title;
     }
 
     .mat-mdc-card-content {
       @extend .card__content;
     }
+
+    .mat-divider:not(.card__title--divider) {
+      margin-top: functions.calc-rem(24px);
+    }
+
+    .card--inset {
+      .mat-divider {
+        margin-top: 0;
+        border-top-color: var(--color-gray-200);
+        color: var(--color-gray-200);
+      }
+
+      .form-field {
+        margin-bottom: 0;
+      }
+
+      .mdc-button.mat-mdc-button {
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+        min-width: auto;
+        height: fit-content;
+        min-height: fit-content;
+        line-height: 1;
+
+        .mat-mdc-button-persistent-ripple::before {
+          background-color: transparent;
+        }
+      }
+    }
   }
 }

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

@@ -1,7 +1,33 @@
+@use "../../scss/modules/statuses";
+@use "../../scss/modules/chip";
+@use "../../scss/utilities/helpers";
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/variables";
+
 .mdc-evolution-chip {
   &,
   &.mat-mdc-standard-chip {
     @extend .chip;
+    --mdc-chip-elevated-disabled-container-color: var(--color-gray-300);
+
+    &.chip__standard {
+      @extend .chip__standard;
+    }
+
+    &.draft {
+      background-color: var(--color-gray-50);
+      color: var(--color-gray-500);
+    }
+
+    &.published {
+      @extend .published;
+    }
+
+    &.archived {
+      background-color: #F0F0F0;
+      color: #676767;
+    }
 
     &.chip--info, &.pending_review {
       @extend .chip--info;
@@ -11,6 +37,7 @@
       @extend .chip--success;
     }
 
+
     &.chip--warn, &.pending_data {
       @extend .chip--warn;
     }
@@ -51,7 +78,7 @@
       @extend .completed;
     }
 
-    &.dispatched  {
+    &.dispatched {
       @extend .dispatched;
     }
 
@@ -128,3 +155,93 @@
 .mdc-evolution-chip.mat-mdc-standard-chip[ng-reflect-disable-ripple]:not(.mdc-evolution-chip--disabled):active {
   box-shadow: none;
 }
+
+//V2 styles
+ecabs-chip-group {
+  .mat-mdc-chip-listbox {
+    display: flex;
+    flex-wrap: wrap;
+    gap: functions.calc-rem(8px);
+
+    .mat-mdc-chip {
+      --mdc-chip-elevated-container-color: var(--color-white);
+      --mdc-chip-label-text-color: var(--color-gray-600);
+      --mdc-chip-label-text-size: #{fonts.$font-size-sm};
+      --mdc-chip-label-text-weight: #{fonts.$font-weight-medium};
+      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
+      --mdc-chip-selected-label-text-color: var(--color-white);
+
+      border-radius: functions.calc-rem(variables.$border-radius-medium);
+      border: 1px solid var(--color-gray-200);
+      color: var(--mdc-chip-label-text-color);
+
+      &:hover {
+        border-color: var(--color-gray-300);
+      }
+    }
+
+    .mat-mdc-chip.mdc-evolution-chip--selected {
+      border-color: transparent;
+
+      .mdc-evolution-chip__action {
+        color: var(--mdc-chip-selected-label-text-color);
+      }
+    }
+
+    .mat-mdc-chip.mdc-evolution-chip--disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .mat-mdc-chip .mat-mdc-chip-graphic {
+      display: none;
+    }
+
+    .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary {
+      padding: 0;
+
+      &:after {
+        @extend %pseudos;
+
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    .mat-mdc-chip .mdc-chip__ripple,
+    .mat-mdc-chip .mat-ripple {
+      display: none;
+    }
+  }
+}
+
+ecabs-chip-autocomplete {
+  .mat-mdc-chip-grid {
+    .mat-mdc-chip {
+      --mdc-chip-elevated-container-color: var(--color-gray-100);
+      --mdc-chip-label-text-color: var(--color-gray-600);
+      --mdc-chip-label-text-size: #{fonts.$font-size-xs};
+      --mdc-chip-label-text-weight: #{fonts.$font-weight-medium};
+      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
+      --mdc-chip-selected-label-text-color: var(--color-white);
+      --mdc-chip-container-height: #{functions.calc-rem(28px)};
+      --mdc-chip-with-trailing-icon-trailing-icon-color: var(--color-gray-600);
+      --mdc-chip-with-avatar-avatar-shape-radius: 0;
+
+      border-radius: functions.calc-rem(variables.$border-radius-medium);
+      padding-left: unset;
+      padding-right: unset;
+    }
+  }
+
+  .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing {
+    width: functions.calc-rem(14px);
+    height: functions.calc-rem(14px);
+  }
+
+  .mdc-evolution-chip-set .mdc-evolution-chip {
+    margin-top: 0;
+  }
+}

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

@@ -1,4 +1,9 @@
-@import "../../scss/utilities/index";
+@use "../../scss/modules/datepicker";
+@use "../../scss/utilities/index";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
+
 
 .header {
   display: flex;
@@ -12,8 +17,8 @@
 
 .datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base {
   padding: 0;
-  width: calc-rem(40px);
-  height: calc-rem(40px);
+  width: functions.calc-rem(40px);
+  height: functions.calc-rem(40px);
   line-height: 2;
 }
 
@@ -44,7 +49,6 @@
 
 .mat-calendar-body-cell-content {
   border-radius: 0.25rem !important;
-  font-size: 1rem !important;
 }
 
 .mat-calendar-body-active {
@@ -101,7 +105,7 @@
   }
 
   .mat-calendar-table-header th {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-table-header-divider::after {
@@ -109,7 +113,7 @@
   }
 
   .mat-calendar-body {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-body-in-range {
@@ -132,7 +136,7 @@
 .mat-datepicker-popup {
   .mat-datepicker-content {
     color: var(--color-black);
-    box-shadow: $box-shadow-large;
+    box-shadow: variables.$box-shadow-large;
   }
 
   .mat-datepicker-actions {
@@ -155,3 +159,25 @@
     }
   }
 }
+
+.ecabs-date-range-picker-v2 {
+  .mat-calendar-content {
+    padding: 0 1.6rem 1.6rem;
+  }
+}
+
+ecabs-date-range-picker-v2 {
+  .mat-datepicker-input {
+    text-align: center;
+  }
+
+  input {
+    border: none;
+    box-shadow: none;
+  }
+
+  input:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}

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

@@ -1,3 +1,6 @@
+@use "../../scss/modules/dialog";
+@use "../../scss/utilities/functions";
+
 .mat-mdc-dialog-container {
   .mdc-dialog__container {
     .mdc-dialog__title {
@@ -9,7 +12,7 @@
     }
 
     .mdc-dialog__actions {
-      padding: calc-rem(0 24px 24px);
+      padding: functions.calc-rem(0 24px 24px);
       justify-content: end !important;
     }
 

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

@@ -1,3 +1,6 @@
-.mat-divider {
-  @extend .divider;
+@use "../../scss/modules/divider";
+mat-divider {
+  &.mat-divider {
+    @extend .divider;
+  }
 }

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

@@ -1,18 +1,23 @@
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
+
 .example-headers-align .mat-expansion-panel-header-title {
-  @include fontSize($font-heading-xs);
+  @include mixins.fontSize(fonts.$font-heading-xs);
 
   color: var(--color-brand-dark);
-  font-weight: $font-weight-semibold;
+  font-weight: fonts.$font-weight-semibold;
   line-height: 32px;
   white-space: nowrap;
 }
 
 .mat-accordion {
   .mat-expansion-panel {
-    padding: calc-rem(24 24 0 24);
+    padding: functions.calc-rem(24 24 0 24);
 
     .mat-expansion-panel-header {
-      padding: calc-rem(0 0 24 0);
+      padding: functions.calc-rem(0 0 24 0);
 
       &:hover {
         background: unset !important;
@@ -20,12 +25,12 @@
     }
 
     .mat-expansion-panel-body {
-      padding: calc-rem(0 0 16 0);
+      padding: functions.calc-rem(0 0 16 0);
     }
   }
 
   .mat-expansion-panel:not([class*=mat-elevation-z]) {
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
     overflow: visible;
   }