@ascentgl/ads-ui 22.1.0 → 22.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ascentgl/ads-ui",
-  "version": "22.1.0",
+  "version": "22.8.0",
   "peerDependencies": {
     "@angular/animations": ">=22.0.0",
     "date-fns": ">=4.1.0",

package/types/ascentgl-ads-ui.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { OnChanges, SimpleChanges, ElementRef, OnInit, AfterContentInit, OnDestroy, Renderer2, AfterViewInit, ChangeDetectorRef, SimpleChange, EventEmitter, TemplateRef, DoCheck, AfterViewChecked, NgZone, QueryList } from '@angular/core';
 import { AdsIconRegistry, IconThemes } from '@ascentgl/ads-icons';
-import { adsIcon } from '@ascentgl/ads-icons/icons';
+import { adsIcon, AdsIcon } from '@ascentgl/ads-icons/icons';
 import { MatMenuPanel, MatMenuTrigger, MatMenu } from '@angular/material/menu';
 import { ScrollStrategy, ConnectedPosition } from '@angular/cdk/overlay';
 import { Subject, Subscription, Observable } from 'rxjs';
@@ -96,7 +96,7 @@ declare class AdsNumericBadgeComponent extends AdsIconHoverComponent {
     /** provide icon name. NOTE: the icon must be registered in icon registry **/
     name: i0.InputSignal<adsIcon>;
     /** choose ads icon theme **/
-    theme: i0.InputSignal<"primary" | "iconPrimary" | "success" | "warn" | "white">;
+    theme: i0.InputSignal<"iconPrimary" | "primary" | "success" | "warn" | "white">;
     /** set badge value as number **/
     value: i0.InputSignal<number>;
     /** @ignore **/
@@ -271,6 +271,76 @@ declare class AscentCardComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<AscentCardComponent, "ascent-card", never, { "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Configuration for the optional tag rendered next to the card heading.
+ */
+interface RateOptionCardTag {
+    /** Text shown inside the tag */
+    label: string;
+    /** Background color of the tag (Colors enum value or any CSS color string) */
+    color?: Colors | string;
+    /** Optional text color override */
+    textColor?: Colors | string;
+    /** Optional leading icon rendered inside the tag. Pass the icon object so it
+     *  can be registered automatically (e.g. `adsIconCheckCircle`). */
+    icon?: AdsIcon;
+    /** Icon stroke color — maps to `ads-icon [stroke]`. Defaults to `white`.
+     *  Forced to `dark` while the card is disabled. */
+    iconStroke?: keyof IconThemes;
+    /** Icon fill/theme color — maps to `ads-icon [theme]`. Left unset by default.
+     *  Forced to `dark` while the card is disabled. */
+    iconTheme?: keyof IconThemes;
+}
+
+/**
+ * A selectable rate/quote option card (ADS-328/329/330).
+ *
+ * Presentational and domain-agnostic: the heading, sub-heading, price and tag
+ * are inputs, and the lower details line is projected via `<ng-content>`.
+ *
+ * Supports the five design states — default, hover, pressed (`:active`),
+ * active (`selected`) and `disabled`. On the disabled state the tag switches to
+ * a muted treatment and its icon color changes accordingly.
+ */
+declare class AdsRateOptionCardComponent {
+    private registry;
+    constructor(registry: AdsIconRegistry);
+    /** Primary heading (e.g. the carrier name) */
+    readonly heading: i0.InputSignal<string>;
+    /** Secondary line under the heading (e.g. the service mode) */
+    readonly subheading: i0.InputSignal<string | undefined>;
+    /** Formatted price string shown on the right (e.g. `"$487.50"`) */
+    readonly price: i0.InputSignal<string | undefined>;
+    /** Show the selection check indicator after the price */
+    readonly showCheckIcon: i0.InputSignal<boolean>;
+    /** Optional tag rendered next to the heading */
+    readonly tag: i0.InputSignal<RateOptionCardTag | null>;
+    /** Marks the card as the active/selected option */
+    readonly selected: i0.InputSignal<boolean>;
+    /** Disables interaction and mutes the card (including the tag icon color) */
+    readonly disabled: i0.InputSignal<boolean>;
+    /** Stable id echoed back on activation and used to build child element ids */
+    readonly cardId: i0.InputSignal<string>;
+    /** Emitted with the `cardId` when the card is activated by click or keyboard */
+    readonly activate: i0.OutputEmitterRef<string>;
+    /** Border color of the tag (only visible in the disabled treatment). */
+    readonly tagBorderColor = Colors.Light;
+    /** Tag background — flips to a neutral surface when disabled. */
+    readonly tagBackground: i0.Signal<string>;
+    /** Tag text color — flips to dark when disabled. */
+    readonly tagTextColor: i0.Signal<string>;
+    /** Tag border width — only drawn in the disabled treatment. */
+    readonly tagBorderWidth: i0.Signal<number>;
+    /** Tag icon stroke color — `dark` when disabled, otherwise the tag's `iconStroke` (default `white`). */
+    readonly tagIconStroke: i0.Signal<keyof IconThemes>;
+    /** Tag icon theme/fill color — `dark` when disabled, otherwise the tag's `iconTheme` (unset by default). */
+    readonly tagIconTheme: i0.Signal<keyof IconThemes | undefined>;
+    /** @ignore */
+    onActivate(event?: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsRateOptionCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsRateOptionCardComponent, "ads-rate-option-card", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "subheading": { "alias": "subheading"; "required": false; "isSignal": true; }; "price": { "alias": "price"; "required": false; "isSignal": true; }; "showCheckIcon": { "alias": "showCheckIcon"; "required": false; "isSignal": true; }; "tag": { "alias": "tag"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "cardId": { "alias": "cardId"; "required": false; "isSignal": true; }; }, { "activate": "activate"; }, never, ["*"], true, never>;
+}
+
 type Tag = {
     id: string;
     tag: string;
@@ -2249,6 +2319,12 @@ interface AdsMenuDropDownItem {
     icon?: adsIcon;
     /** Whether the item is disabled (skipped during keyboard navigation and not selectable) */
     disabled?: boolean;
+    /**
+     * When true, a horizontal divider is rendered directly above this item (unless it is the
+     * first item). Use to visually group actions — e.g. separating a "Set as default" action
+     * from the rest of the menu. Purely presentational; does not affect keyboard navigation.
+     */
+    separatorBefore?: boolean;
 }
 
 declare class AdsMenuDropDownComponent implements AfterViewInit {
@@ -3327,11 +3403,18 @@ type AdsNavItemV2 = {
     href?: string;
     subItems?: AdsNavSubItemV2[];
     showDividerAfterItem?: boolean;
+    /** Force the item highlighted regardless of the router (for click-driven, non-route items). */
+    active?: boolean;
 };
 type AdsNavSubItemV2 = {
     label: string;
     icon?: adsIcon;
-    href: string;
+    /** Optional: omit for click-driven items that are not routes (emit `itemSelect` instead). */
+    href?: string;
+    /** Caller context carried through `itemSelect` (e.g. a tab index). */
+    id?: string;
+    /** Force the item highlighted regardless of the router (for click-driven, non-route items). */
+    active?: boolean;
 };
 
 declare class AdsSideNavBarV2Component implements OnInit, OnDestroy {
@@ -3347,6 +3430,8 @@ declare class AdsSideNavBarV2Component implements OnInit, OnDestroy {
     collapsed: i0.InputSignal<boolean | undefined>;
     /** Emits when collapsed state changes */
     collapsedChange: i0.OutputEmitterRef<boolean>;
+    /** Emits when a click-driven sub-item (one without an `href`) is selected. */
+    itemSelect: i0.OutputEmitterRef<AdsNavSubItemV2>;
     /** @ignore */
     isMobile: i0.WritableSignal<boolean>;
     /** @ignore */
@@ -3365,16 +3450,18 @@ declare class AdsSideNavBarV2Component implements OnInit, OnDestroy {
     toggleCollapsed(): void;
     /** @ignore */
     onNavItemClick(): void;
+    /** @ignore Click handler for sub-items; emits `itemSelect` for non-route (hrefless) items. */
+    onSubItemClick(item: AdsNavSubItemV2): void;
     /** @ignore */
     private checkMobile;
     /** @ignore */
     hasActiveLink(item: AdsNavItemV2): boolean;
-    /** @ignore */
+    /** @ignore Explicit `active` flag wins; falls back to a router match when `href` is set. */
     hasActiveSubLink(item: AdsNavSubItemV2): boolean;
     /** @ignore */
     private isActive;
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsSideNavBarV2Component, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsSideNavBarV2Component, "ads-side-nav-bar-v2", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsedChange": "collapsedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsSideNavBarV2Component, "ads-side-nav-bar-v2", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsedChange": "collapsedChange"; "itemSelect": "itemSelect"; }, never, never, true, never>;
 }
 
 type MainMenuItem = {
@@ -3857,6 +3944,12 @@ interface Tab {
     disabled?: boolean;
     template?: TemplateRef<unknown>;
     headerTemplate?: TemplateRef<unknown>;
+    /** CSS class applied to the tab's header element (mat-tab `labelClass`). */
+    labelClass?: string;
+    /** Context object passed to `headerTemplate` and `template` so one template can render per-tab data. */
+    templateContext?: unknown;
+    /** When `true`, the tab content renders lazily via `matTabContent` (only while the tab is active). */
+    lazy?: boolean;
 }
 declare class AdsTabsComponent implements AfterViewInit {
     tabGroup: i0.Signal<MatTabGroup>;
@@ -3868,6 +3961,10 @@ declare class AdsTabsComponent implements AfterViewInit {
     activeColor: Colors | undefined;
     /** When `true`, the border-bottom on inactive (non-active, non-disabled) tabs is hidden. Defaults to `false`. */
     hideInactiveBorder: boolean;
+    /** When `false`, tab headers size to their content instead of stretching to fill the width. Defaults to `true`. */
+    stretchTabs: boolean;
+    /** Tab change animation duration forwarded to `mat-tab-group` (e.g. `'500ms'`). When `undefined`, Material's default is used. */
+    animationDuration: string | number | undefined;
     selectedIndexChange: EventEmitter<number>;
     tabChange: EventEmitter<{
         index: number;
@@ -3877,7 +3974,7 @@ declare class AdsTabsComponent implements AfterViewInit {
     get _activeColorVar(): string | null;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsTabsComponent, "ads-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "tabWidth": { "alias": "tabWidth"; "required": false; }; "activeColor": { "alias": "activeColor"; "required": false; }; "hideInactiveBorder": { "alias": "hideInactiveBorder"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "tabChange": "tabChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsTabsComponent, "ads-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "tabWidth": { "alias": "tabWidth"; "required": false; }; "activeColor": { "alias": "activeColor"; "required": false; }; "hideInactiveBorder": { "alias": "hideInactiveBorder"; "required": false; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "tabChange": "tabChange"; }, never, never, true, never>;
 }
 
 declare enum CountryCode {
@@ -4043,5 +4140,5 @@ declare function provideAdsUi(config: AdsUiConfig): {
     useValue: AdsUiConfig;
 }[];
 
-export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsMenuDropDownComponent, AdsMenuDropDownTriggerDirective, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
-export type { ActiveFilter, ActiveSort, AdsMenuDropDownItem, AdsMenuDropDownPosition, AdsModalData, AdsNavItemV2, AdsNavSubItemV2, AdsUiConfig, Breadcrumb, ColumnFilterOption, ColumnSortFilterConfig, ColumnSortOption, ColumnVisibilityControl, Copyright, CustomHeaderParams, DROP_CALLBACK_INDEXES, DividerStyle, ErrorPageConfig, ErrorPageInfoColumn, FilterOptionsSortComparator, FilterValueFormatter, HistoryContextTag, HistoryEvent, HistoryGroup, HorizontalNavLink, HorizontalStep, IconButtonSize, Link, MainMenuItem, NavItem, NavMenuItem, NumericStep, ProgressStep, ScmsNavItem, ScmsNavSubItem, SearchDropdownComponentOptions, SearchDropdownDisplayControlValue, SearchDropdownStaticOption, SearchDropdownStaticOptionTemplateContext, ShipmentStep, Size, SnackBarData, SortComparator, SortMenuChangeEvent, SortType, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, VerticalSideNavigationStep, WizardStep };
+export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsMenuDropDownComponent, AdsMenuDropDownTriggerDirective, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsRateOptionCardComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
+export type { ActiveFilter, ActiveSort, AdsMenuDropDownItem, AdsMenuDropDownPosition, AdsModalData, AdsNavItemV2, AdsNavSubItemV2, AdsUiConfig, Breadcrumb, ColumnFilterOption, ColumnSortFilterConfig, ColumnSortOption, ColumnVisibilityControl, Copyright, CustomHeaderParams, DROP_CALLBACK_INDEXES, DividerStyle, ErrorPageConfig, ErrorPageInfoColumn, FilterOptionsSortComparator, FilterValueFormatter, HistoryContextTag, HistoryEvent, HistoryGroup, HorizontalNavLink, HorizontalStep, IconButtonSize, Link, MainMenuItem, NavItem, NavMenuItem, NumericStep, ProgressStep, RateOptionCardTag, ScmsNavItem, ScmsNavSubItem, SearchDropdownComponentOptions, SearchDropdownDisplayControlValue, SearchDropdownStaticOption, SearchDropdownStaticOptionTemplateContext, ShipmentStep, Size, SnackBarData, SortComparator, SortMenuChangeEvent, SortType, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, VerticalSideNavigationStep, WizardStep };