@forgeroute/ui 0.3.13 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@forgeroute/ui",
3
- "version": "0.3.13",
3
+ "version": "0.4.0",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=22.0.0",
6
6
  "@angular/core": ">=22.0.0",
@@ -6294,6 +6294,46 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
6294
6294
  "invalidChange": "invalidChange";
6295
6295
  }, never, never, true, never>;
6296
6296
  }
6297
+ export type TextSize = 'sm' | 'md' | 'lg';
6298
+ export type TextTone = 'default' | 'muted';
6299
+ /**
6300
+ * Plain text that keeps its line breaks: a note, a message, an address, a pasted block. It is page content, not a form control —
6301
+ * no tab stop, no resize handle, selectable and copyable, and read normally by screen readers (including browse mode).
6302
+ *
6303
+ * <ui-text [text]="note.content" />
6304
+ * <ui-text [text]="request.message" size="sm" tone="muted" />
6305
+ *
6306
+ * Every line break and run of spaces in `text` is shown as written; long unbroken words and links wrap instead of
6307
+ * stretching the layout. The text is never interpreted as HTML. Pass the text through `[text]` (not as projected content),
6308
+ * so the template's own indentation can never leak into it. An empty or missing text renders nothing.
6309
+ *
6310
+ * Inputs: `text`, `size` (sm 0.8125rem | md 0.875rem | lg 1rem, default md), `tone` (default slate | muted grey).
6311
+ */
6312
+ export declare class TextComponent {
6313
+ /** The text to show. Line breaks are kept; it is never parsed as HTML. */
6314
+ readonly text: import("@angular/core").InputSignal<string | null | undefined>;
6315
+ readonly size: import("@angular/core").InputSignal<TextSize>;
6316
+ readonly tone: import("@angular/core").InputSignal<TextTone>;
6317
+ protected readonly fontSize: import("@angular/core").Signal<string>;
6318
+ static ɵfac: i0.ɵɵFactoryDeclaration<TextComponent, never>;
6319
+ static ɵcmp: i0.ɵɵComponentDeclaration<TextComponent, "ui-text", never, {
6320
+ "text": {
6321
+ "alias": "text";
6322
+ "required": false;
6323
+ "isSignal": true;
6324
+ };
6325
+ "size": {
6326
+ "alias": "size";
6327
+ "required": false;
6328
+ "isSignal": true;
6329
+ };
6330
+ "tone": {
6331
+ "alias": "tone";
6332
+ "required": false;
6333
+ "isSignal": true;
6334
+ };
6335
+ }, {}, never, never, true, never>;
6336
+ }
6297
6337
  /** Why a chosen file was refused. */
6298
6338
  /** 'type' = not an accepted type, 'size' = over `maxSize`, 'empty' = a 0-byte file (`rejectEmpty`), 'small' = under `minSize`. */
6299
6339
  export type FileRejectReason = 'type' | 'size' | 'empty' | 'small';
