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

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

@@ -1,53 +1,69 @@
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .chip {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
-  border-radius: $border-radius-base;
+  border-radius: variables.$border-radius-base;
   display: flex;
   width: fit-content;
-  padding: calc-rem(6px 8px);
+  min-width: functions.calc-rem(56px);
+  padding: functions.calc-rem(8px 12px);
   align-items: center;
   justify-content: center;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-gray-50);
   color: var(--color-gray-500);
-  font-weight: $font-weight-regular;
+  font-weight: fonts.$font-weight-regular;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--color-gray-300);
+  }
+
+  @include mixins.e(standard) {
+    width: 7.2rem;
+    max-width: 7.2rem;
+  }
 
   // #Info
-  @include m(info) {
+  @include mixins.m(info) {
     background-color: rgba(var(--color-info-rgb), .06);
     color: var(--color-info);
   }
 
   // #Warn
-  @include m(warn) {
-    background-color: rgba(var(--color-warn-rgb), .06);
-    color: var(--color-warn);
+  @include mixins.m(warn) {
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
   }
 
   // #Danger
-  @include m(danger) {
+  @include mixins.m(danger) {
     background-color: rgba(var(--color-error-rgb), .06);
     color: var(--color-error);
   }
 
   // #Success
-  @include m(success) {
-    background-color: rgba(var(--color-success-rgb), .06);
+  @include mixins.m(success) {
+    background-color: var(--color-success--opacity);
     color: var(--color-success);
   }
 
   // #Selected
-  @include m(selected) {
+  @include mixins.m(selected) {
+    background-color: var(--color-brand-light) !important;
+
     &, * {
-      color: var(--color-white);
+      color: var(--color-white) !important;
       border-color: var(--color-brand-light);
     }
-
-    background-color: var(--color-brand-light);
   }
 
-  @include m(not-selected) {
-    border: 1px solid var(--color-gray-300);
-    background-color: var(--color-white);
-    color: var(--color-black);
+  @include mixins.m(not-selected) {
+    border: 1px solid var(--color-gray-300) !important;
+    background-color: var(--color-white) !important;
+    color: var(--color-black) !important;
   }
 }

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

@@ -1,7 +1,9 @@
-@import "../utilities/index";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+
 
 .datepicker-ui {
-  @include e(toggle) {
+  @include mixins.e(toggle) {
     position: absolute !important;
     right: 0;
     line-height: 1.25;
@@ -27,7 +29,7 @@ ecabs-date-picker {
       flex: 1;
       padding-left: 10px;
       vertical-align: top;
-      max-width: calc-rem(160);
+      max-width: functions.calc-rem(160);
 
       ecabs-timepicker .timeInputWrapper {
         display: block;
@@ -89,7 +91,7 @@ ecabs-date-picker {
       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);
       background-position: center center;
       background-repeat: no-repeat;
-      background-size: calc-rem(22);
+      background-size: functions.calc-rem(22);
 
       &.disabled {
         cursor: not-allowed;

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

@@ -1,15 +1,19 @@
+@use "../utilities/fonts";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .dialog {
-  @include e(title) {
-    @include fontSize($font-heading-xs);
+  @include mixins.e(title) {
+    @include mixins.fontSize(fonts.$font-heading-xs);
 
-    font-weight: $font-weight-semibold;
+    font-weight: fonts.$font-weight-semibold;
     color: var(--color-brand-dark);
-    line-height: $base-line-height;
+    line-height: fonts.$base-line-height;
   }
 
-  @include m(maps) {
+  @include mixins.m(maps) {
     padding: 1px;
-    border-radius: $border-radius-base * 2;
+    border-radius: variables.$border-radius-base * 2;
     background: #9cc0f9;
   }
 }

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

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

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

@@ -1,3 +1,9 @@
+@use "../utilities/helpers";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 $form-input-icon-size: 18px;
 
 .form,
@@ -6,8 +12,8 @@ form {
     margin-bottom: 1rem;
     position: relative;
     // #Label
-    @include e(label) {
-      @include fontSize($font-size-xs);
+    @include mixins.e(label) {
+      @include mixins.fontSize(fonts.$font-size-xs);
 
       display: inline-block;
       margin-bottom: 0.25rem;
@@ -16,17 +22,17 @@ form {
 
 
       .icon {
-        @include fontSize($font-size-base);
+        @include mixins.fontSize(fonts.$font-size-base);
 
         display: inline;
         vertical-align: middle;
-        margin-left: calc-rem(6px);
+        margin-left: functions.calc-rem(6px);
       }
     }
 
     // #Label Note
-    @include e(label-note) {
-      @include fontSize($font-size-sm);
+    @include mixins.e(label-note) {
+      @include mixins.fontSize(fonts.$font-size-md);
 
       display: inline-block;
       margin-bottom: 0.25rem;
@@ -35,59 +41,135 @@ form {
     }
 
     // #Input
-    @include e(input) {
-      @include fontSize($font-size-base);
+    @include mixins.e(input) {
+      @include mixins.fontSize(fonts.$font-size-base);
       display: block;
       width: 100%;
-      padding: calc-rem(8) calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      padding: functions.calc-rem(8px 16px);
+      border-radius: variables.$border-radius-medium;
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
-      line-height: $base-line-height;
+      line-height: fonts.$base-line-height;
 
       &:focus {
         border-color: var(--color-brand-dark);
       }
 
-      @include m(wrapper) {
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include mixins.m(wrapper) {
         // wrapper
         display: flex;
         position: relative;
         line-height: 1;
+
+        @include mixins.m(fluid) {
+          width: fit-content;
+          max-width: 100%;
+          margin-left: auto; // pin the right edge, grow leftward
+          align-items: stretch;
+          overflow: hidden;
+          border: 1px solid var(--color-gray-300);
+          border-radius: variables.$border-radius-medium;
+          background-color: var(--color-white, #fff);
+
+          &:focus-within {
+            border-color: var(--color-brand-dark);
+          }
+
+          .form-field__input {
+            width: auto;
+            min-width: 0;
+            flex: 0 0 auto;
+            box-sizing: border-box;
+            border: 0;
+            border-radius: 0;
+            padding-right: 0;
+            text-align: right;
+            background-color: transparent;
+
+            &:focus {
+              border-color: transparent;
+            }
+          }
+
+          .form-field__input--suffix {
+            position: static !important;
+            top: auto;
+            right: auto;
+            flex: 0 0 auto;
+            display: inline-flex;
+            align-items: center;
+            transform: none;
+            margin-left: functions.calc-rem(4px); // gap between the value and the symbol
+            padding-right: functions.calc-rem(16px);
+            white-space: nowrap;
+            pointer-events: none;
+
+            &,
+            i,
+            .mat-icon {
+              @include mixins.fontSize(fonts.$font-size-base);
+
+              width: auto;
+              height: auto;
+            }
+          }
+        }
+      }
+
+      @include mixins.m(sizer) {
+        @include mixins.fontSize(fonts.$font-size-base);
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 0;
+        padding: 0 0 0 functions.calc-rem(16px);
+        border: 0;
+        box-sizing: border-box;
+        overflow: hidden;
+        visibility: hidden;
+        pointer-events: none;
+        white-space: pre;
+        line-height: fonts.$base-line-height;
       }
 
-      @include m(suffix) {
+      @include mixins.m(suffix) {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-300);
         transform: translateY(-50%);
 
         &,
         i,
         .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
+          @include mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
         }
       }
 
-      @include m(prefix) {
+      @include mixins.m(prefix) {
         // prefix
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: functions.calc-rem(16px);
       }
 
-      @include m(disabled) {
+      @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
       }
 
-      @include m(invalid) {
+      @include mixins.m(invalid) {
         // invalid
         border-color: var(--color-error);
         color: var(--color-error);
@@ -95,71 +177,146 @@ form {
     }
 
     // #Textarea
-    @include e(textarea) {
-      @include fontSize($font-size-base);
+    @include mixins.e(textarea) {
+      @include mixins.fontSize(fonts.$font-size-base);
       display: block;
       width: 100%;
-      padding: calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      padding: functions.calc-rem(16px);
+      border-radius: variables.$border-radius-medium;
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
-      line-height: $base-line-height;
+      line-height: fonts.$base-line-height;
 
       &:focus {
         border-color: var(--color-brand-dark);
       }
 
-      @include m(wrapper) {
+      @include mixins.m(wrapper) {
         // wrapper
         display: flex;
         position: relative;
         line-height: 1;
       }
 
-      @include m(suffix) {
+      @include mixins.m(suffix) {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-100);
         transform: translateY(-50%);
 
         &,
         i,
         .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
+          @include mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
         }
       }
 
-      @include m(prefix) {
+      @include mixins.m(prefix) {
         // prefix
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: functions.calc-rem(16px);
       }
 
-      @include m(disabled) {
+      @include mixins.m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    // #Range
+    @include mixins.e(range) {
+      @include mixins.fontSize(fonts.$font-size-base);
+      display: block;
+      width: 100%;
+      padding: functions.calc-rem(8px 16px);
+      color: var(--color-black);
+      line-height: fonts.$base-line-height;
+      border: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include mixins.m(wrapper) {
+        // wrapper
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        border-radius: functions.calc-rem(variables.$border-radius-large);
+        border: 1px solid var(--color-gray-300);
+        align-items: center;
+        line-height: 1;
+        background-color: var(--color-white);
+
+        &:focus-within {
+          border-color: var(--color-brand-dark);
+        }
+      }
+
+      @include mixins.m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: functions.calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include mixins.fontSize($form-input-icon-size);
+          width: functions.calc-rem($form-input-icon-size);
+          height: functions.calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include mixins.m(prefix) {
+        // prefix
+        @extend .form-field__range--suffix;
+
+        right: unset;
+        left: functions.calc-rem(16px);
+      }
+
+      @include mixins.m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include mixins.m(invalid) {
+        // invalid
+        border-color: var(--color-error) !important;
+        color: var(--color-error) !important;
       }
     }
 
     // #Invalid
-    @include m(invalid) {
+    @include mixins.m(invalid) {
       &,
       .form-field__input,
-      .form-field__textarea {
+      .form-field__textarea,
+      .form-field__range {
         color: var(--color-error);
         border-color: var(--color-error);
       }
+
+      &,
+      .form-field__range--wrapper {
+        border-color: var(--color-error);
+      }
     }
 
     // #Required
-    @include m(required) {
+    @include mixins.m(required) {
       .form-field__label {
         &:after {
           @extend %required;
@@ -168,11 +325,13 @@ form {
     }
 
     // #Validation
-    @include e(validation) {
+    @include mixins.e(validation) {
+      @include mixins.fontSize(fonts.$font-size-xs);
+
       padding-top: 0.5rem;
-      @include fontSize($font-size-xs);
       color: var(--color-error);
-      @include m(item) {
+
+      @include mixins.m(item) {
         padding-bottom: 0.6rem;
 
         &:last-of-type {
@@ -182,20 +341,14 @@ form {
     }
 
     // #Subscript
-    @include e(subscript) {
-      @include m(wrapper) {
+    @include mixins.e(subscript) {
+      @include mixins.m(wrapper) {
         @extend %pseudos;
 
         margin-top: 1.2rem;
       }
     }
 
-    &.disabled input,
-    &.disabled textarea {
-      background-color: var(--color-white-opacity-05);
-      border-color: var(--color-gray-300);
-    }
-
     .spinner {
       position: absolute;
       right: 0.25rem;
@@ -205,7 +358,7 @@ form {
     .hint {
       font-size: 10px;
       text-align: right;
-      margin-right: calc-rem(17px);
+      margin-right: functions.calc-rem(17px);
       transform: translateY(-1rem);
       margin-bottom: -1rem;
     }

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

@@ -1,3 +1,7 @@
+@use "../utilities/helpers";
+@use "../utilities/mixins";
+@use "../utilities/variables";
+
 .icon {
   color: var(--color-gray-500);
 
@@ -5,14 +9,14 @@
     color: var(--color-brand-light);
   }
 
-  @include e(bordered) {
+  @include mixins.e(bordered) {
     @extend .icon;
 
     &:after {
       @extend %pseudos;
 
       border: 1px solid var(--color-gray-400);
-      border-radius: $border-radius-base;
+      border-radius: variables.$border-radius-base;
       width: calc(100% + 0.8rem);
       height: calc(100% + 0.8rem);
       top: -0.4rem;

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;
+      }
+    }
+  }
+}