ecabs-components 1.1.63 → 1.1.64

package/lib/base/utils/phone-number.utils.d.ts

@@ -0,0 +1,4 @@
+import { PhoneNumberCodeType } from "../models/phone.models";
+export declare function extractPhoneNumberCode(phoneNumber: string | null, type?: PhoneNumberCodeType, withFlagClass?: boolean): string | null;
+export declare function extractDialingCode(phoneNumber: string | null): string | null;
+export declare function extractCountryFromIso(isoCode: string | null, region?: string[]): string | null;

package/lib/ecabs-chip-autocomplete/ecabs-chip-autocomplete.component.d.ts

@@ -25,7 +25,6 @@ export declare class EcabsChipAutocompleteComponent<T = unknown> extends EcabsEl
     private readonly _term;
     private readonly destroyRef;
     protected readonly overlayPanelClass = "ecabs-chip-autocomplete-overlay-panel";
-    protected readonly isDisabled: import("@angular/core").WritableSignal<boolean>;
     protected readonly selectedOptions: import("@angular/core").Signal<SelectOption<T>[]>;
     protected readonly filteredOptions: import("@angular/core").Signal<SelectOption<T>[]>;
     protected readonly noMatchResult: import("@angular/core").Signal<boolean>;
@@ -38,6 +37,7 @@ export declare class EcabsChipAutocompleteComponent<T = unknown> extends EcabsEl
     writeValue(value: T[] | null): void;
     registerOnChange(fn: typeof this.onChange): void;
     registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     blur(): void;
     private onChange;
     private onTouched;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.63",
+  "version": "1.1.64",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",

package/public-api.d.ts

@@ -137,6 +137,7 @@ export * from './lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.mod
 export * from './lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.component';
 export * from './lib/base/services/ecabs-date-picker-translations.service';
 export * from './lib/base/utils/object-utils';
+export * from './lib/base/utils/phone-number.utils';
 export * from './lib/base/consts/buttons.consts';
 export * from './lib/base/adapters/date.adapter';
 export * from './lib/base/consts/waypoint.consts';

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

@@ -15,6 +15,10 @@ ecabs-chip-autocomplete {
     margin-left: unset;
     border-radius: calc-rem($border-radius-large);
   }
+
+  .form-field {
+    margin-bottom: unset;
+  }
 }
 
 .ecabs-chip-autocomplete-overlay-panel {

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

@@ -13,46 +13,102 @@ a {
     }
   }
 
