ecabs-components 0.0.63 → 0.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",

package/styles/material/_theme.scss

@@ -0,0 +1,99 @@
+// 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

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

package/styles/material/overrides/_button.scss

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,108 @@
+.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

@@ -0,0 +1,169 @@
+@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

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

package/styles/material/overrides/_divider.scss

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

package/styles/material/overrides/_expansion.scss

@@ -0,0 +1,31 @@
+.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

@@ -0,0 +1,52 @@
+.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;
+  }
+}
+
+
+label {
+  @extend .form-field__label;
+}

package/styles/material/overrides/_icon.scss

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

package/styles/material/overrides/_menu.scss

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

package/styles/material/overrides/_phone.scss

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,70 @@
+.mat-select {
+  @extend .select;
+
+  .mat-select-arrow {
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .mat-select-arrow-wrapper {
+    width: calc-rem(16px);
+    display: unset;
+    vertical-align: auto;
+    transform: none;
+    padding-top: 0.375rem;
+
+    opacity: 1;
+    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;
+  }
+
+  &-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;
+      }
+    }
+  }
+}
+
+ecabs-select .mat-select .mat-select-value {
+  font-size: 1rem;
+}
+
+ecabs-select .mat-select {
+  &, .mat-option {
+    font-size: 1rem;
+  }
+}
+
+.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;
+}