ecabs-components 0.0.15 → 0.0.17

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

@@ -0,0 +1,7 @@
+import { BreadCrumb } from '../models/bread-crumb';
+import * as i0 from "@angular/core";
+export declare class EcabsBreadcrumbComponent {
+    breadCrumb: BreadCrumb[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsBreadcrumbComponent, "ecabs-breadcrumb", never, { "breadCrumb": "breadCrumb"; }, {}, never, never, false>;
+}

package/lib/ecabs-breadcrumb/ecabs-breadcrumb.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-breadcrumb.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/router";
+export declare class EcabsBreadcrumbModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBreadcrumbModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsBreadcrumbModule, [typeof i1.EcabsBreadcrumbComponent], [typeof i2.CommonModule, typeof i3.MatIconModule, typeof i4.RouterModule], [typeof i1.EcabsBreadcrumbComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsBreadcrumbModule>;
+}

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

@@ -0,0 +1,19 @@
+import { EventEmitter, OnChanges } from '@angular/core';
+import { StandardLocale } from '../models/language.models';
+import * as i0 from "@angular/core";
+export declare class EcabsLanguageSelectorComponent implements OnChanges {
+    languages: StandardLocale[];
+    currentLanguage: string;
+    showLabelTitle: boolean;
+    languageChanged: EventEmitter<StandardLocale>;
+    selectedLang: string;
+    get panelClass(): string;
+    ngOnChanges(): void;
+    toggleLang(): void;
+    matchSelected(): StandardLocale;
+    standardLang(code: string): string;
+    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>;
+}

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

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-language-selector.component";
+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";
+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 ɵinj: i0.ɵɵInjectorDeclaration<EcabsLanguageSelectorModule>;
+}

package/lib/models/bread-crumb.d.ts

@@ -0,0 +1,5 @@
+export interface BreadCrumb {
+    title: string;
+    url?: string;
+    icon?: string;
+}

package/lib/models/language.models.d.ts

@@ -0,0 +1,4 @@
+export interface StandardLocale {
+    iso_code: string;
+    locale: string;
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "ecabs-components",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",
     "@angular/cdk": "~13.0.0-next.7+89.sha-a662737",
     "@angular/material": "~13.0.0-next.7+89.sha-a662737",
+    "flag-icons": "^6.7.0",
     "ngx-mat-intl-tel-input": "^5.0.0",
     "ngx-mat-select-search": "^4.2.1"
   },

package/public-api.d.ts

@@ -44,3 +44,7 @@ export * from './lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component';
 export * from './lib/ecabs-dialog-confirm/ecabs-dialog-confirm.module';
 export * from './lib/ecabs-dialog-message/ecabs-dialog-message.component';
 export * from './lib/ecabs-dialog-message/ecabs-dialog-message.module';
+export * from './lib/ecabs-breadcrumb/ecabs-breadcrumb.component';
+export * from './lib/ecabs-breadcrumb/ecabs-breadcrumb.module';
+export * from './lib/ecabs-language-selector/ecabs-language-selector.component';
+export * from './lib/ecabs-language-selector/ecabs-language-selector.module';

package/styles/material/_theme.scss

