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

package/lib/base/models/ecabs-date-picker-translations.models.d.ts

@@ -2,6 +2,7 @@ import { Locale } from 'date-fns';
 export interface EcabsDatePickerTranslations {
     cancelLabel?: string;
     applyLabel?: string;
+    deleteLabel?: string;
     selectDateLabel?: string;
     selectDateRangeLabel?: string;
     selectDateTimeLabel?: string;

package/lib/base/validators/date-range.validator.d.ts

@@ -0,0 +1,14 @@
+import { UntypedFormControl } from '@angular/forms';
+export declare const dateRangeValidator: (control: UntypedFormControl) => {
+    dateFromRangeRequired: boolean;
+    dateToRangeRequired?: undefined;
+    dateFromMoreThanDateTo?: undefined;
+} | {
+    dateToRangeRequired: boolean;
+    dateFromRangeRequired?: undefined;
+    dateFromMoreThanDateTo?: undefined;
+} | {
+    dateFromMoreThanDateTo: boolean;
+    dateFromRangeRequired?: undefined;
+    dateToRangeRequired?: undefined;
+};

package/lib/ecabs-date-picker/ecabs-date-picker.component.d.ts

@@ -5,6 +5,7 @@ import { EcabsDatePickerHolidayOptions, EcabsDatePickerTranslations } from '../b
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDatePickerHeaderComponent } from './components/ecabs-date-picker-header/ecabs-date-picker-header.component';
+import { MatDatepicker } from '@angular/material/datepicker';
 import * as i0 from "@angular/core";
 export declare class EcabsDatePickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
@@ -20,9 +21,11 @@ export declare class EcabsDatePickerComponent extends EcabsElementBaseComponent
     specificDates: Date[];
     holidayOptions: EcabsDatePickerHolidayOptions;
     onblur: EventEmitter<any>;
+    datepicker: MatDatepicker<any> | undefined;
     val: string | number;
     header: typeof EcabsDatePickerHeaderComponent;
     translationConfig: EcabsDatePickerTranslations;
+    disabledApplyButton: boolean;
     get value(): string | number;
     set value(val: string | number);
     constructor(injector: Injector, ecabsDatePickerHeaderService: EcabsDatePickerHeaderService, unsubscribeService: UnsubscribeService);

package/lib/ecabs-date-picker-actions/ecabs-date-picker-actions.component.d.ts

@@ -3,7 +3,9 @@ import * as i0 from "@angular/core";
 export declare class EcabsDatePickerActionsComponent {
     cancelLabel: string;
     applyLabel: string;
+    isDateRange: boolean;
+    disabledApplyButton: boolean;
     readonly apply: EventEmitter<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDatePickerActionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDatePickerActionsComponent, "ecabs-date-picker-actions", never, { "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; }, { "apply": "apply"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDatePickerActionsComponent, "ecabs-date-picker-actions", never, { "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "isDateRange": { "alias": "isDateRange"; "required": false; }; "disabledApplyButton": { "alias": "disabledApplyButton"; "required": false; }; }, { "apply": "apply"; }, never, never, false, never>;
 }

package/lib/ecabs-date-range-picker/ecabs-date-range-picker.component.d.ts

@@ -5,6 +5,7 @@ import { EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-tr
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDateRangePickerHeaderComponent } from './components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component';
+import { MatDateRangePicker } from '@angular/material/datepicker';
 import * as i0 from "@angular/core";
 export declare class EcabsDateRangePickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
@@ -22,10 +23,12 @@ export declare class EcabsDateRangePickerComponent extends EcabsElementBaseCompo
         dateFrom: string;
         dateTo: string;
     };
+    datepicker: MatDateRangePicker<any> | undefined;
     header: typeof EcabsDateRangePickerHeaderComponent;
     _dateFrom: string;
     _dateTo: string;
     translationConfig: EcabsDatePickerTranslations;
