ecabs-components 2.0.0-alpha.1 → 2.0.0-alpha.11

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

@@ -1,8 +1,16 @@
+@use "../../scss/modules/index";
+@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,79 @@
+@use "../../scss/modules/index";
+@use "../../scss/utilities/functions";
+
 .mat-mdc-card {
   &.mdc-card {
     @extend .card;
 
+    &.card--compact {
+      @extend .card--compact;
+
+      .mat-mdc-card-header {
+        padding-bottom: functions.calc-rem(8px);
+      }
+
+      .mat-mdc-card-content {
+        padding-top: 0;
+      }
+    }
+
+    .mat-mdc-card-header {
+      @extend .card__header;
+
+      .mat-divider {
+        margin-top: 0;
+      }
+    }
+
+    .card__header--with-slots .mat-mdc-card-header-text {
+      flex: 999 1 functions.calc-rem(192px);
+      min-width: 0;
+    }
+
+    .card__header--title-only .mat-mdc-card-title {
+      padding-bottom: 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,32 @@
+@use "../../scss/modules/index";
+@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 +36,7 @@
       @extend .chip--success;
     }
 
+
     &.chip--warn, &.pending_data {
       @extend .chip--warn;
     }
@@ -47,7 +73,7 @@
       @extend .cancelled;
     }
 
-    &.completed {
+    &.completed, &.done {
       @extend .completed;
     }
 
@@ -55,6 +81,10 @@
       @extend .dispatched;
     }
 
+    &.in_progress {
+      @extend .in_progress;
+    }
+
     &.dropped_off {
       @extend .dropped_off;
     }
@@ -68,7 +98,7 @@
     }
 
     &.rejected, &.suspended,
-    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, {
+    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, &.failed {
       @extend .rejected;
     }
 
@@ -124,3 +154,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,8 @@
-@import "../../scss/utilities/index";
+@use "../../scss/modules/datepicker";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
+
 
 .header {
   display: flex;
@@ -12,8 +16,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;
 }
 
@@ -90,12 +94,6 @@
     opacity: 1;
   }
 
-  .mat-calendar-body-cell-container:hover .mat-calendar-body-cell.mat-calendar-body-disabled {
-    .mat-calendar-body-cell-content {
-      background-color: transparent !important;
-    }
-  }
-
   .mat-calendar-body-cell-content,
   .mat-date-range-input-separator {
     color: var(--color-black);
@@ -106,7 +104,7 @@
   }
 
   .mat-calendar-table-header th {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-table-header-divider::after {
@@ -114,7 +112,7 @@
   }
 
   .mat-calendar-body {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-body-in-range {
@@ -137,7 +135,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 {
@@ -160,3 +158,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/index";
+@use "../../scss/utilities/functions";
+
 .mat-mdc-dialog-container {
   .mdc-dialog__container {
     .mdc-dialog__title {
@@ -9,13 +12,12 @@
     }
 
     .mdc-dialog__actions {
-      padding: calc-rem(0 24px 24px);
+      padding: functions.calc-rem(0 24px 24px);
       justify-content: end !important;
     }
 
     .mdc-dialog__content {
       color: var(--color-black);
-      overflow: unset;
     }
   }
 }

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

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

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

@@ -1,18 +1,34 @@
-.example-headers-align .mat-expansion-panel-header-title {
-  @include fontSize($font-heading-xs);
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
+
+ecabs-expansion-panel {
+  .mat-expansion-panel-header-description {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .mat-expansion-indicator::after {
+    border-color: var(--color-gray-500);
+  }
+}
+
+ecabs-expansion-panel .mat-expansion-panel-header-title {
+  @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 +36,44 @@
     }
 
     .mat-expansion-panel-body {
-      padding: calc-rem(0 0 16 0);
+      padding: functions.calc-rem(0 0 16 0);
+    }
+
+    .ecabs-expansion-panel__heading {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      height: var(--mat-expansion-header-expanded-state-height, #{functions.calc-rem(64)});
+      padding: functions.calc-rem(0 0 24 0);
+
+      // Matches the width the real header's content box gets once the toggle is accounted for.
+      .mat-content {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        overflow: hidden;
+        margin-right: functions.calc-rem(8);
+      }
+
+      .mat-expansion-panel-header-title,
+      .mat-expansion-panel-header-description {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        flex-basis: 0;
+        margin-right: functions.calc-rem(16);
+      }
+
+      .mat-expansion-panel-header-description {
+        flex-grow: 2;
+        color: var(--mat-expansion-header-description-color);
+      }
     }
   }
 
   .mat-expansion-panel:not([class*=mat-elevation-z]) {
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
+    overflow: visible;
   }
 
 }

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

@@ -1,4 +1,7 @@
-@import "../../../styles/scss/utilities/helpers";
+@use "../../scss/modules/index";
+@use "../../scss/utilities/helpers";
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/mixins";
 
 .mat-mdc-form-field {
   display: block !important;
@@ -61,12 +64,16 @@
 .mat-mdc-slide-toggle-label,
 .mat-mdc-checkbox .mdc-form-field .mdc-label,
 .mat-mdc-radio-button .mdc-form-field .mdc-label {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
   margin-bottom: 0;
   color: var(--color-black);
 }
 
+.mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
+  border-color: var(--color-white);
+}
+
 .newline-validation .form-field {
   flex-wrap: wrap;
 
@@ -75,6 +82,11 @@
   }
 }
 
+ecabs-input.ecabs-input--fluid {
+  display: block;
+  width: 100%;
+}
+
 .form-field--required {
   .form-field__label {
     &:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {

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

@@ -1,3 +1,9 @@
+@use "../../scss/modules/index";
 mat-icon {
   @extend .icon;
 }
+
+.mat-mdc-icon-button .mat-icon svg {
+  width: 100%;
+  height: 100%;
+}