ecabs-components 0.0.30 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",
@@ -8,14 +8,13 @@
     "@angular/material": "~13.0.0-next.7+89.sha-a662737",
     "flag-icons": "^6.7.0",
     "ngx-mat-intl-tel-input": "^5.0.0",
-    "ngx-mat-select-search": "^4.2.1"
+    "ngx-mat-select-search": "^4.2.1",
+    "rxjs": "~7.5.0",
+    "vanilla-text-mask": "^5.1.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "allowedNonPeerDependencies": {
-    "vanilla-text-mask": "^5.1.1"
-  },
   "module": "fesm2015/ecabs-components.mjs",
   "es2020": "fesm2020/ecabs-components.mjs",
   "esm2020": "esm2020/ecabs-components.mjs",

package/styles/material/_theme.scss

@@ -1,99 +0,0 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@import '@angular/material/theming';
-
-// Plus imports for other components in your app.
-@import '../scss/utilities/index';
-@import './overrides/index';
-
-// 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.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
-
-$mat-primary: (
-  100: var(--color-brand-dark),
-  700: var(--color-brand-dark),
-  A700: var(--color-brand-dark),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-$mat-accent: (
-  A700: var(--color-brand-light),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-$mat-secondary: (
-  100: var(--color-brand-dark),
-  700: var(--color-brand-dark),
-  A700: var(--color-brand-dark),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-$mat-warning: (
-  100: var(--color-error),
-  500: var(--color-error),
-  700: var(--color-error),
-  A700: var(--color-error),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$cuorium-primary: mat-palette($mat-primary, A700);
-$cuorium-accent: mat-palette($mat-secondary, A700);
-
-// The warn palette is optional (defaults to red).
-$cuorium-warn: mat-palette($mat-warning);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$cuorium-theme: mat-light-theme(
-  (
-    color: (
-      primary: $cuorium-primary,
-      accent: $cuorium-accent,
-      warn: $cuorium-warn,
-    ),
-  )
-);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($cuorium-theme);
-
-// Define a custom typography config that overrides the font-family as well as the
-// `headlines` and `body-1` levels.
-$custom-typography: mat-typography-config(
-  $font-family: $font-family-primary,
-  $body-1: mat-typography-level($font-size-base, $base-line-height, $font-weight-regular),
-  $input: mat-typography-level($font-size-base, $base-line-height, $font-weight-regular),
-  $headline: mat-typography-level($font-heading-lg, $base-line-height, $font-weight-medium),
-  $title: mat-typography-level($font-heading-base, $base-line-height, $font-weight-medium),
-  $subheading-2: mat-typography-level($font-heading-md, $base-line-height, $font-weight-medium),
-  $subheading-1: mat-typography-level($font-heading-sm, $base-line-height, $font-weight-medium),
-);
-
-@include angular-material-typography($custom-typography);
-
-.mat-body p,
-.mat-body-1 p,
-.mat-typography p {
-  margin: inherit;
-}
-
-mat-progress-bar {
-  .mat-progress-bar-buffer {
-    background-color: var(--color-brand-300) !important;
-  }
-}

package/styles/material/overrides/_autocomplete.scss

@@ -1,11 +0,0 @@
-.mat-autocomplete-panel {
-  margin-top: 0.2rem;
-
-  &, &.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
-    @extend .autocomplete-ui;
-  }
-
-  .mat-option {
-    @extend .autocomplete-ui--item;
-  }
-}

package/styles/material/overrides/_button.scss

@@ -1,81 +0,0 @@
-button,
-a {
-  &.mat-button,
-  &.mat-stroked-button,
-  &.mat-raised-button,
-  &.mat-flat-button {
-    @extend .btn;
-
-    &.btn__group--item,
-    &.btn {
-      @extend .btn__group--item;
-    }
-
-    .mat-icon {
-      color: inherit;
-    }
-  }
-
-  &.mat-button.mat-primary,
-  &.mat-flat-button.mat-primary {
-    @extend .btn__primary;
-  }
-
-  &.mat-stroked-button.mat-primary {
-    @extend .btn__primary--outline;
-
-    border: 0;
-  }
-
-  &.mat-button.mat-accent,
-  &.mat-flat-button.mat-accent {
-    @extend .btn__secondary;
-  }
-
-  &.mat-stroked-button.mat-accent {
-    @extend .btn__secondary--outline;
-
-    border: 0;
-  }
-
-  &.mat-button.mat-warn {
-    @extend .btn__warn;
-  }
-  
-  &.mat-button.mat-success {
-    @extend .btn__success;
-  }
-
-  &.mat-stroked-button.mat-warn {
-    @extend .btn__warn--outline;
-
-    border: 0;
-  }
-
-  &.mat-stroked-button.mat-success {
-    @extend .btn__success--outline;
-
-    border: 0;
-  }
-
-  &.mat-button.mat-button-disabled {
-    @extend .btn__disabled;
-  }
-
-  &.mat-stroked-button.mat-button-disabled {
-    @extend .btn__disabled--outline;
-  }
-
-  .mat-button-wrapper {
-    @extend .btn__with-icon--wrapper;
-  }
-
-  &.mat-icon-button .mat-button-wrapper .mat-icon {
-    margin-right: 0;
-  }
-
-  &.mat-button.mat-icon-button {
-    min-width: auto;
-    padding: calc-rem(8);
-  }
-}

package/styles/material/overrides/_card.scss

@@ -1,17 +0,0 @@
-.mat-card {
-  &.mat-card:not([class*=mat-elevation-z]) {
-    @extend .card;
-  }
-
-  .mat-card-subtitle {
-    @extend .card--subtitle;
-  }
-
-  .mat-card-title {
-    @extend .card--title;
-  }
-
-  .mat-card-content {
-    @extend .card__content;
-  }
-}

package/styles/material/overrides/_chip.scss

@@ -1,108 +0,0 @@
-.mat-chip {
-  &,
-  &.mat-standard-chip {
-    @extend .chip;
-
-    &.chip--info {
-      @extend .chip--info;
-    }
-
-    &.chip--success {
-      @extend .chip--success;
-    }
-
-    &.chip--warn {
-      @extend .chip--warn;
-    }
-
-    &.chip--danger {
-      @extend .chip--danger;
-    }
-
-    &.chip--selected {
-      @extend .chip--selected;
-    }
-
-    &.chip--not-selected {
-      @extend .chip--not-selected;
-    }
-
-    &.accepted {
-      @extend .accepted;
-    }
-
-    &.cab_arrived_at_dropoff, &.cashed_in {
-      @extend .cab_arrived_at_dropoff;
-    }
-
-    &.cab_arrived_at_intermediary_waypoint {
-      @extend .cab_arrived_at_intermediary_waypoint;
-    }
-
-    &.cab_arrived_at_pickup {
-      @extend .cab_arrived_at_pickup;
-    }
-
-    &.cancelled {
-      @extend .cancelled;
-    }
-
-    &.completed {
-      @extend .completed;
-    }
-
-    &.dispatched {
-      @extend .dispatched;
-    }
-
-    &.dropped_off {
-      @extend .dropped_off;
-    }
-
-    &.no_show {
-      @extend .no_show;
-    }
-
-    &.pending {
-      @extend .pending;
-    }
-
-    &.rejected, &.suspended,
-    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, {
-      @extend .rejected;
-    }
-
-    &.reserved, &.scheduled, &.ended {
-      @extend .reserved;
-    }
-
-    &.trip_ended {
-      @extend .trip_ended;
-    }
-
-    &.trip_ongoing {
-      @extend .trip_ongoing;
-    }
-
-    &.trip_started, &.started {
-      @extend .trip_started;
-    }
-
-    &[ng-reflect-disable-ripple] {
-      &::after {
-        background: transparent;
-      }
-    }
-  }
-
-  .mat-icon {
-    &,
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-.mat-chip.mat-standard-chip[ng-reflect-disable-ripple]:not(.mat-chip-disabled):active {
-  box-shadow: none;
-}

package/styles/material/overrides/_datepicker.scss

@@ -1,169 +0,0 @@
-@import "../../scss/utilities/index.scss";
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 0.5em;
-}
-
-.header-label {
-  flex: 1;
-  height: 1em;
-  font-weight: 500;
-  text-align: center;
-}
-
-.select-date-label {
-  color: var(--color-brand-dark);
-  padding-top: 1.6rem;
-  padding-left: 1.6rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.grid-picker-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
-  margin-right: 0.5rem;
-}
-
-.ml-0 {
-  margin-left: 0rem;
-}
-
-.w-full {
-  width: 100% !important;
-}
-
-.mat-calendar-table {
-  .mat-calendar-body {
-    tr:first-child[aria-hidden='true'] {
-      display: none;
-    }
-  }
-}
-
-.mat-datepicker-toggle {
-  padding-top: 0.75rem;
-  margin-left: -2.25rem;
-}
-
-.mat-calendar-body-label {
-  visibility: hidden;
-}
-
-.mat-calendar-body-cell-content {
-  border-radius: 0.25rem !important;
-}
-
-.mat-calendar-body-active {
-  .mat-calendar-body-today {
-    color: var(--color-brand-light) !important;
-    background-color: var(--color-brand-light2) !important;
-  }
-}
-
-.mat-calendar {
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-      background-color: var(--color-brand-light2);
-      color: var(--color-black);
-    }
-  }
-
-  .mat-calendar-body-cell.mat-calendar-body-active {
-    &, &:hover {
-      .mat-calendar-body-cell-content.mat-calendar-body-selected {
-        background-color: var(--color-brand-light) !important;
-        color: var(--color-white) !important;
-      }
-    }
-  }
-
-  .mat-calendar-body-selected {
-    background-color: var(--color-brand-light);
-    color: var(--color-white) !important;
-
-    .mat-calendar-body-today {
-      color: var(--color-white) !important;
-    }
-  }
-
-  .mat-calendar-table-header,
-  .mat-calendar-body-label {
-    color: var(--color-gray-500);
-  }
-
-  .mat-calendar-body-cell > .mat-calendar-body-today {
-    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);
-  }
-
-  .mat-calendar-content {
-    padding: 0 1.6rem;
-  }
-
-  .mat-calendar-table-header th {
-    @include fontSize(16px);
-  }
-
-  .mat-calendar-table-header-divider::after {
-    display: none;
-  }
-
-  .mat-calendar-body {
-    @include fontSize(16px);
-  }
-
-  .mat-calendar-body-in-range {
-    &::before {
-      background-color: var(--color-brand-light2);
-    }
-
-    .mat-calendar-body-cell-content {
-      color: var(--color-black) !important;
-    }
-  }
-
-  .mat-calendar-body-range-start, .mat-calendar-body-range-end {
-    .mat-calendar-body-cell-content {
-      color: var(--color-white) !important;
-    }
-  }
-}
-
-.mat-datepicker-popup {
-  .mat-datepicker-content {
-    color: var(--color-black);
-    box-shadow: $box-shadow-large;
-  }
-
-  .mat-datepicker-actions {
-    margin-top: 1rem;
-    padding: 0 1.6rem 1.6rem 1.6rem;
-  }
-
-  .mat-calendar-body-disabled {
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-      color: var(--color-gray-300);
-    }
-  }
-}