+    disabledApplyButton: boolean;
     get value(): {
         dateFrom: string;
         dateTo: string;

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

@@ -41,7 +41,6 @@ export interface EcabsDialogConfirmComponentConfig {
     hideCancelButton?: boolean;
     isPopover?: boolean;
     popoverResult?: any;
-    width?: string;
     content?: string;
     useFullButtonSize?: boolean;
     loading$?: Observable<boolean>;

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

@@ -0,0 +1,33 @@
+import { DestroyRef, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ThemePalette } from '@angular/material/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { EcabsComponentsService } from '../base/services/ecabs-components.service';
+import * as i0 from "@angular/core";
+export declare class EcabsDialogConfirmationDeletionComponent implements OnInit {
+    dialogRef: MatDialogRef<EcabsDialogConfirmationDeletionComponent>;
+    data: EcabsDeleteConfirmationModal;
+    private readonly fb;
+    private readonly componentsService;
+    private readonly destroyRef;
+    form: UntypedFormGroup;
+    color: ThemePalette;
+    constructor(dialogRef: MatDialogRef<EcabsDialogConfirmationDeletionComponent>, data: EcabsDeleteConfirmationModal, fb: UntypedFormBuilder, componentsService: EcabsComponentsService, destroyRef: DestroyRef);
+    ngOnInit(): void;
+    onConfirm(): void;
+    onCancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDialogConfirmationDeletionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDialogConfirmationDeletionComponent, "ecabs-dialog-confirm-deletion", never, {}, {}, never, never, false, never>;
+}
+export interface EcabsDeleteConfirmationModal {
+    actionName?: string;
+    alertText?: string;
+    color?: ThemePalette;
+    comparisonText?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    entityName?: string;
+    entityNameLabel?: string;
+    entityNamePlaceholder?: string;
+    showEntityNameInHeader?: boolean;
+}

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

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-dialog-confirm-deletion.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/dialog";
+import * as i5 from "../ecabs-buttons/ecabs-buttons.module";
+import * as i6 from "../ecabs-input/ecabs-input.module";
+export declare class EcabsDialogConfirmDeletionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDialogConfirmDeletionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsDialogConfirmDeletionModule, [typeof i1.EcabsDialogConfirmationDeletionComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.MatDialogModule, typeof i5.EcabsButtonsModule, typeof i6.EcabsInputModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsDialogConfirmDeletionModule>;
+}

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/lib/ecabs-radio-button-list/ecabs-radio-button-list.component.d.ts

@@ -2,12 +2,14 @@ import { AfterViewInit, EventEmitter, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import EcabsElementBaseComponent from '../base/element-base';
 import { SelectOption } from '../base/models/select.models';
+import { MatRadioChange, MatRadioGroup } from '@angular/material/radio';
 import * as i0 from "@angular/core";
 export declare class EcabsRadioButtonListComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit {
     private injector;
+    matRadioGroup: MatRadioGroup;
     items: SelectOption[];
     direction: 'horizontal' | 'vertical';
-    changed: EventEmitter<any>;
+    readonly changed: EventEmitter<MatRadioChange<any>>;
     val: string;
     get value(): string;
     set value(val: string);

package/package.json

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

package/public-api.d.ts

@@ -127,3 +127,5 @@ export * from './lib/base/utils/object-utils';
 export * from './lib/base/consts/buttons.consts';
 export * from './lib/base/adapters/date.adapter';
 export * from './lib/base/consts/waypoint.consts';
+export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.module';
+export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.component';

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;
 }
 
@@ -44,6 +48,7 @@
 
 .mat-calendar-body-cell-content {
   border-radius: 0.25rem !important;
+  font-size: 1rem !important;
 }
 
 .mat-calendar-body-active {
@@ -100,7 +105,7 @@
   }
 
   .mat-calendar-table-header th {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-table-header-divider::after {
@@ -108,7 +113,7 @@
   }
 
   .mat-calendar-body {
-    @include fontSize(16px);
+    @include mixins.fontSize(16px);
   }
 
   .mat-calendar-body-in-range {
@@ -131,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;
   }
 }