ecabs-components 2.0.0-alpha.2 → 2.0.0-alpha.5

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

@@ -1,4 +1,6 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/index.scss";
+@use "../../../styles/scss/utilities/mixins";
+@use "../../../styles/scss/utilities/fonts";
 
 mat-paginator {
   &.mat-mdc-paginator {
@@ -6,9 +8,9 @@ mat-paginator {
       color: var(--color-gray-500);
 
       .mat-mdc-paginator-range-label {
-        @include fontSize(14px);
+        @include mixins.fontSize(14px);
 
-        font-weight: $font-weight-bold;
+        font-weight: fonts.$font-weight-bold;
         margin: calc-rem(0 32px 0 0);
       }
 
@@ -66,10 +68,10 @@ mat-paginator {
 
 .paginator--selector {
   .mat-mdc-option {
-    @include fontSize($font-size-xs);
+    @include mixins.fontSize(fonts.$font-size-xs);
   }
 
   .mat-mdc-select-value {
-    @include fontSize($font-size-sm);
+    @include mixins.fontSize(fonts.$font-size-sm);
   }
 }

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

@@ -1,15 +1,18 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/index.scss";
+@use "../../../styles/scss/utilities/mixins";
+@use "../../../styles/scss/utilities/fonts";
+@use "../../scss/modules";
 
 ecabs-phone {
-  @extend .ecabs-phone;
+  @extend .ecabs-phone !optional;
 
   .ecabs-tel-input-container {
     .mat-mdc-input-element {
-      @extend .ecabs-tel-input-input;
+      @extend .ecabs-tel-input-input !optional;
     }
 
     .iti__flag-container {
-      @extend .iti__flag-container;
+      @extend .iti__flag-container !optional;
 
       .selected-dial-code {
         padding-right: .2rem;
@@ -25,7 +28,7 @@ ecabs-phone {
     .ecabs-tel-input-container {
       &,
       .iti__flag-container {
-        @extend .form-field__input--invalid;
+        @extend .form-field__input--invalid !optional;
       }
     }
   }
@@ -48,8 +51,8 @@ ecabs-phone {
 
 .ecabs-tel-input-mat-menu-panel {
   .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
-    @include fontSize(14px);
+    @include mixins.fontSize(14px);
 
-    font-weight: $font-weight-regular;
+    font-weight: fonts.$font-weight-regular;
   }
 }

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

@@ -1,4 +1,4 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/index";
 
 mat-progress-bar {
   &.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {

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

@@ -1,8 +1,12 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
+@use "../../scss/utilities/functions";
+@use "../../scss/modules";
 
 .mat-mdc-select {
-  &, &.form-field__select, {
-    @extend .select;
+  &, &.form-field__select {
+    @extend .select !optional;
 
     .mat-mdc-select-arrow {
       border-left: 0;
@@ -10,7 +14,7 @@
     }
 
     .mat-mdc-select-arrow-wrapper {
-      width: calc-rem(16px);
+      width: functions.calc-rem(16px);
       display: unset;
       vertical-align: auto;
       transform: none;
@@ -18,7 +22,7 @@
 
       opacity: 1 !important;
       background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
-      background-size: calc-rem(12px 7.41px);
+      background-size: functions.calc-rem(12px 7.41px);
       background-position: right center;
       background-repeat: no-repeat;
 
@@ -49,7 +53,7 @@
 .form-field--invalid {
   .mat-mdc-form-field .mat-mdc-select,
   .form-field__select.ng-select .ng-select-container {
-    @extend .form-field--invalid;
+    @extend .form-field--invalid !optional;
   }
 }
 
@@ -58,10 +62,10 @@
 }
 
 .wide-select {
-  min-width: calc-rem(240px);
+  min-width: functions.calc-rem(240px);
 
   .mat-mdc-option {
-    @include fontSize(12px);
+    @include mixins.fontSize(12px);
   }
 }
 
@@ -75,7 +79,7 @@
 .form-field__select.ng-select {
   .ng-select-container,
   [class*="form-field__select ng-select"] .ng-select-container {
-    @extend .select;
+    @extend .select !optional;
 
     &:hover {
       box-shadow: unset;
@@ -92,15 +96,15 @@
   }
 
   .ng-clear-wrapper {
-    width: calc-rem(24px);
-    height: calc-rem(24px);
+    width: functions.calc-rem(24px);
+    height: functions.calc-rem(24px);
     text-align: center;
 
     .ng-clear {
-      @include fontSize(24px);
+      @include mixins.fontSize(24px);
 
       color: var(--color-gray-500);
-      font-weight: $font-weight-semibold;
+      font-weight: fonts.$font-weight-semibold;
     }
   }
 
@@ -140,7 +144,7 @@
   }
 
   .ng-dropdown-panel {
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
     border: unset;
 
     &.ng-select-bottom {
@@ -167,7 +171,7 @@
           color: var(--color-brand-dark);
 
           .ng-option-label {
-            font-weight: $font-weight-regular;
+            font-weight: fonts.$font-weight-regular;
           }
         }
       }
@@ -178,8 +182,8 @@
     .ng-arrow {
       border-width: 0;
       border-color: unset;
-      width: calc-rem(12px);
-      height: calc-rem(12px);
+      width: functions.calc-rem(12px);
+      height: functions.calc-rem(12px);
       background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
       background-size: 0.75rem 1rem;
     }

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

@@ -1,6 +1,8 @@
+@use "../../scss/utilities/variables";
+
 .mat-drawer {
   &.mat-drawer-side {
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
     border-right: 0;
   }
 }

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

@@ -1,15 +1,18 @@
+@use "../../scss/utilities/functions";
+@use "../../scss/modules";
+
 .mat-mdc-tab-group {
-  @extend .tab-group;
+  @extend .tab-group !optional;
 
   .mdc-tab {
-    min-width: calc-rem(160px);
+    min-width: functions.calc-rem(160px);
   }
 
   .mat-mdc-tab-labels {
-    @extend .tab-labels;
+    @extend .tab-labels !optional;
 
     .mdc-tab__text-label {
-      @extend .tab-label;
+      @extend .tab-label !optional;
       border-bottom: 0;
     }
   }

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

@@ -1,3 +1,6 @@
+@use "../../scss/utilities/functions";
+@use "../../scss/modules";
+
 .mat-table,
 .mat-mdc-table {
   &, &.table-ui {
@@ -8,12 +11,12 @@
       padding: .36rem .36rem .36rem 0;
 
       &:first-of-type {
-        padding-left: calc-rem(14);
+        padding-left: functions.calc-rem(14);
       }
     }
 
     mat-icon {
-      @extend .icon;
+      @extend .icon !optional;
     }
 
     .mat-mdc-table-sticky {

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

@@ -1,22 +1,24 @@
+@use "../../scss/modules";
+
 #toast-container {
   .ngx-toastr {
-    @extend .toaster__body;
+    @extend .toaster__body !optional;
     box-shadow: unset;
 
     &.toast-success {
-      @extend .success;
+      @extend .success !optional;
     }
 
     &.toast-error {
-      @extend .error;
+      @extend .error !optional;
     }
 
     &.toast-warning {
-      @extend .warning;
+      @extend .warning !optional;
     }
 
     &.toast-info {
-      @extend .info;
+      @extend .info !optional;
     }
 
     &:hover {
@@ -24,7 +26,7 @@
     }
 
     .toast-close-button {
-      @extend .close-button;
+      @extend .close-button !optional;
 
       span {
         display: none;

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

@@ -1,7 +1,9 @@
+@use "../../scss/modules";
+
 .mat-mdc-tooltip.mdc-tooltip {
-  @extend .tooltip;
+  @extend .tooltip !optional;
 
   .mdc-tooltip__surface {
-    @extend .tooltip--surface;
+    @extend .tooltip--surface !optional;
   }
 }

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

@@ -1,22 +1,22 @@
-@import "autocomplete";
-@import "menu";
-@import 'button';
-@import 'card';
-@import 'chip';
-@import 'datepicker';
-@import 'dialog';
-@import 'divider';
-@import 'expansion';
-@import 'form';
-@import 'icon';
-@import 'paginator';
-@import 'phone';
-@import 'select';
-@import 'tab';
-@import 'table';
-@import 'toaster';
-@import 'toggle';
-@import 'toolbar';
-@import 'tooltip';
-@import "sidebar";
-@import "progress";
+@use "autocomplete";
+@use "menu";
+@use 'button';
+@use 'card';
+@use 'chip';
+@use 'datepicker';
+@use 'dialog';
+@use 'divider';
+@use 'expansion';
+@use 'form';
+@use 'icon';
+@use 'paginator';
+@use 'phone';
+@use 'select';
+@use 'tab';
+@use 'table';
+@use 'toaster';
+@use 'toggle';
+@use 'toolbar';
+@use 'tooltip';
+@use "sidebar";
+@use "progress";

package/src/assets/styles/scss/base/_heading.scss

@@ -1,17 +1,20 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+
 .heading {
-  @include m(xs) {
-    @include fontSize($font-heading-xs);
+  @include mixins.m(xs) {
+    @include mixins.fontSize(fonts.$font-heading-xs);
   }
 
-  @include m(sm) {
-    @include fontSize($font-heading-sm);
+  @include mixins.m(sm) {
+    @include mixins.fontSize(fonts.$font-heading-sm);
   }
 
-  @include m(base) {
-    @include fontSize($font-heading-base);
+  @include mixins.m(base) {
+    @include mixins.fontSize(fonts.$font-heading-base);
   }
 
-  @include m(lg) {
-    @include fontSize($font-heading-lg);
+  @include mixins.m(lg) {
+    @include mixins.fontSize(fonts.$font-heading-lg);
   }
 }

package/src/assets/styles/scss/base/_normalize.scss

@@ -1,12 +1,17 @@
+@use "../utilities/functions";
+@use "../utilities/variables";
+@use "../utilities/fonts";
+@use "../utilities/mixins";
+
 * {
   box-sizing: border-box;
 }
 
 html {
-  font-family: $font-family-fallback;
+  font-family: fonts.$font-family-fallback;
 
   &.wf-active {
-    font-family: $font-family-primary;
+    font-family: fonts.$font-family-primary;
   }
 }
 
@@ -33,12 +38,12 @@ ul, ol {
 }
 
 ::-webkit-scrollbar {
-  width: calc-rem(8px);
+  width: functions.calc-rem(8px);
 }
 
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar-thumb {
-  border-radius: $border-radius-base;
+  border-radius: variables.$border-radius-base;
 }
 
 ::-webkit-scrollbar-track {
@@ -63,23 +68,23 @@ input::placeholder {
 }
 
 h1 {
-  @include fontSize($font-heading-lg);
+  @include mixins.fontSize(fonts.$font-heading-lg);
 }
 
 h2 {
-  @include fontSize($font-heading-base);
+  @include mixins.fontSize(fonts.$font-heading-base);
 }
 
 h3 {
-  @include fontSize($font-heading-md);
+  @include mixins.fontSize(fonts.$font-heading-md);
 }
 
 h4 {
-  @include fontSize($font-heading-sm);
+  @include mixins.fontSize(fonts.$font-heading-sm);
 }
 
 h5 {
-  @include fontSize($font-heading-xs);
+  @include mixins.fontSize(fonts.$font-heading-xs);
 }
 
 .mat-body p,

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

@@ -1,2 +1,2 @@
-@import "normalize";
-@import "heading";
+@use "normalize";
+@use "heading";

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

@@ -1,17 +1,21 @@
+@use "../../scss/utilities/variables";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/functions";
+
 .autocomplete-ui {
-  box-shadow: $box-shadow-default;
-  border-radius: $border-radius-base;
+  box-shadow: variables.$box-shadow-default;
+  border-radius: variables.$border-radius-base;
   display: flex;
   flex-direction: column;
 
-  @include m(item) {
-    @include fontSize(16px);
+  @include mixins.m(item) {
+    @include mixins.fontSize(16px);
     width: 100%;
-    padding: calc-rem(16);
+    padding: functions.calc-rem(16);
     color: var(--color-black);
 
     &::after {
-      @extend %pseudos;
+      @extend %pseudos !optional;
 
       bottom: 0;
       left: 0;

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

@@ -1,27 +1,32 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/variables";
+
 .btn {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
   border: 0;
-  min-width: calc-rem(111px);
-  min-height: calc-rem(42px);
+  min-width: functions.calc-rem(111px);
+  min-height: functions.calc-rem(42px);
   width: max-content;
-  padding: calc-rem(8px 24px);
-  font-weight: $font-weight-regular;
-  line-height: $base-line-height;
+  padding: functions.calc-rem(8px 24px);
+  font-weight: fonts.$font-weight-regular;
+  line-height: fonts.$base-line-height;
 
   &:after {
-    @extend %pseudos;
+    @extend %pseudos !optional;
 
     border: 1px solid transparent;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: $border-radius-base;
+    border-radius: variables.$border-radius-base;
   }
 
   // #Primary
-  @include e(primary) {
+  @include mixins.e(primary) {
     background-color: var(--color-brand-dark);
     color: var(--color-white);
 
@@ -29,7 +34,7 @@
       background-color: rgba(var(--color-brand-dark-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-brand-dark);
       color: var(--color-brand-dark);
@@ -43,7 +48,7 @@
       }
     }
 
-    @include m(link) {
+    @include mixins.m(link) {
       @extend .btn__primary--outline;
 
       &:after {
@@ -57,7 +62,7 @@
   }
 
   /* #Secondary */
-  @include e(secondary) {
+  @include mixins.e(secondary) {
     background-color: var(--color-brand-light);
     color: var(--color-white);
 
@@ -65,7 +70,7 @@
       background-color: rgba(var(--color-brand-light-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-brand-light);
       color: var(--color-brand-light);
@@ -79,7 +84,7 @@
       }
     }
 
-    @include m(link) {
+    @include mixins.m(link) {
       @extend .btn__secondary--outline;
 
       &:after {
@@ -89,7 +94,7 @@
   }
 
   /* #Warn */
-  @include e(warn) {
+  @include mixins.e(warn) {
     background-color: var(--color-error);
     color: var(--color-white);
 
@@ -97,7 +102,7 @@
       background-color: rgba(var(--color-error-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-error);
       color: var(--color-error);
@@ -111,7 +116,7 @@
       }
     }
 
-    @include m(link) {
+    @include mixins.m(link) {
       @extend .btn__warn--outline;
 
       &:after {
@@ -121,7 +126,7 @@
   }
 
   /* #Success */
-  @include e(success) {
+  @include mixins.e(success) {
     background-color: var(--color-success);
     color: var(--color-white);
 
@@ -129,7 +134,7 @@
       background-color: rgba(var(--color-success-rgb), .88);
     }
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       background-color: transparent;
       border-color: var(--color-success);
       color: var(--color-success);
@@ -143,7 +148,7 @@
       }
     }
 
-    @include m(link) {
+    @include mixins.m(link) {
       @extend .btn__warn--outline;
 
       &:after {
@@ -153,28 +158,26 @@
   }
 
   /* #Group */
-  @include e(group) {
+  @include mixins.e(group) {
     display: flex;
     width: 100%;
     align-items: center;
     column-gap: 1rem;
+    margin-top: 1.2rem;
 
-    @include media-q(small) {
+    @include mixins.media-q(small) {
       display: flex;
       flex-direction: column;
       gap: 1.2rem;
-    }
-
-    margin-top: 1.2rem;
+    }    
 
     // Button group
-    @include m(item) {
-      @include media-q(small) {
+    @include mixins.m(item) {
+      min-width: functions.calc-rem(100);
+      @include mixins.media-q(small) {
         width: 100%;
         margin-right: 0;
-      }
-
-      min-width: calc-rem(100);
+      }     
 
       &:last-of-type {
         margin-right: 0;
@@ -183,14 +186,14 @@
   }
 
   /* #Disabled */
-  @include e(disabled) {
+  @include mixins.e(disabled) {
     background-color: var(--color-gray-300);
     color: var(--color-gray-400);
     cursor: not-allowed;
     pointer-events: none;
     user-select: none;
 
-    @include m(outline) {
+    @include mixins.m(outline) {
       @extend .btn__disabled;
 
       background-color: transparent;
@@ -210,8 +213,8 @@
   }
 
   /* #Icon */
-  @include e(with-icon) {
-    @include m(wrapper) {
+  @include mixins.e(with-icon) {
+    @include mixins.m(wrapper) {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -224,7 +227,7 @@
   }
 
   /* #Large */
-  @include m(lg) {
-    padding: calc-rem(16 24);
+  @include mixins.m(lg) {
+    padding: functions.calc-rem(16 24);
   }
 }