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

package/src/assets/styles/scss/modules/_badge.scss

@@ -0,0 +1,115 @@
+@use "../utilities/fonts";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  max-width: var(--badge-max-width, 100%);
+  border: 1px solid transparent;
+  border-radius: variables.$border-radius-base;
+  font-weight: fonts.$font-weight-medium;
+  line-height: 1;
+  white-space: nowrap;
+
+  @include mixins.e(icon) {
+    color: inherit;
+    flex: none;
+
+    width: var(--badge-icon-size);
+    height: var(--badge-icon-size);
+    font-size: var(--badge-icon-size);
+    line-height: var(--badge-icon-size);
+
+
+    @include mixins.m(slot) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &:empty {
+        display: none;
+      }
+
+      > * {
+        width: var(--badge-icon-size);
+        height: var(--badge-icon-size);
+        font-size: var(--badge-icon-size);
+        line-height: var(--badge-icon-size);
+        color: inherit;
+      }
+    }
+  }
+
+  @include mixins.e(label) {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    line-height: calc(4 / 3);
+  }
+
+  /* #Sizes */
+  @include mixins.m(small) {
+    @include mixins.badge-size(1px, 6px, fonts.$font-size-xs, 12px);
+  }
+
+  @include mixins.m(medium) {
+    @include mixins.badge-size(3px, 8px, fonts.$font-size-xs, 12px);
+  }
+
+  @include mixins.m(large) {
+    @include mixins.badge-size(6px, 12px, fonts.$font-size-md, 16px);
+  }
+
+  /* #Variants */
+  @include mixins.m(default) {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-600);
+  }
+
+  @include mixins.m(success) {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
+  }
+
+  @include mixins.m(warning) {
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
+  }
+
+  @include mixins.m(danger) {
+    background-color: var(--color-error-opacity);
+    color: var(--color-error);
+  }
+
+  @include mixins.m(info) {
+    background-color: rgba(var(--color-info-rgb), 0.06);
+    color: var(--color-info);
+  }
+
+  @include mixins.m(bordered) {
+    &.badge--default {
+      border-color: var(--color-default-border);
+    }
+
+    &.badge--success {
+      border-color: var(--color-success-border);
+    }
+
+    &.badge--warning {
+      border-color: var(--color-warning-border);
+    }
+
+    &.badge--danger {
+      border-color: var(--color-error-border);
+    }
+
+    &.badge--info {
+      border-color: var(--color-info-border);
+    }
+  }
+}

package/src/assets/styles/scss/modules/_datepicker.scss

@@ -1,4 +1,3 @@
-@use "../utilities/index";
 @use "../utilities/functions";
 @use "../utilities/mixins";
 

package/src/assets/styles/scss/modules/_divider.scss

@@ -1,4 +1,4 @@
-.divider {
-  border-top-color: var(--color-gray-100);
-  color: var(--color-gray-100);
-}
+.divider {
+  border-top-color: var(--color-gray-100);
+  color: var(--color-gray-100);
+}

package/src/assets/styles/scss/modules/_img.scss

@@ -1,32 +1,32 @@
-.aspect-ratio {
-  position: relative;
-  display: inline-block;
-  background-color: inherit;
-  line-height: 1;
-  overflow: hidden;
-
-  // ***************************
-  // #Content
-  // ***************************/
-  &__content { //** Fallback
-    position: absolute;
-    top: 50%;
-    right: 0;
-    bottom: 0;
-    left: 50%;
-    max-width: 100%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-
-    @supports (object-fit: cover) {
-      &--cover { // cover
-        position: static;
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        object-fit: cover;
-        transform: none;
-      }
-    }
-  }
-}
+.aspect-ratio {
+  position: relative;
+  display: inline-block;
+  background-color: inherit;
+  line-height: 1;
+  overflow: hidden;
+
+  // ***************************
+  // #Content
+  // ***************************/
+  &__content { //** Fallback
+    position: absolute;
+    top: 50%;
+    right: 0;
+    bottom: 0;
+    left: 50%;
+    max-width: 100%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+
+    @supports (object-fit: cover) {
+      &--cover { // cover
+        position: static;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        object-fit: cover;
+        transform: none;
+      }
+    }
+  }
+}

