ecabs-components 1.1.94 → 1.1.96

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

@@ -25,6 +25,7 @@ export declare class EcabsPhoneComponent extends EcabsElementBaseComponent imple
     set value(val: any);
     constructor(injector: Injector, ecabsComponentsService: EcabsComponentsService, destroyRef: DestroyRef);
     onInput(event: KeyboardEvent): void;
+    setDisabledState(isDisabled: boolean): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;

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

@@ -3,6 +3,8 @@ export declare class EcabsSegmentComponent {
     title: string;
     subtitle?: string;
     showTitleDivider: boolean;
+    compact: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsSegmentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsSegmentComponent, "ecabs-segment", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "showTitleDivider": { "alias": "showTitleDivider"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsSegmentComponent, "ecabs-segment", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "showTitleDivider": { "alias": "showTitleDivider"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[ecabsSegmentHeaderEnd]", "[ecabsSegmentHeaderBottom]", "*"], true, never>;
+    static ngAcceptInputType_compact: unknown;
 }

package/package.json

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

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

@@ -1,100 +1,100 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@use '@angular/material' as mat;
-@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();
-@include mat.legacy-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.define-palette($mat-primary, A700);
-$cuorium-accent: mat.define-palette($mat-secondary, A700);
-
-// The warn palette is optional (defaults to red).
-$cuorium-warn: mat.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.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,
-  )
-);
-
-// 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);
-@include mat.all-legacy-component-themes($cuorium-theme);
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+@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();
+@include mat.legacy-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.define-palette($mat-primary, A700);
+$cuorium-accent: mat.define-palette($mat-secondary, A700);
+
+// The warn palette is optional (defaults to red).
+$cuorium-warn: mat.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.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,
+  )
+);
+
+// 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);
+@include mat.all-legacy-component-themes($cuorium-theme);

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

@@ -1,34 +1,34 @@
-.ecabs-autocomplete {
-  .mat-mdc-autocomplete-panel {
-    @extend .autocomplete-ui;
-
-    margin-top: 0.2rem;
-
-    .mat-mdc-option {
-      @extend .autocomplete-ui--item;
-    }
-  }
-}
-
-ecabs-chip-autocomplete {
-  input.mat-mdc-chip-input {
-    margin-left: unset;
-    border-radius: calc-rem($border-radius-large);
-  }
-
-  .form-field {
-    margin-bottom: unset;
-  }
-}
-
-.ecabs-chip-autocomplete-overlay-panel {
-  &.mat-mdc-autocomplete-panel {
-    box-shadow: $box-shadow-default;
-    border-radius: calc-rem($border-radius-large);
-    border-top: 0;
-
-    max-height: calc((var(--autocomplete-visible-options, 8.5) * var(--mat-option-height, 48px)) + 10px);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
+.ecabs-autocomplete {
+  .mat-mdc-autocomplete-panel {
+    @extend .autocomplete-ui;
+
+    margin-top: 0.2rem;
+
+    .mat-mdc-option {
+      @extend .autocomplete-ui--item;
+    }
+  }
+}
+
+ecabs-chip-autocomplete {
+  input.mat-mdc-chip-input {
+    margin-left: unset;
+    border-radius: calc-rem($border-radius-large);
+  }
+
+  .form-field {
+    margin-bottom: unset;
+  }
+}
+
+.ecabs-chip-autocomplete-overlay-panel {
+  &.mat-mdc-autocomplete-panel {
+    box-shadow: $box-shadow-default;
+    border-radius: calc-rem($border-radius-large);
+    border-top: 0;
+
+    max-height: calc((var(--autocomplete-visible-options, 8.5) * var(--mat-option-height, 48px)) + 10px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

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

@@ -1,55 +1,76 @@
-.mat-mdc-card {
-  &.mdc-card {
-    @extend .card;
-
-    .mat-mdc-card-header {
-      @extend .card__header;
-
-      .mat-divider {
-        margin-top: 0;
-      }
-    }
-
-    .mat-mdc-card-subtitle {
-      @extend .card__subtitle;
-    }
-
-    .mat-mdc-card-title {
-      @extend .card__title;
-    }
-
-    .mat-mdc-card-content {
-      @extend .card__content;
-    }
-
-    .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;
-        }
-      }
-    }
-  }
-}
+.mat-mdc-card {
+  &.mdc-card {
+    @extend .card;
+
+    &.card--compact {
+      @extend .card--compact;
+
+      .mat-mdc-card-header {
+        padding-bottom: calc-rem(8px);
+      }
+
+      .mat-mdc-card-content {
+        padding-top: 0;
+      }
+    }
+
+    .mat-mdc-card-header {
+      @extend .card__header;
+
+      .mat-divider {
+        margin-top: 0;
+      }
+    }
+
+    .card__header--with-slots .mat-mdc-card-header-text {
+      flex: 999 1 calc-rem(192px);
+      min-width: 0;
+    }
+
+    .card__header--title-only .mat-mdc-card-title {
+      padding-bottom: 0;
+    }
+
+    .mat-mdc-card-subtitle {
+      @extend .card__subtitle;
+    }
+
+    .mat-mdc-card-title {
+      @extend .card__title;
+    }
+
+    .mat-mdc-card-content {
+      @extend .card__content;
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+}