ecabs-components 1.0.14 → 1.0.15

package/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.d.ts

@@ -1,17 +1,21 @@
-import { OnInit, TemplateRef } from '@angular/core';
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ThemePalette } from '@angular/material/core';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class DialogConfirmComponent implements OnInit {
+export declare class EcabsDialogConfirmComponent implements OnInit, OnDestroy {
     dialogRef: MatDialogRef<DialogConfirmComponentConfig>;
     data: DialogConfirmComponentConfig;
+    private destroy$;
     message: string;
     color: ThemePalette;
     titleColor: ThemePalette;
     constructor(dialogRef: MatDialogRef<DialogConfirmComponentConfig>, data: DialogConfirmComponentConfig);
     ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DialogConfirmComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogConfirmComponent, "ecabs-dialog-confirm", never, {}, {}, never, never, false>;
+    ngOnDestroy(): void;
+    closeDialog(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDialogConfirmComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDialogConfirmComponent, "ecabs-dialog-confirm", never, {}, {}, never, never, false>;
 }
 export interface DialogConfirmComponentConfig {
     title?: string;
@@ -23,4 +27,5 @@ export interface DialogConfirmComponentConfig {
     isPopover?: boolean;
     width?: string;
     content?: string;
+    loading$?: Observable<boolean>;
 }

package/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.module.d.ts

@@ -4,8 +4,8 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/dialog";
 import * as i4 from "../ecabs-buttons/ecabs-buttons.module";
 import * as i5 from "@angular/material/icon";
-export declare class DialogConfirmModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DialogConfirmModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DialogConfirmModule, [typeof i1.DialogConfirmComponent], [typeof i2.CommonModule, typeof i3.MatDialogModule, typeof i4.EcabsButtonsModule, typeof i5.MatIconModule], never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DialogConfirmModule>;
+export declare class EcabsDialogConfirmModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDialogConfirmModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsDialogConfirmModule, [typeof i1.EcabsDialogConfirmComponent], [typeof i2.CommonModule, typeof i3.MatDialogModule, typeof i4.EcabsButtonsModule, typeof i5.MatIconModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsDialogConfirmModule>;
 }

package/lib/ecabs-dialog-message/ecabs-dialog-message.component.d.ts

@@ -1,13 +1,18 @@
+import { OnDestroy } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ThemePalette } from '@angular/material/core';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class EcabsDialogMessageComponent {
+export declare class EcabsDialogMessageComponent implements OnDestroy {
     dialogRef: MatDialogRef<EcabsDialogMessageComponentConfig>;
     data: EcabsDialogMessageComponentConfig;
     message: string;
     color: ThemePalette;
     titleColor: string;
+    private destroy$;
     constructor(dialogRef: MatDialogRef<EcabsDialogMessageComponentConfig>, data: EcabsDialogMessageComponentConfig);
+    ngOnDestroy(): void;
+    closeDialog(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDialogMessageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDialogMessageComponent, "ecabs-dialog-message", never, {}, {}, never, never, false>;
 }
@@ -19,4 +24,5 @@ export interface EcabsDialogMessageComponentConfig {
     confirmLabel?: string;
     isPopover?: boolean;
     isButtonBlock?: boolean;
+    loading$?: Observable<boolean>;
 }

package/lib/ecabs-language-selector/ecabs-language-selector.component.d.ts

@@ -4,6 +4,8 @@ export declare class EcabsLanguageSelectorComponent implements OnChanges {
     languages: string[];
     currentLanguage: string;
     showLabelTitle: boolean;
+    flagOnly: boolean;
+    tooltip: string;
     languageChanged: EventEmitter<string>;
     selectedLang: string;
     get panelClass(): string;
@@ -14,5 +16,5 @@ export declare class EcabsLanguageSelectorComponent implements OnChanges {
     flagClass(lang: string): string;
     private standardise;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsLanguageSelectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsLanguageSelectorComponent, "ecabs-language-selector", never, { "languages": "languages"; "currentLanguage": "currentLanguage"; "showLabelTitle": "showLabelTitle"; }, { "languageChanged": "languageChanged"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsLanguageSelectorComponent, "ecabs-language-selector", never, { "languages": "languages"; "currentLanguage": "currentLanguage"; "showLabelTitle": "showLabelTitle"; "flagOnly": "flagOnly"; "tooltip": "tooltip"; }, { "languageChanged": "languageChanged"; }, never, never, false>;
 }

package/lib/ecabs-language-selector/ecabs-language-selector.module.d.ts

@@ -4,8 +4,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/select";
 import * as i4 from "@angular/material/form-field";
 import * as i5 from "@angular/forms";
+import * as i6 from "@angular/material/tooltip";
 export declare class EcabsLanguageSelectorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsLanguageSelectorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsLanguageSelectorModule, [typeof i1.EcabsLanguageSelectorComponent], [typeof i2.CommonModule, typeof i3.MatSelectModule, typeof i4.MatFormFieldModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule], [typeof i1.EcabsLanguageSelectorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsLanguageSelectorModule, [typeof i1.EcabsLanguageSelectorComponent], [typeof i2.CommonModule, typeof i3.MatSelectModule, typeof i4.MatFormFieldModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.MatTooltipModule], [typeof i1.EcabsLanguageSelectorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EcabsLanguageSelectorModule>;
 }

package/lib/ecabs-select/ecabs-select.component.d.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, EventEmitter, Injector, OnChanges, On
 import { UntypedFormControl } from '@angular/forms';
 import { MatOption } from '@angular/material/core';
 import { MatSelectSearchComponent } from 'ngx-mat-select-search';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { ReplaySubject, Subscription } from 'rxjs';
 import ElementBaseComponent from '../base/element-base';
 import * as i0 from "@angular/core";
 export declare class EcabsSelectComponent extends ElementBaseComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
@@ -30,21 +30,13 @@ export declare class EcabsSelectComponent extends ElementBaseComponent implement
     allSelected: MatOption;
     matSelectSearchComponent: MatSelectSearchComponent;
     val: any;
-    filteredItems$: BehaviorSubject<{
+    filteredItems$: ReplaySubject<{
         label: string;
         value: any;
     }[]>;
     itemFilterCtrl: UntypedFormControl;
     isClearAll: boolean;
     showFilteredAllOption: boolean;
-    selectedItems: {
-        label: string;
-        value: any;
-    }[];
-    notSelectedItems: {
-        label: string;
-        value: any;
-    }[];
     subscriptions: Subscription;
     get value(): any;
     set value(val: any);
@@ -56,7 +48,6 @@ export declare class EcabsSelectComponent extends ElementBaseComponent implement
     onTouch: any;
     toggleAllSelection(): void;
     togglePerOne(): void;
-    toggleNone(): void;
     getAllSelectedChecked(): boolean;
     getLabel(val: any): string;
     writeValue(value: any): void;
@@ -65,7 +56,6 @@ export declare class EcabsSelectComponent extends ElementBaseComponent implement
     ngOnDestroy(): void;
     onSelectionChanged($event: any): void;
     private filterItems;
-    private setSelectedItems;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EcabsSelectComponent, "ecabs-select", never, { "items": "items"; "multiple": "multiple"; "useNoneOption": "useNoneOption"; "useOnlyDisabledClass": "useOnlyDisabledClass"; "searchFieldPlaceholder": "searchFieldPlaceholder"; "useSearchOption": "useSearchOption"; "useSelectAllOption": "useSelectAllOption"; "setAllOptionAfterChosenAllItems": "setAllOptionAfterChosenAllItems"; "selectAllValue": "selectAllValue"; "noEntriesFoundLabel": "noEntriesFoundLabel"; "noneLabel": "noneLabel"; "allLabel": "allLabel"; "otherLabel": "otherLabel"; "othersLabel": "othersLabel"; }, { "updateFilterItems": "updateFilterItems"; "selectionChange": "selectionChange"; }, never, never, false>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "peerDependencies": {
     "@angular/common": "^16.0.4",
     "@angular/core": "^16.0.4",

package/styles/material/_theme.scss

@@ -1,74 +0,0 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@use '@angular/material' as mat;
-// 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.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
-// Plus imports for other components in your app.
-@import '../scss/utilities/index';
-@import './overrides/index';
-@import '../scss/utilities/palettes';
-
-// Define a custom typography config that overrides the font-family as well as the
-// `headlines` and `body-1` levels.
-$custom-typography: mat.define-typography-config(
-        $font-family: $font-family-primary,
-        $body-1: mat.define-typography-level(
-                        $font-size-base,
-                        $base-line-height,
-                        $font-weight-regular,
-                $letter-spacing: normal,
-                $font-family: $font-family-primary,
-        ),
-        $button: mat.define-typography-level(
-                        $font-size-base,
-                $letter-spacing: normal,
-        ),
-        $body-2: mat.define-typography-level(
-                        $font-size-base,
-                        $base-line-height,
-                        $font-weight-regular,
-                $letter-spacing: normal,
-                $font-family: $font-family-primary,
-        )
-);
-
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$cuorium-primary: mat.define-palette($brand-palette-primary, 700);
-$cuorium-accent: mat.define-palette($brand-palette-accent, 500);
-
-// The warn palette is optional (defaults to red).
-$cuorium-warn: mat.define-palette($brand-palette-warn);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$cuorium-theme: mat.define-light-theme((
-        color: (
-                primary: $cuorium-primary,
-                accent: $cuorium-accent,
-                warn: $cuorium-warn,
-        ),
-        typography: $custom-typography
-));
-
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
- @include mat.all-component-themes($cuorium-theme);
-
-.mat-body p,
-.mat-body-1 p,
-.mat-typography p {
-  margin: inherit;
-}
-
-mat-progress-bar {
-  .mat-progress-bar-buffer {
-    background-color: var(--color-brand-300) !important;
-  }
-}

package/styles/material/overrides/_autocomplete.scss

@@ -1,11 +0,0 @@
-.mat-autocomplete-panel {
-  margin-top: 0.2rem;
-
-  &, &.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
-    @extend .autocomplete-ui;
-  }
-
-  .mat-option {
-    @extend .autocomplete-ui--item;
-  }
-}

package/styles/material/overrides/_button.scss

@@ -1,81 +0,0 @@
-button.mdc-button,
-a {
-  &.mdc-button,
-  &.mdc-button--outlined,
-  &.mdc-button--raised,
-  &.mdc-button--unelevated {
-    @extend .btn;
-
-    &.btn__group--item,
-    &.btn {
-      @extend .btn__group--item;
-    }
-
-    .mat-icon {
-      color: inherit;
-    }
-  }
-
-  &.mdc-button.mat-primary,
-  &.mdc-button--unelevated.mat-primary {
-    @extend .btn__primary;
-  }
-
-  &.mdc-button--outlined.mat-primary {
-    @extend .btn__primary--outline;
-
-    border: 0;
-  }
-
-  &.mat-mdc-button.mat-accent,
-  &.mdc-button--unelevated.mat-accent {
-    @extend .btn__secondary;
-  }
-
-  &.mdc-button--outlined.mat-accent {
-    @extend .btn__secondary--outline;
-
-    border: 0;
-  }
-
-  &.mdc-button.mat-warn {
-    @extend .btn__warn;
-  }
-
-  &.mdc-button.mat-success {
-    @extend .btn__success;
-  }
-
-  &.mdc-button--outlined.mat-warn {
-    @extend .btn__warn--outline;
-
-    border: 0;
-  }
-
-  &.mdc-button--outlined.mat-success {
-    @extend .btn__success--outline;
-
-    border: 0;
-  }
-
-  &.mdc-button:disabled {
-    @extend .btn__disabled;
-  }
-
-  &.mdc-button--outlined:disabled {
-    @extend .btn__disabled--outline;
-  }
-
-  .mat-button-wrapper {
-    @extend .btn__with-icon--wrapper;
-  }
-
-  &.mat-mdc-icon-button .mat-button-wrapper .mat-icon {
-    margin-right: 0;
-  }
-
-  &.mdc-button.mat-mdc-icon-button {
-    min-width: auto;
-    padding: calc-rem(8);
-  }
-}

package/styles/material/overrides/_card.scss

@@ -1,17 +0,0 @@
-.mat-card {
-  &.mat-card:not([class*=mat-elevation-z]) {
-    @extend .card;
-  }
-
-  .mat-card-subtitle {
-    @extend .card--subtitle;
-  }
-
-  .mat-card-title {
-    @extend .card--title;
-  }
-
-  .mat-card-content {
-    @extend .card__content;
-  }
-}

package/styles/material/overrides/_chip.scss

@@ -1,108 +0,0 @@
-.mat-chip {
-  &,
-  &.mat-standard-chip {
-    @extend .chip;
-
-    &.chip--info {
-      @extend .chip--info;
-    }
-
-    &.chip--success {
-      @extend .chip--success;
-    }
-
-    &.chip--warn {
-      @extend .chip--warn;
-    }
-
-    &.chip--danger {
-      @extend .chip--danger;
-    }
-
-    &.chip--selected {
-      @extend .chip--selected;
-    }
-
-    &.chip--not-selected {
-      @extend .chip--not-selected;
-    }
-
-    &.accepted {
-      @extend .accepted;
-    }
-
-    &.cab_arrived_at_dropoff, &.cashed_in {
-      @extend .cab_arrived_at_dropoff;
-    }
-
-    &.cab_arrived_at_intermediary_waypoint {
-      @extend .cab_arrived_at_intermediary_waypoint;
-    }
-
-    &.cab_arrived_at_pickup {
-      @extend .cab_arrived_at_pickup;
-    }
-
-    &.cancelled {
-      @extend .cancelled;
-    }
-
-    &.completed {
-      @extend .completed;
-    }
-
-    &.dispatched {
-      @extend .dispatched;
-    }
-
-    &.dropped_off {
-      @extend .dropped_off;
-    }
-
-    &.no_show {
-      @extend .no_show;
-    }
-
-    &.pending {
-      @extend .pending;
-    }
-
-    &.rejected, &.suspended,
-    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, {
-      @extend .rejected;
-    }
-
-    &.reserved, &.scheduled, &.ended {
-      @extend .reserved;
-    }
-
-    &.trip_ended {
-      @extend .trip_ended;
-    }
-
-    &.trip_ongoing {
-      @extend .trip_ongoing;
-    }
-
-    &.trip_started, &.started {
-      @extend .trip_started;
-    }
-
-    &[ng-reflect-disable-ripple] {
-      &::after {
-        background: transparent;
-      }
-    }
-  }
-
-  .mat-icon {
-    &,
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-.mat-chip.mat-standard-chip[ng-reflect-disable-ripple]:not(.mat-chip-disabled):active {
-  box-shadow: none;
-}

package/styles/material/overrides/_datepicker.scss

@@ -1,169 +0,0 @@
-@import "../../scss/utilities/index.scss";
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 0.5em;
-}
-
-.header-label {
-  flex: 1;
-  height: 1em;
-  font-weight: 500;
-  text-align: center;
-}
-
-.select-date-label {
-  color: var(--color-brand-dark);
-  padding-top: 1.6rem;
-  padding-left: 1.6rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.grid-picker-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
-  margin-right: 0.5rem;
-}
-
-.ml-0 {
-  margin-left: 0rem;
-}
-
-.w-full {
-  width: 100% !important;
-}
-
-.mat-calendar-table {
-  .mat-calendar-body {
-    tr:first-child[aria-hidden='true'] {
-      display: none;
-    }
-  }
-}
-
-.mat-datepicker-toggle {
-  padding-top: 0.75rem;
-  margin-left: -2.25rem;
-}
-
-.mat-calendar-body-label {
-  visibility: hidden;
-}
-
-.mat-calendar-body-cell-content {
-  border-radius: 0.25rem !important;
-}
-
-.mat-calendar-body-active {
-  .mat-calendar-body-today {
-    color: var(--color-brand-light) !important;
-    background-color: var(--color-brand-light2) !important;
-  }
-}
-
-.mat-calendar {
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-      background-color: var(--color-brand-light2);
-      color: var(--color-black);
-    }
-  }
-
-  .mat-calendar-body-cell.mat-calendar-body-active {
-    &, &:hover {
-      .mat-calendar-body-cell-content.mat-calendar-body-selected {
-        background-color: var(--color-brand-light) !important;
-        color: var(--color-white) !important;
-      }
-    }
-  }
-
-  .mat-calendar-body-selected {
-    background-color: var(--color-brand-light);
-    color: var(--color-white) !important;
-
-    .mat-calendar-body-today {
-      color: var(--color-white) !important;
-    }
-  }
-
-  .mat-calendar-table-header,
-  .mat-calendar-body-label {
-    color: var(--color-gray-500);
-  }
-
-  .mat-calendar-body-cell > .mat-calendar-body-today {
-    opacity: 1;
-  }
-
-  .mat-calendar-body-cell-container:hover .mat-calendar-body-cell.mat-calendar-body-disabled {
-    .mat-calendar-body-cell-content {
-      background-color: transparent !important;
-    }
-  }
-
-  .mat-calendar-body-cell-content,
-  .mat-date-range-input-separator {
-    color: var(--color-black);
-  }
-
-  .mat-calendar-content {
-    padding: 0 1.6rem;
-  }
-
-  .mat-calendar-table-header th {
-    @include fontSize(16px);
-  }
-
-  .mat-calendar-table-header-divider::after {
-    display: none;
-  }
-
-  .mat-calendar-body {
-    @include fontSize(16px);
-  }
-
-  .mat-calendar-body-in-range {
-    &::before {
-      background-color: var(--color-brand-light2);
-    }
-
-    .mat-calendar-body-cell-content {
-      color: var(--color-black) !important;
-    }
-  }
-
-  .mat-calendar-body-range-start, .mat-calendar-body-range-end {
-    .mat-calendar-body-cell-content {
-      color: var(--color-white) !important;
-    }
-  }
-}
-
-.mat-datepicker-popup {
-  .mat-datepicker-content {
-    color: var(--color-black);
-    box-shadow: $box-shadow-large;
-  }
-
-  .mat-datepicker-actions {
-    margin-top: 1rem;
-    padding: 0 1.6rem 1.6rem 1.6rem;
-  }
-
-  .mat-calendar-body-disabled {
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-      color: var(--color-gray-300);
-    }
-  }
-}

package/styles/material/overrides/_dialog.scss

@@ -1,12 +0,0 @@
-
-.mat-mdc-dialog-title {
-  @extend .dialog__title;
-}
-
-.dialog--maps .mat-mdc-dialog-container {
-  @extend .dialog--maps;
-}
-
-.mat-mdc-dialog-actions {
-  justify-content: end !important;
-}

package/styles/material/overrides/_divider.scss

@@ -1,3 +0,0 @@
-.mat-divider {
-  @extend .divider;
-}

package/styles/material/overrides/_expansion.scss

@@ -1,31 +0,0 @@
-.example-headers-align .mat-expansion-panel-header-title {
-  @include fontSize($font-heading-xs);
-
-  color: var(--color-brand-dark);
-  font-weight: $font-weight-semibold;
-  line-height: 32px;
-  white-space: nowrap;
-}
-
-.mat-accordion {
-  .mat-expansion-panel {
-    padding: calc-rem(24 24 0 24);
-
-    .mat-expansion-panel-header {
-      padding: calc-rem(0 0 24 0);
-
-      &:hover {
-        background: unset !important;
-      }
-    }
-
-    .mat-expansion-panel-body {
-      padding: calc-rem(0 0 16 0);
-    }
-  }
-
-  .mat-expansion-panel:not([class*=mat-elevation-z]) {
-    box-shadow: $box-shadow-default;
-  }
-
-}