@@ -7230,20 +7270,31 @@ export declare class ListItemComponent {
7230
7270
  export declare function provideForgerouteToast(options?: {
7231
7271
  dismissible?: boolean;
7232
7272
  }): EnvironmentProviders;
7233
- /** Payload of `(reorder)`. `order[newIndex] = oldIndex`; apply it with `reorderItems(items, order)`. */
7234
- export interface ListReorderEvent {
7273
+ /** Payload of `(reorder)`. Apply it with `reorderItems(items, order)` or take the ready-made `items`. */
7274
+ export interface ListReorderEvent<T = unknown> {
7275
+ /** The row that was moved. */
7276
+ item: T;
7235
7277
  /** Index the moved row had before the move. */
7236
7278
  from: number;
7237
7279
  /** Index the moved row has after the move. */
7238
7280
  to: number;
7239
7281
  /** The new index order of the whole list: `order[newIndex] = oldIndex`. */
7240
7282
  order: number[];
7283
+ /** The new full order of the items (a new array; the input array is not changed). */
7284
+ items: T[];
7241
7285
  }
7242
- /** Context handed to the row template: `<ng-template let-item let-i="index" let-n="count">`. */
7286
+ /**
7287
+ * Context handed to the row template:
7288
+ * `<ng-template let-item let-i="index" let-n="count" let-first="first" let-last="last" let-dragging="dragging">`.
7289
+ */
7243
7290
  export interface ListRowContext<T = unknown> {
7244
7291
  $implicit: T;
7245
7292
  index: number;
7246
7293
  count: number;
7294
+ first: boolean;
7295
+ last: boolean;
7296
+ /** True while this row is being dragged. */
7297
+ dragging: boolean;
7247
7298
  }
7248
7299
  /** Returns a new array in the order given by a `ListReorderEvent.order` (the input array is not changed). */
7249
7300
  export declare function reorderItems<T>(items: readonly T[], order: readonly number[]): T[];
@@ -7252,22 +7303,26 @@ interface Row {
7252
7303
  key: unknown;
7253
7304
  index: number;
7254
7305
  label: string;
7255
- upLabel: string;
7256
- downLabel: string;
7306
+ earlierLabel: string;
7307
+ laterLabel: string;
7257
7308
  first: boolean;
7258
7309
  last: boolean;
7310
+ dragging: boolean;
7259
7311
  ctx: ListRowContext;
7260
7312
  }
7261
7313
  /**
7262
7314
  * Semantic list container. Renders a real `<ul>` (default) or `<ol>` (`[ordered]="true"`) whose children are real `<li>`
7263
- * elements, one per entry of `items`. The row template (the single `<ng-template>` child) renders what is inside each
7264
- * `<li>`, normally a `<ui-list-item>`. Screen readers announce "list, N items" and "item i of N" natively.
7315
+ * elements, one per entry of `items`. The single `<ng-template>` child renders what is inside each `<li>`, normally a
7316
+ * `<ui-list-item>`. Screen readers announce "list, N items" and "item i of N" natively. `layout="grid"` lays the same
7317
+ * `<ul>` out as a wrapping CSS grid (columns of at least `gridMin` px).
7265
7318
  *
7266
- * Optional reordering (`[reorderable]="true"`, off by default): Move up / Move down icon buttons at the row end,
7267
- * Alt+ArrowUp / Alt+ArrowDown from any focused element in the row, a polite live region and a `(reorder)` output.
7268
- * The host owns the data: the list never changes `items`; apply the event (`reorderItems`) and pass the new array.
7319
+ * Optional reordering (`[reorderable]="true"`, off by default): Move buttons, Alt+ArrowUp / Alt+ArrowDown from any
7320
+ * focused element in a row, drag and drop plus Shift+Arrow / Home / End on a focused row (default in the grid layout, see
7321
+ * `dragDrop`), a polite live region, and `(reorder)` / `(itemsChange)` outputs.
7322
+ * The host owns the data: the list never changes `items`. Either bind `[(items)]` (the list emits the new array) or
7323
+ * apply the event yourself (`reorderItems`) and pass the new array.
7269
7324
  *
7270
- * <ui-list ariaLabel="Documents" [items]="docs()" [reorderable]="true" (reorder)="docs.set(reorderItems(docs(), $event.order))">
7325
+ * <ui-list ariaLabel="Documents" [items]="docs()" [reorderable]="true" (reorder)="docs.set($event.items)">
7271
7326
  * <ng-template let-doc let-i="index">
7272
7327
  * <ui-list-item [interactive]="false" [bordered]="true" [title]="doc.title" [details]="[doc.fileName]" />
7273
7328
  * </ng-template>
@@ -7276,43 +7331,96 @@ interface Row {
7276
7331
  export declare class ListComponent<T = unknown> {
7277
7332
  private readonly host;
7278
7333
  private readonly injector;
7279
- /** The entries to render, one `<li>` each. The host owns this array; the list never changes it. */
7334
+ /**
7335
+ * The entries to render, one `<li>` each. The host owns this array; the list never changes it. Two-way binding
7336
+ * (`[(items)]`) works: the list emits `itemsChange` with the new array and the host stores it.
7337
+ */
7280
7338
  readonly items: import("@angular/core").InputSignal<readonly T[]>;
7281
- /** `false` (default) renders a `<ul>`; `true` renders an `<ol>` with native numbering. */
7339
+ /** `false` (default) renders a `<ul>`; `true` renders an `<ol>` with native numbering (no numbers in the grid layout). */
7282
7340
  readonly ordered: import("@angular/core").InputSignal<boolean>;
7283
- /** Shows Move up / Move down controls and enables Alt+ArrowUp / Alt+ArrowDown. Default `false`: no controls, no live region. */
7341
+ /** 'list' = one column; 'grid' = wrapping columns of at least `gridMin` px (still a real `<ul>`). */
7342
+ readonly layout: import("@angular/core").InputSignal<"list" | "grid">;
7343
+ /** Minimum column width in px of the grid layout. */
7344
+ readonly gridMin: import("@angular/core").InputSignal<number>;
7345
+ /**
7346
+ * Space between rows (list) or between rows and columns (grid): none | xs | sm | md | lg | xl (0/4/8/16/24/32px, the scale of
7347
+ * `ui-stack` / `ui-columns`) or any CSS length (`gap="20px"`). Not set, or not a token / length: 0 in a list, 12px in a grid.
7348
+ */
7349
+ readonly gap: import("@angular/core").InputSignal<string | undefined>;
7350
+ /** Turns reordering on. Default `false`: no controls, no live region, no drag, no keys. */
7284
7351
  readonly reorderable: import("@angular/core").InputSignal<boolean>;
7285
- /** Disables all move controls and the keyboard shortcut (the rows stay visible). */
7352
+ /** Disables all moves (buttons, keys, drag and drop); the rows stay visible. */
7286
7353
  readonly disabled: import("@angular/core").InputSignal<boolean>;
7354
+ /**
7355
+ * Move buttons on each row (needs `reorderable`). 'auto' (default) = shown in the list layout, hidden in the grid layout;
7356
+ * `true` / `false` force them.
7357
+ */
7358
+ readonly moveControls: import("@angular/core").InputSignal<boolean | "auto">;
7359
+ /**
7360
+ * Drag and drop plus focusable rows (Shift+Arrow / Home / End). 'auto' (default) = on in the grid layout, off in the list
7361
+ * layout (where the Move buttons are the way); `true` / `false` force it. Needs `reorderable`.
7362
+ */
7363
+ readonly dragDrop: import("@angular/core").InputSignal<boolean | "auto">;
7287
7364
  /** Accessible name of the list (`aria-label`). */
7288
7365
  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
7289
7366
  /** Id of the element naming the list (`aria-labelledby`). */
7290
7367
  readonly ariaLabelledby: import("@angular/core").InputSignal<string | undefined>;
7291
7368
  /**
7292
- * Row label used in "Move <label> up" and the live announcement. Default: the string itself, else the item's
7293
- * `title`, `label` or `name`, else "Item N".
7369
+ * Row label used in the button names, the row's accessible name and the live announcement. Default: the string itself,
7370
+ * else the item's `title`, `label` or `name`, else "Item N".
7294
7371
  */
7295
7372
  readonly itemLabelFn: import("@angular/core").InputSignal<(item: T, index: number) => string>;
7296
7373
  /** Stable identity per row (default: the item object itself) so reordering moves DOM instead of recreating it. */
7297
7374
  readonly trackBy: import("@angular/core").InputSignal<(item: T, index: number) => unknown>;
7298
- /** Fires when the user moves a row. The host applies it and passes the new `items`. */
7299
- readonly reorder: import("@angular/core").OutputEmitterRef<ListReorderEvent>;
7375
+ /**
7376
+ * Start of the up / earlier button name; the row label is appended ("Move earlier Image 3"). Default: "Move <label> up"
7377
+ * in the list layout, "Move earlier <label>" in the grid layout.
7378
+ */
7379
+ readonly moveEarlierLabel: import("@angular/core").InputSignal<string | undefined>;
7380
+ /** Start of the down / later button name ("Move later Image 3"). Default: "Move <label> down" (list), "Move later <label>" (grid). */
7381
+ readonly moveLaterLabel: import("@angular/core").InputSignal<string | undefined>;
7382
+ /** Screen-reader instruction for a focused draggable row (aria-describedby). */
7383
+ readonly helpText: import("@angular/core").InputSignal<string>;
7384
+ /** Announcement after a move; receives the row label, the new position (1-based) and the list size. */
7385
+ readonly moveAnnouncement: import("@angular/core").InputSignal<(label: string, position: number, total: number) => string>;
7386
+ /** Fires with the new array when the user moves a row (`[(items)]`). The list does not change `items` itself. */
7387
+ readonly itemsChange: import("@angular/core").OutputEmitterRef<T[]>;
7388
+ /** Fires when the user moves a row. The host applies it (or uses `[(items)]`) and passes the new `items`. */
7389
+ readonly reorder: import("@angular/core").OutputEmitterRef<ListReorderEvent<T>>;
7300
7390
  protected readonly rowTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
7391
+ protected readonly helpId: string;
7301
7392
  protected readonly announcement: import("@angular/core").WritableSignal<string>;
7302
7393
  protected readonly movedKey: import("@angular/core").WritableSignal<unknown>;
7394
+ protected readonly dragIndex: import("@angular/core").WritableSignal<number | null>;
7395
+ protected readonly overIndex: import("@angular/core").WritableSignal<number | null>;
7303
7396
  private pendingFocus;
7304
7397
  private announceSeq;
7305
7398
  /** Stable disambiguation tokens for repeated keys (duplicates in a primitive list), reused across recomputes. */
7306
7399
  private dupTokens;
7400
+ protected readonly isGrid: import("@angular/core").Signal<boolean>;
7401
+ private readonly canReorder;
7402
+ protected readonly showControls: import("@angular/core").Signal<boolean>;
7403
+ /** Rows are draggable, focusable and move with Shift+arrows. */
7404
+ protected readonly direct: import("@angular/core").Signal<boolean>;
7405
+ /** The `--ul-gap` custom property: the token / length, or the default of the layout when unset or invalid. */
7406
+ protected readonly gapCss: import("@angular/core").Signal<string>;
7307
7407
  protected readonly rows: import("@angular/core").Signal<Row[]>;
7308
- private canReorder;
7309
- /** The `<li>` (direct child of this list) that contains `el`, or null. */
7408
+ /** Index of the `<li>` (direct child of this list) that contains `el`, or -1. */
7310
7409
  private rowIndexOf;
7410
+ /**
7411
+ * Moves the row at `from` to position `to` (clamped) and emits `itemsChange` + `reorder`. No-op (returns false) when
7412
+ * reordering is off or disabled, `from` is out of range, or nothing would change. Does not touch focus.
7413
+ */
7414
+ move(from: number, to: number): boolean;
7311
7415
  protected onKeydown(e: KeyboardEvent): void;
7312
7416
  protected onClick(e: Event): void;
7313
7417
  protected onFocusOut(e: FocusEvent): void;
7314
- /** Emits the reorder, announces it and restores focus to the moved row's control once the host has re-rendered. */
7315
- private move;
7418
+ protected onDragStart(e: DragEvent): void;
7419
+ protected onDragOver(e: DragEvent): void;
7420
+ protected onDrop(e: DragEvent): void;
7421
+ protected onDragEnd(): void;
7422
+ /** Emits the move, announces it and (for key / button moves) restores focus once the host has re-rendered. */
7423
+ private apply;
7316
7424
  /** Identical text is not re-read by screen readers, so a repeat of the current message is cleared first and written after the next render. */
7317
7425
  private announce;
7318
7426
  private restoreFocus;
@@ -7328,6 +7436,21 @@ export declare class ListComponent<T = unknown> {
7328
7436
  "required": false;
7329
7437
  "isSignal": true;
7330
7438
  };
7439
+ "layout": {
7440
+ "alias": "layout";
7441
+ "required": false;
7442
+ "isSignal": true;
7443
+ };
7444
+ "gridMin": {
7445
+ "alias": "gridMin";
7446
+ "required": false;
7447
+ "isSignal": true;
7448
+ };
7449
+ "gap": {
7450
+ "alias": "gap";
7451
+ "required": false;
7452
+ "isSignal": true;
7453
+ };
7331
7454
  "reorderable": {
7332
7455
  "alias": "reorderable";
7333
7456
  "required": false;
@@ -7338,6 +7461,16 @@ export declare class ListComponent<T = unknown> {
7338
7461
  "required": false;
7339
7462
  "isSignal": true;
7340
7463
  };
7464
+ "moveControls": {
7465
+ "alias": "moveControls";
7466
+ "required": false;
7467
+ "isSignal": true;
7468
+ };
7469
+ "dragDrop": {
7470
+ "alias": "dragDrop";
7471
+ "required": false;
7472
+ "isSignal": true;
7473
+ };
7341
7474
  "ariaLabel": {
7342
7475
  "alias": "ariaLabel";
7343
7476
  "required": false;
@@ -7358,7 +7491,28 @@ export declare class ListComponent<T = unknown> {
7358
7491
  "required": false;
7359
7492
  "isSignal": true;
7360
7493
  };
7494
+ "moveEarlierLabel": {
7495
+ "alias": "moveEarlierLabel";
7496
+ "required": false;
7497
+ "isSignal": true;
7498
+ };
7499
+ "moveLaterLabel": {
7500
+ "alias": "moveLaterLabel";
7501
+ "required": false;
7502
+ "isSignal": true;
7503
+ };
7504
+ "helpText": {
7505
+ "alias": "helpText";
7506
+ "required": false;
7507
+ "isSignal": true;
7508
+ };
7509
+ "moveAnnouncement": {
7510
+ "alias": "moveAnnouncement";
7511
+ "required": false;
7512
+ "isSignal": true;
7513
+ };
7361
7514
  }, {
7515
+ "itemsChange": "itemsChange";
7362
7516
  "reorder": "reorder";
7363
7517
  }, ["rowTemplate"], ["[list-empty]"], true, never>;
7364
7518
  }
@@ -7643,7 +7797,7 @@ export declare class ChipGroupComponent {
7643
7797
  readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
7644
7798
  /** Space below the chip group. */
7645
7799
  readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
7646
- protected readonly _gap: import("@angular/core").Signal<"6px" | "8px" | "12px">;
7800
+ protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
7647
7801
  protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
7648
7802
  protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
7649
7803
  static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
@@ -7870,16 +8024,27 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
7870
8024
  /**
7871
8025
  * Inline status message (info / success / warning / danger) with an optional title,
7872
8026
  * optional dismiss button, and projected body content (text, links, a retry ui-button…).
8027
+ * `quiet` drops the live-region role (no announcement) and `compact` tightens it for list rows — both off by default.
7873
8028
  *
7874
8029
  * <ui-alert variant="warning">No recipients — this campaign will not be sent.</ui-alert>
7875
8030
  * <ui-alert variant="danger" title="Couldn't load recipients">
7876
8031
  * {{ error }} <ui-button variant="ghost" size="sm" (click)="retry()">Retry</ui-button>
7877
8032
  * </ui-alert>
8033
+ * <ui-alert variant="danger" [quiet]="true" [compact]="true">Row 4: Email is not valid.</ui-alert>
7878
8034
  */
7879
8035
  export declare class AlertComponent {
7880
8036
  readonly variant: import("@angular/core").InputSignal<AlertVariant>;
7881
8037
  readonly title: import("@angular/core").InputSignal<string>;
7882
8038
  readonly dismissible: import("@angular/core").InputSignal<boolean>;
8039
+ /**
8040
+ * Quiet: no live-region role, so a screen reader does NOT announce it when it appears. Use it for an alert that is already on
8041
+ * the page when the user gets there, or for each item of a long list of alerts (e.g. one per failed import row — 500 danger
8042
+ * alerts would be 500 announcements). The default (false) keeps `role="alert"` for danger and `role="status"` for the rest.
8043
+ * The text stays normal page content, so it is still read in browse mode.
8044
+ */
8045
+ readonly quiet: import("@angular/core").InputSignal<boolean>;
8046
+ /** Tighter padding and a slightly smaller font, for an alert that is one row of a list. */
8047
+ readonly compact: import("@angular/core").InputSignal<boolean>;
7883
8048
  readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
7884
8049
  static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
7885
8050
  static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ui-alert", never, {
@@ -7898,6 +8063,16 @@ export declare class AlertComponent {
7898
8063
  "required": false;
7899
8064
  "isSignal": true;
7900
8065
  };
8066
+ "quiet": {
8067
+ "alias": "quiet";
8068
+ "required": false;
8069
+ "isSignal": true;
8070
+ };
8071
+ "compact": {
8072
+ "alias": "compact";
8073
+ "required": false;
8074
+ "isSignal": true;
8075
+ };
7901
8076
  }, {
7902
8077
  "dismissed": "dismissed";
7903
8078
  }, never, ["*"], true, never>;
@@ -7998,143 +8173,6 @@ export declare class IconComponent {
7998
8173
  "iconClick": "iconClick";
7999
8174
  }, never, never, true, never>;
8000
8175
  }
8001
- /** What an item template receives (`let-item let-i="index"`). */
8002
- export interface SortableItemContext<T> {
8003
- $implicit: T;
8004
- index: number;
8005
- first: boolean;
8006
- last: boolean;
8007
- /** True while this item is being dragged. */
8008
- dragging: boolean;
8009
- }
8010
- /** Marks the `<ng-template>` that renders one item: `<ng-template uiSortableItem let-item let-i="index"> … </ng-template>`. */
8011
- export declare class SortableItemDirective<T = unknown> {
8012
- readonly template: TemplateRef<SortableItemContext<T>>;
8013
- static ngTemplateContextGuard<T>(_dir: SortableItemDirective<T>, _ctx: unknown): _ctx is SortableItemContext<T>;
8014
- static ɵfac: i0.ɵɵFactoryDeclaration<SortableItemDirective<any>, never>;
8015
- static ɵdir: i0.ɵɵDirectiveDeclaration<SortableItemDirective<any>, "ng-template[uiSortableItem]", never, {}, {}, never, never, true, never>;
8016
- }
8017
- /** Emitted after the order changed (a drop, a keyboard move or a move button). */
8018
- export interface SortableOrderChange<T> {
8019
- item: T;
8020
- from: number;
8021
- to: number;
8022
- /** The new full order. */
8023
- items: T[];
8024
- }
8025
- /**
8026
- * A list (or wrapping grid) of items that can optionally be reordered. Reordering is OFF by default: with `sortable` false it only
8027
- * renders the items (nothing is draggable or focusable and no controls show), so it is safe to use as a plain list.
8028
- *
8029
- * <ui-sortable-list [(items)]="images" [sortable]="canReorder" layout="grid" ariaLabel="Product images"
8030
- * [itemLabel]="imageLabel" (orderChange)="saveOrder($event)">
8031
- * <ng-template uiSortableItem let-url let-i="index"> <ui-image-preview [src]="url" /> </ng-template>
8032
- * </ui-sortable-list>
8033
- *
8034
- * With `sortable` on, an item can be moved by
8035
- * - dragging it onto another item (mouse and any browser with native drag and drop; Firefox / Safari quirks are handled),
8036
- * - the keyboard: focus an item and press Shift + Arrow keys (Shift + Home / End = first / last),
8037
- * - the optional move buttons (`moveControls`), the touch- and pointer-friendly way (and the one that needs no gesture).
8038
- * Every change updates `items` (two-way `[(items)]`) and emits `orderChange`; the host saves it and can set `items` back if the
8039
- * save fails. A polite live region announces each move ("Image 3 moved to position 1 of 4").
8040
- */
8041
- export declare class SortableListComponent<T = unknown> {
8042
- /** The items in their current order (two-way: `[(items)]`). */
8043
- readonly items: import("@angular/core").ModelSignal<T[]>;
8044
- /** Reordering on/off. Default OFF: the list only renders its items. */
8045
- readonly sortable: import("@angular/core").InputSignal<boolean>;
8046
- /** 'list' = one column; 'grid' = wrapping columns of at least `gridMin` px. */
8047
- readonly layout: import("@angular/core").InputSignal<"list" | "grid">;
8048
- readonly gridMin: import("@angular/core").InputSignal<number>;
8049
- /** Accessible name of the list. */
8050
- readonly ariaLabel: import("@angular/core").InputSignal<string>;
8051
- /** Name of an item for assistive tech and tooltips ("Image 3"). */
8052
- readonly itemLabel: import("@angular/core").InputSignal<(item: T, index: number) => string>;
8053
- /** Show Move earlier / Move later buttons on each item (needs `sortable`) — the touch-friendly way to reorder. */
8054
- readonly moveControls: import("@angular/core").InputSignal<boolean>;
8055
- readonly moveEarlierLabel: import("@angular/core").InputSignal<string>;
8056
- readonly moveLaterLabel: import("@angular/core").InputSignal<string>;
8057
- /** Screen-reader instruction for a focused sortable item. */
8058
- readonly helpText: import("@angular/core").InputSignal<string>;
8059
- /** Announcement after a move; receives the item label, the new position (1-based) and the list size. */
8060
- readonly moveAnnouncement: import("@angular/core").InputSignal<(label: string, position: number, total: number) => string>;
8061
- /** The order changed. */
8062
- readonly orderChange: import("@angular/core").OutputEmitterRef<SortableOrderChange<T>>;
8063
- protected readonly itemTemplate: import("@angular/core").Signal<SortableItemDirective<any>>;
8064
- protected readonly _helpId: string;
8065
- protected readonly _dragIndex: import("@angular/core").WritableSignal<number | null>;
8066
- protected readonly _overIndex: import("@angular/core").WritableSignal<number | null>;
8067
- protected readonly _announcement: import("@angular/core").WritableSignal<string>;
8068
- protected readonly _count: import("@angular/core").Signal<number>;
8069
- /** Moves the item at `from` to position `to` (clamped). No-op when nothing changes or sorting is off. */
8070
- move(from: number, to: number): void;
8071
- protected onDragStart(event: DragEvent, index: number): void;
8072
- protected onDragOver(event: DragEvent, index: number): void;
8073
- protected onDrop(event: DragEvent, index: number): void;
8074
- protected onDragEnd(): void;
8075
- protected onKeydown(event: KeyboardEvent, index: number): void;
8076
- static ɵfac: i0.ɵɵFactoryDeclaration<SortableListComponent<any>, never>;
8077
- static ɵcmp: i0.ɵɵComponentDeclaration<SortableListComponent<any>, "ui-sortable-list", never, {
8078
- "items": {
8079
- "alias": "items";
8080
- "required": false;
8081
- "isSignal": true;
8082
- };
8083
- "sortable": {
8084
- "alias": "sortable";
8085
- "required": false;
8086
- "isSignal": true;
8087
- };
8088
- "layout": {
8089
- "alias": "layout";
8090
- "required": false;
8091
- "isSignal": true;
8092
- };
8093
- "gridMin": {
8094
- "alias": "gridMin";
8095
- "required": false;
8096
- "isSignal": true;
8097
- };
8098
- "ariaLabel": {
8099
- "alias": "ariaLabel";
8100
- "required": false;
8101
- "isSignal": true;
8102
- };
8103
- "itemLabel": {
8104
- "alias": "itemLabel";
8105
- "required": false;
8106
- "isSignal": true;
8107
- };
8108
- "moveControls": {
8109
- "alias": "moveControls";
8110
- "required": false;
8111
- "isSignal": true;
8112
- };
8113
- "moveEarlierLabel": {
8114
- "alias": "moveEarlierLabel";
8115
- "required": false;
8116
- "isSignal": true;
8117
- };
8118
- "moveLaterLabel": {
8119
- "alias": "moveLaterLabel";
8120
- "required": false;
8121
- "isSignal": true;
8122
- };
8123
- "helpText": {
8124
- "alias": "helpText";
8125
- "required": false;
8126
- "isSignal": true;
8127
- };
8128
- "moveAnnouncement": {
8129
- "alias": "moveAnnouncement";
8130
- "required": false;
8131
- "isSignal": true;
8132
- };
8133
- }, {
8134
- "items": "itemsChange";
8135
- "orderChange": "orderChange";
8136
- }, ["itemTemplate"], never, true, never>;
8137
- }
8138
8176
  export type ImagePreviewShape = 'circle' | 'rounded';
8139
8177
  export type ImagePreviewSize = 'sm' | 'md' | 'lg';
8140
8178
  export type ImagePreviewPlaceholder = 'person' | 'image';