@area8975/ui 0.2.2-dev.48 → 0.2.2-dev.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.2-dev.48",
+  "version": "0.2.2-dev.49",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/types/area8975-ui.d.ts

@@ -1157,7 +1157,22 @@ export declare class UiFieldComponent {
   readonly for: import("@angular/core").InputSignal<string>;
   readonly hintId: import("@angular/core").InputSignal<string>;
   readonly errorId: import("@angular/core").InputSignal<string>;
+  /**
+   * The label's id, `${for}-label`. Controls that a `<label for>` can't
+   * reach (e.g. `ui-rich-text-editor`) point `aria-labelledby` at it.
+   */
+  readonly labelId: import("@angular/core").Signal<string>;
+  private readonly document;
   protected get forAttr(): string | null;
+  protected get labelIdAttr(): string | null;
+  /**
+   * A label click is passed on to its control as a click, which opens a
+   * `ui-select` or `ui-datepicker` rather than just focusing it, and does
+   * nothing at all for controls a label can't target (a contenteditable,
+   * a `role="button"` div). So apart from checkboxes and radios, where the
+   * click is the point, the label just focuses its control.
+   */
+  protected onClick(event: MouseEvent): void;
   protected get hintAttr(): string | null;
   protected get errorAttr(): string | null;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldComponent, never>;
@@ -1526,9 +1541,16 @@ export declare class UiRichTextEditorComponent {
   readonly spellcheck: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly describedBy: import("@angular/core").InputSignal<string>;
+  /**
+   * Ids of the elements that name the editor. Defaults to the label of the
+   * `ui-field` it sits in, when that field's `for` is this editor's `id` -
+   * a `<label for>` can't name a contenteditable on its own.
+   */
+  readonly labelledBy: import("@angular/core").InputSignal<string>;
   readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
   readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
   private readonly injector;
+  private readonly field;
   private readonly host;
   private readonly content;
   private readonly editor;
@@ -1542,6 +1564,7 @@ export declare class UiRichTextEditorComponent {
   protected readonly linkHref: import("@angular/core").WritableSignal<string>;
   /** Index of the toolbar button that takes the toolbar's single tab stop. */
   protected readonly focusIndex: import("@angular/core").WritableSignal<number>;
+  private readonly resolvedLabelledBy;
   protected readonly editable: import("@angular/core").Signal<boolean>;
   protected readonly toolGroups: import("@angular/core").Signal<("blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo")[][]>;
   protected readonly flatTools: import("@angular/core").Signal<("blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo")[]>;
@@ -1630,6 +1653,11 @@ export declare class UiRichTextEditorComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelledBy": {
+      "alias": "labelledBy";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "value": "valueChange";
     "validationState": "validationStateChange";
@@ -2086,10 +2114,13 @@ export type AlertAppearance = typeof AlertAppearances[number];
 export declare class UiAvatarComponent {
   readonly name: import("@angular/core").InputSignal<string>;
   readonly src: import("@angular/core").InputSignal<string | null>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;
+  /** Fill behind the initials, any CSS colour. The initials' ink is picked to read on six digit hex, anything else gets dark ink. */
+  readonly colour: import("@angular/core").InputSignal<string | null>;
   private readonly failedSrc;
   protected readonly showImage: import("@angular/core").Signal<boolean>;
   protected readonly initials: import("@angular/core").Signal<string>;
+  protected readonly ink: import("@angular/core").Signal<string | null>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   protected imageFailed(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiAvatarComponent, never>;
@@ -2109,9 +2140,14 @@ export declare class UiAvatarComponent {
       "required": false;
       "isSignal": true;
     };
+    "colour": {
+      "alias": "colour";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
-export declare const AvatarSizes: readonly ["sm", "md", "lg"];
+export declare const AvatarSizes: readonly ["sm", "md", "lg", "xl"];
 /** @see {@link AvatarSizes} */
 export type AvatarSize = typeof AvatarSizes[number];
 export declare class UiBadgeComponent {
@@ -2288,6 +2324,20 @@ export interface CalendarDay {
   isInRange: boolean;
   isRangeStart: boolean;
   isRangeEnd: boolean;
+  /** Extra classes from the calendar's `dayClass`. */
+  className: string;
+}
+/** The month a calendar shows, for loading what its days need. */
+export interface CalendarView {
+  /** First of the month, e.g. "2026-11-01". */
+  month: IsoDate;
+  /** First and last day in the grid, including days from the months either side. */
+  start: IsoDate;
+  end: IsoDate;
+}
+export interface CalendarDayContext {
+  $implicit: IsoDate;
+  day: CalendarDay;
 }
 /** A local date and time ISO string, e.g. "2026-09-29T14:30". */
 export type IsoDateTime = string;
@@ -2299,6 +2349,15 @@ export interface DateRange {
   start: IsoDate | null;
   end: IsoDate | null;
 }
+/**
+ * Draws each day's content in place of its number:
+ * `<ng-template uiCalendarDay let-date let-day="day">`.
+ */
+export declare class UiCalendarDayDirective {
+  readonly template: TemplateRef<CalendarDayContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCalendarDayDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCalendarDayDirective, "ng-template[uiCalendarDay]", never, {}, {}, never, never, true, never>;
+}
 export declare class UiCalendarComponent {
   private readonly host;
   private readonly injector;
@@ -2312,6 +2371,15 @@ export declare class UiCalendarComponent {
   readonly isDateDisabled: import("@angular/core").InputSignal<(date: IsoDate) => boolean>;
   readonly weekStart: import("@angular/core").InputSignal<0 | 1>;
   readonly locale: import("@angular/core").InputSignal<string>;
+  /** Classes for a day, e.g. a tint. Signals it reads update the grid. */
+  readonly dayClass: import("@angular/core").InputSignal<(date: IsoDate) => string>;
+  /** Leaves picked days unmarked, for when a click does something other than pick. */
+  readonly hideSelection: import("@angular/core").InputSignal<boolean>;
+  /** Every click on an available day, even one that's already picked. */
+  readonly dayClick: import("@angular/core").OutputEmitterRef<string>;
+  /** The month in view, on first render and whenever it changes. */
+  readonly monthChange: import("@angular/core").OutputEmitterRef<CalendarView>;
+  protected readonly dayTemplate: import("@angular/core").Signal<UiCalendarDayDirective | undefined>;
   protected readonly today: string;
   private readonly anchorDate;
   private readonly activeDate;
@@ -2324,11 +2392,13 @@ export declare class UiCalendarComponent {
   protected readonly yearSource: import("@angular/core").Signal<SelectLocalDataSource<number>>;
   protected readonly displayMonth: (month: number) => string;
   protected readonly days: import("@angular/core").Signal<CalendarDay[]>;
+  private readonly view;
   private readonly rangeBounds;
   /** Only one day is tabbable, arrow keys move between the rest. */
   protected readonly tabbableDate: import("@angular/core").Signal<string>;
   protected readonly canGoBack: import("@angular/core").Signal<boolean>;
   protected readonly canGoForward: import("@angular/core").Signal<boolean>;
+  constructor();
   /** Moves focus onto the active day, e.g. when a datepicker opens. */
   focusActiveDate(): void;
   protected showMonth(offset: number): void;
@@ -2379,10 +2449,22 @@ export declare class UiCalendarComponent {
       "required": false;
       "isSignal": true;
     };
+    "dayClass": {
+      "alias": "dayClass";
+      "required": false;
+      "isSignal": true;
+    };
+    "hideSelection": {
+      "alias": "hideSelection";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "value": "valueChange";
     "range": "rangeChange";
-  }, never, never, true, never>;
+    "dayClick": "dayClick";
+    "monthChange": "monthChange";
+  }, ["dayTemplate"], never, true, never>;
 }
 export declare class UiCardComponent {
   readonly radius: import("@angular/core").InputSignal<"none" | "sm" | "md" | "lg" | "xl">;