@star-ng/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,109 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+/** Lazy tab body: `<ng-template starTabContent>…</ng-template>` renders on first activation only. */
+export declare class StarTabContent {
+  readonly template: TemplateRef<unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarTabContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StarTabContent, "ng-template[starTabContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * One tab and its panel. The host element is the `tabpanel`.
+ * Eager content goes directly inside; wrap heavy content in `ng-template starTabContent`.
+ */
+export declare class StarTab {
+  private readonly tabs;
+  private readonly ids;
+  readonly value: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Phosphor icon class, for example `ph-bold ph-files`. */
+  readonly icon: import("@angular/core").InputSignal<string | null>;
+  readonly badge: import("@angular/core").InputSignal<string | number | null>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly tabId: string;
+  readonly panelId: string;
+  protected readonly lazy: import("@angular/core").Signal<StarTabContent | undefined>;
+  readonly active: import("@angular/core").Signal<boolean>;
+  /** Stays true after the first activation, so lazy content keeps its state. */
+  protected readonly rendered: import("@angular/core").WritableSignal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarTab, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarTab, "star-tab", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "badge": {
+      "alias": "badge";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["lazy"], ["*"], true, never>;
+}
+/**
+ * Tabs (PrimeNG `p-tabs`): `[(value)]`, disabled tabs, icons, badges, lazy panels and the
+ * WAI-ARIA tabs keyboard model (Arrow keys, Home, End; automatic or manual activation).
+ *
+ * ```html
+ * <star-tabs [(value)]="tab" ariaLabel="Order sections">
+ *   <star-tab value="details" label="Details">…</star-tab>
+ *   <star-tab value="history" label="History"><ng-template starTabContent>…</ng-template></star-tab>
+ * </star-tabs>
+ * ```
+ */
+export declare class StarTabs {
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  readonly variant: import("@angular/core").InputSignal<"line" | "pill">;
+  /** `false`: arrow keys move focus only; Enter / Space activate (manual activation). */
+  readonly selectOnFocus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly changed: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly tabs: import("@angular/core").Signal<readonly StarTab[]>;
+  private readonly buttons;
+  /** Selected value; falls back to the first enabled tab while `value` is unset. */
+  readonly selected: import("@angular/core").Signal<string | null>;
+  /** Roving tabindex target; follows the selection, moves with arrows in manual mode. */
+  protected readonly focusValue: import("@angular/core").WritableSignal<string | null>;
+  protected select(tab: StarTab): void;
+  protected onKeydown(event: KeyboardEvent, current: StarTab): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarTabs, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarTabs, "star-tabs", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectOnFocus": {
+      "alias": "selectOnFocus";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+  }, ["tabs"], ["*"], true, never>;
+}

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

@@ -0,0 +1,35 @@
+import { StarSeverity } from "@star-ng/ui/core";
+import * as i0 from "@angular/core";
+/**
+ * Status label (PrimeNG `p-tag`): severity color, optional icon, rounded pill.
+ * `<star-tag severity="success" icon="ph-bold ph-check">Closed</star-tag>`
+ */
+export declare class StarTag {
+  readonly severity: import("@angular/core").InputSignal<StarSeverity>;
+  readonly value: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<string | null>;
+  readonly rounded: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarTag, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarTag, "star-tag", never, {
+    "severity": {
+      "alias": "severity";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "rounded": {
+      "alias": "rounded";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/star-ng-ui-theme-switch.d.ts

@@ -0,0 +1,36 @@
+import { StarMenuItem } from "@star-ng/ui/menu";
+import { StarThemeMode } from "@star-ng/ui/theme";
+import * as i0 from "@angular/core";
+/**
+ * Theme switch: a small speed dial with System, Light and Dark. The button shows the icon of
+ * the current choice; `StarThemeService` applies and remembers it. The texts come from
+ * `STAR_UI_TEXT` (`theme`, `themeSystem`, `themeLight`, `themeDark`).
+ *
+ * The control is not positioned: the host places it. For a fixed corner:
+ *
+ * ```css
+ * star-theme-switch {
+ *   position: fixed;
+ *   top: var(--star-space-3);
+ *   inset-inline-end: var(--star-space-4);
+ *   z-index: 40;
+ * }
+ * ```
+ *
+ * `<star-theme-switch />`
+ */
+export declare class StarThemeSwitch {
+  private readonly theme;
+  private readonly text;
+  protected readonly activeIndex: import("@angular/core").Signal<number>;
+  protected readonly current: import("@angular/core").Signal<{
+    readonly mode: StarThemeMode;
+    readonly icon: string;
+  }>;
+  private modeLabel;
+  protected readonly items: import("@angular/core").Signal<readonly StarMenuItem[]>;
+  /** Accessible name of the button, for example "Theme: Dark". */
+  protected readonly label: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarThemeSwitch, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarThemeSwitch, "star-theme-switch", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,95 @@
+import * as i0 from "@angular/core";
+import { InjectionToken } from "@angular/core";
+/**
+ * Source of the first-paint theme script. It sets `data-theme` on `<html>` before the browser
+ * paints, so a dark-theme user does not see a light frame while the application starts.
+ *
+ * The rule is the same as in `StarThemeService`: the saved choice (`system`, `light` or
+ * `dark`), else the system setting.
+ *
+ * A strict Content Security Policy (`script-src 'self'`, no `'unsafe-inline'`) blocks an inline
+ * script. There are three ways that work with it. See the "Content Security Policy" section of
+ * the "Dark mode" guide:
+ *
+ * 1. the static file `@star-ng/ui/theme/star-theme-first-paint.js` (see
+ *    `starThemeFirstPaintFileScript`), loaded with `<script src>`;
+ * 2. the hash of this text in the policy (`STAR_THEME_FIRST_PAINT_HASH`,
+ *    `starThemeFirstPaintHash`);
+ * 3. a nonce (`starThemeFirstPaintElement`).
+ *
+ * ```ts
+ * // For example in a build script or a server-side template:
+ * const html = `<script>${starThemeFirstPaintScript()}</script>`;
+ * ```
+ *
+ * @param storageKey The `localStorage` key. Use the value of `STAR_THEME_STORAGE_KEY`.
+ */
+export declare function starThemeFirstPaintScript(storageKey?: string): string;
+/**
+ * Text of the static file `@star-ng/ui/theme/star-theme-first-paint.js`. It is the same script as
+ * `starThemeFirstPaintScript()`, but the storage key comes from the `data-storage-key`
+ * attribute of its own `<script>` element (default `'star-theme'`), so a custom key needs no
+ * inline code:
+ *
+ * ```html
+ * <script src="star-theme-first-paint.js" data-storage-key="my-app-theme"></script>
+ * ```
+ *
+ * A unit test keeps the file and this function identical.
+ */
+export declare function starThemeFirstPaintFileScript(): string;
+/**
+ * CSP hash source of `starThemeFirstPaintScript()` with the default storage key. Put it in
+ * `script-src`, and write the script between the tags with no extra character: no space, no
+ * line break. A unit test recomputes it, so it cannot be stale.
+ */
+export declare const STAR_THEME_FIRST_PAINT_HASH = "'sha256-mHrWsD/vOGmnKvtGE+U7/5fQm439nYWV30PcQ/ez708='";
+/**
+ * Computes the CSP hash source (`'sha256-...'`, with the quotes) of the exact text of
+ * `starThemeFirstPaintScript(storageKey)`. The browser hashes the UTF-8 bytes of the text
+ * between `<script>` and `</script>`. Use it for a custom storage key (needs Web Crypto, so a
+ * secure context or a current Node.js version).
+ */
+export declare function starThemeFirstPaintHash(storageKey?: string): Promise<string>;
+/**
+ * The full `<script nonce="...">...</script>` element text of the first-paint script, for a
+ * server-rendered page. Add `'nonce-<same value>'` to `script-src`. Use a new random nonce
+ * (at least 128 bits) for each response.
+ *
+ * @throws Error when the nonce is not a valid base64 or base64url value. The check keeps
+ * markup out of the attribute.
+ */
+export declare function starThemeFirstPaintElement(nonce: string, storageKey?: string): string;
+/** Default `localStorage` key of the saved theme choice. */
+export declare const STAR_THEME_DEFAULT_STORAGE_KEY = "star-theme";
+/** `'system'` follows the operating system setting (`prefers-color-scheme`). */
+export type StarThemeMode = 'system' | 'light' | 'dark';
+/**
+ * `localStorage` key of the saved theme choice. Provide another value when two applications
+ * on one origin must keep separate choices. The first-paint script must use the same key.
+ */
+export declare const STAR_THEME_STORAGE_KEY: InjectionToken<string>;
+/**
+ * Color theme of the application. The StarNG tokens change with `data-theme` on `<html>`
+ * (`@star-ng/ui/styles/_tokens.scss`); this service sets that attribute and remembers the choice
+ * in the browser (`localStorage`). Inject it in the root component, so the theme applies on
+ * every page.
+ *
+ * The service is optional: an application that has one fixed theme does not need it.
+ */
+export declare class StarThemeService {
+  private readonly document;
+  private readonly storageKey;
+  private readonly view;
+  private readonly systemQuery;
+  private readonly systemDark;
+  /** The user's choice. */
+  readonly mode: import("@angular/core").WritableSignal<StarThemeMode>;
+  /** The theme in use now: `'system'` resolved to light or dark. */
+  readonly theme: import("@angular/core").Signal<"light" | "dark">;
+  constructor();
+  setMode(mode: StarThemeMode): void;
+  private stored;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}

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

@@ -0,0 +1,84 @@
+import * as i0 from "@angular/core";
+export type StarToastSeverity = 'success' | 'info' | 'warn' | 'error';
+export interface StarToastOptions {
+  readonly severity?: StarToastSeverity;
+  readonly summary: string;
+  readonly detail?: string;
+  /** Milliseconds before auto close (default 5000). */
+  readonly life?: number;
+  /** Stays until the user closes it. */
+  readonly sticky?: boolean;
+  /** Targets a specific `<star-toast key="...">`. */
+  readonly key?: string;
+}
+export interface StarToastMessage extends Required<Omit<StarToastOptions, 'detail' | 'key'>> {
+  readonly id: number;
+  readonly detail?: string;
+  readonly key?: string;
+}
+/**
+ * Toast notifications (PrimeNG `MessageService` + `p-toast`): severities, auto-close with
+ * pause on hover / focus, sticky messages, duplicate suppression and a visible-stack limit.
+ *
+ * `inject(StarToastService).success('Saved', 'Order ORD-102 was updated.')`
+ */
+export declare class StarToastService {
+  private readonly items;
+  private readonly timers;
+  private nextId;
+  readonly messages: import("@angular/core").Signal<readonly StarToastMessage[]>;
+  /** Identical summary + detail while still visible is ignored. */
+  preventDuplicates: boolean;
+  constructor();
+  show(options: StarToastOptions): number;
+  success(summary: string, detail?: string): number;
+  info(summary: string, detail?: string): number;
+  warn(summary: string, detail?: string): number;
+  error(summary: string, detail?: string): number;
+  remove(id: number): void;
+  /** Removes all messages, or only those of one `key`. */
+  clear(key?: string): void;
+  pause(id: number): void;
+  resume(id: number): void;
+  private startTimer;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarToastService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Toast outlet. Place once in the app shell. It renders as a manual popover, so toasts stay
+ * above open modal dialogs (top layer).
+ */
+export declare class StarToast {
+  protected readonly toasts: StarToastService;
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  private readonly host;
+  /**
+   * Corner of the screen. `-left` and `-right` are physical; `-start` and `-end` follow the
+   * writing direction (the start corner is on the right in right-to-left).
+   */
+  readonly position: import("@angular/core").InputSignal<"top-right" | "top-left" | "top-start" | "top-end" | "top-center" | "bottom-right" | "bottom-left" | "bottom-start" | "bottom-end" | "bottom-center">;
+  readonly key: import("@angular/core").InputSignal<string | undefined>;
+  /** Newest messages beyond this count wait until older ones close. */
+  readonly stackLimit: import("@angular/core").InputSignal<number>;
+  protected readonly visible: import("@angular/core").Signal<StarToastMessage[]>;
+  constructor();
+  protected icon(severity: StarToastSeverity): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarToast, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarToast, "star-toast", never, {
+    "position": {
+      "alias": "position";
+      "required": false;
+      "isSignal": true;
+    };
+    "key": {
+      "alias": "key";
+      "required": false;
+      "isSignal": true;
+    };
+    "stackLimit": {
+      "alias": "stackLimit";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/star-ng-ui-toggle-switch.d.ts

@@ -0,0 +1,81 @@
+import { FormCheckboxControl } from "@angular/forms/signals";
+import * as i0 from "@angular/core";
+/**
+ * On/off switch (PrimeNG `p-toggleswitch`). Native checkbox with `role="switch"`, so Space toggles
+ * and screen readers announce "on" / "off".
+ *
+ * `<star-toggle-switch [(checked)]="notify">Email notifications</star-toggle-switch>`
+ */
+export declare class StarToggleSwitch implements FormCheckboxControl {
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  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 name: import("@angular/core").InputSignal<string>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+  readonly inputId: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  /** Set false when the switch has no visible label (then set `ariaLabel`). */
+  readonly hasLabel: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly box;
+  protected onChange(box: HTMLInputElement): void;
+  focus(options?: FocusOptions): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarToggleSwitch, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarToggleSwitch, "star-toggle-switch", never, {
+    "checked": {
+      "alias": "checked";
+      "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;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "hasLabel": {
+      "alias": "hasLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "checked": "checkedChange";
+    "touch": "touch";
+  }, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,66 @@
+import * as i0 from "@angular/core";
+/**
+ * Side of the host. `left` and `right` are the physical sides of the screen, as in CSS;
+ * `start` and `end` follow the writing direction (`start` is the right side in right-to-left).
+ */
+export type StarTooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end';
+export declare class StarTooltipPanel {
+  readonly text: import("@angular/core").WritableSignal<string>;
+  readonly id: import("@angular/core").WritableSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarTooltipPanel, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarTooltipPanel, "star-tooltip-panel", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tooltip (PrimeNG `pTooltip`): shows on hover and keyboard focus, hides on Escape, links the
+ * host with `aria-describedby`. Rendered as a native popover so it appears above dialogs.
+ *
+ * `<button starTooltip="Export to CSV" starTooltipPosition="bottom">…</button>`
+ */
+export declare class StarTooltip {
+  private readonly injector;
+  private readonly host;
+  private readonly panelId;
+  private readonly directionality;
+  readonly starTooltip: import("@angular/core").InputSignal<string>;
+  readonly starTooltipPosition: import("@angular/core").InputSignal<StarTooltipPosition>;
+  readonly starTooltipShowDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly starTooltipHideDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly starTooltipDisabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly describedBy: import("@angular/core").WritableSignal<string | null>;
+  private overlayRef;
+  private panelRef;
+  private timer;
+  constructor();
+  protected scheduleShow(): void;
+  protected scheduleHide(): void;
+  show(): void;
+  hide(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarTooltip, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<StarTooltip, "[starTooltip]", never, {
+    "starTooltip": {
+      "alias": "starTooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "starTooltipPosition": {
+      "alias": "starTooltipPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "starTooltipShowDelay": {
+      "alias": "starTooltipShowDelay";
+      "required": false;
+      "isSignal": true;
+    };
+    "starTooltipHideDelay": {
+      "alias": "starTooltipHideDelay";
+      "required": false;
+      "isSignal": true;
+    };
+    "starTooltipDisabled": {
+      "alias": "starTooltipDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,14 @@
+import { Provider } from "@angular/core";
+/**
+ * Reads the control texts from Transloco: key `<prefix>.<name>` (default `ui.close`, `ui.page`…),
+ * with `{{ param }}` placeholders for function entries (names in `STAR_UI_TEXT_PARAMS`).
+ * A missing key falls back to the English default.
+ *
+ * Every entry is a getter that reads a signal which changes on language switch and on
+ * translation load, so OnPush controls re-render with the new language.
+ *
+ * ```ts
+ * providers: [provideStarUiTextFromTransloco()]
+ * ```
+ */
+export declare function provideStarUiTextFromTransloco(prefix?: string): Provider;