ecabs-components 2.0.0-alpha.7 → 2.0.0-alpha.9

package/lib/base/consts/badge.consts.d.ts

@@ -0,0 +1,5 @@
+import { PhosphorIconWeight } from './icon.consts';
+export declare type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+export declare type BadgeSize = 'small' | 'medium' | 'large';
+export declare type BadgeIconWeight = PhosphorIconWeight;
+export declare const CHIP_LABEL_CLASS = "mdc-evolution-chip__text-label";

package/lib/base/consts/icon.consts.d.ts

@@ -0,0 +1 @@
+export declare type PhosphorIconWeight = 'regular' | 'bold' | 'fill' | 'light' | 'thin' | 'duotone';

package/lib/base/consts/status-badge.consts.d.ts

@@ -0,0 +1,3 @@
+import { BadgeVariant } from './badge.consts';
+export declare const STATUS_BADGE_VARIANTS: Readonly<Record<string, BadgeVariant>>;
+export declare const resolveStatusBadgeVariant: (status: string | null | undefined) => BadgeVariant;

package/lib/base/directives/action-menu-trigger.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class EcabsActionMenuTriggerDirective {
+    readonly templateRef: TemplateRef<void>;
+    constructor(templateRef: TemplateRef<void>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsActionMenuTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EcabsActionMenuTriggerDirective, "[ecabsActionMenuTrigger]", never, {}, {}, never, never, false, never>;
+}

package/lib/base/directives/badge.directive.d.ts

@@ -0,0 +1,26 @@
+import { ElementRef } from '@angular/core';
+import { MatChip } from '@angular/material/chips';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { BadgeSize, BadgeVariant } from '../consts/badge.consts';
+import { EcabsTooltipIfTruncatedDirective } from './tooltip-if-truncated.directive';
+import * as i0 from "@angular/core";
+export declare class EcabsBadgeDirective {
+    private readonly elementRef;
+    private readonly chip?;
+    private readonly truncationTooltip?;
+    variant: BadgeVariant;
+    size: BadgeSize;
+    set bordered(value: boolean | string);
+    set disableRipple(value: boolean | string);
+    set interactive(value: boolean | string);
+    get badgeClasses(): string;
+    private hasBorder;
+    private rippleDisabled?;
+    private isInteractive;
+    private get noRipple();
+    private syncChip;
+    constructor(elementRef: ElementRef<HTMLElement>, menuTrigger?: MatMenuTrigger, chip?: MatChip, truncationTooltip?: EcabsTooltipIfTruncatedDirective);
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeDirective, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EcabsBadgeDirective, "[ecabsBadge]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/base/directives/badge.directive.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./badge.directive";
+import * as i2 from "@angular/common";
+export declare class EcabsBadgeDirectiveModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeDirectiveModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsBadgeDirectiveModule, [typeof i1.EcabsBadgeDirective], [typeof i2.CommonModule], [typeof i1.EcabsBadgeDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsBadgeDirectiveModule>;
+}

package/lib/base/directives/tooltip-if-truncated.directive.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tooltip-if-truncated.directive";
 import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tooltip";
 export declare class EcabsTooltipIfTruncatedDirectiveModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsTooltipIfTruncatedDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsTooltipIfTruncatedDirectiveModule, [typeof i1.EcabsTooltipIfTruncatedDirective], [typeof i2.CommonModule], [typeof i1.EcabsTooltipIfTruncatedDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsTooltipIfTruncatedDirectiveModule, [typeof i1.EcabsTooltipIfTruncatedDirective], [typeof i2.CommonModule, typeof i3.MatTooltipModule], [typeof i1.EcabsTooltipIfTruncatedDirective, typeof i3.MatTooltipModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EcabsTooltipIfTruncatedDirectiveModule>;
 }

package/lib/base/models/action-menu.models.d.ts

@@ -0,0 +1,13 @@
+import { PhosphorIconWeight } from '../consts/icon.consts';
+export interface ActionMenuItem {
+    label: string;
+    icon?: string;
+    iconWeight?: PhosphorIconWeight;
+    isDestructive?: boolean;
+    action: () => void;
+}
+export interface ActionMenuEntry {
+    isVisible: boolean;
+    item: ActionMenuItem;
+}
+export type ActionMenuGroup = ActionMenuItem[];

package/lib/base/models/select.models.d.ts

@@ -1,4 +1,4 @@
-export type PhosphorIconWeight = 'regular' | 'bold' | 'fill' | 'light' | 'thin' | 'duotone';
+import { PhosphorIconWeight } from '../consts/icon.consts';
 export interface SelectOption<T = unknown> {
     label: string;
     value: T;

package/lib/base/pipes/status-badge-variant.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import { BadgeVariant } from '../consts/badge.consts';
+import * as i0 from "@angular/core";
+export declare class EcabsStatusBadgeVariantPipe implements PipeTransform {
+    transform(status: string | null | undefined): BadgeVariant;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsStatusBadgeVariantPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<EcabsStatusBadgeVariantPipe, "statusBadgeVariant", false>;
+}

package/lib/base/utils/icon.utils.d.ts

@@ -0,0 +1,2 @@
+import { PhosphorIconWeight } from '../consts/icon.consts';
+export declare function buildPhosphorSvgIcon(name: string | undefined | null, weight?: PhosphorIconWeight | null): string;

package/lib/ecabs-action-menu/ecabs-action-menu.component.d.ts

@@ -0,0 +1,26 @@
+import { MatMenu, MenuPositionX } from '@angular/material/menu';
+import { PhosphorIconWeight } from '../base/consts/icon.consts';
+import { EcabsActionMenuTriggerDirective } from '../base/directives/action-menu-trigger.directive';
+import { ActionMenuGroup, ActionMenuItem } from '../base/models/action-menu.models';
+import * as i0 from "@angular/core";
+export declare class EcabsActionMenuComponent {
+    groups: ActionMenuGroup[];
+    triggerIcon: string;
+    triggerIconWeight: PhosphorIconWeight;
+    triggerAriaLabel?: string;
+    xPosition: MenuPositionX;
+    menuClass: string;
+    triggerFocusable: boolean;
+    showTrigger: boolean;
+    readonly customTrigger?: EcabsActionMenuTriggerDirective;
+    readonly menu: MatMenu;
+    private readonly menuTrigger?;
+    get panelClass(): string;
+    get triggerSvgIcon(): string;
+    itemSvgIcon(item: ActionMenuItem): string;
+    triggerKeydown(event: Event): void;
+    trackByGroup(index: number): number;
+    trackByItem(_: number, item: ActionMenuItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsActionMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsActionMenuComponent, "ecabs-action-menu", never, { "groups": { "alias": "groups"; "required": false; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; }; "triggerIconWeight": { "alias": "triggerIconWeight"; "required": false; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "menuClass": { "alias": "menuClass"; "required": false; }; "triggerFocusable": { "alias": "triggerFocusable"; "required": false; }; "showTrigger": { "alias": "showTrigger"; "required": false; }; }, {}, ["customTrigger"], never, false, never>;
+}

package/lib/ecabs-action-menu/ecabs-action-menu.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-action-menu.component";
+import * as i2 from "../base/directives/action-menu-trigger.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/divider";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/material/menu";
+export declare class EcabsActionMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsActionMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsActionMenuModule, [typeof i1.EcabsActionMenuComponent, typeof i2.EcabsActionMenuTriggerDirective], [typeof i3.CommonModule, typeof i4.MatButtonModule, typeof i5.MatDividerModule, typeof i6.MatIconModule, typeof i7.MatMenuModule], [typeof i1.EcabsActionMenuComponent, typeof i2.EcabsActionMenuTriggerDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsActionMenuModule>;
+}

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

@@ -0,0 +1,41 @@
+import { BadgeIconWeight, BadgeSize, BadgeVariant } from '../base/consts/badge.consts';
+import * as i0 from "@angular/core";
+export declare class EcabsBadgeComponent {
+    variant: BadgeVariant;
+    size: BadgeSize;
+    set bordered(value: boolean | string);
+    hasBorder: boolean;
+    /**
+     * Icon name, resolved through whichever icon set the library is on (Phosphor
+     * today). Deliberately not named after the vendor so a future icon-set change
+     * does not ripple out to every call site.
+     */
+    icon?: string;
+    /**
+     * Defaults to `bold`: at badge icon sizes (12-18px) a `regular` stroke falls
+     * below one device pixel and antialiases into a ragged edge. `bold` also
+     * matches the ~26/256 ring thickness of the reference design.
+     */
+    iconWeight: BadgeIconWeight;
+    /**
+     * Material icon ligature, for the cases that need a Material glyph
+     * specifically. Used only when no `icon` is supplied.
+     */
+    materialIcon?: string;
+    /**
+     * Static so it resolves before the first change detection run, keeping the
+     * tooltip binding stable instead of changing after the view is checked.
+     */
+    private readonly labelRef?;
+    get svgIcon(): string;
+    /**
+     * Tooltip message for a clipped label. Read from the DOM rather than an input
+     * because the label is projected content. `ecabsTooltipIfTruncated` measures
+     * on mouseover, and that host listener also marks this view dirty, so the
+     * message is re-read on hover without any explicit change detection call.
+     * The directive suppresses the tooltip unless the text is actually clipped.
+     */
+    get labelText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsBadgeComponent, "ecabs-badge", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconWeight": { "alias": "iconWeight"; "required": false; }; "materialIcon": { "alias": "materialIcon"; "required": false; }; }, {}, never, ["[ecabsBadgeIcon]", "*"], false, never>;
+}

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

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-badge.component";
+import * as i2 from "../base/pipes/status-badge-variant.pipe";
+import * as i3 from "@angular/common";
+import * as i4 from "../base/directives/badge.directive.module";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/tooltip";
+import * as i7 from "../base/directives/tooltip-if-truncated.directive.module";
+export declare class EcabsBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsBadgeModule, [typeof i1.EcabsBadgeComponent, typeof i2.EcabsStatusBadgeVariantPipe], [typeof i3.CommonModule, typeof i4.EcabsBadgeDirectiveModule, typeof i5.MatIconModule, typeof i6.MatTooltipModule, typeof i7.EcabsTooltipIfTruncatedDirectiveModule], [typeof i1.EcabsBadgeComponent, typeof i4.EcabsBadgeDirectiveModule, typeof i2.EcabsStatusBadgeVariantPipe, typeof i7.EcabsTooltipIfTruncatedDirectiveModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsBadgeModule>;
+}

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

@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
-import { NgControl } from '@angular/forms';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CountryCode as CC, E164Number, NationalNumber, PhoneNumber } from 'libphonenumber-js';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ErrorStateMatcher } from '@angular/material/core';
@@ -9,7 +9,7 @@ import { Subject } from 'rxjs';
 import { CountryCode } from '../base/consts/country-codes';
 import { Country, PhoneNumberFormat } from '../base/models/phone.models';
 import * as i0 from "@angular/core";
-export declare class EcabsBasePhoneComponent implements OnInit, OnDestroy, MatFormFieldControl<any> {
+export declare class EcabsBasePhoneComponent implements OnInit, OnDestroy, DoCheck, MatFormFieldControl<any> {
     private changeDetectorRef;
     private countryCodeData;
     private fm;
@@ -21,7 +21,8 @@ export declare class EcabsBasePhoneComponent implements OnInit, OnDestroy, MatFo
     cssClass: string | undefined;
     name: string | undefined;
     onlyCountries: string[];
-    errorStateMatcher: ErrorStateMatcher;
+    get errorStateMatcher(): ErrorStateMatcher;
+    set errorStateMatcher(value: ErrorStateMatcher);
     enableSearch: boolean;
     searchPlaceholder: string | undefined;
     describedBy: string;
@@ -60,8 +61,11 @@ export declare class EcabsBasePhoneComponent implements OnInit, OnDestroy, MatFo
     static getPhoneNumberPlaceHolder(countryISOCode: CC): string | undefined;
     onTouched: () => void;
     propagateChange: (_: unknown) => void;
-    constructor(changeDetectorRef: ChangeDetectorRef, countryCodeData: CountryCode, fm: FocusMonitor, elRef: ElementRef<HTMLElement>, ngControl: NgControl);
-    errorState: boolean;
+    private readonly _errorStateTracker;
+    constructor(changeDetectorRef: ChangeDetectorRef, countryCodeData: CountryCode, fm: FocusMonitor, elRef: ElementRef<HTMLElement>, defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective);
+    get errorState(): boolean;
+    set errorState(value: boolean);
+    ngDoCheck(): void;
     controlType?: string;
     autofilled?: boolean;
     userAriaDescribedBy?: string;
@@ -85,6 +89,6 @@ export declare class EcabsBasePhoneComponent implements OnInit, OnDestroy, MatFo
     protected fetchCountryData(): void;
     private get formattedPhoneNumber();
     private formatAsYouTypeIfEnabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBasePhoneComponent, [null, null, null, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBasePhoneComponent, [null, null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EcabsBasePhoneComponent, "ecabs-base-phone", never, { "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "enablePlaceholder": { "alias": "enablePlaceholder"; "required": false; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "name": { "alias": "name"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "describedBy": { "alias": "describedBy"; "required": false; }; "debounceTimeMs": { "alias": "debounceTimeMs"; "required": false; }; "format": { "alias": "format"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "countryChanged": "countryChanged"; }, never, never, false, never>;
 }

package/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.d.ts

@@ -16,14 +16,15 @@ export declare class EcabsExpansionPanelComponent implements OnChanges {
     showCheckbox: boolean;
     showStatus: boolean;
     status: string;
-    hideToggle: boolean;
+    collapsible: boolean;
     checked: EventEmitter<boolean>;
     opened: EventEmitter<void>;
     expansionPanel: MatExpansionPanel;
     toggle: boolean;
+    get statusLabel(): string;
     onOpened(): 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; }; "collapsible": { "alias": "collapsible"; "required": false; }; }, { "checked": "checked"; "opened": "opened"; }, never, ["*"], false, never>;
 }

package/lib/ecabs-expansion-panel/ecabs-expansion-panel.module.d.ts

@@ -5,10 +5,10 @@ import * as i3 from "@angular/forms";
 import * as i4 from "@angular/material/button";
 import * as i5 from "@angular/material/expansion";
 import * as i6 from "@angular/material/icon";
-import * as i7 from "@angular/material/chips";
-import * as i8 from "../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module";
+import * as i7 from "../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module";
+import * as i8 from "../ecabs-badge/ecabs-badge.module";
 export declare class EcabsExpansionPanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsExpansionPanelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsExpansionPanelModule, [typeof i1.EcabsExpansionPanelComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatButtonModule, typeof i5.MatExpansionModule, typeof i6.MatIconModule, typeof i7.MatChipsModule, typeof i8.EcabsCheckboxToggleModule], [typeof i1.EcabsExpansionPanelComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsExpansionPanelModule, [typeof i1.EcabsExpansionPanelComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatButtonModule, typeof i5.MatExpansionModule, typeof i6.MatIconModule, typeof i7.EcabsCheckboxToggleModule, typeof i8.EcabsBadgeModule], [typeof i1.EcabsExpansionPanelComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EcabsExpansionPanelModule>;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.9",
   "peerDependencies": {
     "@angular/animations": "^19.2.25",
     "@angular/common": "^19.2.25",

package/public-api.d.ts

@@ -27,6 +27,7 @@ export * from './lib/base/models/header.models';
 export * from './lib/base/models/validation.models';
 export * from './lib/base/models/select.models';
 export * from './lib/base/models/waypoint.models';
+export * from './lib/base/models/action-menu.models';
 export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component';
 export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.module';
 export * from './lib/ecabs-checkbox-v2/ecabs-checkbox-v2.component';
@@ -63,6 +64,10 @@ export * from './lib/ecabs-table/ecabs-table.component';
 export * from './lib/ecabs-table/ecabs-table.module';
 export * from './lib/ecabs-note/ecabs-note.component';
 export * from './lib/ecabs-note/ecabs-note.module';
+export * from './lib/ecabs-badge/ecabs-badge.component';
+export * from './lib/ecabs-badge/ecabs-badge.module';
+export * from './lib/ecabs-action-menu/ecabs-action-menu.component';
+export * from './lib/ecabs-action-menu/ecabs-action-menu.module';
 export * from './lib/ecabs-hint/ecabs-hint.component';
 export * from './lib/ecabs-hint/ecabs-hint.module';
 export * from './lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component';
@@ -105,6 +110,9 @@ export * from './lib/base/directives/digits-only.directive';
 export * from './lib/base/directives/digits-only.directive.module';
 export * from './lib/base/directives/show-on-truncated.directive';
 export * from './lib/base/directives/show-on-truncated.directive.module';
+export * from './lib/base/directives/action-menu-trigger.directive';
+export * from './lib/base/directives/badge.directive';
+export * from './lib/base/directives/badge.directive.module';
 export * from './lib/ecabs-validation/ecabs-validation.module';
 export * from './lib/ecabs-validation/ecabs-validation.component';
 export * from './lib/ecabs-active-status-filter/ecabs-active-status-filter.component';
@@ -119,6 +127,7 @@ export * from './lib/ecabs-slider/ecabs-slider.module';
 export * from './lib/ecabs-base-phone-input/ecabs-base-phone.component';
 export * from './lib/ecabs-base-phone-input/ecabs-base-phone.module';
 export * from './lib/base/services/unsubscribe.service';
+export * from './lib/base/pipes/status-badge-variant.pipe';
 export * from './lib/base/pipes/truncate.pipe';
 export * from './lib/base/pipes/separator-append.pipe';
 export * from './lib/base/pipes/phone-number-country-code.pipe';
@@ -138,7 +147,11 @@ export * from './lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.com
 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/utils/icon.utils';
 export * from './lib/base/utils/select.utils';
+export * from './lib/base/consts/badge.consts';
+export * from './lib/base/consts/status-badge.consts';
+export * from './lib/base/consts/icon.consts';
 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/_theme.scss

@@ -4,7 +4,7 @@
 
 // Plus imports for other components in your app.
 @use '../scss/utilities/index';
-@use 'overrides/index' as index2;
+@use 'overrides/index' as overrides;
 @use "../scss/utilities/fonts";
 
 
@@ -73,7 +73,6 @@ $custom-typography: mat.m2-define-typography-config(
   $button: mat.m2-define-typography-level(
       fonts.$font-size-base,
       fonts.$base-line-height,
-      fonts.$font-weight-semibold,
     $letter-spacing: normal,
     $font-family: fonts.$font-family-primary,
   ),
@@ -102,3 +101,4 @@ $cuorium-theme: mat.m2-define-light-theme((
 // 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.typography-hierarchy($cuorium-theme);

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

@@ -1,4 +1,4 @@
-@use "../../scss/modules/autocomplete";
+@use "../../scss/modules/index";
 @use "../../scss/utilities/functions";
 @use "../../scss/utilities/variables";
 

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

@@ -0,0 +1,122 @@
+@use "../../scss/modules/badge";
+
+$badge-sizes: small, medium, large;
+$badge-variants: default, success, warning, danger, info;
+
+.mat-icon {
+  &.badge__icon,
+  .badge__icon--slot > & {
+    width: var(--badge-icon-size);
+    height: var(--badge-icon-size);
+    font-size: var(--badge-icon-size);
+    line-height: var(--badge-icon-size);
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+
+.mdc-evolution-chip.mat-mdc-chip.badge {
+  @extend .badge;
+
+  --mdc-chip-container-height: auto;
+  --mdc-chip-with-avatar-avatar-size: var(--badge-icon-size);
+
+  min-width: 0;
+  width: auto;
+  justify-content: flex-start;
+
+  @each $size in $badge-sizes {
+    &.badge--#{$size} {
+      @extend .badge--#{$size};
+    }
+  }
+
+  @each $variant in $badge-variants {
+    &.badge--#{$variant} {
+      @extend .badge--#{$variant};
+    }
+  }
+
+  &.badge--interactive {
+    @extend .badge--interactive;
+  }
+
+  &:hover {
+    border-color: var(--badge-border-color, transparent);
+  }
+
+  .mdc-evolution-chip__cell--primary,
+  .mdc-evolution-chip__action--primary {
+    min-width: 0;
+  }
+
+  .mdc-evolution-chip__action--primary {
+    padding: 0;
+    gap: var(--badge-gap);
+  }
+
+  .mdc-evolution-chip__graphic {
+    flex: none;
+    padding: 0;
+    width: auto;
+
+    > * {
+      width: var(--badge-icon-size);
+      height: var(--badge-icon-size);
+      font-size: var(--badge-icon-size);
+      line-height: var(--badge-icon-size);
+      color: inherit;
+    }
+  }
+
+  // #Trailing icon
+  &.mdc-evolution-chip--with-trailing-action {
+    --badge-trailing-allowance: calc(var(--badge-icon-size) + var(--badge-gap));
+
+    max-width: calc(
+      var(--badge-max-width, 100% - var(--badge-trailing-allowance)) +
+      var(--badge-trailing-allowance)
+    );
+
+    .mdc-evolution-chip__graphic {
+      padding: 0;
+    }
+
+    .mdc-evolution-chip__icon--trailing {
+      width: var(--badge-icon-size);
+      height: var(--badge-icon-size);
+      padding: 0;
+
+      font-size: var(--badge-icon-size);
+      line-height: var(--badge-icon-size);
+      color: inherit;
+
+      transition: transform 150ms ease;
+    }
+  }
+
+  &[aria-expanded='true'] .mdc-evolution-chip__icon--trailing {
+    transform: rotate(180deg);
+  }
+
+  &,
+  .mdc-evolution-chip__action {
+    cursor: inherit;
+  }
+
+  &.badge--no-ripple:hover .mat-mdc-chip-focus-overlay {
+    opacity: 0;
+  }
+
+
+  .mdc-evolution-chip__text-label {
+    @extend .badge__label;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+  }
+}

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

@@ -1,4 +1,4 @@
-@use "../../scss/modules/button";
+@use "../../scss/modules/index";
 @use "../../scss/utilities/fonts";
 
 button,

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

@@ -1,4 +1,4 @@
-@use "../../scss/modules/card";
+@use "../../scss/modules/index";
 @use "../../scss/utilities/functions";
 
 .mat-mdc-card {

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

@@ -1,5 +1,4 @@
-@use "../../scss/modules/statuses";
-@use "../../scss/modules/chip";
+@use "../../scss/modules/index";
 @use "../../scss/utilities/helpers";
 @use "../../scss/utilities/fonts";
 @use "../../scss/utilities/functions";

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

@@ -1,5 +1,4 @@
 @use "../../scss/modules/datepicker";
-@use "../../scss/utilities/index";
 @use "../../scss/utilities/functions";
 @use "../../scss/utilities/mixins";
 @use "../../scss/utilities/variables";

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

@@ -1,4 +1,4 @@
-@use "../../scss/modules/dialog";
+@use "../../scss/modules/index";
 @use "../../scss/utilities/functions";
 
 .mat-mdc-dialog-container {

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

@@ -1,4 +1,4 @@
-@use "../../scss/modules/divider";
+@use "../../scss/modules/index";
 mat-divider {
   &.mat-divider {
     @extend .divider;

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

@@ -3,7 +3,18 @@
 @use "../../scss/utilities/mixins";
 @use "../../scss/utilities/variables";
 
-.example-headers-align .mat-expansion-panel-header-title {
+ecabs-expansion-panel {
+  .mat-expansion-panel-header-description {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .mat-expansion-indicator::after {
+    border-color: var(--color-gray-500);
+  }
+}
+
+ecabs-expansion-panel .mat-expansion-panel-header-title {
   @include mixins.fontSize(fonts.$font-heading-xs);
 
   color: var(--color-brand-dark);
@@ -27,6 +38,37 @@
     .mat-expansion-panel-body {
       padding: functions.calc-rem(0 0 16 0);
     }
+
+    .ecabs-expansion-panel__heading {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      height: var(--mat-expansion-header-expanded-state-height, #{functions.calc-rem(64)});
+      padding: functions.calc-rem(0 0 24 0);
+
+      // Matches the width the real header's content box gets once the toggle is accounted for.
+      .mat-content {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        overflow: hidden;
+        margin-right: functions.calc-rem(8);
+      }
+
+      .mat-expansion-panel-header-title,
+      .mat-expansion-panel-header-description {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        flex-basis: 0;
+        margin-right: functions.calc-rem(16);
+      }
+
+      .mat-expansion-panel-header-description {
+        flex-grow: 2;
+        color: var(--mat-expansion-header-description-color);
+      }
+    }
   }
 
   .mat-expansion-panel:not([class*=mat-elevation-z]) {

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

@@ -1,6 +1,5 @@
-@use "../../scss/modules/form";
+@use "../../scss/modules/index";
 @use "../../scss/utilities/helpers";
-@use "../../../styles/scss/utilities/index";
 @use "../../scss/utilities/fonts";
 @use "../../scss/utilities/mixins";