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

package/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.d.ts

@@ -19,11 +19,13 @@ export declare class EcabsExpansionPanelComponent implements OnChanges {
     hideToggle: boolean;
     checked: EventEmitter<boolean>;
     opened: EventEmitter<void>;
+    closed: EventEmitter<void>;
     expansionPanel: MatExpansionPanel;
     toggle: boolean;
     onOpened(): void;
+    onClosed(): void;
     ngOnChanges(changes: SimpleChanges): void;
     toggleAction(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsExpansionPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsExpansionPanelComponent, "ecabs-expansion-panel", never, { "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "actionTitle": { "alias": "actionTitle"; "required": false; }; "index": { "alias": "index"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showErrorMessage": { "alias": "showErrorMessage"; "required": false; }; "closePanel": { "alias": "closePanel"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showStatus": { "alias": "showStatus"; "required": false; }; "status": { "alias": "status"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; }, { "checked": "checked"; "opened": "opened"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsExpansionPanelComponent, "ecabs-expansion-panel", never, { "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "actionTitle": { "alias": "actionTitle"; "required": false; }; "index": { "alias": "index"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showErrorMessage": { "alias": "showErrorMessage"; "required": false; }; "closePanel": { "alias": "closePanel"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showStatus": { "alias": "showStatus"; "required": false; }; "status": { "alias": "status"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; }, { "checked": "checked"; "opened": "opened"; "closed": "closed"; }, never, ["*"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.5",
   "peerDependencies": {
     "@angular/animations": "^19.2.17",
     "@angular/common": "^19.2.17",

package/src/assets/styles/material/_theme.scss

@@ -3,8 +3,8 @@
 @use '@angular/material' as mat;
 
 // Plus imports for other components in your app.
-@import '../scss/utilities/index';
-@import 'overrides/index';
+@use '../scss/utilities/fonts';
+@use './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.
@@ -60,24 +60,24 @@ $cuorium-warn: mat.m2-define-palette($mat-warning);
 // Define a custom typography config that overrides the font-family as well as the
 // `headlines` and `body-1` levels.
 $custom-typography: mat.m2-define-typography-config(
-  $font-family: $font-family-primary,
+  $font-family: fonts.$font-family-primary,
   $body-1: mat.m2-define-typography-level(
-      $font-size-base,
-      $base-line-height,
-      $font-weight-regular,
+      fonts.$font-size-base,
+      fonts.$base-line-height,
+      fonts.$font-weight-regular,
     $letter-spacing: normal,
-    $font-family: $font-family-primary,
+    $font-family: fonts.$font-family-primary,
   ),
   $button: mat.m2-define-typography-level(
-      $font-size-base,
+      fonts.$font-size-base,
     $letter-spacing: normal,
   ),
   $body-2: mat.m2-define-typography-level(
-      $font-size-base,
-      $base-line-height,
-      $font-weight-regular,
+      fonts.$font-size-base,
+      fonts.$base-line-height,
+      fonts.$font-weight-regular,
     $letter-spacing: normal,
-    $font-family: $font-family-primary,
+    $font-family: fonts.$font-family-primary,
   )
 );
 

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

@@ -1,11 +1,13 @@
+@use "../../scss/modules";
+
 .ecabs-autocomplete {
   .mat-mdc-autocomplete-panel {
-    @extend .autocomplete-ui;
+    @extend .autocomplete-ui !optional;
 
     margin-top: 0.2rem;
 
     .mat-mdc-option {
-      @extend .autocomplete-ui--item;
+      @extend .autocomplete-ui--item !optional;
     }
   }
 }

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

@@ -1,11 +1,13 @@
+@use "../../scss/modules";
+
 button,
 a {
   &.mdc-button {
-    @extend .btn;
+    @extend .btn !optional;
 
     &.btn__group--item,
     &.btn {
-      @extend .btn__group--item;
+      @extend .btn__group--item !optional;
     }
 
     .mat-icon {
@@ -14,55 +16,55 @@ a {
   }
 
   &.mdc-button.mat-primary {
-    @extend .btn__primary;
+    @extend .btn__primary !optional;
   }
 
   &.mdc-button--outlined.mat-primary {
-    @extend .btn__primary--outline;
+    @extend .btn__primary--outline !optional;
 
-    border: 0;
+    border: 1px solid;
   }
 
   &.mdc-button.mat-accent {
-    @extend .btn__secondary;
+    @extend .btn__secondary !optional;
   }
 
   &.mdc-button--outlined.mat-accent {
-    @extend .btn__secondary--outline;
+    @extend .btn__secondary--outline !optional;
 
-    border: 0;
+    border: 1px solid;
   }
 
   &.mdc-button.mat-warn {
-    @extend .btn__warn;
+    @extend .btn__warn !optional;
   }
 
   &.mdc-button--outlined.mat-warn {
-    @extend .btn__warn--outline;
+    @extend .btn__warn--outline !optional;
 
-    border: 0;
+    border: 1px solid;
   }
 
   &.mdc-button.mat-success {
-    @extend .btn__success;
+    @extend .btn__success !optional;
   }
 
   &.mdc-button--outlined.mat-success {
-    @extend .btn__success--outline;
+    @extend .btn__success--outline !optional;
 
-    border: 0;
+    border: 1px solid;
   }
 
   &.mat-mdc-unelevated-button:disabled {
-    @extend .btn__disabled;
+    @extend .btn__disabled !optional;
   }
 
   &.mat-mdc-outlined-button:disabled {
-    @extend .btn__disabled--outline;
+    @extend .btn__disabled--outline !optional;
   }
 
   .mdc-button__label {
-    @extend .btn__with-icon--wrapper;
+    @extend .btn__with-icon--wrapper !optional;
   }
 
   &.mat-mdc-icon-button {

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

@@ -1,17 +1,19 @@
+@use "../../scss/modules";
+
 .mat-mdc-card {
   &.mdc-card {
-    @extend .card;
+    @extend .card !optional;
 
     .mat-mdc-card-subtitle {
-      @extend .card--subtitle;
+      @extend .card--subtitle !optional;
     }
 
     .mat-mdc-card-title {
-      @extend .card--title;
+      @extend .card--title !optional;
     }
 
     .mat-mdc-card-content {
-      @extend .card__content;
+      @extend .card__content !optional;
     }
   }
 }

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

@@ -1,3 +1,6 @@
+@use "../../scss/modules/chip";
+@use "../../scss/modules/statuses";
+
 .mdc-evolution-chip {
   &,
   &.mat-mdc-standard-chip {
@@ -40,23 +43,23 @@
     }
 
     &.cab_arrived_at_pickup {
-      @extend .cab_arrived_at_pickup;
+      @extend .cab_arrived_at_pickup ;
     }
 
     &.cancelled {
-      @extend .cancelled;
+      @extend .cancelled ;
     }
 
     &.completed, &.done {
-      @extend .completed;
+      @extend .completed ;
     }
 
     &.dispatched  {
-      @extend .dispatched;
+      @extend .dispatched ;
     }
 
     &.in_progress {
-      @extend .in_progress;
+      @extend .in_progress ;
     }
 
     &.dropped_off {
@@ -77,19 +80,19 @@
     }
 
     &.reserved, &.scheduled, &.ended {
-      @extend .reserved;
+      @extend .reserved ;
     }
 
     &.trip_ended {
-      @extend .trip_ended;
+      @extend .trip_ended ;
     }
 
     &.trip_ongoing {
-      @extend .trip_ongoing;
+      @extend .trip_ongoing ;
     }
 
     &.trip_started, &.started {
-      @extend .trip_started;
+      @extend .trip_started ;
     }
 
     &.blacklisted {

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

@@ -1,4 +1,8 @@
-@import "../../scss/utilities/index";
+@use "../../scss/utilities/index";
+@use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/variables";
+@use "../../scss/modules";
 
 .header {
   display: flex;
@@ -12,8 +16,8 @@
 
 .datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base {
   padding: 0;
-  width: calc-rem(40px);
-  height: calc-rem(40px);
+  width: functions.calc-rem(40px);
+  height: functions.calc-rem(40px);
   line-height: 2;
 }
 
@@ -101,7 +105,7 @@
   }
 
   .mat-calendar-table-header th {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-table-header-divider::after {
@@ -109,7 +113,7 @@
   }
 
   .mat-calendar-body {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-body-in-range {
@@ -132,7 +136,7 @@
 .mat-datepicker-popup {
   .mat-datepicker-content {
     color: var(--color-black);
-    box-shadow: $box-shadow-large;
+    box-shadow: variables.$box-shadow-large;
   }
 
   .mat-datepicker-actions {

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

@@ -1,7 +1,10 @@
+@use "../../scss/utilities/functions";
+@use "../../scss/modules";
+
 .mat-mdc-dialog-container {
   .mdc-dialog__container {
     .mdc-dialog__title {
-      @extend .dialog__title;
+      @extend .dialog__title !optional;
 
       &::before {
         height: unset;
@@ -9,7 +12,7 @@
     }
 
     .mdc-dialog__actions {
-      padding: calc-rem(0 24px 24px);
+      padding: functions.calc-rem(0 24px 24px);
       justify-content: end !important;
     }
 
@@ -20,6 +23,6 @@
 }
 
 .dialog--maps .mdc-dialog__container {
-  @extend .dialog--maps;
+  @extend .dialog--maps !optional;
 }
 

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

@@ -1,3 +1,5 @@
+@use "../../scss/modules";
+
 .mat-divider {
-  @extend .divider;
+  @extend .divider !optional;
 }

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

@@ -1,18 +1,23 @@
+@use "../../scss/utilities/mixins";
+@use "../../scss/utilities/fonts";
+@use "../../scss/utilities/variables";
+@use "../../scss/utilities/functions";
+
 .example-headers-align .mat-expansion-panel-header-title {
-  @include fontSize($font-heading-xs);
+  @include mixins.fontSize(fonts.$font-heading-xs);
 
   color: var(--color-brand-dark);
-  font-weight: $font-weight-semibold;
+  font-weight: fonts.$font-weight-semibold;
   line-height: 32px;
   white-space: nowrap;
 }
 
 .mat-accordion {
   .mat-expansion-panel {
-    padding: calc-rem(24 24 0 24);
+    padding: functions.calc-rem(24 24 0 24);
 
     .mat-expansion-panel-header {
-      padding: calc-rem(0 0 24 0);
+      padding: functions.calc-rem(0 0 24 0);
 
       &:hover {
         background: unset !important;
@@ -20,13 +25,12 @@
     }
 
     .mat-expansion-panel-body {
-      padding: calc-rem(0 0 16 0);
+      padding: functions.calc-rem(0 0 16 0);
     }
   }
 
   .mat-expansion-panel:not([class*=mat-elevation-z]) {
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
     overflow: visible;
   }
-
 }

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

@@ -1,4 +1,7 @@
-@import "../../../styles/scss/utilities/helpers";
+@use "../../../styles/scss/utilities/helpers";
+@use "../../../styles/scss/utilities/mixins";
+@use "../../../styles/scss/utilities/fonts";
+@use "../../scss/modules";
 
 .mat-mdc-form-field {
   display: block !important;
@@ -28,29 +31,29 @@
 
   &-disabled {
     .mat-mdc-input-element {
-      @extend .form-field__input--disabled;
+      @extend .form-field__input--disabled !optional;
     }
   }
 
   &-label {
-    @extend .form-field__label;
+    @extend .form-field__label !optional;
   }
 
   &-invalid {
     .mat-mdc-input-element,
     mat-error,
     mat-date-range-input {
-      @extend .form-field__input--invalid;
+      @extend .form-field__input--invalid !optional;
     }
   }
 
   &-suffix,
   [matsuffix] {
-    @extend .form-field__input--suffix;
+    @extend .form-field__input--suffix !optional;
   }
 
   .mat-mdc-input-element {
-    @extend .form-field__input;
+    @extend .form-field__input !optional;
   }
 
   .mat-form-field-subscript-wrapper {
@@ -61,7 +64,7 @@
 .mat-mdc-slide-toggle-label,
 .mat-mdc-checkbox .mdc-form-field .mdc-label,
 .mat-mdc-radio-button .mdc-form-field .mdc-label {
-  @include fontSize($font-size-base);
+  @include mixins.fontSize(fonts.$font-size-base);
 
   margin-bottom: 0;
   color: var(--color-black);
@@ -79,7 +82,7 @@
   .form-field__label {
     &:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {
       &:after {
-        @extend %required;
+        @extend %required !optional;
       }
     }
   }

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

@@ -1,3 +1,5 @@
+@use "../../scss/modules";
+
 mat-icon {
-  @extend .icon;
+  @extend .icon !optional;
 }

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

@@ -1,6 +1,8 @@
+@use "../../scss/utilities/variables";
+
 .mat-mdc-menu-panel {
   &.mat-mdc-elevation-specific.mat-elevation-z8 {
-    box-shadow: $box-shadow-default;
+    box-shadow: variables.$box-shadow-default;
   }
 }
 

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