@ascentgl/ads-ui 22.14.1 → 22.15.0

package/package.json

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

package/src/assets/sass/ads-ui/overrides/angular-material/_dropdown.scss

@@ -10,6 +10,19 @@
   &.ads-dropdown-panel {
     padding: 0;
 
+    // A panel with a pinned header or footer stops being the scrolling element
+    // and becomes a column that holds one: the bars take their own height and
+    // the options' box absorbs what is left, so the scrollbar runs between them
+    // instead of the full height of the panel.
+    //
+    // `max-height` above still caps the panel, so the whole thing — bars
+    // included — stays within it.
+    &.has-pinned-chrome {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
     &.fit-content {
       min-width: fit-content;
     }

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

@@ -159,7 +159,7 @@ declare class AdsButtonComponent {
     /** Whether the button is a smaller version */
     size: i0.InputSignal<Size>;
     /** Sets the "type" attribute on the button */
-    type: i0.InputSignal<"reset" | "submit" | "button">;
+    type: i0.InputSignal<"button" | "submit" | "reset">;
     /** Makes the button take 100% width of its container */
     fullWidth: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsButtonComponent, never>;
@@ -1531,6 +1531,28 @@ type SearchDropdownStaticOption = {
     onClick?: (currentInputValue: string) => void;
     cssClass?: string;
 };
+/**
+ * A bar pinned to the bottom of the panel, below the scrolling options: a
+ * read-only label on the left and, on the right, a single action.
+ *
+ * Unlike a static option this is not an option — it never joins the option
+ * list, arrow keys skip it, and only the action button reacts to a click. That
+ * is what lets the label state something about the results, such as how many
+ * of them are shown, without being a click target itself.
+ */
+type SearchDropdownFooterOption = {
+    /** Left-hand text, or a template when it needs markup. Rendered inert. */
+    label?: string | TemplateRef<SearchDropdownStaticOptionTemplateContext>;
+    /**
+     * The right-hand action's label. Omit for a footer that only reports
+     * something. Accepts a template so a caller whose text is translated or
+     * interpolated can supply it without resolving the string up front.
+     */
+    actionLabel?: string | TemplateRef<SearchDropdownStaticOptionTemplateContext>;
+    /** Receives the input's current value, as a static option's `onClick` does. */
+    onActionClick?: (currentInputValue: string) => void;
+    cssClass?: string;
+};
 
 type TEMPLATE_TYPE = {
     $implicit: DropdownComponentOption;
@@ -1574,6 +1596,21 @@ declare class AdsSearchDropdownComponent extends AbstractDropdownComponent imple
     prependOption: SearchDropdownStaticOption | undefined;
     /** If "true", will show prependOption. Default is false */
     showPrependOption: boolean;
+    /**
+     * If "true", pins prependOption to the top of the panel so it stays visible
+     * while the options scroll beneath it. Default is false, which scrolls it
+     * away with them.
+     */
+    stickyPrependOption: boolean;
+    /**
+     * Provide configuration for a bar pinned to the bottom of the panel, below
+     * the scrolling options — a read-only label and a single action button.
+     *
+     * Not an option: arrow keys skip it, and only its button reacts to a click.
+     * Use it where the panel needs to say something about its results, such as
+     * how many of them are shown, beside one way out.
+     */
+    footerOption: SearchDropdownFooterOption | undefined;
     /** Provide event that is fired when enter key is down while input value is being set */
     onEnterKeyDown: ((currentInputValue: string) => void) | undefined;
     /** Provide callback that will vbe executed when user clicks on magnifying glass icon */
@@ -1630,6 +1667,12 @@ declare class AdsSearchDropdownComponent extends AbstractDropdownComponent imple
     noDataMatOption?: MatOption;
     /** @ignore */
     staticDataMatOption?: MatOption;
+    /**
+     * @ignore
+     * The box the options scroll in when a pinned slot is used. Lives inside the
+     * autocomplete panel, so it only exists once the panel has been opened.
+     */
+    optionsScroller?: ElementRef<HTMLElement>;
     /** @ignore */
     auto?: MatAutocomplete;
     /** @ignore */
@@ -1683,6 +1726,24 @@ declare class AdsSearchDropdownComponent extends AbstractDropdownComponent imple
     get canUseStaticOption(): boolean;
     /** @ignore */
     get canUsePrependOption(): boolean;
+    /**
+     * @ignore
+     * Hidden while results are still loading, so the bar doesn't report a stale
+     * count over a list that is about to be replaced. Deliberately not gated on
+     * there being options: a footer reporting that nothing was found is a valid
+     * use, and the caller decides by passing the option or not.
+     */
+    get canUseFooterOption(): boolean;
+    /**
+     * @ignore
+     * Whether either pinned slot is in play, and so whether the options need
+     * their own scrolling box between them.
+     *
+     * Read off the inputs rather than the `canUse*` getters on purpose: those
+     * turn false while results load, and the options must not jump out of their
+     * scroller and back on every keystroke.
+     */
+    get hasPinnedChrome(): boolean;
     /** @ignore */
     get showDropdownIcon(): boolean;
     /** @ignore */
@@ -1701,6 +1762,14 @@ declare class AdsSearchDropdownComponent extends AbstractDropdownComponent imple
     getDisplayedValueAsString(checkAdditionalFormatting?: boolean): string;
     /** @ignore */
     reset(): void;
+    /**
+     * @ignore
+     * Bound to mousedown rather than click for the same reason static options
+     * are: the action blurs the input to close the panel, and a click event
+     * dispatched after that blur may never reach a button that has gone away
+     * with it.
+     */
+    onFooterActionMouseDown(event: MouseEvent): void;
     /** @ignore */
     onStaticOptionMouseDown(event: MouseEvent, option: SearchDropdownStaticOption): void;
     /** @ignore */
@@ -1749,6 +1818,22 @@ declare class AdsSearchDropdownComponent extends AbstractDropdownComponent imple
     /** @ignore */
     private setControlValueFromOption;
     private setControlValue;
+    /**
+     * @ignore
+     * Points Material's "keep the active option in view" scrolling at the box the
+     * options actually scroll in.
+     *
+     * With a pinned header or footer the panel itself no longer scrolls — the box
+     * between them does — so `_setScrollTop`, which drives the panel's own
+     * `scrollTop`, would quietly do nothing and arrow-keying past the visible
+     * rows would leave the active one off screen. Overridden on the instance
+     * rather than reimplemented, so Material goes on deciding *where* to scroll
+     * and this only redirects *what*. Falls through to the panel whenever there
+     * is no scroller, which is every consumer that hasn't asked for a pinned
+     * slot.
+     */
+    private redirectPanelScrollToOptions;
+    /** @ignore */
     private overrideKeydownHandler;
     private modifyOptionClickEvent;
     /** @ignore */
@@ -1762,7 +1847,7 @@ declare class AdsSearchDropdownComponent extends AbstractDropdownComponent imple
     private autoResizeTextarea;
     private setupIntersectionObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<AdsSearchDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsSearchDropdownComponent, "ads-search-dropdown", never, { "externalButton": { "alias": "externalButton"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "options": { "alias": "options"; "required": false; }; "staticOptions": { "alias": "staticOptions"; "required": false; }; "filterOptions": { "alias": "filterOptions"; "required": false; }; "emitEmptyValues": { "alias": "emitEmptyValues"; "required": false; }; "loadSuggestionOnInit": { "alias": "loadSuggestionOnInit"; "required": false; }; "noDataOption": { "alias": "noDataOption"; "required": false; }; "showNoDataOption": { "alias": "showNoDataOption"; "required": false; }; "moreDataOption": { "alias": "moreDataOption"; "required": false; }; "staticDataOption": { "alias": "staticDataOption"; "required": false; }; "prependOption": { "alias": "prependOption"; "required": false; }; "showPrependOption": { "alias": "showPrependOption"; "required": false; }; "onEnterKeyDown": { "alias": "onEnterKeyDown"; "required": false; }; "searchIconClickCallback": { "alias": "searchIconClickCallback"; "required": false; }; "showSearchIcon": { "alias": "showSearchIcon"; "required": false; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; }; "displayValueFormatter": { "alias": "displayValueFormatter"; "required": false; }; "useOptionTemplate": { "alias": "useOptionTemplate"; "required": false; }; "minValueLength": { "alias": "minValueLength"; "required": false; }; "preventClick": { "alias": "preventClick"; "required": false; }; "closePanelEnabled": { "alias": "closePanelEnabled"; "required": false; }; "trimValue": { "alias": "trimValue"; "required": false; }; "closeOnOutOfView": { "alias": "closeOnOutOfView"; "required": false; }; "outOfViewRootMargin": { "alias": "outOfViewRootMargin"; "required": false; }; "control": { "alias": "control"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "externalButtonClick": "externalButtonClick"; "focusInput": "focusInput"; "blurInput": "blurInput"; "emitSearchValueInput": "emitSearchValueInput"; }, ["optionRef"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsSearchDropdownComponent, "ads-search-dropdown", never, { "externalButton": { "alias": "externalButton"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "options": { "alias": "options"; "required": false; }; "staticOptions": { "alias": "staticOptions"; "required": false; }; "filterOptions": { "alias": "filterOptions"; "required": false; }; "emitEmptyValues": { "alias": "emitEmptyValues"; "required": false; }; "loadSuggestionOnInit": { "alias": "loadSuggestionOnInit"; "required": false; }; "noDataOption": { "alias": "noDataOption"; "required": false; }; "showNoDataOption": { "alias": "showNoDataOption"; "required": false; }; "moreDataOption": { "alias": "moreDataOption"; "required": false; }; "staticDataOption": { "alias": "staticDataOption"; "required": false; }; "prependOption": { "alias": "prependOption"; "required": false; }; "showPrependOption": { "alias": "showPrependOption"; "required": false; }; "stickyPrependOption": { "alias": "stickyPrependOption"; "required": false; }; "footerOption": { "alias": "footerOption"; "required": false; }; "onEnterKeyDown": { "alias": "onEnterKeyDown"; "required": false; }; "searchIconClickCallback": { "alias": "searchIconClickCallback"; "required": false; }; "showSearchIcon": { "alias": "showSearchIcon"; "required": false; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; }; "displayValueFormatter": { "alias": "displayValueFormatter"; "required": false; }; "useOptionTemplate": { "alias": "useOptionTemplate"; "required": false; }; "minValueLength": { "alias": "minValueLength"; "required": false; }; "preventClick": { "alias": "preventClick"; "required": false; }; "closePanelEnabled": { "alias": "closePanelEnabled"; "required": false; }; "trimValue": { "alias": "trimValue"; "required": false; }; "closeOnOutOfView": { "alias": "closeOnOutOfView"; "required": false; }; "outOfViewRootMargin": { "alias": "outOfViewRootMargin"; "required": false; }; "control": { "alias": "control"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "externalButtonClick": "externalButtonClick"; "focusInput": "focusInput"; "blurInput": "blurInput"; "emitSearchValueInput": "emitSearchValueInput"; }, ["optionRef"], never, true, never>;
 }
 
 declare class AdsSearchInputComponent extends AdsInputComponent {
@@ -4213,4 +4298,4 @@ declare function provideAdsUi(config: 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, AdsRateOptionCardComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsVerticalStepComponent, AdsVerticalStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, VerticalStepStatus, 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 };
+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, SearchDropdownFooterOption, SearchDropdownStaticOption, SearchDropdownStaticOptionTemplateContext, ShipmentStep, Size, SnackBarData, SortComparator, SortMenuChangeEvent, SortType, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, VerticalSideNavigationStep, WizardStep };