package/src/assets/styles/scss/modules/_map.scss

@@ -1,4 +1,3 @@
-@use "../../scss/utilities/index";
 @use "../utilities/fonts";
 @use "../utilities/functions";
 @use "../utilities/mixins";

package/src/assets/styles/scss/modules/_percentage.scss

@@ -1,41 +1,41 @@
-.percentage {
-  &__over-87 {
-    background-color: #25BD3D;
-    border-color: #25BD3D;
-  }
-
-  &__over-75 {
-    background-color: #87C337;
-    border-color: #87C337;
-  }
-
-  &__over-62 {
-    background-color: #BAC61C;
-    border-color: #BAC61C;
-  }
-
-  &__over-50 {
-    background-color: #ECC902;
-    border-color: #ECC902;
-  }
-
-  &__over-37 {
-    background-color: #EBA70D;
-    border-color: #EBA70D;
-  }
-
-  &__over-25 {
-    background-color: #E7831B;
-    border-color: #E7831B;
-  }
-
-  &__over-12 {
-    background-color: #E35E2A;
-    border-color: #E35E2A;
-  }
-
-  &__default {
-    background-color: #DF3838;
-    border-color: #DF3838;
-  }
-}
+.percentage {
+  &__over-87 {
+    background-color: #25BD3D;
+    border-color: #25BD3D;
+  }
+
+  &__over-75 {
+    background-color: #87C337;
+    border-color: #87C337;
+  }
+
+  &__over-62 {
+    background-color: #BAC61C;
+    border-color: #BAC61C;
+  }
+
+  &__over-50 {
+    background-color: #ECC902;
+    border-color: #ECC902;
+  }
+
+  &__over-37 {
+    background-color: #EBA70D;
+    border-color: #EBA70D;
+  }
+
+  &__over-25 {
+    background-color: #E7831B;
+    border-color: #E7831B;
+  }
+
+  &__over-12 {
+    background-color: #E35E2A;
+    border-color: #E35E2A;
+  }
+
+  &__default {
+    background-color: #DF3838;
+    border-color: #DF3838;
+  }
+}

package/src/assets/styles/scss/modules/_statuses.scss

@@ -1,36 +1,36 @@
-.pending {
-  background-color: var(--color-gray-300);
-  color: var(--color-gray-400);
-}
-
-.reserved {
-  background-color: var(--color-warning-opacity);
-  color: var(--color-warning);
-}
-
-.scheduled, .ended {
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-500);
-}
-
-.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
-.cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress, .published {
-  background-color: rgba(var(--color-info-rgb), .05);
-  color: var(--color-info);
-}
-
-.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
-  background-color: var(--color-success--opacity);
-  color: var(--color-success);
-}
-
-.cancelled, .rejected, .suspended, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
-  background-color: var(--color-error-opacity);
-  color: var(--color-error);
-}
-
-
-.archived {
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-600);
-}
+.pending {
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-400);
+}
+
+.reserved {
+  background-color: var(--color-warning-opacity);
+  color: var(--color-warning);
+}
+
+.scheduled, .ended {
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-500);
+}
+
+.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
+.cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress, .published {
+  background-color: rgba(var(--color-info-rgb), .05);
+  color: var(--color-info);
+}
+
+.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
+  background-color: var(--color-success--opacity);
+  color: var(--color-success);
+}
+
+.cancelled, .rejected, .suspended, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
+  background-color: var(--color-error-opacity);
+  color: var(--color-error);
+}
+
+
+.archived {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-600);
+}

package/src/assets/styles/scss/modules/_toaster.scss

