ecabs-components 2.0.0-alpha.5 → 2.0.0-alpha.7

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.
-@use '../scss/utilities/fonts';
-@use './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.
@@ -70,7 +72,10 @@ $custom-typography: mat.m2-define-typography-config(
   ),
   $button: mat.m2-define-typography-level(
       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(
       fonts.$font-size-base,

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

@@ -1,13 +1,38 @@
-@use "../../scss/modules";
+@use "../../scss/modules/autocomplete";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/variables";
 
 .ecabs-autocomplete {
   .mat-mdc-autocomplete-panel {
-    @extend .autocomplete-ui !optional;
+    @extend .autocomplete-ui;
 
     margin-top: 0.2rem;
 
     .mat-mdc-option {
-      @extend .autocomplete-ui--item !optional;
+      @extend .autocomplete-ui--item;
     }
   }
 }
+
+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,13 +1,19 @@
-@use "../../scss/modules";
+@use "../../scss/modules/button";
+@use "../../scss/utilities/fonts";
 
 button,
 a {
   &.mdc-button {
-    @extend .btn !optional;
+    @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 !optional;
+      @extend .btn__group--item;
     }
 
     .mat-icon {
@@ -15,56 +21,133 @@ 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 !optional;
+    @extend .btn--primary;
   }
 
   &.mdc-button--outlined.mat-primary {
-    @extend .btn__primary--outline !optional;
+    @extend .btn--primary--outline;
 
-    border: 1px solid;
+    border: 0;
   }
 
+  &.mat-mdc-button.mat-primary {
+    @extend .btn--primary--link;
+  }
+
+  /**
+  * #Secondary
+  */
+
   &.mdc-button.mat-accent {
-    @extend .btn__secondary !optional;
+    @extend .btn--secondary;
   }
 
   &.mdc-button--outlined.mat-accent {
-    @extend .btn__secondary--outline !optional;
+    @extend .btn--secondary--outline;
+
+    border: 0;
+  }
 
-    border: 1px solid;
+  &.mat-mdc-button.mat-accent {
+    @extend .btn--secondary--link;
   }
 
+  /**
+  * #Warn
+  */
+
   &.mdc-button.mat-warn {
-    @extend .btn__warn !optional;
+    @extend .btn--warn;
   }
 
   &.mdc-button--outlined.mat-warn {
-    @extend .btn__warn--outline !optional;
+    @extend .btn--warn--outline;
+
+    border: 0;
+  }
 
-    border: 1px solid;
+  &.mat-mdc-button.mat-warn {
+    @extend .btn--warn--link;
   }
 
+  /**
+ * #Success
+ */
+
   &.mdc-button.mat-success {
-    @extend .btn__success !optional;
+    @extend .btn--success;
   }
 
   &.mdc-button--outlined.mat-success {
-    @extend .btn__success--outline !optional;
+    @extend .btn--success--outline;
+
+    border: 0;
+  }
+
+  &.mat-mdc-button.mat-success {
+    @extend .btn--success--link;
+  }
 
-    border: 1px solid;
+  &.mat-mdc-unelevated-button:disabled:not(.loading) {
+    @extend .btn__disabled;
   }
 
-  &.mat-mdc-unelevated-button:disabled {
-    @extend .btn__disabled !optional;
+  &.mat-mdc-outlined-button:disabled:not(.loading) {
+    @extend .btn__disabled--outline;
   }
 
-  &.mat-mdc-outlined-button:disabled {
-    @extend .btn__disabled--outline !optional;
+  &.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 !optional;
+    @extend .btn__with-icon--wrapper;
+  }
+
+  ecabs-loading-spinner {
+    --ecabs-spinner-color: currentColor;
   }
 
   &.mat-mdc-icon-button {

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

@@ -1,19 +1,58 @@
-@use "../../scss/modules";
+@use "../../scss/modules/card";
+@use "../../scss/utilities/functions";
 
 .mat-mdc-card {
   &.mdc-card {
-    @extend .card !optional;
+    @extend .card;
+
+    .mat-mdc-card-header {
+      @extend .card__header;
+
+      .mat-divider {
+        margin-top: 0;
+      }
+    }
 
     .mat-mdc-card-subtitle {
-      @extend .card--subtitle !optional;
+      @extend .card__subtitle;
     }
 
     .mat-mdc-card-title {
-      @extend .card--title !optional;
+      @extend .card__title;
     }
 
     .mat-mdc-card-content {
-      @extend .card__content !optional;
+      @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,10 +1,33 @@
-@use "../../scss/modules/chip";
 @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;
@@ -14,6 +37,7 @@
       @extend .chip--success;
     }
 
+
     &.chip--warn, &.pending_data {
       @extend .chip--warn;
     }
@@ -43,23 +67,23 @@
     }
 
     &.cab_arrived_at_pickup {
-      @extend .cab_arrived_at_pickup ;
+      @extend .cab_arrived_at_pickup;
     }
 
     &.cancelled {
-      @extend .cancelled ;
+      @extend .cancelled;
     }
 
     &.completed, &.done {
-      @extend .completed ;
+      @extend .completed;
     }
 
-    &.dispatched  {
-      @extend .dispatched ;
+    &.dispatched {
+      @extend .dispatched;
     }
 
     &.in_progress {
-      @extend .in_progress ;
+      @extend .in_progress;
     }
 
     &.dropped_off {
@@ -80,19 +104,19 @@
     }
 
     &.reserved, &.scheduled, &.ended {
-      @extend .reserved ;
+      @extend .reserved;
     }
 
     &.trip_ended {
-      @extend .trip_ended ;
+      @extend .trip_ended;
     }
 
     &.trip_ongoing {
-      @extend .trip_ongoing ;
+      @extend .trip_ongoing;
     }
 
     &.trip_started, &.started {
-      @extend .trip_started ;
+      @extend .trip_started;
     }
 
     &.blacklisted {
@@ -131,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,8 +1,9 @@
+@use "../../scss/modules/datepicker";
 @use "../../scss/utilities/index";
 @use "../../scss/utilities/functions";
 @use "../../scss/utilities/mixins";
 @use "../../scss/utilities/variables";
-@use "../../scss/modules";
+
 
 .header {
   display: flex;
@@ -48,7 +49,6 @@
 
 .mat-calendar-body-cell-content {
   border-radius: 0.25rem !important;
-  font-size: 1rem !important;
 }
 
 .mat-calendar-body-active {
@@ -159,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,10 +1,10 @@
+@use "../../scss/modules/dialog";
 @use "../../scss/utilities/functions";
-@use "../../scss/modules";
 
 .mat-mdc-dialog-container {
   .mdc-dialog__container {
     .mdc-dialog__title {
-      @extend .dialog__title !optional;
+      @extend .dialog__title;
 
       &::before {
         height: unset;
@@ -23,6 +23,6 @@
 }
 
 .dialog--maps .mdc-dialog__container {
-  @extend .dialog--maps !optional;
+  @extend .dialog--maps;
 }
 

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

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

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

@@ -1,7 +1,7 @@
-@use "../../scss/utilities/mixins";
 @use "../../scss/utilities/fonts";
-@use "../../scss/utilities/variables";
 @use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
 
 .example-headers-align .mat-expansion-panel-header-title {
   @include mixins.fontSize(fonts.$font-heading-xs);
@@ -33,4 +33,5 @@
     box-shadow: variables.$box-shadow-default;
     overflow: visible;
   }
+
 }