package/styles/material/overrides/_dialog.scss

@@ -1,8 +0,0 @@
-
-.mat-dialog-title {
-  @extend .dialog__title;
-}
-
-.dialog--maps .mat-dialog-container {
-  @extend .dialog--maps;
-}

package/styles/material/overrides/_divider.scss

@@ -1,3 +0,0 @@
-.mat-divider {
-  @extend .divider;
-}

package/styles/material/overrides/_expansion.scss

@@ -1,31 +0,0 @@
-.example-headers-align .mat-expansion-panel-header-title {
-  @include fontSize($font-heading-xs);
-
-  color: var(--color-brand-dark);
-  font-weight: $font-weight-semibold;
-  line-height: 32px;
-  white-space: nowrap;
-}
-
-.mat-accordion {
-  .mat-expansion-panel {
-    padding: calc-rem(24 24 0 24);
-
-    .mat-expansion-panel-header {
-      padding: calc-rem(0 0 24 0);
-
-      &:hover {
-        background: unset !important;
-      }
-    }
-
-    .mat-expansion-panel-body {
-      padding: calc-rem(0 0 16 0);
-    }
-  }
-
-  .mat-expansion-panel:not([class*=mat-elevation-z]) {
-    box-shadow: $box-shadow-default;
-  }
-
-}