@@ -1,53 +1,53 @@
-.toaster__body {
-  padding: 1.5rem 4rem 1.5rem 1.5rem;
-  border-radius: 4px;
-
-  &.success {
-    background-color: var(--color-success--opacity);
-    color: var(--color-success);
-
-    .close-button {
-      color: var(--color-success);
-    }
-  }
-
-  &.error {
-    background-color: var(--color-error-opacity);
-    color: var(--color-error);
-
-    .close-button {
-      color: var(--color-error);
-    }
-  }
-
-  &.warning {
-    background-color: var(--color-warning-opacity);
-    color: var(--color-warning);
-
-    .close-button {
-      color: var(--color-warning);
-    }
-  }
-
-  &.info {
-    background-color: rgba(var(--color-info-rgb), .05);
-    color: var(--color-info);
-
-    .close-button {
-      color: var(--color-info);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    right: 1.75rem;
-    top: calc(50% - 1rem);
-    font-family: 'Material Icons';
-    font-weight: 200;
-    font-size: 21px;
-
-    &::before {
-      content: 'close';
-    }
-  }
-}
+.toaster__body {
+  padding: 1.5rem 4rem 1.5rem 1.5rem;
+  border-radius: 4px;
+
+  &.success {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
+
+    .close-button {
+      color: var(--color-success);
+    }
+  }
+
+  &.error {
+    background-color: var(--color-error-opacity);
+    color: var(--color-error);
+
+    .close-button {
+      color: var(--color-error);
+    }
+  }
+
+  &.warning {
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
+
+    .close-button {
+      color: var(--color-warning);
+    }
+  }
+
+  &.info {
+    background-color: rgba(var(--color-info-rgb), .05);
+    color: var(--color-info);
+
+    .close-button {
+      color: var(--color-info);
+    }
+  }
+
+  .close-button {
+    position: absolute;
+    right: 1.75rem;
+    top: calc(50% - 1rem);
+    font-family: 'Material Icons';
+    font-weight: 200;
+    font-size: 21px;
+
+    &::before {
+      content: 'close';
+    }
+  }
+}

package/src/assets/styles/scss/modules/index.scss

@@ -1,23 +1,24 @@
-@use 'button';
-@use 'card';
-@use 'chip';
-@use 'datepicker';
-@use 'dialog';
-@use 'divider';
-@use 'drag-drop';
-@use 'form';
-@use 'icon';
-@use 'img';
-@use 'legend';
-@use 'list';
-@use 'map';
-@use 'phone';
-@use 'select';
-@use 'statuses';
-@use 'tab';
-@use 'table';
-@use 'timepicker';
-@use 'toaster';
-@use 'tooltip';
-@use 'percentage';
-@use 'autocomplete';
+@forward 'badge';
+@forward 'button';
+@forward 'card';
+@forward 'chip';
+@forward 'datepicker';
+@forward 'dialog';
+@forward 'divider';
+@forward 'drag-drop';
+@forward 'form';
+@forward 'icon';
+@forward 'img';
+@forward 'legend';
+@forward 'list';
+@forward 'map';
+@forward 'phone';
+@forward 'select';
+@forward 'statuses';
+@forward 'tab';
+@forward 'table';
+@forward 'timepicker';
+@forward 'toaster';
+@forward 'tooltip';
+@forward 'percentage';
+@forward 'autocomplete';

package/src/assets/styles/scss/utilities/_colors.scss

@@ -30,6 +30,7 @@
   /* #Accent */
   --color-error: #bb032a;
   --color-error-opacity: #FFF0EE;
+  --color-error-border: #FFCDC6;
   --color-error-rgb: 223, 56, 56;
 
   --color-notification: #f4d04f;
@@ -38,14 +39,19 @@
   --color-info: #325fda;
   --color-info-rgb: 50, 95, 218;
   --color-info-messages: #e3e9f3;
+  --color-info-border: #D1D8F7;
 
   --color-warning: #845201;
   --color-warning-opacity: #FDF2DC;
+  --color-warning-border: #FBE5B6;
 
   --color-success: #166C3B;
   --color-success--opacity: #EAF6ED;
+  --color-success-border: #CEEAD5;
   --color-success-rgb: 7, 81, 69;
 
+  --color-default-border: #D5E1ED;
+
   --color-allocation-started: #E8F8E5;
   --color-allocation-scheduled: #FDF0E4;
   --color-allocation-ended: #FBE4E4;

package/src/assets/styles/scss/utilities/_fonts.scss

@@ -1,31 +1,31 @@
-// #Family
-$font-family-primary: 'Segment', 'sans-serif';
-$font-family-fallback: 'Lato', sans-serif;
-
-// #Weights
-$font-weight-thin: 300;
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-$font-weight-extra-bold: 800;
-
-// #Sizes
-$font-size-xs: 12px;
-$font-size-sm: 13px;
-$font-size-md: 14px;
-$font-size-base: 16px;
-$font-size-lg: 18px;
-
-$font-heading-xs: 22px;
-$font-heading-sm: 28px;
-$font-heading-md: 32px;
-$font-heading-base: 34px;
-$font-heading-lg: 36px;
-
-// Height
-$base-line-height: 1.5;
-
-:root {
-  --mat-option-label-text-size: #{$font-size-sm};
-}
+// #Family
+$font-family-primary: 'Segment', 'sans-serif';
+$font-family-fallback: 'Lato', sans-serif;
+
+// #Weights
+$font-weight-thin: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extra-bold: 800;
+
+// #Sizes
+$font-size-xs: 12px;
+$font-size-sm: 13px;
+$font-size-md: 14px;
+$font-size-base: 16px;
+$font-size-lg: 18px;
+
+$font-heading-xs: 22px;
+$font-heading-sm: 28px;
+$font-heading-md: 32px;
+$font-heading-base: 34px;
+$font-heading-lg: 36px;
+
+// Height
+$base-line-height: 1.5;
+
+:root {
+  --mat-option-label-text-size: #{$font-size-sm};
+}

package/src/assets/styles/scss/utilities/_helpers.scss

@@ -1,14 +1,14 @@
-// For Pseudo Elements
-%pseudos {
-  position: absolute;
-  content: '';
-}
-
-%required {
-  @extend %pseudos;
-
-  content: '*' !important;
-  margin-left: 0.2rem;
-  margin-top: 2px;
-  color: var(--color-error);
-}
+// For Pseudo Elements
+%pseudos {
+  position: absolute;
+  content: '';
+}
+
+%required {
+  @extend %pseudos;
+
+  content: '*' !important;
+  margin-left: 0.2rem;
+  margin-top: 2px;
+  color: var(--color-error);
+}

package/src/assets/styles/scss/utilities/_mixins.scss

@@ -84,6 +84,13 @@
   text-align: center;
 }
 
+@mixin badge-size($padding-y, $padding-x, $font-size, $icon-size) {
+  --badge-icon-size: #{$icon-size};
+  padding: $padding-y $padding-x;
+
+  @include fontSize($font-size);
+}
+
 // Step for the button-toggle size scale, applied to Material's toggle internals.
 @mixin toggle-size($height, $min-width, $font-size, $padding-x) {
   .mat-button-toggle {

package/src/assets/styles/scss/utilities/index.scss

@@ -1,6 +1,6 @@
-@use "variables";
-@use "functions";
-@use "colors";
-@use "fonts";
-@use "helpers";
-@use "mixins";
+@forward "variables";
+@forward "functions";
+@forward "colors";
+@forward "fonts";
+@forward "helpers";
+@forward "mixins";

package/src/assets/styles/styles.scss

@@ -1,5 +1,5 @@
 @use "material/theme";
-@use "scss/modules/index";
-@use "scss/utilities/index" as index2;
-@use "scss/base/index" as index3;
-@use "tailwind/index" as index4;
+@use "scss/modules/index" as modules;
+@use "scss/utilities/index" as utilities;
+@use "scss/base/index" as base;
+@use "tailwind/index" as tailwind;