@area8975/ui 0.1.0 → 0.1.1-dev.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.1.0",
+  "version": "0.1.1-dev.11",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -33,4 +33,4 @@
   "module": "fesm2022/area8975-ui.mjs",
   "typings": "types/area8975-ui.d.ts",
   "type": "module"
-}
+}

package/types/area8975-ui.d.ts

@@ -1,8 +1,26 @@
-import ApexCharts$1 from "apexcharts";
 import * as i0 from "@angular/core";
-import { ElementRef, OnDestroy, OnInit, TemplateRef, WritableSignal } from "@angular/core";
+import { ElementRef, OnDestroy, OnInit, Signal, TemplateRef, WritableSignal } from "@angular/core";
+import ApexCharts$1 from "apexcharts";
 import { Placement } from "@floating-ui/dom";
 import { Observable } from "rxjs";
+/** One entry in a legend, the colour ties it to its marks. */
+export interface ChartLegendItem {
+  name: string;
+  colour: string;
+  /** Shows the key as a dashed line, for series told apart by line style. */
+  dashed?: boolean;
+}
+/** Anything a legend can be linked to with `for`, every chart is one. */
+export interface ChartLegendSource {
+  readonly legendItems: Signal<ChartLegendItem[]>;
+  readonly legendNote: Signal<string>;
+  /** Series switched off from the legend. */
+  readonly hiddenSeries: WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: WritableSignal<string | null>;
+}
+/** Where a chart draws its own legend, `none` when one is linked elsewhere. */
+export type ChartLegendPosition = 'auto' | 'none';
 /**
  * Categorical colours for chart series, in a fixed order that was checked for
  * colour blindness (adjacent pairs stay apart for protan, deutan and tritan).
@@ -43,7 +61,7 @@ export interface ChartSeries {
 /** Turns a raw value into what the axis, tooltip and table show, e.g. money. */
 export type ChartValueFormatter = (value: number) => string;
 /** Inputs every chart with categories along one axis and values up the other shares. */
