@ethlete/components 1.0.0-next.23 → 1.0.0-next.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.23",
+  "version": "1.0.0-next.24",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {

package/types/ethlete-components.d.ts

@@ -5241,20 +5241,20 @@ declare class SelectDirective implements FormValueControl<unknown>, FormFieldCon
     commitCustomValueOnClose: _angular_core.InputSignal<boolean>;
     /** Maximum number of selected values (multi select) — further adds are ignored. */
     maxSelection: _angular_core.InputSignal<number | undefined>;
-    /** Renders an "Add new" row in `et-select`'s panel — clicking it emits `addNewRequested`. */
+    /** Renders an "Add new" row in `et-select`'s panel — clicking it emits `addNew`. */
     allowAddNew: _angular_core.InputSignal<boolean>;
     /** Async option state — rendered by `et-select` as a loading row inside the panel. */
     loading: _angular_core.InputSignal<boolean>;
     /** Async option state — rendered by `et-select` as an error row inside the panel. */
     error: _angular_core.InputSignal<string | null>;
-    /** Async option state — `et-select` renders a load-more control emitting `loadMoreRequested`. */
+    /** Async option state — `et-select` renders a load-more control emitting `loadMore`. */
     hasMoreItems: _angular_core.InputSignal<boolean>;
     /** Whether the panel mirrors the anchor's width. Off for compact triggers (e.g. a country picker). */
     mirrorPanelWidth: _angular_core.InputSignal<boolean>;
     queryChange: _angular_core.OutputEmitterRef<string>;
-    loadMoreRequested: _angular_core.OutputEmitterRef<void>;
+    loadMore: _angular_core.OutputEmitterRef<void>;
     /** The user picked the "Add new" row (`allowAddNew`). Emits the current search query for prefilling. */
-    addNewRequested: _angular_core.OutputEmitterRef<string>;
+    addNew: _angular_core.OutputEmitterRef<string>;
     shouldDisplayError: _angular_core.Signal<boolean>;
     hasValue: _angular_core.Signal<boolean>;
     describedBy: WritableSignal<string | null>;
@@ -5363,10 +5363,10 @@ declare class SelectDirective implements FormValueControl<unknown>, FormFieldCon
     activate(): void;
     /** @internal Commits an option as the (or a) selected value. Single select closes afterwards. */
     commitOption(item: SelectItem): void;
-    /** @internal Emits `loadMoreRequested` — wired to the panel's load-more control. */
+    /** @internal Emits `loadMore` — wired to the panel's load-more control. */
     requestLoadMore(): void;
     /**
-     * Emits `addNewRequested` with the current search query and closes the panel — wired to
+     * Emits `addNew` with the current search query and closes the panel — wired to
      * the panel's "Add new" row (`allowAddNew`). The consumer reacts by e.g. opening a
      * creation dialog and, once the new option exists, setting it as the value.
      */
@@ -5408,7 +5408,7 @@ declare class SelectDirective implements FormValueControl<unknown>, FormFieldCon
     private handlePanelBeforeClosed;
     private handlePanelKeydown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectDirective, "[etSelect]", ["etSelect"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "allowCustomValues": { "alias": "allowCustomValues"; "required": false; "isSignal": true; }; "customValueSeparators": { "alias": "customValueSeparators"; "required": false; "isSignal": true; }; "normalizeCustomValue": { "alias": "normalizeCustomValue"; "required": false; "isSignal": true; }; "commitCustomValueOnClose": { "alias": "commitCustomValueOnClose"; "required": false; "isSignal": true; }; "maxSelection": { "alias": "maxSelection"; "required": false; "isSignal": true; }; "allowAddNew": { "alias": "allowAddNew"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hasMoreItems": { "alias": "hasMoreItems"; "required": false; "isSignal": true; }; "mirrorPanelWidth": { "alias": "mirrorPanelWidth"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "open": "openChange"; "queryChange": "queryChange"; "loadMoreRequested": "loadMoreRequested"; "addNewRequested": "addNewRequested"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectDirective, "[etSelect]", ["etSelect"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "allowCustomValues": { "alias": "allowCustomValues"; "required": false; "isSignal": true; }; "customValueSeparators": { "alias": "customValueSeparators"; "required": false; "isSignal": true; }; "normalizeCustomValue": { "alias": "normalizeCustomValue"; "required": false; "isSignal": true; }; "commitCustomValueOnClose": { "alias": "commitCustomValueOnClose"; "required": false; "isSignal": true; }; "maxSelection": { "alias": "maxSelection"; "required": false; "isSignal": true; }; "allowAddNew": { "alias": "allowAddNew"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hasMoreItems": { "alias": "hasMoreItems"; "required": false; "isSignal": true; }; "mirrorPanelWidth": { "alias": "mirrorPanelWidth"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "open": "openChange"; "queryChange": "queryChange"; "loadMore": "loadMore"; "addNew": "addNew"; }, never, never, true, never>;
 }
 
 declare class SelectListboxDirective {
@@ -5553,14 +5553,22 @@ type SelectOptionsFromQueryConfig<TCreator extends AnyQueryCreator, TOption> = {
      */
     queryCreator: TCreator;
     /**
-     * Builds the request args from the debounced search query. Runs reactively (like `withArgs`):
-     * reading `query()` re-executes as the user types. Return `null` to skip a request (e.g. for an
-     * empty query) — `options` is empty while skipped.
+     * Builds the request args from the debounced search query and the current `page`. Runs
+     * reactively (like `withArgs`): reading `query()` re-executes as the user types, and reading
+     * `page()` re-executes when `loadMore()` advances the page. Return `null` to skip a request
+     * (e.g. for an empty query) — `options` is empty while skipped.
+     *
+     * `page` starts at `initialPage` and resets there whenever the query changes; `loadMore()`
+     * increments it. Return only that page's slice from `toOptions` — the factory appends each
+     * page to the accumulated `options`.
+     */
+    args: (query: Signal<string>, page: Signal<number>) => RequestArgs<QueryArgsOf<TCreator>> | null;
+    /**
+     * Maps a successful response to the option slice for the **current page**. The factory appends
+     * each page's slice to the accumulated `options` (and resets when the query changes).
      */
-    args: (query: Signal<string>) => RequestArgs<QueryArgsOf<TCreator>> | null;
-    /** Maps a successful response to the option data your `@for` renders. */
     toOptions: (response: ResponseType<QueryArgsOf<TCreator>>) => TOption[];
-    /** Derives whether more pages exist from the response — drives the select's `hasMoreItems`. */
+    /** Derives whether more pages exist from the latest page's response — drives `hasMoreItems` and gates `loadMore()`. */
     toHasMore?: (response: ResponseType<QueryArgsOf<TCreator>>) => boolean;
     /** Turns a query failure into the select's error text. Defaults to the first error message. */
     toErrorMessage?: (error: QueryErrorResponse) => string;
@@ -5568,6 +5576,8 @@ type SelectOptionsFromQueryConfig<TCreator extends AnyQueryCreator, TOption> = {
     minQueryLength?: number;
     /** Debounce applied to the query before it reaches `args`, in ms. @default 300 */
     debounceTime?: number;
+    /** The page `args` receives on first load and after each query change. @default 1 */
+    initialPage?: number;
 };
 type SelectOptionsFromQuery<TOption> = {
     /** The mapped options — render them with an `@for` of `et-select-option`s (`filterMode="external"`). */
@@ -5582,6 +5592,11 @@ type SelectOptionsFromQuery<TOption> = {
     query: Signal<string>;
     /** Wire to the select's `(queryChange)` output. */
     setQuery: (query: string) => void;
+    /**
+     * Wire to the select's `(loadMore)` output — advances to the next page and appends it
+     * to `options`. A no-op while loading, when skipped, or once `hasMore` is false.
+     */
+    loadMore: () => void;
 };
 /**
  * Feeds a select's options from an `@ethlete/query` query as the user searches. Mirroring
@@ -5592,8 +5607,9 @@ type SelectOptionsFromQuery<TOption> = {
  * ```ts
  * users = selectOptionsFromQuery({
  *   queryCreator: searchUsers,
- *   args: (query) => (query() ? { queryParams: { q: query() } } : null),
+ *   args: (query, page) => (query() ? { queryParams: { q: query(), page: page() } } : null),
  *   toOptions: (res) => res.items,
+ *   toHasMore: (res) => res.page < res.totalPages,
  * });
  * ```
  *
@@ -5602,7 +5618,9 @@ type SelectOptionsFromQuery<TOption> = {
  *   [formField]="form.assignee"
  *   [loading]="users.loading()"
  *   [error]="users.error()"
+ *   [hasMoreItems]="users.hasMore()"
  *   (queryChange)="users.setQuery($event)"
+ *   (loadMore)="users.loadMore()"
  *   filterMode="external"
  * >
  *   <input etSelectSearch placeholder="Search users" />
@@ -5612,8 +5630,18 @@ type SelectOptionsFromQuery<TOption> = {
  * </et-select>
  * ```
  *
+ * Pagination is built in: `loadMore()` advances `page` and appends the next page's slice to
+ * `options`; the accumulator resets whenever the query changes. Derive `hasMore` from the latest
+ * response via `toHasMore` — it also gates `loadMore()`.
+ *
  * Call it from a field initializer / constructor (injection context), the same place you'd create
  * a query or a query stack.
+ *
+ * Pagination is built in: `args` receives a `page` signal (starting at `initialPage`, default `1`)
+ * that resets on every query change and advances on `loadMore()`. Return only the current page's
+ * slice from `toOptions` — the factory appends each page to the accumulated `options`. Wire
+ * `hasMore` (via `toHasMore`) to `hasMoreItems` and `loadMore` to `(loadMore)`; `loadMore`
+ * is a no-op while loading, when skipped, or once `hasMore` is false.
  */
 declare const selectOptionsFromQuery: <TCreator extends AnyQueryCreator, TOption>(config: SelectOptionsFromQueryConfig<TCreator, TOption>) => SelectOptionsFromQuery<TOption>;
 
@@ -5628,14 +5656,22 @@ type SelectOptionsFromV2QueryConfig<TCreator extends AnyV2QueryCreator | AnyLega
      */
     queryCreator: TCreator;
     /**
-     * Builds the `prepare()` args from the debounced search query. Runs reactively (like
-     * `queryComputed`): reading `query()` re-executes as the user types. Return `null` to skip a
-     * request (e.g. for an empty query) — `options` is empty while skipped.
+     * Builds the `prepare()` args from the debounced search query and the current `page`. Runs
+     * reactively (like `queryComputed`): reading `query()` re-executes as the user types, and reading
+     * `page()` re-executes when `loadMore()` advances the page. Return `null` to skip a request
+     * (e.g. for an empty query) — `options` is empty while skipped.
+     *
+     * `page` starts at `initialPage` and resets there whenever the query changes; `loadMore()`
+     * increments it. Return only that page's slice from `toOptions` — the factory appends each
+     * page to the accumulated `options`.
+     */
+    args: (query: Signal<string>, page: Signal<number>) => V2PrepareArgsOf<TCreator> | null;
+    /**
+     * Maps a successful response to the option slice for the **current page**. The factory appends
+     * each page's slice to the accumulated `options` (and resets when the query changes).
      */
-    args: (query: Signal<string>) => V2PrepareArgsOf<TCreator> | null;
-    /** Maps a successful response to the option data your `@for` renders. */
     toOptions: (response: QueryDataOf<TCreator>) => TOption[];
-    /** Derives whether more pages exist from the response — drives the select's `hasMoreItems`. */
+    /** Derives whether more pages exist from the latest page's response — drives `hasMoreItems` and gates `loadMore()`. */
     toHasMore?: (response: QueryDataOf<TCreator>) => boolean;
     /** Turns a query failure into the select's error text. Defaults to the first error message. */
     toErrorMessage?: (error: RequestError) => string;
@@ -5643,6 +5679,8 @@ type SelectOptionsFromV2QueryConfig<TCreator extends AnyV2QueryCreator | AnyLega
     minQueryLength?: number;
     /** Debounce applied to the query before it reaches `args`, in ms. @default 300 */
     debounceTime?: number;
+    /** The page `args` receives on first load and after each query change. @default 1 */
+    initialPage?: number;
 };
 /**
  * Feeds a select's options from a **legacy v2** query as the user searches — the
@@ -5653,8 +5691,9 @@ type SelectOptionsFromV2QueryConfig<TCreator extends AnyV2QueryCreator | AnyLega
  * ```ts
  * users = selectOptionsFromV2Query({
  *   queryCreator: searchUsers, // client.get({ route: '/users', types: { … } })
- *   args: (query) => (query() ? { queryParams: { q: query() } } : null),
+ *   args: (query, page) => (query() ? { queryParams: { q: query(), page: page() } } : null),
  *   toOptions: (res) => res.items,
+ *   toHasMore: (res) => res.page < res.totalPages,
  * });
  * ```
  *
@@ -5663,7 +5702,9 @@ type SelectOptionsFromV2QueryConfig<TCreator extends AnyV2QueryCreator | AnyLega
  *   [formField]="form.assignee"
  *   [loading]="users.loading()"
  *   [error]="users.error()"
+ *   [hasMoreItems]="users.hasMore()"
  *   (queryChange)="users.setQuery($event)"
+ *   (loadMore)="users.loadMore()"
  *   filterMode="external"
  * >
  *   <input etSelectSearch placeholder="Search users" />
@@ -5675,6 +5716,12 @@ type SelectOptionsFromV2QueryConfig<TCreator extends AnyV2QueryCreator | AnyLega
  *
  * Call it from a field initializer / constructor (injection context), the same place you'd use
  * `queryComputed` or a query container.
+ *
+ * Pagination is built in: `args` receives a `page` signal (starting at `initialPage`, default `1`)
+ * that resets on every query change and advances on `loadMore()`. Return only the current page's
+ * slice from `toOptions` — the factory appends each page to the accumulated `options`. Wire
+ * `hasMore` (via `toHasMore`) to `hasMoreItems` and `loadMore` to `(loadMore)`; `loadMore`
+ * is a no-op while loading, when skipped, or once `hasMore` is false.
  */
 declare const selectOptionsFromV2Query: <TCreator extends AnyV2QueryCreator | AnyLegacyQueryCreator, TOption>(config: SelectOptionsFromV2QueryConfig<TCreator, TOption>) => SelectOptionsFromQuery<TOption>;
 
@@ -5717,7 +5764,7 @@ declare class SelectComponent {
     protected handleClearClick(event: Event): void;
     protected handleArrowClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "et-select", never, { "loadMoreLabel": { "alias": "loadMoreLabel"; "required": false; "isSignal": true; }; "addNewLabel": { "alias": "addNewLabel"; "required": false; "isSignal": true; }; "createLabel": { "alias": "createLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, {}, never, ["input[etSelectSearch]", "*"], true, [{ directive: typeof SelectDirective; inputs: { "value": "value"; "touched": "touched"; "open": "open"; "multiple": "multiple"; "placeholder": "placeholder"; "disabled": "disabled"; "readonly": "readonly"; "invalid": "invalid"; "errors": "errors"; "required": "required"; "name": "name"; "options": "options"; "filterMode": "filterMode"; "allowCustomValues": "allowCustomValues"; "customValueSeparators": "customValueSeparators"; "normalizeCustomValue": "normalizeCustomValue"; "commitCustomValueOnClose": "commitCustomValueOnClose"; "maxSelection": "maxSelection"; "allowAddNew": "allowAddNew"; "loading": "loading"; "error": "error"; "hasMoreItems": "hasMoreItems"; }; outputs: { "valueChange": "valueChange"; "touchedChange": "touchedChange"; "openChange": "openChange"; "queryChange": "queryChange"; "loadMoreRequested": "loadMoreRequested"; "addNewRequested": "addNewRequested"; }; }, { directive: typeof _ethlete_core.ColorInteractiveDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "et-select", never, { "loadMoreLabel": { "alias": "loadMoreLabel"; "required": false; "isSignal": true; }; "addNewLabel": { "alias": "addNewLabel"; "required": false; "isSignal": true; }; "createLabel": { "alias": "createLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, {}, never, ["input[etSelectSearch]", "*"], true, [{ directive: typeof SelectDirective; inputs: { "value": "value"; "touched": "touched"; "open": "open"; "multiple": "multiple"; "placeholder": "placeholder"; "disabled": "disabled"; "readonly": "readonly"; "invalid": "invalid"; "errors": "errors"; "required": "required"; "name": "name"; "options": "options"; "filterMode": "filterMode"; "allowCustomValues": "allowCustomValues"; "customValueSeparators": "customValueSeparators"; "normalizeCustomValue": "normalizeCustomValue"; "commitCustomValueOnClose": "commitCustomValueOnClose"; "maxSelection": "maxSelection"; "allowAddNew": "allowAddNew"; "loading": "loading"; "error": "error"; "hasMoreItems": "hasMoreItems"; }; outputs: { "valueChange": "valueChange"; "touchedChange": "touchedChange"; "openChange": "openChange"; "queryChange": "queryChange"; "loadMore": "loadMore"; "addNew": "addNew"; }; }, { directive: typeof _ethlete_core.ColorInteractiveDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const SELECT_IMPORTS: readonly [typeof SelectComponent, typeof SelectOptionComponent, typeof SelectOptionGroupComponent, typeof SelectPanelComponent, typeof SelectVirtualOptionComponent, typeof SelectDirective, typeof SelectTriggerDirective, typeof SelectSurfaceDirective, typeof SelectListboxDirective, typeof SelectOptionDirective, typeof SelectOptionGroupDirective, typeof SelectOptionTemplateDirective, typeof SelectValueDirective, typeof SelectSearchDirective, typeof SelectViewportDirective, typeof SelectVirtualOptionDirective, typeof SelectLoadingDirective, typeof SelectErrorDirective, typeof SelectEmptyDirective];