package/styles/material/overrides/_form.scss

@@ -1,47 +0,0 @@
-.mat-form-field {
-  display: block !important;
-  .mat-form-field-wrapper {
-    padding: 0;
-    .mat-form-field-flex {
-      padding: 0;
-    }
-    .mat-form-field-infix {
-      padding: 0;
-      border: 0;
-    }
-  }
-  &-underline {
-    display: none;
-  }
-
-  &-disabled {
-    .mat-input-element {
-      @extend .form-field__input--disabled;
-    }
-  }
-
-  &-label {
-    @extend .form-field__label;
-  }
-
-  &-invalid {
-    .mat-input-element,
-    mat-error,
-    mat-date-range-input {
-      @extend .form-field__input--invalid;
-    }
-  }
-
-  &-suffix,
-  [matsuffix] {
-    @extend .form-field__input--suffix;
-  }
-
-  .mat-input-element {
-    @extend .form-field__input;
-  }
-
-  .mat-form-field-subscript-wrapper {
-    margin-top: 0;
-  }
-}

package/styles/material/overrides/_icon.scss

@@ -1,3 +0,0 @@
-mat-icon {
-  @extend .icon;
-}

package/styles/material/overrides/_menu.scss

@@ -1,3 +0,0 @@
-.mat-menu-panel.mat-elevation-z4 {
-  box-shadow: $box-shadow-default;
-}

package/styles/material/overrides/_phone.scss

@@ -1,24 +0,0 @@
-ecabs-phone {
-  @extend .ecabs-phone;
-  .ngx-mat-tel-input-container {
-    .mat-input-element {
-      @extend .ngx-mat-tel-input-input;
-    }
-    .country-selector {
-      @extend .country-selector;
-    }
-  }
-  .form-field.error {
-    .ngx-mat-tel-input-container {
-      @extend .error;
-    }
-  }
-  .disabled {
-    input {
-      @extend .disabled-field;
-    }
-    button {
-      background-color: unset !important;
-    }
-  }
-}

package/styles/material/overrides/_select.scss

@@ -1,48 +0,0 @@
-.mat-select {
-  @extend .select;
-
-  .mat-select-arrow-wrapper {
-    display: unset;
-    vertical-align: auto;
-    transform: none;
-    padding-top: 0.375rem;
-  }
-
-  &-panel-wrap {
-    .mat-select-panel,
-    .mat-select-panel:not([class*='mat-elevation-z']) {
-      box-shadow: 0 0 15px rgba(#6b6d73, 0.24);
-
-      min-width: calc(100% + 32px) !important;
-
-      &[aria-multiselectable='true'] {
-        transform: translate(1.5rem, 0rem) !important;
-      }
-    }
-  }
-}
-
-.mat-form-field-underline {
-  display: none;
-}
-.form-field.error {
-  .mat-select {
-    border-color: var(--color-error);
-  }
-}
-
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.cdk-overlay-transparent-backdrop {
-  opacity: 1;
-}
-
-.wide-select {
-  min-width: calc-rem(240px);
-
-  .mat-list-item {
-    @include fontSize(12px);
-  }
-}
-
-.no-title {
-  transform: translateX(calc-rem(-196px)) !important;
-}