@gravionlabs/helix-ui 22.2.1 → 22.2.3

package/types/gravionlabs-helix-ui.d.ts

@@ -683,6 +683,180 @@ export declare class HxCard {
     };
   }, {}, never, ["[hxCardTitle]", "[hxCardHeader]", "[hxCardSubtitle]", "*", "[hxCardFooter]"], true, never>;
 }
+type HxCarouselOrientation = 'horizontal' | 'vertical';
+/** How many items are visible and scrolled at a viewport width (`breakpoint` is a max-width, `'1024px'`). */
+interface HxCarouselResponsiveOption {
+  breakpoint: string;
+  numVisible: number;
+  numScroll: number;
+}
+interface HxCarouselItemContext<T = unknown> {
+  $implicit: T;
+  index: number;
+}
+/** The template of one item: `<ng-template hxCarouselItem let-item let-index="index">`. */
+export declare class HxCarouselItem {
+  readonly template: TemplateRef<HxCarouselItemContext<unknown>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxCarouselItem, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxCarouselItem, "ng-template[hxCarouselItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A slider over a list of items: `numVisible` items at a time, moved by `numScroll` with the previous/next buttons,
+ * the page indicators or the arrow keys; optional autoplay and circular paging.
+ *
+ * ```html
+ * <hx-carousel [value]="products" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsive" ariaLabel="Products">
+ *   <ng-template hxCarouselItem let-product>…</ng-template>
+ * </hx-carousel>
+ * ```
+ *
+ * The carousel is a `region` with `aria-roledescription="carousel"`; the items are `group`s named "n of m"; items
+ * outside the viewport are hidden from assistive technology and the tab order. Autoplay pauses while the pointer or
+ * the focus is inside and stays off when the user prefers reduced motion.
+ */
+export declare class HxCarousel<T = unknown> {
+  readonly value: import("@angular/core").InputSignal<readonly T[]>;
+  readonly numVisible: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly numScroll: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** After the last page comes the first again. */
+  readonly circular: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Milliseconds between automatic page changes; 0 is off. */
+  readonly autoplayInterval: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly orientation: import("@angular/core").InputSignal<HxCarouselOrientation>;
+  /** Height of the viewport when vertical. */
+  readonly verticalViewPortHeight: import("@angular/core").InputSignal<string>;
+  readonly showIndicators: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showNavigators: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly responsiveOptions: import("@angular/core").InputSignal<readonly HxCarouselResponsiveOption[] | undefined>;
+  /** The current page (0-based); `pageChange` is its output. */
+  readonly page: import("@angular/core").ModelSignal<number>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly prevLabel: import("@angular/core").InputSignal<string>;
+  readonly nextLabel: import("@angular/core").InputSignal<string>;
+  /** `{page}` and `{pageCount}` are replaced. */
+  readonly pageLabelTemplate: import("@angular/core").InputSignal<string>;
+  /** `{index}` and `{count}` are replaced. */
+  readonly itemLabelTemplate: import("@angular/core").InputSignal<string>;
+  protected readonly itemTemplate: import("@angular/core").Signal<HxCarouselItem | undefined>;
+  protected readonly hovered: import("@angular/core").WritableSignal<boolean>;
+  protected readonly focused: import("@angular/core").WritableSignal<boolean>;
+  protected readonly id: string;
+  private readonly viewportWidth;
+  private readonly reducedMotion;
+  /** The visible/scroll counts for the current viewport (the smallest matching breakpoint wins). */
+  private readonly counts;
+  protected readonly visible: import("@angular/core").Signal<number>;
+  protected readonly scroll: import("@angular/core").Signal<number>;
+  protected readonly pageCount: import("@angular/core").Signal<number>;
+  protected readonly currentPage: import("@angular/core").Signal<number>;
+  /** The index of the first visible item. */
+  protected readonly first: import("@angular/core").Signal<number>;
+  protected readonly pages: import("@angular/core").Signal<number[]>;
+  protected readonly isFirst: import("@angular/core").Signal<boolean>;
+  protected readonly isLast: import("@angular/core").Signal<boolean>;
+  protected readonly prevDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly nextDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly itemSize: import("@angular/core").Signal<number>;
+  protected readonly offset: import("@angular/core").Signal<number>;
+  protected readonly transform: import("@angular/core").Signal<string>;
+  constructor();
+  protected isVisible(index: number): boolean;
+  protected itemLabel(index: number): string;
+  protected pageLabel(page: number): string;
+  /** Goes to a page (0-based); wraps around when `circular`, else clamps. */
+  goTo(page: number): void;
+  next(auto?: boolean): void;
+  prev(): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onIndicatorKeydown(event: KeyboardEvent): void;
+  protected onFocusOut(event: FocusEvent): void;
+  protected onResize(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxCarousel<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxCarousel<any>, "hx-carousel", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "numVisible": {
+      "alias": "numVisible";
+      "required": false;
+      "isSignal": true;
+    };
+    "numScroll": {
+      "alias": "numScroll";
+      "required": false;
+      "isSignal": true;
+    };
+    "circular": {
+      "alias": "circular";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoplayInterval": {
+      "alias": "autoplayInterval";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "verticalViewPortHeight": {
+      "alias": "verticalViewPortHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIndicators": {
+      "alias": "showIndicators";
+      "required": false;
+      "isSignal": true;
+    };
+    "showNavigators": {
+      "alias": "showNavigators";
+      "required": false;
+      "isSignal": true;
+    };
+    "responsiveOptions": {
+      "alias": "responsiveOptions";
+      "required": false;
+      "isSignal": true;
+    };
+    "page": {
+      "alias": "page";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "prevLabel": {
+      "alias": "prevLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextLabel": {
+      "alias": "nextLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageLabelTemplate": {
+      "alias": "pageLabelTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemLabelTemplate": {
+      "alias": "itemLabelTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "page": "pageChange";
+  }, ["itemTemplate"], ["[hxCarouselHeader]", "[hxCarouselFooter]"], true, never>;
+}
 type HxChartType = 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar';
 /** What `(dataSelect)` carries: the click and what chart.js found under it. */
 interface HxChartSelectEvent {
@@ -2441,6 +2615,213 @@ export declare class HxFloatLabel {
     };
   }, {}, never, ["*"], true, never>;
 }
+/** One picture of a galleria. */
+interface HxGalleriaItem {
+  src: string;
+  alt: string;
+  /** A smaller picture for the thumbnail strip (default: `src`). */
+  thumbnailSrc?: string;
+  title?: string;
+  caption?: string;
+}
+type HxGalleriaThumbnailsPosition = 'bottom' | 'top' | 'left' | 'right';
+interface HxGalleriaItemContext {
+  $implicit: HxGalleriaItem;
+  index: number;
+}
+/** The template of the stage: `<ng-template hxGalleriaItem let-item let-index="index">`. */
+export declare class HxGalleriaItemTemplate {
+  readonly template: TemplateRef<HxGalleriaItemContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxGalleriaItemTemplate, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxGalleriaItemTemplate, "ng-template[hxGalleriaItem]", never, {}, {}, never, never, true, never>;
+}
+/** The template of a thumbnail: `<ng-template hxGalleriaThumbnail let-item>`. */
+export declare class HxGalleriaThumbnail {
+  readonly template: TemplateRef<HxGalleriaItemContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxGalleriaThumbnail, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxGalleriaThumbnail, "ng-template[hxGalleriaThumbnail]", never, {}, {}, never, never, true, never>;
+}
+/** The template of the caption over the stage: `<ng-template hxGalleriaCaption let-item>`. */
+export declare class HxGalleriaCaption {
+  readonly template: TemplateRef<HxGalleriaItemContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxGalleriaCaption, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxGalleriaCaption, "ng-template[hxGalleriaCaption]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * An image gallery: a stage with the current picture, a strip of thumbnails, previous/next buttons, captions and an
+ * optional full-screen mode in a modal overlay.
+ *
+ * ```html
+ * <hx-galleria [value]="pictures" [(activeIndex)]="index" [numVisible]="5" circular ariaLabel="Product pictures" />
+ * <hx-galleria [value]="pictures" fullScreen [(visible)]="open" />
+ * ```
+ *
+ * The stage is a `region` with `aria-roledescription="carousel"` and the arrow keys move between pictures; the
+ * thumbnails are a `tablist`. Full screen is a modal dialog: the focus is trapped, Escape closes it and the focus goes
+ * back to where it was.
+ */
+export declare class HxGalleria {
+  #private;
+  readonly value: import("@angular/core").InputSignal<readonly HxGalleriaItem[]>;
+  /** The picture on the stage (0-based); `activeIndexChange` is its output. */
+  readonly activeIndex: import("@angular/core").ModelSignal<number>;
+  /** Thumbnails shown at a time. */
+  readonly numVisible: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** After the last picture comes the first again. */
+  readonly circular: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly autoplay: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly autoplayInterval: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly showThumbnails: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Dots over the stage. */
+  readonly showIndicators: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showItemNavigators: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly thumbnailsPosition: import("@angular/core").InputSignal<HxGalleriaThumbnailsPosition>;
+  /** The gallery is not shown inline; `visible` opens it in a modal overlay. */
+  readonly fullScreen: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Full screen open (with `fullScreen`); `visibleChange` is its output. */
+  readonly visible: import("@angular/core").ModelSignal<boolean>;
+  /** CSS height of the stage inline (full screen uses the viewport). */
+  readonly height: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly prevLabel: import("@angular/core").InputSignal<string>;
+  readonly nextLabel: import("@angular/core").InputSignal<string>;
+  readonly closeLabel: import("@angular/core").InputSignal<string>;
+  /** `{index}` and `{count}` are replaced. */
+  readonly itemLabelTemplate: import("@angular/core").InputSignal<string>;
+  protected readonly itemTemplate: import("@angular/core").Signal<HxGalleriaItemTemplate | undefined>;
+  protected readonly thumbnailTemplate: import("@angular/core").Signal<HxGalleriaThumbnail | undefined>;
+  protected readonly captionTemplate: import("@angular/core").Signal<HxGalleriaCaption | undefined>;
+  private readonly content;
+  protected readonly hovered: import("@angular/core").WritableSignal<boolean>;
+  protected readonly focused: import("@angular/core").WritableSignal<boolean>;
+  protected readonly id: string;
+  private readonly reducedMotion;
+  protected readonly count: import("@angular/core").Signal<number>;
+  protected readonly index: import("@angular/core").Signal<number>;
+  protected readonly current: import("@angular/core").Signal<HxGalleriaItem | undefined>;
+  protected readonly isFirst: import("@angular/core").Signal<boolean>;
+  protected readonly isLast: import("@angular/core").Signal<boolean>;
+  protected readonly prevDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly nextDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly indices: import("@angular/core").Signal<number[]>;
+  protected readonly hasCaption: import("@angular/core").Signal<boolean>;
+  /** The first thumbnail of the strip: the strip moves so the active picture stays visible. */
+  private readonly thumbStart;
+  protected readonly thumbsVisible: import("@angular/core").Signal<number>;
+  protected readonly thumbNavigation: import("@angular/core").Signal<boolean>;
+  protected readonly thumbs: import("@angular/core").Signal<number[]>;
+  protected readonly thumbPrevDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly thumbNextDisabled: import("@angular/core").Signal<boolean>;
+  constructor();
+  protected itemLabel(index: number): string;
+  protected thumbnailSrc(item: HxGalleriaItem): string;
+  /** Shows a picture (0-based); wraps around when `circular`, else clamps. */
+  goTo(index: number): void;
+  next(auto?: boolean): void;
+  prev(): void;
+  protected scrollThumbs(delta: number): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onThumbKeydown(event: KeyboardEvent): void;
+  protected onFocusIn(): void;
+  protected onFocusOut(event: FocusEvent): void;
+  protected close(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxGalleria, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxGalleria, "hx-galleria", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "activeIndex": {
+      "alias": "activeIndex";
+      "required": false;
+      "isSignal": true;
+    };
+    "numVisible": {
+      "alias": "numVisible";
+      "required": false;
+      "isSignal": true;
+    };
+    "circular": {
+      "alias": "circular";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoplay": {
+      "alias": "autoplay";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoplayInterval": {
+      "alias": "autoplayInterval";
+      "required": false;
+      "isSignal": true;
+    };
+    "showThumbnails": {
+      "alias": "showThumbnails";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIndicators": {
+      "alias": "showIndicators";
+      "required": false;
+      "isSignal": true;
+    };
+    "showItemNavigators": {
+      "alias": "showItemNavigators";
+      "required": false;
+      "isSignal": true;
+    };
+    "thumbnailsPosition": {
+      "alias": "thumbnailsPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullScreen": {
+      "alias": "fullScreen";
+      "required": false;
+      "isSignal": true;
+    };
+    "visible": {
+      "alias": "visible";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "prevLabel": {
+      "alias": "prevLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextLabel": {
+      "alias": "nextLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemLabelTemplate": {
+      "alias": "itemLabelTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "activeIndex": "activeIndexChange";
+    "visible": "visibleChange";
+  }, ["itemTemplate", "thumbnailTemplate", "captionTemplate"], never, true, never>;
+}
 type HxIconPosition = 'left' | 'right';
 /**
  * An icon inside a text field. Wrap an `hx-input` (or `hx-password`) and one `hx-input-icon` element; the
@@ -2477,6 +2858,167 @@ export declare class HxInputIcon {
   static ɵfac: i0.ɵɵFactoryDeclaration<HxInputIcon, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<HxInputIcon, "[hx-input-icon]", never, {}, {}, never, never, true, never>;
 }
+/** The content of the hover indicator over a previewable image: `<ng-template hxImageIndicator>`. */
+export declare class HxImageIndicator {
+  readonly template: TemplateRef<unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxImageIndicator, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxImageIndicator, "ng-template[hxImageIndicator]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * An image, optionally with a preview: a click (or Enter on the button over it) opens the picture in a modal
+ * overlay with a toolbar to rotate, zoom and close.
+ *
+ * ```html
+ * <hx-image src="product.jpg" alt="Bamboo watch" width="250" preview />
+ * <hx-image src="thumb.jpg" previewImageSrc="large.jpg" alt="Bamboo watch" preview />
+ * ```
+ *
+ * The preview trigger is a button named "Preview {alt}"; the overlay is a modal dialog (focus trap, Escape closes,
+ * focus restored); the toolbar buttons are labelled; + and - zoom from the keyboard.
+ */
+export declare class HxImage {
+  #private;
+  readonly src: import("@angular/core").InputSignal<string>;
+  readonly alt: import("@angular/core").InputSignal<string>;
+  /** Width and height of the inline image (CSS or number of pixels). */
+  readonly width: import("@angular/core").InputSignal<string | number | undefined>;
+  readonly height: import("@angular/core").InputSignal<string | number | undefined>;
+  /** A click opens the picture in an overlay. */
+  readonly preview: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** A larger picture for the overlay (default: `src`). */
+  readonly previewImageSrc: import("@angular/core").InputSignal<string | undefined>;
+  readonly imageClass: import("@angular/core").InputSignal<string | undefined>;
+  readonly imageStyle: import("@angular/core").InputSignal<Record<string, string> | undefined>;
+  readonly showToolbar: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly zoomStep: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly zoomMin: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly zoomMax: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** `{alt}` is replaced. */
+  readonly previewLabelTemplate: import("@angular/core").InputSignal<string>;
+  readonly rotateLeftLabel: import("@angular/core").InputSignal<string>;
+  readonly rotateRightLabel: import("@angular/core").InputSignal<string>;
+  readonly zoomOutLabel: import("@angular/core").InputSignal<string>;
+  readonly zoomInLabel: import("@angular/core").InputSignal<string>;
+  readonly closeLabel: import("@angular/core").InputSignal<string>;
+  /** The preview opened. */
+  readonly show: import("@angular/core").OutputEmitterRef<void>;
+  /** The preview closed. */
+  readonly hide: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly indicatorTemplate: import("@angular/core").Signal<HxImageIndicator | undefined>;
+  private readonly overlay;
+  protected readonly rotation: import("@angular/core").WritableSignal<number>;
+  protected readonly scale: import("@angular/core").WritableSignal<number>;
+  protected readonly transform: import("@angular/core").Signal<string>;
+  protected readonly previewLabel: import("@angular/core").Signal<string>;
+  protected readonly previewSrc: import("@angular/core").Signal<string>;
+  protected readonly zoomOutDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly zoomInDisabled: import("@angular/core").Signal<boolean>;
+  constructor();
+  protected cssSize(value: string | number | undefined): string | null;
+  /** Opens the preview. */
+  open(): void;
+  /** Closes the preview. */
+  close(): void;
+  protected rotate(degrees: number): void;
+  protected zoom(direction: 1 | -1): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxImage, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxImage, "hx-image", never, {
+    "src": {
+      "alias": "src";
+      "required": true;
+      "isSignal": true;
+    };
+    "alt": {
+      "alias": "alt";
+      "required": true;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "preview": {
+      "alias": "preview";
+      "required": false;
+      "isSignal": true;
+    };
+    "previewImageSrc": {
+      "alias": "previewImageSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "imageClass": {
+      "alias": "imageClass";
+      "required": false;
+      "isSignal": true;
+    };
+    "imageStyle": {
+      "alias": "imageStyle";
+      "required": false;
+      "isSignal": true;
+    };
+    "showToolbar": {
+      "alias": "showToolbar";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomStep": {
+      "alias": "zoomStep";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomMin": {
+      "alias": "zoomMin";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomMax": {
+      "alias": "zoomMax";
+      "required": false;
+      "isSignal": true;
+    };
+    "previewLabelTemplate": {
+      "alias": "previewLabelTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+    "rotateLeftLabel": {
+      "alias": "rotateLeftLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "rotateRightLabel": {
+      "alias": "rotateRightLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomOutLabel": {
+      "alias": "zoomOutLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomInLabel": {
+      "alias": "zoomInLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "show": "show";
+    "hide": "hide";
+  }, ["indicatorTemplate"], never, true, never>;
+}
 type HxInputSize = 'small' | 'medium' | 'large';
 type HxInputVariant = 'outlined' | 'filled';
 /**
@@ -3783,6 +4325,13 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
   readonly optionDisabled: import("@angular/core").InputSignal<Accessor<never, boolean>>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** A search field above the list that narrows the options (case-insensitive "contains"). */
+  readonly filter: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly filterPlaceholder: import("@angular/core").InputSignal<string>;
+  /** What the filter matches: a property name or accessor of an option; default the label. */
+  readonly filterBy: import("@angular/core").InputSignal<Accessor<never, string> | undefined>;
+  /** Shown when the filter matches nothing. */
+  readonly emptyFilterMessage: import("@angular/core").InputSignal<string>;
   readonly size: import("@angular/core").InputSignal<HxSelectSize>;
   readonly variant: import("@angular/core").InputSignal<HxSelectVariant>;
   readonly fluid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -3804,8 +4353,12 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
   protected readonly positions: ConnectedPosition[];
   private readonly trigger;
   private readonly listbox;
+  private readonly filterField;
+  protected readonly query: import("@angular/core").WritableSignal<string>;
   protected readonly isDisabled: import("@angular/core").Signal<boolean>;
   protected readonly items: import("@angular/core").Signal<HxSelectItem<unknown>[]>;
+  protected readonly visibleItems: import("@angular/core").Signal<HxSelectItem<unknown>[]>;
+  protected readonly resultsLabel: import("@angular/core").Signal<string>;
   protected readonly selected: import("@angular/core").Signal<HxSelectItem<unknown> | undefined>;
   protected readonly canClear: import("@angular/core").Signal<boolean>;
   protected readonly selectedValues: import("@angular/core").Signal<unknown[]>;
@@ -3819,6 +4372,7 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
   protected show(): void;
   protected close(refocus?: boolean): void;
   protected onAttach(): void;
+  protected onFilterKeydown(event: KeyboardEvent): void;
   protected onTriggerKeydown(event: KeyboardEvent): void;
   protected onOverlayKeydown(event: KeyboardEvent): void;
   protected onOutsideClick(event: MouseEvent): void;
@@ -3857,6 +4411,26 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
       "required": false;
       "isSignal": true;
     };
+    "filter": {
+      "alias": "filter";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterPlaceholder": {
+      "alias": "filterPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterBy": {
+      "alias": "filterBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyFilterMessage": {
+      "alias": "emptyFilterMessage";
+      "required": false;
+      "isSignal": true;
+    };
     "size": {
       "alias": "size";
       "required": false;
@@ -5307,4 +5881,4 @@ export declare class HxTree {
     "nodeCollapse": "nodeCollapse";
   }, ["template"], never, true, never>;
 }
-export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCellContext, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxColumn, HxColumnAlign, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };
+export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxColumn, HxColumnAlign, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxGalleriaItem, HxGalleriaItemContext, HxGalleriaThumbnailsPosition, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };