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

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

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

@@ -1,23 +1,28 @@
+@use "../utilities/variables";
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/functions";
+
 .card {
-  box-shadow: $box-shadow-default;
+  box-shadow: variables.$box-shadow-default;
 
-  @include m(subtitle) {
-    @include fontSize($font-size-sm);
+  @include mixins.m(subtitle) {
+    @include mixins.fontSize(fonts.$font-size-sm);
 
     color: var(--color-gray-500);
   }
 
-  @include m(title) {
-    @include fontSize($font-heading-xs);
+  @include mixins.m(title) {
+    @include mixins.fontSize(fonts.$font-heading-xs);
 
     margin: 0;
     padding-top: 2rem;
     padding-left: 1.5rem;
     color: var(--color-brand-dark);
-    font-weight: $font-weight-semibold;
+    font-weight: fonts.$font-weight-semibold;
   }
 
-  @include e(content) {
-    padding: calc-rem(32 24);
+  @include mixins.e(content) {
+    padding: functions.calc-rem(32 24);
   }
 }

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

@@ -1,53 +1,57 @@
+@use "../utilities/mixins";
+@use "../utilities/fonts";
+@use "../utilities/variables";
+@use "../utilities/functions";
+
 .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);
+  padding: functions.calc-rem(6px 8px);
   align-items: center;
   justify-content: center;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-gray-200) !important;
   color: var(--color-gray-500);
-  font-weight: $font-weight-regular;
+  font-weight: fonts.$font-weight-regular;
 
   // #Info
-  @include m(info) {
-    background-color: rgba(var(--color-info-rgb), .06);
+  @include mixins.m(info) {
+    background-color: rgba(var(--color-info-rgb), .06) !important;
     color: var(--color-info);
   }
 
   // #Warn
-  @include m(warn) {
-    background-color: rgba(var(--color-warn-rgb), .06);
+  @include mixins.m(warn) {
+    background-color: rgba(var(--color-warn-rgb), .06) !important;
     color: var(--color-warn);
   }
 
   // #Danger
-  @include m(danger) {
-    background-color: rgba(var(--color-error-rgb), .06);
+  @include mixins.m(danger) {
+    background-color: rgba(var(--color-error-rgb), .06) !important;
     color: var(--color-error);
   }
 
   // #Success
-  @include m(success) {
-    background-color: rgba(var(--color-success-rgb), .06);
+  @include mixins.m(success) {
+    background-color: rgba(var(--color-success-rgb), .06) !important;
     color: var(--color-success);
   }
 
   // #Selected
-  @include m(selected) {
+  @include mixins.m(selected) {
+    background-color: var(--color-brand-light) !important;
     &, * {
       color: var(--color-white);
       border-color: var(--color-brand-light);
-    }
-
-    background-color: var(--color-brand-light);
+    }    
   }
 
-  @include m(not-selected) {
+  @include mixins.m(not-selected) {
     border: 1px solid var(--color-gray-300);
-    background-color: var(--color-white);
+    background-color: var(--color-white) !important;
     color: var(--color-black);
   }
 }

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

@@ -1,7 +1,10 @@
-@import "../utilities/index";
+@use "../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 +30,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 +92,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/mixins";
+@use "../utilities/fonts";
+@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;
   }
 }