@@ -1,99 +0,0 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@import '@angular/material/theming';
-
-// Plus imports for other components in your app.
-@import '../scss/utilities/index';
-@import './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.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
-
-$mat-primary: (
-  100: var(--color-brand-dark),
-  700: var(--color-brand-dark),
-  A700: var(--color-brand-dark),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-$mat-accent: (
-  A700: var(--color-brand-light),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-$mat-secondary: (
-  100: var(--color-brand-dark),
-  700: var(--color-brand-dark),
-  A700: var(--color-brand-dark),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-$mat-warning: (
-  100: var(--color-error),
-  500: var(--color-error),
-  700: var(--color-error),
-  A700: var(--color-error),
-  contrast: (
-    A700: $light-primary-text,
-  ),
-);
-
-// 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-palette($mat-primary, A700);
-$cuorium-accent: mat-palette($mat-secondary, A700);
-
-// The warn palette is optional (defaults to red).
-$cuorium-warn: mat-palette($mat-warning);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$cuorium-theme: mat-light-theme(
-  (
-    color: (
-      primary: $cuorium-primary,
-      accent: $cuorium-accent,
-      warn: $cuorium-warn,
-    ),
-  )
-);
-
-// 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 angular-material-theme($cuorium-theme);
-
-// Define a custom typography config that overrides the font-family as well as the
-// `headlines` and `body-1` levels.
-$custom-typography: mat-typography-config(
-  $font-family: $font-family-primary,
-  $body-1: mat-typography-level($font-size-base, $base-line-height, $font-weight-regular),
-  $input: mat-typography-level($font-size-base, $base-line-height, $font-weight-regular),
-  $headline: mat-typography-level($font-heading-lg, $base-line-height, $font-weight-medium),
-  $title: mat-typography-level($font-heading-base, $base-line-height, $font-weight-medium),
-  $subheading-2: mat-typography-level($font-heading-md, $base-line-height, $font-weight-medium),
-  $subheading-1: mat-typography-level($font-heading-sm, $base-line-height, $font-weight-medium),
-);
-
-@include angular-material-typography($custom-typography);
-
-.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,
-a {
-  &.mat-button,
-  &.mat-stroked-button,
-  &.mat-raised-button,
-  &.mat-flat-button {
-    @extend .btn;
-
-    &.btn__group--item,
-    &.btn {
-      @extend .btn__group--item;
-    }
-
-    .mat-icon {
-      color: inherit;
-    }
-  }
-
-  &.mat-button.mat-primary,
-  &.mat-flat-button.mat-primary {
-    @extend .btn__primary;
-  }
-
-  &.mat-stroked-button.mat-primary {
-    @extend .btn__primary--outline;
-
-    border: 0;
-  }
-
-  &.mat-button.mat-accent,
-  &.mat-flat-button.mat-accent {
-    @extend .btn__secondary;
-  }
-
-  &.mat-stroked-button.mat-accent {
-    @extend .btn__secondary--outline;
-
-    border: 0;
-  }
-
-  &.mat-button.mat-warn {
-    @extend .btn__warn;
-  }
-  
-  &.mat-button.mat-success {
-    @extend .btn__success;
-  }
-
-  &.mat-stroked-button.mat-warn {
-    @extend .btn__warn--outline;
-
-    border: 0;
-  }
-
-  &.mat-stroked-button.mat-success {
-    @extend .btn__success--outline;
-
-    border: 0;
-  }
-
-  &.mat-button.mat-button-disabled {
-    @extend .btn__disabled;
-  }
-
-  &.mat-stroked-button.mat-button-disabled {
-    @extend .btn__disabled--outline;
-  }
-
-  .mat-button-wrapper {
-    @extend .btn__with-icon--wrapper;
-  }
-
-  &.mat-icon-button .mat-button-wrapper .mat-icon {
-    margin-right: 0;
-  }
-
-  &.mat-button.mat-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,8 +0,0 @@
-
-.mat-dialog-title {
-  @extend .dialog__title;
-}
-
-.dialog--maps .mat-dialog-container {
-  @extend .dialog--maps;
-}

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

package/styles/material/overrides/_form.scss

@@ -1,47 +0,0 @@
-.mat-form-field {
-  display: block !important;
-  .mat-form-field-wrapper {
-    padding: 0;
-    .mat-form-field-flex {
-      padding: 0;
-    }
-    .mat-form-field-infix {
-      padding: 0;
-      border: 0;
-    }
-  }
-  &-underline {
-    display: none;
-  }
-
-  &-disabled {
-    .mat-input-element {
-      @extend .form-field__input--disabled;
-    }
-  }
-
-  &-label {
-    @extend .form-field__label;
-  }
-
-  &-invalid {
-    .mat-input-element,
-    mat-error,
-    mat-date-range-input {
-      @extend .form-field__input--invalid;
-    }
-  }
-
-  &-suffix,
-  [matsuffix] {
-    @extend .form-field__input--suffix;
-  }
-
-  .mat-input-element {
-    @extend .form-field__input;
-  }
-
-  .mat-form-field-subscript-wrapper {
-    margin-top: 0;
-  }
-}

package/styles/material/overrides/_icon.scss

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

package/styles/material/overrides/_menu.scss

@@ -1,3 +0,0 @@
-.mat-menu-panel.mat-elevation-z4 {
-  box-shadow: $box-shadow-default;
-}