@star-ng/ui 0.0.0-stage → 0.2.0

package/types/star-ng-ui-dialog.d.ts

@@ -0,0 +1,254 @@
+import { StarButtonVariant } from "@star-ng/ui/button";
+import * as i0 from "@angular/core";
+import { InjectionToken, Injector, Type } from "@angular/core";
+export interface StarConfirmOptions {
+  readonly header: string;
+  readonly message: string;
+  /** Phosphor icon class, for example `ph-bold ph-warning`. */
+  readonly icon?: string;
+  readonly acceptLabel?: string;
+  readonly rejectLabel?: string;
+  readonly acceptVariant?: StarButtonVariant;
+  /** Hide the reject button (acknowledge-only dialog). */
+  readonly rejectVisible?: boolean;
+  /** `reject` (default) puts first focus on the safe choice. */
+  readonly defaultFocus?: 'accept' | 'reject';
+  /**
+   * Anchor element: shows a small popup next to it (PrimeNG `p-confirmpopup`) instead of a
+   * modal dialog. Use for low-risk confirmations on a row or button.
+   */
+  readonly target?: HTMLElement;
+}
+interface PendingConfirm extends StarConfirmOptions {
+  readonly resolve: (accepted: boolean) => void;
+}
+/**
+ * Promise-based confirmation (PrimeNG `ConfirmationService` + `p-confirmdialog` /
+ * `p-confirmpopup`). Requests queue; place one `<star-confirm-host />` in the app shell.
+ * Pass `target` to anchor a popup to an element instead of opening a dialog.
+ *
+ * ```ts
+ * if (await this.confirm.ask({ header: 'Delete order', message: 'This cannot be undone.',
+ *   acceptVariant: 'danger', icon: 'ph-bold ph-trash' })) { ... }
+ * ```
+ */
+export declare class StarConfirmService {
+  private readonly queue;
+  readonly current: import("@angular/core").Signal<PendingConfirm>;
+  ask(options: StarConfirmOptions): Promise<boolean>;
+  /** Resolves the visible request. */
+  settle(accepted: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarConfirmService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare class StarConfirmHost {
+  protected readonly confirm: StarConfirmService;
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  private readonly popover;
+  protected readonly dialogRequest: import("@angular/core").Signal<PendingConfirm | null>;
+  protected readonly popupRequest: import("@angular/core").Signal<PendingConfirm | null>;
+  private shownPopup;
+  constructor();
+  /** Outside click or Escape closes the popup: treat as reject. */
+  protected onPopupHidden(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarConfirmHost, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarConfirmHost, "star-confirm-host", never, {}, {}, never, never, true, never>;
+}
+export type StarDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Dialog (PrimeNG `p-dialog`) built on the native `<dialog>` element: top-layer rendering,
+ * focus trap, focus restore and Escape handling come from the browser. Entry / exit animate
+ * with `@starting-style`; page scroll locks with `:has(dialog[open])`.
+ *
+ * ```html
+ * <star-dialog [(visible)]="editOpen" header="Edit order" size="lg">
+ *   ...body...
+ *   <div starDialogFooter>
+ *     <star-button variant="ghost" (pressed)="editOpen.set(false)">Cancel</star-button>
+ *     <star-button (pressed)="save()">Save</star-button>
+ *   </div>
+ * </star-dialog>
+ * ```
+ * Put `autofocus` (native elements) or `data-autofocus` (components) on the element that
+ * should receive focus first.
+ */
+export declare class StarDialog {
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  readonly visible: import("@angular/core").ModelSignal<boolean>;
+  readonly header: import("@angular/core").InputSignal<string>;
+  readonly size: import("@angular/core").InputSignal<StarDialogSize>;
+  /** Fixed CSS width; overrides `size`. */
+  readonly width: import("@angular/core").InputSignal<string | null>;
+  /** Modal blocks the page behind (backdrop). Non-modal dialogs float above it. */
+  readonly modal: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly closable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly closeOnEscape: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Clicking the backdrop closes the dialog. */
+  readonly dismissableMask: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly role: import("@angular/core").InputSignal<"dialog" | "alertdialog">;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly shown: import("@angular/core").OutputEmitterRef<void>;
+  readonly hidden: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly headerId: string;
+  private readonly dialog;
+  private isOpen;
+  constructor();
+  close(): void;
+  /**
+   * Native `autofocus` only works on focusable elements. `data-autofocus` also works on a
+   * wrapper component such as `<star-button data-autofocus>`: its first focusable child gets focus.
+   */
+  private focusInitial;
+  protected onCancel(event: Event): void;
+  /** Browser-initiated close (for example a form with method="dialog"). */
+  protected onNativeClose(): void;
+  /** Emits `hidden` once per open. */
+  private markHidden;
+  protected onDialogClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarDialog, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarDialog, "star-dialog", never, {
+    "visible": {
+      "alias": "visible";
+      "required": false;
+      "isSignal": true;
+    };
+    "header": {
+      "alias": "header";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "modal": {
+      "alias": "modal";
+      "required": false;
+      "isSignal": true;
+    };
+    "closable": {
+      "alias": "closable";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnEscape": {
+      "alias": "closeOnEscape";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissableMask": {
+      "alias": "dismissableMask";
+      "required": false;
+      "isSignal": true;
+    };
+    "showHeader": {
+      "alias": "showHeader";
+      "required": false;
+      "isSignal": true;
+    };
+    "role": {
+      "alias": "role";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "visible": "visibleChange";
+    "shown": "shown";
+    "hidden": "hidden";
+  }, never, ["[starDialogHeader]", "*", "[starDialogFooter]"], true, never>;
+}
+/** Data passed to the component opened by `StarDialogService.open()`. */
+export declare const STAR_DIALOG_DATA: InjectionToken<unknown>;
+export interface StarDialogConfig<D = unknown> {
+  readonly header?: string;
+  readonly size?: StarDialogSize;
+  readonly width?: string;
+  readonly data?: D;
+  /** Default true. */
+  readonly closable?: boolean;
+  /** Default true. */
+  readonly closeOnEscape?: boolean;
+  /** Close on a backdrop click. Default false. */
+  readonly dismissableMask?: boolean;
+  readonly role?: 'dialog' | 'alertdialog';
+  /** Accessible name when there is no header. */
+  readonly ariaLabel?: string;
+}
+/**
+ * Handle of a dialog opened from code. The opened component injects it to close itself with a
+ * result: `inject(StarDialogRef<Result>).close(result)`.
+ */
+export declare class StarDialogRef<R = unknown> {
+  private readonly hide;
+  private resolve;
+  /** Resolves when the dialog has closed: the result, or `undefined` (Escape, ×, backdrop). */
+  readonly closed: Promise<R | undefined>;
+  private result;
+  private done;
+  constructor(hide: () => void);
+  close(result?: R): void;
+  /** Called by the container once the native dialog has closed. */
+  settle(): void;
+}
+/** Internal host: an `star-dialog` whose body is the requested component. */
+export declare class StarDialogContainer {
+  readonly component: import("@angular/core").InputSignal<Type<unknown>>;
+  readonly config: import("@angular/core").InputSignal<StarDialogConfig<unknown>>;
+  readonly contentInjector: import("@angular/core").InputSignal<Injector>;
+  readonly visible: import("@angular/core").WritableSignal<boolean>;
+  /** Set by the service; runs after the native dialog closed. */
+  hidden: () => void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarDialogContainer, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarDialogContainer, "star-dialog-container", never, {
+    "component": {
+      "alias": "component";
+      "required": true;
+      "isSignal": true;
+    };
+    "config": {
+      "alias": "config";
+      "required": true;
+      "isSignal": true;
+    };
+    "contentInjector": {
+      "alias": "contentInjector";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Opens a component in a modal `star-dialog` from code (PrimeNG `DialogService` /
+ * `DynamicDialog`). No host element in the template is needed; dialogs stack in the top layer.
+ *
+ * ```ts
+ * const ref = this.dialogs.open(EditOrder, { header: 'Edit order', size: 'lg', data: { id } });
+ * const saved = await ref.closed; // value passed to ref.close(...) inside EditOrder
+ * ```
+ * Inside the opened component: `inject(STAR_DIALOG_DATA)` and `inject(StarDialogRef)`.
+ * Put its action buttons in an element with class `star-dialog__footer`.
+ */
+export declare class StarDialogService {
+  private readonly appRef;
+  private readonly environment;
+  private readonly openRefs;
+  open<C, D = unknown, R = unknown>(component: Type<C>, config?: StarDialogConfig<D>, injector?: Injector): StarDialogRef<R>;
+  /** Closes every open dialog (for example on sign-out). */
+  closeAll(): void;
+  private destroy;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarDialogService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export {};

package/types/star-ng-ui-drawer.d.ts

@@ -0,0 +1,29 @@
+import { StarDialog } from "@star-ng/ui/dialog";
+import * as i0 from "@angular/core";
+/**
+ * Drawer (PrimeNG `p-drawer`): side sheet on the native `<dialog>` element. Same API as
+ * `star-dialog` (`[(visible)]`, `header`, `modal`, `dismissableMask`, `closeOnEscape`, footer slot)
+ * plus `position` and a CSS `size`. `left` and `right` are the physical edges of the screen, as in
+ * CSS; `start` and `end` follow the writing direction (`end` is the right edge in LTR and the left
+ * edge in RTL). Use `start` / `end` for a drawer that must switch sides in right-to-left.
+ *
+ * `<star-drawer [(visible)]="detailsOpen" header="ORD-1042" position="right" size="32rem">…</star-drawer>`
+ */
+export declare class StarDrawer extends StarDialog {
+  readonly position: import("@angular/core").InputSignal<"left" | "right" | "start" | "end" | "top" | "bottom">;
+  /** Width (left / right / start / end) or height (top / bottom). */
+  readonly drawerSize: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarDrawer, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarDrawer, "star-drawer", never, {
+    "position": {
+      "alias": "position";
+      "required": false;
+      "isSignal": true;
+    };
+    "drawerSize": {
+      "alias": "drawerSize";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[starDialogHeader]", "*", "[starDialogFooter]"], true, never>;
+}

package/types/star-ng-ui-editor.d.ts

@@ -0,0 +1,96 @@
+import { FormValueControl } from "@angular/forms/signals";
+import { StarUiText } from "@star-ng/ui/core";
+import * as i0 from "@angular/core";
+interface EditorCommand {
+  readonly command: string;
+  readonly label: keyof StarUiText;
+  readonly icon: string;
+  readonly value?: string;
+}
+/**
+ * Rich text field (PrimeNG `p-editor`, without Quill): a `contenteditable` area with a
+ * formatting toolbar (bold, italic, underline, heading, lists, link, clear). Value is HTML,
+ * sanitized with Angular's `DomSanitizer` both when it is shown and when it is stored.
+ *
+ * Note: formatting uses `document.execCommand`, which browsers still support but no longer
+ * develop. For complex documents use a dedicated editor library.
+ *
+ * `<star-editor [formField]="form.response" ariaLabel="Response" />`
+ */
+export declare class StarEditor implements FormValueControl<string> {
+  protected readonly text: StarUiText;
+  private readonly sanitizer;
+  /** The content as HTML. Edits by the user are stored sanitized. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /** Text shown while the editor is empty. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** CSS `min-height` of the editing area. */
+  readonly minHeight: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the editing area. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly commands: readonly EditorCommand[];
+  protected label(cmd: EditorCommand): string;
+  private readonly area;
+  private readonly active;
+  private lastWritten;
+  constructor();
+  private sanitize;
+  protected onInput(): void;
+  protected run(cmd: EditorCommand): void;
+  protected link(): void;
+  protected isActive(cmd: EditorCommand): boolean | null;
+  protected refreshState(): void;
+  focus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarEditor, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarEditor, "star-editor", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "minHeight": {
+      "alias": "minHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "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;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+export {};

package/types/star-ng-ui-field.d.ts

@@ -0,0 +1,146 @@
+import * as i0 from "@angular/core";
+import { Signal } from "@angular/core";
+/** The part of a Signal Forms `FieldState` that the field wrapper reads. */
+export interface StarFieldStateLike {
+  touched(): boolean;
+  invalid(): boolean;
+  required?(): boolean;
+  errors(): readonly {
+    readonly kind: string;
+    readonly message?: string;
+  }[];
+}
+/**
+ * Form field wrapper: uppercase label, the control, a hint and an error message
+ * (PrimeNG `p-floatlabel` / `p-iftalabel` + `p-message` in one, StarNG style).
+ *
+ * Pass a Signal Forms field state to show its first error after the user touches the control:
+ * ```html
+ * <star-field label="Email" hint="Work address" [state]="form.email()">
+ *   <input starInput [formField]="form.email" type="email" />
+ * </star-field>
+ * ```
+ */
+export declare class StarField {
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  /** Explicit error text. Wins over `state` errors. */
+  readonly error: import("@angular/core").InputSignal<string | null>;
+  readonly state: import("@angular/core").InputSignal<StarFieldStateLike | null>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Messages per validation error kind, for errors without a `message`. */
+  readonly messages: import("@angular/core").InputSignal<Readonly<Record<string, string>>>;
+  /**
+   * Id of the labelled control. Set automatically by `starInput` and by StarNG controls that
+   * render their own input (`star-password`, `star-input-number`, `star-input-mask`).
+   */
+  readonly for: import("@angular/core").InputSignal<string | null>;
+  private readonly ids;
+  readonly labelId: string;
+  readonly hintId: string;
+  readonly errorId: string;
+  readonly defaultControlId: string;
+  /** Input id registered by a StarNG control inside the field (see `linkControl`). */
+  private readonly linkedControlId;
+  protected readonly controlId: Signal<string>;
+  protected readonly isRequired: Signal<boolean>;
+  readonly errorText: Signal<string | null>;
+  /** Ids for `aria-describedby` of the control. */
+  readonly describedBy: Signal<string | null>;
+  /**
+   * Called by a StarNG control that renders its own `<input>` inside this field, so the label
+   * points at that input. The control also reads `describedBy()` and `errorText()`.
+   */
+  linkControl(inputId: Signal<string>): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarField, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarField, "star-field", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "state": {
+      "alias": "state";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "messages": {
+      "alias": "messages";
+      "required": false;
+      "isSignal": true;
+    };
+    "for": {
+      "alias": "for";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * Applies StarNG input styling to a native `input` or `textarea` (PrimeNG `pInputText` /
+ * `pTextarea`). Inside `star-field` it links label, hint and error automatically.
+ * `autoResize` on a textarea grows it with its content (CSS `field-sizing: content`,
+ * with a script fallback for browsers without it).
+ */
+export declare class StarInput {
+  protected readonly field: StarField | null;
+  private readonly host;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /**
+   * Signal Forms binds this with `[formField]`, so a field shows as invalid only after the user
+   * has touched it. Left unbound (`undefined`), a plain `invalid` shows at once.
+   */
+  readonly touched: import("@angular/core").InputSignal<boolean | undefined>;
+  readonly autoResize: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Explicit id of the control. Defaults to the id generated by the parent `star-field`. */
+  readonly id: import("@angular/core").InputSignal<string | null>;
+  protected readonly resolvedId: Signal<string | null>;
+  protected readonly showInvalid: Signal<boolean>;
+  private readonly needsFallback;
+  constructor();
+  protected resizeFallback(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarInput, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StarInput, "input[starInput], textarea[starInput]", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoResize": {
+      "alias": "autoResize";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}