@ascentgl/ads-ui 20.0.1 → 20.0.3

package/index.d.ts

@@ -27,16 +27,16 @@ import * as i5$2 from '@angular/material/input';
 import * as i10 from '@angular/material/icon';
 import * as i13 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import * as i12 from 'ngx-mask';
-import * as i3$4 from '@angular/material/divider';
-import * as i3$5 from '@angular/material/datepicker';
+import * as i3$4 from 'ngx-mask';
+import * as i3$5 from '@angular/material/divider';
+import * as i3$6 from '@angular/material/datepicker';
 import { MatDatetimepickerType } from '@mat-datetimepicker/core/datetimepicker/datetimepicker-type';
 import * as i5$3 from '@mat-datetimepicker/core';
 import { MatDatetimepickerComponent, MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
 import { MatCalendarView } from '@mat-datetimepicker/core/datetimepicker/calendar';
 import * as i4$4 from '@angular/material/radio';
 import * as i4$5 from '@angular/material/slider';
-import * as i3$6 from '@angular/material/snack-bar';
+import * as i3$7 from '@angular/material/snack-bar';
 import { MatSnackBarRef } from '@angular/material/snack-bar';
 import { BreakpointState, BreakpointObserver } from '@angular/cdk/layout';
 import * as i2$1 from '@angular/material/dialog';
@@ -51,8 +51,8 @@ import { MatMenu } from '@angular/material/menu';
 import * as i4$8 from 'angular-split';
 import { SplitComponent, SplitGutterInteractionEvent } from 'angular-split';
 import * as i9 from '@angular/material/tooltip';
-import * as i12$1 from '@angular/material/toolbar';
-import * as i3$7 from '@angular/material/bottom-sheet';
+import * as i12 from '@angular/material/toolbar';
+import * as i3$8 from '@angular/material/bottom-sheet';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import * as i4$9 from '@angular/material/list';
 import * as i2$2 from '@angular/material/tabs';
@@ -128,6 +128,9 @@ declare enum BadgeColor {
     alert = "alert"
 }
 declare class AdsNumericBadgeComponent extends AdsIconHoverComponent {
+    private registry;
+    /** @ignore **/
+    constructor(registry: AdsIconRegistry);
     /** choose badge color mode "primary" or "alert" **/
     color: i0.InputSignal<BadgeColor>;
     /** provide icon name. NOTE: the icon must be registered in icon registry **/
@@ -1058,11 +1061,11 @@ declare abstract class AbstractBaseComponent implements OnChanges, AfterViewInit
     /** @ignore */
     valueControl: FormControl;
     /** @ignore */
-    private readonly genericError;
+    protected readonly genericError: string;
     /** @ignore */
     protected readonly defaultErrorMessages: GENERIC_COLLECTION<string>;
     /** @ignore */
-    private readonly requiredErrorMessage;
+    protected readonly requiredErrorMessage: string;
     constructor();
     ngOnChanges(changes: {
         immediateValidation: SimpleChange;
@@ -1159,6 +1162,12 @@ declare class AdsDropdownComponent extends AbstractDropdownComponent implements
     checkSelected: boolean;
     /** Contains dropdown options */
     options?: DropdownComponentOptions;
+    /** Custom Option Template */
+    optionTemplate?: TemplateRef<unknown>;
+    /** Custom Trigger Template */
+    triggerTemplate?: TemplateRef<unknown>;
+    /** Custom Panel Class */
+    panelClass?: string;
     /** @ignore */
     panel?: MatSelect;
     /** @ignore */
@@ -1202,8 +1211,10 @@ declare class AdsDropdownComponent extends AbstractDropdownComponent implements
     toggleOption(option: DropdownComponentOption): void;
     /** @ignore */
     onCheckboxChange(option: DropdownComponentOption): void;
+    /** @ignore */
+    get panelClassList(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsDropdownComponent, "ads-dropdown", never, { "displayValueFormatter": { "alias": "displayValueFormatter"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "hasEmptyValue": { "alias": "hasEmptyValue"; "required": false; }; "checkSelected": { "alias": "checkSelected"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsDropdownComponent, "ads-dropdown", never, { "displayValueFormatter": { "alias": "displayValueFormatter"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "hasEmptyValue": { "alias": "hasEmptyValue"; "required": false; }; "checkSelected": { "alias": "checkSelected"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "triggerTemplate": { "alias": "triggerTemplate"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class AdsInputTooltipComponent {
@@ -1350,7 +1361,7 @@ declare class AdsInputComponent extends AbstractInputComponent implements OnInit
 
 declare class AdsInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsInputModule, [typeof AdsInputComponent], [typeof i2.CommonModule, typeof i4$3.MatFormFieldModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof AdsInputTooltipComponent, typeof i3$1.MatIconButton, typeof AdsSuccessComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof i12.NgxMaskDirective, typeof i13.MatAutocompleteTrigger], [typeof AdsInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsInputModule, [typeof AdsInputComponent], [typeof i2.CommonModule, typeof i4$3.MatFormFieldModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof AdsInputTooltipComponent, typeof i3$1.MatIconButton, typeof AdsSuccessComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof i3$4.NgxMaskDirective, typeof i13.MatAutocompleteTrigger], [typeof AdsInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsInputModule>;
 }
 
@@ -1379,7 +1390,7 @@ declare class AdsPhoneFieldComponent extends AbstractInputComponent implements O
 
 declare class AdsPhoneFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsPhoneFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsPhoneFieldModule, [typeof AdsPhoneFieldComponent], [typeof i2.CommonModule, typeof i12.NgxMaskDirective, typeof AdsInputModule], [typeof AdsPhoneFieldComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsPhoneFieldModule, [typeof AdsPhoneFieldComponent], [typeof i2.CommonModule, typeof i3$4.NgxMaskDirective, typeof AdsInputModule], [typeof AdsPhoneFieldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsPhoneFieldModule>;
 }
 
@@ -1456,7 +1467,7 @@ declare class AdsInputDropdownComponent extends AbstractInputComponent implement
 
 declare class AdsInputDropdownModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsInputDropdownModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsInputDropdownModule, [typeof AdsInputDropdownComponent], [typeof i2.CommonModule, typeof i3$4.MatDividerModule, typeof i4$3.MatFormFieldModule, typeof i5$1.MatSelectModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof AdsInputModule, typeof AdsDropdownModule, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent, typeof i12.NgxMaskDirective], [typeof AdsInputDropdownComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsInputDropdownModule, [typeof AdsInputDropdownComponent], [typeof i2.CommonModule, typeof i3$5.MatDividerModule, typeof i4$3.MatFormFieldModule, typeof i5$1.MatSelectModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof AdsInputModule, typeof AdsDropdownModule, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent, typeof i3$4.NgxMaskDirective], [typeof AdsInputDropdownComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsInputDropdownModule>;
 }
 
@@ -1674,7 +1685,7 @@ declare class AdsSearchDropdownHighlighterPipeModule {
 
 declare class AdsSearchDropdownModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsSearchDropdownModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsSearchDropdownModule, [typeof AdsSearchDropdownComponent], [typeof i2.CommonModule, typeof i4$3.MatFormFieldModule, typeof i4.AdsIconModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i13.MatAutocompleteModule, typeof i5$1.MatSelectModule, typeof AdsSearchDropdownHighlighterPipeModule, typeof i3$5.MatDatepickerModule, typeof i3$1.MatIconButton, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsSearchDropdownComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsSearchDropdownModule, [typeof AdsSearchDropdownComponent], [typeof i2.CommonModule, typeof i4$3.MatFormFieldModule, typeof i4.AdsIconModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i13.MatAutocompleteModule, typeof i5$1.MatSelectModule, typeof AdsSearchDropdownHighlighterPipeModule, typeof i3$6.MatDatepickerModule, typeof i3$1.MatIconButton, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsSearchDropdownComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsSearchDropdownModule>;
 }
 
@@ -1852,7 +1863,7 @@ declare class DateTimePickerFormatDirectiveModule {
 
 declare class AdsDatetimepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsDatetimepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsDatetimepickerModule, [typeof AdsDatetimepickerComponent], [typeof i2.CommonModule, typeof i3$5.MatDatepickerModule, typeof i4$3.MatFormFieldModule, typeof i5$3.MatNativeDatetimeModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof i5$3.MatDatetimepickerModule, typeof i10.MatIconModule, typeof DateTimePickerFormatDirectiveModule, typeof i3$1.MatIconButton, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsDatetimepickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsDatetimepickerModule, [typeof AdsDatetimepickerComponent], [typeof i2.CommonModule, typeof i3$6.MatDatepickerModule, typeof i4$3.MatFormFieldModule, typeof i5$3.MatNativeDatetimeModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof i5$3.MatDatetimepickerModule, typeof i10.MatIconModule, typeof DateTimePickerFormatDirectiveModule, typeof i3$1.MatIconButton, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsDatetimepickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsDatetimepickerModule>;
 }
 
@@ -1879,7 +1890,7 @@ declare class AdsDatepickerComponent extends AdsDatetimepickerComponent {
 
 declare class AdsDatepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsDatepickerModule, [typeof AdsDatepickerComponent], [typeof i2.CommonModule, typeof i3$5.MatDatepickerModule, typeof i4$3.MatFormFieldModule, typeof i5$2.MatInputModule, typeof i6.MatNativeDateModule, typeof i5$3.MatNativeDatetimeModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof i5$3.MatDatetimepickerModule, typeof i10.MatIconModule, typeof DateTimePickerFormatDirectiveModule, typeof AdsInputTooltipComponent, typeof i3$1.MatIconButton, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsDatepickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsDatepickerModule, [typeof AdsDatepickerComponent], [typeof i2.CommonModule, typeof i3$6.MatDatepickerModule, typeof i4$3.MatFormFieldModule, typeof i5$2.MatInputModule, typeof i6.MatNativeDateModule, typeof i5$3.MatNativeDatetimeModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof i5$3.MatDatetimepickerModule, typeof i10.MatIconModule, typeof DateTimePickerFormatDirectiveModule, typeof AdsInputTooltipComponent, typeof i3$1.MatIconButton, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsDatepickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsDatepickerModule>;
 }
 
@@ -1907,7 +1918,7 @@ declare class AdsTimepickerComponent extends AdsDatetimepickerComponent {
 
 declare class AdsTimepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsTimepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsTimepickerModule, [typeof AdsTimepickerComponent], [typeof i2.CommonModule, typeof i5$3.MatDatetimepickerModule, typeof i3$5.MatDatepickerModule, typeof i4$3.MatFormFieldModule, typeof i5$3.MatNativeDatetimeModule, typeof i6.MatNativeDateModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof i10.MatIconModule, typeof DateTimePickerFormatDirectiveModule, typeof i3$1.MatIconButton, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsTimepickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsTimepickerModule, [typeof AdsTimepickerComponent], [typeof i2.CommonModule, typeof i5$3.MatDatetimepickerModule, typeof i3$6.MatDatepickerModule, typeof i4$3.MatFormFieldModule, typeof i5$3.MatNativeDatetimeModule, typeof i6.MatNativeDateModule, typeof i5$2.MatInputModule, typeof i3$3.ReactiveFormsModule, typeof i4.AdsIconModule, typeof i10.MatIconModule, typeof DateTimePickerFormatDirectiveModule, typeof i3$1.MatIconButton, typeof AdsInputTooltipComponent, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsSuccessComponent], [typeof AdsTimepickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsTimepickerModule>;
 }
 
@@ -2029,7 +2040,7 @@ declare enum PanelClass {
 
 declare class AdsSnackbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsSnackbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsSnackbarModule, [typeof AdsSnackbarComponent], [typeof AdsButtonModule, typeof i3$6.MatSnackBarModule, typeof i2.CommonModule], [typeof AdsSnackbarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsSnackbarModule, [typeof AdsSnackbarComponent], [typeof AdsButtonModule, typeof i3$7.MatSnackBarModule, typeof i2.CommonModule], [typeof AdsSnackbarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsSnackbarModule>;
 }
 
@@ -2195,7 +2206,7 @@ declare class AdsChipModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsChipModule>;
 }
 
-declare class AdsExpansionPanelComponent {
+declare class AdsExpansionPanelComponent implements AfterContentInit {
     private registry;
     constructor(registry: AdsIconRegistry);
     /** The unique id of the chip */
@@ -2214,11 +2225,18 @@ declare class AdsExpansionPanelComponent {
     disabled: i0.InputSignal<boolean>;
     /** Component width. Must include units of measure: px, %, em, rem, etc. */
     width: i0.InputSignal<string>;
+    /** The Chevron Icon size () */
+    chevronSize: i0.InputSignal<"base" | "xs">;
+    /** Header padding size size () */
+    headerPadding: i0.InputSignal<string>;
+    /** Content padding size size () */
+    contentPadding: i0.InputSignal<string>;
     /** @ignore */
     panel: MatExpansionPanel;
     get expanded(): boolean;
+    ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsExpansionPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsExpansionPanelComponent, "ads-expansion-panel", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "chevronColor": { "alias": "chevronColor"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "headerTemplateData": { "alias": "headerTemplateData"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsExpansionPanelComponent, "ads-expansion-panel", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "chevronColor": { "alias": "chevronColor"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "headerTemplateData": { "alias": "headerTemplateData"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "chevronSize": { "alias": "chevronSize"; "required": false; "isSignal": true; }; "headerPadding": { "alias": "headerPadding"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
 }
 
 declare class AdsExpansionPanelModule {
@@ -2342,6 +2360,8 @@ type NavItem = {
 declare abstract class AbstractSideNavBarComponent implements OnInit, AfterViewInit, OnDestroy {
     /** The default expanded width for the sidebar */
     defaultExpandedWidth: i0.InputSignal<number>;
+    /** The max expanded width for the sidebar */
+    maxExpandedWidth: i0.InputSignal<number>;
     /** @ignore */
     isCollapsed: i0.WritableSignal<boolean>;
     /** @ignore */
@@ -2377,7 +2397,7 @@ declare abstract class AbstractSideNavBarComponent implements OnInit, AfterViewI
     /** @ignore */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractSideNavBarComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractSideNavBarComponent, never, never, { "defaultExpandedWidth": { "alias": "defaultExpandedWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractSideNavBarComponent, never, never, { "defaultExpandedWidth": { "alias": "defaultExpandedWidth"; "required": false; "isSignal": true; }; "maxExpandedWidth": { "alias": "maxExpandedWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class AdsSideNavBarComponent extends AbstractSideNavBarComponent {
@@ -2459,7 +2479,7 @@ declare class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
 
 declare class AdsScmsSideNavBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsScmsSideNavBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsScmsSideNavBarModule, [typeof AdsScmsSideNavBarComponent], [typeof i2.CommonModule, typeof i4$8.SplitComponent, typeof i4$8.SplitAreaComponent, typeof i3$2.RouterLink, typeof i3$2.RouterLinkActive, typeof i4.AdsIconModule, typeof AdsDividerModule, typeof i7.MatAccordion, typeof i7.MatExpansionPanel, typeof i7.MatExpansionPanelDescription, typeof i7.MatExpansionPanelHeader, typeof i7.MatExpansionPanelTitle, typeof AdsAscentLogoModule, typeof i9.MatTooltip, typeof AdsBreadcrumbModule, typeof i4$7.MatMenu, typeof i12$1.MatToolbar, typeof i4$7.MatMenuTrigger, typeof i3$1.MatIconButton, typeof i3$2.RouterOutlet], [typeof AdsScmsSideNavBarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsScmsSideNavBarModule, [typeof AdsScmsSideNavBarComponent], [typeof i2.CommonModule, typeof i4$8.SplitComponent, typeof i4$8.SplitAreaComponent, typeof i3$2.RouterLink, typeof i3$2.RouterLinkActive, typeof i4.AdsIconModule, typeof AdsDividerModule, typeof i7.MatAccordion, typeof i7.MatExpansionPanel, typeof i7.MatExpansionPanelDescription, typeof i7.MatExpansionPanelHeader, typeof i7.MatExpansionPanelTitle, typeof AdsAscentLogoModule, typeof i9.MatTooltip, typeof AdsBreadcrumbModule, typeof i4$7.MatMenu, typeof i12.MatToolbar, typeof i4$7.MatMenuTrigger, typeof i3$1.MatIconButton, typeof i3$2.RouterOutlet], [typeof AdsScmsSideNavBarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsScmsSideNavBarModule>;
 }
 
@@ -2566,7 +2586,7 @@ declare class AdsProfileDisplayModule {
 
 declare class AdsMainMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsMainMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsMainMenuModule, [typeof AdsMainMenuComponent], [typeof i2.CommonModule, typeof i3$7.MatBottomSheetModule, typeof i4$9.MatListModule, typeof i4$7.MatMenuModule, typeof i4.AdsIconModule, typeof AdsMainMenuItemsModule, typeof AdsProfileDisplayModule, typeof i3$2.RouterModule], [typeof AdsMainMenuComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsMainMenuModule, [typeof AdsMainMenuComponent], [typeof i2.CommonModule, typeof i3$8.MatBottomSheetModule, typeof i4$9.MatListModule, typeof i4$7.MatMenuModule, typeof i4.AdsIconModule, typeof AdsMainMenuItemsModule, typeof AdsProfileDisplayModule, typeof i3$2.RouterModule], [typeof AdsMainMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsMainMenuModule>;
 }
 
@@ -2766,7 +2786,7 @@ declare class AdsTimeFieldComponent extends AdsInputDropdownComponent implements
 
 declare class AdsTimeFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsTimeFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsTimeFieldModule, [typeof AdsTimeFieldComponent], [typeof i2.CommonModule, typeof AdsInputDropdownModule, typeof i4.AdsIconModule, typeof i3$1.MatIconButton, typeof i12.NgxMaskDirective, typeof i3$3.ReactiveFormsModule, typeof AdsInputModule], [typeof AdsTimeFieldComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsTimeFieldModule, [typeof AdsTimeFieldComponent], [typeof i2.CommonModule, typeof AdsInputDropdownModule, typeof i4.AdsIconModule, typeof i3$1.MatIconButton, typeof i3$4.NgxMaskDirective, typeof i3$3.ReactiveFormsModule, typeof AdsInputModule], [typeof AdsTimeFieldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsTimeFieldModule>;
 }
 
@@ -2944,5 +2964,60 @@ declare class AdsTabsModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsTabsModule>;
 }
 
-export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsWizardStepperComponent, AdsWizardStepperModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
+interface Option {
+    name: string;
+    code: string;
+    iso: string;
+}
+declare class AdsInternationalPhoneFieldComponent extends AbstractInputComponent implements OnInit, AfterViewInit {
+    /** Optional "id" attribute for dropdown field */
+    dropdownId: string;
+    wrapperRef: ElementRef;
+    /** @ignore */
+    phoneMask: string;
+    /** @ignore */
+    countryOptions: Option[];
+    /** @ignore */
+    flagBase64: {
+        US: string;
+        CA: string;
+        MX: string;
+    };
+    /** @ignore */
+    dropdownControl: FormControl;
+    /** @ignore */
+    inputControl: FormControl;
+    /** @ignore */
+    getNorthAmericanCountry(phone: string): Option;
+    /** @ignore */
+    ngOnInit(): void;
+    /** @ignore */
+    private parsePhoneNumber;
+    /** @ignore */
+    ngAfterViewInit(): void;
+    /** @ignore */
+    getFlag(option: Option): string;
+    /** @ignore */
+    onBlur: () => void;
+    /** @ignore */
+    protected validatePhoneNumber: () => void;
+    /** @ignore */
+    private provideValueToTheValueControl;
+    /** @ignore */
+    canShowError(): boolean;
+    /** @ignore */
+    canShowSuccess(): boolean;
+    /** @ignore */
+    displayFirstError(control?: FormControl): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsInternationalPhoneFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsInternationalPhoneFieldComponent, "ads-international-phone-field", never, { "dropdownId": { "alias": "dropdownId"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class AdsInternationalPhoneFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsInternationalPhoneFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsInternationalPhoneFieldModule, [typeof AdsInternationalPhoneFieldComponent], [typeof i2.CommonModule, typeof i3$4.NgxMaskDirective, typeof AdsInputModule, typeof AdsDropdownModule, typeof AdsErrorComponent, typeof AdsHintComponent, typeof AdsInputTooltipComponent, typeof AdsSuccessComponent], [typeof AdsInternationalPhoneFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsInternationalPhoneFieldModule>;
+}
+
+export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsWizardStepperComponent, AdsWizardStepperModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
 export type { AdsModalData, Breadcrumb, Copyright, DROP_CALLBACK_INDEXES, DividerStyle, ErrorPageConfig, ErrorPageInfoColumn, HorizontalNavLink, IconButtonSize, Link, MainMenuItem, NavItem, NavMenuItem, NumericStep, ScmsNavItem, ScmsNavSubItem, Size, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, WizardStep };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ascentgl/ads-ui",
-  "version": "20.0.1",
+  "version": "20.0.3",
   "peerDependencies": {
-    "@ascentgl/ads-icons": ">=0.0.0",
-    "@ascentgl/ads-utils": ">=0.0.0",
+    "@ascentgl/ads-icons": ">=20.0.1",
+    "@ascentgl/ads-utils": ">=20.0.1",
     "@jsverse/transloco": ">=7.0.0",
     "ag-grid-angular": "33.0.3",
     "ag-grid-community": "33.0.3",
@@ -32,10 +32,6 @@
       "types": "./src/lib/components/avatar/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-avatar.mjs"
     },
-    "./src/lib/components/drag-and-drop-list": {
-      "types": "./src/lib/components/drag-and-drop-list/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-drag-and-drop-list.mjs"
-    },
     "./src/lib/components/footer": {
       "types": "./src/lib/components/footer/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-footer.mjs"
@@ -52,6 +48,10 @@
       "types": "./src/lib/components/splash-page/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-splash-page.mjs"
     },
+    "./src/lib/components/drag-and-drop-list": {
+      "types": "./src/lib/components/drag-and-drop-list/index.d.ts",
+      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-drag-and-drop-list.mjs"
+    },
     "./src/lib/components/buttons/button-container": {
       "types": "./src/lib/components/buttons/button-container/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-buttons-button-container.mjs"

package/src/assets/sass/ads-ui/abstracts/_functions.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
-@use 'variables' as *;
-
-@function color($key) {
-  @return var(--color- + $key);
-}
-
-@function font-weight($key) {
-  @return map.get($font-weights, $key);
-}
-
-@function font-size($key) {
-  @return map.get($font-sizes, $key);
-}
-
-@function spacing($key) {
-  @return map.get($spacings, $key);
-}
+@use 'sass:map';
+@use 'variables' as *;
+
+@function color($key) {
+  @return var(--color- + $key);
+}
+
+@function font-weight($key) {
+  @return map.get($font-weights, $key);
+}
+
+@function font-size($key) {
+  @return map.get($font-sizes, $key);
+}
+
+@function spacing($key) {
+  @return map.get($spacings, $key);
+}

package/src/assets/sass/ads-ui/abstracts/_mixins.scss

@@ -1,90 +1,90 @@
-// Media Queries
-@use 'functions' as *;
-
-@mixin breakpoint($breakpoint) {
-  @if $breakpoint == xs {
-    @media screen and (min-width: 320px) and (max-width: 480px) {
-      @content;
-    }
-  } @else if $breakpoint == sm {
-    @media screen and (min-width: 481px) and (max-width: 768px) {
-      @content;
-    }
-  } @else if $breakpoint == md {
-    @media screen and (min-width: 769px) and (max-width: 1024px) {
-      @content;
-    }
-  } @else if $breakpoint == lg {
-    @media screen and (min-width: 1025px) and (max-width: 1200px) {
-      @content;
-    }
-  } @else if $breakpoint == xl {
-    @media screen and (min-width: 1201px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-sm {
-    @media screen and (max-width: 480px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-md {
-    @media screen and (max-width: 768px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-lg {
-    @media screen and (max-width: 1024px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-xl {
-    @media screen and (max-width: 1200px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-xs {
-    @media screen and (min-width: 481px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-sm {
-    @media screen and (min-width: 769px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-md {
-    @media screen and (min-width: 1025px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-lg {
-    @media screen and (min-width: 1201px) {
-      @content;
-    }
-  }
-}
-
-@mixin font-size($breakpoint: base) {
-  @if $breakpoint == xs {
-    font-size: 0.75rem;
-  } @else if $breakpoint == sm {
-    font-size: 0.875rem;
-  } @else if $breakpoint == base {
-    font-size: 1rem;
-  } @else if $breakpoint == lg {
-    font-size: 1.125rem;
-  } @else if $breakpoint == xl {
-    font-size: 1.25rem;
-  } @else if $breakpoint == 2xl {
-    font-size: 1.5rem;
-  } @else if $breakpoint == 3xl {
-    font-size: 1.875rem;
-  } @else if $breakpoint == 4xl {
-    font-size: 2.25rem;
-  } @else if $breakpoint == 5xl {
-    font-size: 3rem;
-  } @else if $breakpoint == 6xl {
-    font-size: 4rem;
-  }
-}
-
-@mixin background-color($theme: primary) {
-  background-color: color($theme);
-}
-
-@mixin color($theme: dark) {
-  color: color($theme);
-}
+// Media Queries
+@use 'functions' as *;
+
+@mixin breakpoint($breakpoint) {
+  @if $breakpoint == xs {
+    @media screen and (min-width: 320px) and (max-width: 480px) {
+      @content;
+    }
+  } @else if $breakpoint == sm {
+    @media screen and (min-width: 481px) and (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == md {
+    @media screen and (min-width: 769px) and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == lg {
+    @media screen and (min-width: 1025px) and (max-width: 1200px) {
+      @content;
+    }
+  } @else if $breakpoint == xl {
+    @media screen and (min-width: 1201px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-sm {
+    @media screen and (max-width: 480px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-md {
+    @media screen and (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-lg {
+    @media screen and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-xl {
+    @media screen and (max-width: 1200px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-xs {
+    @media screen and (min-width: 481px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-sm {
+    @media screen and (min-width: 769px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-md {
+    @media screen and (min-width: 1025px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-lg {
+    @media screen and (min-width: 1201px) {
+      @content;
+    }
+  }
+}
+
+@mixin font-size($breakpoint: base) {
+  @if $breakpoint == xs {
+    font-size: 0.75rem;
+  } @else if $breakpoint == sm {
+    font-size: 0.875rem;
+  } @else if $breakpoint == base {
+    font-size: 1rem;
+  } @else if $breakpoint == lg {
+    font-size: 1.125rem;
+  } @else if $breakpoint == xl {
+    font-size: 1.25rem;
+  } @else if $breakpoint == 2xl {
+    font-size: 1.5rem;
+  } @else if $breakpoint == 3xl {
+    font-size: 1.875rem;
+  } @else if $breakpoint == 4xl {
+    font-size: 2.25rem;
+  } @else if $breakpoint == 5xl {
+    font-size: 3rem;
+  } @else if $breakpoint == 6xl {
+    font-size: 4rem;
+  }
+}
+
+@mixin background-color($theme: primary) {
+  background-color: color($theme);
+}
+
+@mixin color($theme: dark) {
+  color: color($theme);
+}