+  /**
+ * #Basic
+ */
+  &.mdc-button.mat-mdc-button {
+    @extend .btn--basic;
+  }
+
+  &.mdc-button--outlined {
+    @extend .btn--basic--outline;
+
+    border: 0;
+  }
+
+  &.mdc-button.mat-mdc-button {
+    @extend .btn--basic--link;
+  }
+
+  &.mdc-button.mat-mdc-button:disabled {
+    @extend .btn__disabled--outline;
+
+    &:after {
+      border: 0;
+    }
+  }
+
+  /**
+  * #Primary
+  */
   &.mdc-button.mat-primary {
-    @extend .btn__primary;
+    @extend .btn--primary;
   }
 
   &.mdc-button--outlined.mat-primary {
-    @extend .btn__primary--outline;
+    @extend .btn--primary--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-primary {
+    @extend .btn--primary--link;
+  }
+
+  /**
+  * #Secondary
+  */
+
   &.mdc-button.mat-accent {
-    @extend .btn__secondary;
+    @extend .btn--secondary;
   }
 
   &.mdc-button--outlined.mat-accent {
-    @extend .btn__secondary--outline;
+    @extend .btn--secondary--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-accent {
+    @extend .btn--secondary--link;
+  }
+
+  /**
+  * #Warn
+  */
+
   &.mdc-button.mat-warn {
-    @extend .btn__warn;
+    @extend .btn--warn;
   }
 
   &.mdc-button--outlined.mat-warn {
-    @extend .btn__warn--outline;
+    @extend .btn--warn--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-warn {
+    @extend .btn--warn--link;
+  }
+
+  /**
+ * #Success
+ */
+
   &.mdc-button.mat-success {
-    @extend .btn__success;
+    @extend .btn--success;
   }
 
   &.mdc-button--outlined.mat-success {
-    @extend .btn__success--outline;
+    @extend .btn--success--outline;
 
     border: 0;
   }
 
+  &.mat-mdc-button.mat-success {
+    @extend .btn--success--link;
+  }
+
   &.mat-mdc-unelevated-button:disabled {
     @extend .btn__disabled;
   }

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

@@ -25,5 +25,31 @@
     .mat-divider:not(.card__title--divider) {
       margin-top: calc-rem(24px);
     }
+
+    .card--inset {
+      .mat-divider {
+        margin-top: 0;
+        border-top-color: var(--color-gray-200);
+        color: var(--color-gray-200);
+      }
+
+      .form-field {
+        margin-bottom: 0;
+      }
+
+      .mdc-button.mat-mdc-button {
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+        min-width: auto;
+        height: fit-content;
+        min-height: fit-content;
+        line-height: 1;
+
+        .mat-mdc-button-persistent-ripple::before {
+          background-color: transparent;
+        }
+      }
+    }
   }
 }

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

@@ -2,6 +2,7 @@
   &,
   &.mat-mdc-standard-chip {
     @extend .chip;
+    --mdc-chip-elevated-disabled-container-color: var(--color-gray-300);
 
     &.chip__standard {
       @extend .chip__standard;
@@ -165,6 +166,7 @@ ecabs-chip-group {
 
       border-radius: calc-rem($border-radius-medium);
       border: 1px solid var(--color-gray-200);
+      color: var(--mdc-chip-label-text-color);
 
       &:hover {
         border-color: var(--color-gray-300);

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

@@ -40,7 +40,7 @@ mat-paginator {
 
       .mat-mdc-paginator-range-actions {
         .mdc-icon-button {
-          border: 1px solid var(--color-gray-400);
+          border: 1px solid var(--color-gray-300);
           border-radius: 0.25rem;
           display: flex;
           justify-content: center;

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

@@ -28,7 +28,7 @@
     }
 
     .mat-mdc-select-placeholder {
-      color: rgba(0, 0, 0, 0.42) !important;
+      @include fontSize($font-size-md);
     }
 
     &-panel.mdc-menu-surface {
@@ -125,6 +125,8 @@
 
   &, &.ng-select-multiple .ng-select-container .ng-value-container {
     .ng-placeholder {
+      @include fontSize($font-size-md);
+
       top: unset;
       padding-bottom: unset;
       padding-left: unset;
@@ -133,6 +135,10 @@
 
   .ng-select-container .ng-value-container {
     padding-left: 0;
+
+    .ng-placeholder {
+      color: var(--mat-select-placeholder-text-color)
+    }
   }
 
   &.ng-select-single .ng-select-container {

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

@@ -59,6 +59,7 @@ ul, ol {
 }
 
 input::placeholder {
+  @include fontSize($font-size-md);
   overflow: visible;
 }
 
@@ -87,3 +88,12 @@ h5 {
 .mat-typography p {
   margin: inherit;
 }
+
+fieldset:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+
+  * {
+    pointer-events: none;
+  }
+}

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

@@ -20,8 +20,50 @@
     border-radius: $border-radius-base;
   }
 
+  &:hover {
+    transition: filter $trans-duration-style;
+  }
+
+  // #Basic
+  @include m(basic) {
+    background-color: transparent;
+    color: var(--color-gray-500);
+
+    &:hover {
+      background-color: transparent;
+      color: color-mix(in srgb, var(--color-gray-500), black 30%);
+    }
+
+    @include m(outline) {
+      background-color: transparent;
+      border-color: var(--color-gray-500);
+      color: var(--color-gray-500);
+
+      &:after {
+        border-color: var(--color-gray-500);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-50);
+        color: color-mix(in srgb, var(--color-gray-500), black 30%);
+      }
+    }
+
+    @include m(link) {
+      @extend .btn--basic--outline;
+
+      &:after {
+        border-color: transparent;
+      }
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
   // #Primary
-  @include e(primary) {
+  @include m(primary) {
     background-color: var(--color-brand-dark);
     color: var(--color-white);
 
@@ -44,7 +86,7 @@
     }
 
     @include m(link) {
-      @extend .btn__primary--outline;
+      @extend .btn--primary--outline;
 
       &:after {
         border-color: transparent;
@@ -57,7 +99,7 @@
   }
 
   /* #Secondary */
-  @include e(secondary) {
+  @include m(secondary) {
     background-color: var(--color-brand-light);
     color: var(--color-white);
 
@@ -80,7 +122,7 @@
     }
 
     @include m(link) {
-      @extend .btn__secondary--outline;
+      @extend .btn--secondary--outline;
 
       &:after {
         border-color: transparent;
@@ -89,7 +131,7 @@
   }
 
   /* #Warn */
-  @include e(warn) {
+  @include m(warn) {
     background-color: var(--color-error);
     color: var(--color-white);
 
@@ -112,7 +154,7 @@
     }
 
     @include m(link) {
-      @extend .btn__warn--outline;
+      @extend .btn--warn--outline;
 
       &:after {
         border-color: transparent;
@@ -121,9 +163,9 @@
   }
 
   /* #Success */
-  @include e(success) {
-    background-color: var(--color-success);
-    color: var(--color-white);
+  @include m(success) {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
 
     &:hover {
       background-color: rgba(var(--color-success-rgb), .88);
@@ -144,7 +186,7 @@
     }
 
     @include m(link) {
-      @extend .btn__warn--outline;
+      @extend .btn--warn--outline;
 
       &:after {
         border-color: transparent;

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

@@ -39,9 +39,9 @@ form {
       @include fontSize($font-size-base);
       display: block;
       width: 100%;
-      padding: calc-rem(8) calc-rem(16);
+      padding: calc-rem(8px 16px);
       border-radius: $border-radius-medium;
-      border: 1px solid var(--color-gray-200);
+      border: 1px solid var(--color-gray-300);
       color: var(--color-black);
       line-height: $base-line-height;
 
@@ -64,8 +64,8 @@ form {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
         transform: translateY(-50%);
 
         &,
@@ -82,13 +82,14 @@ form {
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: calc-rem(16px);
       }
 
       @include m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
       }
 
       @include m(invalid) {
@@ -103,7 +104,7 @@ form {
       @include fontSize($font-size-base);
       display: block;
       width: 100%;
-      padding: calc-rem(16);
+      padding: calc-rem(16px);
       border-radius: $border-radius-medium;
       border: 1px solid var(--color-gray-200);
       color: var(--color-black);
@@ -124,8 +125,8 @@ form {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
         transform: translateY(-50%);
 
         &,
@@ -142,13 +143,14 @@ form {
         @extend .form-field__input--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: calc-rem(16px);
       }
 
       @include m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
       }
     }
 
@@ -157,7 +159,7 @@ form {
       @include fontSize($font-size-base);
       display: block;
       width: 100%;
-      padding: calc-rem(8) calc-rem(16);
+      padding: calc-rem(8px 16px);
       color: var(--color-black);
       line-height: $base-line-height;
       border: none;
@@ -185,8 +187,8 @@ form {
         // suffix
         position: absolute !important;
         top: 50%;
-        right: calc-rem(16);
-        color: var(--color-gray-500);
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
         transform: translateY(-50%);
 
         &,
@@ -203,13 +205,14 @@ form {
         @extend .form-field__range--suffix;
 
         right: unset;
-        left: calc-rem(16);
+        left: calc-rem(16px);
       }
 
       @include m(disabled) {
         // disabled
         background-color: var(--color-gray-100);
-        border-color: transparent;
+        opacity: .5;
+        pointer-events: none;
       }
 
       @include m(invalid) {
@@ -246,9 +249,11 @@ form {
 
     // #Validation
     @include e(validation) {
-      padding-top: 0.5rem;
       @include fontSize($font-size-xs);
+
+      padding-top: 0.5rem;
       color: var(--color-error);
+
       @include m(item) {
         padding-bottom: 0.6rem;
 
@@ -267,12 +272,6 @@ form {
       }
     }
 
-    &.disabled input,
-    &.disabled textarea {
-      background-color: var(--color-white-opacity-05);
-      border-color: var(--color-gray-300);
-    }
-
     .spinner {
       position: absolute;
       right: 0.25rem;

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

@@ -6,7 +6,7 @@ $border-radius: 0.25rem;
   @include fontSize($font-size-base);
 
   border-radius: $border-radius;
-  border: 1px solid var(--color-gray-500);
+  border: 1px solid var(--color-gray-300);
   padding: calc-rem(8) calc-rem(16) calc-rem(8) calc-rem(16);
   color: var(--color-black);
   line-height: $base-line-height;

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

@@ -46,7 +46,7 @@
 
   --color-success: #075145;
   --color-success--opacity: #affebf;
-  --color-success-rgb: 7, 81, 69;
+  --color-success-rgb: 175, 254, 191;
 
   --color-allocation-started: #E8F8E5;
   --color-allocation-scheduled: #FDF0E4;
@@ -55,9 +55,4 @@
   --color-allocation-no-show: #EAE5FF;
   --color-allocation-unavailable: #F2F2F2;
   --cropper-outline-color: rgba(0, 0, 0, 0.5);
-
-  --mat-option-label-text-color: var(--color-gray-900);
-  --mat-option-focus-state-layer-color: var(--color-gray-100);
-  --mat-option-hover-state-layer-color: var(--color-gray-50);
-  --mat-divider-color: var(--color-gray-100);
 }

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

@@ -23,5 +23,10 @@ $breakpoints: (
 );
 
 :root {
-  --mat-standard-button-toggle-shape: #{calc-rem($border-radius-large)}
+  --mat-standard-button-toggle-shape: #{calc-rem($border-radius-large)};
+  --mat-option-label-text-color: var(--color-gray-900);
+  --mat-option-focus-state-layer-color: var(--color-gray-100);
+  --mat-option-hover-state-layer-color: var(--color-gray-50);
+  --mat-divider-color: var(--color-gray-100);
+  --mat-select-placeholder-text-color: var(--color-gray-400);
 }