@star-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,39 @@
+import * as i0 from "@angular/core";
+export interface StarBreadcrumbItem {
+  readonly label: string;
+  readonly routerLink?: string | readonly unknown[];
+  readonly url?: string;
+  readonly icon?: string;
+}
+/**
+ * Breadcrumb (PrimeNG `p-breadcrumb`): `nav` landmark, ordered list, `aria-current="page"` on
+ * the last item, optional home link.
+ *
+ * `<star-breadcrumb [home]="{ label: 'Home', icon: 'ph-bold ph-house', routerLink: '/' }" [items]="trail" />`
+ */
+export declare class StarBreadcrumb {
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  readonly items: import("@angular/core").InputSignal<readonly StarBreadcrumbItem[]>;
+  /** First item; when it has an icon, only the icon shows (label stays for screen readers). */
+  readonly home: import("@angular/core").InputSignal<StarBreadcrumbItem | null>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  protected all(): readonly StarBreadcrumbItem[];
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarBreadcrumb, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarBreadcrumb, "star-breadcrumb", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "home": {
+      "alias": "home";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,79 @@
+import * as i0 from "@angular/core";
+export type StarButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'ghost-danger' | 'success' | 'warning';
+export type StarButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Button: the one component for every call to action. Variants, sizes, icons, a loading
+ * state and an icon-only form. Styles: `@star-ng/ui/styles/controls/_button.scss` (`.star-btn`).
+ *
+ * `<star-button variant="primary" trailingIcon="ph-bold ph-arrow-right" (pressed)="next()">Next</star-button>`
+ */
+export declare class StarButton {
+  readonly variant: import("@angular/core").InputSignal<StarButtonVariant>;
+  readonly size: import("@angular/core").InputSignal<StarButtonSize>;
+  readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly leadingIcon: import("@angular/core").InputSignal<string | null>;
+  readonly trailingIcon: import("@angular/core").InputSignal<string | null>;
+  readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly pressed: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  onClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarButton, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarButton, "star-button", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "leadingIcon": {
+      "alias": "leadingIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "trailingIcon": {
+      "alias": "trailingIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconOnly": {
+      "alias": "iconOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "pressed": "pressed";
+  }, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+/**
+ * Content card (PrimeNG `p-card`) on the StarNG `.star-card` surface: title, subtitle,
+ * header actions, body and footer slots.
+ * ```html
+ * <star-card header="Open orders" subheader="Last 30 days">
+ *   <star-button starCardActions variant="ghost" size="sm">View all</star-button>
+ *   …body…
+ *   <div starCardFooter>…</div>
+ * </star-card>
+ * ```
+ */
+export declare class StarCard {
+  readonly header: import("@angular/core").InputSignal<string>;
+  readonly subheader: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarCard, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarCard, "star-card", never, {
+    "header": {
+      "alias": "header";
+      "required": false;
+      "isSignal": true;
+    };
+    "subheader": {
+      "alias": "subheader";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[starCardMedia]", "[starCardActions]", "*", "[starCardFooter]"], true, never>;
+}

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

@@ -0,0 +1,337 @@
+import * as i0 from "@angular/core";
+interface StarChartScale {
+  /** First tick, the lower end of the axis. */
+  readonly min: number;
+  /** Last tick, the upper end of the axis. */
+  readonly max: number;
+  /** Distance between two ticks. */
+  readonly step: number;
+  readonly ticks: readonly number[];
+}
+interface StarChartStackSegment {
+  readonly series: number;
+  /** The real value of the cell. */
+  readonly value: number;
+  /** Where the segment starts and ends on the axis (percent of the column in percent mode). */
+  readonly start: number;
+  readonly end: number;
+}
+interface StarChartStackColumn {
+  readonly segments: readonly StarChartStackSegment[];
+  /** Sum of the positive values. */
+  readonly positive: number;
+  /** Sum of the negative values (0 or less). */
+  readonly negative: number;
+  /** Sum of all values: `positive + negative`. */
+  readonly total: number;
+}
+export interface StarChartSeries {
+  readonly label: string;
+  readonly data: readonly number[];
+}
+/** One point of a scatter series. */
+export interface StarChartPoint {
+  readonly x: number;
+  readonly y: number;
+}
+/**
+ * A scatter series: points with an x and a y value. Points with a missing or not finite `x` or
+ * `y` are left out of the plot and the table.
+ */
+export interface StarChartPointSeries {
+  readonly label: string;
+  readonly data: readonly StarChartPoint[];
+}
+export type StarChartType = 'bar' | 'stacked-bar' | 'line' | 'area' | 'doughnut' | 'pie' | 'radar' | 'polar-area' | 'scatter';
+/**
+ * Categorical slots, in fixed order (never cycled). Validated with the dataviz palette checks:
+ * light on #ffffff and dark on #0f1216 pass lightness, chroma, CVD (adjacent ΔE ≥ 8.4) and
+ * normal-vision floors. Slots 3–5 are below 3:1 on white, so every chart ships a table view.
+ * Defined as design tokens `--star-chart-1…8` in `styles/_tokens.scss`.
+ */
+export declare const STAR_CHART_SLOTS = 8;
+/**
+ * Chart (PrimeNG `p-chart` without Chart.js): dependency-free SVG bar, stacked bar, line, area,
+ * doughnut, pie, radar, polar area and scatter charts.
+ * One y-axis, recessive grid, 2px lines, 4px rounded bar ends on the baseline, 2px surface gaps,
+ * legend for 2+ series, hover tooltip per mark (crosshair on line), and a data table (visible on
+ * demand, always present for screen readers). Colors are fixed series slots in both themes.
+ *
+ * ```html
+ * <star-chart type="bar" title="Orders per month" [labels]="months" [series]="volume" />
+ * ```
+ */
+export declare class StarChart {
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  protected readonly W = 640;
+  protected readonly H = 280;
+  protected readonly RW = 520;
+  protected readonly RH = 300;
+  protected readonly PAD: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  protected readonly SP: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  private readonly ids;
+  protected readonly titleId: string;
+  protected readonly descriptionId: string;
+  /**
+   * `'area'` is a line chart with a soft fill under each line. `'pie'` is a doughnut without
+   * the hole and the total; like the doughnut it shows the top 3 categories and "Other".
+   * `'stacked-bar'` stacks the series of a category in one column. `'radar'` draws one polygon per
+   * series over one axis per category. `'polar-area'` draws one sector per category of the first
+   * series, with the area of the sector in proportion to the value. `'scatter'` plots points from
+   * `{ x, y }` data on two numeric axes.
+   */
+  readonly type: import("@angular/core").InputSignal<StarChartType>;
+  /**
+   * Stacked bar only: scale every column to 100 percent, to compare the shares of the series
+   * instead of the totals. The tooltip still shows the real values.
+   */
+  readonly percent: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Doughnut or pie: one series as parts of a whole. */
+  protected readonly round: import("@angular/core").Signal<boolean>;
+  protected readonly kind: import("@angular/core").Signal<"radar" | "scatter" | "round" | "polar" | "axis">;
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Category labels (x axis, or doughnut slices). */
+  readonly labels: import("@angular/core").InputSignal<readonly string[]>;
+  /**
+   * One or more series. Doughnut, pie and polar area use the first series only. More than 8
+   * series are cut. Scatter takes `{ x, y }` points in `data`: plain numbers there are y values
+   * with the position in the series as x.
+   */
+  readonly series: import("@angular/core").InputSignal<readonly (StarChartSeries | StarChartPointSeries)[]>;
+  /** Name of the category column of the table. Scatter: name of the x axis and column. */
+  readonly categoryLabel: import("@angular/core").InputSignal<string | null>;
+  /** Scatter and polar area: name of the y axis and column, or of the value column. */
+  readonly valueLabel: import("@angular/core").InputSignal<string | null>;
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  /** Start the table view open. */
+  readonly table: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly showTable: import("@angular/core").WritableSignal<boolean>;
+  protected readonly hover: import("@angular/core").WritableSignal<number | null>;
+  private readonly numberFormat;
+  private readonly preciseFormat;
+  protected format(value: number): string;
+  /** Up to 3 decimals: scatter values are measurements, not counts. */
+  protected precise(value: number): string;
+  /** Axis tick text: just enough decimals to show every tick exactly. */
+  private tickFormatter;
+  protected color(index: number): string;
+  /** The series as numbers: a point of a scatter series counts as its y value. */
+  protected readonly numeric: import("@angular/core").Signal<readonly StarChartSeries[]>;
+  /** The series that are drawn: the first 8. */
+  protected readonly drawn: import("@angular/core").Signal<StarChartSeries[]>;
+  /** Table cell of a series at a category: a missing value reads as 0. */
+  protected cell(series: StarChartSeries | undefined, index: number): string;
+  protected readonly firstHeader: import("@angular/core").Signal<string>;
+  protected readonly xName: import("@angular/core").Signal<string>;
+  protected readonly yName: import("@angular/core").Signal<string>;
+  protected readonly valueName: import("@angular/core").Signal<string>;
+  protected readonly legend: import("@angular/core").Signal<{
+    label: string;
+    color: string;
+    shape: string;
+  }[]>;
+  /** Text of the accessible description: the kind of chart, its size and the range of values. */
+  protected readonly description: import("@angular/core").Signal<string>;
+  protected readonly stack: import("@angular/core").Signal<StarChartStackColumn[]>;
+  protected readonly yScale: import("@angular/core").Signal<StarChartScale>;
+  protected readonly ticks: import("@angular/core").Signal<readonly number[]>;
+  protected readonly yTick: import("@angular/core").Signal<(value: number) => string>;
+  protected readonly band: import("@angular/core").Signal<number>;
+  /** Category labels cut to the width of their column, with the full text as a title. */
+  protected readonly axisLabels: import("@angular/core").Signal<{
+    text: string;
+    full: string;
+  }[]>;
+  protected x(index: number): number;
+  protected y(value: number): number;
+  /** Grouped bars: 2px gap between neighbours, 4px rounded top, square base. */
+  protected readonly bars: import("@angular/core").Signal<{
+    key: string;
+    index: number;
+    path: string;
+    color: string;
+  }[]>;
+  /** Stacked bars: one rectangle per value that is not 0, outlined in a darker tone. */
+  protected readonly segments: import("@angular/core").Signal<{
+    key: string;
+    index: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+  }[]>;
+  /** Share of a stack segment in its column, in percent (percent mode). */
+  protected share(segment: StarChartStackSegment | undefined): number;
+  protected readonly lines: import("@angular/core").Signal<{
+    label: string;
+    data: readonly number[];
+    color: string;
+    path: string;
+    area: string;
+  }[]>;
+  protected readonly total: import("@angular/core").Signal<number>;
+  /** Doughnut: top 3 categories + "Other" (4 slots validated for all-pairs comparison). */
+  protected readonly slices: import("@angular/core").Signal<{
+    label: string;
+    value: number;
+    percent: number;
+    color: string;
+    path: string;
+  }[]>;
+  /** Label at the end of an axis, cut to a fixed length with the full text as a title. */
+  private axisLabel;
+  /** Radar: one scale for all series, rings and spokes, one polygon and its markers per series. */
+  protected readonly radar: import("@angular/core").Signal<{
+    scale: StarChartScale;
+    rings: {
+      value: number;
+      radius: number;
+      path: string;
+      text: string;
+    }[];
+    spokes: {
+      x: number;
+      y: number;
+    }[];
+    labels: {
+      x: number;
+      y: number;
+      anchor: "start" | "middle" | "end";
+      dy: string;
+      text: string;
+      full: string;
+    }[];
+    hits: string[];
+    polygons: {
+      label: string;
+      color: string;
+      path: string;
+      vertices: {
+        index: number;
+        shape: string;
+      }[];
+    }[];
+  }>;
+  /**
+   * Polar area: equal angles, and the area of a sector in proportion to its value, so the radius
+   * grows with the square root of the value. The rings are at round values on that scale.
+   */
+  protected readonly polar: import("@angular/core").Signal<{
+    scale: StarChartScale;
+    rings: {
+      value: number;
+      radius: number;
+      text: string;
+      x: number;
+      y: number;
+    }[];
+    sectors: {
+      path: string;
+      hit: string;
+      label: {
+        x: number;
+        y: number;
+        anchor: "start" | "middle" | "end";
+        dy: string;
+        text: string;
+        full: string;
+      };
+      index: number;
+      value: number;
+      radius: number;
+      start: number;
+      end: number;
+      mid: number;
+    }[];
+  }>;
+  /** Points with a finite x and y, per series (all series, for the table). */
+  private readonly scatterData;
+  protected readonly scatterRows: import("@angular/core").Signal<{
+    series: string;
+    x: number;
+    y: number;
+  }[]>;
+  protected readonly scatter: import("@angular/core").Signal<{
+    xTicks: {
+      value: number;
+      position: number;
+      text: string;
+    }[];
+    yTicks: {
+      value: number;
+      position: number;
+      text: string;
+    }[];
+    points: {
+      index: number;
+      seriesLabel: string;
+      color: string;
+      x: number;
+      y: number;
+      px: number;
+      py: number;
+      shape: string;
+      legendShape: string;
+    }[];
+  }>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarChart, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarChart, "star-chart", never, {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "percent": {
+      "alias": "percent";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
+    "series": {
+      "alias": "series";
+      "required": false;
+      "isSignal": true;
+    };
+    "categoryLabel": {
+      "alias": "categoryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueLabel": {
+      "alias": "valueLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "table": {
+      "alias": "table";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,92 @@
+import { FormCheckboxControl } from "@angular/forms/signals";
+import * as i0 from "@angular/core";
+/**
+ * Checkbox (PrimeNG `p-checkbox` binary mode). Native `<input type="checkbox">` for full
+ * keyboard and screen-reader support, with the StarNG box drawn over it.
+ *
+ * Signal Forms: `<star-checkbox [formField]="form.terms">I agree</star-checkbox>`
+ * Standalone:   `<star-checkbox [(checked)]="agree" [indeterminate]="some">Label</star-checkbox>`
+ */
+export declare class StarCheckbox implements FormCheckboxControl {
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  /** Mixed state ("some selected"). Cleared when the user toggles the box. */
+  readonly indeterminate: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: 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 inputId: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | null>;
+  /** Signal Forms touch notification. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly box;
+  /** Errors show only after the user has visited the control. */
+  protected readonly showInvalid: import("@angular/core").Signal<boolean>;
+  protected onChange(box: HTMLInputElement): void;
+  focus(options?: FocusOptions): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarCheckbox, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarCheckbox, "star-checkbox", never, {
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+    "indeterminate": {
+      "alias": "indeterminate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "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;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "checked": "checkedChange";
+    "indeterminate": "indeterminateChange";
+    "touch": "touch";
+  }, never, ["*"], true, never>;
+}