-declare abstract class UiAxisChartBase {
+declare abstract class UiAxisChartBase implements ChartLegendSource {
   readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
   readonly categories: import("@angular/core").InputSignal<string[]>;
   /** Says what the chart shows, e.g. "Spending by month". */
@@ -64,8 +82,12 @@ declare abstract class UiAxisChartBase {
    * matter stand out. The way to show more series than there are colours.
    */
   readonly highlight: import("@angular/core").InputSignal<string[] | null>;
+  /** `none` leaves the legend out, for when a `ui-chart-legend` is linked with `for`. */
+  readonly legend: import("@angular/core").InputSignal<ChartLegendPosition>;
   /** Series switched off in the legend. */
-  protected readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
+  readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: import("@angular/core").WritableSignal<string | null>;
   /** Charts that draw lines can tell series apart by dashes too, bars can't. */
   protected readonly supportsDashes: boolean;
   protected readonly isEmpty: import("@angular/core").Signal<boolean>;
@@ -74,12 +96,8 @@ declare abstract class UiAxisChartBase {
   protected readonly colours: import("@angular/core").Signal<string[]>;
   protected readonly dashed: import("@angular/core").Signal<boolean[]>;
   /** Grey context series stay out of the legend, the note says how many there are. */
-  protected readonly legendItems: import("@angular/core").Signal<{
-    colour: string;
-    dashed: boolean;
-    name: string;
-  }[]>;
-  protected readonly legendNote: import("@angular/core").Signal<string>;
+  readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  readonly legendNote: import("@angular/core").Signal<string>;
   protected formatValue(value: number | null | undefined): string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiAxisChartBase, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<UiAxisChartBase, never, never, {
@@ -138,6 +156,11 @@ declare abstract class UiAxisChartBase {
       "required": false;
       "isSignal": true;
     };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -209,13 +232,6 @@ export declare class UiChartComponent {
     };
   }, {}, never, never, true, never>;
 }
-/** One entry in a legend, the colour ties it to its marks. */
-export interface ChartLegendItem {
-  name: string;
-  colour: string;
-  /** Shows the key as a dashed line, for series told apart by line style. */
-  dashed?: boolean;
-}
 /** The loading, empty and data table states around a chart, shared by every chart type. */
 export declare class UiChartFrameComponent {
   readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions>;
@@ -232,8 +248,9 @@ export declare class UiChartFrameComponent {
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly empty: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly showTable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showLegend: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The series the legend is pointing at, the others fade while it's set. */
-  protected readonly emphasis: import("@angular/core").WritableSignal<string | null>;
+  readonly emphasis: import("@angular/core").ModelSignal<string | null>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiChartFrameComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiChartFrameComponent, "ui-chart-frame", never, {
     "options": {
@@ -306,8 +323,19 @@ export declare class UiChartFrameComponent {
       "required": false;
       "isSignal": true;
     };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "emphasis": {
+      "alias": "emphasis";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "hiddenSeries": "hiddenSeriesChange";
+    "emphasis": "emphasisChange";
   }, never, never, true, never>;
 }
 /**
@@ -357,11 +385,15 @@ export declare class UiChartTableComponent {
   }, {}, never, never, true, never>;
 }
 /**
- * A row of colour keys naming what each colour means. Charts use it above
- * the plot, but it works next to anything coloured by series.
+ * A row of colour keys naming what each colour means. Link it to a chart
+ * with `for`, or pass `items` to use it next to anything coloured by series.
  */
 export declare class UiChartLegendComponent {
   readonly items: import("@angular/core").InputSignal<ChartLegendItem[]>;
+  /** Small text after the items, e.g. how many series aren't listed. */
+  readonly note: import("@angular/core").InputSignal<string>;
+  /** A chart to take items from and hide or fade series on, set its `legend` to `none`. */
+  readonly for: import("@angular/core").InputSignal<ChartLegendSource | null>;
   /** Names of items switched off, bound two-way when `toggleable`. */
   readonly hidden: import("@angular/core").ModelSignal<string[]>;
   /** Lets each item be clicked to hide or show its series. */
@@ -371,6 +403,9 @@ export declare class UiChartLegendComponent {
   private readonly hovered;
   private readonly focused;
   private readonly pointedAt;
+  protected readonly shownItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  protected readonly shownNote: import("@angular/core").Signal<string>;
+  private readonly hiddenNames;
   protected readonly visibleCount: import("@angular/core").Signal<number>;
   constructor();
   protected hover(name: string | null): void;
@@ -382,7 +417,17 @@ export declare class UiChartLegendComponent {
   static ɵcmp: i0.ɵɵComponentDeclaration<UiChartLegendComponent, "ui-chart-legend", never, {
     "items": {
       "alias": "items";
-      "required": true;
+      "required": false;
+      "isSignal": true;
+    };
+    "note": {
+      "alias": "note";
+      "required": false;
+      "isSignal": true;
+    };
+    "for": {
+      "alias": "for";
+      "required": false;
       "isSignal": true;
     };
     "hidden": {
@@ -429,6 +474,44 @@ export declare class UiLineChartComponent extends UiAxisChartBase {
 export declare const LineChartCurves: readonly ["straight", "smooth", "stepline"];
 /** @see {@link LineChartCurves} */
 export type LineChartCurve = typeof LineChartCurves[number];
+/**
+ * Slices for showing how a whole splits into parts. Each category is a
+ * slice, only the first series is drawn. Best kept to a handful of slices,
+ * fold the small ones into "Other".
+ */
+export declare class UiPieChartComponent extends UiAxisChartBase {
+  readonly variant: import("@angular/core").InputSignal<"pie" | "donut">;
+  /** Shown above the total in the middle of a donut. */
+  readonly totalLabel: import("@angular/core").InputSignal<string>;
+  protected readonly values: import("@angular/core").Signal<(number | null)[]>;
+  protected readonly isEmpty: import("@angular/core").Signal<boolean>;
+  protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
+  protected readonly styles: import("@angular/core").Signal<ChartSeriesStyle[]>;
+  readonly legendItems: import("@angular/core").Signal<{
+    colour: string;
+    dashed: boolean;
+    name: string;
+  }[]>;
+  private readonly slices;
+  protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiPieChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiPieChartComponent, "ui-pie-chart", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalLabel": {
+      "alias": "totalLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** pie fills the whole circle, donut leaves a hole with the total in it. */
+export declare const PieChartVariants: readonly ["pie", "donut"];
+/** @see {@link PieChartVariants} */
+export type PieChartVariant = typeof PieChartVariants[number];
 /** Native type values ui-input supports. File/checkbox/radio/range need their own components. */
 export declare const InputTypes: readonly ["text", "email", "tel", "url", "search", "password", "number", "date", "time", "datetime-local", "month", "week", "color"];
 /** @see {@link InputTypes} */
@@ -676,7 +759,7 @@ export declare class UiInputComponent<ValueType = string> {
   readonly name: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "numeric" | "email" | "tel" | "url" | "decimal">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "numeric" | "decimal" | "email" | "tel" | "url">;
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -953,6 +1036,10 @@ export interface UiOverlayOptions {
   offset: number;
   viewportPadding: number;
 }
+export interface UiOverlayStackEntry {
+  onDocumentClick: (event: MouseEvent) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+}
 export interface SelectDataSourceParameters {
   query: string;
   page: number;
@@ -1424,7 +1511,7 @@ export type BadgeSize = typeof BadgeSizes[number];
  * A general-purpose button.
  */
 export declare class UiButtonComponent {
-  readonly appearance: import("@angular/core").InputSignal<"solid" | "none" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
   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>;
@@ -1722,6 +1809,7 @@ export declare class UiKpiComponent {
   readonly value: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  readonly iconPosition: import("@angular/core").InputSignal<"right" | "left">;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiKpiComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiKpiComponent, "ui-kpi", never, {
     "title": {
@@ -1744,6 +1832,11 @@ export declare class UiKpiComponent {
       "required": false;
       "isSignal": true;
     };
+    "iconPosition": {
+      "alias": "iconPosition";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["[kpi-value]", "[kpi-badge]"], true, never>;
 }
 export declare class UiLoadingComponent {
@@ -1761,10 +1854,12 @@ export declare class UiLoadingComponent {
 }
 export declare const UI_LOADING_TYPES: ["spinner", "throbber", "pulse-ring", "pulse-dot", "wave", "equaliser", "terminal", "blinking-caret", "shimmer-text", "loading-dots", "bouncing-dots", "fading-dots"];
 export type UiLoadingType = typeof UI_LOADING_TYPES[number];
+type ModalSize = 'sm' | 'md' | 'lg';
 export declare class UiModalComponent {
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
   readonly closeBehaviour: import("@angular/core").InputSignal<UiOverlayCloseBehaviour>;
   readonly title: import("@angular/core").InputSignal<string>;
+  readonly size: import("@angular/core").InputSignal<ModalSize>;
   readonly classes: import("@angular/core").InputSignal<string>;
   readonly headerElement: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
   readonly footerElement: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
@@ -1787,6 +1882,11 @@ export declare class UiModalComponent {
       "required": false;
       "isSignal": true;
     };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
     "classes": {
       "alias": "classes";
       "required": false;
@@ -1940,7 +2040,7 @@ export declare class UiProgressComponent {
   readonly shape: import("@angular/core").InputSignal<"square" | "straight" | "rounded">;
   readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
   readonly title: import("@angular/core").InputSignal<string>;
-  readonly labelPosition: import("@angular/core").InputSignal<"top" | "none" | "end" | "floating" | "inside">;
+  readonly labelPosition: import("@angular/core").InputSignal<"none" | "top" | "end" | "floating" | "inside">;
   readonly labelWith: import("@angular/core").InputSignal<(value: number, max: number) => string>;
   /** Splits the bar into this many blocks. */
   readonly steps: import("@angular/core").InputSignal<number | null>;
@@ -2531,8 +2631,9 @@ export declare class UiLayoutComponent {
   static ɵfac: i0.ɵɵFactoryDeclaration<UiLayoutComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiLayoutComponent, "ui-layout", never, {}, {}, ["sidebar"], ["*"], true, never>;
 }
-export declare class UiOverlayComponent {
+export declare class UiOverlayComponent implements UiOverlayStackEntry {
   private readonly positioner;
+  private readonly stack;
   readonly content: import("@angular/core").InputSignal<ElementRef<HTMLInputElement> | undefined>;
   readonly anchor: import("@angular/core").InputSignal<ElementRef<HTMLElement> | undefined>;
   readonly closeBehaviour: import("@angular/core").InputSignal<UiOverlayCloseBehaviour>;
@@ -2544,8 +2645,8 @@ export declare class UiOverlayComponent {
   readonly matchWidth: import("@angular/core").InputSignal<DropdownMatchWidth | null>;
   constructor();
   private readonly close;
-  private onDocumentClick;
-  private onKeyDown;
+  readonly onDocumentClick: (event: MouseEvent) => void;
+  readonly onKeyDown: (event: KeyboardEvent) => void;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiOverlayComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiOverlayComponent, "ui-overlay", ["uiOverlay"], {
     "content": {
@@ -2946,7 +3047,7 @@ export declare class UiDatepickerComponent {
 }
 export declare class UiDropdownButtonComponent {
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
-  readonly appearance: import("@angular/core").InputSignal<"solid" | "none" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
   readonly icon: import("@angular/core").InputSignal<string>;
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiDropdownButtonComponent, never>;