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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.2-dev.47",
+  "version": "0.2.2-dev.49",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -8,6 +8,10 @@
     "@ng-icons/core": "^35.0.1",
     "@ng-icons/heroicons": "^35.0.1",
     "@tailwindcss/forms": "^0.5.11",
+    "@tiptap/core": "^3.32.2",
+    "@tiptap/extensions": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
     "apexcharts": "^4.7.0",
     "preline": "^4.2.0",
     "rxjs": "~7.8.0",

package/types/area8975-ui.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 import { ElementRef, EnvironmentProviders, InjectionToken, OnDestroy, OnInit, Provider, Signal, TemplateRef, WritableSignal } from "@angular/core";
 import ApexCharts$1 from "apexcharts";
+import { ChainedCommands, Editor } from "@tiptap/core";
 import { Placement } from "@floating-ui/dom";
 import { Observable } from "rxjs";
 import { IconType } from "@ng-icons/core";
@@ -1156,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>;
@@ -1486,6 +1502,169 @@ export declare class UiRadioComponent<ValueType = unknown> {
     "validationState": "validationStateChange";
   }, never, never, true, never>;
 }
+/**
+ * Every tool the editor's toolbar can show. Leaving a formatting tool out of
+ * `tools` also turns that formatting off - its shortcut stops working and
+ * pasted content loses it - so the value only ever holds what the toolbar offers.
+ * `undo` and `redo` only control the buttons; history and its shortcuts are always on.
+ */
+export declare const RichTextTools: readonly ["bold", "italic", "underline", "strike", "code", "heading1", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "codeBlock", "horizontalRule", "link", "undo", "redo"];
+/** @see {@link RichTextTools} */
+export type RichTextTool = typeof RichTextTools[number];
+/** The toolbar's groups, in order, with a divider drawn between each. */
+export declare const RichTextToolGroups: readonly (readonly RichTextTool[])[];
+/** true is valid, false is invalid, null is not yet validated. */
+export type RichTextEditorValidation = boolean | null;
+interface ToolDefinition {
+  label: string;
+  icon: string;
+  /** Whether the tool is "on" at the cursor. Tools without it aren't toggles. */
+  active?: (editor: Editor) => boolean;
+  run: (chain: ChainedCommands) => ChainedCommands;
+}
+/**
+ * A WYSIWYG editor whose value is an HTML string, with a toolbar of formatting tools.
+ */
+export declare class UiRichTextEditorComponent {
+  /** The content as HTML. An empty editor is `''`. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly classes: import("@angular/core").InputSignal<string>;
+  /** Which toolbar tools to show, and so which formatting is allowed. @see {@link RichTextTools} */
+  readonly tools: import("@angular/core").InputSignal<readonly ("blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo")[]>;
+  readonly id: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** true/false shows valid/invalid styling. null means not validated yet. */
+  readonly validationState: import("@angular/core").ModelSignal<RichTextEditorValidation>;
+  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;
+  /** Bumped on every editor transaction, so toolbar state re-reads the editor. */
+  private readonly revision;
+  /** The HTML the editor last held, to tell our own updates from outside ones. */
+  private lastHtml;
+  protected readonly contentId: string;
+  protected readonly linkInputId: string;
+  protected readonly linkOpen: import("@angular/core").WritableSignal<boolean>;
+  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")[]>;
+  protected readonly showToolbar: import("@angular/core").Signal<boolean>;
+  /** Per tool: whether it's on at the cursor, and whether it can run right now. */
+  protected readonly toolState: import("@angular/core").Signal<Record<"blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo", {
+    active: boolean;
+    enabled: boolean;
+  }>>;
+  protected readonly generatedClasses: import("@angular/core").Signal<string>;
+  /** Attributes for the contenteditable element, which Tiptap renders. */
+  private readonly contentAttributes;
+  /** Each tool left out of `tools` switches its extension off. */
+  private readonly extensions;
+  constructor();
+  protected toolDefinition(tool: RichTextTool): ToolDefinition;
+  protected readonly runTool: (tool: RichTextTool) => void;
+  /** Arrow keys move between toolbar buttons, so the toolbar is one tab stop. */
+  protected readonly onToolbarKeydown: (event: KeyboardEvent) => void;
+  protected readonly openLink: () => void;
+  protected readonly applyLink: () => void;
+  protected readonly removeLink: () => void;
+  protected readonly closeLink: () => void;
+  protected readonly onLinkKeydown: (event: KeyboardEvent) => void;
+  private createEditor;
+  private htmlOf;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiRichTextEditorComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiRichTextEditorComponent, "ui-rich-text-editor", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "classes": {
+      "alias": "classes";
+      "required": false;
+      "isSignal": true;
+    };
+    "tools": {
+      "alias": "tools";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "validationState": {
+      "alias": "validationState";
+      "required": false;
+      "isSignal": true;
+    };
+    "spellcheck": {
+      "alias": "spellcheck";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "labelledBy": {
+      "alias": "labelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "validationState": "validationStateChange";
+    "focused": "focused";
+    "blurred": "blurred";
+  }, never, never, true, never>;
+}
 /** Defines if and when a `ui-overlay` should close when the user clicks. */
 export type UiOverlayCloseBehaviour = 'none' | 'whenClickOutside' | 'whenClickAnywhere';
 export interface UiOverlayOptions {
@@ -1935,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>;
@@ -1958,15 +2140,20 @@ 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 {
   readonly appearance: import("@angular/core").InputSignal<"solid" | "outline" | "soft">;
   readonly intent: import("@angular/core").InputSignal<"primary" | "secondary" | "success" | "warning" | "danger">;
-  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiBadgeComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiBadgeComponent, "ui-badge", never, {
@@ -2001,7 +2188,7 @@ export declare class UiButtonComponent {
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   readonly classes: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
+  readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -2137,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;
@@ -2148,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;
@@ -2161,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;
@@ -2173,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;
@@ -2228,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">;